/* ERZEUGT von start-bau/stil.py — NICHT hier ändern. Quellen: basis.css, startseite.css */

/* ═══ GRUNDLAGE — gilt auf JEDER Seite (Startseite und alle Unterseiten) ═══
   Schriften, Farben, Navigation, Knöpfe, FAQ, Fuß, feste Elemente.
   Quelle: start-bau/basis.css. stil.py setzt sie an den Anfang von
   css/start.css UND css/styles.css — also nie in den erzeugten Dateien ändern. */


@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-subset.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Nunito trägt Wortmarke UND Überschriften. Das Subset kennt „ € → ✓ ★ NICHT —
   diese Zeichen deshalb nie in Nunito setzen (Zitate und Preise: siehe unten). */
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-subset.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

:root {
  --paper:      #F1EEE7;
  --paper-2:    #E8E3D8;
  --card:       #FFFFFF;
  --ink:        #17231A;
  --ink-2:      #465247;
  --ink-3:      #5E685F;
  --line:       #DBD5C8;
  --black:      #0E1511;

  --green:      #2D7B30;
  --green-700:  #1F6124;
  --green-900:  #144518;
  --green-tint: #C6E7C8;
  --green-wash: #E3F0E2;
  --blue:       #3F7FE8;
  --marker:     #FFE36B;

  --z-gelb: #FFF0A3; --z-rosa: #FFD6CF; --z-blau: #D6E5FF;
  --z-gruen: #D3EDCC; --z-orange: #FFE3B8; --z-lila: #EBDDFC;

  --display: 'Nunito', 'Inter', system-ui, sans-serif;
  --lesen: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --text: var(--ink);   /* alter Name der Textfarbe */
}

/* Alte Namen aus dem v8-Stylesheet: Die Unterseiten (Altbestand, anleitung.css
   und Inline-Stile in den Seiten) benutzen sie weiter — hier zeigen sie auf die
   neuen Farben. Wer eine Farbe ändert, ändert sie oben, nicht hier. */
:root {
  --primary: var(--green); --primary-dark: var(--green-700); --primary-light: var(--green-wash); --primary-50: var(--green-tint);
  --accent: #3A9440; --teal: var(--green-700); --amber: #B4580A; --red: #C8402E; --purple: #6B39B8;
  --bg: var(--paper); --bg-alt: var(--paper-2); --bg-soft: #FFFFFF; --bg-dark: var(--green-900); --bg-dark-2: #0F3613;
  --surface: #FFFFFF; --surface-alt: #EFEBE3; --border: var(--line); --border-light: #E9E4DA;
  --text-sec: var(--ink-2); --text-muted: var(--ink-3); --text-inv: #F3F5F1;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(23, 35, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 35, 26, 0.07), 0 1px 2px rgba(23, 35, 26, 0.04);
  --shadow-md: 0 14px 30px -18px rgba(23, 35, 26, 0.35);
  --shadow-lg: 0 24px 48px -26px rgba(23, 35, 26, 0.4);
  --shadow-xl: 0 40px 70px -32px rgba(14, 21, 17, 0.6);
}

body {
  font-family: var(--lesen);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* height:auto ist Pflicht: Bilder tragen width/height-Attribute gegen
   Layout-Sprünge — ohne diese Zeile gilt die Attributhöhe wörtlich. */
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sec { padding: 64px 0; }
.sec-schmal { padding: 0 0 64px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }
@media (min-width: 900px) { .sec { padding: 112px 0; } .sec-schmal { padding-bottom: 112px; } }

/* ═══ Schrift ═══ */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.04; }
h2 { font-weight: 900; font-size: clamp(1.85rem, 4.4vw, 3.1rem); line-height: 1.08; }
h3 { font-weight: 800; font-size: 1.22rem; line-height: 1.22; }
.h2-klein { font-size: clamp(1.5rem, 3vw, 2.1rem); }
/* Handy: lange deutsche Wörter („Lernentwicklungsgespräche“) passen in großer Schrift
   nicht in eine Zeile und schoben die ganze Seite in die Breite. Nur lange Wörter
   trennen (ab 14 Zeichen), damit kurze Überschriften nicht zerhackt werden. */
@media (max-width: 560px) {
  h1, h2, h3, .t-hero, .t-h2, .t-h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 9px; border-radius: 2px 4px 3px 5px; background: var(--marker); transform: rotate(-4deg); }
.lead { font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); max-width: 60ch; margin-top: 16px; }
.lead a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sec-head { max-width: 780px; margin-bottom: 40px; }
@media (min-width: 900px) { .sec-head { margin-bottom: 56px; } }

/* Textmarker: ein Strich über die untere Zeilenhälfte, leicht unregelmäßig. */
mark {
  color: inherit;
  background: linear-gradient(transparent 0 14%, var(--marker) 14% 90%, transparent 90%);
  padding: 0 0.14em; margin: 0 -0.14em;
  border-radius: 0.18em 0.5em 0.22em 0.42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ═══ Knöpfe ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 14px; font-weight: 700; font-size: 1rem; line-height: 1.2;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.btn-lg { padding: 16px 24px; font-size: 1.05rem; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-900); }
.btn-primary:hover { background: var(--green-700); transform: translateY(-1px); }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 10px 22px 10px 16px; border-radius: 14px;
  background: var(--black); color: #fff;
  box-shadow: 0 4px 0 rgba(14, 21, 17, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(14, 21, 17, 0.28); }
.store-btn-icon, .nav-store-icon { flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.store-btn-icon { width: 26px; height: 26px; }
.nav-store-icon { width: 16px; height: 16px; }
.store-btn.ios .store-btn-icon, .nav-store-icon.ios { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/></svg>"); }
.store-btn.android .store-btn-icon, .nav-store-icon.android { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17.523 15.341a1.001 1.001 0 100-2.001 1.001 1.001 0 000 2.001m-11.046 0a1.001 1.001 0 110-2.001 1.001 1.001 0 010 2.001m11.405-6.02l1.998-3.459a.416.416 0 00-.153-.567.416.416 0 00-.566.153l-2.022 3.503a12.58 12.58 0 00-10.278 0L5.839 5.448a.416.416 0 10-.72.414l1.998 3.459C3.69 11.137 1.4 14.553 1 18.584h22c-.4-4.031-2.69-7.447-6.118-9.263'/></svg>"); }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn-small { font-size: 0.7rem; opacity: 0.85; }
.store-btn-big { font-size: 1.08rem; font-weight: 700; }
@media (max-width: 520px) { .store-buttons { flex-direction: column; } .store-btn { width: 100%; justify-content: center; } }

/* Gerät erkannt (data-os setzt ein Inline-Skript im <head>): auf dem Handy
   nur den passenden Store zeigen. Am Rechner bleiben beide stehen. */
html[data-os="ios"] .store-btn.android,
html[data-os="ios"] .mobile-menu .nav-cta[href*="play.google.com"],
html[data-os="android"] .store-btn.ios,
html[data-os="android"] .mobile-menu .nav-cta[href*="apps.apple.com"] { display: none; }
.store-alt { display: none; margin-top: 12px; font-size: 0.9rem; color: var(--ink-2); }
.store-alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html[data-os="ios"] .store-alt.fuer-ios, html[data-os="android"] .store-alt.fuer-android { display: block; }

/* ═══ Navigation (HTML kommt unverändert aus anleitung-bau/_navigation.py) ═══ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(241, 238, 231, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(23, 35, 26, 0.6); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 10px 20px; min-height: 66px; display: flex; align-items: center; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav-logo-mark { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 2px 6px rgba(23, 35, 26, 0.2); }
.nav-logo-text-wrap { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-text { font-family: var(--display); font-weight: 900; font-size: 1.42rem; letter-spacing: -0.01em; color: var(--ink); }
.nav-logo-sub { display: none; margin-top: 3px; font-size: 0.68rem; font-weight: 500; color: var(--ink-3); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links > a, .nav-mehr-btn {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 9px 12px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
}
.nav-links > a:hover, .nav-mehr-btn:hover, .nav-mehr-btn[aria-expanded="true"] { background: var(--green-wash); color: var(--green-900); }
.nav-mehr { position: relative; }
.nav-mehr-chevron { transition: transform 0.2s; }
.nav-mehr-btn[aria-expanded="true"] .nav-mehr-chevron { transform: rotate(180deg); }
.nav-mehr-liste {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; padding: 6px;
  display: grid; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(23, 35, 26, 0.45);
}
.nav-mehr-liste[hidden] { display: none; }
.nav-mehr-liste a { padding: 10px 12px; border-radius: 10px; font-size: 0.93rem; font-weight: 600; color: var(--ink-2); }
.nav-mehr-liste a:hover { background: var(--green-wash); color: var(--green-900); }
.nav-stores { display: flex; gap: 8px; margin-left: 10px; }
.nav-store-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px; background: var(--black); color: #fff; font-size: 0.85rem; font-weight: 700;
  transition: background 0.15s;
}
.nav-store-btn:hover { background: var(--green-900); }
.nav-mobile-btn { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; color: var(--ink); }
.mobile-menu { display: none; }
@media (min-width: 1300px) { .nav-logo-sub { display: block; } }
@media (max-width: 1160px) { /* darunter passen Logo, 7 Punkte und 2 Store-Knöpfe nicht mehr in eine Zeile */
  .nav-links { display: none; }
  .nav-mobile-btn { display: inline-flex; }
  .mobile-menu.open {
    display: grid; gap: 2px; padding: 8px 14px 18px;
    max-height: calc(100vh - 66px); overflow: auto;
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .mobile-menu a { padding: 13px 12px; border-radius: 12px; font-size: 1.02rem; font-weight: 600; }
  .mobile-menu a:hover { background: var(--green-wash); }
  .mobile-menu .nav-cta { margin-top: 8px; background: var(--black); color: #fff; text-align: center; }
}

/* ═══ FAQ (Startseite und schulen.html) ═══ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 2px solid var(--ink); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; text-align: left; font: 800 1.1rem/1.3 var(--display); }
.faq-question:hover { color: var(--green-700); }
.faq-chevron { flex-shrink: 0; transition: transform 0.25s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.faq-answer > p { overflow: hidden; color: var(--ink-2); line-height: 1.7; max-width: 68ch; }
.faq-answer a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer > p { padding: 0 2px 22px; }

/* ═══ FUSS ═══ */
.footer { padding: 56px 0 120px; background: var(--black); color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.footer-top { display: grid; gap: 36px; }
.footer .nav-logo-text { color: #fff; }
.footer .nav-logo-sub { display: block; color: rgba(255, 255, 255, 0.6); }
.footer-brand-desc { margin-top: 16px; max-width: 36ch; }
.footer-col h3, .footer-col h4 { margin-bottom: 14px; font: 800 0.8rem var(--lesen); letter-spacing: 0.09em; text-transform: uppercase; color: #fff; }
/* Die Unterseiten setzen am Fuß-Logo Höhe und Schriftgröße inline — hier zurückholen. */
.footer .nav-logo-mark { width: 46px !important; height: 46px !important; }
.footer .nav-logo-text { font-size: 1.42rem !important; }
/* Lange Linklisten (Ratgeber: 30 Einträge) zweispaltig statt als Turm. */
.footer-col:has(li:nth-child(12)) ul { columns: 2; column-gap: 28px; }
.footer-col:has(li:nth-child(12)) li { break-inside: avoid; }
/* Rasterspalten dürfen schrumpfen; lange Wörter („Lernentwicklungsgespräche“) trennen statt die Seite zu verbreitern. */
.footer-top > * { min-width: 0; }
.footer-col ul { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.footer-col li + li { margin-top: 9px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.88rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
@media (min-width: 760px) { .footer { padding-bottom: 56px; } .footer-inner { padding: 0 32px; } .footer-top { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .footer-col:has(li:nth-child(12)) { grid-column: span 2; } }

/* ═══ Feste Elemente ═══ */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(241, 238, 231, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.3s;
}
.mobile-cta.visible { transform: none; }
.mobile-cta .btn { width: 100%; }
.scroll-top {
  position: fixed; right: 22px; bottom: 24px; z-index: 50; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -12px rgba(23, 35, 26, 0.55);
  font-size: 1.1rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 0; height: 3px; background: var(--green); }
@media (min-width: 760px) { .mobile-cta { display: none; } }
@media (max-width: 759px) { .scroll-top { display: none; } }

/* ═══ Einblenden (Klassen setzt js/main.js) ═══ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══ STARTSEITE — Leitidee „Klassenmappe“ ═══
   Die Website sieht aus wie die App und wie der Schreibtisch, den sie
   ersetzt: Papier, Tannengrün, Textmarker, Zettel, Registerblätter.
   Quelle: start-bau/startseite.css; die Grundlage (basis.css) steht davor. */

/* ═══ Telefonrahmen ═══ */
.handy {
  position: relative; aspect-ratio: 900 / 1960; padding: 9px; border-radius: 40px;
  background: var(--black);
  box-shadow: inset 0 0 0 2px #2A352E, 0 40px 70px -32px rgba(14, 21, 17, 0.65), 0 14px 26px -14px rgba(14, 21, 17, 0.4);
}
.handy picture, .handy img { display: block; width: 100%; height: 100%; }
.handy img { object-fit: cover; object-position: top center; border-radius: 31px; background: #EFEEEA; }

/* ═══ Zettel ═══ */
.zettel {
  position: relative; display: block; width: 100%;
  padding: 16px 14px 16px; text-align: left;
  font: 700 0.95rem/1.3 var(--display); color: #2B2A20;
  border-radius: 2px 2px 16px 2px / 2px 2px 30px 2px;
  box-shadow: 0 12px 18px -12px rgba(23, 35, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.zettel::before { /* Klebestreifen */
  content: ''; position: absolute; top: -9px; left: 50%; width: 52px; height: 18px; margin-left: -26px;
  background: rgba(255, 255, 255, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transform: rotate(-2deg);
}
.z-gelb { background: var(--z-gelb); } .z-rosa { background: var(--z-rosa); } .z-blau { background: var(--z-blau); }
.z-gruen { background: var(--z-gruen); } .z-orange { background: var(--z-orange); } .z-lila { background: var(--z-lila); }

/* ═══ HERO ═══ */
.hero { position: relative; overflow: hidden; padding: 28px 0 0; border-bottom: 2px solid var(--ink); }
.hero::before { /* Karopapier */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 35, 26, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 35, 26, 0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 50%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0, #000 50%, transparent 96%);
}
.hero-grid { position: relative; display: grid; gap: 30px; }
.hero-copy { max-width: 660px; }
.hero-sub { margin-top: 18px; max-width: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--ink-2); }
.hero .store-buttons { margin-top: 26px; }
.hero-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: 0.95rem; font-weight: 600; color: var(--green-900); }
.hero-note svg { flex-shrink: 0; margin-top: 2px; }
.hero-proof { display: flex; align-items: center; gap: 13px; max-width: 540px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed #BEB7A8; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.hero-proof picture { flex-shrink: 0; }
.hero-proof img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.hero-proof strong { display: block; color: var(--ink); }
/* Handy: Der erste Bildschirm gehört Aussage, Knopf und App-Bild — der
   Begleitsatz zur Herkunft steht weiter unten im Gründerbrief. */
@media (max-width: 619px) {
  .hero-proof { margin-top: 18px; padding-top: 14px; }
  .hero-proof picture, .hero-proof .proof-satz { display: none; }
}
.sterne { color: #B77A00; letter-spacing: 0.06em; }

.hero-stage { position: relative; height: 400px; margin: 0 -20px; overflow: hidden; display: grid; justify-items: center; }
.hero-stage .handy { position: relative; z-index: 2; width: 250px; margin-top: 40px; align-self: start; }
.mappe {
  position: absolute; left: 50%; top: 78px; width: 330px; height: 520px; margin-left: -165px;
  border-radius: 26px; transform: rotate(-6deg);
  background: linear-gradient(140deg, #2F8033 0%, #1A5A1F 55%, #144518 100%);
  box-shadow: 0 30px 60px -30px rgba(20, 69, 24, 0.7);
}
/* Registerblätter an der rechten Kante der Mappe — die obere Kante liegt
   hinter dem Telefon und wäre nicht zu sehen. */
.mappe-reiter {
  position: absolute; right: -30px; top: 64px; padding: 16px 7px 16px 12px; border-radius: 0 12px 12px 0;
  writing-mode: vertical-rl; white-space: nowrap;
  background: var(--green-tint); color: var(--green-900); font: 800 0.82rem var(--display);
}
.mappe-reiter + .mappe-reiter { top: 178px; background: var(--z-orange); color: #8F4405; }
.hero-zettel { display: none; }
@media (min-width: 620px) {
  .hero-zettel { display: block; }
  .hero-zettel li { position: absolute; z-index: 1; width: 158px; }
  /* Die Zettel stecken halb unter dem Telefon: Text in den sichtbaren Teil rücken. */
  .hero-zettel li:nth-child(odd) .zettel { padding-right: 50px; }
  .hero-zettel li:nth-child(even) .zettel { padding-left: 50px; }
  .hero-zettel li:nth-child(1) { left: calc(50% - 262px); top: 96px; transform: rotate(-8deg); }
  .hero-zettel li:nth-child(2) { right: calc(50% - 270px); top: 250px; transform: rotate(6deg); }
  .hero-zettel li:nth-child(3) { display: none; }
}
@media (min-width: 960px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 48px; align-items: center; }
  .hero-stage { height: auto; min-height: 690px; margin: 0; overflow: visible; align-items: center; }
  .hero-stage .handy { width: 300px; margin-top: 0; align-self: center; }
  .mappe { top: 50%; width: 410px; height: 610px; margin: -296px 0 0 -196px; }
  .hero-zettel li:nth-child(1) { top: 76px; }
  .hero-zettel li:nth-child(2) { top: 330px; }
}
/* Der dritte Zettel ragt nach links aus der Spalte — erst zeigen, wenn
   daneben genug Luft zum Text ist. */
@media (min-width: 1240px) {
  .hero-zettel li:nth-child(3) { display: block; left: calc(50% - 270px); bottom: 104px; transform: rotate(5deg); }
}

/* ═══ ZETTEL → ABLAGE (#problem) ═══ */
.sortier { display: grid; gap: 22px; align-items: center; }
.sortier-titel { font: 800 0.82rem var(--lesen); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.zettelwand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 6px 4px; }
.zettelwand .zettel { min-height: 108px; display: flex; align-items: center; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, opacity 0.35s; }
.zettelwand li:nth-child(1) .zettel { transform: rotate(-4deg); }
.zettelwand li:nth-child(2) .zettel { transform: rotate(3deg) translateY(8px); }
.zettelwand li:nth-child(3) .zettel { transform: rotate(-2deg); }
.zettelwand li:nth-child(4) .zettel { transform: rotate(5deg) translateY(-4px); }
.zettelwand li:nth-child(5) .zettel { transform: rotate(-5deg); }
.zettelwand li:nth-child(6) .zettel { transform: rotate(2deg) translateY(6px); }
.sortier.hat-aktiv .zettelwand .zettel { opacity: 0.5; }
.sortier .zettelwand .zettel.ist-aktiv { opacity: 1; transform: rotate(0) scale(1.06); box-shadow: 0 22px 30px -16px rgba(23, 35, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6); z-index: 2; }
.sortier-hinweis { margin-top: 18px; font-size: 0.88rem; color: var(--ink-3); }
.sortier-pfeil { justify-self: center; color: var(--ink); transform: rotate(90deg); }
.ablage {
  background: #fff; border-radius: 24px; padding: 18px 16px 8px; border: 1px solid rgba(23, 35, 26, 0.07);
  box-shadow: 0 30px 56px -34px rgba(23, 35, 26, 0.55);
}
.ablage-kopf { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; font: 800 0.8rem var(--lesen); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ablage-kopf img { width: 26px; height: 26px; border-radius: 7px; }
.ablage li { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-top: 1px solid #EFEBE3; border-radius: 12px; transition: background 0.3s, transform 0.3s; }
.ablage li.ist-aktiv { background: var(--green-wash); border-top-color: transparent; transform: translateX(4px); }
.ab-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; }
.ab-t { display: block; font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.ab-s { display: block; font-size: 0.86rem; color: var(--ink-3); }
@media (min-width: 560px) { .zettelwand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; } }
@media (min-width: 960px) {
  .sortier { grid-template-columns: minmax(0, 1.15fr) 84px minmax(0, 1fr); gap: 18px; }
  .sortier-pfeil { transform: none; }
}

.schritte-kopf { margin-top: 80px; padding-top: 8px; }
.schritte { display: grid; margin-top: 26px; counter-reset: s; }
.schritte li { counter-increment: s; padding: 22px 0 26px; border-top: 2px solid var(--ink); }
.schritte li::before { content: counter(s); display: block; margin-bottom: 8px; font: 900 2.8rem/1 var(--display); color: var(--green); }
.schritte p { margin-top: 8px; color: var(--ink-2); max-width: 42ch; }
@media (max-width: 899px) {
  .schritte-kopf { margin-top: 64px; }
  .schritte li { position: relative; padding: 18px 0 20px 56px; }
  .schritte li::before { position: absolute; left: 0; top: 14px; margin: 0; font-size: 2.4rem; }
}
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 40px; } .schritte-kopf { margin-top: 112px; } }

/* ═══ REGISTER (#features) ═══ */
.register-sec { background: var(--paper-2); }
.reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.reiter-tab {
  --f: #C6E7C8; --ft: #1F6124;
  min-height: 50px; padding: 10px 8px; border-radius: 12px;
  background: var(--f); color: var(--ft);
  font: 800 0.88rem/1.15 var(--display); text-align: center;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.reiter-tab[data-f="kind"]       { --f: #FFE3B8; --ft: #8F4405; }
.reiter-tab[data-f="unterricht"] { --f: #D6E5FF; --ft: #2450A8; }
.reiter-tab[data-f="noten"]      { --f: #EBDDFC; --ft: #6332AD; }
.reiter-tab[data-f="klima"]      { --f: #FFD6CF; --ft: #A5321F; }
.reiter-tab[data-f="ablage"]     { --f: #CFECEC; --ft: #0D5F5F; }
.reiter-tab small { margin-left: 5px; font: 700 0.72rem var(--lesen); opacity: 0.75; }
.reiter-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 4px 0 var(--ft); }
.fach-titel { font: 900 1.4rem var(--display); margin-bottom: 14px; }
.fach { margin-top: 10px; padding: 18px 16px 20px; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -42px rgba(23, 35, 26, 0.6); }
.fach + .fach { margin-top: 20px; }
.fach[hidden] { display: none; }

.fn-liste { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.fn-wahl { padding: 9px 13px; border-radius: 999px; background: var(--paper); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
.fn-wahl:hover { background: var(--paper-2); }
.fn-wahl[aria-pressed="true"] { background: var(--ink); color: #fff; }

.register:not(.js-aktiv) .reiter { display: none; }
.fn-buehne { min-width: 0; }
.fn { display: grid; gap: 22px; }
.fn + .fn { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.register.js-aktiv .fach-titel { display: none; }
.register.js-aktiv .fn { display: none; margin: 0; padding: 0; border: 0; }
.register.js-aktiv .fn.ist-aktiv { display: grid; }
/* Einblenden nur nach einem Wechsel durch den Nutzer (.neu) — beim Laden
   steht die erste Funktion sofort da, unabhängig von jeder Animation. */
.register.js-aktiv .fn.ist-aktiv.neu { animation: fn-ein 0.35s ease; }
@keyframes fn-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fn-text h3 { font-weight: 900; font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.12; }
.fn-text > p { margin-top: 12px; max-width: 46ch; font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }
.haken { display: grid; gap: 9px; margin-top: 18px; }
.haken li { position: relative; padding-left: 30px; font-size: 0.97rem; font-weight: 600; }
.haken li::before {
  content: ''; position: absolute; left: 0; top: 0.14em; width: 20px; height: 20px; border-radius: 6px;
  background: var(--green-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231F6124' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
}
.fn-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.fn-link { font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 4px; }
.fn-bild { justify-self: center; }
.fn-bild .handy { width: min(236px, 64vw); aspect-ratio: 900 / 1560; padding: 8px; border-radius: 34px; }
.fn-bild .handy img { border-radius: 27px; }

.fn-schritt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.fn-zaehler { font-size: 0.86rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fn-zurueck, .fn-vor { padding: 10px 14px; border-radius: 12px; font-size: 0.93rem; font-weight: 700; }
.fn-zurueck { color: var(--ink-2); }
.fn-zurueck:hover { background: var(--paper); }
.fn-vor { background: var(--green-wash); color: var(--green-900); text-align: right; }
.fn-vor:hover { background: var(--green-tint); }

@media (min-width: 900px) {
  .reiter { display: flex; align-items: flex-end; gap: 6px; padding: 0 20px; }
  .reiter-tab { flex: 1; padding: 14px 10px 18px; border-radius: 14px 14px 0 0; font-size: 1rem; transform: translateY(8px); }
  .reiter-tab:hover { transform: translateY(3px); }
  .reiter-tab[aria-selected="true"] { transform: none; padding-bottom: 22px; }
  .fach { position: relative; margin-top: 0; padding: 36px; border-radius: 26px; }
  .register.js-aktiv .fach { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 12px 44px; min-height: 700px; }
  .register.js-aktiv .fach[hidden] { display: none; }
  .fn-liste { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin: 0; grid-row: 1 / span 2; align-self: start; }
  .fn-wahl { padding: 12px 14px; border-radius: 12px; background: transparent; text-align: left; font-size: 0.99rem; }
  .fn-wahl:hover { background: var(--paper); }
  .fn-wahl[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 4px 0 0 var(--green); }
  .fn { grid-template-columns: minmax(0, 1fr) 270px; gap: 44px; align-items: center; }
  .fn-bild .handy { width: 270px; aspect-ratio: 900 / 1960; padding: 9px; border-radius: 40px; }
  .fn-bild .handy img { border-radius: 31px; }
  .fn-schritt { align-self: end; margin-top: 0; }
}

.inline-cta { margin-top: 36px; display: grid; gap: 20px; align-items: center; }
.inline-cta-hook { font: 900 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--display); }
.inline-cta-text { margin-top: 6px; color: var(--ink-2); }
@media (min-width: 900px) { .inline-cta { grid-template-columns: minmax(0, 1fr) auto; margin-top: 48px; } }

/* ═══ DATENSCHUTZ (#trust) ═══ */
.tresor { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, #1D5F22 0%, #144518 58%, #0F3613 100%); }
.tresor .eyebrow { color: #BFE5C1; }
.tresor .lead { color: rgba(255, 255, 255, 0.84); }
.tresor a { text-decoration: underline; text-underline-offset: 3px; }
.tresor-grid { display: grid; gap: 40px; }
.gestrichen { display: grid; gap: 0.04em; font: 900 clamp(2.3rem, 9vw, 4.4rem)/1.1 var(--display); letter-spacing: -0.02em; }
.gestrichen span { position: relative; width: max-content; color: rgba(255, 255, 255, 0.42); }
.gestrichen span::after { content: ''; position: absolute; left: -5%; right: -5%; top: 52%; height: 0.15em; border-radius: 99px; background: var(--marker); transform: rotate(-2.4deg); }
.gestrichen span:nth-child(even)::after { transform: rotate(1.8deg); }
.gestrichen .bleibt { margin-top: 0.18em; color: #fff; }
.gestrichen .bleibt::after { display: none; }
.tresor-fakten { display: grid; gap: 26px; margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.tresor-fakten h3 { font-size: 1.15rem; }
.tresor-fakten p { margin-top: 8px; font-size: 0.97rem; color: rgba(255, 255, 255, 0.8); }
@media (min-width: 760px) { .tresor-fakten { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
@media (min-width: 900px) { .tresor-grid { grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; } .tresor .sec-head { margin-bottom: 0; } }

/* ═══ BEWERTUNGEN (#bewertungen) — Karteikarten ═══ */
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: 36px; }
.stimmen-kopf .sec-head { margin-bottom: 0; }
.note-gross { display: flex; align-items: center; gap: 14px; }
.note-gross b { font: 900 3.6rem/1 var(--display); letter-spacing: -0.03em; }
.note-gross span { font-size: 0.9rem; line-height: 1.35; color: var(--ink-2); }
.note-gross .sterne { display: block; font-size: 1.15rem; color: #B77A00; }
.karten { display: flex; gap: 14px; margin: 0 -20px; padding: 8px 20px 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.karten::-webkit-scrollbar { display: none; }
.karte {
  flex: 0 0 86%; scroll-snap-align: center; align-self: flex-start;
  padding: 0 22px 20px; background: #fff; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(23, 35, 26, 0.1), 0 22px 40px -30px rgba(23, 35, 26, 0.6);
}
.karte-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; border-bottom: 2px solid #E2574C; font-size: 0.9rem; color: var(--ink-2); }
.karte-kopf strong { color: var(--ink); }
.karte-kopf .sterne { margin-left: auto; font-size: 0.85rem; }
.karte-initial { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c, var(--green)); color: #fff; font: 800 0.9rem var(--display); }
.karte-zitat { margin-top: 18px; font-size: 1.14rem; font-weight: 700; line-height: 1.45; }
.karte-mehr { margin-top: 16px; }
.karte-mehr summary { display: inline-block; cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.karte-mehr summary::-webkit-details-marker { display: none; }
.karte-mehr[open] summary { color: var(--ink-3); }
.karte-mehr p { margin-top: 12px; font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }
.karten-hinweis { font-size: 0.88rem; color: var(--ink-3); }
@media (min-width: 760px) {
  .karten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; overflow: visible; }
  .karte { grid-column: span 2; }
  .karte:nth-child(-n+2) { grid-column: span 3; }
  .karte:nth-child(odd) { transform: rotate(-0.5deg); }
  .karte:nth-child(even) { transform: rotate(0.45deg); }
  .karten-hinweis { display: none; }
}

/* ═══ GRÜNDERBRIEF + KURZFILM (#founder) ═══ */
.brief-sec { background: #fff; }
.brief-grid { display: grid; gap: 36px; }
.brief-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.brief-foto { width: 124px; flex-shrink: 0; padding: 6px 6px 20px; background: #fff; box-shadow: 0 14px 26px -16px rgba(23, 35, 26, 0.6), 0 0 0 1px rgba(23, 35, 26, 0.07); transform: rotate(-4deg); }
.brief-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.brief-lede { margin-top: 22px; font-size: 1.2rem; line-height: 1.55; font-weight: 600; color: var(--ink); max-width: 46ch; }
.brief { max-width: 64ch; }
.brief p { margin-top: 1.1em; font-size: 1.05rem; line-height: 1.75; color: var(--ink-2); }
.brief strong { color: var(--ink); }
.brief blockquote { margin: 1.5em 0; padding: 2px 0 2px 20px; border-left: 6px solid var(--marker); font-size: 1.32rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.brief .founder-list { margin-top: 1.1em; display: grid; gap: 6px; font-size: 1.05rem; color: var(--ink-2); }
.brief .founder-list span { font-weight: 800; color: var(--green-700); }
.brief .founder-closing { font-weight: 600; color: var(--ink); }
.brief-mehr { margin-top: 1.4em; }
.brief-mehr > summary { display: inline-flex; cursor: pointer; padding: 11px 18px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; list-style: none; }
.brief-mehr > summary::-webkit-details-marker { display: none; }
.brief-mehr > summary:hover { background: var(--ink); color: #fff; }
.brief-mehr[open] > summary { display: none; }
.founder-video { margin-top: 2em; }
.founder-video-intro { font-size: 0.98rem !important; }
.founder-video-lite { position: relative; display: block; width: 100%; max-width: 480px; margin-top: 14px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #000; }
.founder-video-lite.is-loaded { aspect-ratio: 16 / 9; }
.founder-video-thumb { width: 100%; height: 100%; object-fit: cover; }
.founder-video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.founder-video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.founder-video-fallback { font-size: 0.86rem !important; color: var(--ink-3) !important; }
.founder-video-fallback a { text-decoration: underline; }
.brief-gruss { margin-top: 30px; }
.founder-sign-name { font: 900 1.5rem var(--display); }
.founder-sign-role { font-size: 0.92rem; color: var(--ink-3); }
.founder-ig-card { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--paper); transition: background 0.15s; }
.founder-ig-card:hover { background: var(--paper-2); }
.founder-ig-ic { position: relative; width: 52px; height: 52px; flex-shrink: 0; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #F09433, #DC2743 55%, #BC1888); }
.founder-ig-ic img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.founder-ig-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #C13584; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.founder-ig-txt { display: flex; flex-direction: column; line-height: 1.35; font-size: 0.9rem; color: var(--ink-2); }
.founder-ig-txt strong { font-size: 0.98rem; color: var(--ink); }
.founder-ig-go { font-weight: 700; }

.film { max-width: 250px; margin: 0 auto; }
.film-rahmen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #0B0E0C; box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.75); }
.film-rahmen video { width: 100%; height: 100%; object-fit: cover; }
.film figcaption { margin-top: 14px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-3); }
.film figcaption strong { display: block; color: var(--ink); font-size: 1rem; }
@media (min-width: 900px) {
  .brief-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 72px; align-items: start; }
  .film { position: sticky; top: 100px; max-width: 320px; margin: 0; }
  .brief-text { order: 2; }
}

/* ═══ FÜR WEN (#fuer-wen) ═══ */
.wer { background: var(--paper-2); }
.wer-liste { display: grid; border-top: 2px solid var(--ink); }
.wer-liste li { padding: 22px 0 24px; border-bottom: 1px solid #CFC8B9; }
.wer-liste p { margin-top: 8px; font-size: 0.97rem; color: var(--ink-2); }
.laender { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; font-size: 0.92rem; color: var(--ink-2); }
.laender b { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; }
.laender a { margin-left: 6px; font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .wer-liste { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1040px) { .wer-liste { grid-template-columns: repeat(4, 1fr); } .wer-liste li { border-bottom: 0; padding-bottom: 0; } }

/* ═══ PREISE (#preise) — Zeitstrahl ═══ */
.weg { display: grid; counter-reset: w; }
.weg > li { position: relative; padding: 0 0 34px 58px; counter-increment: w; }
.weg > li::before {
  content: counter(w); position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 900 1.1rem var(--display);
}
.weg > li::after { content: ''; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 12px); }
.weg > li:last-child { padding-bottom: 0; }
.weg > li:last-child::after { display: none; }
.weg-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--green-tint); color: var(--green-900); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.weg-tag.danach { background: var(--marker); color: #4A3B00; }
.weg h3 { margin-top: 10px; font-weight: 900; font-size: 1.5rem; }
.weg h3 + p { margin-top: 8px; color: var(--ink-2); max-width: 40ch; }
.tarife { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 959px) { .tarife { margin-left: -58px; } } /* Handy: volle Breite statt eingerückt */
.tarif { position: relative; padding: 18px 16px 16px; background: #fff; border-radius: 18px; border: 2px solid transparent; box-shadow: 0 20px 36px -28px rgba(23, 35, 26, 0.6); }
.tarif-top { border-color: var(--green); }
.tarif-flag { position: absolute; top: -12px; left: 14px; padding: 3px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.tarif-name { font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.tarif-preis { margin-top: 2px; font: 900 2.1rem/1.1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.tarif-preis span { font: 800 1.15rem var(--lesen); margin-left: 2px; }
.tarif-info { margin-top: 6px; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.preis-fuss { display: grid; gap: 28px; margin-top: 44px; padding-top: 32px; border-top: 2px solid var(--ink); }
.preis-inhalt { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.preis-inhalt li { position: relative; padding-left: 28px; }
.preis-inhalt li::before { content: ''; position: absolute; left: 0; top: 0.16em; width: 20px; height: 20px; border-radius: 6px; background: var(--green-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231F6124' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat; }
.kleingedrucktes { max-width: 76ch; font-size: 0.88rem; line-height: 1.65; color: var(--ink-3); }
.kleingedrucktes p + p { margin-top: 8px; }
@media (min-width: 960px) {
  .weg { grid-template-columns: 1fr 1fr 1.3fr; gap: 36px; }
  .weg > li { padding: 62px 0 0; }
  .weg > li::after { left: 50px; right: -30px; top: 19px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); }
  .preis-fuss { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .kleingedrucktes { grid-column: 1 / -1; }
}

/* ═══ SCHULEN (#schullizenz) ═══ */
.schulen { display: grid; gap: 22px; align-items: center; padding: 30px 24px; border: 2px solid var(--ink); border-radius: 24px; }
.schulen p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) { .schulen { grid-template-columns: minmax(0, 1fr) auto; padding: 40px 44px; } }

/* ═══ STECKBRIEF (#steckbrief) — Fakten als Formularzeilen ═══ */
.steckbrief-sec { background: var(--paper-2); }
.steckbrief { display: grid; border-top: 2px solid var(--ink); }
.steckbrief > div { display: grid; gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid #CFC8B9; }
.steckbrief dt { font: 800 0.82rem var(--lesen); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); padding-top: 3px; }
.steckbrief dd { max-width: 72ch; line-height: 1.6; }
.steckbrief dd a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) { .steckbrief > div { grid-template-columns: 170px minmax(0, 1fr); } }
@media (max-width: 759px) { .steckbrief > div { padding: 12px 0; } .steckbrief dd { font-size: 0.97rem; line-height: 1.5; } }

/* ═══ FAQ (#faq) ═══ */
.faq-sec { background: #fff; }
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 72px; } .faq-kopf { position: sticky; top: 100px; align-self: start; } }

/* ═══ SCHLUSS (#download) ═══ */
.final-cta { position: relative; overflow: hidden; padding: 84px 20px; text-align: center; color: #fff; background: linear-gradient(140deg, #2F8033 0%, #1A5A1F 52%, #144518 100%); }
.final-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.final-cta-inner { position: relative; max-width: 780px; margin: 0 auto; }
.final-cta mark { color: var(--ink); }
.final-cta .eyebrow { color: #CFEBD0; }
.final-cta p { margin-top: 20px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.88); }
.final-cta .store-buttons { justify-content: center; margin-top: 30px; }
.final-cta .store-btn { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.14); }
.final-cta-note { margin-top: 20px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
@media (min-width: 900px) { .final-cta { padding: 120px 32px; } }