/* ============================================================
   SCHRIFTEN — lokal eingebettet, kein externer Aufruf (DSGVO)
   ============================================================ */
@font-face{
  font-family:'Archivo';
  src:url('../assets/schriften/archivo.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  src:url('../assets/schriften/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================================================
   TOKENS — heller Modus auf blankem :root
   ============================================================ */
:root{
  --grund:            #FFFFFF;
  --grund-papier:     #F6F4F0;
  --grund-tief:       #011A35;
  --flaeche-karte:    #FFFFFF;
  --linie:            #DED9D1;
  --linie-stark:      #B9B2A8;

  --text:             #011A35;
  --text-sekundaer:   #5A6673;
  --text-auf-tief:    #EDF1F5;
  --text-auf-tief-sek:#A9B4C0;

  /* Farben aus dem Logo. Die Flächenfarben sind zu hell für Schrift auf
     hellem Grund, dafür gibt es die -text-Varianten (mind. 4,5:1). */
  --strang-wurzeln:   #0188B4;
  --strang-wachstum:  #7EB930;
  --strang-wir:       #F8870E;
  --strang-wurzeln-text:  #00658C;
  --strang-wachstum-text: #46700F;
  --strang-wir-text:      #9E4E00;

  --aktion-grund:     #011A35;
  --aktion-text:      #FFFFFF;
  --aktion-hover:     #05305C;
  --fokus:            #00658C;

  --logo-hell:        block;
  --logo-dunkel:      none;
  --bild-helligkeit:  1;

  --lagh-blau:        #2971B4;
  --lagh-grau:        #A8AFB5;
  --lebenshilfe-blau:    #0074BC;
  --lebenshilfe-schrift: #231F20;

  --mass-inhalt:      1180px;
  --mass-text:        68ch;
  --radius:           4px;
  --radius-gross:     10px;

  --takt-1: .5rem;  --takt-2: 1rem;   --takt-3: 1.5rem;
  --takt-4: 2.5rem; --takt-5: 4rem;   --takt-6: 6rem;

  --tempo-schnell: 140ms;
  --tempo-basis:   220ms;
  --kurve: cubic-bezier(.2,.6,.3,1);
}

/* Dark: Systemeinstellung — greift nur, wenn NICHT explizit hell gewählt */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:            #121C28;
    --grund-papier:     #0D151F;
    --grund-tief:       #0A121B;
    --flaeche-karte:    #1A2532;
    --linie:            #2A3746;
    --linie-stark:      #3D4C5E;

    --text:             #DCE4ED;
    --text-sekundaer:   #A9B4C0;
    --text-auf-tief:    #EDF1F5;
    --text-auf-tief-sek:#A9B4C0;

    --strang-wurzeln:   #35B0E3;
    --strang-wachstum:  #7EB930;
    --strang-wir:       #F8870E;
    --strang-wurzeln-text:  #35B0E3;
    --strang-wachstum-text: #7EB930;
    --strang-wir-text:      #F8870E;

    --aktion-grund:     #EDF1F5;
    --aktion-text:      #0D151F;
    --aktion-hover:     #FFFFFF;
    --fokus:            #FFD166;

    --logo-hell:        none;
    --logo-dunkel:      block;
    --bild-helligkeit:  .9;

    --lagh-blau:        #6FB3EE;
    --lagh-grau:        #7C8791;
    --lebenshilfe-blau:    #5AB4EC;
    --lebenshilfe-schrift: #DCE4ED;
  }
}

/* Dark: ausdrückliche Wahl — gewinnt in beide Richtungen */
:root[data-theme="dark"]{
  --grund:            #121C28;
  --grund-papier:     #0D151F;
  --grund-tief:       #0A121B;
  --flaeche-karte:    #1A2532;
  --linie:            #2A3746;
  --linie-stark:      #3D4C5E;

  --text:             #DCE4ED;
  --text-sekundaer:   #A9B4C0;
  --text-auf-tief:    #EDF1F5;
  --text-auf-tief-sek:#A9B4C0;

  --strang-wurzeln:   #35B0E3;
  --strang-wachstum:  #7EB930;
  --strang-wir:       #F8870E;
  --strang-wurzeln-text:  #35B0E3;
  --strang-wachstum-text: #7EB930;
  --strang-wir-text:      #F8870E;

  --aktion-grund:     #EDF1F5;
  --aktion-text:      #0D151F;
  --aktion-hover:     #FFFFFF;
  --fokus:            #FFD166;

  --logo-hell:        none;
  --logo-dunkel:      block;
  --bild-helligkeit:  .9;

  --lagh-blau:        #6FB3EE;
  --lagh-grau:        #7C8791;
  --lebenshilfe-blau:    #5AB4EC;
  --lebenshilfe-schrift: #DCE4ED;
}

/* ============================================================
   GRUNDLAGEN
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:'Atkinson Hyperlegible Next', system-ui, sans-serif;
  font-size:1.125rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; filter:brightness(var(--bild-helligkeit)); }

h1,h2,h3,h4{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}

p{ margin:0; }
dl, dt, dd{ margin:0; }          /* dd hat sonst 40px Einzug vom Browser */
ul, ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--fokus);
  outline-offset:3px;
  border-radius:2px;
}

.nur-screenreader{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.sprung{
  position:absolute; left:var(--takt-2); top:-100px; z-index:100;
  background:var(--aktion-grund); color:var(--aktion-text);
  padding:var(--takt-2) var(--takt-3); border-radius:var(--radius);
  font-weight:600; text-decoration:none;
  transition:top var(--tempo-schnell) var(--kurve);
}
.sprung:focus{ top:var(--takt-2); }

/* ============================================================
   LAYOUT-HILFEN
   ============================================================ */
.bahn{
  width:100%; max-width:var(--mass-inhalt);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}

.abschnitt{ padding-block:clamp(3.5rem, 8vw, var(--takt-6)); }
.abschnitt--papier{ background:var(--grund-papier); }
/* Dunkle Sektion trägt ihr eigenes Tokenset — Farben müssen zum Grund passen,
   auch wenn ringsum der helle Modus gilt. */
.abschnitt--tief{
  background:var(--grund-tief);
  color:var(--text-auf-tief);
  --strang-wurzeln:  #35B0E3;
  --strang-wachstum: #7EB930;
  --strang-wir:      #F8870E;
  --strang-wurzeln-text:  #35B0E3;
  --strang-wachstum-text: #7EB930;
  --strang-wir-text:      #F8870E;
  --text-sekundaer:  var(--text-auf-tief-sek);
  --linie:           color-mix(in srgb, var(--text-auf-tief) 22%, transparent);
}

.kopfzeile-abschnitt{
  display:flex; flex-direction:column; gap:var(--takt-2);
  margin-bottom:var(--takt-4);
  max-width:var(--mass-text);
}

.augenbraue{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-sekundaer);
}
.abschnitt--tief .augenbraue{ color:var(--text-auf-tief-sek); }

h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); font-weight:600; letter-spacing:-.01em; }

.fliess{ max-width:var(--mass-text); }
.fliess p + p{ margin-top:var(--takt-2); }

/* ---- Symbol-Achse -------------------------------------------------
   Jedes Icon neben einem Label sitzt in einem Kästchen von genau einer
   Zeilenhöhe und ist darin mittig zentriert. Dadurch liegt es exakt auf
   der Mittelachse der ERSTEN Textzeile — auch wenn der Text umbricht.
   Ersetzt jedes manuelle margin-top / padding-top.
   ------------------------------------------------------------------ */
.symbol{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:1.6em;          /* Rückfall: entspricht der Standard-Zeilenhöhe */
  height:1lh;            /* exakt, sobald der Browser es kennt */
}
/* Zeile aus Symbol + Text: oben ausrichten, damit das Symbol
   an der ersten Zeile hängt statt am Block zu zentrieren */
.symbolzeile{ display:flex; align-items:flex-start; gap:.7rem; }

/* Blattform — abgeleitet aus dem Logo.
   Das Element ist das Achsen-Kästchen, ::before die eigentliche Form.
   Farbe kommt über `color`, nicht über `background`. */
