/* Cookie-Hinweis gleich beim ersten Zeichnen zeigen, wenn noch keine Entscheidung gespeichert ist (Klasse aus head.php), statt erst nach main.js: kein später LCP. Gilt auf allen Seiten. */
.consent-offen .consent-banner[hidden]{display:flex}

/* Startseite einfach (Adrian 2026-10-19): Hero mit zwei Einstiegen, Icon-Kacheln, Schritte, Förder-Band. Nur auf der Startseite geladen. */
.st-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:16px 16px 16px 5px;
  background:color-mix(in srgb,var(--neon,var(--cyan)) 18%,transparent);color:var(--neon-text,var(--cyan-text))}
.st-icon .icon{width:24px;height:24px}
.icon{flex:none}

/* Hero */
.st-hero{padding:clamp(28px,5vw,72px) 0 clamp(40px,6vw,88px);border-top:0}
.st-kopf{container-type:inline-size;max-width:980px}
.st-gruss{display:flex;align-items:center;gap:8px;height:34px;margin:0;overflow:hidden;white-space:nowrap;font-size:15px;font-weight:600;color:var(--magenta-text)}
.st-gruss-text{flex:none}
.st-wieder{flex:none;font-weight:500;color:var(--soft)}
.st-weiter-label{flex:none;font-weight:500;color:var(--soft)}
.st-weiter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.st-weiter::-webkit-scrollbar{display:none}
.st-weiter a{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--ink);color:var(--white);font-size:13.5px;font-weight:500;text-decoration:none;box-shadow:var(--schatten-1)}
.st-weiter a:hover{border-color:var(--magenta)}
.st-gruss.neu .st-wieder,.st-gruss.neu .st-weiter-label,.st-gruss.neu .st-weiter{animation:st-ein .5s ease both}
@keyframes st-ein{from{opacity:0}to{opacity:1}}
.st-hero h1{font-size:min(8cqi,68px);line-height:1.06;letter-spacing:-.03em;margin:10px 0 14px;text-wrap:nowrap}
.st-hero h1 .zeile{display:block;white-space:nowrap}
.st-satz{font-size:clamp(17px,1.7vw,21px);color:var(--soft);margin:0;max-width:36em}

/* Zwei Einstiege */
.st-einstiege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(24px,4vw,44px)}
.st-box{display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.6vw,32px);background:var(--ink);border:1px solid var(--line);border-radius:var(--bubble);
  box-shadow:var(--schatten-2),-5px -4px 0 var(--neon)}
.st-box-kopf{display:flex;align-items:center;gap:14px}
.st-box-kopf .label{color:var(--neon-text);font-size:11.5px}
.st-box h2{font-size:clamp(21px,2vw,27px);margin:2px 0 0;letter-spacing:-.02em}
.st-box .suchbox{max-width:none}
.st-feld{display:flex;align-items:center;gap:6px;padding:4px;background:var(--form-karte,#fff);border:1.5px solid var(--feld-rand,#C9C9C2);border-radius:22px 22px 22px 6px;box-shadow:var(--schatten-2),-5px -4px 0 var(--magenta),5px 4px 0 var(--cyan);transition:border-color .2s}
.st-feld:focus-within{border-color:var(--magenta)}
.st-feld input{flex:1;min-width:0;min-height:52px;padding:10px 14px;border:0;background:none;color:var(--feld-text,#0E0E10);font:500 18px/1.3 var(--sans);outline:none;-webkit-appearance:none;appearance:none}
.st-feld input::placeholder{color:var(--feld-hint,#6B6B72);opacity:1}
.st-los{flex:none;min-height:52px;padding:0 22px;border:0;border-radius:18px 18px 18px 5px;background:#0E0E10;color:#fff;font:600 16px/1.2 var(--sans);cursor:pointer;transition:transform .15s}
:root[data-theme="dark"] .st-los{background:var(--magenta);color:#0E0E10}
.st-los:hover{transform:translate(1px,1px)}
.st-hinweis{margin:14px 0 0;min-height:3em;font-size:14px;line-height:1.5;color:var(--muted)}
.st-hinweis a{color:var(--cyan-text)}

/* Abschnitte */
section.st{padding:clamp(44px,6vw,88px) 0}
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.st-head h2{margin:0}
.st-mehr{display:inline-flex;align-items:center;gap:6px;font-size:15.5px;font-weight:600;color:var(--cyan-text);text-decoration:none}
.st-mehr .icon{width:18px;height:18px;transition:transform .2s}
.st-mehr:hover .icon{transform:translateX(3px)}

/* Icon-Kacheln „Was wir machen" */
.st-kacheln{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st-kachel a{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px;background:var(--ink);border:1px solid var(--line);border-radius:var(--bubble);text-decoration:none;color:var(--white);
  box-shadow:var(--schatten-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.st-kachel a:hover{transform:translateY(-3px);box-shadow:var(--schatten-3),-5px -4px 0 var(--neon);border-color:var(--hover-line)}
.st-kachel h3{font-size:18px;margin:4px 0 0}
.st-kachel p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}

/* Kurse */
.st-chip-hinweis{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid var(--line);background:var(--ink);font-size:14.5px;color:var(--soft);text-decoration:none;box-shadow:var(--schatten-1)}
.st-chip-hinweis .icon{width:18px;height:18px;color:var(--yellow-text)}
.st-chip-hinweis b{color:var(--white)}
.st-chip-hinweis:hover{border-color:var(--yellow)}
.kurse-start .kurs-grid{margin:24px 0 0}

/* Projekte kompakt */
#projekte .proj{margin-top:28px}

/* Schritte */
.st-schritte{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st-schritt{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--bubble);background:var(--ink);border:1px solid var(--line);box-shadow:var(--schatten-1)}
.st-schritt h3{display:flex;align-items:center;gap:8px;font-size:18px;margin:4px 0 0}
.st-nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--white);color:var(--black);font-size:12px;font-weight:700}
.st-schritt p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}

/* Förder-Band */
section.st-band-wrap{padding-top:0;border-top:0}
.st-band{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--bubble);background:color-mix(in srgb,var(--green) 10%,var(--ink));border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));text-decoration:none;color:var(--white);transition:transform .25s,box-shadow .25s}
.st-band:hover{transform:translateY(-2px);box-shadow:var(--schatten-2)}
.st-band-text{flex:1;min-width:0}
.st-band h2{font-size:clamp(19px,1.8vw,24px);margin:0}
.st-band p{margin:2px 0 0;color:var(--soft);font-size:15.5px}
.st-band-los{display:inline-flex;align-items:center;gap:6px;flex:none;font-weight:600;color:var(--green-text)}
.st-band-los .icon{width:18px;height:18px}

/* Über uns */
.st-ueber{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.st-ueber-box{padding:clamp(20px,3vw,36px);background:var(--ink);border:1px solid var(--line);border-radius:var(--bubble);box-shadow:var(--schatten-1)}
.st-icon-gross{width:72px;height:72px;border-radius:24px 24px 24px 7px}
.st-icon-gross .icon{width:34px;height:34px}
.st-ueber p{margin:12px 0 0;color:var(--soft);max-width:44em}
.st-ueber .team{margin-top:16px}

/* FAQ */
#fragen .faq{margin-top:24px}

/* Tablet */
@media (max-width:1000px){
  .st-kacheln,.st-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .st-einstiege{grid-template-columns:minmax(0,1fr)}
}
/* Handy */
@media (max-width:640px){
  .st-hero{padding:14px 0 36px}
  .st-gruss{height:30px;font-size:13.5px}
  .st-wieder{display:none}
  .st-hero h1{font-size:min(8.6cqi,40px);margin:6px 0 10px}
  .st-satz{font-size:15.5px}
  .st-einstiege{gap:18px;margin-top:20px}
  .st-box{gap:14px;padding:18px}
  .st-icon{width:42px;height:42px;border-radius:14px 14px 14px 4px}
  .st-icon .icon{width:22px;height:22px}
  .st-box h2{font-size:20px}
  .st-feld input{min-height:48px;font-size:16px;padding:8px 10px}
  .st-los{min-height:48px;padding:0 16px;font-size:15px}
  .st-hinweis{font-size:13px;margin-top:12px}
  section.st{padding:40px 0}
  .st-head h2{font-size:clamp(23px,6.4vw,28px)}
  .st-mehr{font-size:14.5px}
  .st-kacheln{gap:10px;margin-top:18px}
  .st-kachel a{padding:14px;gap:8px}
  .st-kachel h3{font-size:15.5px;margin:2px 0 0}
  .st-kachel p{font-size:13.5px}
  .st-schritte{gap:10px;margin-top:18px}
  .st-schritt{padding:14px;gap:8px}
  .st-schritt h3{font-size:15.5px}
  .st-schritt p{font-size:13.5px}
  .st-chip-hinweis{font-size:13px;margin-top:12px}
  .st-band{flex-wrap:wrap;gap:12px;padding:16px}
  .st-band-text{flex-basis:calc(100% - 60px)}
  .st-band p{font-size:14px}
  .st-ueber{grid-template-columns:minmax(0,1fr);gap:12px}
  .st-icon-gross{display:none}
  .st-ueber-box{padding:18px}
  #projekte .proj{margin-top:18px}
}
@media (max-width:480px){.st-feld{flex-wrap:wrap}.st-feld input{flex-basis:100%}.st-los{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.st-kachel a,.st-band,.st-los,.st-mehr .icon{transition:none}.st-gruss.neu *{animation:none}}