:root{
    --red:#15191F;        /* Familienrot – Verbindung zur Muttermarke iKAT (Platzhalter) */
    --red-dark:#000000;
    --ink:#1E2730;        /* Anthrazit – Basis & Schrift */
    --ink2:#2C3946;       /* Anthrazit hell – belegt / Sekundärflächen */
    --green:#5E6B76;      /* Freier Platz – positive Kernbotschaft */
    --amber:#9AA7B2;      /* Reserviert */
    --fog:#F2F4F5;        /* Heller Hintergrund */
    --line:#E3E7EA;
    --slate:#5E6B76;
    --red-akzent:#A72920;       /* Rot der Marke, siehe styleguide.html */
    --red-akzent-hell:#DE5245;  /* dasselbe Rot auf dunklem Grund */
    /* Eigene Toene nur fuer den Hero. Die anderen dunklen Flaechen
       (Referenz, Fusszeile) bleiben auf --ink/--ink2, damit sich der
       Rest der Seite nicht mitverdunkelt. */
    --hero-1:#0E141A;     /* Hero oben links  */
    --hero-2:#18212A;     /* Hero unten rechts */
    --radius:16px;
    --shadow:0 18px 50px rgba(30,39,48,.12);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Nunito Sans','Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{width:min(1140px,92%);margin:0 auto}
  section{padding:92px 0}
  h1,h2,h3{line-height:1.14;letter-spacing:-.5px}
  h2{font-size:clamp(28px,4vw,42px);font-weight:800}
  .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:14px}
  .lead{color:var(--slate);font-size:18px;max-width:630px}

  /* ---------- Header ---------- */
  /* ---------- Kopfleiste ----------
     Mitlaufende Fortschrittslinie, aktiver Reiter nach Abschnitt, Unterstrich
     waechst beim Zeigen von links - dieselbe Bedienlogik wie bei ZH und PF. */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s ease,background .3s ease}
  header.gescrollt{background:rgba(255,255,255,.96);box-shadow:0 6px 24px rgba(22,25,29,.07)}
  header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
    background:linear-gradient(to right,rgba(167,41,32,.3) 0%,#A72920 50%,rgba(167,41,32,.3) 100%);
    transform:scaleX(var(--fortschritt,0));transform-origin:left;transition:transform .12s linear}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
  /* Feste Groesse, auch beim Scrollen: das Haus bleibt stehen, nur der
     Schriftzug daneben faehrt hinein. Zwei Bewegungen gleichzeitig -
     schrumpfen und einfahren - waeren eine zu viel. */
  .logo svg{height:48px;width:auto;display:block}
  /* Der Schriftzug faehrt beim Scrollen in das Haus hinein: sein Feld
     wird schmaler, das Bild darin bleibt rechts stehen und wird dabei
     an der linken Kante abgeschnitten - es sieht aus, als verschwaende
     die Schrift hinter dem Haus. Dieselbe Mechanik wie auf den Seiten
     von Zick-Hessler, Fischer und Im Nordpark.

     Die 81 Punkte sind der Schriftzug (86 Einheiten bei 48 Punkten
     Hoehe = 68) plus der Abstand zum Haus (13) - der steht links, weil
     das Bild rechtsbuendig im Feld sitzt. */
  .logo{display:flex;align-items:center}
  .logo-zeichen{flex:0 0 auto;position:relative;z-index:1}
  .logo-wort{
    position:relative;display:block;overflow:hidden;flex:0 0 auto;min-width:0;
    height:48px;width:81px;
    transition:width .55s cubic-bezier(.65,0,.35,1);
  }
  .logo-wort svg{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none}
  header.gescrollt .logo-wort{width:0}

  .nav-links{display:flex;align-items:center;gap:2px}
  .nav-link{position:relative;font-weight:600;font-size:14.5px;color:var(--slate);
    padding:12px 13px;border-radius:8px;white-space:nowrap;
    transition:color .2s ease,background .2s ease}
  .nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:7px;height:2px;
    background:var(--red-akzent);border-radius:2px;
    transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.32,.72,0,1)}
  .nav-link:hover{color:var(--ink);background:rgba(22,25,29,.04)}
  .nav-link:hover::after,.nav-link.ist-hier::after{transform:scaleX(1)}
  /* Der Reiter des Abschnitts, in dem man gerade steht: roter Text,
     zarte Tönung und ein kräftigerer Unterstrich - auf einen Blick. */
  .nav-link.ist-hier{color:var(--red-akzent);background:rgba(167,41,32,.07)}
  .nav-link.ist-hier::after{height:2.5px}
  .nav-link:focus-visible{outline:2px solid var(--red-akzent);outline-offset:2px}

  .nav-rechts{display:flex;align-items:center;gap:14px}
  .nav-extern{font-size:13.5px;font-weight:600;color:var(--slate);white-space:nowrap;transition:color .2s}
  .nav-extern span{margin-left:4px;display:inline-block;transition:transform .25s cubic-bezier(.32,.72,0,1)}
  .nav-extern:hover{color:var(--ink)}
  .nav-extern:hover span{transform:translate(2px,-2px)}
  .nav-cta{background:var(--red-akzent);color:#fff;
    padding:11px 20px;border-radius:100px;font-weight:700;font-size:14px;white-space:nowrap;
    transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .25s}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(167,41,32,.3)}
  .nav-cta:active{transform:translateY(0)}

  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:9px 6px;cursor:pointer}
  .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menue{display:none;position:fixed;inset:0;z-index:60;background:var(--ink);
    flex-direction:column;align-items:center;justify-content:center;gap:24px}
  .menue.auf{display:flex}
  .menue a{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.5px;transition:color .2s}
  .menue a:hover{color:var(--red-akzent-hell)}
  .menue .menue-extern{font-size:1.05rem;font-weight:600;color:#9AA7B2;margin-top:8px}
  .menue-zu{position:absolute;top:10px;right:16px;background:none;border:0;color:#9AA7B2;
    font-size:38px;line-height:1;padding:8px 14px;cursor:pointer}
  .menue-zu:hover{color:#fff}

  @media(max-width:1120px){
    .nav-links,.nav-extern{display:none}
    .burger{display:flex}
  }

  /* ---------- Hero ---------- */
  .hero{position:relative;color:#fff;padding:clamp(40px,5vh,64px) 0 clamp(34px,4.5vh,54px);overflow:hidden;
    min-height:100svh;display:flex;align-items:center;
background:radial-gradient(1100px 560px at 82% -10%,#2C3A4B55 0%,transparent 60%),linear-gradient(135deg,var(--hero-1) 0%,var(--hero-2) 100%)}
  .hero .wrap{position:relative;z-index:2;max-width:1180px}
  /* Der Globus richtet sich nach der Fensterhöhe, damit Schlagzeile,
     Globus und Zitat gemeinsam ins Bild passen. */
  .hero-grid{display:grid;gap:clamp(20px,2.6vh,34px);align-items:center;
    --globus:min(660px, 58vh)}
  .hero-titel{white-space:nowrap}
  .hero-text{max-width:620px}
  .hero-globus{position:relative}
  /* Der Verlauf, der vom Globus weg heller wird. Er haengt am Globus
     selbst, folgt also von allein nach rechts oder in die Mitte, je nach
     Schirmbreite. z-index -1 legt ihn hinter die Kugel, aber vor den
     Sternenhimmel - genau dort soll er wirken. */
  .hero-globus::before{
    content:"";position:absolute;left:50%;top:50%;z-index:-1;
    width:215%;aspect-ratio:1;transform:translate(-50%,-50%);
    pointer-events:none;
    background:radial-gradient(circle closest-side,
      rgba(6,10,14,.64) 0%, rgba(6,10,14,.56) 30%,
      rgba(6,10,14,.33) 52%, rgba(6,10,14,.12) 72%, rgba(6,10,14,0) 88%);
  }
  .hero-bu{margin:clamp(10px,1.6vh,18px) auto 0;font-size:13px;line-height:1.55;color:#AEBAC4;text-align:center;max-width:44ch}
  .hero-bu a{color:#DE5245;font-weight:700;border-bottom:1px solid currentColor}
  .hero-bu a:hover{color:#fff}
  @media(min-width:1000px){
    .hero-grid{
      grid-template-columns:minmax(0,1fr) var(--globus);
      grid-template-areas:"titel titel" "text globus" "zitat zitat";
      column-gap:clamp(34px,4vw,60px);
    }
    .hero-titel{grid-area:titel}
    .hero-text{grid-area:text;align-self:center}
    .hero-globus{grid-area:globus}
    .hero-zitat{grid-area:zitat}
  }
  @media(max-width:999px){
    .hero{padding:64px 0 72px}
    .hero h1{margin-bottom:0}
    /* einspaltig würde der Globus sonst die volle Breite einnehmen */
    .hero-globus{max-width:min(560px,66vh);margin-inline:auto;width:100%}
  }
  .hero h1{font-size:clamp(30px,7.2vw,82px);font-weight:800;letter-spacing:-2px;line-height:1.02;margin:0}
  .hero h1 .hl{color:var(--red-akzent-hell)}
  /* Zitat schließt den Hero ab, statt ihn zu eröffnen */
  /* Zitat und Urheber stehen auf einer Zeile und brechen erst um,
     wenn wirklich kein Platz mehr ist. */
  .hero-zitat{position:relative;z-index:2;margin:0;padding:clamp(16px,2.2vh,24px) 0 0;
    border-top:1px solid rgba(255,255,255,.14);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
  .hero-zitat blockquote{margin:0;font-size:clamp(16px,1.55vw,21px);line-height:1.45;
    font-weight:600;color:#E8ECEF;letter-spacing:-.3px}
  .hero-zitat blockquote::before{content:"»";color:var(--red-akzent-hell);margin-right:2px}
  .hero-zitat blockquote::after{content:"«";color:var(--red-akzent-hell);margin-left:2px}
  .hero-zitat figcaption{font-size:13.5px;font-weight:600;color:#9AA7B2;white-space:nowrap}
  .hero-zitat figcaption::before{content:"— "}
  .hero p.sub{font-size:clamp(16px,1.35vw,19px);color:#CDD6DD;max-width:560px;margin:0 0 clamp(20px,2.6vh,32px)}
  /* ---------- Handlungsbereich im Hero ----------
     Ein gefüllter Knopf, alles Weitere als Textverweis - so steht es auch
     im Styleguide. Der Pfeil läuft beim Zeigen mit. */
  /* Zweite Ueberschrift: traegt das Suchwort, ohne der Schlagzeile die
     Ruhe zu nehmen - darum klein, hell und ohne eigenes Gewicht. */
  .hero-zweit{font-size:clamp(14px,1.5vw,16px);font-weight:600;line-height:1.45;
    letter-spacing:0;color:rgba(255,255,255,.72);margin-bottom:12px;max-width:34em}
  .hero-aktion{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap}
  .cta{display:inline-flex;align-items:center;gap:12px;
    background:#fff;color:#16191D;font-weight:700;font-size:16px;
    padding:16px 26px;border-radius:100px;
    transition:transform .22s cubic-bezier(.32,.72,0,1),box-shadow .28s}
  .cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.34)}
  .cta:active{transform:translateY(0)}
  .cta-pfeil{width:19px;height:19px;flex:0 0 auto;
    transition:transform .28s cubic-bezier(.32,.72,0,1)}
  .cta:hover .cta-pfeil{transform:translateX(4px)}
  .cta:focus-visible{outline:2px solid var(--red-akzent-hell);outline-offset:3px}

  .cta-text{position:relative;display:inline-flex;align-items:center;gap:12px;
    font-weight:600;font-size:15.5px;color:#CDD6DD;transition:color .2s}
  /* Der Ring liegt als eigene Flaeche hinter dem Dreieck. Nur er waechst
     beim Zeigen - das Dreieck bliebe sonst nicht ruhig stehen, weil es im
     Kreis steckt und jede Skalierung mitmachen wuerde. */
  .cta-text .cta-play{position:relative;display:inline-flex;align-items:center;
    justify-content:center;width:38px;height:38px;flex:0 0 auto;color:#fff}
  .cta-text .cta-play::before{content:"";position:absolute;inset:0;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.35);
    transition:border-color .25s,background .25s,transform .25s cubic-bezier(.32,.72,0,1)}
  .cta-text .cta-play svg{position:relative;width:17px;height:17px}
  .cta-text span.cta-play + *{display:inline}
  .cta-text::after{content:"";position:absolute;left:50px;right:0;bottom:2px;height:1.5px;
    background:var(--red-akzent-hell);
    transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .cta-text:hover{color:#fff}
  .cta-text:hover .cta-play::before{border-color:var(--red-akzent-hell);background:rgba(222,82,69,.16);transform:scale(1.08)}
  .cta-text:hover::after{transform:scaleX(1)}
  .cta-text:focus-visible{outline:2px solid var(--red-akzent-hell);outline-offset:4px;border-radius:4px}
  .hero-badge{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2.4vh,30px);font-size:14px;color:#BCC7D0}
  .hero-badge .gd{width:10px;height:10px;border-radius:50%;background:#A72920;box-shadow:0 0 0 4px rgba(167,41,32,.25)}

  /* ---------- Säulen ---------- */
  .pillars{background:var(--fog)}
  /* Die drei Zustaende bleiben beieinander: als inline-block rutscht
     die Gruppe als Ganzes in die naechste Zeile, statt dass "frei,"
     allein am Ende der ersten haengt. Passt sie auf schmalen Schirmen
     nicht, bricht sie trotzdem normal um - anders als bei einem festen
     Zeilenumbruch. */
  .zusammen{display:inline-block}
  /* Linksbuendig wie die uebrigen Abschnittskoepfe der Seite - nur
     dieser stand mittig. */
  .pillars-head{max-width:700px;margin:0 0 56px}
  .pillars-head .lead{margin:0}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .ic{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--ink),var(--ink2));display:grid;place-items:center;margin-bottom:20px}
  .card .ic svg{width:28px;height:28px;stroke:#fff}
  .card h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
  .card .big{font-size:22px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px}
  .card p{color:var(--slate);font-size:15px}

  /* ---------- Funktionen ---------- */
  .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
  .feat-list{list-style:none;display:grid;gap:20px}
  .feat-list li{display:flex;gap:16px}
  .feat-list .dot{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
  .feat-list .dot svg{width:22px;height:22px;stroke:var(--ink)}
  /* H3, nicht H4: zwischen dem H2 des Abschnitts und diesen Zeilen
     fehlte sonst eine Stufe - Vorleseprogramme melden das als Sprung. */
  .feat-list h3{font-size:17px;font-weight:700;margin-bottom:2px;
    line-height:1.3;letter-spacing:normal}
  .feat-list p{color:var(--slate);font-size:15px}

  /* Belegungs-Mock */
  .mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .mock-top{background:var(--ink);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
  .mock-top span{font-weight:700;font-size:14px;letter-spacing:.5px}
  .mock-top .live{position:relative;display:flex;align-items:center;gap:8px;font-size:12px;color:#E88A81}
  .mock-top .live::before{content:"";width:9px;height:9px;border-radius:50%;background:#DE5245;
    box-shadow:0 0 0 4px rgba(222,82,69,.3);
    /* Der Punkt selbst pocht - der Ring darum geht nach aussen weg
       (::after). Zwei Bewegungen auf demselben Takt: das liest sich
       als Puls und nicht als Flackern. */
    animation:livePuls 2.4s ease-in-out infinite}
  .mock-top .live::after{content:"";position:absolute;left:0;top:50%;
    width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#DE5245;
    pointer-events:none;animation:liveWelle 2.4s ease-out infinite}
  @keyframes livePuls{
    0%,100%{transform:scale(1)}
    14%{transform:scale(1.28)}
    28%{transform:scale(1)}
  }
  @keyframes liveWelle{
    0%{transform:scale(1);opacity:.5}
    60%{transform:scale(3);opacity:0}
    100%{transform:scale(3);opacity:0}
  }
  .legend{display:flex;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--slate)}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
  .units{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:18px 20px 24px}
  .u{aspect-ratio:1;border-radius:8px}
  .u.free{background:var(--green)} .u.res{background:var(--amber)} .u.occ{background:var(--ink2)}
  .u.free2{background:#F2D6D3} .u.occ2{background:#C7CDD3}

  /* ---------- Referenz ---------- */
  .ref{background:var(--ink);color:#fff}
  .ref .eyebrow{color:#DE5245}
  .ref h2{margin-bottom:18px}
  .ref-head{max-width:820px;margin:0 auto 40px;text-align:center}
  .ref-media{max-width:880px;margin:0 auto}
  .ref-quote.center{max-width:820px;margin:44px auto 0;border-left:0;padding:0;text-align:center}
  .ref-quote.center .q{font-size:25px}
  .ref-intro{color:#C7D1D9;font-size:18px;line-height:1.6}
  .ref-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
  /* ---------- Videobereich ---------- */
  .video{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;
    box-shadow:0 22px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);
    background:radial-gradient(120% 120% at 28% 12%,#33414F 0%,#151C23 62%)}
  .video iframe,.video .video-tafel{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video-tafel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:none;color:#fff;cursor:pointer;padding:24px;text-align:center}
  /* feines Punktraster: die Tafel gehört zur Seite, nicht zu YouTube */
  .video-raster{position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);
    background-size:24px 24px;opacity:.7}
  .video-marke{position:absolute;top:20px;left:22px;width:26px;color:rgba(255,255,255,.4)}
  .video-marke svg{width:100%;height:auto;display:block}
  .video-knopf{position:relative;display:flex;align-items:center;justify-content:center;
    width:76px;height:76px;border-radius:50%;background:var(--red-akzent);color:#fff;
    box-shadow:0 12px 34px rgba(167,41,32,.45);
    transition:transform .3s cubic-bezier(.32,.72,0,1),background .25s}
  /* Kein Versatz nach rechts: der Pfad steht schon so im Feld, dass
     sein Schwerpunkt in der Mitte liegt - das ist die Mitte, die das
     Auge sieht. Ein zusaetzlicher Rand schob ihn sichtbar daneben. */
  .video-knopf svg{width:30px;height:30px}
  /* Der Ring pulst weiter - das Bild soll nach "abspielbar" aussehen */
  .video-knopf::after{content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--red-akzent);animation:videoPuls 2.6s ease-out infinite}
  @keyframes videoPuls{
    0%{transform:scale(1);opacity:.7}
    70%{transform:scale(1.55);opacity:0}
    100%{transform:scale(1.55);opacity:0}
  }
  .video-tafel:hover .video-knopf{transform:scale(1.08);background:#8E211A}
  .video-tafel:focus-visible{outline:2px solid var(--red-akzent-hell);outline-offset:-4px}
  .video-text{position:relative;display:block}
  .video-text b{display:block;font-size:clamp(17px,2.1vw,22px);font-weight:800;letter-spacing:-.4px}
  .video-text small{display:block;margin-top:6px;font-size:13px;color:#AEBAC4}
  @media (prefers-reduced-motion:reduce){ .video-knopf::after{animation:none;opacity:.35} }
  .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video-cap{font-size:13px;color:#8C99A4;margin-top:12px}
  .ref-story{display:grid;gap:24px}
  .step h4{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#C7D1D9;margin-bottom:6px;display:flex;align-items:center;gap:9px}
  .step h4 .no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);color:#C7D1D9;font-size:12px;font-weight:800}
  .step p{color:#B7C2CB;font-size:15px;margin:0;line-height:1.6}
  .ref-quote{margin:48px 0 32px;border-left:3px solid #fff;padding:4px 0 4px 22px;max-width:860px}
  .ref-quote .q{font-size:23px;font-weight:700;line-height:1.45;color:#fff}
  .ref-quote .who{font-size:14px;color:#DE5245;margin-top:12px;font-weight:600}
  .ref .stat-row{display:flex;gap:38px;margin:30px 0 26px;flex-wrap:wrap}
  .stat b{display:block;font-size:38px;font-weight:800;color:#fff;letter-spacing:-1px}
  .stat span{font-size:13px;color:#8C99A4}
  .ref-link{display:inline-block;margin-top:8px;color:#C7D1D9;font-weight:600;font-size:14px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}

  /* ---------- Kontakt ---------- */
  .contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
  .contact .lead{margin-bottom:24px}
  .info-line{display:flex;gap:12px;align-items:center;margin-bottom:14px;font-weight:600}
  .info-line svg{width:20px;height:20px;stroke:var(--red);flex:0 0 auto}
  form{display:grid;gap:16px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label{font-size:13px;font-weight:600;color:var(--slate);display:block;margin-bottom:6px}
  input,textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:var(--fog);transition:border .2s,background .2s}
  input:focus,textarea:focus{outline:none;border-color:var(--ink);background:#fff}
  textarea{resize:vertical;min-height:120px}
  /* Zwei Felder nebeneinander: Haekchen und Text. Der Text steht in
     einem eigenen span - ohne ihn waere der Verweis darin ein drittes
     Feld und spraenge aus der Zeile an den rechten Rand. */
  .check{display:flex;gap:10px;font-size:13px;line-height:1.55;color:var(--slate);align-items:flex-start}
  .check input{flex:0 0 auto;width:auto;margin-top:3px}
  .check > span{flex:1 1 auto;min-width:0}
  /* Unterstrichen: in einem Zustimmungstext muss der Verweis auf die
     Datenschutzerklaerung als Verweis zu erkennen sein - Farbe und
     Fettung allein reichen dafuer nicht. */
  .check a{color:var(--red);font-weight:600;
    text-decoration:underline;text-underline-offset:2px}
  button[type=submit]{background:var(--red);color:#fff;border:0;padding:15px;border-radius:11px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:background .2s}
  button[type=submit]:hover{background:var(--red-dark)}

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:#B9C4CD;padding:64px 0 30px;font-size:14px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
  footer .logo svg{height:72px}
  /* H2, nicht H5: die Fusszeile ist ein eigener Bereich, ihre Spalten
     brauchen keine Zwischenstufen. Die Groesse macht das Stilblatt. */
  footer h2{color:#fff;font-size:13px;font-weight:700;line-height:1.3;
    letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
  footer a{color:#B9C4CD;transition:color .2s}
  footer a:hover{color:#fff}
  footer ul{list-style:none;display:grid;gap:9px}
  .endorse{margin-top:14px;font-size:13px;color:#90A0AB;max-width:320px}
  .endorse a{color:#DE5245;font-weight:600}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7E8C97;font-size:13px}
  .foot-bottom a{margin-left:18px}

  /* Modals */
  .modal-head{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}
  .modal-head h3{font-size:20px}
  .modal-body{padding:24px 28px 32px;max-height:70vh;overflow:auto;font-size:14px;color:#3a4855}
  .modal-body h4{margin:18px 0 6px;font-size:15px;color:var(--ink)}
  .modal-body p{margin-bottom:10px}
  .modal-close{background:var(--fog);border:0;width:36px;height:36px;border-radius:9px;font-size:20px;cursor:pointer;color:var(--slate)}

  /* ---------- Gesamtbelegung-Widget (Funktionen) ---------- */
  .bel{display:flex;gap:22px;align-items:center;padding:24px 22px}
  .donut{width:128px;height:128px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center}
  /* Die Zahl steht genau in der Mitte des Rings. Stuenden Zahl und
     Beschriftung als Paar darin, waere das Paar mittig und die Zahl
     dadurch zu hoch - sichtbar, weil der Ring ein Kreis ist und jede
     Abweichung auffaellt. Darum traegt nur die Zahl die Mitte, die
     Beschriftung haengt darunter. */
  .donut-hole{position:relative;width:82px;height:82px;border-radius:50%;background:#fff;
    display:grid;place-items:center;text-align:center}
  .donut-hole b{font-size:23px;font-weight:800;line-height:1}
  .donut-hole span{position:absolute;left:0;right:0;top:calc(50% + 13px);
    font-size:10px;line-height:1;color:var(--slate)}
  .bel-legend{display:grid;gap:10px;flex:1 1 auto}
  .bl{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700}
  .bl .d{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
  .bl small{color:var(--slate);font-weight:600;margin-left:auto;padding-left:10px}
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
  .kpi{padding:15px 8px;text-align:center;border-right:1px solid var(--line)}
  .kpi:last-child{border-right:0}
  .kpi b{display:block;font-size:21px;font-weight:800}
  .kpi span{font-size:10.5px;color:var(--slate)}

  /* ---------- Dashboard-Abschnitt ---------- */
  .dash-sec{background:var(--fog)}
  .dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:8px}
  .wcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
  /* Der Live-Punkt gehoert zur Ueberschrift, nicht an den linken Rand:
     deshalb linksbuendig und der Zusatz rechts per auto-Abstand. */
  .wcard h3{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;
    line-height:1.3;letter-spacing:normal;
    justify-content:flex-start;align-items:baseline;gap:0}
  .wcard h3 small{margin-left:auto;padding-left:14px}
  .wcard h3 small{color:var(--slate);font-weight:600;font-size:12px}
  .wlegend{display:flex;gap:16px;font-size:12px;font-weight:600;color:var(--slate);margin-bottom:6px}
  .wlegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .chart-svg{width:100%;height:auto;display:block}
  .cols{display:flex;align-items:flex-end;gap:9px;height:132px;margin-bottom:8px}
  .cols .c{flex:1;display:flex;align-items:flex-end;height:100%}
  .cols .c i{display:block;background:linear-gradient(180deg,#C4564B,#A72920);border-radius:6px 6px 0 0;width:100%;height:var(--h)}
  .cols-x{display:flex;gap:9px}
  .cols-x span{flex:1;text-align:center;font-size:10px;color:var(--slate);font-weight:600}
  .dash-note{font-size:12px;color:var(--slate);margin-top:18px}

  /* ---------- Dauerhafte Bewegung im Dashboard ----------
     Die Auswertung ist live. Damit das ankommt, pulst in jeder Karte ein
     Punkt, die Balkenenden atmen und auf den Linien wandert ein Punkt.
     Alles langsam - es soll nicht flackern, sondern arbeiten. */
  .wcard h3{position:relative}
  .live-punkt{position:relative;display:inline-block;width:7px;height:7px;flex:0 0 auto;
    border-radius:50%;background:var(--red-akzent);margin-right:8px;vertical-align:1px}
  .live-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--red-akzent);animation:lebt 2.4s ease-out infinite}
  @keyframes lebt{
    0%{transform:scale(1);opacity:.55}
    70%{transform:scale(3.2);opacity:0}
    100%{transform:scale(3.2);opacity:0}
  }

  /* Balkenende atmet */
  .hk-balken i{position:relative}
  /* Am Ende jedes Balkens sitzt ein Kreis auf der Linie, der über sie
     hinausragt und langsam atmet. Dunkelrot bei den Herkunftsländern,
     dunkelgrau bei „Andere". */
  .hk-balken i::after{content:"";position:absolute;right:0;top:50%;
    width:17px;height:17px;margin:-8.5px -8.5px 0 0;border-radius:50%;
    background:#6E1C16;
    animation:balkenAtmen 2.6s ease-in-out infinite}
  .hk-zeile.ohne-ort .hk-balken i::after{background:#5A636B;animation-duration:3.4s}
  @keyframes balkenAtmen{
    0%,100%{transform:scale(.5);opacity:.35}
    50%{transform:scale(1);opacity:1}
  }

  /* Säulen der Altersverteilung: eine Welle läuft durch */
  .cols .c i{animation:saeuleAtmen 4.2s ease-in-out infinite}
  .cols .c:nth-child(2) i{animation-delay:.18s}
  .cols .c:nth-child(3) i{animation-delay:.36s}
  .cols .c:nth-child(4) i{animation-delay:.54s}
  .cols .c:nth-child(5) i{animation-delay:.72s}
  .cols .c:nth-child(6) i{animation-delay:.90s}
  .cols .c:nth-child(7) i{animation-delay:1.08s}
  @keyframes saeuleAtmen{
    0%,100%{transform:scaleY(1)}
    50%{transform:scaleY(1.045)}
  }
  .cols .c i{transform-origin:bottom}

  @media (prefers-reduced-motion:reduce){
    .live-punkt::after,.hk-balken i::after,.cols .c i{animation:none}
    .mock-top .live::before,.mock-top .live::after{animation:none}
    .mock-top .live::after{display:none}
    .hk-balken i::after{opacity:.5}
  }

  /* ---------- Kunden ---------- */
  .kmap{background:var(--fog)}
  .kmap .lead{margin-bottom:22px}
  /* Karte und Liste bringen ihre Gestaltung in karte.css mit. */

  @media(max-width:860px){
    .grid3,.feat-grid,.ref .wrap,.contact .wrap,.foot-grid{grid-template-columns:1fr}
    section{padding:64px 0}
    .ref .wrap{gap:34px}
    .dash{grid-template-columns:1fr}
    .bel{flex-direction:column;text-align:center}
    .bl small{margin-left:0}
    .ref-grid{grid-template-columns:1fr}
  }
  /* Farbakzente: Symbole & Icons (S/W-Variante) */
  .grid3 .card:nth-child(1) .ic{background:#A72920}
  .grid3 .card:nth-child(2) .ic{background:#F0A53C}
  .grid3 .card:nth-child(3) .ic{background:#E2402E}
  .feat-list li:nth-child(1) .dot svg{stroke:#A72920}
  .feat-list li:nth-child(2) .dot svg{stroke:#F0A53C}
  .feat-list li:nth-child(3) .dot svg{stroke:#E2402E}
  .feat-list li:nth-child(4) .dot svg{stroke:#A72920}
  .feat-list li:nth-child(5) .dot svg{stroke:#2C3946}
  /* Der Koeder steht im Quelltext, aber nicht auf dem Schirm.
     Nicht display:none - manche Programme fuellen gerade die aus. */
  .koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .info-line svg{stroke:#A72920}
  /* Die Aufforderung am Ende des Vorspanns im Rot der Marke. Nicht
     --red: das ist der Platzhalter fuer das Familienrot und steht
     zurzeit auf Anthrazit.

     Eigene Zeile: im Fliesstext riss der Umbruch sie auseinander -
     "Schreiben Sie" am Ende der einen Zeile, "uns." am Anfang der
     naechsten. */
  .ruf{display:block;margin-top:8px;color:var(--red-akzent);font-weight:700}
  /* Sprungmarke: unsichtbar, bis jemand mit der Tabulatortaste
     hineinlaeuft. Ohne sie muss man sich durch die ganze Navigation
     tabben, bevor der Inhalt kommt. */
  .springmarke{position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
    font-weight:700;font-size:14px;text-decoration:none}
  .springmarke:focus{left:0}
  /* ---------- Animationen & 3D-Effekte ---------- */
  .anim-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
  .anim-ready .reveal.in{opacity:1;transform:none}
  .anim-ready .grid3 .card:nth-child(2),.anim-ready .dash .wcard:nth-child(2){transition-delay:.18s}
  .anim-ready .grid3 .card:nth-child(3),.anim-ready .dash .wcard:nth-child(3){transition-delay:.36s}
  .anim-ready .cols .c i{height:0}
  .anim-ready .cols .c i{transition:height 1.6s cubic-bezier(.2,.7,.2,1)}
  .anim-ready .in .cols .c i{height:var(--h)}
  .anim-ready .chart-svg polyline{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.8s ease}
  .anim-ready .in .chart-svg polyline{stroke-dashoffset:0}
  /* Bewegungen: die rote Linie wird gezogen, der Punkt läuft als
     Stiftspitze mit. Dafür linear und genau drei Sekunden - dieselbe
     Dauer wie die Fahrt des Punktes im Quelltext der Karte. Mit einer
     weichen Kurve liefen beide auseinander. */
  .anim-ready .chart-svg .linie-an{transition:stroke-dashoffset 3s linear}
  /* Die zweite Linie kommt danach und langsamer - zwei gleichzeitig
     gezogene Linien sind ein Gewirr. */
  .anim-ready .chart-svg .linie-aus{transition:stroke-dashoffset 4.4s cubic-bezier(.25,.6,.25,1) .45s}
  .anim-ready .chart-svg .laeufer{opacity:0;transition:opacity .3s ease}
  .anim-ready .in .chart-svg .laeufer{opacity:1}
  .anim-ready .donut{transform:scale(.84) rotate(-14deg);opacity:0;transition:transform 1.5s cubic-bezier(.2,.8,.2,1),opacity 1.1s}
  .anim-ready .in .donut{transform:none;opacity:1}
  @media (prefers-reduced-motion: reduce){
    .anim-ready .reveal,.anim-ready .reveal.in{opacity:1;transform:none;transition:none}
    .logo-wort{transition:none}
    .anim-ready .cols .c i{height:var(--h);transition:none}
    .anim-ready .chart-svg polyline{stroke-dashoffset:0;transition:none}
    /* Ohne Bewegung kein mitlaufender Punkt: er wird nie gestartet und
       stünde sonst in der linken oberen Ecke der Karte. */
    .anim-ready .chart-svg .laeufer{opacity:0}
    .anim-ready .donut{transform:none;opacity:1;transition:none}
  }
  /* Prognose: zusätzliche Bewegung */
  .anim-ready .prog-line{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.8s ease}
  .anim-ready .in .prog-line{stroke-dashoffset:0}
  .anim-ready .prog-area{opacity:0;transition:opacity 1.4s ease .3s}
  .anim-ready .in .prog-area{opacity:1}
  /* Die gestrichelten Schwellen laufen durchgehend, nicht nur die
     ersten Sekunden: eine Prognose ist nie fertig, und die Karte wirkt
     sonst eingefroren, sobald man nach dem Scrollen hinsieht. */
  .prog-svg .thr{animation:thrFlow 1.1s linear infinite}
  @keyframes thrFlow{to{stroke-dashoffset:-18}}
  @media (prefers-reduced-motion: reduce){
    .anim-ready .prog-line{stroke-dashoffset:0;transition:none}
    .anim-ready .prog-area{opacity:1;transition:none}
    .prog-svg .thr{animation:none}
  }

  /* ---------- Rueckmeldungen des Kontaktformulars ----------
     Kam mit der Anbindung an Laravel dazu: der Entwurf zeigte nur eine
     Dankesmeldung, jetzt kann das Formular auch Fehler melden. Farben
     und Radien wie im uebrigen Formular. */
  .form-fehler{background:rgba(167,41,32,.08);border:1px solid rgba(167,41,32,.35);
    border-radius:12px;padding:14px 16px;margin-bottom:4px}
  /* Sprungziel nach einer abgewiesenen Sendung ist der Abschnitt und
     nicht die Meldung: So steht das ganze Formular im Bild und man
     sieht, was man schon ausgefüllt hat. Ohne diesen Abstand säße
     seine Oberkante unter der mitlaufenden Kopfleiste (75 Punkte).
     Gilt auch für den Verweis „Kontakt" oben in der Navigation. */
  .contact{scroll-margin-top:86px}
  /* Das Formular ist das Sprungziel nach einer abgewiesenen
     Sendung. Der Abstand haelt es aus dem Schatten der Kopfleiste
     (75 Punkte) und laesst eine Handbreit Luft. */
  .contact form{scroll-margin-top:78px}
  /* Kein Rahmen, wenn der Browser den Fokus hierher setzt: Die Meldung
     ist kein Bedienelement, ein Fokusrahmen sähe nach anklickbar aus.
     Vorgelesen wird sie trotzdem - dafür sorgt role="alert". */
  .form-fehler:focus{outline:none}
  .form-fehler ul{margin:0;padding-left:18px}
  .form-fehler li{font-size:14.5px;line-height:1.55;color:#A72920}
  .form-fehler li + li{margin-top:4px}
  .contact .ok{margin-top:4px}

  /* ══════════════════════════════════════════════════════════════
     NACHBESSERUNGEN ZUR BARRIEREFREIHEIT

     Bewusst am Ende und nicht oben im jeweiligen Abschnitt: Das
     übrige Stilblatt wird unverändert aus webv2/entwurf/website/
     index.html gezogen. Steht die Korrektur hier, überlebt sie das
     nächste Nachziehen. Im Entwurf gehören dieselben Werte
     nachgetragen, sonst laufen beide Fassungen auseinander.

     Gemessen am 01.10.2026 mit axe-core 4.13 gegen WCAG 2.1 AA.
     ══════════════════════════════════════════════════════════════ */

  :root{
    /* Das helle Markenrot trägt als Fließtext auf Anthrazit nur
       3,89:1 - verlangt sind 4,5:1. Für die Schlagzeile reicht es
       (große Schrift, 3:1), für 13- und 14-Punkt-Text nicht. Darum
       ein eigener, 11 % hellerer Ton nur für die kleinen Stellen:
       4,53:1, und die Schlagzeile behält ihr Rot. */
    --red-akzent-hell-klein:#E2665A;
  }

  /* 1.4.3 Kontrast (AA) */
  .ref .eyebrow,
  .ref-quote .who,
  .hero-bu a,
  .endorse a{color:var(--red-akzent-hell-klein)}
  /* Grau der Fußzeile: 4,38:1 -> 4,50:1 */
  .foot-bottom{color:#808E99}

  /* 1.4.10 Umbruch: Bei 320 Pixeln Breite schob die Überschrift des
     Referenzbereichs die Seite um vier Pixel zur Seite - lange
     deutsche Wörter wie „Flüchtlingsmanagement“ brechen von sich aus
     nicht um.

     break-word greift von sich aus nur, wenn ein Wort wirklich nicht
     passt - auf breiten Schirmen ändert es nichts. */
  h1,h2,h3,
  .ref-quote .q,
  .hero-zitat blockquote,
  .lead,
  .sub{overflow-wrap:break-word}

  /* Silbentrennung nur auf schmalen Schirmen. Sie braucht die
     Sprachangabe, die im html-Element steht, und trennt an erlaubten
     Stellen statt mitten im Wort. Auf breiten Schirmen bleibt sie
     aus: dort ist Platz genug, und eine getrennte Schlagzeile sieht
     nach Zeitungsspalte aus. */
  @media (max-width:600px){
    h1,h2,h3,
    .ref-quote .q,
    .hero-zitat blockquote,
    .lead,
    .sub{hyphens:auto}
  }

  /* 2.4.7 Fokus sichtbar: Die Felder des Kontaktformulars tauschten
     beim Hineinspringen nur Rahmenfarbe und Hintergrund. Das ist zu
     leise - mit der Tastatur sieht man nicht, wo man steht. */
  .contact input:focus-visible,
  .contact textarea:focus-visible{
    outline:2px solid var(--red-akzent);
    outline-offset:2px;
  }

  /* ---------- Rechenaufgabe im Kontaktformular ----------
     Kam mit dem Spamschutz dazu. Sieht aus wie die übrigen Felder,
     nur schmaler - es ist eine Zahl, kein Satz. */
  .contact .aufgabe input{max-width:150px}
  /* Kleingedrucktes zum Feld, nicht zum Abschnitt: deutlich unter
     der Beschriftung (13px) und nur so breit wie nötig, sonst zieht
     ein Nebensatz eine Linie quer durch das ganze Formular. */
  .contact .aufgabe-hinweis{
    margin-top:6px;max-width:44ch;
    font-size:11.5px;line-height:1.45;color:var(--slate);
  }

  /* ---------- Zielflächen in der Fußzeile ----------
     WCAG 2.2, 2.5.8 nennt 24 × 24 Punkte als Mindestmaß für etwas,
     das angetippt werden soll. Die Verweise waren 18 bis 19 Punkte
     hoch - auf dem Handy trifft man daneben. Die Schrift bleibt wie
     sie ist, nur die anfassbare Fläche wächst. */
  footer ul a,
  .foot-bottom a{display:inline-block;padding:4px 0;min-height:24px}
  footer ul{gap:5px}