.blatt{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:.9em;
  height:1.6em;
  height:1lh;
}
/* Einfärbung als Modifier statt als style-Attribut im Markup. html-validate
   verbietet Inline-Styles (no-inline-style), und im Designsystem gehören
   Token-Zuweisungen ohnehin hierher — sonst stehen dieselben Farben an
   dreizehn Stellen im HTML und ändern sich nur an zwölf davon. */
.blatt--wurzeln{  color:var(--strang-wurzeln); }
.blatt--wachstum{ color:var(--strang-wachstum); }
.blatt::before{
  content:''; display:block;
  width:.85em; height:.85em;
  background:currentColor;
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
}
/* SVG-Icons folgen derselben Achse */
.symbol svg{ display:block; }

/* ---- Blattfach ----------------------------------------------------
   Die Blattform als Träger: umschließt eine Zahl oder ein Symbol.
   Farbe kommt über --ton. Ersetzt die früheren farbigen Kanten.
   ------------------------------------------------------------------ */
.blattfach{
  position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:3.05em; height:3.05em;
}
.blattfach::before{
  content:''; position:absolute; inset:0;
  background:color-mix(in srgb, var(--ton) 26%, transparent);
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
}
.blattfach > *{ position:relative; }

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.kopf{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{
  display:flex; align-items:center; gap:var(--takt-3);
  min-height:72px; padding-block:.6rem;
}
.marke{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-right:auto; flex:none;
}
.marke img{ width:44px; height:44px; filter:none; }
.marke__logo-hell{ display:var(--logo-hell); }
.marke__logo-dunkel{ display:var(--logo-dunkel); }
.marke__text{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:800; font-size:.95rem; line-height:1.15;
  letter-spacing:-.01em;
}
.marke__text span{
  display:block; font-weight:600; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-sekundaer);
}

.navigation{ display:flex; align-items:center; gap:var(--takt-3); }
.navigation a{
  text-decoration:none; font-size:.98rem; font-weight:600;
  white-space:nowrap;
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:border-color var(--tempo-schnell) var(--kurve);
}
.navigation a:hover{ border-bottom-color:var(--text); }

.werkzeuge{ display:flex; align-items:center; gap:.6rem; }

.schalter{
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; color:inherit;
  border:1px solid var(--linie-stark);
  border-radius:999px;
  padding:.45rem .85rem;
  font:inherit; font-size:.85rem; font-weight:600;
  white-space:nowrap; cursor:pointer;
  transition:border-color var(--tempo-schnell) var(--kurve),
             background var(--tempo-schnell) var(--kurve);
}
.schalter:hover{ border-color:var(--text); background:var(--grund-papier); }
.schalter svg{ display:block; width:16px; height:16px; }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--aktion-grund); color:var(--aktion-text);
  border:2px solid var(--aktion-grund);
  border-radius:var(--radius);
  padding:.75rem 1.4rem;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--tempo-schnell) var(--kurve),
             border-color var(--tempo-schnell) var(--kurve);
}
.knopf:hover{ background:var(--aktion-hover); border-color:var(--aktion-hover); }
.knopf--gross{ padding:1rem 1.9rem; font-size:1.0625rem; }
.knopf--rand{
  background:transparent; color:var(--text); border-color:var(--linie-stark);
}
.knopf--rand:hover{ background:transparent; border-color:var(--text); }
.abschnitt--tief .knopf--rand{ color:var(--text-auf-tief); border-color:var(--text-auf-tief-sek); }
.abschnitt--tief .knopf--rand:hover{ border-color:var(--text-auf-tief); }

.navigation__nur-menue{ display:none; }
.schalter--menue{ display:none; }
.schalter--menue[hidden]{ display:none; }

/* Unter 1240px reicht der Platz im Kopf nicht für alle Links: Menüknopf */
@media (max-width: 1240px){
  .navigation{ display:none; }
  .marke__text span{ display:none; }
  .schalter--menue:not([hidden]){ display:inline-flex; }

  /* Aufgeklapptes Menü: Tafel unter dem Kopf */
  .navigation.ist-offen{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--grund);
    border-bottom:1px solid var(--linie);
    box-shadow:0 18px 30px -24px rgba(1, 26, 53, .45);
    padding:.25rem clamp(1.25rem, 5vw, 3rem) 1rem;
  }
  .navigation.ist-offen a{
    padding:.95rem 0; font-size:1.125rem;
    border-bottom:1px solid var(--linie);
  }
  .navigation.ist-offen a:last-child{ border-bottom:0; }
  .navigation.ist-offen a:hover{ border-bottom-color:var(--linie); text-decoration:underline; text-underline-offset:4px; }
  .navigation.ist-offen .navigation__nur-menue{ display:block; }
  .navigation.ist-offen a[href="#anmeldung"]{ font-weight:800; }
}

/* Menü-Symbol wird beim Öffnen zum Kreuz */
.schalter--menue path{ transform-box:fill-box; transform-origin:center; transition:transform var(--tempo-basis) var(--kurve), opacity var(--tempo-schnell) var(--kurve); }
.schalter--menue[aria-expanded="true"] .menue__oben{  transform:translateY(5px) rotate(45deg); }
.schalter--menue[aria-expanded="true"] .menue__mitte{ opacity:0; }
.schalter--menue[aria-expanded="true"] .menue__unten{ transform:translateY(-5px) rotate(-45deg); }
@media (max-width: 620px){
  .schalter__text{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .schalter{ padding:.45rem .6rem; }
  .knopf{ padding:.65rem 1rem; font-size:.95rem; }
  .marke{ min-width:0; }
  .marke__text{
    min-width:0; font-size:.85rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .werkzeuge{ flex:none; }
}
@media (max-width: 430px){
  .marke__text{ display:none; }
}
/* Ganz schmal: Anmelden steht im Menü, der Kopf braucht den Platz */
@media (max-width: 400px){
  .kopf__anmelden{ display:none; }
}

/* ============================================================
   HERO — die Bühne. Hier wird die Farbe ausgegeben.
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--grund-tief);
  color:var(--text-auf-tief);
  padding-block:clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  /* dunkle Fläche trägt ihr eigenes Tokenset */
  --strang-wurzeln:  #35B0E3;
  --strang-wachstum: #7EB930;
  --strang-wir:      #F8870E;
  --strang-wurzeln-text:  #35B0E3;
  --strang-wachstum-text: #7EB930;
  --strang-wir-text:      #F8870E;
  --text-sekundaer:  var(--text-auf-tief-sek);
  --linie:           color-mix(in srgb, var(--text-auf-tief) 20%, transparent);
}

/* Blätterfeld — dekorativ, liegt hinter dem Inhalt und nie hinter Text */
.blattfeld{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.blattfeld svg{
  position:absolute;
  right:0; top:50%; transform:translateY(-50%);
  width:min(1150px, 74%);
  height:auto; aspect-ratio:1200/600;
  opacity:.92;
  /* blendet nach links aus, damit nie ein Blatt hinter Text liegt */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 42%, #000 64%);
          mask-image:linear-gradient(to right, transparent 0%, transparent 42%, #000 64%);
}
@media (max-width: 880px){
  .blattfeld svg{
    width:150%; right:-25%; top:0; transform:none;
    opacity:.3;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 8%, transparent 42%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 8%, transparent 42%);
  }
}

/* Einwehen: Die Blätter fliegen beim Laden einmal von links herein.
   Bewusste Ausnahme von "keine Bewegung von selbst": einmalig, unter drei
   Sekunden, keine Schleife. Bei reduzierter Bewegung stehen sie sofort. */
.weh{
  transform-box:fill-box; transform-origin:center;
  animation:einwehen 1.7s cubic-bezier(.22,.7,.28,1) both;
}
@keyframes einwehen{
  0%  { opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--dr)); }
  15% { opacity:1; }
  65% { transform:translate(calc(var(--dx) * -.05), calc(var(--dy) * -.12)) rotate(calc(var(--dr) * -.12)); }
  100%{ opacity:1; transform:none; }
}
.weh:nth-child(1){ --dx:-714px; --dy:-129px; --dr:-149deg; animation-delay:1.01s; }
.weh:nth-child(2){ --dx:-707px; --dy:-28px; --dr:221deg; animation-delay:0.39s; }
.weh:nth-child(3){ --dx:-651px; --dy:-70px; --dr:139deg; animation-delay:1.09s; }
.weh:nth-child(4){ --dx:-705px; --dy:-78px; --dr:-122deg; animation-delay:0.67s; }
.weh:nth-child(5){ --dx:-461px; --dy:8px; --dr:-118deg; animation-delay:1.05s; }
.weh:nth-child(6){ --dx:-448px; --dy:-37px; --dr:157deg; animation-delay:1.15s; }
.weh:nth-child(7){ --dx:-702px; --dy:-57px; --dr:-157deg; animation-delay:0.45s; }
.weh:nth-child(8){ --dx:-493px; --dy:80px; --dr:-178deg; animation-delay:0.71s; }
.weh:nth-child(9){ --dx:-593px; --dy:-144px; --dr:-233deg; animation-delay:1.02s; }
.weh:nth-child(10){ --dx:-718px; --dy:-127px; --dr:168deg; animation-delay:1.02s; }
.weh:nth-child(11){ --dx:-713px; --dy:-166px; --dr:-227deg; animation-delay:0.1s; }
.weh:nth-child(12){ --dx:-480px; --dy:-176px; --dr:-154deg; animation-delay:0.31s; }
.weh:nth-child(13){ --dx:-467px; --dy:-124px; --dr:-201deg; animation-delay:0.36s; }
.weh:nth-child(14){ --dx:-580px; --dy:81px; --dr:-215deg; animation-delay:1.18s; }
.weh:nth-child(15){ --dx:-499px; --dy:-180px; --dr:94deg; animation-delay:0.49s; }
.weh:nth-child(16){ --dx:-493px; --dy:-77px; --dr:-176deg; animation-delay:0.31s; }
.weh:nth-child(17){ --dx:-715px; --dy:-32px; --dr:-102deg; animation-delay:0.94s; }
.weh:nth-child(18){ --dx:-584px; --dy:-158px; --dr:-229deg; animation-delay:1.0s; }
.weh:nth-child(19){ --dx:-622px; --dy:-48px; --dr:147deg; animation-delay:0.02s; }
.weh:nth-child(20){ --dx:-391px; --dy:-43px; --dr:158deg; animation-delay:1.17s; }
.weh:nth-child(21){ --dx:-533px; --dy:-69px; --dr:-143deg; animation-delay:0.55s; }
.weh:nth-child(22){ --dx:-527px; --dy:-80px; --dr:113deg; animation-delay:0.83s; }
.weh:nth-child(23){ --dx:-574px; --dy:35px; --dr:119deg; animation-delay:0.3s; }
.weh:nth-child(24){ --dx:-405px; --dy:-9px; --dr:198deg; animation-delay:1.03s; }
.weh:nth-child(25){ --dx:-447px; --dy:-180px; --dr:127deg; animation-delay:0.07s; }
.weh:nth-child(26){ --dx:-598px; --dy:84px; --dr:210deg; animation-delay:0.58s; }
.weh:nth-child(27){ --dx:-592px; --dy:-70px; --dr:125deg; animation-delay:0.54s; }
.weh:nth-child(28){ --dx:-481px; --dy:-45px; --dr:-116deg; animation-delay:1.07s; }
.weh:nth-child(29){ --dx:-482px; --dy:45px; --dr:145deg; animation-delay:0.69s; }
.weh:nth-child(30){ --dx:-524px; --dy:-76px; --dr:-194deg; animation-delay:0.99s; }
.weh:nth-child(31){ --dx:-656px; --dy:-124px; --dr:-169deg; animation-delay:0.35s; }
.weh:nth-child(32){ --dx:-644px; --dy:-47px; --dr:-180deg; animation-delay:0.38s; }
.weh:nth-child(33){ --dx:-441px; --dy:77px; --dr:-177deg; animation-delay:0.68s; }
.weh:nth-child(34){ --dx:-631px; --dy:90px; --dr:226deg; animation-delay:1.02s; }
@media (prefers-reduced-motion: reduce){
  .weh{ animation:none; }
}

.hero__gitter{
  position:relative; z-index:1;
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1.1fr .9fr; align-items:center;
}
@media (max-width: 880px){
  .hero__gitter{ grid-template-columns:1fr; }
  .hero__bild{ order:-1; max-width:260px; }
}

.hero__claim{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--strang-wurzeln);
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:var(--takt-3);
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.05; letter-spacing:-.03em;
  text-wrap:balance;
  margin-bottom:var(--takt-3);
}
/* das eine farbige Wort */
.hero h1 em{
  font-style:normal;
  color:var(--strang-wachstum);
}
.hero__vorspann{
  font-size:clamp(1.15rem, 1.7vw, 1.35rem);
  max-width:44ch; color:var(--text-auf-tief-sek);
  margin-bottom:var(--takt-4);
}
.hero__aktionen{ display:flex; flex-wrap:wrap; gap:var(--takt-2); align-items:center; }
.hero__hinweis{ font-size:.95rem; color:var(--text-auf-tief-sek); }
/* sanfter Schein in Grundfarbe, damit das Logo sich von den Blättern löst */
.hero__bild{ position:relative; }
.hero__bild::before{
  content:''; position:absolute;
  inset:-28%;
  background:radial-gradient(closest-side,
    var(--grund-tief) 52%,
    color-mix(in srgb, var(--grund-tief) 80%, transparent) 74%,
    transparent 100%);
  pointer-events:none;
}
.hero__bild img{ position:relative; filter:none; width:100%; }

/* Hero-Button: hell auf dunkel, damit er die Signalstelle bleibt */
.hero .knopf{
  background:var(--text-auf-tief); color:var(--grund-tief);
  border-color:var(--text-auf-tief);
}
.hero .knopf:hover{ background:#FFFFFF; border-color:#FFFFFF; }

/* ---- Faktenleiste: eigener heller Streifen unter der Bühne ---- */
.fakten{
  background:var(--grund-papier);
  border-bottom:1px solid var(--linie);
}
.fakten__reihe{
  display:flex; flex-wrap:wrap;
  padding-block:var(--takt-3);
}
.fakten__eintrag{
  flex:1 1 210px;
  padding-right:var(--takt-3);
  border-right:1px solid var(--linie);
  display:flex; align-items:baseline; gap:.7rem;
  white-space:nowrap;
}
.fakten__eintrag:last-child{ border-right:0; }
.fakten__eintrag:not(:first-child){ padding-left:var(--takt-3); }
.fakten__marke{
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-sekundaer);
  flex:none;
}
.fakten__wert{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:clamp(1.15rem, 1.8vw, 1.5rem); font-weight:800;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.fakten__wert a{
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:2px;
  text-decoration-color:var(--strang-wurzeln);
}
.fakten__wert a:hover{ text-decoration-color:var(--text); }
@media (max-width: 700px){
  .fakten__eintrag{
    flex:1 1 100%; border-right:0; padding-left:0 !important;
    border-bottom:1px solid var(--linie); padding-block:.7rem;
  }
  .fakten__eintrag:last-child{ border-bottom:0; }
}

/* ============================================================
   TAGESABLAUF — Tagesleiste und Zeitachse
   Bewegung nur bei Hover, nie beim Scrollen oder von selbst.
   prefers-reduced-motion schaltet sie oben global ab.
   ============================================================ */
.tagesablauf{ max-width:900px; }

/* ---- Tagesleiste: der Tag als Band, Breite = Dauer in Minuten ---- */
.tagesleiste{
  position:sticky; top:73px; z-index:5;       /* Höhe des Kopfbereichs */
  background:var(--grund-papier);
  padding-block:.4rem .1rem;
}
/* weicher Übergang, damit die Karten darunter wegtauchen statt abzuschneiden */
.tagesleiste::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:18px;
  background:linear-gradient(var(--grund-papier), transparent);
  pointer-events:none;
}
.tagesleiste__band{
  display:grid;
  /* 9:00 … 16:00 in Minuten, in der Reihenfolge der Liste */
  grid-template-columns:30fr 30fr 30fr 30fr 15fr 30fr 60fr 60fr 60fr 45fr 30fr;
  gap:3px; height:22px; margin-top:12px;
}
.tl{
  display:block; height:100%;
  border-radius:4px;
  background:var(--ton);
  transform-origin:50% 100%;
  transition:transform var(--tempo-basis) var(--kurve),
             opacity var(--tempo-basis) var(--kurve);
}
.tl--wir{ --ton:var(--strang-wir); }
.tl--leise{ --ton:color-mix(in srgb, var(--strang-wir) 55%, var(--grund-papier)); }
.tl--programm{ --ton:color-mix(in srgb, var(--text-sekundaer) 45%, var(--grund-papier)); }
.tl--pause{
  background:repeating-linear-gradient(-45deg,
    var(--linie-stark) 0 2px, transparent 2px 6px);
  box-shadow:inset 0 0 0 1px var(--linie);
}
.tl--workshop{
  background:linear-gradient(90deg,
    var(--strang-wurzeln) 0 33.4%,
    var(--strang-wachstum) 33.4% 66.7%,
    var(--strang-wir) 66.7%);
}

