/* Gemeinsame Gestaltung. Dieselben Farben und Schriften wie die Landingpage,
   damit Verkaufsseite und Anwendung als ein Produkt wirken. */

:root {
  --papier:#FCFCFA; --flaeche:#FFFFFF; --tinte:#15191D; --grau:#666E78;
  --linie:#DFE1DD; --lineatur:#6B8299; --band:#FBF1D8; --silbe:#B3271E;
  --gut:#2E7D5B; --warn:#B87514;
  --h:'Andika','Comic Sans MS',sans-serif;
  --b:'Source Sans 3',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:#14171B; --flaeche:#1B1F24; --tinte:#ECEAE4; --grau:#9AA2AC;
    --linie:#2B3036; --lineatur:#8AA3BA; --band:#332C1A; --silbe:#E9776A;
    --gut:#4FB287; --warn:#D9A047;
  }
}
:root[data-theme="dark"] {
  --papier:#14171B; --flaeche:#1B1F24; --tinte:#ECEAE4; --grau:#9AA2AC;
  --linie:#2B3036; --lineatur:#8AA3BA; --band:#332C1A; --silbe:#E9776A;
  --gut:#4FB287; --warn:#D9A047;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--papier); color:var(--tinte);
       font-family:var(--b); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap { max-width:940px; margin:0 auto; padding:0 20px 80px; }
.schmal { max-width:460px; }

h1,h2,h3 { font-family:var(--h); margin:0; line-height:1.2; text-wrap:balance; }
h1 { font-size:27px; }
h2 { font-size:21px; margin-bottom:12px; }
h3 { font-size:17px; }
p { margin:0 0 12px; }
a { color:inherit; }

.kopf { display:flex; justify-content:space-between; align-items:center; gap:16px;
        padding:18px 0; border-bottom:1px solid var(--linie); margin-bottom:26px; flex-wrap:wrap; }
.marke { font-family:var(--h); font-weight:700; font-size:19px; display:flex; align-items:center; gap:9px; }
.marke i { width:24px; height:13px; position:relative; display:block; flex:none; }
.marke i b { position:absolute; left:0; right:0; display:block; }
.marke i b:nth-child(1){ top:0; border-top:1.5px solid var(--linie); }
.marke i b:nth-child(2){ top:4px; height:5px; background:var(--band); }
.marke i b:nth-child(3){ top:9px; border-top:2px solid var(--lineatur); }
.kopf-rechts { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--grau); }

nav.reiter { display:flex; gap:4px; border-bottom:1px solid var(--linie); margin-bottom:24px; flex-wrap:wrap; }
nav.reiter button { font:inherit; font-weight:600; background:none; border:0; border-bottom:2px solid transparent;
                    padding:10px 14px; cursor:pointer; color:var(--grau); }
nav.reiter button[aria-selected="true"] { color:var(--tinte); border-bottom-color:var(--tinte); }

.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:20px 22px; }
.karten { display:grid; gap:14px; }
.zwei { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

label { display:grid; gap:5px; font-size:14px; font-weight:600; margin-bottom:14px; }
input, select, textarea { font:inherit; font-weight:400; padding:11px 12px; color:inherit;
  background:var(--papier); border:1px solid var(--linie); border-radius:8px; width:100%; }
textarea { resize:vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline:2px solid var(--lineatur); outline-offset:2px; }

button.knopf { font:inherit; font-weight:600; padding:12px 18px; border:0; border-radius:8px;
               background:var(--tinte); color:var(--papier); cursor:pointer; }
button.knopf.leise { background:transparent; color:var(--tinte); border:1px solid var(--linie); }
button.knopf.klein { padding:7px 12px; font-size:14px; }
button[disabled] { opacity:.5; cursor:default; }

table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
     color:var(--grau); font-weight:700; padding:0 10px 8px 0; }
td { padding:9px 10px 9px 0; border-top:1px solid var(--linie); vertical-align:middle; }
code.code { font-family:ui-monospace,Menlo,monospace; font-size:15px; letter-spacing:.12em;
            background:var(--band); color:var(--tinte); padding:2px 7px; border-radius:5px; }

.chip { display:inline-block; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:20px;
        border:1px solid var(--linie); color:var(--grau); }
.chip.gut { color:var(--gut); border-color:var(--gut); }
.chip.warn { color:var(--warn); border-color:var(--warn); }
.chip.offen { color:var(--grau); }

.hinweis { font-size:14px; color:var(--grau); }
.fehler { color:var(--silbe); font-size:14.5px; }
.leer { color:var(--grau); font-size:15px; padding:22px 0; text-align:center; }

/* Lineatur zum Hineinschreiben, auch digital */
.lin { margin:2px 0 10px; }
.lin .z { position:relative; height:26px; }
.lin .z i { position:absolute; left:0; right:0; display:block; }
.lin .o { top:5px; border-top:1px solid var(--linie); }
.lin .bd { top:5px; height:9px; background:var(--band); }
.lin .g { top:14px; border-top:2px solid var(--lineatur); }
.lin .u { top:23px; border-top:1px solid var(--linie); }

/* Schülerseite: alles eine Stufe größer und ruhiger */
body.kind { font-size:18px; }
body.kind .wrap { max-width:720px; }
body.kind h1 { font-size:30px; }
body.kind input, body.kind textarea { font-size:18px; padding:13px 14px; }
body.kind button.knopf { padding:15px 22px; font-size:18px; }
.aufgabe { border-top:1px solid var(--linie); padding-top:18px; margin-top:18px; }
.aufgabe:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.anweisung { font-family:var(--h); font-weight:700; display:flex; gap:10px; align-items:baseline; margin-bottom:12px; }
.anweisung em { flex:none; width:24px; height:24px; border-radius:50%; background:var(--tinte); color:var(--papier);
                font-style:normal; font-size:13px; font-family:var(--b); display:flex; align-items:center; justify-content:center; }
.lesetext { font-family:var(--h); background:var(--papier); border-left:3px solid var(--linie);
            padding:14px 16px; margin-bottom:14px; }

@media (max-width:640px) { .zwei { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }