/* Lernzettel — im Stil der Premium-Templates (Dom 04.09.2026: „im Stil unserer premium
   templates für die videos … gleichungen müssen auch schön dargestellt werden").

   Vorlage ist das Matura-Template (z. B. Pilze_a1): maroon Kopfband mit Titel und
   Untertitel, rechts die Marke; goldene Kapitälchen als Abschnitts-Labels; cremefarbene
   Kästen mit Goldrand für das, was man sich merken soll; nummerierte Maroon-Kreise mit
   Verbindungslinie für die Schritte; der „ZUM MERKEN"-Kasten mit Glühbirne.
   Farben sind aus dem SVG gemessen, nicht geraten:
     Maroon #6B1A1A / #8A2727 · Gold #C99A3B · Goldrand #E8D4A8 · Creme #FDF6E8
     Akzent-Rot #B3402F · Linien #ECDFDB.
   Schrift: Klara Bolt für den Titel — wie im Template. Dom 04.09.2026: „die ganze
   schriftart gehört mir, ich brauche also keine lizenz dafür. bau sie ein." Die Datei
   ist die TTF aus den Templates, per fontTools zu WOFF2 (16 KB, 143 Glyphen). Alles
   andere bleibt Titillium Web, die App-Schrift. */
@font-face{font-family:'Klara Bolt';font-style:normal;font-weight:400;font-display:swap;
  src:url(/app/assets/klara-bolt.woff2) format('woff2')}

.lz{background:#fff;border:1px solid #ecdfdb;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(40,30,25,.04),0 8px 24px rgba(40,30,25,.08);
  font-family:'Titillium Web',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#2a2422;text-align:left;white-space:normal}

/* Kopfband (Dom 04.09.2026, zweite Runde): Datum links, Logo gross und MITTIG, Herkunft
   rechts — darunter der Titel in Klara Bolt. */
.lz-kopf{background:linear-gradient(120deg,#6b1a1a,#8a2727);color:#fff;padding:14px 18px 15px}
.lz-kopfzeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.lz-datum{font-size:12.5px;font-weight:600;color:#f1dfb0;justify-self:start}
.lz-logo{height:50px;width:auto;justify-self:center;display:block}
.lz-marke{justify-self:end;text-align:right;font-size:11.5px;color:#f1dfb0;line-height:1.3}
.lz-marke b{display:block;color:#fff;font-size:13px;font-weight:700}
/* Die Farbe steht HIER ausdruecklich: base.css faerbt jedes h3 maroon (h1,h2,h3{color}), und
   eine direkte Regel schlaegt jede Vererbung — ohne diese Zeile stand der Titel maroon auf
   maroon (Dom-Fund 04.09.2026). Klara hat nur Regular, deshalb kein Kunst-Fett. */
.lz-titel{margin:14px 0 0;font-size:27px;line-height:1.15;letter-spacing:.01em;color:#fff;
  font-family:'Klara Bolt','Titillium Web',sans-serif;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.22)}

/* Abschnitte */
.lz-abschnitt{padding:12px 18px 4px}
.lz-label{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a2727}
.lz-label.gold{color:#8a6420}
.lz-label.rot{color:#b3402f}
.lz p{margin:0 0 8px;font-size:14px;line-height:1.55}
.lz p b,.lz li b{color:#6b1a1a} /* nur im Fliesstext — die Marke im Kopfband bleibt weiss */
/* Formeln im Fliesstext (Dom 06.09.2026, an 14 Zetteln gemessen: „k und d nach unten
   verschoben", „das t=0 ist nach unten verrutscht", „K(x) überall ein bisschen zu weit
   unten"): `vertical-align:middle` schob JEDES <math> — auch ein einzelnes k — unter die
   Textzeile, weil es die Mitte der Formelbox auf die Mitte der Kleinbuchstaben legt.
   MathML richtet sich von selbst an der Grundlinie aus (Brüche und Wurzeln liegen dann
   auf der mathematischen Achse). `line-height:normal`: die geerbte Zeilenhöhe 2 aus dem
   Formelkasten machte die Wurzel doppelt so tief wie ihren Inhalt („die Wurzel ist zu
   lang nach unten"). Der kleine Abstand zwischen einem Vorzeichen und einem Bruch
   (−b/2a): „das minus ist zu nah am b/2a". */
.lz math{font-size:1.06em;vertical-align:baseline;line-height:normal}
.lz math mo+mfrac{margin-left:.14em}

/* Zum Merken — der Kasten aus dem Template, 1:1 in der Farbgebung */
.lz-merken{margin:8px 18px 10px;background:#fdf6e8;border:1px solid #e8d4a8;border-radius:12px;
  padding:12px 14px 10px;display:flex;gap:12px;align-items:flex-start}
.lz-icon{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid #c99a3b;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.lz-merken .lz-label{margin-bottom:5px}
.lz-merken ul{margin:0;padding:0;list-style:none}
.lz-merken li{position:relative;padding-left:14px;margin:4px 0;font-size:14px;line-height:1.5}
.lz-merken li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#c99a3b}

/* SKIZZEN (06.09.2026, Dom: „richtig fesch, auch mit graphen/bildern usw wo sinnvoll").
   Ein <figure> mit <img> aus /api/lernzettel/skizze (zettel.js). Im Fliesstext-Abschnitt
   steht die Skizze unter dem Text, mittig; neben einem Merk-Block bekommt der Kasten eine
   dritte Spalte (`mit-skizze`) — Text links, Skizze rechts, wie im Schulheft. Auf schmalen
   Schirmen rutscht sie unter die Liste. Die SVGs sind auf 640 Einheiten Breite gezeichnet;
   max-height haelt eine hohe Skizze im Zaum, ohne sie zu beschneiden. */
.lz-skizze{margin:6px 0 8px;text-align:center}
.lz-skizze img{display:block;max-width:100%;height:auto;max-height:320px;margin:0 auto;object-fit:contain}
.lz-skizze figcaption{margin-top:4px;font-size:12px;line-height:1.4;color:#6b635d}
.lz-merken.mit-skizze{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(150px,36%);align-items:start}
.lz-merken.mit-skizze .lz-skizze{margin:2px 0 0;min-width:0}
.lz-merken.mit-skizze .lz-skizze img{max-height:240px}
@media (max-width:600px){
  .lz-merken.mit-skizze{grid-template-columns:38px minmax(0,1fr)}
  .lz-merken.mit-skizze .lz-skizze{grid-column:2;margin-top:6px}
}

/* Formeln — nummerierte Schritte mit Verbindungslinie, jede Formel im Goldrand-Kasten */
/* Formel-Liste als Zeitstrahl (Dom-Korrektur 05.09.2026 am gedruckten Zettel: „die kreise
   sollten ja genau in der mitte der höhe jedes info balkens sein und dann die linien").
   RASTER statt Flex: Beschriftung oben rechts, darunter Nummer und Kasten NEBENEINANDER in
   derselben Zeile — `align-self:center` setzt den Kreis damit immer exakt auf die halbe
   KASTENhöhe, auch bei zweizeiligem Bruch oder zweizeiliger Beschriftung. Vorher schob ein
   fester `margin-top:16px` den Kreis auf gut Glück; das stimmte nur im einfachsten Fall.
   Die Linie läuft jetzt DURCH die ganze Liste statt in Stückchen zwischen den Einträgen —
   so kann sie gar nicht mehr verrutschen. Der weiße Ring am Kreis (erster box-shadow)
   schneidet sie sauber aus; die Karte ist weiß, deshalb passt #fff. */
.lz-formeln{position:relative;list-style:none;margin:2px 0 4px;padding:0}
.lz-formeln::before{content:"";position:absolute;left:12px;top:18px;bottom:26px;width:2px;background:#e8d4a8}
.lz-formeln li{display:grid;grid-template-columns:26px 1fr;column-gap:12px;padding:0 0 12px}
.lz-cap{grid-column:2;grid-row:1;margin:0 0 4px;font-size:12.5px;color:#6b635d}
.lz-nr{grid-column:1;grid-row:2;align-self:center;position:relative;z-index:1;
  width:26px;height:26px;border-radius:50%;background:#8a2727;color:#fff;font-weight:700;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px #fff,0 2px 6px rgba(107,26,26,.25)}
.lz-box{grid-column:2;grid-row:2;min-width:0;
  background:#fdf6e8;border:1.5px solid #c99a3b;border-radius:10px;padding:8px 14px;overflow-x:auto}
/* Ohne Beschriftung rücken Nummer und Kasten in die erste Zeile — sonst bliebe oben eine
   leere Rasterzeile stehen und der Eintrag hinge in der Luft. */
.lz-formeln li.ohne-cap>.lz-nr,.lz-formeln li.ohne-cap>.lz-box{grid-row:1}
.lz-box .m-blk{display:block;margin:0;line-height:2;text-align:center}
.lz-box math{font-size:1.2em}
.lz-tex{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#6b1a1a;white-space:pre-wrap}

/* Typische Falle — Akzent-Rot, links markiert */
.lz-falle{margin:2px 18px 10px;border-left:3px solid #b3402f;background:#fbf1ef;border-radius:0 10px 10px 0;padding:8px 12px 2px}
.lz-falle .lz-label{margin-bottom:4px}
/* Abgebrochener Zettel (05.09.2026): steht GANZ OBEN und wird MITGEDRUCKT — die Warnung
   nuetzt nur dort, wo der Schueler den Zettel wirklich liest. Ton wie die Falle, nur
   ruhiger: es ist unser Fehler, kein Fehler des Schuelers. */
.lz-unvollstaendig{margin:10px 18px 0;border-left:3px solid #b3402f;background:#fbf1ef;
  border-radius:0 10px 10px 0;padding:8px 12px;font-size:13px;color:#7a2b20}

/* Geheimtipp (05.09.2026) — warm und golden wie „Zum Merken", aber ohne Kasten: er soll
   wie ein Nachsatz wirken, nicht wie ein weiterer Merkstoff-Block. */
.lz-tipp{padding:6px 18px 10px;margin-top:4px;display:flex;gap:12px;align-items:flex-start}
.lz-tipp .lz-icon{border-color:#e8d4a8;font-size:16px}
.lz-tipp p{margin:2px 0 0}

/* Nächster Schritt */
.lz-schluss{padding:6px 18px 16px;border-top:1px solid #ecdfdb;margin-top:4px;display:flex;gap:12px;align-items:flex-start}
.lz-schluss .lz-icon{border-color:#e8d4a8;font-size:16px}
.lz-schluss p{margin:2px 0 0}

/* Im Chat: die Karte ersetzt die Sprechblase, statt in ihr zu stecken */
.msg.bot.zettel{max-width:100%;padding:0;background:transparent;border:0;animation:rise .3s ease both}
.zettel-kopf{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#8a5560}
.zettel-kopf span{font-weight:400;text-transform:none;letter-spacing:0;color:#a8848c}
/* Drucken in der Kopfzeile (09.09.2026): der Knopf unter der Karte wurde im schmalen
   Chat-Fenster nicht gefunden. Dieser hier steht dort, wo der Blick beim Erscheinen des
   Zettels landet — und die ganze Zeile wird dafür zur Flex-Zeile. */
.zettel-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zettel-kopf span{flex:1;min-width:0}
.lz-druck-kopf{flex:none;border:1px solid #e8d4a8;background:#fff;color:#6b1a1a;border-radius:999px;
  padding:4px 11px;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;
  cursor:pointer;line-height:1.3}
.lz-druck-kopf:hover{background:#fdf6e8;border-color:#c99a3b}
.lz-druck-kopf:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}
/* Beim Drucken verschwindet der Knopf über `body.lz-druck` (Block ganz unten) — KEIN
   zweiter @media-print-Block hier: die Druck-Wache liest den ERSTEN im File und hätte
   dann meinen statt des echten geprüft (im eigenen Testlauf gefangen). */

/* Der Knopf über dem Eingabefeld — versteckt, bis es etwas zusammenzufassen gibt */
.zettel-leiste{margin:0 0 6px;display:flex;justify-content:flex-end;padding:0 14px}
.zettel-leiste[hidden],#zettelKnopf[hidden]{display:none}
#zettelKnopf{border:1px solid #e8d4a8;background:#fdf6e8;color:#6b1a1a;border-radius:999px;padding:5px 13px;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s}
#zettelKnopf:hover:not(:disabled){background:#f7ead0;border-color:#c99a3b}
#zettelKnopf:disabled{opacity:.6;cursor:default}
#zettelKnopf:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}

/* Chips je abgehaktem Thema (Klick-Weg, 04.09.2026) */
.zettel-themen-wrap{margin:0 0 12px}
.zettel-themen-wrap[hidden]{display:none}
.zettel-themen-h{margin:0 0 8px;font-size:13px;color:#6b635d}
.zettel-themen{display:flex;flex-wrap:wrap;gap:8px}
.zettel-themen .chip:disabled{opacity:.6;cursor:default}
/* Der Lernzettel-Knopf am Themenkopf der Lernreise. Er steht NEBEN dem Themennamen (siehe
   zettel.js) — dort gehört er hin, und dort nimmt ihm der flexible Fortschrittsbalken den
   Platz nicht weg. `white-space:nowrap` hält „📝 Lernzettel" in einer Zeile; auf schmalen
   Schirmen bleibt nur das Zeichen (Regel unten). */
/* Im Raster des Themenkopfs sitzt der Knopf in seiner eigenen `auto`-Spalte (app-plan.css
   `.thema-head.mit-zettel`) — `justify-self:start` hält ihn so breit wie sein Inhalt, sonst
   würde die Zelle ihn strecken (Dom-Fund 05.09.2026: „sieht broken aus"). */
.thema-zettel{justify-self:start;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  border:1px solid #e8d4a8;background:#fdf6e8;color:#6b1a1a;border-radius:999px;
  padding:3px 10px 3px 8px;font-size:11.5px;font-weight:700;line-height:1.3;cursor:pointer;
  font-family:inherit;margin:0;box-shadow:0 1px 2px rgba(107,26,26,.06)}
.thema-zettel .tz-ico{font-size:12px;line-height:1}
.thema-zettel:hover{background:#f7ead0;border-color:#c99a3b}
.thema-zettel:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}
/* Der Balken darf schrumpfen, aber nicht verschwinden — sonst sieht man den Fortschritt
   nicht mehr, und der war vor dem Knopf da. */
.thema-head .th-track{min-width:36px}
/* 640 wie der Raster-Breakpoint in app-plan.css: dort wird der Balken fest 56 px, der
   Knopf schrumpft passend aufs Zeichen. */
@media (max-width:640px){
  .thema-zettel .tz-txt{display:none}
  .thema-zettel{padding:3px 7px}
}
.zettel-hinweis{margin:8px 0 0;font-size:13px;color:#8a5560}

/* Liste in der Notizen-Ansicht: zugeklappt Titel + Datum, aufgeklappt die ganze Karte */
.zettel-h{font-size:14px;margin:0 0 8px}
.zettel-liste{display:flex;flex-direction:column;gap:8px}
.zettel-eintrag{border:1px solid #ecdfdb;border-radius:12px;background:#fff;padding:8px 12px}
.zettel-eintrag summary{cursor:pointer;font-weight:700;font-size:13.5px;color:#6b1a1a}
.zettel-eintrag summary:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}
.zettel-eintrag .lz{margin-top:10px;box-shadow:none}
/* Mappe verwalten (05.09.2026): zwei Gruppen, Kopfzeile je Eintrag mit Griff, Titel, Datum
   und Knöpfen (Umbenennen, Auf/Ab, Löschen). Knöpfe ≥ 32 px — Daumen, nicht nur Maus. */
.zettel-gruppe{margin:4px 0 10px}
.zettel-gruppe-titel{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a5560}
.zettel-gruppe .zettel-eintrag{margin-bottom:8px}
.ze-kopf{display:flex;align-items:center;gap:8px;min-height:32px;list-style:none}
.ze-kopf::-webkit-details-marker{display:none}
.ze-griff{flex:none;color:#c9b3b8;font-size:14px;letter-spacing:-2px;cursor:grab;user-select:none}
.ze-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ze-datum{flex:none;font-weight:400;font-size:12px;color:#8a6a70}
.ze-akt{flex:none;display:inline-flex;gap:2px;margin-left:4px}
.ze-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:none;
  color:#6b1a1a;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ze-btn:hover{background:#f7ead0;border-color:#e8d4a8}
.ze-btn:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}
.ze-btn:disabled{opacity:.3;cursor:default;background:none;border-color:transparent}
.ze-weg{color:#8a5560}
.ze-ja{background:#b3402f;color:#fff;font-weight:700}
.ze-ja:hover{background:#8f3123}
.ze-frage{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7a2b20;white-space:nowrap}
.ze-edit{flex:1;min-width:0;font:inherit;font-weight:700;color:#6b1a1a;border:1px solid #c99a3b;border-radius:8px;padding:4px 8px;background:#fffdf8}
.zettel-eintrag.ze-zieht{opacity:.45}
.zettel-eintrag.ze-ueber{outline:2px dashed #c99a3b;outline-offset:2px}
@media (max-width:560px){ .ze-datum{display:none} .ze-griff{display:none} }
.leer-hint{color:#8a6a70;font-size:13px;margin:4px 0 0}

/* Rückfall für Zettel aus der ersten Fassung (nur Markdown, keine Struktur) */
.zettel-alt h4{margin:8px 0 4px;font-size:14.5px}
.zettel-alt ul{margin:4px 0 8px;padding-left:20px}

@media (max-width:600px){
  .lz-kopf{padding:12px 14px 13px}
  .lz-logo{height:36px}
  .lz-titel{font-size:21px;margin-top:10px}
  .lz-abschnitt{padding:10px 14px 2px}
  .lz-merken,.lz-falle{margin-left:14px;margin-right:14px}
  .lz-schluss{padding:6px 14px 14px}
}
@media (prefers-reduced-motion: reduce){ .msg.bot.zettel{animation:none} }

/* Aktionen unter der Karte (im Druck unsichtbar) */
.lz-aktionen{display:flex;justify-content:flex-end;gap:8px;padding:6px 18px 12px}
.lz-druck-knopf{border:1px solid #e8d4a8;background:#fff;color:#6b1a1a;border-radius:999px;padding:5px 12px;
  font-size:12.5px;font-weight:700;cursor:pointer}
.lz-druck-knopf:hover{background:#fdf6e8;border-color:#c99a3b}
.lz-druck-knopf:focus-visible{outline:3px solid #6b1a1a;outline-offset:2px}
/* DRUCKEN (Dom 04.09.2026: „da sieht man dann immer unser Logo drauf").
   Gedruckt wird NUR die eine Karte — das Logo steht seit der zweiten Runde ohnehin im
   Kopfband, ein eigener Druckkopf ist nicht mehr noetig.

   ZWEITE RUNDE (Dom: „10 Seiten, die erste hat den Zettel, die weiteren sind leer"): die
   erste Fassung machte den Rest der Seite nur UNSICHTBAR (visibility:hidden). Unsichtbar
   ist nicht weg — der Rest blieb im Fluss und zog neun leere Seiten hinter sich her.
   Jetzt: alles, was nicht die Karte oder ein Vorfahre auf ihrem Pfad zum body ist, wird
   aus dem Fluss GENOMMEN (display:none). Die Vorfahren bekommen von zettel.js die Klasse
   lz-druck-pfad und werden flach gelegt (kein Grid, kein sticky, kein overflow, kein
   Rahmen), damit nur die Karte uebrig bleibt — so lang, wie sie eben ist.
   print-color-adjust: ohne das druckt Chrome das Kopfband weiss. */
@media print{
  @page{margin:14mm}
  body.lz-druck *:not(.lz-druck-pfad):not(.lz-drucken):not(.lz-drucken *){display:none!important}
  body.lz-druck{margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
  body.lz-druck .lz-druck-pfad{display:block!important;position:static!important;overflow:visible!important;
    height:auto!important;max-height:none!important;min-height:0!important;width:auto!important;max-width:none!important;
    margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;
    transform:none!important;grid-template-columns:none!important}
  body.lz-druck .lz-drucken{max-width:none;box-shadow:none;border:0;border-radius:0;margin:0}
  body.lz-druck .lz-aktionen{display:none!important}
  /* Derselbe Grund für den Knopf in der Kopfzeile (09.09.2026): er gehört auf den
     Bildschirm, nicht aufs Blatt. Die Kopfzeile selbst wird ohnehin nicht mitgedruckt. */
  body.lz-druck .lz-druck-kopf{display:none!important}
  /* Bedienhinweise gehören auf den Bildschirm, nicht aufs Papier (Dom 05.09.2026):
     „Zum Ausdrucken: Knopf Drucken oben am Zettel" stand mit im Ausdruck. Gesetzt wird
     die Klasse in zettel.js, wenn der Zettel `naechsterNurSchirm` trägt. */
  body.lz-druck .lz-nur-schirm{display:none!important}
  .lz,.lz *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lz-kopf{border-radius:12px 12px 0 0}
  .lz-formeln li,.lz-merken,.lz-falle,.lz-skizze{break-inside:avoid}
}