.tagesleiste__skala{
  position:relative; height:1.4rem; margin-top:.45rem;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--text-sekundaer);
}
.tagesleiste__skala > span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.tagesleiste__skala > span:nth-child(1){ left:0; transform:none; }
.tagesleiste__skala > span:nth-child(2){ left:14.286%; }
.tagesleiste__skala > span:nth-child(3){ left:28.571%; }
.tagesleiste__skala > span:nth-child(4){ left:42.857%; }
.tagesleiste__skala > span:nth-child(5){ left:57.143%; }
.tagesleiste__skala > span:nth-child(6){ left:71.429%; }
.tagesleiste__skala > span:nth-child(7){ left:85.714%; }
.tagesleiste__skala > span:nth-child(8){ left:auto; right:0; transform:none; }

.tagesleiste__legende{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin:.5rem 0 var(--takt-4); font-size:.9rem; color:var(--text-sekundaer);
}
.tagesleiste__legende li{ display:inline-flex; align-items:center; gap:.45rem; }
.tagesleiste__legende .tl{ width:22px; height:10px; }

/* Punkt in der Bildmitte (per Skript) → sein Abschnitt im Band hebt sich */
.tagesleiste__band.hat-aktuell .tl{ opacity:.3; }
.tagesleiste__band .tl.ist-aktuell{ opacity:1; transform:scaleY(1.5); }

/* Karte unter dem Zeiger → ihr Abschnitt im Band hebt sich */
.tagesablauf:has(.tag__punkt:not(.tag__punkt--ende):hover) .tagesleiste__band .tl{ opacity:.3; }
.tagesablauf:has(.tag__punkt:nth-child(1):hover)  .tagesleiste__band .tl:nth-child(1),
.tagesablauf:has(.tag__punkt:nth-child(2):hover)  .tagesleiste__band .tl:nth-child(2),
.tagesablauf:has(.tag__punkt:nth-child(3):hover)  .tagesleiste__band .tl:nth-child(3),
.tagesablauf:has(.tag__punkt:nth-child(4):hover)  .tagesleiste__band .tl:nth-child(4),
.tagesablauf:has(.tag__punkt:nth-child(5):hover)  .tagesleiste__band .tl:nth-child(5),
.tagesablauf:has(.tag__punkt:nth-child(6):hover)  .tagesleiste__band .tl:nth-child(6),
.tagesablauf:has(.tag__punkt:nth-child(7):hover)  .tagesleiste__band .tl:nth-child(7),
.tagesablauf:has(.tag__punkt:nth-child(8):hover)  .tagesleiste__band .tl:nth-child(8),
.tagesablauf:has(.tag__punkt:nth-child(9):hover)  .tagesleiste__band .tl:nth-child(9),
.tagesablauf:has(.tag__punkt:nth-child(10):hover) .tagesleiste__band .tl:nth-child(10),
.tagesablauf:has(.tag__punkt:nth-child(11):hover) .tagesleiste__band .tl:nth-child(11){
  opacity:1; transform:scaleY(1.5);
}

/* ---- Zeitachse ---- */
.tag{ display:flex; flex-direction:column; }
.tag__punkt{
  display:grid;
  grid-template-columns:6.5rem 28px minmax(0,1fr);
  column-gap:var(--takt-2);
  --ton:var(--text-sekundaer);
}
.tag__punkt--wir{      --ton:var(--strang-wir); }
.tag__punkt--workshop{ --ton:var(--strang-wachstum); --ton-text:var(--strang-wachstum-text); }

.tag__zeit{
  display:flex; flex-direction:column; align-items:flex-end;
  padding-top:1.05rem; text-align:right; line-height:1.2;
}
.tag__von{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:1.3rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tag__bis{
  margin-top:.2rem; white-space:nowrap;
  font-size:.85rem; color:var(--text-sekundaer); font-variant-numeric:tabular-nums;
}

.tag__achse{ position:relative; display:flex; justify-content:center; }
.tag__achse::before{
  content:''; position:absolute; left:50%; top:0; bottom:0;
  width:2px; margin-left:-1px; background:var(--linie);
}
.tag__punkt:first-child .tag__achse::before{ top:1.5rem; }
.tag__punkt:last-child  .tag__achse::before{ bottom:auto; height:1.1rem; }

/* Das Blatt auf der Achse — Form aus dem Logo */
.tag__blatt{
  position:relative; z-index:1; display:block;
  width:20px; height:20px; margin-top:1.3rem;
  background:var(--ton);
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
  box-shadow:0 0 0 5px var(--grund-papier);
  transition:transform var(--tempo-basis) var(--kurve);
}
/* Programmpunkt ohne Strang: nur Umriss */
.tag__punkt:not([class*="--"]) .tag__blatt{
  background:var(--grund); border:2px solid var(--linie-stark);
}
/* Workshops: alle drei Themen in einem Blatt */
.tag__punkt--workshop .tag__blatt{
  width:24px; height:24px; margin-top:1.15rem;
  background:conic-gradient(from 200deg,
    var(--strang-wurzeln) 0 120deg,
    var(--strang-wachstum) 120deg 240deg,
    var(--strang-wir) 240deg 360deg);
}
.tag__punkt--pause .tag__blatt,
.tag__punkt--ende  .tag__blatt{
  width:10px; height:10px; margin-top:.95rem;
  border-radius:50%; transform:none;
  background:var(--grund); border:2px solid var(--linie-stark);
}
.tag__punkt--ende .tag__blatt{ background:var(--text-sekundaer); border-color:var(--text-sekundaer); }

.tag__karte{
  position:relative; overflow:hidden;
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:1rem var(--takt-3) 1.15rem;
  margin-bottom:var(--takt-2);
  transition:transform var(--tempo-basis) var(--kurve),
             border-color var(--tempo-basis) var(--kurve),
             box-shadow var(--tempo-basis) var(--kurve);
}
/* Wasserzeichen-Blatt, dreht sich beim Hover ein Stück */
.tag__karte::after{
  content:''; position:absolute;
  right:-34px; bottom:-48px;
  width:120px; height:120px;
  background:var(--ton); opacity:.08;
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
  transition:transform 600ms var(--kurve);
  pointer-events:none;
}
.tag__punkt--workshop .tag__karte::after{
  background:conic-gradient(from 200deg,
    var(--strang-wurzeln) 0 120deg,
    var(--strang-wachstum) 120deg 240deg,
    var(--strang-wir) 240deg 360deg);
  opacity:.12;
}
.tag__karte > *{ position:relative; }

.tag__strang{
  display:flex; align-items:center; gap:.4rem;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ton-text, var(--text-sekundaer));
  margin-bottom:.3rem;
}
.tag__strang .blatt{ width:.8em; }
.tag__titel{
  font-size:1.2rem; font-weight:800; line-height:1.3; letter-spacing:-.01em;
}
.tag__text{ color:var(--text-sekundaer); font-size:1rem; margin-top:.35rem; max-width:62ch; }
.tag__text a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

/* Leitfragen als Sprechblasen */
.tag__impulse{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.tag__impulse li{
  background:color-mix(in srgb, var(--ton) 11%, transparent);
  border-radius:14px 14px 14px 4px;
  padding:.35rem .85rem;
  font-size:.95rem;
}
.tag__impulse li::before{ content:'„'; }
.tag__impulse li::after{ content:'“'; }

/* Die drei Workshop-Themen als Marken */
.tag__themen{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.tag__thema{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--grund);
  border:1px solid var(--linie-stark); border-radius:999px;
  padding:.25rem .85rem .25rem .65rem;
  font-size:.92rem; font-weight:600;
}
.tag__thema--wurzeln .blatt{  color:var(--strang-wurzeln); }
.tag__thema--wachstum .blatt{ color:var(--strang-wachstum); }
.tag__thema--wir .blatt{      color:var(--strang-wir); }

/* Pausen treten zurück: keine Karte, nur eine Zeile */
.tag__punkt--pause .tag__zeit,
.tag__punkt--ende  .tag__zeit{ padding-top:.55rem; }
.tag__punkt--pause .tag__von,
.tag__punkt--ende  .tag__von{ font-size:1rem; font-weight:600; color:var(--text-sekundaer); }
.tag__pause{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;
  padding:.45rem 0 var(--takt-3);
  color:var(--text-sekundaer); font-size:1rem;
}
.tag__pause svg{ flex:none; width:22px; height:22px; overflow:visible; }
.tag__dauer{
  font-size:.8rem; font-weight:600;
  border:1px dashed var(--linie-stark); border-radius:999px;
  padding:.05rem .6rem;
}
.tag__punkt--ende .tag__pause{ padding-bottom:0; font-weight:600; color:var(--text); }

@media (hover: hover){
  .tag__punkt:hover .tag__karte{
    transform:translateX(6px);
    border-color:color-mix(in srgb, var(--ton) 55%, var(--linie));
    box-shadow:0 12px 28px -20px color-mix(in srgb, var(--ton) 80%, transparent);
  }
  .tag__punkt:hover .tag__karte::after{ transform:rotate(4deg) scale(1.18); }
  .tag__punkt:has(.tag__karte):hover .tag__blatt{ animation:wiegen 900ms var(--kurve) both; }
  .tag__punkt--pause:hover .dampf{ animation:dampf 1.1s ease-in-out 2; }
}
@keyframes wiegen{
  0%  { transform:rotate(-20deg) scale(1); }
  35% { transform:rotate(14deg)  scale(1.35); }
  65% { transform:rotate(-32deg) scale(1.2); }
  100%{ transform:rotate(-20deg) scale(1.25); }
}
.dampf{ transform-box:fill-box; }
@keyframes dampf{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%    { transform:translateY(-3px); opacity:.2; }
}

@media (max-width: 620px){
  .tag__punkt{ grid-template-columns:4.1rem 20px minmax(0,1fr); column-gap:.55rem; }
  .tag__von{ font-size:1.05rem; }
  .tag__bis{ font-size:.75rem; }
  .tag__karte{ padding:.9rem 1rem 1rem; }
  .tag__blatt{ width:16px; height:16px; margin-top:1.2rem; }
  .tag__punkt--workshop .tag__blatt{ width:19px; height:19px; margin-top:1.1rem; }
  .tagesleiste__skala{ font-size:.72rem; }
  .tagesleiste__uhr{ display:none; }
}

/* ============================================================
   WORKSHOPS
   ============================================================ */
/* Die zwei Runden — das Wichtigste an dieser Sektion */
.runden{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--takt-2);
  margin-bottom:var(--takt-3);
  max-width:660px;
}
@media (max-width: 560px){ .runden{ grid-template-columns:1fr; } }

.runde{
  position:relative; overflow:hidden;
  --ton:var(--strang-wachstum);
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:var(--takt-2) var(--takt-3);
  display:flex; flex-direction:column; gap:.15rem;
}
.runde::after{
  content:''; position:absolute;
  right:-34px; bottom:-46px;
  width:130px; height:130px;
  background:var(--ton); opacity:.10;
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
  pointer-events:none;
}
.runde > *{ position:relative; }
.runde__marke{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-sekundaer);
}
.runde__zeit{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:1.45rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.runde__tag{ font-size:.95rem; color:var(--text-sekundaer); }

.runden__hinweis{
  display:flex; align-items:flex-start; gap:.7rem;
  max-width:660px; margin-bottom:var(--takt-4);
  font-size:1rem; color:var(--text-sekundaer);
}
.runden__hinweis strong{ color:var(--text); }

.workshops{ display:grid; gap:var(--takt-2); }
.workshop{
  position:relative; overflow:hidden;
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
}
/* Farbfläche von links, über die volle Kartenhöhe, rechts gerundet.
   Sie trägt die Nummer und ersetzt die frühere schmale Kante. */
.workshop::before{
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:var(--spur);
  background:color-mix(in srgb, var(--ton) 17%, transparent);
  border-radius:0 var(--spur) var(--spur) 0;
  pointer-events:none;
}
.workshop--wurzeln{  --ton:var(--strang-wurzeln); }
.workshop--wachstum{ --ton:var(--strang-wachstum); }
.workshop--wir{      --ton:var(--strang-wir); }

.workshop summary{
  position:relative;                 /* liegt über der Farbfläche */
  display:flex; align-items:flex-start; gap:var(--takt-2);
  padding:var(--takt-3) var(--takt-3) var(--takt-3) 0;
  cursor:pointer; list-style:none;
}
.workshop summary::-webkit-details-marker{ display:none; }
.workshop summary:hover{ background:var(--grund-papier); }

.workshop__nr{
  flex:none; width:var(--spur);
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(var(--titel-groesse) * var(--titel-zeile));
  font-family:'Archivo', system-ui, sans-serif;
  font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums;
  /* Textfarbe statt Strangfarbe: auf der gleichfarbigen Fläche wäre
     die Strangfarbe nicht kontrastreich genug. */
  color:var(--text);
}
.workshop__haupt{ flex:1; display:block; }
.workshop{
  /* Zeilenmaß des Titels — Nummer und Pfeil richten sich danach aus */
  --titel-groesse:1.15rem;
  --titel-zeile:1.25;
  --spur:66px;
}
.workshop__titel{
  display:block;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:var(--titel-groesse); font-weight:600; letter-spacing:-.01em;
  line-height:var(--titel-zeile);
  margin-bottom:.45rem;
}
.workshop__frage{
  display:block;
  font-size:1rem; line-height:1.5;
  color:var(--text-sekundaer);
  max-width:62ch;
}
.workshop__pfeil{
  flex:none; width:22px; height:22px;
  color:var(--text-sekundaer);
  transition:transform var(--tempo-basis) var(--kurve);
}
.workshop__pfeilfach{
  flex:none; display:inline-flex; align-items:center;
  height:calc(var(--titel-groesse) * var(--titel-zeile));
}
.workshop[open] .workshop__pfeil{ transform:rotate(180deg); }
.workshop__inhalt{
  position:relative;
  padding:0 var(--takt-3) var(--takt-3) calc(var(--spur) + var(--takt-2));
}
@media (max-width: 620px){
  .workshop{ --spur:52px; }
  .workshop__inhalt{ padding-left:var(--takt-3); }
}
.workshop__inhalt ul{ display:flex; flex-direction:column; gap:.5rem; margin-top:var(--takt-2); }
.workshop__inhalt li{
  display:flex; gap:.6rem; align-items:flex-start;
  color:var(--text-sekundaer); font-size:1rem;
}
.workshop__inhalt li .blatt{ color:var(--ton); width:.6em; }
.workshop__inhalt li .blatt::before{ width:.55em; height:.55em; }

/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */
.zugang{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width: 860px){ .zugang{ grid-template-columns:1fr; } }

.zugang__gruppe{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--strang-wachstum);
  margin-bottom:var(--takt-2);
}
/* Zweite Gruppenüberschrift im selben Block: braucht Abstand nach oben,
   damit sie sich von der vorangehenden Liste löst. */
.zugang__gruppe--abgesetzt{ margin-top:var(--takt-4); }
.zugang__liste{ display:grid; gap:.9rem; }
.zugang__liste li{ display:flex; gap:.8rem; align-items:flex-start; }
.zugang__haken{
  flex:none; width:22px;
  height:1.6em; height:1lh;
  display:inline-flex; align-items:center;
  color:var(--strang-wachstum);
}
.zugang__haken svg{ display:block; width:22px; height:22px; }
.zugang__kasten{
  background:color-mix(in srgb, var(--text-auf-tief) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--text-auf-tief) 22%, transparent);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
}
.zugang__kasten h3{ margin-bottom:.7rem; }
.zugang__kasten p{ color:var(--text-auf-tief-sek); margin-bottom:var(--takt-3); }

/* ============================================================
   PLATZHALTER — sichtbar markiert, was noch fehlt
   ============================================================ */
.platzhalter{
  display:inline-flex; align-items:center; gap:.4rem;
  background:color-mix(in srgb, var(--strang-wir) 12%, transparent);
  border:1px dashed var(--strang-wir);
  color:var(--strang-wir-text);
  border-radius:var(--radius);
  padding:.1rem .5rem;
  font-size:.85em; font-weight:600; font-family:'Atkinson Hyperlegible Next', sans-serif;
  letter-spacing:0; text-transform:none;
}

/* ============================================================
   ORT & ANREISE
   ============================================================ */
.ort__kopf{
  display:flex; flex-wrap:wrap; gap:var(--takt-3);
  justify-content:space-between; align-items:flex-end;
  padding-bottom:var(--takt-3);
  border-bottom:1px solid var(--linie);
  margin-bottom:var(--takt-4);
}
.ort__name{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800;
  letter-spacing:-.02em; margin-bottom:.3rem;
}
.ort__adresse{
  font-size:1.15rem; line-height:1.5; color:var(--text-sekundaer);
}
.ort__karten{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.ort__karten__marke{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-sekundaer);
}
.ort__karten__reihe{ display:flex; flex-wrap:wrap; gap:.5rem; }
.kartenlink{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--linie-stark); border-radius:999px;
  padding:.5rem 1rem;
  font-size:.95rem; font-weight:600; text-decoration:none;
  transition:border-color var(--tempo-schnell) var(--kurve),
             background var(--tempo-schnell) var(--kurve);
}
.kartenlink::before{
  content:''; width:15px; height:15px; flex:none;
  background:currentColor;
  -webkit-mask:var(--pin) center/contain no-repeat;
          mask:var(--pin) center/contain no-repeat;
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.kartenlink:hover{ border-color:var(--text); background:var(--grund-papier); }

.ort__gitter{
  display:grid; gap:var(--takt-3);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.ort__karte{
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
}
.ort__karte--oepnv{ --ton:var(--strang-wurzeln); }
.ort__karte--auto{  --ton:var(--strang-wachstum); }
.ort__karte--hilfe{ --ton:var(--strang-wir); }

.ort__karte h3{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:var(--takt-2);
}
.ort__karte h3 .blattfach{ color:var(--ton); font-size:.85rem; }
.ort__karte h3 svg{ width:21px; height:21px; }

.ort__liste{ display:flex; flex-direction:column; gap:.65rem; }
.ort__liste li{ color:var(--text-sekundaer); font-size:1rem; }
.ort__liste strong{ color:var(--text); }
.ort__liste .blatt{ color:var(--ton); }


/* ============================================================
   VERANSTALTER
   ============================================================ */
/* Kacheln: getönte Flächen ohne Rahmen, wie bei den Normalos */
.traeger__haupt{
  display:grid; gap:var(--takt-4);
  grid-template-columns:auto 1fr; align-items:center;
  background:color-mix(in srgb, var(--lagh-blau) 10%, var(--grund-papier));
  border-radius:calc(var(--radius-gross) * 1.6);
  padding:var(--takt-4);
  margin-bottom:var(--takt-2);
}
@media (max-width: 700px){
  .traeger__haupt{ grid-template-columns:1fr; gap:var(--takt-3); }
}
.traeger__logo{
  width:clamp(150px, 20vw, 210px);
  color:var(--lagh-blau);
}
.traeger__logo svg{ width:100%; height:auto; display:block; fill:var(--text); }
.traeger__rolle{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--strang-wurzeln-text);
  margin-bottom:.4rem;
}
.traeger__name{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:clamp(1.2rem,2vw,1.5rem); font-weight:800;
  letter-spacing:-.02em; margin-bottom:.6rem;
}
.traeger__text{ color:var(--text-sekundaer); max-width:56ch; }

.traeger{
  display:grid; gap:var(--takt-2);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.traeger__kachel{
  border-radius:calc(var(--radius-gross) * 1.6);
  padding:var(--takt-4);
}
.traeger__kachel--lebenshilfe{ background:color-mix(in srgb, var(--lebenshilfe-blau) 10%, var(--grund-papier)); }
.traeger__kachel--foerderung{  background:color-mix(in srgb, var(--strang-wachstum) 9%, var(--grund-papier)); }
/* gleiche Spaltenbreite wie das LAG-Logo, damit die Texte fluchten */
.traeger__logo--lebenshilfe{ width:clamp(170px, 22vw, 220px); margin-bottom:var(--takt-3); }
.traeger__link{ margin-top:var(--takt-3); }

/* Förderhinweis. Das Logo ist eine Vorgabe des Ministeriums und darf weder
   eingefärbt noch verändert werden. Es steht deshalb immer auf weißem Grund —
   auch im Dunkelmodus, wo HESSEN BLAU auf dunklem Untergrund nicht mehr lesbar
   wäre. Die Polsterung hält zugleich die vorgeschriebene Schutzzone frei. */
.foerderhinweis__vorspann{ font-weight:600; }
.foerderhinweis{
  margin-top:var(--takt-2);
  width:clamp(220px, 34vw, 330px);
  background:#FFFFFF;
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:var(--takt-2);
}
.foerderhinweis img{ width:100%; height:auto; display:block; }
@media (max-width: 700px){
  .traeger__haupt, .traeger__kachel{ padding:var(--takt-3); }
}

/* ============================================================
   ABSCHLUSS
   ============================================================ */
.abschluss__gitter{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1.2fr .8fr; align-items:center; }
@media (max-width: 800px){ .abschluss__gitter{ grid-template-columns:1fr; } }
.abschluss h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:var(--takt-2); }
.abschluss p{ color:var(--text-auf-tief-sek); max-width:44ch; margin-bottom:var(--takt-4); }

.kontakt{
  background:color-mix(in srgb, var(--text-auf-tief) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--text-auf-tief) 18%, transparent);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
}
.kontakt__rolle{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--strang-wurzeln);
  margin-bottom:.35rem;
}
.abschluss .kontakt__rolle{ margin-bottom:.35rem; max-width:none; }
.abschluss .kontakt__name{ color:var(--text-auf-tief); margin-bottom:var(--takt-3); max-width:none; }
.kontakt__name{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:800; font-size:1.15rem; letter-spacing:-.01em;
  line-height:1.3; margin-bottom:var(--takt-3);
}
.kontakt__daten{ display:grid; gap:var(--takt-2); grid-template-columns:1fr 1fr; }
@media (max-width: 560px){ .kontakt__daten{ grid-template-columns:1fr; } }
.kontakt__daten dt{
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-auf-tief-sek);
  margin-bottom:.2rem;
}
.kontakt__daten dd{ font-size:1rem; line-height:1.5; overflow-wrap:anywhere; }
.kontakt__daten .kontakt__breit{ grid-column:1 / -1; }
.kontakt__daten a{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter{
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.5rem, 4vw, var(--takt-4));
}
.newsletter__gitter{
  display:grid; gap:clamp(1.5rem,3vw,var(--takt-4));
  grid-template-columns:1fr 1fr; align-items:start;
}
@media (max-width: 820px){ .newsletter__gitter{ grid-template-columns:1fr; } }

.newsletter h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.6rem; }
.newsletter__text{ color:var(--text-sekundaer); max-width:44ch; }

.newsletter__form{ display:flex; flex-direction:column; gap:var(--takt-2); }
.feld{ display:flex; flex-direction:column; gap:.4rem; }
.feld label{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.9rem; font-weight:600;
}
.feld input[type="email"]{
  font:inherit; font-size:1.0625rem;
  color:var(--text); background:var(--grund);
  border:2px solid var(--linie-stark);
  border-radius:var(--radius);
  padding:.8rem .9rem;
  min-height:48px;
  transition:border-color var(--tempo-schnell) var(--kurve);
}
.feld input[type="email"]:hover{ border-color:var(--text-sekundaer); }
.feld input[type="email"]:focus-visible{ border-color:var(--fokus); }
.feld__hinweis{ font-size:.9rem; color:var(--text-sekundaer); }

/* Einwilligung: große Klickflaeche ueber das ganze Label */
.zustimmung{
  display:flex; gap:.8rem; align-items:flex-start;
  cursor:pointer; padding:.35rem 0;
  font-size:.98rem; line-height:1.5; color:var(--text-sekundaer);
}
.zustimmung input[type="checkbox"]{
  flex:none; width:24px; height:24px; margin:0;
  accent-color:var(--strang-wurzeln);
  margin-top:calc((1.5em - 24px) / 2);
  cursor:pointer;
}
.zustimmung a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

.newsletter__fuss{
  font-size:.9rem; color:var(--text-sekundaer);
  border-top:1px solid var(--linie);
  padding-top:var(--takt-2);
}

/* ============================================================
   FÖRDERN
   ============================================================ */
.foerdern__gitter{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr 1fr; align-items:start;
}
@media (max-width: 860px){ .foerdern__gitter{ grid-template-columns:1fr; } }
.foerdern h2{ margin-bottom:var(--takt-2); }
.foerdern .fliess{ margin-bottom:var(--takt-3); }

.foerdern__wege{ display:grid; gap:var(--takt-2); }
.foerdern__weg{
  position:relative; overflow:hidden;
  --ton:var(--strang-wir);
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
}
.foerdern__weg::after{
  content:''; position:absolute;
  right:-40px; bottom:-52px;
  width:150px; height:150px;
  background:var(--ton); opacity:.10;
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
  pointer-events:none;
}
.foerdern__weg > *{ position:relative; }
.foerdern__weg h3{ font-size:1.1rem; margin-bottom:.4rem; }
.foerdern__weg p{ color:var(--text-sekundaer); font-size:1rem; }

.bankdaten{
  margin-top:var(--takt-2); padding-top:var(--takt-2);
  border-top:1px solid var(--linie);
  display:grid; gap:.4rem;
}
.bankdaten > div{ display:flex; gap:.7rem; align-items:baseline; }
.bankdaten dt{
  font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-sekundaer);
  min-width:3.2em; flex:none;
}
.bankdaten dd{ font-variant-numeric:tabular-nums; font-size:.98rem; }

/* ============================================================
   FUSS
   ============================================================ */
.fuss{
  background:var(--grund-papier);
  border-top:1px solid var(--linie);
  padding-block:var(--takt-4);
  font-size:.95rem;
}
.fuss__innen{
  display:grid; gap:var(--takt-3);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  align-items:start;
}
.fuss__traeger{ margin-bottom:var(--takt-2); line-height:1.5; }
.fuss__traeger a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.sozial{ display:flex; gap:.6rem; }
.sozial a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1px solid var(--linie-stark); border-radius:50%;
  color:var(--text);
  transition:background var(--tempo-schnell) var(--kurve),
             border-color var(--tempo-schnell) var(--kurve);
}
.sozial a:hover{ background:var(--grund); border-color:var(--text); }
.sozial svg{ width:20px; height:20px; }

.fuss__links{ display:flex; flex-direction:column; gap:.5rem; }
.fuss__links a{ color:var(--text-sekundaer); text-decoration:underline; text-underline-offset:3px; }
.fuss__links a:hover{ color:var(--text); }
.fuss__notiz{ color:var(--text-sekundaer); line-height:1.5; }

/* ============================================================
   RECHTSSEITEN — im Entwurf über Anker; in der echten Website
   werden daraus eigene Seiten mit eigener URL.
   ============================================================ */
.rechtsseite{ display:none; }
.rechtsseite:target{ display:block; }
body:has(.rechtsseite:target) > main,
body:has(.rechtsseite:target) > .fakten{ display:none; }

.rechtsseite .bahn{ max-width:820px; }
.rechtsseite h1{
  font-size:clamp(2rem,4vw,2.8rem);
  margin-bottom:var(--takt-3);
}
.rechtsseite h2{
  font-size:clamp(1.25rem,2vw,1.5rem);
  margin-top:var(--takt-4); margin-bottom:var(--takt-2);
}
.rechtsseite h3{ font-size:1.05rem; margin-top:var(--takt-3); margin-bottom:.4rem; }
.rechtsseite p, .rechtsseite li{ max-width:70ch; }
.rechtsseite p + p{ margin-top:var(--takt-2); }
.rechtsseite ul{ display:flex; flex-direction:column; gap:.5rem; margin-top:var(--takt-2); }
.rechtsseite ul li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--text-sekundaer); }
.rechtsseite dl{ display:grid; gap:.5rem; margin-top:var(--takt-2); }
.rechtsseite dl > div{ display:flex; gap:.8rem; flex-wrap:wrap; }
.rechtsseite dt{ font-weight:600; min-width:11em; flex:none; }
.rechtsseite dd{ color:var(--text-sekundaer); }
.rechtsseite a{ text-decoration:underline; text-underline-offset:3px; }

.zurueck{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:var(--takt-4);
  font-weight:600; text-decoration:none;
  border-bottom:2px solid var(--strang-wurzeln);
  padding-bottom:.15rem;
}
.hinweiskasten{
  background:var(--grund-papier);
  border:1px solid var(--linie);
  border-left:4px solid var(--strang-wir);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
  margin-top:var(--takt-3);
}
.hinweiskasten p{ color:var(--text-sekundaer); font-size:1rem; }

/* ============================================================
   MEDIALE BEGLEITUNG — keine Karten: Sucher, offene Spalten
   ============================================================ */
.medien__kopf{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1.1fr .9fr; align-items:center;
  margin-bottom:clamp(2.5rem, 6vw, var(--takt-5));
}
@media (max-width: 860px){ .medien__kopf{ grid-template-columns:1fr; } }
.medien__kopf .kopfzeile-abschnitt{ margin-bottom:var(--takt-3); }
.medien__vorspann{ font-size:clamp(1.15rem, 1.7vw, 1.3rem); max-width:46ch; }
.medien__vorspann.leicht p + p{ margin-top:var(--takt-2); }
.medien__links{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--takt-3); }

/* Link-Symbole: dieselbe Maske wie beim Kartenlink, nur ein anderes Bild */
.kartenlink--pfeil::before{
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}
.kartenlink--insta::before{
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}

/* Sucher: nur die vier Ecken, kein Kasten */
.sucher{
  --abstand:0px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4 / 3; width:100%; max-width:440px; justify-self:center;
}
.sucher img{ width:52%; height:auto; filter:none; transition:transform 600ms var(--kurve); }
.sucher__ecke{
  position:absolute; width:34px; height:34px;
  border:3px solid var(--text);
  transition:top var(--tempo-basis) var(--kurve), left var(--tempo-basis) var(--kurve),
             right var(--tempo-basis) var(--kurve), bottom var(--tempo-basis) var(--kurve);
}
.sucher__ecke--ol{ top:var(--abstand);    left:var(--abstand);  border-right:0; border-bottom:0; border-top-left-radius:8px; }
.sucher__ecke--or{ top:var(--abstand);    right:var(--abstand); border-left:0;  border-bottom:0; border-top-right-radius:8px; }
.sucher__ecke--ul{ bottom:var(--abstand); left:var(--abstand);  border-right:0; border-top:0;    border-bottom-left-radius:8px; }
.sucher__ecke--ur{ bottom:var(--abstand); right:var(--abstand); border-left:0;  border-top:0;    border-bottom-right-radius:8px; }
.sucher__rec, .sucher__zeit{
  position:absolute;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--text-sekundaer);
  transition:top var(--tempo-basis) var(--kurve), left var(--tempo-basis) var(--kurve),
             right var(--tempo-basis) var(--kurve), bottom var(--tempo-basis) var(--kurve);
}
.sucher__rec{
  top:calc(var(--abstand) + 8px); left:calc(var(--abstand) + 46px);
  display:flex; align-items:center; gap:.4rem;
}
.sucher__rec::before{
  content:''; width:10px; height:10px; border-radius:50%;
  background:var(--strang-wir);
}
.sucher__zeit{ bottom:calc(var(--abstand) + 8px); right:calc(var(--abstand) + 46px); }
@media (hover: hover){
  .sucher:hover{ --abstand:22px; }
  .sucher:hover img{ transform:scale(1.06); }
  .sucher:hover .sucher__rec::before{ animation:aufnahme 1.2s steps(2, jump-none) infinite; }
}
@keyframes aufnahme{ 50%{ opacity:.15; } }

/* Aufnahme-Leiste: drei offene Spalten mit Haarlinien */
/* Aufnahme-Kacheln: getönte Flächen, keine Rahmen, keine Linien */
.aufnahme{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--takt-2);
}
.aufnahme__punkt{
  --ton:var(--strang-wurzeln);
  background:color-mix(in srgb, var(--ton) 9%, var(--grund-papier));
  border-radius:calc(var(--radius-gross) * 1.6);
  padding:var(--takt-4) var(--takt-3) var(--takt-3);
  transition:background var(--tempo-basis) var(--kurve);
}
.aufnahme__punkt--mikro{ --ton:var(--strang-wachstum); }
.aufnahme__punkt--hand{  --ton:var(--strang-wir); }
@media (hover: hover){
  .aufnahme__punkt:hover{ background:color-mix(in srgb, var(--ton) 15%, var(--grund-papier)); }
}
@media (max-width: 800px){
  .aufnahme{ grid-template-columns:1fr; }
}

.aufnahme__symbol{
  position:relative; display:inline-flex;
  width:48px; height:48px;
  color:var(--ton);
  margin-bottom:var(--takt-2);
}
.aufnahme__symbol svg{ width:100%; height:100%; overflow:visible; }
.aufnahme__code{
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--text-sekundaer);
  margin-bottom:.35rem;
}
.aufnahme__punkt h3{
  font-size:clamp(1.25rem, 2vw, 1.45rem); font-weight:800;
  margin-bottom:.5rem;
}
.aufnahme__punkt p:not(.aufnahme__code){ color:var(--text-sekundaer); font-size:1rem; max-width:34ch; }
.aufnahme__punkt--hand h3{ color:var(--strang-wir-text); }

.blitz{
  position:absolute; inset:-20%;
  border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--strang-wurzeln) 55%, #FFFFFF), transparent);
  opacity:0; pointer-events:none;
}
.linse{ transform-box:fill-box; transform-origin:50% 50%; }
.hand{  transform-box:fill-box; transform-origin:50% 100%; }

@media (hover: hover){
  .aufnahme__punkt--kamera:hover .blitz{ animation:blitz 650ms ease-out; }
  .aufnahme__punkt--kamera:hover .linse{ animation:linse 650ms var(--kurve); }
  .aufnahme__punkt--mikro:hover .welle--1{ animation:welle 900ms ease-out 2; }
  .aufnahme__punkt--mikro:hover .welle--2{ animation:welle 900ms ease-out 150ms 2 both; }
  .aufnahme__punkt--hand:hover .hand{ animation:winken 1s ease-in-out; }
}
@keyframes blitz{
  0%  { opacity:0;  transform:scale(.4); }
  15% { opacity:.9; }
  100%{ opacity:0;  transform:scale(1.6); }
}
@keyframes linse{ 45%{ transform:scale(.55); } }
@keyframes welle{ 0%{ opacity:0; } 60%{ opacity:1; } }
@keyframes winken{
  0%,100%{ transform:rotate(0); }
  20%{ transform:rotate(-14deg); }
  40%{ transform:rotate(10deg); }
  60%{ transform:rotate(-8deg); }
  80%{ transform:rotate(4deg); }
}

/* ============================================================
   ANMELDUNG — Schritte auf dunklem Grund
   ============================================================ */
.abschluss .augenbraue{ margin-bottom:var(--takt-2); }
.schritte{ display:grid; gap:1rem; margin-bottom:var(--takt-4); max-width:54ch; }
.schritte li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--text-auf-tief-sek); }
.schritte.leicht li + li{ margin-top:1rem; }
.schritte strong{ color:var(--text-auf-tief); }
.schritte a{
  color:var(--text-auf-tief); font-weight:600;
  text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere;
}
/* Nummer im Blatt */
.schritte__nr{
  position:relative; isolation:isolate; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem;
  font-family:'Archivo', system-ui, sans-serif;
  font-size:.95rem; font-weight:800;
  color:var(--grund-tief);
}
.schritte__nr::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--strang-wurzeln);
  border-radius:0 100% 0 100%;
  transform:rotate(-20deg);
}
.schritte li:nth-child(2) .schritte__nr::before{ background:var(--strang-wachstum); }
.schritte li:nth-child(3) .schritte__nr::before{ background:var(--strang-wir); }

.abschluss__aktion{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--takt-2) var(--takt-3); }
.abschluss__frist{ font-size:.95rem; color:var(--text-auf-tief-sek); }
.abschluss__frist strong{ color:var(--text-auf-tief); }
/* Vorlage zum Kopieren — Rückfall, wenn mailto ins Leere läuft */
.vorlage{ margin-top:var(--takt-3); max-width:60ch; }
.vorlage summary{
  cursor:pointer; color:var(--text-auf-tief-sek); font-size:.98rem;
  text-decoration:underline; text-underline-offset:3px;
}
.vorlage summary:hover{ color:var(--text-auf-tief); }
.vorlage__inhalt{ margin-top:var(--takt-2); display:flex; flex-direction:column; gap:var(--takt-2); }
.abschluss .vorlage__inhalt p{ margin:0; max-width:none; font-size:.98rem; }
.abschluss .vorlage__inhalt strong{ color:var(--text-auf-tief); overflow-wrap:anywhere; }
.vorlage__text{
  margin:0; white-space:pre-wrap;
  font-family:'Atkinson Hyperlegible Next', system-ui, sans-serif;
  font-size:.95rem; line-height:1.55;
  color:var(--text-auf-tief);
  background:color-mix(in srgb, var(--text-auf-tief) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--text-auf-tief) 18%, transparent);
  border-radius:var(--radius-gross);
  padding:var(--takt-2) var(--takt-3);
}
.vorlage__knoepfe{ display:flex; flex-wrap:wrap; gap:.6rem; }
.abschluss .vorlage__knoepfe .knopf{
  background:transparent; color:var(--text-auf-tief);
  border-color:var(--text-auf-tief-sek);
}
.abschluss .vorlage__knoepfe .knopf:hover{ border-color:var(--text-auf-tief); background:transparent; }
.abschluss .vorlage__status{ color:var(--strang-wachstum); font-weight:600; }

/* hell auf dunkel, damit er die Signalstelle bleibt */
.abschluss .knopf{
  background:var(--text-auf-tief); color:var(--grund-tief);
  border-color:var(--text-auf-tief);
  white-space:normal; text-align:center;
}
.abschluss .knopf:hover{ background:#FFFFFF; border-color:#FFFFFF; }

/* ============================================================
   LEICHTE SPRACHE
   ============================================================ */
/* Standardsprache gilt, solange nichts gesetzt ist — verhindert Aufblitzen */
.nur-leicht{ display:none; }
[data-sprache="leicht"] .nur-leicht{ display:block; }
[data-sprache="leicht"] .nur-standard{ display:none; }

.leicht{ font-size:1.375rem; line-height:1.75; }
.leicht h1{ font-size:clamp(2rem,5vw,3rem); }
.leicht h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
.leicht p{ max-width:40ch; }
.leicht .fliess p + p{ margin-top:var(--takt-3); }
.leicht__block{ display:flex; flex-direction:column; gap:var(--takt-3); max-width:44ch; align-items:flex-start; }
.leicht__karte{
  background:var(--flaeche-karte);
  border:1px solid var(--linie);
  border-left:5px solid var(--strang-wurzeln);
  border-radius:var(--radius-gross);
  padding:var(--takt-3);
}
.leicht__karte h3{ font-size:1.5rem; margin-bottom:.6rem; }

/* Einblenden beim Laden — dezent, respektiert Systemeinstellung */
.tritt-ein{ animation:tritt-ein var(--tempo-basis) var(--kurve) both; }
@keyframes tritt-ein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }