/* Aurelia im Mohana-Look wie FFK (Tokens aus /srv/mohana/projekte/pruef-seite/static/marke.css übernommen): Blau
   dominiert (Cobalt, Ocean, Sky), Kopf als Verlauf wie Licht durch Wasser mit Wellen, Posterama für die Begrüßung,
   Poppins für Text, Amber nur für die eine Hauptaktion (Briefing abspielen). Werte nur aus den Tokens. Hell und dunkel
   folgen dem System; der dunkle Block steht zweimal (System und fest gewählt) und muss gleich bleiben. */

@font-face { font-family: "Poppins"; src: url("/static/schriften/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/schriften/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/schriften/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Posterama"; src: url("/static/schriften/Posterama-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --so: env(safe-area-inset-top, 0px); --su: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);

  --schrift: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Posterama", "Poppins", var(--schrift);
  --sg-12: 12px; --sg-13: 13px; --sg-14: 14px; --sg-16: 16px; --sg-18: 18px; --sg-20: 20px; --sg-24: 24px; --sg-30: 30px; --sg-36: 36px;

  --abst-2: 2px; --abst-4: 4px; --abst-8: 8px; --abst-12: 12px; --abst-16: 16px;
  --abst-20: 20px; --abst-24: 24px; --abst-32: 32px; --abst-48: 48px; --abst-64: 64px;

  --rund-klein: 6px; --rund-mittel: 8px; --rund: 12px; --rund-flaeche: 16px; --rund-gross: 20px; --rund-voll: 999px;
  --tipp: 44px; --feld-h: 48px;

  --cobalt: #012B9A; --ocean: #1360DC; --sky: #26B4FA; --rim: #04DBCC; --amber: #FDA002; --navy: #0B1B45;

  --app: oklch(95.4% .013 262);
  --grund: oklch(99.7% .002 262);
  --flaeche: oklch(97.5% .007 262);
  --flaeche-2: oklch(95.2% .012 262);
  --hover: oklch(96.3% .01 262);
  --linie: oklch(92.6% .013 262);
  --linie-stark: oklch(86.5% .02 262);
  --text: oklch(23% .075 266);
  --text-2: oklch(41% .06 266);
  --text-3: oklch(49% .05 266);
  --tinte: oklch(23% .075 266); --tinte-text: #ffffff;

  --akzent: var(--ocean); --akzent-text: #1360DC; --akzent-g: #e6eefc;
  --haupt: var(--amber); --haupt-hover: #f09500; --haupt-text: var(--navy);
  --offen-g: #fff3dc; --offen-t: #845200; --offen-p: var(--amber);
  --passt-g: #dcf9f6; --passt-t: #00675f; --passt-p: #04b8ab;
  --nochmal-g: #fbe8e2; --nochmal-t: #a3432b; --nochmal-p: #e2704f;
  --neu-g: #e3f4fe; --neu-t: #0b5f8a; --neu-p: var(--sky);
  --grau-g: #ebeff7; --grau-t: #4f5b6b;

  --haar: .5px;
  --schatten-klein: 0 1px 2px rgb(11 27 69 / 6%), 0 0 0 var(--haar) var(--linie-stark);
  --schatten-leiste: 0 -1px 0 var(--linie), 0 -8px 24px rgb(11 27 69 / 8%);
  --fokus: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent);

  --band-a: #012b9a; --band-b: #1360dc;
  --band-glanz: rgb(255 255 255 / 16%); --band-licht: rgb(38 180 250 / 22%);
  --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.1' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.24' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
  --band-welle-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 47C260 31 520 63 800 47S1100 35 1200 47V64H0Z'/%3E%3C/svg%3E");
  --band-text: #ffffff; --band-text-2: rgb(255 255 255 / 86%);
  --band-verlauf: radial-gradient(120% 90% at 92% -20%, var(--band-glanz), transparent 62%),
    radial-gradient(70% 80% at 0% 120%, var(--band-licht), transparent 70%),
    linear-gradient(160deg, var(--band-a) 0%, var(--band-b) 100%);
  --wellen-h: 32px;

  --dauer-1: 120ms; --dauer-2: 180ms; --dauer-3: 260ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --leiste-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app: oklch(12.5% .028 266); --grund: oklch(17% .034 266); --flaeche: oklch(20.5% .04 266); --flaeche-2: oklch(24% .045 266);
    --hover: oklch(22.5% .042 266);
    --linie: rgb(255 255 255 / 8%); --linie-stark: rgb(255 255 255 / 16%);
    --text: oklch(96.5% .008 260); --text-2: oklch(84% .025 260); --text-3: oklch(74% .035 260);
    --tinte: oklch(95% .01 260); --tinte-text: var(--navy);
    --akzent: oklch(80% .115 236); --akzent-text: oklch(80% .115 236); --akzent-g: oklch(30% .07 252);
    --haupt: var(--amber); --haupt-hover: #ffb12e; --haupt-text: var(--navy);
    --offen-g: #3a2a05; --offen-t: #fcd38a; --offen-p: var(--amber);
    --passt-g: #083a37; --passt-t: #8cf0e8; --passt-p: var(--rim);
    --nochmal-g: #3a2620; --nochmal-t: #f3b4a0; --nochmal-p: #ec8664;
    --neu-g: #10324a; --neu-t: #9ed8fb; --neu-p: var(--sky);
    --grau-g: #222b40; --grau-t: #b4bfcc;
    --schatten-klein: 0 1px 2px #0000004d, 0 0 0 var(--haar) var(--linie-stark);
    --schatten-leiste: 0 -1px 0 var(--linie), 0 -8px 24px #00000066;
    --band-a: #001a63; --band-b: #0c45bd;
    --band-glanz: rgb(255 255 255 / 10%); --band-licht: rgb(38 180 250 / 16%);
    --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.16' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
    --band-text-2: rgb(255 255 255 / 84%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: oklch(12.5% .028 266); --grund: oklch(17% .034 266); --flaeche: oklch(20.5% .04 266); --flaeche-2: oklch(24% .045 266);
  --hover: oklch(22.5% .042 266);
  --linie: rgb(255 255 255 / 8%); --linie-stark: rgb(255 255 255 / 16%);
  --text: oklch(96.5% .008 260); --text-2: oklch(84% .025 260); --text-3: oklch(74% .035 260);
  --tinte: oklch(95% .01 260); --tinte-text: var(--navy);
  --akzent: oklch(80% .115 236); --akzent-text: oklch(80% .115 236); --akzent-g: oklch(30% .07 252);
  --haupt: var(--amber); --haupt-hover: #ffb12e; --haupt-text: var(--navy);
  --offen-g: #3a2a05; --offen-t: #fcd38a; --offen-p: var(--amber);
  --passt-g: #083a37; --passt-t: #8cf0e8; --passt-p: var(--rim);
  --nochmal-g: #3a2620; --nochmal-t: #f3b4a0; --nochmal-p: #ec8664;
  --neu-g: #10324a; --neu-t: #9ed8fb; --neu-p: var(--sky);
  --grau-g: #222b40; --grau-t: #b4bfcc;
  --schatten-klein: 0 1px 2px #0000004d, 0 0 0 var(--haar) var(--linie-stark);
  --schatten-leiste: 0 -1px 0 var(--linie), 0 -8px 24px #00000066;
  --band-a: #001a63; --band-b: #0c45bd;
  --band-glanz: rgb(255 255 255 / 10%); --band-licht: rgb(38 180 250 / 16%);
  --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.16' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
  --band-text-2: rgb(255 255 255 / 84%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-1: 0ms; --dauer-2: 0ms; --dauer-3: 0ms; }
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--leiste-h) + var(--su) + var(--abst-16)); }
body { margin: 0; background: var(--app); color: var(--text); font: var(--sg-16)/1.5 var(--schrift); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent-text); }
:focus { outline: none; }
:focus-visible { box-shadow: var(--fokus); border-radius: var(--rund-klein); }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zahl { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abst-8); min-height: var(--tipp); padding: 0 var(--abst-16);
         border: 0; border-radius: var(--rund); background: var(--flaeche-2); color: var(--text); font-size: var(--sg-14); font-weight: 500;
         text-decoration: none; transition: transform var(--dauer-1) var(--kurve), background-color var(--dauer-2) var(--kurve); }
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .5; cursor: default; transform: none; }
.knopf-haupt { min-height: var(--feld-h); padding: 0 var(--abst-24); border-radius: var(--rund-voll); background: var(--haupt); color: var(--haupt-text);
               font-size: var(--sg-16); font-weight: 600; }
.knopf-link { background: var(--akzent-g); color: var(--akzent-text); }
.knopf-leise { background: none; color: var(--akzent-text); padding: 0 var(--abst-12); }
@media (hover: hover) {
  .knopf:hover { background: var(--hover); }
  .knopf-haupt:hover { background: var(--haupt-hover); }
  .knopf-link:hover { background: var(--akzent-g); text-decoration: underline; }
  .knopf-leise:hover { background: var(--akzent-g); }
}

/* ---------- Kopf: Verlauf mit Wellen ---------- */
.kopf { position: relative; color: var(--band-text); text-align: center;
        padding: calc(var(--so) + var(--abst-24)) calc(var(--sr) + var(--abst-16)) calc(var(--wellen-h) + var(--abst-24)) calc(var(--sl) + var(--abst-16));
        background: var(--band-wellen) center bottom / 100% var(--wellen-h) no-repeat, var(--band-verlauf); }
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--wellen-h) + 1px); background: var(--app); pointer-events: none;
               -webkit-mask: var(--band-welle-3) center bottom / 100% 100% no-repeat; mask: var(--band-welle-3) center bottom / 100% 100% no-repeat; }
.kopf-innen { max-width: 1120px; margin: 0 auto; display: grid; gap: var(--abst-4); justify-items: center; }
.datum { font-size: var(--sg-14); font-weight: 500; color: var(--band-text-2); }
.gruss { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--sg-30); line-height: 1.15; letter-spacing: .01em; }
.abmelden { position: absolute; top: calc(var(--so) + var(--abst-8)); right: calc(var(--sr) + var(--abst-8)); z-index: 1; color: var(--band-text-2); background: none; }
@media (hover: hover) { .abmelden:hover { background: rgb(255 255 255 / 12%); color: var(--band-text); } }
.abmelden:focus-visible { box-shadow: 0 0 0 2px var(--band-text); }

/* ---------- Hinweise (Beispiel, offline, Fehler) ---------- */
.hinweis { display: flex; gap: var(--abst-12); align-items: flex-start; padding: var(--abst-12) var(--abst-16); border-radius: var(--rund);
           font-size: var(--sg-14); line-height: 1.45; }
.hinweis .ic { margin-top: 1px; }
.hinweis-info { background: var(--neu-g); color: var(--neu-t); }
.hinweis-warn { background: var(--offen-g); color: var(--offen-t); }
.hinweis-fehler { background: var(--nochmal-g); color: var(--nochmal-t); }
.hinweis .knopf { margin-left: auto; flex: none; }
.hinweise { display: grid; gap: var(--abst-8); }

/* ---------- Aufbau ---------- */
/* Der Inhalt erscheint erst, wenn das Skript ihn gezeichnet hat (kein Springen beim Laden); ohne Skript nach 2 s. */
html:not(.bereit) #inhalt { visibility: hidden; animation: aufdecken 0s 2s forwards; }
@keyframes aufdecken { to { visibility: visible; } }
main { max-width: 1120px; margin: 0 auto; padding: var(--abst-8) calc(var(--sr) + var(--abst-16)) calc(var(--leiste-h) + var(--su) + var(--abst-32)) calc(var(--sl) + var(--abst-16));
       display: grid; gap: var(--abst-24); }
.mitte { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--abst-16); min-width: 0; }
.bloecke { display: grid; gap: var(--abst-16); min-width: 0; }

/* ---------- Aurelias Kreis ---------- */
.kreis { position: relative; width: 208px; height: 208px; padding: 0; border: 0; border-radius: 50%; background: none;
         transition: transform var(--dauer-2) var(--kurve); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.kreis:active { transform: scale(.97); }
.kreis:focus-visible { border-radius: 50%; }
.kreis canvas { display: block; width: 100%; height: 100%; }
.zustand { min-height: calc(2 * 1.45em); max-width: 32ch; text-align: center; font-size: var(--sg-14); line-height: 1.45; color: var(--text-2); }
.zustand.hoeren { color: var(--akzent-text); font-weight: 500; }

/* ---------- Gespräch ---------- */
.gespraech { width: 100%; display: grid; gap: var(--abst-12); }
.gespraech-liste { display: grid; gap: var(--abst-12); }
.gespraech-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abst-8); }
.gespraech-kopf h2 { font-size: var(--sg-16); color: var(--text-2); font-weight: 600; }
.wechsel { display: grid; gap: var(--abst-8); padding: var(--abst-16); border-radius: var(--rund-flaeche); background: var(--grund); box-shadow: var(--schatten-klein); }
.frage { font-size: var(--sg-14); color: var(--text-2); overflow-wrap: anywhere; }
.frage b { font-weight: 600; color: var(--text); }
.antwort { overflow-wrap: anywhere; }
.antwort.denkt { color: var(--text-3); }
.antwort.fehler { color: var(--nochmal-t); }
.wechsel-fuss { display: flex; flex-wrap: wrap; gap: var(--abst-4); margin: 0 calc(-1 * var(--abst-12)) calc(-1 * var(--abst-8)); }

/* ---------- Eingabeleiste: am Handy unten in der Daumenzone, deckend ---------- */
.eingabe { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: var(--abst-8); align-items: flex-end;
           padding: var(--abst-12) calc(var(--sr) + var(--abst-16)) calc(var(--su) + var(--abst-12)) calc(var(--sl) + var(--abst-16));
           background: var(--grund); box-shadow: var(--schatten-leiste); }
.eingabe textarea { flex: 1; min-width: 0; min-height: var(--feld-h); max-height: 160px; resize: none; margin: 0; padding: 12px var(--abst-16);
                    border: 0; border-radius: var(--rund-gross); background: var(--flaeche-2); font-size: var(--sg-16); line-height: 1.5; }
.eingabe textarea::placeholder { color: var(--text-3); opacity: 1; }
.eingabe textarea:focus-visible { box-shadow: 0 0 0 2px var(--akzent); border-radius: var(--rund-gross); }
.senden { width: var(--feld-h); height: var(--feld-h); padding: 0; border-radius: 50%; background: var(--akzent); color: #ffffff; flex: none; }
.senden .ic { width: 22px; height: 22px; }
@media (hover: hover) { .senden:hover { background: var(--akzent); filter: brightness(1.08); } }
:root[data-theme="dark"] .senden, :root[data-theme="dark"] .senden:hover { color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .senden { color: var(--navy); } }

/* ---------- Blöcke ---------- */
.block { padding: var(--abst-20) var(--abst-20) var(--abst-24); border-radius: var(--rund-flaeche); background: var(--grund); box-shadow: var(--schatten-klein); min-width: 0; }
.block > h2, .block summary h2 { font-size: var(--sg-20); line-height: 1.3; }
.block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abst-8); margin-bottom: var(--abst-12); }
.block-kopf .anzahl { font-size: var(--sg-14); color: var(--text-3); }
.leer { color: var(--text-2); font-size: var(--sg-14); }
.eintraege > li + li { margin-top: var(--abst-16); padding-top: var(--abst-16); border-top: 1px solid var(--linie); }
.eintrag { display: grid; gap: var(--abst-8); min-width: 0; }
.eintrag-titel { font-size: var(--sg-16); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.eintrag-warum { font-size: var(--sg-14); color: var(--text-2); overflow-wrap: anywhere; }
.empfehlung { padding: var(--abst-8) var(--abst-12); border-radius: var(--rund-mittel); background: var(--akzent-g); font-size: var(--sg-14); overflow-wrap: anywhere; }
.empfehlung b { font-weight: 600; color: var(--akzent-text); }
.eintrag-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-8) var(--abst-12); }
.quelle { font-size: var(--sg-12); color: var(--text-3); overflow-wrap: anywhere; }

/* Als Nächstes: genau drei, nummeriert */
.drei { counter-reset: nr; }
.drei > li { display: grid; grid-template-columns: 32px 1fr; gap: var(--abst-12); counter-increment: nr; }
.drei > li::before { content: counter(nr); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
                     background: var(--akzent-g); color: var(--akzent-text); font-weight: 600; font-size: var(--sg-14); font-variant-numeric: tabular-nums; }

/* Erledigt: zugeklappt, Anzahl sichtbar */
.block-erledigt { padding: 0; }
.block-erledigt summary { display: flex; align-items: center; gap: var(--abst-12); min-height: 64px; padding: var(--abst-12) var(--abst-20); cursor: pointer; list-style: none; border-radius: var(--rund-flaeche); }
.block-erledigt summary::-webkit-details-marker { display: none; }
.block-erledigt summary .anzahl { min-width: 28px; height: 28px; padding: 0 var(--abst-8); display: inline-grid; place-items: center; border-radius: var(--rund-voll);
                                  background: var(--passt-g); color: var(--passt-t); font-size: var(--sg-14); font-weight: 600; font-variant-numeric: tabular-nums; }
.block-erledigt summary .ic { margin-left: auto; color: var(--text-3); transition: transform var(--dauer-2) var(--kurve); }
.block-erledigt[open] summary .ic { transform: rotate(180deg); }
.erledigt-liste { padding: 0 var(--abst-20) var(--abst-20); }
.erledigt-liste li { display: grid; grid-template-columns: 20px 1fr; gap: var(--abst-12); align-items: start; padding: var(--abst-8) 0; }
.erledigt-liste li + li { border-top: 1px solid var(--linie); }
.erledigt-liste .ic { color: var(--passt-p); margin-top: 2px; }
.erledigt-liste a { display: flex; align-items: center; min-height: var(--tipp); overflow-wrap: anywhere; }
.erledigt-liste li:has(a) { padding: var(--abst-2) 0; }

/* Kennzahlen */
.text-block { color: var(--text-2); font-size: var(--sg-14); margin-bottom: var(--abst-16); overflow-wrap: anywhere; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--abst-16) var(--abst-24); margin: 0; }
.kennzahl { display: grid; gap: var(--abst-2); align-content: start; min-width: 0; }
.kennzahl dt { font-size: var(--sg-13); color: var(--text-2); overflow-wrap: anywhere; }
.kennzahl dd { margin: 0; font-size: var(--sg-24); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kennzahl .vergleich { font-size: var(--sg-13); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Chancen und Probleme */
.zwei { display: grid; gap: var(--abst-20); }
.zwei h3 { display: flex; align-items: center; gap: var(--abst-8); font-size: var(--sg-14); font-weight: 600; margin-bottom: var(--abst-8); }
.zwei .chance h3 { color: var(--passt-t); }
.zwei .problem h3 { color: var(--nochmal-t); }
.punkte li { padding: var(--abst-8) 0; overflow-wrap: anywhere; }
.punkte li + li { border-top: 1px solid var(--linie); }

/* Fuß: Automationen und Erstellung */
.fuss { display: grid; gap: var(--abst-8); padding: var(--abst-8) var(--abst-4) 0; font-size: var(--sg-13); color: var(--text-2); }
.fuss .zeile { display: flex; gap: var(--abst-8); align-items: flex-start; overflow-wrap: anywhere; }
.fuss .ic { width: 16px; height: 16px; margin-top: 2px; }
.fuss .ok .ic { color: var(--passt-p); }
.fuss .hakt { color: var(--nochmal-t); }
.fuss ul { display: grid; gap: var(--abst-4); }

/* Platzhalter beim ersten Laden (echte Form, kein Kreisel) */
.platzhalter { height: 120px; border-radius: var(--rund-flaeche); background: var(--flaeche-2); }

/* ---------- Laptop ---------- */
@media (min-width: 600px) {
  .gruss { font-size: var(--sg-36); }
  .kopf { --wellen-h: 48px; padding-top: calc(var(--so) + var(--abst-32)); }
  .block { padding: var(--abst-24) var(--abst-24) var(--abst-32); }
  .block.block-erledigt { padding: 0; }
  .block-erledigt summary { padding: var(--abst-12) var(--abst-24); }
  .erledigt-liste { padding: 0 var(--abst-24) var(--abst-24); }
  .zwei { grid-template-columns: 1fr 1fr; gap: var(--abst-24); }
}
@media (min-width: 1024px) {
  main { grid-template-columns: 380px minmax(0, 1fr); gap: var(--abst-32); align-items: start; padding-bottom: var(--abst-64); }
  .mitte { position: sticky; top: var(--abst-24); }
  .kreis { width: 240px; height: 240px; }
  .hinweise { grid-column: 1 / -1; }
  .eingabe { position: static; width: 100%; padding: 0; background: none; box-shadow: none; }
  .eingabe textarea { background: var(--grund); box-shadow: var(--schatten-klein); }
  .mitte { max-height: calc(100dvh - var(--abst-48)); overflow-y: auto; padding: var(--abst-4); }
  html { scroll-padding-bottom: 0; }
}