/* ===== Montserrat, selbst gehostet (DSGVO: kein Abruf bei Google) =====
   Nur der Latin-Bereich – Kyrillisch, Griechisch und Vietnamesisch braucht
   diese Seite nicht. font-display:swap zeigt sofort die Systemschrift und
   tauscht, sobald Montserrat da ist. Lizenz: SIL Open Font License 1.1,
   siehe assets/fonts/OFL.txt */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/montserrat-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('fonts/montserrat-700-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    --nachtblau:#0B0D2C;
    --navy-btn:#000067;      /* dunkler Button auf Hell */
    --navy-btn-h:#181350;
    --indigo:#181350;
    --indigo-h:#241D80;
    --violett:#3F2999;       /* Akzent/Buttons auf Dunkel */
    --violett-h:#5039C2;
    --violett-light:#9A85DC;  /* AA auf Nachtblau (6,10:1) – Etikett, Icons, Ziffern, Fokus */
    --rand:#EFEFEF;
    --tint:#ECEAF3;
    --off:#E8E9F2;           /* Text auf Dunkel */
    --hilf-hell:#6A6E7C;
    --hilf-dunkel:#9CA0AC;
    --maxw:1250px;
    --header-h:80px;

    /* ---- Flächen: Tints des CI-Violetts, keine neuen Markenfarben ---- */
    --fl-weiss:#FFFFFF;
    --fl-tint:#f7f7f7;           /* helle Flaeche */
    --fl-dunkel:#0B0D2C;
    --tint-karte:#f7f7f7;        /* Kartenfüllung auf Weiß */
    --rand-tint:rgba(63,41,153,.09);
    --rand-hover:rgba(63,41,153,.28);        /* Rahmen im Hover, hell */
    --rand-hover-dunkel:rgba(117,86,205,.34);/* Rahmen im Hover, dunkel */

    /* ---- Radien ---- */
    --radius-karte:8px;
    --radius-btn:4px;
    --radius-pille:999px;   /* nur für die Hero-Pillen */

    /* ---- Raster-Ornament auf dunklen Flächen ---- */
    --raster-mass:54px;
    --raster-linie:rgba(117,86,205,.13);
    /* Freie Fläche: Raster in der Mitte am stärksten, zu den Rändern weg */
    --maske-mitte:radial-gradient(ellipse 78% 64% at 50% 42%,#000 0%,rgba(0,0,0,.6) 55%,transparent 88%);
    /* Fläche mit Kacheln: Raster am Rand, unter den Kacheln ausgeblendet.
       Zweite Ebene hält oben und unten die Sektionskante weich. */
    --maske-rand:
      radial-gradient(ellipse 64% 54% at 50% 50%,transparent 0%,rgba(0,0,0,.5) 66%,#000 100%),
      linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
    --btn-h:60px;           /* alle CTA-Buttons gleich hoch, mit und ohne Zusatzzeile */

    /* ---- Spacing-Skala ---- */
    --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
    --s6:32px; --s7:48px;  --s8:64px; --s9:88px;
    --sp-sektion:clamp(76px,8.2vw,124px);
    --sp-wrap:clamp(20px,3.4vw,28px);

    /* ---- Typo-Skala ---- */
    --t-display:clamp(2.3rem,4.6vw,3.25rem);  /* 52 px: Headline bricht auf zwei Zeilen */
    --t-h2:clamp(1.9rem,3.5vw,2.85rem);
    --t-seitentitel:clamp(1.75rem,3vw,2.25rem); /* Rechtsseiten: Titel, kein Hero-Display */
    --t-h3-gross:clamp(1.28rem,1.6vw,1.5rem);
    --t-h3:1.14rem;
    --t-lead:clamp(1rem,0.9vw,1.1rem);
    --t-body:1rem;
    --t-body-sm:.94rem;
    --t-klein:.84rem;
    --t-label:.72rem;
    --lh-text:1.65;
    --measure:64ch;
    --ease:cubic-bezier(.25,.1,.25,1);
    --ease-lift:cubic-bezier(.25,1.05,.4,1);    /* weich, nur minimales Überschwingen */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* scroll-padding: Ankerziele landen unter dem Sticky-Header, nicht dahinter */
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:clip}
  body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;color:var(--nachtblau);background:#fff;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}
  /* Typo-Hierarchie: Laufweite folgt der Größe – je größer, desto enger */
  h1,h2,h3{font-weight:700}
  h1{font-size:var(--t-display);line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
  h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
  h3{font-size:var(--t-h3);line-height:1.32;letter-spacing:-.008em}
  p{line-height:var(--lh-text)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-wrap)}
  section{padding:var(--sp-sektion) 0;position:relative}
  .center{text-align:center}
  .label{display:inline-block;font-size:var(--t-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--violett);margin-bottom:var(--s4)}
  .dark .label{color:var(--violett-light)}
  h2.big{margin-bottom:var(--s5)}
  .center h2.big{margin-left:auto;margin-right:auto;max-width:30ch}
  .lead{font-size:var(--t-lead);color:var(--hilf-hell);max-width:var(--measure);line-height:var(--lh-text)}
  .center .lead{margin-left:auto;margin-right:auto}

  /* Sektionsflächen */
  .fl-weiss{background:var(--fl-weiss)}
  .fl-tint{background:var(--fl-tint)}
  .dark{background:var(--fl-dunkel);color:var(--off)}
  .dark h2,.dark h3{color:#fff}
  .dark .lead{color:var(--hilf-dunkel)}
  /* ===== Raster: das Ornament der dunklen Flächen =====
     Zwei haarfeine Linienverläufe kreuzen sich auf 54 px. Die Linie ist
     Lichtviolett bei sehr niedriger Deckkraft – auf Nachtblau eher zu ahnen
     als zu sehen. Die radiale Maske blendet das Raster zu allen vier Seiten
     weich aus, damit an den Sektionskanten keine harte Kante entsteht. */
  .raster{position:relative;overflow:hidden}
  .raster::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(to right,var(--raster-linie) 1px,transparent 1px),
      linear-gradient(to bottom,var(--raster-linie) 1px,transparent 1px);
    background-size:var(--raster-mass) var(--raster-mass);
    -webkit-mask-image:var(--maske-mitte);mask-image:var(--maske-mitte)}
  .raster > .wrap{position:relative;z-index:1}

  /* Randbetonte Maske: überall dort, wo Kacheln über dem Raster liegen.
     Das Grid steht dann an den Sektionsrändern und blendet in der Mitte weg,
     damit die Kacheln auf ruhigem Grund sitzen und nicht auf Karopapier.
     Beide Maskenebenen werden verschnitten (intersect): der radiale Verlauf
     macht das Loch in der Mitte, der senkrechte hält die Sektionskante weich.
     Ohne :has()-Unterstützung greift die Mitten-Maske – kein Bruch, nur mehr
     Raster. .raster-rand setzt dieselbe Maske von Hand. */
  .raster-rand::after{
    -webkit-mask-image:var(--maske-rand);mask-image:var(--maske-rand);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .raster:has(.step)::after,.raster:has(.card)::after,.raster:has(.rev)::after{
    -webkit-mask-image:var(--maske-rand);mask-image:var(--maske-rand);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  /* Auf schmalen Geräten ein kleineres Raster – 54 px wirken dort zu grob */
  @media(max-width:560px){.raster{--raster-mass:40px}}


  /* Buttons */
  .btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--navy-btn);color:#fff;text-decoration:none;padding:12px 26px;border-radius:var(--radius-btn);
    font-weight:600;font-size:var(--t-klein);line-height:1.3;min-height:var(--btn-h);transition:transform .15s ease,background .15s ease}
  .btn:hover{background:var(--navy-btn-h);transform:translateY(-2px)}
  .btn .sub{font-weight:400;opacity:.72;font-size:.72rem;margin-top:3px}
  .dark .btn{background:var(--violett)}
  .dark .btn:hover{background:var(--violett-h)}
  .hero .btn{background:#5039C2}
  .hero .btn:hover{background:#6a55d6}
  .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;flex-direction:row;padding:11px 22px;font-size:var(--t-klein);min-height:0}
  .btn-ghost:hover{background:rgba(255,255,255,.1);transform:none}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:var(--nachtblau)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
  .logo{display:flex;align-items:center;text-decoration:none}
  .logo img{height:52px;width:auto;display:block}
  @media(max-width:520px){.logo img{height:40px}}
  .nav-links{display:flex;gap:8px;align-items:center}
  .nav-links a{color:#fff;text-decoration:none;font-size:.9rem;font-weight:500;padding:8px 14px;
    border-radius:6px;transition:background .25s ease}
  /* Hover zeigt dieselbe Fläche wie der aktive Eintrag – keine Farbänderung am Text */
  .nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.08)}
  @media(max-width:980px){.nav-links{display:none}}

  /* Mobil-Navigation: Burger + ausklappendes Panel */
  .nav-toggle{display:none;background:none;border:0;padding:14px;margin-right:-14px;cursor:pointer;color:#fff;
    /* 22x16 Balken + 14px Polster = 50x44 – erfüllt die 44px-Empfehlung */
    min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .nav-toggle .bars{display:block;position:relative;width:22px;height:16px}
  .nav-toggle .bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform .3s cubic-bezier(.25,.1,.25,1),opacity .2s ease}
  .nav-toggle .bars span:nth-child(1){top:0}
  .nav-toggle .bars span:nth-child(2){top:7px}
  .nav-toggle .bars span:nth-child(3){top:14px}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Panel deckt die Fläche unter dem Header vollständig in Nachtblau ab –
     kein Durchscheinen des Seiteninhalts, keine Trennlinien, alles zentriert.
     dvh statt vh: auf dem Telefon zählt die sichtbare Höhe ohne Browserleisten. */
  .mobilnav{position:absolute;top:100%;left:0;right:0;background:var(--nachtblau);
    height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s7);
    padding:var(--s7) var(--sp-wrap) calc(var(--s8) + env(safe-area-inset-bottom,0px));
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s cubic-bezier(.25,.1,.25,1),transform .28s cubic-bezier(.25,.1,.25,1),visibility .28s}
  .mobilnav.open{opacity:1;visibility:visible;transform:none}
  /* Solange das Panel offen ist, scrollt die Seite darunter nicht mit */
  html.nav-offen,html.nav-offen body{overflow:hidden}
  .mobilnav nav{display:grid;gap:var(--s2);width:100%;max-width:420px;text-align:center}
  /* Jeder Eintrag ist eine vollbreite Zeile von mindestens 52 px – aktiv wie
     inaktiv dieselbe Trefferfläche, sichtbar ist nur die Box des aktiven. */
  .mobilnav nav a{display:flex;align-items:center;justify-content:center;
    width:100%;min-height:52px;padding:10px 18px;
    color:#fff;text-decoration:none;font-size:1.06rem;font-weight:500;
    background:transparent;border-radius:6px;transition:background .25s ease,color .25s ease}
  .mobilnav nav a:hover{color:var(--violett-light);background:rgba(255,255,255,.05)}
  /* Rückmeldung beim Antippen – auf dem Telefon gibt es kein Hover */
  .mobilnav nav a:active{background:rgba(255,255,255,.12)}
  /* Aktiver Punkt trägt dieselbe dezente Box wie in der Kopfnavigation */
  .mobilnav nav a.active{background:rgba(255,255,255,.08)}
  /* Aktion ist der ausgelinierte Ghost-Button wie im Header, nur mit größerer Trefferfläche */
  .mobilnav .btn-ghost{padding:14px 26px}
  @media(min-width:981px){.nav-toggle,.mobilnav{display:none}}
  @media(max-width:980px){.nav-toggle{display:inline-flex}}
  @media(max-width:560px){header .nav > .btn-ghost{display:none}}

  /* Hero */
  .hero{background:var(--fl-dunkel);color:var(--off);position:relative;overflow:hidden;
    min-height:clamp(600px,80vh,780px);display:flex;align-items:center}
  /* Text 60 %, Bild 40 % (3fr/2fr respektiert den Spaltenabstand) */
  .hero .wrap{display:grid;grid-template-columns:3fr 2fr;gap:var(--s7);align-items:center;width:100%}
  /* Ortsangaben als dezente, transparente Pillen */
  .hero-badge{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
  .hero-badge span{padding:7px 15px;border-radius:var(--radius-pille);
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
    color:var(--hilf-dunkel);font-size:var(--t-label);font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;line-height:1}
  .hero h1{color:#fff;margin-bottom:var(--s5);
    /* Gemessen an der Textspalte: bei dieser Kurve bleibt die längste Zeile
       („Private Krankenversicherung,") von 821 px aufwärts unter der
       Spaltenbreite – der Titel steht dadurch immer auf zwei Zeilen.
       Maximum 3,05 rem liegt bewusst über der H2 (2,85 rem). */
    font-size:clamp(1.95rem,3.6vw,3.05rem);text-wrap:normal}
  /* Zweizeiler von Hand gesetzt, nicht dem Zufall überlassen. Unter 821 px
     steht der Hero einspaltig – dort laufen die Teile wieder inline und der
     Text bricht frei um. */
  @media(min-width:821px){.hero h1 .zeile{display:block;white-space:nowrap}}
  .hero p{color:var(--hilf-dunkel);font-size:var(--t-lead);max-width:52ch;margin-bottom:var(--s7)}
  /* Bildbereich: 40 % der Sektionsbreite, rechtsbündig */
  .hero-img{position:absolute;bottom:0;right:0;height:100%;width:45%;
    display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
  /* Portrait läuft nach unten weich aus, statt an der Sektionskante abgeschnitten zu werden */
  .hero-img img{width:100%;height:auto;max-height:100%;object-fit:contain;object-position:bottom center;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.55) 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.55) 87%,transparent 100%)}
  .stars{color:var(--navy-btn);letter-spacing:2px}
  /* Mobil: Portrait steht unter den Buttons – als Bild, ohne Rahmen und ohne Rundung.
     order:1 schiebt es im Flex-Fluss hinter den Textblock. */
  @media(max-width:820px){
    .hero{min-height:auto;padding:var(--s7) 0 0;flex-direction:column;align-items:stretch}
    .hero .wrap{grid-template-columns:1fr}
    .hero h1,.hero p{max-width:none;text-align:center}
    .hero-img{order:1;position:static;display:block;
      width:100%;max-width:330px;height:auto;margin:var(--s7) auto 0}
    .hero-img img{width:100%;height:auto;max-height:none;object-fit:contain}
    /* Mobil: kleinere Pillen, CTA zentriert (wie die anderen Abschnitte) */
    .hero-badge span{padding:5px 11px;font-size:.64rem}
    .hero-badge{justify-content:center}
    .hero-cta{justify-content:center}
  }

  /* Karten – Grundregel: Die Karte steht immer eine Stufe gegen ihren Grund.
     Auf weißem Grund Tint-Füllung, auf Tint-Fläche weiße Füllung. */
  .grid{display:grid;gap:var(--s5);margin-top:var(--s8)}
  .g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:820px){.g3{grid-template-columns:1fr}}
  .card{background:var(--tint-karte);border:1px solid var(--rand-tint);border-radius:var(--radius-karte);padding:var(--s7) var(--s6);text-align:center}
  .fl-tint .card{background:var(--fl-weiss);border-color:var(--rand)}

  /* Icons: Inline-SVG ohne Fläche, feine Linie, Farbe über currentColor */
  .icon{width:auto;height:auto;margin:0 auto var(--s5);color:var(--violett);
    display:flex;align-items:center;justify-content:center;
    transition:transform .4s var(--ease)}
  .icon svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  .card h3{margin-bottom:var(--s3);color:var(--nachtblau)}
  .card p{color:var(--hilf-hell);font-size:var(--t-body-sm)}
  .dark .card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09)}
  .dark .card h3{color:#fff}
  .dark .card p{color:var(--hilf-dunkel)}
  .dark .icon{color:var(--violett-light)}
  .card:hover .icon{transform:translateY(-2px) scale(1.04)}
  .closing{text-align:center;color:var(--hilf-hell);margin-top:var(--s8);font-size:var(--t-body);
    max-width:var(--measure);margin-left:auto;margin-right:auto;text-wrap:pretty}
  .dark .closing{color:var(--hilf-dunkel)}
  .cta-row{text-align:center;margin-top:var(--s6)}

  /* Feature-6 (Zusammenarbeit) */
  .feat6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s9) var(--s7);margin-top:var(--s8)}
  @media(max-width:820px){.feat6{grid-template-columns:1fr}}
  .feat{text-align:center}
  .feat .icon{color:var(--indigo)}
  .feat h3{margin-bottom:var(--s3)}
  /* 38ch: bringt auch den längsten Text („Fachtiefe") auf 3 Zeilen wie die übrigen fünf */
  .feat p{color:var(--hilf-hell);font-size:var(--t-body-sm);max-width:38ch;margin:0 auto}

  /* Split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  /* Portraitfläche: freigestelltes Bild auf ruhigem Grund, sitzt unten auf */
  .split .imgbox{aspect-ratio:1/1;border-radius:var(--radius-karte);background:var(--fl-tint);
    overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
  .split .imgbox picture{display:contents}
  .split .imgbox img{width:100%;height:100%;display:block;object-fit:contain;object-position:bottom center}
  .split p{color:var(--hilf-hell);margin-bottom:var(--s4);line-height:var(--lh-text)}
  .dark .split p{color:var(--hilf-dunkel)}
  .split .rating{margin-top:var(--s3);color:var(--hilf-hell);font-size:var(--t-body-sm)}

  /* Leistungen */
  .leist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s8)}
  @media(max-width:820px){.leist{grid-template-columns:1fr}.leist .col{padding:var(--s5)}.leist li{font-size:.875rem}.leist .col h3{font-size:1.22rem}}
  /* Sektion liegt auf #f7f7f7, die Kacheln stehen weiß dagegen */
  .leist .col{background:var(--fl-weiss);border:1px solid var(--rand);border-radius:var(--radius-karte);padding:var(--s7);display:flex;flex-direction:column;min-width:0;box-shadow:0 4px 16px rgba(11,13,44,.06)}
  .leist .tag{font-size:var(--t-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violett)}
  .leist .col h3{font-size:var(--t-h3-gross);line-height:1.2;letter-spacing:-.015em;margin:var(--s2) 0 var(--s5)}
  .leist ul{list-style:none;margin-bottom:var(--s6);flex:1}
  .leist li{padding:var(--s1) 0 var(--s1) var(--s6);position:relative;color:var(--hilf-hell);font-size:var(--t-body-sm);line-height:1.45;overflow-wrap:break-word;hyphens:auto}
  .leist li::before{content:"✓";position:absolute;left:0;top:4px;color:var(--indigo-h);font-weight:700}
  .leist .btn{width:100%}
  /* Buttons in den Leistungs-Kacheln verhalten sich wie alle anderen: Hover hebt an + hellt auf */

  /* Prozess – die Nummern sind echte Reihenfolge, kein Dekor */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s8)}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-karte);padding:var(--s6) var(--s5)}
  .step .num{font-size:2.8rem;font-weight:800;color:var(--violett-light);line-height:1;margin-bottom:var(--s4);font-variant-numeric:tabular-nums}
  .step h3{margin-bottom:var(--s3);color:#fff}
  .step p{color:var(--hilf-dunkel);font-size:var(--t-body-sm)}

  /* Reviews – Karten gleich hoch, Autor sitzt immer auf einer Linie */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8)}
  @media(max-width:820px){.reviews{grid-template-columns:1fr}}
  .rev{background:var(--tint-karte);border:1px solid var(--rand-tint);border-radius:var(--radius-karte);padding:var(--s6);
    display:flex;flex-direction:column;margin:0;box-shadow:0 4px 16px rgba(11,13,44,.06)}
  .fl-tint .rev{background:var(--fl-weiss);border-color:var(--rand)}
  .rev .stars{font-size:1rem;margin-bottom:var(--s4);display:block}
  .rev blockquote{color:var(--hilf-hell);font-size:var(--t-body-sm);line-height:var(--lh-text);margin:0 0 var(--s5)}
  .rev figcaption{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--rand-tint)}
  .fl-tint .rev figcaption{border-top-color:var(--rand)}
  .rev .who{font-weight:700;font-size:var(--t-body-sm)}
  .rev .src{color:var(--hilf-hell);font-size:var(--t-klein)}

  /* App-Liste / Checks auf Dunkel */
  .checks{list-style:none;margin:var(--s5) 0 var(--s6)}
  .checks li{padding:var(--s1) 0 var(--s1) var(--s6);position:relative;color:var(--off);font-size:var(--t-body);line-height:1.45}
  .checks li::before{content:"✓";position:absolute;left:0;top:4px;color:var(--violett-light);font-weight:700}
  /* ===== Kundenapp-Karussell =====
     Sanfter Fade mit kleinem Versatz in Laufrichtung. Bedienbar per Punkt,
     Pfeiltaste und Wisch; pausiert bei Hover/Fokus. */
  .phones{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .carousel{position:relative;width:100%;max-width:520px}
  .carousel:focus-visible{outline:2px solid var(--violett-light);outline-offset:10px;border-radius:var(--radius-karte)}
  .carousel-track{position:relative;aspect-ratio:1/1;touch-action:pan-y}
  .cslide{position:absolute;inset:0;margin:0;opacity:0;translate:10px 0;
    transition:opacity 1s var(--ease),translate 1s var(--ease)}
  .cslide.is-on{opacity:1;translate:none}
  .carousel.is-back .cslide{translate:-10px 0}
  .carousel.is-back .cslide.is-on{translate:none}
  .cslide img{width:100%;height:100%;object-fit:contain;display:block;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}

  /* FAQ (weich animiert) */
  .faq{margin-top:var(--s8);max-width:860px;margin-left:auto;margin-right:auto}
  .faq-item{border-bottom:1px solid var(--rand-tint)}
  .faq-q{width:100%;background:none;border:0;font:inherit;cursor:pointer;padding:var(--s5) var(--s1);font-weight:600;font-size:var(--t-body);color:var(--nachtblau);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);text-align:left;letter-spacing:-.005em}
  .faq-q .pm{color:var(--violett);font-size:1.7rem;font-weight:300;line-height:1;flex:0 0 auto;transition:transform .3s var(--ease)}
  .faq-item.open .faq-q .pm{transform:rotate(45deg)}
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
  .faq-item.open .faq-a{grid-template-rows:1fr}
  /* Zugeklappt ist die Antwort auch für Screenreader weg, nicht nur optisch.
     visibility schaltet erst am Ende der Einklapp-Animation um. */
  .faq-a-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .38s var(--ease)}
  .faq-item.open .faq-a-in{visibility:visible}
  .faq-a-in p{padding:0 var(--s1) var(--s5);color:var(--hilf-hell);font-size:var(--t-body-sm);max-width:72ch}

  /* CTA final – dieselbe Rasterfläche wie die übrigen dunklen Sektionen,
     nur eine Spur präsenter. Kein Hintergrundbild mehr: das Raster wird
     gezeichnet, nicht geladen. */
  .cta-final{text-align:center;background:var(--fl-dunkel);--raster-linie:rgba(117,86,205,.18)}
  .cta-final h2{color:#fff;margin-bottom:var(--s5);max-width:22ch;margin-inline:auto}
  .cta-final p{color:var(--hilf-dunkel);max-width:var(--measure);margin:0 auto var(--s7)}

  /* Footer (hell) */
  footer{background:var(--fl-weiss);border-top:1px solid var(--rand);padding:var(--s9) 0 var(--s6);font-size:var(--t-klein);color:var(--hilf-hell)}
  /* Terminbuchung bekommt die breiteste Spalte – die Linktexte sind dort am längsten */
  .fgrid{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.2fr;gap:var(--s6);margin-bottom:var(--s8)}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div{min-width:0}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
  footer .logo img{height:69px}
  footer .f-titel{color:var(--nachtblau);font-size:.88rem;font-weight:700;letter-spacing:normal;margin-bottom:var(--s4)}
  footer a{color:var(--hilf-hell);text-decoration:none;display:block;margin-bottom:9px;overflow-wrap:anywhere}
  footer a:hover{color:var(--violett)}
  footer .contact p{margin-bottom:6px;color:var(--hilf-hell);overflow-wrap:anywhere}
  .fbar{border-top:1px solid var(--rand);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
  .fbar .links a{display:inline;margin-right:20px;font-size:.8rem}
  @media(max-width:560px){.fbar{flex-direction:column-reverse;align-items:flex-start}.fbar .links{display:flex;flex-direction:column;gap:10px}.fbar .links a{margin-right:0}}
  /* Social unter dem Logo: gezeichnete Glyphen in leicht gerahmten Feldern */
  .fgrid .social{display:flex;gap:var(--s3);margin-top:var(--s5)}
  .fgrid .social a{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:0;color:var(--hilf-hell);
    border:1px solid var(--rand);border-radius:var(--radius-btn);
    transition:color .3s ease,border-color .3s ease}
  .fgrid .social a svg{width:18px;height:18px;fill:currentColor;display:block}
  .fgrid .social a:hover{color:var(--violett);border-color:var(--rand-hover)}
  .fgrid .social a:focus-visible{outline:2px solid var(--violett);outline-offset:3px}

  /* ===== Rechtsseiten: schlichte, helle Lesestrecke =====
     Keine Karten, keine dunklen Flächen, kein Ornament. Eine Textspalte auf
     Weiß, gegliedert durch haarfeine Linien über den Abschnitten. */
  .rechtskopf{margin-bottom:var(--s9)}
  /* Seitentitel statt Hero-Display: bei 14 Abschnitten soll die Überschrift
     die Seite ankündigen, nicht sie beherrschen. Der Abstand zu den
     Abschnittsüberschriften (t-h3-gross) bleibt deutlich. */
  .rechtskopf h1{font-size:var(--t-seitentitel);line-height:1.18;letter-spacing:-.02em;margin-bottom:var(--s4)}
  .stand{color:var(--hilf-hell);font-size:var(--t-body-sm)}
  .recht{max-width:76ch;margin:0 auto;text-align:left}
  .recht h2{font-size:var(--t-h3-gross);line-height:1.25;letter-spacing:-.012em;
    margin:var(--s8) 0 var(--s4);padding-top:var(--s6);border-top:1px solid var(--rand-tint)}
  .recht > h2:first-child{border-top:0;padding-top:0;margin-top:0}
  .recht p{color:var(--hilf-hell);font-size:var(--t-body-sm);margin-bottom:var(--s4)}
  /* Kontakt- und Adressblöcke stehen kräftiger als der Fließtext */
  .recht p.adresse{color:var(--nachtblau)}
  .recht ul,.recht ol{list-style:none;margin:0 0 var(--s4)}
  .recht li{position:relative;margin-bottom:var(--s3);color:var(--hilf-hell);
    font-size:var(--t-body-sm);line-height:var(--lh-text)}
  /* Feiner Strich statt Aufzählungspunkt – dieselbe Linienführung wie die Icons */
  .recht ul li{padding-left:var(--s5)}
  .recht ul li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--indigo)}
  .recht ol{counter-reset:pos}
  .recht ol li{counter-increment:pos;padding-left:var(--s6)}
  .recht ol li::before{content:counter(pos) ".";position:absolute;left:0;top:0;color:var(--indigo);
    font-weight:700;font-variant-numeric:tabular-nums}
  .recht strong{color:var(--nachtblau);font-weight:700}
  .recht a{color:var(--indigo);text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:3px;text-decoration-color:rgba(24,19,80,.35);
    transition:color .3s ease,text-decoration-color .3s ease}
  .recht a:hover{color:var(--indigo-h);text-decoration-color:currentColor}
  /* Offener Punkt, der vor Go-Live aufzulösen ist */
  .offen{border:1px solid var(--rand-tint);background:var(--fl-tint);border-radius:var(--radius-karte);
    padding:var(--s5) var(--s6);margin:0 0 var(--s4)}
  .offen .offen-titel{display:block;margin-bottom:var(--s2);color:var(--indigo);font-weight:700;
    font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
  .offen p:last-child{margin-bottom:0}
  /* Die aktuelle Rechtsseite ist im Footer markiert – eine eigene
     Rechts-Navigation gibt es bewusst nicht. */
  .fbar .links a[aria-current="page"]{color:var(--nachtblau);font-weight:600}

  /* Blöcke, die innerhalb einer zentrierten Sektion linksbündig laufen */
  .steps,.reviews,.leist,.faq{text-align:left}
  /* Fließtext der Kundenapp-Spalte */
  .app-text{color:var(--hilf-dunkel);line-height:var(--lh-text)}

  /* <picture> soll das Layout nicht verändern – das img bleibt direktes Kind */
  .hero-img picture,.phones picture{display:contents}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .banner{background:var(--tint);color:var(--indigo);text-align:center;font-size:.8rem;padding:8px 16px;font-weight:600}
  svg{display:block}

  /* ===== ELEMENT- & INTERAKTIONS-FEINSCHLIFF (Farben/Texte unverändert) ===== */

  /* Weiche Hover-Übergänge */
  .btn,.btn-ghost,.feat .icon{transition:transform .4s var(--ease),background .3s ease,border-color .3s ease}
  .feat:hover .icon{transform:translateY(-3px) scale(1.06)}

  /* Kachel-Hover: Ausgangslage, Lösung und Prozess fahren nach oben (Bewegung,
     kein Schatten). Leistungen und Kundenstimmen heben stattdessen ab (Tiefe,
     keine Bewegung). In beiden Fällen tritt der Rahmen dezent hervor.
     Die Bewegung läuft bewusst über die eigenständige translate-Eigenschaft statt
     über transform: transform gehört dem Scroll-Reveal, dessen Regel spezifischer ist
     und die Kurve sonst überschreiben würde. So laufen beide unabhängig. */
  .card,.rev,.leist .col,.step{position:relative;
    transition:translate .55s var(--ease-lift),box-shadow .55s var(--ease-lift),
               background .3s ease,border-color .3s ease}
  .card:hover,.step:hover{translate:0 -8px}
  /* Leistungen und Kundenstimmen: leichter Schatten dauerhaft, kein Hover-Effekt */
  .card:hover{border-color:var(--rand-hover)}
  .dark .card:hover,.step:hover{border-color:var(--rand-hover-dunkel);background:rgba(255,255,255,.05)}

  /* Hero: Entrance-Animation */
  .hero .wrap{position:relative;z-index:2}
  .hero-img{z-index:1}
  html.js .hero .wrap > div > *{opacity:0;transform:translateY(20px);animation:heroIn .8s cubic-bezier(.25,.1,.25,1) forwards}
  html.js .hero-badge{animation-delay:.05s}
  html.js .hero h1{animation-delay:.15s}
  html.js .hero p{animation-delay:.28s}
  html.js .hero .hero-cta{animation-delay:.4s}
  @keyframes heroIn{to{opacity:1;transform:none}}
  /* Portrait blendet weich ein – etwas länger und später als der Text */
  html.js .hero-img{opacity:0;transform:translateY(18px) scale(1.02);
    animation:heroImg 1.5s var(--ease) .18s forwards}
  @keyframes heroImg{to{opacity:1;transform:none}}

  /* Hero-Buttonzeile + sekundärer Button */
  .hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .btn-sec{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;padding:12px 24px;border-radius:var(--radius-btn);font-weight:600;font-size:var(--t-klein);min-height:var(--btn-h);transition:background .3s ease,border-color .3s ease,transform .3s ease}
  .btn-sec:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.65);transform:translateY(-2px)}


  /* Sticky-Header: feine Kante beim Scrollen */
  header{transition:box-shadow .3s ease}
  header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.3)}

  /* ===== Browser-Oberflächen: Fokus und Textauswahl aus der Palette =====
     Gilt für alles Bedienbare. Der Ring folgt der Untergrund-Regel: auf Hell
     Indigo, auf Dunkel Lichtviolett. :focus-visible statt :focus – Mausklicks
     bekommen keinen Ring, Tastaturbedienung immer. */
  :focus{outline:none}
  a:focus-visible,button:focus-visible,summary:focus-visible,
  [tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}
  .dark a:focus-visible,.dark button:focus-visible,.dark [tabindex]:focus-visible,
  .hero a:focus-visible,header a:focus-visible,header button:focus-visible,
  .mobilnav a:focus-visible,.cta-final a:focus-visible{
    outline-color:var(--violett-light)}
  /* Buttons tragen ihren eigenen Radius, der Ring folgt ihm */
  .btn:focus-visible,.btn-sec:focus-visible,.btn-ghost:focus-visible{border-radius:var(--radius-btn)}
  .nav-links a:focus-visible{border-radius:6px}
  .fgrid .social a:focus-visible{outline-color:var(--violett);border-radius:var(--radius-btn)}
  /* Sprungmarke für Tastatur und Screenreader */
  .skip{position:absolute;left:50%;top:0;transform:translate(-50%,-120%);z-index:100;
    background:var(--navy-btn);color:#fff;padding:12px 22px;border-radius:0 0 var(--radius-btn) var(--radius-btn);
    font-size:var(--t-klein);font-weight:600;text-decoration:none;transition:transform .2s var(--ease)}
  .skip:focus-visible{transform:translate(-50%,0)}
  /* Textauswahl in Markenfarbe statt Browser-Blau */
  ::selection{background:var(--violett);color:#fff}
  .dark ::selection{background:var(--violett-light);color:var(--nachtblau)}

  /* ===== Reduced Motion: Bewegung aus, Sichtbarkeit an =====
     Steht bewusst als LETZTER Block, damit er alle Reveal- und Hero-Regeln
     überstimmt. Gewollte Transparenzen (z. B. .btn .sub) bleiben unberührt. */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    html.js .hero .wrap > div > *,
    html.js .hero-img{opacity:1;transform:none;animation:none}
    .mobilnav{transition:none}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }