/* ===== Kopernikus Lernapp · Website-Bausteine (20.10.2026, Zeitwert-Rechner neu 21.10.2026) =====
   Wiederverwendbare Abschnitte für Startseite, Preisseite und Ratgeber:
     .zsp-…   Zeitwert-Rechner        → zeitrechner.js füllt <div class="zsp-karte" data-zeitrechner>
     .nl-…    Newsletter-Block        → newsletter.js schickt <form data-newsletter> an die Edge Function
     .kz-…    Zahlenleiste            → kennzahlen.js füllt [data-kennzahlen] (bleibt sonst unsichtbar)
     .stimme… Stimmen von Lehrkräften → Skript auf der Startseite (erscheint erst mit echten Einträgen)
   Einbinden NACH seiten.css bzw. den Seiten-Styles; Farben mit Rückfallwert, damit der Baustein
   auch auf Seiten ohne eigene Variablen gleich aussieht. Alle Textfarben ≥ 4,5:1 (WCAG AA). */

/* ── Zeitwert-Rechner (Darstellung Endfassung 21.10.2026) ──
   zeitrechner.js teilt die Karte in Eingabe (1 Fach, 2 Klassen, Posten) und Auswertung (Ergebnis, Vergleich, Hinweis).
   Handy/Tablet: beide Teile lösen sich auf (display:contents), Reihenfolge Fach → Klassen → Ergebnis → Posten → Vergleich → Hinweis.
   Ab 1180 px: Eingabe und Posten links, Ergebnis rechts (läuft beim Aufklappen der Posten mit) – siehe Ende der Datei.
   Farben: Seitenvariablen (Rückfallwert = Wert aus rahmen.css/seiten.css) plus Tönungen. Bedienung blau,
   Ergebnisse (Minuten, Schuljahr, Raster, Preis je Stunde) Terrakotta. Alle Texte ≥ 4,5:1, Tippziele ≥ 44 px.
   Selektoren mit .zsp-karte davor – sonst greifen .block p / .block h3 aus seiten.css.
   Schrift: 'Baloo 2',system-ui statt 'Baloo 2',cursive – „≈“ fehlt in der Baloo-Datei und käme sonst aus einer
   Schreibschrift (Mac: Apple Chancery, Windows: Comic Sans). */
.zsp-karte{--zsp-dunkel:#174F70;--zsp-tint:#eef4f9;--zsp-tint-rand:#cfe0ec;--zsp-warm:#fdf3ee;--zsp-warm-rand:#f0d5c8;--zsp-linie:#eef3f7;
  --zsp-raster:#c77959;--zsp-raster-hell:#f6e4dc;
  display:flex;flex-direction:column;background:#fff;border:1px solid #e3ecf3;border-radius:20px;box-shadow:0 10px 30px rgba(23,79,112,.08);
  padding:28px;max-width:860px;margin:0 auto;text-align:left;font-family:'Nunito',system-ui,sans-serif;color:var(--text,#243240)}
.zsp-karte p,.zsp-karte h3,.zsp-karte dl,.zsp-karte dd,.zsp-karte ul{margin:0}
.zsp-karte .ico{display:block;flex:none}
.zsp-eingabe,.zsp-auswertung{display:contents}
.zsp-karte .zsp-schritt{order:0;margin-bottom:26px}
.zsp-karte .zsp-ergebnis{order:1}
.zsp-karte .zsp-posten{order:2;margin-top:30px}
.zsp-karte .zsp-vergleich{order:3}
.zsp-karte .zsp-hinweis{order:4}
.zsp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Schritt 1 und 2 */
.zsp-karte .zsp-frage{display:flex;align-items:flex-start;gap:10px;font-weight:700;color:var(--zsp-dunkel);margin:0 0 12px;font-size:1.02rem;line-height:1.45}
.zsp-karte .zsp-frage label{cursor:pointer}
.zsp-karte .zsp-nr{flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--zsp-dunkel);color:#fff;
  font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:.92rem;line-height:1;margin-top:-1px}
/* Fächer als ruhiges Kachelraster: 3 × 2 (Icon links), auf dem Handy 2 × 3 (Icon über dem Namen) */
.zsp-karte .zsp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zsp-karte .zsp-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;text-align:left;
  font-family:'Nunito',system-ui,sans-serif;font-weight:700;font-size:.95rem;line-height:1.25;-webkit-hyphens:manual;hyphens:manual;
  color:var(--blau,#2F6A91);background:var(--zsp-tint);border:1.5px solid var(--zsp-tint-rand);cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.zsp-karte .zsp-chip .ico{width:20px;height:20px}
.zsp-karte .zsp-chip span{min-width:0}
.zsp-karte .zsp-chip:hover{border-color:var(--blau,#2F6A91);background:#e6eff6}
.zsp-karte .zsp-chip[aria-pressed="true"]{background:var(--zsp-dunkel);border-color:var(--zsp-dunkel);color:#fff;box-shadow:0 4px 12px rgba(23,79,112,.22)}
/* Klassen: Anzahl · Minus · Regler · Plus, darunter die Skala 1–10 */
.zsp-karte .zsp-stepper{display:grid;grid-template-columns:auto 44px minmax(0,1fr) 44px;grid-template-areas:"zahl minus regler plus" ". . skala .";
  column-gap:12px;align-items:center}
.zsp-karte .zsp-klassen{grid-area:zahl;min-width:6.4em;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:1.15rem;line-height:1;color:var(--zsp-dunkel);white-space:nowrap}
.zsp-karte .zsp-klassen b{font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums;margin-right:2px}
.zsp-karte .zsp-minus{grid-area:minus}
.zsp-karte .zsp-plus{grid-area:plus}
.zsp-karte .zsp-regler{grid-area:regler}
.zsp-karte .zsp-skala{grid-area:skala;display:flex;justify-content:space-between;padding:0 6px 0 10px;margin-top:-2px;
  font-size:.8rem;font-weight:700;line-height:1.2;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-pm{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--zsp-tint-rand);background:#fff;
  color:var(--blau,#2F6A91);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.zsp-karte .zsp-pm .ico{width:20px;height:20px}
.zsp-karte .zsp-pm:hover{border-color:var(--blau,#2F6A91);background:var(--zsp-tint)}
.zsp-karte .zsp-pm[aria-disabled="true"]{color:#8a9aa6;border-color:#e3ecf3;border-style:dashed;background:#fff;cursor:not-allowed}
/* Regler: Spur mit Füllung bis zum Griff (--p = 0…1 aus zeitrechner.js), Griff 26 px, Klickfläche 44 px hoch.
   Fokus: Ring um den Griff (verdeckt die Skala nicht); bei erzwungenen Farben die normale Kontur. */
.zsp-karte .zsp-regler{--p:.33;-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.zsp-karte .zsp-regler::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background:linear-gradient(to right,var(--blau,#2F6A91) 0 calc(13px + var(--p) * (100% - 26px)),#d3e0ea calc(13px + var(--p) * (100% - 26px)) 100%)}
.zsp-karte .zsp-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;
  border:3px solid var(--blau,#2F6A91);box-shadow:0 2px 6px rgba(23,79,112,.25)}
.zsp-karte .zsp-regler::-moz-range-track{height:8px;border-radius:99px;background:#d3e0ea}
.zsp-karte .zsp-regler::-moz-range-progress{height:8px;border-radius:99px;background:var(--blau,#2F6A91)}
.zsp-karte .zsp-regler::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--blau,#2F6A91);box-shadow:0 2px 6px rgba(23,79,112,.25)}
.zsp-karte .zsp-regler:focus-visible{outline:none}
.zsp-karte .zsp-regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px #9C4A29}
.zsp-karte .zsp-regler:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px #9C4A29}
@media (forced-colors:active){.zsp-karte .zsp-regler:focus-visible{outline:3px solid CanvasText;outline-offset:2px}}
.zsp-karte .zsp-klein{font-size:.88rem;color:var(--text-leicht,#5b6b78);line-height:1.5}
.zsp-karte .zsp-schritt .zsp-klein{margin-top:10px}

/* Posten: Titel + Kurzbeschreibung, Minuten, Balken (= Anteil an der Wochenersparnis); aufgeklappt die Rechnung */
.zsp-karte .zsp-posten-titel{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:1.25rem;line-height:1.3;color:var(--zsp-dunkel)}
.zsp-karte .zsp-posten-hilfe{margin:2px 0 8px}
.zsp-karte .zsp-liste{list-style:none;padding:0}
.zsp-karte .zsp-liste li{margin:0;border-top:1px solid var(--zsp-linie)}
.zsp-karte .zsp-liste li:first-child{border-top:0}
.zsp-karte .zsp-p summary{display:block;min-height:44px;padding:12px 8px 13px;margin:0 -8px;border-radius:12px;cursor:pointer;list-style:none}
/* Raster in einem inneren span – display:grid direkt auf <summary> ist in älteren Safari-Versionen unzuverlässig */
.zsp-karte .zsp-p-kopf{display:grid;grid-template-columns:24px minmax(0,1fr) auto 18px;grid-template-areas:"ico text min pfeil" ". balken balken .";
  column-gap:12px;row-gap:9px;align-items:start}
.zsp-karte .zsp-p summary::-webkit-details-marker{display:none}
.zsp-karte .zsp-p summary::marker{content:''}
.zsp-karte .zsp-p summary:hover{background:#f6f9fc}
.zsp-karte .zsp-p-ico{grid-area:ico;display:flex;color:var(--blau,#2F6A91);padding-top:1px}
.zsp-karte .zsp-p-ico .ico{width:22px;height:22px}
.zsp-karte .zsp-p-text{grid-area:text;display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.4}
.zsp-karte .zsp-p-titel{font-weight:700;color:var(--zsp-dunkel);font-size:.98rem}
.zsp-karte .zsp-p-was{font-size:.9rem;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-p-min{grid-area:min;text-align:right;font-weight:800;color:var(--korall-dunkel,#9C4A29);white-space:nowrap;font-size:.98rem;line-height:1.4;font-variant-numeric:tabular-nums}
.zsp-karte .zsp-p-pfeil{grid-area:pfeil;display:flex;margin-top:2px;color:var(--blau,#2F6A91);transition:transform .2s ease}
.zsp-karte .zsp-p-pfeil .ico{width:18px;height:18px}
.zsp-karte .zsp-p[open] .zsp-p-pfeil{transform:rotate(180deg)}
.zsp-karte .zsp-p-balken{grid-area:balken;display:block;height:8px;border-radius:99px;background:#edf2f6;overflow:hidden}
.zsp-karte .zsp-p-balken span{display:block;height:100%;min-width:8px;border-radius:99px;background:linear-gradient(90deg,var(--blau,#2F6A91),var(--zsp-dunkel));
  transition:width .45s cubic-bezier(.2,.7,.2,1)}
.zsp-karte .zsp-p-rechnung{margin:0 0 14px 36px;padding:9px 12px;background:#f6f9fc;border-left:3px solid var(--korall,#B85C36);border-radius:0 10px 10px 0;
  font-size:.92rem;line-height:1.55;color:var(--text,#243240)}

/* Ergebnis: Woche groß, Schuljahr als Wochenraster (38 Spalten = Schulwochen, Kästchen = Stunden, oberstes anteilig).
   Beide Halbjahre nebeneinander, Kästchen klein: von 1 bis 10 Klassen wächst das Raster nur um wenige Zeilen à 6–14 px. */
.zsp-karte .zsp-ergebnis{background:linear-gradient(180deg,#f2f7fb 0%,#fff 100%);border:1px solid #e3ecf3;border-radius:18px;padding:22px 22px 18px}
.zsp-karte .zsp-kicker{font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--korall-dunkel,#9C4A29)}
.zsp-karte .zsp-auswahl{margin-top:2px;font-weight:700;font-size:.92rem;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-woche{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-top:8px}
.zsp-karte .zsp-zahl{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:clamp(2.7rem,2rem + 2.4vw,3.6rem);line-height:1;color:var(--zsp-dunkel);font-variant-numeric:tabular-nums}
.zsp-karte .zsp-einheit{font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:1.3rem;color:var(--zsp-dunkel)}
.zsp-karte .zsp-u{font-size:.42em;font-weight:700}
.zsp-karte .zsp-ca{font-family:system-ui,sans-serif;font-size:.6em;font-weight:600;vertical-align:.1em}
.zsp-karte .zsp-jahr{margin-top:18px;padding-top:16px;border-top:1px dashed #d3e1eb}
.zsp-karte .zsp-jahr-kopf{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px}
.zsp-karte .zsp-jahr-was{font-weight:800;font-size:1rem;color:var(--zsp-dunkel)}
.zsp-karte .zsp-jahr-was span{font-weight:600;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-jahr-zahl{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--korall-dunkel,#9C4A29);font-variant-numeric:tabular-nums}
.zsp-karte .zsp-raster{--g:2px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.zsp-karte .zsp-jahr-kopf,.zsp-karte .zsp-raster{max-width:640px} /* breite Einspalter (768–1179 px): Kästchen nicht zu groß, Jahreszahl bündig mit dem Raster */
.zsp-karte .zsp-wochen{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));gap:var(--g);align-items:end}
.zsp-karte .zsp-w{display:flex;flex-direction:column;gap:var(--g)}
.zsp-karte .zsp-h{display:block;aspect-ratio:1;border-radius:2px;background:var(--zsp-raster)}
.zsp-karte .zsp-teil{background:linear-gradient(to top,var(--zsp-raster) var(--f),var(--zsp-raster-hell) var(--f))}
.zsp-karte .zsp-halb-name{display:block;margin-top:6px;padding-top:4px;border-top:2px solid #e3ecf3;font-size:.8rem;font-weight:700;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-legende{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.84rem;line-height:1.4;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-legende span span{white-space:nowrap}
.zsp-karte .zsp-legende-k{flex:0 0 auto;width:11px;height:11px;border-radius:2px;background:var(--zsp-raster)}
.zsp-karte .zsp-tage{margin-top:6px;font-weight:700;font-size:.95rem;color:var(--text,#243240)}
.zsp-karte .zsp-tage:empty{display:none}
.zsp-karte .zsp-nw{white-space:nowrap}

/* Vergleich als kleine Rechnung, Ergebnis „je gesparte Stunde“ hervorgehoben (Store-Apps: ausgeblendet, class="ohne-app") */
.zsp-karte .zsp-vergleich{container-type:inline-size;margin-top:16px;background:#fff;border:1.5px solid var(--zsp-tint-rand);border-radius:16px;padding:16px 18px}
.zsp-karte .zsp-vergleich-titel{margin-bottom:6px;font-weight:800;font-size:.98rem;color:var(--zsp-dunkel)}
.zsp-karte .zsp-rechnung div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--zsp-linie)}
.zsp-karte .zsp-rechnung div:first-child{border-top:0}
.zsp-karte .zsp-rechnung dt{padding-left:1.2em;font-weight:600;font-size:.94rem;line-height:1.4;color:var(--text,#243240)}
.zsp-karte .zsp-rechnung dt span{color:var(--text-leicht,#5b6b78);white-space:nowrap}
.zsp-karte .zsp-rechnung dd{font-weight:800;color:var(--zsp-dunkel);white-space:nowrap;font-variant-numeric:tabular-nums}
.zsp-karte .zsp-op{display:inline-block;width:1.2em;margin-left:-1.2em;font-weight:800;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-rechnung .zsp-summe{margin-top:6px;padding:10px 14px;align-items:center;background:var(--zsp-warm);border:1.5px solid var(--zsp-warm-rand);border-radius:12px}
.zsp-karte .zsp-rechnung .zsp-summe dt{font-weight:800;color:var(--korall-dunkel,#9C4A29)}
.zsp-karte .zsp-rechnung .zsp-summe .zsp-op{color:var(--korall-dunkel,#9C4A29)}
.zsp-karte .zsp-rechnung .zsp-summe dd{font-family:'Baloo 2',system-ui,sans-serif;font-size:1.75rem;line-height:1;color:var(--korall-dunkel,#9C4A29)}
/* breiter Kasten (z. B. 1920 px oder Tablet): die Rechnung als Gleichung in drei Feldern */
@container (min-width:600px){
  .zsp-karte .zsp-rechnung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:32px;margin-top:10px}
  .zsp-karte .zsp-rechnung div,.zsp-karte .zsp-rechnung .zsp-summe{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start;gap:4px;
    margin:0;padding:12px 16px;border:1px solid var(--zsp-linie);border-radius:12px;background:#f8fbfd}
  .zsp-karte .zsp-rechnung div:first-child{border:1px solid var(--zsp-linie)}
  .zsp-karte .zsp-rechnung dt{padding-left:0}
  .zsp-karte .zsp-rechnung dd{font-family:'Baloo 2',system-ui,sans-serif;font-size:1.45rem;line-height:1.1}
  .zsp-karte .zsp-op{position:absolute;left:-26px;top:50%;width:20px;margin:0;transform:translateY(-50%);text-align:center;font-size:1.3rem}
  .zsp-karte .zsp-rechnung .zsp-summe{background:var(--zsp-warm);border:1.5px solid var(--zsp-warm-rand)}
  .zsp-karte .zsp-rechnung .zsp-summe dd{font-size:1.75rem}
}
/* Hinweis: links, mit Info-Icon, erster Satz fett (Wortlaut unverändert) */
.zsp-karte .zsp-hinweis{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;max-width:46em;text-align:left;font-size:.86rem;line-height:1.55;color:var(--text-leicht,#5b6b78)}
.zsp-karte .zsp-hinweis .ico{width:18px;height:18px;margin-top:2px;color:var(--blau,#2F6A91)}
.zsp-karte .zsp-hinweis b{color:#33586f}

/* Handy und kleines Tablet */
@media (max-width:639px){
  /* Fächer als 2 × 3 Kacheln, Icon über dem Namen */
  .zsp-karte .zsp-chips{grid-template-columns:1fr 1fr}
  .zsp-karte .zsp-chip{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:9px 8px;border-radius:14px;text-align:center;font-size:.9rem}
}
@media (max-width:560px){
  .zsp-karte{padding:20px 16px;border-radius:18px}
  /* Klassen: Anzahl links, Minus/Plus rechts, darunter der Regler über die ganze Breite */
  .zsp-karte .zsp-stepper{grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-areas:"zahl minus plus" "regler regler regler" "skala skala skala";column-gap:8px}
  .zsp-karte .zsp-regler{margin-top:4px}
  .zsp-karte .zsp-ergebnis{padding:18px 16px 16px}
  .zsp-karte .zsp-auswahl{font-size:.86rem}
  .zsp-karte .zsp-woche{column-gap:10px}
  .zsp-karte .zsp-zahl{font-size:2.6rem}
  .zsp-karte .zsp-einheit{flex-basis:100%;font-size:1.1rem}
  .zsp-karte .zsp-raster{--g:1.5px;gap:8px}
  .zsp-karte .zsp-h{border-radius:1.5px}
  .zsp-karte .zsp-legende-k{width:8px;height:8px;border-radius:1.5px}
  .zsp-karte .zsp-tage .zsp-nw{display:block;font-weight:600;color:var(--text-leicht,#5b6b78)} /* immer zweizeilig: Höhe bleibt beim Ziehen gleich */
  .zsp-karte .zsp-p-kopf{column-gap:10px;grid-template-areas:"ico text text pfeil" ". balken min min"}
  .zsp-karte .zsp-p summary{padding:10px 8px 11px}
  .zsp-karte .zsp-p-min{min-width:4.6em}
  .zsp-karte .zsp-p-rechnung{margin-left:0}
  .zsp-karte .zsp-vergleich{padding:14px}
  .zsp-karte .zsp-rechnung .zsp-summe{padding:10px 12px}
}
/* Bewegung: Raster wächst beim ersten Sichtbarwerden Spalte für Spalte (zeitrechner.js setzt kurz .zsp-zeigen) */
@media (prefers-reduced-motion: no-preference){
  .zsp-karte.zsp-zeigen .zsp-w{transform-origin:bottom;animation:zsp-wachsen .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 16ms)}
}
@keyframes zsp-wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .zsp-karte .zsp-chip,.zsp-karte .zsp-pm,.zsp-karte .zsp-p-pfeil,.zsp-karte .zsp-p-balken span{transition:none}
}
/* Zweispaltig erst ab 1180 px (darunter ist die linke Spalte zu eng für Fächer, Regler und Raster) */
@media (min-width:1180px){
  .zsp-karte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(36px,3.5vw,64px);align-items:start;max-width:none;padding:34px 38px}
  .zsp-eingabe{display:block;min-width:0}
  .zsp-auswertung{display:flex;flex-direction:column;min-width:0;position:sticky;top:96px}
  .zsp-karte .zsp-posten{margin-top:32px}
  .zsp-karte .zsp-ergebnis{padding:26px 28px 22px}
}

/* ── Newsletter-Block ── */
.nl-karte{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:linear-gradient(135deg,#ffffff 0%,#eef5fa 100%);
  border:1px solid var(--rand,#e2ecf2);border-radius:26px;padding:34px 36px;box-shadow:0 4px 14px rgba(61,126,170,.10);text-align:left}
.nl-kicker{display:inline-flex;align-items:center;gap:.45em;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#9C4A29;margin-bottom:6px}
.nl-kicker .ico{width:1.15em;height:1.15em}
.nl-karte h2{font-family:'Baloo 2',cursive;font-size:1.7rem;line-height:1.2;margin:0 0 10px;color:var(--text,#243240)}
.nl-text p{color:var(--text-leicht,#5b6b78);font-size:1.02rem;margin:0 0 10px;line-height:1.6;max-width:var(--lese-breite,38em)}
.nl-text ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.nl-text li{display:flex;gap:9px;align-items:flex-start;font-weight:600;color:var(--text,#243240);font-size:.97rem;line-height:1.45}
.nl-text li .ico{width:1.2em;height:1.2em;color:var(--blau,#2F6A91);flex:0 0 auto;margin-top:.12em}
.nl-form{margin:0}
.nl-form label.nl-label{display:block;font-family:'Nunito',system-ui,sans-serif;font-weight:700;color:var(--text,#243240);margin:0 0 6px;font-size:.98rem}
.nl-zeile{display:flex;gap:10px;flex-wrap:wrap}
.nl-zeile input[type=email]{flex:1 1 220px;min-width:0;min-height:50px;padding:.6em 1em;border:2px solid #cfdae3;border-radius:14px;background:#fff;
  font-family:'Nunito',system-ui,sans-serif;font-size:1.02rem;color:var(--text,#243240)}
.nl-zeile input[type=email]:focus{border-color:var(--blau,#2F6A91);outline:3px solid rgba(47,106,145,.25);outline-offset:1px}
.nl-zeile input[aria-invalid="true"],.nl-zeile input[aria-invalid="true"]:focus{border-color:#B3261E}
.nl-zeile .btn{flex:0 0 auto;min-height:50px;justify-content:center}
.nl-zeile .btn[disabled]{opacity:.7;cursor:wait;transform:none}
.nl-honig{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.nl-hinweis{font-size:.86rem;color:var(--text-leicht,#5b6b78);margin:12px 0 0;line-height:1.55;max-width:var(--lese-breite,38em)}
.nl-hinweis a{color:var(--blau,#2F6A91);font-weight:700}
.nl-meldung{margin:12px 0 0;font-weight:700;font-size:.97rem;line-height:1.5;border-radius:12px}
.nl-meldung:empty{display:none}
.nl-meldung.info{color:var(--text,#243240)}
.nl-meldung.fehler{color:#B3261E;background:#fdecea;padding:10px 14px}
.nl-meldung a{color:inherit}
.nl-erfolg{background:#eafaf1;border:1.5px solid #bfe6cf;border-radius:16px;padding:18px 20px;color:#1d6b43;line-height:1.6}
.nl-erfolg b{display:flex;align-items:center;gap:.45em;font-family:'Baloo 2',cursive;font-size:1.2rem;color:#17603b;margin-bottom:4px}
.nl-erfolg b .ico{width:1.25em;height:1.25em}
.nl-erfolg p{margin:0;color:#1d6b43;font-size:.98rem}
@media (max-width:860px){.nl-karte{grid-template-columns:1fr;padding:26px 20px;gap:18px}}
@media (max-width:480px){.nl-zeile .btn{width:100%}.nl-karte h2{font-size:1.45rem}}

/* ── Zahlenleiste (öffentliche Kennzahlen, Migration 361) ── */
.kz-leiste{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin:0 auto;padding:18px 24px;max-width:960px;
  background:#fff;border:1px solid var(--rand,#e2ecf2);border-radius:20px;box-shadow:0 4px 14px rgba(61,126,170,.10)}
.kz-leiste[hidden]{display:none}
.kz-wert{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;flex:1 1 0;max-width:200px}
.kz-zahl{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.9rem;line-height:1.1;color:var(--blau,#2F6A91)}
.kz-was{font-weight:700;font-size:.92rem;color:var(--text-leicht,#5b6b78)}
.kz-fuss{flex-basis:100%;text-align:center;font-size:.82rem;color:var(--text-leicht,#5b6b78);margin:0}
@media (max-width:560px){.kz-leiste{padding:14px 12px;gap:10px 12px}.kz-zahl{font-size:1.5rem}.kz-was{font-size:.82rem;line-height:1.3}}

/* ── Stimmen von Lehrkräften (erscheinen erst mit echten, freigegebenen Einträgen) ── */
.stimmen-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.stimme{margin:0;background:#fff;border:1px solid var(--rand,#e2ecf2);border-radius:20px;padding:24px;box-shadow:0 4px 14px rgba(61,126,170,.10);display:flex;flex-direction:column;gap:16px}
.stimme blockquote{margin:0;font-size:1.05rem;line-height:1.6;color:var(--text,#243240)}
.stimme figcaption{display:flex;gap:12px;align-items:center;margin-top:auto}
.stimme-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e7f0f6;color:var(--blau-dunkel,#24567A);
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1.05rem;overflow:hidden}
.stimme-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.stimme-name{display:block;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;color:var(--text,#243240);line-height:1.2}
.stimme-rolle{display:block;font-size:.9rem;font-weight:600;color:var(--text-leicht,#5b6b78);line-height:1.4}
.stimme-pilot{display:block;font-size:.82rem;color:var(--text-leicht,#5b6b78);margin-top:2px}
.stimmen-fuss{text-align:center;font-size:.86rem;color:var(--text-leicht,#5b6b78);margin:16px 0 0}

/* ── Breite Bildschirme (21.10.2026): Bausteine in der einheitlichen Seitenbreite (rahmen.css) ── */
@media (min-width:1100px){
  /* Zeitwert-Rechner: zweispaltig erst ab 1180 px (Abschnitt „Zeitwert-Rechner“ oben) */
  /* Newsletter: Text und Hinweis lesbar schmal, Formular rechts */
  .nl-karte{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px);padding:38px 44px}
  /* Zahlenleiste über die ganze Seitenbreite */
  .kz-leiste{max-width:none;justify-content:space-around}
  .kz-wert{max-width:none}
}