/* =============================================================================
   seiten.css — gemeinsames Vokabular der Leistungsseiten
   (/automation/, /software/; spaeter /websites/)

   Entstanden am 29.08.2026 aus dem eingebetteten Stylesheet von /automation/.
   Dort standen 60,6 KB, von denen 54 % keine Klasse mehr trafen — Ueberreste
   von Mockups, die im August aus dem Rumpf entfernt worden waren. Das Telefon
   hat sie bei jedem Aufruf mitgeladen und geparst, render-blockierend im Kopf.

   Zweite Seite kostet damit 0 zusaetzliche Bytes: die Datei wird geteilt und
   zwischengespeichert, statt auf jeder Seite erneut im HTML zu stehen.
   ============================================================================= */

/* =============================================
   AUTOMATION PAGE — Scoped Styles
   Gleiches Design-System wie alle anderen Seiten
   ============================================= */

.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Hard centering guard: prevent any parent/child overflow from "shifting" the card */
.hero,
.hero * {
    box-sizing: border-box;
}

.hero-container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Hero typography now inherits the unified spec from global.css */

.hero h1 em {
    font-style: normal;
    color: #ffffff;
}

/* ---- Shared section layout ---- */
/* War var(--spacing-3xl) (96 px) und damit anders als auf jeder Seite ohne
   diese Datei (64 px) — bei gleichem Trenner also 256 px gegen 192 px
   Abstand. Jetzt derselbe Wert wie ueberall. */
.section {
    padding: var(--spacing-2xl) var(--spacing-lg);
    position: relative;
}

/* Ein Zahlenband zwischen Hero und erstem Abschnitt stand bis zum 29.08.2026
   in einem nackten .container ganz ohne senkrechtes Polster und klebte damit
   am Hero. Es traegt jetzt denselben Rhythmus wie ein Abschnitt. */
.band-abschnitt {
    padding: var(--spacing-2xl) var(--spacing-lg);
    position: relative;
}

.band-abschnitt .ts-band { margin: 0 auto; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.section-overline {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--primary-vibrant);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.section-subtitle {
    font-size: var(--font-size-body);
    color: rgba(255, 255, 255, 0.72);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.75;
}

.gap-card-header .material-icons {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.68);
}

.gap-middle .material-icons {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.68);
}

/* Tafel, Anmerkung und dieser Kasten stehen untereinander in derselben
   Spalte. Bei 700 gegen 900 px sprang die Kante bei jedem Block. */
.gap-solution-box {
    max-width: 900px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid rgba(89, 131, 146, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
}

.solution-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--accent-text);
}

.solution-icon-row .material-icons { font-size: 24px; }

.gap-solution-box h3 {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-sm);
}

.gap-solution-box p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.75;
}

/* ---- Services grid ---- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.service-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89, 131, 146, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.service-card:hover::before { opacity: 1; }

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.service-card-icon .material-icons {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
}

.service-card h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-sm);
    color: var(--text-light);
}

.service-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-small);
    line-height: 1.65;
    margin-bottom: var(--spacing-sm);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--glass-border);
    padding-top: var(--spacing-sm);
    margin-top: auto !important;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
}
/* Ein ruhiger Strich statt eines Icons je Punkt. */
.service-features li::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    margin-top: 11px;
    background: var(--accent-text);
    opacity: 0.85;
}

/* ---- BWL section ---- */
.bwl-inner {
    max-width: 900px;
    margin: var(--spacing-2xl) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.bwl-text h2 {
    font-size: var(--font-size-h2);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.bwl-text p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.bwl-method {
    padding: var(--spacing-xl);
}
.bwl-method h3 {
    font-size: var(--font-size-h4);
    color: #fff;
    margin-bottom: var(--spacing-md);
}
.bwl-method ol {
    list-style: none;
    counter-reset: bwl-step;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bwl-method li {
    counter-increment: bwl-step;
    position: relative;
    padding-left: 40px;
    font-size: var(--font-size-small);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.65;
}
.bwl-method li::before {
    content: counter(bwl-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
}
.bwl-method li strong { color: #fff; }

/* ---- Process steps ---- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    position: relative;
    margin-top: var(--spacing-2xl);
}

.process-grid::before {
    content: '';
    position: absolute;
    top: 28px; left: 12%; width: 76%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    z-index: 0;
}

.process-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all 0.35s ease;
}

.process-card:hover {
    transform: translateY(-4px);
    border-color: rgba(89, 131, 146, 0.3);
}

.process-num {
    width: 56px; height: 56px;
    margin: 0 auto var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h4);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.68);
    position: relative;
    z-index: 1;
}

.process-card h3 {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-xs);
    color: var(--text-light);
}

.process-phase {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.process-card p {
    font-size: var(--font-size-small);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* ---- CTA section ---- */
.cta-inner {
    max-width: 760px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl) var(--spacing-2xl);
    text-align: center;
}

.cta-inner h2 {
    font-size: var(--font-size-h2);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}

.cta-inner p {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-xl);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}



/* ---- Reveal animation ---- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr; }
    .bwl-inner { grid-template-columns: 1fr; gap: var(--spacing-xl); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid::before { display: none; }
    .hero { padding-top: calc(var(--header-height) + var(--spacing-md)); }
}

@media (max-width: 600px) {
    .process-grid { grid-template-columns: 1fr; }
    .cta-inner { padding: var(--spacing-2xl) var(--spacing-lg); }
}

@media (max-width: 480px) {
    .hero { padding-top: calc(var(--header-height) + var(--spacing-sm)); }
}

@keyframes paneFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes mkAmbientDrift {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1); opacity: 0.8; }
    100% { transform: translate3d(5%, 4%, 0) scale(1.08); opacity: 1; }
}
@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--mk-signal-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--mk-signal-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--mk-signal-rgb), 0); }
}

.flow-arrow .material-icons {
    font-size: 18px;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(47, 111, 159, 0); }
    50% { transform: scale(1.08); box-shadow: 0 0 15px rgba(47, 111, 159, 0.4); }
}

.btn-check .material-icons {
    font-size: 12px;
    font-weight: 800;
}

@keyframes pulse-mic {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes voice-wave {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

.source-item .material-icons {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.68);
}

@keyframes comp-loading {
    0% { width: 0%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

.chat-msg.system .material-icons {
    font-size: 14px;
}

.inquiry-header .material-icons {
    font-size: 14px;
}

.draft-header .material-icons {
    font-size: 14px;
    animation: spin-slow 4s infinite linear;
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

@keyframes subPaneFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visualPaneFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes scan-line {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}
@keyframes mockSweep {
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(320%); }
    100% { transform: translateX(320%); }
}

@keyframes mkIn      { from { opacity: 0; transform: translateY(12px); } }
@keyframes mkInRight { from { opacity: 0; transform: translateX(16px); } }
@keyframes mkInLeft  { from { opacity: 0; transform: translateX(-16px); } }
@keyframes mkPop     { 0% { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mkStamp   { 0% { opacity: 0; transform: scale(1.7) rotate(-7deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes mkBarH    { from { height: 0; } }
@keyframes mkFillX   { from { transform: scaleX(0); } }
@keyframes mkScanFlash { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(114,176,221,0); } 50% { box-shadow: inset 0 0 22px rgba(114,176,221,0.18); } }
@keyframes mkCaret   { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mkGlowPulse { 0%, 100% { box-shadow: 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 16px rgba(16,185,129,0.45); } }
@keyframes mkBarPulse { 0%, 100% { box-shadow: 0 0 12px rgba(114,176,221,0.2); } 50% { box-shadow: 0 0 22px rgba(114,176,221,0.55); } }

/* Typewriter caret (JS-driven, brand-coloured) */
.mk-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.14em;
    background: var(--mk-blue-light);
    box-shadow: 0 0 6px rgba(114, 176, 221, 0.8);
    animation: mkCaret 0.85s step-end infinite;
}
[data-tw] { min-height: 1.1em; }

@media (prefers-reduced-motion: no-preference) {

    /* ---- Chat conversations (Sanitär, Pflege) ---- */
    .subgroup-visual-pane.active .chat-msg { animation: mkIn 0.55s cubic-bezier(0.16,1,0.3,1) both; }
    @keyframes mkArrowBeam {
        0%, 100% { opacity: 0.25; transform: translateY(-3px); }
        50%      { opacity: 1; transform: translateY(3px); color: var(--mk-blue-light); }
    }
    @keyframes mkIconPulse {
        0%, 100% { box-shadow: 0 0 0 rgba(114,176,221,0); }
        50%      { box-shadow: 0 0 14px rgba(114,176,221,0.5); }
    }

    /* ---- Voice transcription (Radiologie, Salon) ---- */
    .subgroup-visual-pane.active .audio-input-box { animation: mkIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
}

/* Honour reduced-motion: kill ambient loops, keep content fully visible */
@media (prefers-reduced-motion: reduce) {
    .waveforms span,
    .mic-icon,
    .sketch-box::after,
    .draft-header .material-icons,
    .progress-bar-fill { animation: none !important; }
}

/* Responsive Breakpoints */
/* ── Belegte Arbeiten ────────────────────────────────────────────────
   Ersetzt seit dem 26.08.2026 die fuenfzehn Branchenkacheln. Drei
   Karten, gleiche Hoehe, kein Bild — die Zahlen tragen. */
.arbeit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}
.arbeit {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.arbeit:hover, .arbeit:focus-visible {
    border-color: rgba(142, 199, 238, .34);
    background: rgba(255, 255, 255, .05);
    transform: translateY(-2px);
}
.arbeit-kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); margin-bottom: var(--spacing-xs);
}
.arbeit h3 {
    font-size: 21px; font-weight: 600; margin: 0 0 var(--spacing-sm);
    letter-spacing: -.3px; color: var(--text-light);
}
.arbeit > p {
    font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .68); margin: 0;
}
.arbeit-zahlen {
    margin: var(--spacing-md) 0 0; padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.arbeit-zahlen > div { padding: 7px 0; }
.arbeit-zahlen > div + div { border-top: 1px solid rgba(255, 255, 255, .05); }
.arbeit-zahlen dt {
    font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-bottom: 3px;
}
.arbeit-zahlen dd {
    margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .88);
}
.arbeit-mehr {
    margin-top: auto; padding-top: var(--spacing-md);
    font-size: 14px; font-weight: 600; color: #8ec7ee;
}
.arbeit-mehr::after { content: ' \2192'; }
.arbeit-hinweis {
    max-width: 62ch; margin: var(--spacing-xl) auto 0; text-align: center;
    font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .7);
}
/* Der Absatz bleibt wie in jedem anderen Abschnitt zentriert, die
   Verweiskacheln darunter lesen sich nur linksbuendig. */
.erp-links { text-align: left; }
.erp-links { list-style: none; margin: var(--spacing-lg) 0 0; padding: 0;
    display: grid; gap: 1px; background: var(--glass-border);
    border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.erp-links li { margin: 0; background: rgba(255, 255, 255, .04); }
.erp-link { display: block; padding: 20px 22px; text-decoration: none; height: 100%; }
.erp-link:hover, .erp-link:focus-visible { background: rgba(255, 255, 255, .06); }
.erp-links b { display: block; font-size: 15px; font-weight: 600; color: #8ec7ee; }
.erp-links b::after { content: ' \2192'; }
.erp-links span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.65;
    color: rgba(255, 255, 255, .72); }
.af-faq .faq-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.af-faq .faq-item:hover { border-color: rgba(255, 255, 255, 0.18); }
.af-faq .faq-item[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(89, 131, 146, 0.45);
}
.af-faq summary.faq-question {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--text-light);
}
.af-faq summary.faq-question::-webkit-details-marker { display: none; }
.af-faq summary.faq-question::after {
    content: '+';
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent-color);
}
.af-faq .faq-item[open] summary.faq-question::after {
    content: '\2212';
    color: #fff;
}
.af-faq .faq-answer {
    padding: 0 22px 20px;
    color: var(--text-secondary-color);
    line-height: 1.7;
    font-size: var(--font-size-small);
}
.af-faq .faq-answer p { margin: 0; }
.er-note .material-icons {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.68);
    flex-shrink: 0;
    margin-top: 1px;
}
@keyframes erDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.er-console.run .er-console-row { animation: erRow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.er-console.run .er-console-row:nth-child(1) { animation-delay: 0.2s; }
.er-console.run .er-console-row:nth-child(2) { animation-delay: 0.9s; }
.er-console.run .er-console-row:nth-child(3) { animation-delay: 1.6s; }
.er-console.run .er-console-row:nth-child(4) { animation-delay: 2.3s; }
.er-console.run .er-console-row:nth-child(5) { animation-delay: 3.1s; }
.er-console.run .er-console-row:nth-child(6) { animation-delay: 3.9s; }
@keyframes erRow {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .er-console.run .er-console-row { animation: none; }
}

/* ---- Mobile-Feinschliff (kompakte Karten, ruhige Abstände) ---- */
@media (max-width: 640px) {
    .service-card { padding: var(--spacing-lg); }
    .gap-solution-box { padding: var(--spacing-lg); }
    .process-card { padding: var(--spacing-md); }
    .gm-faq summary.faq-question {
        padding: var(--spacing-md);
        font-size: 15px;
        line-height: 1.45;
    }
    .gm-faq .faq-answer { padding: 0 var(--spacing-md) var(--spacing-md); }
}

/* ---- Turnspan (ts-*) ---- */
/* Die Tabellen standen ohne Flaeche auf dem Hintergrundverlauf: nur Haarlinien
   zwischen den Zeilen, 1000 px breit, Text ohne Halt. Jetzt eine Tafel mit
   eigenem Grund, Rahmen und Innenabstand — dieselbe Sprache wie .ts-band und
   die Karten, statt einer dritten. */
.ts-scroll {
    overflow-x: auto;
    max-width: 900px;
    margin: var(--spacing-xl) auto 0;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 4px 28px 8px;
}
.ts-tabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 480px; }
/* Die Beschreibungsspalte bekommt eine Obergrenze in Zeichen statt in Pixeln —
   damit bleibt die Zeilenlaenge auch bei anderer Schriftgroesse im Lot. */
.ts-tabelle td:last-child > * { max-width: 74ch; }
/* Dreispaltige Tabellen: die Mittelspalte traegt Mengenangaben ("1.510 Zeilen",
   "3–4 Wochen"). Umgebrochen sehen die aus wie zwei Werte. */
.ts-tabelle td:nth-child(2):not(:last-child) { white-space: nowrap; width: 1%; padding-right: 28px; }
.ts-tabelle th, .ts-tabelle td { text-align: left; vertical-align: top;
    padding: 17px 24px 17px 0; border-bottom: 1px solid var(--glass-border); }
.ts-tabelle th { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7); font-weight: 600;
    padding-top: 20px; padding-bottom: 13px; }
.ts-tabelle td { color: rgba(255, 255, 255, 0.78); line-height: 1.72; }
.ts-tabelle td:first-child { color: #fff; width: 38%; font-weight: 500; }
/* Bei drei Spalten traegt die letzte den Text; die erste bekommt dann weniger,
   sonst wird die Begruendung zu einer schmalen Saeule. */
.ts-tabelle--drei td:first-child { width: 26%; }
.ts-tabelle tr:last-child td { border-bottom: none; }
.ts-tabelle strong { color: #fff; font-weight: 600; }

/* Anmerkung unter einer Tafel. Vorher ein Absatz mit max-width, aber ohne
   automatische Raender: er klebte links an der Spalte, waehrend Ueberschrift
   und Tabelle mittig standen — das sah aus wie ein Versehen. Jetzt eine
   erkennbare Anmerkung, mittig gesetzt, mit Marke an der linken Kante. */
.ts-fussnote {
    max-width: 900px;
    margin: var(--spacing-lg) auto 0;
    padding: 18px 22px 18px 24px;
    border-left: 2px solid rgba(156, 206, 240, 0.4);
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, 0.022);
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
}
.ts-fussnote strong { color: #fff; }

/* Zahlenband — die Kennzahl steht vor der Erklaerung, nicht darin.
   Ersetzt Absaetze, in denen die Zahl im Fliesstext unterging. */
.ts-band { display: grid; gap: 1px; background: var(--glass-border);
    border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    max-width: 900px; margin: var(--spacing-xl) auto 0; }
.ts-band > div { background: rgba(255, 255, 255, 0.025); padding: 26px 24px; }
.ts-zahl { font-size: clamp(27px, 3.6vw, 38px); font-weight: 600; color: #fff;
    line-height: 1.1; letter-spacing: -0.02em; }
.ts-was { margin-top: 10px; font-size: 15.5px; line-height: 1.65;
    color: rgba(255, 255, 255, 0.78); }
.ts-quelle { margin-top: 14px; padding-top: 11px;
    border-top: 1px solid var(--glass-border); font-size: 13px; line-height: 1.6;
    color: rgba(255, 255, 255, 0.68); }
.ts-quelle em { font-style: normal; color: rgba(255, 255, 255, 0.82); }

/* Aufklappbarer Nachsatz. Die Zusammenfassung traegt die Aussage, der Text
   die Begruendung — auf der Seite steht damit eine Zeile statt eines Absatzes. */
.gm-mehr { margin-top: var(--spacing-sm); padding-top: 14px;
    border-top: 1px solid var(--glass-border); }
.gm-mehr > summary { cursor: pointer; list-style: none; font-size: 14.5px;
    font-weight: 600; color: rgba(255, 255, 255, 0.84);
    display: flex; align-items: baseline; gap: 10px; }
.gm-mehr > summary::-webkit-details-marker { display: none; }
.gm-mehr > summary::before { content: "+"; color: var(--accent-text); font-weight: 400;
    font-size: 16px; line-height: 1; flex: 0 0 10px; }
.gm-mehr[open] > summary::before { content: "\2013"; }
.gm-mehr > summary:focus-visible { outline: 2px solid var(--accent-text);
    outline-offset: 3px; border-radius: 3px; }
.gm-mehr > p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.75;
    color: rgba(255, 255, 255, 0.72); max-width: 62ch; }

/* Weiterverweis am Fuss einer Leistungskarte. Bewusst kein Knopf: die Karte
   selbst ist der Inhalt, der Verweis nur der naechste Schritt. */
.service-weiter { margin: auto 0 0; padding-top: var(--spacing-md); }
.service-weiter-link {
    font-size: 14px; font-weight: 600; color: #8ec7ee; text-decoration: none;
    border-bottom: 1px solid rgba(142, 199, 238, .35);
    transition: border-color .18s ease;
}
.service-weiter-link::after { content: ' \2192'; }
.service-weiter-link:hover { border-bottom-color: #8ec7ee; }

/* =============================================================================
   Telefon: Tabellen stapeln statt seitlich scrollen
   -----------------------------------------------------------------------------
   .ts-tabelle stand mit min-width: 520px in einem .ts-scroll mit overflow-x.
   Auf 390 px hiess das: Die zweite Spalte war abgeschnitten, ohne dass etwas
   darauf hinwies, dass man wischen muss — und genau dort steht der Inhalt
   ("Wie Sie es selbst pruefen"). Deshalb wird jede Zeile zu einem Block, und
   die Spaltenueberschrift wandert per data-spalte vor die Zelle.
   ============================================================================= */
@media (max-width: 700px) {
    .ts-scroll { overflow-x: visible; padding: 4px 20px 10px; }
    .ts-fussnote { padding: 16px 18px 16px 20px; }

    .ts-tabelle { min-width: 0; display: block; font-size: 15px; }

    /* Die Kopfzeile bleibt fuer Vorleseprogramme erhalten, ist aber nicht mehr
       sichtbar — sichtbar traegt sie jetzt data-spalte an jeder Zelle. */
    .ts-tabelle thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    .ts-tabelle tbody,
    .ts-tabelle tr,
    .ts-tabelle td { display: block; width: auto; }

    .ts-tabelle tr {
        padding: 20px 0;
        border-bottom: 1px solid var(--glass-border);
    }
    .ts-tabelle tr:last-child { border-bottom: none; }

    .ts-tabelle td { border: none; padding: 0; }

    .ts-tabelle td:first-child {
        width: auto; color: #fff; font-size: 16px; line-height: 1.45;
    }

    .ts-tabelle td + td { margin-top: 14px; }

    .ts-tabelle td[data-spalte]::before {
        content: attr(data-spalte);
        display: block;
        margin-bottom: 6px;
        font-size: 12px; font-weight: 600; letter-spacing: 1.1px;
        text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
    }

    /* Befehlszeilen brechen sonst aus der Bildschirmbreite heraus. */
    .ts-tabelle code {
        display: inline-block; max-width: 100%;
        overflow-wrap: anywhere; word-break: break-word;
    }

    /* Ein Zahlenband mit zwei Werten stand auf dem Telefon in zwei sehr
       schmalen Spalten; erst hier stapelt es sicher. */
    .ts-band { grid-template-columns: 1fr; }
    .ts-band > div { padding: 22px 20px; }
}

/* Abschnittsuntertitel und der Absatz darunter klebten aneinander. */
.erp-prose { margin-top: var(--spacing-xl); }
.erp-prose p + p { margin-top: var(--spacing-md); }