@font-face { font-family: 'Bricolage'; src: url('fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --papier: #FBFCFF;
  --karo: #E5EBF7;
  --tinte: #13203F;
  --grau: #56607A;
  --linie: #DCE3F0;
  --blau: #2747D4;
  --blau-dunkel: #1A33A8;
  --blau-hell: #EEF2FF;
  --gelb: #FFD84D;
  --weiss: #FFFFFF;
  --ma: #E8EDFF; --ma-t: #1D3BC4;
  --de: #E5F6EE; --de-t: #0B7A4B;
  --en: #FFF1E0; --en-t: #A0520A;
  --ks: #F3EAFE; --ks-t: #6B2FC2;
  --schrift: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --titel: 'Bricolage', 'Geist', system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background-color: var(--papier);
  /* Karopapier wie im Schulheft */
  background-image: linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--tinte);
  font: 400 17px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 6px; }

.breite { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(251, 252, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .breite { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; font: 700 21px/1 var(--titel); letter-spacing: -0.01em; }
.marke-zeichen { width: 32px; height: 32px; border-radius: 9px; background: var(--blau); display: grid; place-items: center; }
.marke-zeichen svg { width: 18px; height: 18px; }
.kopf nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.kopf nav a { color: var(--tinte); text-decoration: none; }
.kopf nav a:hover { color: var(--blau); }
@media (max-width: 760px) { .kopf nav a:not(.knopf) { display: none; } }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; font: 600 15px/1 var(--schrift); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.knopf-haupt { background: var(--blau); color: #fff !important; }
.knopf-haupt:hover { background: var(--blau-dunkel); }
.knopf-neben { background: var(--weiss); color: var(--tinte) !important; border-color: var(--linie); }
.knopf-neben:hover { border-color: var(--blau); }
.knopf-gross { min-height: 52px; padding: 0 22px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; }
.hero .breite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero h1 { font: 700 clamp(42px, 5.2vw, 70px)/1 var(--titel); letter-spacing: -0.035em; margin: 0 0 22px; text-wrap: balance; }
.hero .lead { font-size: 20px; color: var(--grau); max-width: 38ch; margin: 0 0 14px; }
.hero .von { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 15px; color: var(--tinte); }
.hero .von svg { width: 56px; height: 22px; flex: none; }
.hero .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .klein { margin-top: 18px; font-size: 14px; color: var(--grau); }
@media (max-width: 960px) { .hero .breite { grid-template-columns: 1fr; } .hero { padding-top: 40px; } }

/* App-Fenster (nachgebaut aus Lektoplan, Beispieldaten) */
.buehne { position: relative; padding-bottom: 40px; }
.fenster { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(19, 32, 63, 0.28), 0 2px 6px rgba(19, 32, 63, 0.06); overflow: hidden; }
.fenster-leiste { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #F4F6FB; border-bottom: 1px solid var(--linie); }
.fenster-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #D6DCE8; }
.app { display: grid; grid-template-columns: 112px 1fr; min-height: 340px; font-size: 11px; }
.app-seite { background: #F7F9FD; border-right: 1px solid var(--linie); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.app-seite b { font: 700 13px/1 var(--titel); margin: 0 0 10px 4px; }
.app-seite span { padding: 6px 8px; border-radius: 7px; color: var(--grau); }
.app-seite span.an { background: var(--blau-hell); color: var(--blau); font-weight: 600; }
.app-inhalt { padding: 14px 16px; }
.app-titel { font: 700 18px/1.1 var(--titel); margin: 2px 0 10px; letter-spacing: -0.01em; }
.app-klein { color: var(--grau); font-size: 10px; }
.woche { display: grid; grid-template-columns: 24px repeat(5, minmax(0, 1fr)); gap: 4px; }
.woche .tag { font-weight: 600; font-size: 10px; color: var(--grau); padding-bottom: 2px; }
.woche .nr { font-size: 10px; color: var(--grau); padding-top: 6px; }
.lek { border-radius: 7px; padding: 5px 6px; min-height: 38px; font-size: 10px; line-height: 1.25; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lek b { display: block; font-size: 10.5px; }
.lek.leer { background: #F5F7FB; }
.lek.ma { background: var(--ma); color: var(--ma-t); }
.lek.de { background: var(--de); color: var(--de-t); }
.lek.en { background: var(--en); color: var(--en-t); }
.lek.ks { background: var(--ks); color: var(--ks-t); }
.lek .pr { display: inline-block; margin-top: 2px; padding: 1px 5px; border-radius: 4px; background: #FFF4D6; color: #8A4306; font-size: 9px; font-weight: 600; }

.handy { position: absolute; left: -28px; bottom: 0; width: 168px; border-radius: 28px; background: var(--tinte); padding: 8px; box-shadow: 0 24px 48px -16px rgba(19, 32, 63, 0.45); }
.handy-schirm { background: var(--weiss); border-radius: 21px; padding: 18px 12px 14px; font-size: 11px; }
.handy-schirm .art { color: var(--grau); font-size: 9px; }
.handy-schirm .frage { font: 700 13px/1.2 var(--titel); margin: 4px 0 10px; }
.wahl { display: block; width: 100%; text-align: left; border: 1px solid var(--linie); background: #fff; border-radius: 10px; padding: 8px 9px; margin-bottom: 6px; font: 500 11px/1.2 var(--schrift); color: var(--tinte); }
.wahl.an { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
@media (max-width: 960px) { .handy { left: auto; right: 8px; } }
@media (max-width: 560px) { .app { grid-template-columns: 1fr; min-height: 0; } .app-seite { display: none; } .handy { width: 128px; right: -6px; bottom: -40px; } .lek { padding: 4px; font-size: 8.5px; min-height: 34px; } .lek b { font-size: 9px; } .buehne { padding-bottom: 70px; } }
.hero .breite > * { min-width: 0; }

/* ---------- Live-Umfrage (das Herzstück) ---------- */
.probier { padding: 56px 0; }
.probier-feld { background: var(--tinte); color: #E9EDF7; border-radius: 28px; padding: 44px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px 48px; align-items: center; }
.probier h2 { font: 700 clamp(30px, 3.6vw, 44px)/1.05 var(--titel); letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; }
.probier p { color: #B9C2D8; margin: 0 0 18px; }
.abstimmen-handy { background: #fff; border: 8px solid #2B3A66; border-radius: 30px; padding: 18px 14px; max-width: 320px; color: var(--tinte); }
.abstimmen-handy .art { font-size: 12px; color: var(--grau); }
.abstimmen-handy .frage { font: 700 17px/1.25 var(--titel); margin: 4px 0 12px; }
.abstimmen { display: grid; gap: 8px; }
.abstimmen button { text-align: left; border: 1px solid var(--linie); background: #fff; color: var(--tinte); border-radius: 12px; padding: 12px 14px; font: 500 15px/1.2 var(--schrift); cursor: pointer; }
.abstimmen button:hover { border-color: var(--blau); }
.abstimmen button[aria-pressed='true'] { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); font-weight: 600; }
.probier-text { grid-column: 1 / -1; max-width: 60ch; }
.punkt-gelb { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--gelb); margin: 0 2px; vertical-align: 0; }
.tafel { background: #0E1730; border: 1px solid #2A3866; border-radius: 20px; padding: 24px; }
.tafel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.tafel-kopf b { font: 700 20px/1.2 var(--titel); color: #fff; }
.tafel-kopf span { font-size: 14px; color: #9AA6C6; white-space: nowrap; }
.balken { margin-bottom: 14px; }
.balken-text { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; color: #DDE3F2; }
.balken-spur { height: 14px; border-radius: 7px; background: #1D2A50; overflow: hidden; }
.balken-wert { height: 100%; width: 0; border-radius: 7px; background: #6E86FF; transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.balken.deins .balken-wert { background: var(--gelb); }
.tafel-fuss { font-size: 13px; color: #8994B4; margin-top: 16px; }
@media (max-width: 860px) { .probier-feld { grid-template-columns: 1fr; padding: 28px 20px; } }

/* ---------- Ein Schultag ---------- */
.abschnitt { padding: 64px 0; }
.abschnitt > .breite > h2, .abschnitt h2.gross { font: 700 clamp(32px, 4vw, 52px)/1.04 var(--titel); letter-spacing: -0.025em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance; }
.abschnitt .einleitung { color: var(--grau); font-size: 19px; max-width: 52ch; margin: 0 0 40px; }
.tag-ablauf { display: grid; gap: 20px; }
.moment { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: 22px; padding: 28px; }
.zeit { font: 700 58px/0.9 var(--titel); letter-spacing: -0.03em; color: var(--blau); font-variant-numeric: tabular-nums; }
.zeit small { display: block; font: 500 14px/1.3 var(--schrift); color: var(--grau); letter-spacing: 0; margin-top: 8px; }
.moment h3 { font: 700 24px/1.15 var(--titel); margin: 0 0 8px; letter-spacing: -0.01em; }
.moment p { margin: 0; color: var(--grau); }
.moment ul { margin: 12px 0 0; padding-left: 18px; color: var(--grau); }
.moment li { margin: 3px 0; }
@media (max-width: 960px) { .moment { grid-template-columns: 1fr; gap: 16px; padding: 22px; } }

/* kleine nachgebaute Ansichten */
.mini { background: #F7F9FD; border: 1px solid var(--linie); border-radius: 16px; padding: 16px; font-size: 13px; }
.mini-titel { font: 700 15px/1.2 var(--titel); margin-bottom: 10px; }
.mini-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; }
.mini-zeile small { color: var(--grau); }
.mini-zeile .knopf-mini { border: 1px solid var(--linie); border-radius: 8px; padding: 4px 8px; font-size: 12px; background: #fff; }
.pille { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.pille.gelb { background: #FFF4D6; color: #8A4306; }
.pille.blau { background: var(--blau-hell); color: var(--blau); }
.tafel-mini { background: #FCFCFA; border: 1px solid var(--linie); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background-image: radial-gradient(#D9DFEA 1px, transparent 1px); background-size: 14px 14px; }
.widget { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px -10px rgba(19, 32, 63, 0.3); }
.widget small { color: var(--grau); font-size: 10px; font-weight: 600; }
.widget .timer { font: 700 34px/1 var(--titel); font-variant-numeric: tabular-nums; margin-top: 4px; }
.widget .name { font: 700 24px/1.1 var(--titel); margin-top: 6px; color: var(--blau); }
.widget.breit { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ampel { display: flex; gap: 6px; }
.ampel i { width: 18px; height: 18px; border-radius: 50%; background: #E5E9F2; }
.ampel i.an { background: #F5B731; }
.podest { display: flex; align-items: flex-end; justify-content: center; gap: 8px; background: #0E1730; border-radius: 16px; padding: 18px 16px 0; color: #fff; }
.podest div { width: 80px; text-align: center; font-size: 13px; }
.podest b { display: block; border-radius: 10px 10px 0 0; color: #13203F; font: 800 22px/1 var(--titel); padding-top: 10px; margin-top: 6px; }
.noten { width: 100%; border-collapse: collapse; font-size: 13px; }
.noten th { text-align: left; color: var(--grau); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
.noten td { padding: 7px 8px; border-bottom: 1px solid var(--linie); background: #fff; font-variant-numeric: tabular-nums; }
.noten td.schnitt { font-weight: 600; }

/* ---------- Was sonst drin ist ---------- */
.liste-funktionen { columns: 3 260px; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.liste-funktionen li { break-inside: avoid; padding: 14px 0; border-top: 1px solid var(--linie); }
.gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.gruppen h3 { font: 700 15px/1.3 var(--schrift); color: var(--blau); margin: 0 0 6px; }
.liste-funktionen { columns: auto; }
.liste-funktionen b { display: block; font: 700 18px/1.2 var(--titel); margin-bottom: 4px; }
.liste-funktionen span { color: #3F4A66; font-size: 15px; }
@media (max-width: 860px) { .gruppen { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Datenschutz ---------- */
.schutz { background: var(--weiss); color: var(--tinte); border: 1px solid var(--linie); border-radius: 28px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; overflow: hidden; }
.stempel { display: block; margin-top: 26px; width: 120px; height: 120px; transform: rotate(-12deg); }
@media (max-width: 860px) { .stempel { width: 96px; height: 96px; } }
.schutz h2 { color: var(--tinte); max-width: 14ch; font: 700 clamp(30px, 3.6vw, 46px)/1.04 var(--titel); letter-spacing: -0.02em; margin: 0 0 14px; }
.schutz p { margin: 0; color: var(--grau); font-size: 18px; }
.schutz ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.schutz ul { align-self: end; }
.schutz li { padding-left: 34px; position: relative; color: #34405E; }
.schutz li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (max-width: 860px) { .schutz { grid-template-columns: 1fr; padding: 30px 22px; } }

/* ---------- Preise ---------- */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preis { background: var(--weiss); border: 1px solid var(--linie); border-radius: 22px; padding: 28px; }
.preis.pro { border: 2px solid var(--blau); }
.preis h3 { font: 700 24px/1.1 var(--titel); margin: 0 0 4px; }
.preis .betrag { font: 700 40px/1 var(--titel); letter-spacing: -0.02em; margin: 12px 0 4px; }
.preis .betrag small { display: block; font: 500 15px/1.4 var(--schrift); color: var(--grau); letter-spacing: 0; margin-top: 6px; }
.preis ul { margin: 16px 0 0; padding-left: 18px; color: var(--grau); }
.preis li { margin: 5px 0; }
.preis-hinweis { margin-top: 18px; color: var(--grau); font-size: 15px; }
@media (max-width: 960px) { .preise { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- Ideen ---------- */
.ideen { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.neu-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.neu-liste li { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; font-size: 15px; color: #34405E; }
.neu-liste b { color: var(--tinte); }
.neu-titel { font: 600 15px/1.3 var(--schrift); color: var(--blau); margin: 0 0 10px; }
.formular { background: var(--weiss); border: 1px solid var(--linie); border-radius: 22px; padding: 26px; display: grid; gap: 14px; }
.formular label { font-weight: 600; font-size: 15px; display: block; }
.formular label > input, .formular label > textarea { margin-top: 6px; display: block; }
section[id] { scroll-margin-top: 80px; }
.formular label span { font-weight: 400; color: var(--grau); }
.formular textarea, .formular input { width: 100%; border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; font: 400 16px/1.45 var(--schrift); color: var(--tinte); background: #FBFCFF; }
.formular textarea { min-height: 140px; resize: vertical; }
.formular textarea:focus, .formular input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { font-size: 15px; min-height: 22px; margin: 0; }
.meldung.gut { color: #0B7A4B; font-weight: 600; }
.meldung.fehler { color: #B42318; font-weight: 600; }
@media (max-width: 860px) { .ideen { grid-template-columns: 1fr; } }

/* ---------- Fragen ---------- */
.fragen { max-width: 820px; }
.fragen details { border-top: 1px solid var(--linie); padding: 4px 0; }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; font: 600 19px/1.3 var(--titel); padding: 16px 36px 16px 0; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 26px/1 var(--schrift); color: var(--blau); transition: transform 0.2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen p { margin: 0 0 16px; color: var(--grau); max-width: 64ch; }

/* ---------- Fuss ---------- */
.fuss { margin-top: 40px; border-top: 1px solid var(--linie); background: rgba(251, 252, 255, 0.92); }
.fuss .breite { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 28px 0; font-size: 15px; color: var(--grau); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 560px) { .fuss .breite { flex-direction: column; } .fuss nav { flex-direction: column; gap: 10px; } }
.fuss a { color: var(--grau); }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.text { background: var(--weiss); border: 1px solid var(--linie); border-radius: 22px; padding: clamp(22px, 4vw, 48px); margin: 40px auto; max-width: 820px; }
.text h1 { font: 700 clamp(34px, 5vw, 52px)/1.05 var(--titel); letter-spacing: -0.025em; margin: 0 0 8px; }
.text h2 { font: 700 22px/1.2 var(--titel); margin: 32px 0 8px; }
.text p, .text li { color: #34405E; max-width: 68ch; }
.text .stand { color: var(--grau); margin: 0 0 24px; }
.podest .p1 { background: #FCD34D; height: 92px; }
.podest .p2 { background: #CBD5E1; height: 62px; }
.podest .p3 { background: #FDBA74; height: 44px; }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .zwei { grid-template-columns: 1fr; } }
.geraete { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.geraete legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; padding: 0; }
.formular .geraete label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; background: #FBFCFF; cursor: pointer; }
.geraete label:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.geraete input { width: 18px; height: 18px; accent-color: var(--blau); margin: 0; }