/* ===========================================================================
   DER EINE ZEICHNER EINER THEMENSEITE - das Aussehen (v2.606.0)
   ===========================================================================
   Gehoert zu templates/teile/thema-inhalt.html und wird von BEIDEN Seiten
   geladen, die eine Themenseite zeigen:
     templates/fach_thema.html   die oeffentliche Seite (dort zusaetzlich
                                 fach-thema.css fuer Kopf, Weg und Fuss)
     templates/fach.html         der Arbeitsplatz der Lehrkraft

   ⛔ CLAUDE.md: "EINE THEMENSEITE HAT EINEN ZEICHNER. NIE ZWEI." Bis v2.605.0
   standen diese Regeln zweimal da - einmal im <style>-Block von fach.html,
   einmal in fach-thema.css - und sie liefen auseinander. Wer hier etwas
   aendert, aendert es fuer beide Bildschirme. Genau so ist es gemeint.

   KEINE FESTE FARBE IN DIESER DATEI. Sie ist neu und faellt unter Regel 2 des
   Waechters (qa/unit/test_design_system.py): jeder Farbwert kommt aus
   static/css/design-tokens.css. Wer einen Ton braucht, den es dort nicht
   gibt, traegt ihn ins Woerterbuch ein - nicht hierher.
   =========================================================================== */

/* ---- Kopf der Themenseite ------------------------------------------------
   FRUEHER EIN PASTELLKASTEN im Ton des Teilgebiets (`.hero` in fach.html).
   Der Ton kam per style="background:…" aus fach_pages.TEILGEBIETE, also aus
   69 Farben, die das Woerterbuch nicht kennt. Ersetzt durch die ruhige
   Flaeche des Systems; das Teilgebiet steht als Marke darunter. */
.ti-kopf{padding:0 0 var(--s-2);}
.ti-titel{margin:0 0 var(--s-3);font-size:var(--fs-2xl);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;color:var(--ink);}
.ti-marken{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3);}
.ti-marke{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px 11px;font-size:var(--fs-2xs);
  font-weight:600;color:var(--brand);background:var(--brand-soft);}
.ti-marke-still{color:var(--muted);background:var(--surface-subtle);}
/* Die Leitfragen sind die Frage, auf die der Text darunter antwortet -
   deshalb oben und optisch abgesetzt, nicht als weiterer Absatz. */
.ti-fragen{margin:0;padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 8px);
  list-style:disc;background:var(--brand-soft);border-radius:var(--r-card);}
.ti-fragen li{margin:4px 0;font-size:var(--fs-md);line-height:1.5;color:var(--ink);}

/* ---- Ein Abschnitt ------------------------------------------------------- */
.ti-sect{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-5);margin-top:var(--s-4);
  box-shadow:var(--shadow);}
.ti-sect>h2{margin:0 0 var(--s-3);font-size:var(--fs-lg);font-weight:700;
  letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:var(--ink);}
/* ZWEI SORTEN SYMBOL, EINE GROESSE. Oeffentlich kommen sie als fertiges
   <svg class="ti-ic"> aus teile/thema-icons.html; im Arbeitsplatz ersetzt
   lucide.createIcons() ein <i data-lucide="…"> durch ein <svg>, das die
   Klasse NICHT traegt. Beide Selektoren stehen deshalb nebeneinander -
   sonst ist dasselbe Symbol auf den beiden Bildschirmen verschieden gross. */
.ti-sect>h2 .ti-ic,.ti-sect>h2 [data-lucide],.ti-sect>h2>svg{
  width:18px;height:18px;flex:none;color:var(--brand);}
/* DIE SEITE IST BREIT, DER ABSATZ NICHT. `.ft-seite` darf 1100 px sein
   (Kartenraster, Simulation) - eine Textzeile ueber 1100 px ist unlesbar,
   das Auge findet den Zeilenanfang nicht wieder. Deshalb deckelt der
   FLIESSTEXT sich selbst; Raster und Buehne daneben tun es nicht.
   84ch statt 72ch seit v2.610.0 (Anweisung Murat: „bu bloklari biraz daha
   genisletebiliriz") - rund 800 px. Das ist die obere Kante dessen, was sich
   noch gut liest; darueber springt das Auge beim Zeilenwechsel. */
/* ⛔ DER TEXT FUELLT DEN KASTEN, UND ZWAR IM BLOCKSATZ (Anweisung Murat
   03.09.2026: „o kutuyu sagli sollu düzgün dolduralim düzenli görünsün sola
   dayali olmasin sürekli").

   Vorher deckelte sich der Fliesstext bei 84ch und liess rechts im Kasten
   einen Streifen leer - man sah den Rand, nicht den Text. Der Deckel ist
   weg; die Grenze ist jetzt der Kasten selbst.

   BLOCKSATZ NUR MIT TRENNUNG. `text-align:justify` ohne `hyphens` reisst im
   Deutschen Loecher in die Zeile - „Wahrscheinlichkeitsrechnung" passt nicht
   mehr und der Rest wird auseinandergezogen. Die Seite traegt `lang="de"`,
   also trennt der Browser richtig.

   NUR ABSAETZE. Aufzaehlungen bleiben linksbuendig - dort ist die Zeile kurz,
   und Blocksatz macht aus drei Woertern eine Zeile mit zwei Luecken
   („text alt altaysa madelerle anlatildiysa okay"). */
.ti-inhalt{font-size:var(--fs-md);line-height:1.7;color:var(--ink);
  hyphens:auto;}
.ti-inhalt p{text-align:justify;}
/* Ein einzelner Absatz unter einer Ueberschrift wird nicht gestreckt - bei
   einer Zeile sieht Blocksatz aus wie ein Fehler. */
.ti-inhalt p:only-child{text-align:left;}
.ti-inhalt img{max-width:100%;height:auto;border-radius:var(--r-control);}
.ti-inhalt h3{font-size:var(--fs-base);font-weight:700;margin:var(--s-5) 0 var(--s-2);}
.ti-inhalt h3:first-child{margin-top:0;}
.ti-inhalt p{margin:0 0 var(--s-3);}
.ti-inhalt ul,.ti-inhalt ol{margin:0 0 var(--s-3);padding-left:var(--s-5);}
.ti-inhalt li{margin-bottom:var(--s-2);}
.ti-inhalt b,.ti-inhalt strong{font-weight:700;}
/* ⛔ KEINE UNTERSTREICHUNG IM FLIESSTEXT (Anweisung Murat 03.09.2026:
   „linkli seylerin alti ciziliyor o olmasin"). Der Serlo-Text ist dicht
   verlinkt - jedes zweite Fachwort - und die Browser-Vorgabe malt darunter
   einen Strich. Auf dem Bildschirm sah der Absatz aus wie ein Formular.
   Erkennbar bleiben die Verweise über die Farbe; beim Zeigen kommt der
   Strich zurück, damit klar ist, was gerade unter dem Finger liegt. */
.ti-inhalt a{color:var(--brand);text-decoration:none;}
.ti-inhalt a:hover,.ti-inhalt a:focus-visible{text-decoration:underline;}
.ti-inhalt table{width:100%;border-collapse:collapse;margin:0 0 var(--s-4);
  font-size:var(--fs-sm);}
.ti-inhalt th,.ti-inhalt td{border:1px solid var(--line);
  padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top;}
.ti-inhalt th{background:var(--surface-subtle);font-weight:700;}
/* Breite Tabellen und Formeln scrollen IN SICH, nicht die Seite. Auf dem
   Telefon ist eine waagerecht scrollende Seite der schnellste Weg, jemanden
   zu verlieren. */
.ti-inhalt{overflow-x:auto;}

.ti-inarbeit{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:40px 20px;text-align:center;color:var(--muted);}
.ti-inarbeit .ti-ic,.ti-inarbeit [data-lucide],.ti-inarbeit>svg{width:32px;height:32px;color:var(--brand);}
.ti-inarbeit b{color:var(--ink);font-size:var(--fs-md);}

/* ---- Themen in diesem Bereich (Chips) ------------------------------------ */
.ti-chips{display:flex;gap:8px;flex-wrap:wrap;}
.ti-chips a{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;
  font-size:var(--fs-sm);font-weight:500;background:var(--card);
  color:var(--ink);transition:.13s;}
.ti-chips a:hover{border-color:var(--brand);color:var(--brand);}
.ti-chips a .ti-ic,.ti-chips a svg{width:14px;height:14px;flex:none;}
.ti-chips a.leer{color:var(--muted);}

/* ---- Medien -------------------------------------------------------------- */
.ti-medien{display:grid;gap:14px;}
.ti-medien img{max-width:100%;border-radius:var(--r-card);display:block;}
.ti-medien video{max-width:100%;border-radius:var(--r-card);display:block;
  background:var(--ink);}
/* ⛔ DIE HOEHE IST GEDECKELT, UND ZWAR UEBER DIE BREITE - BEFUND MURAT
   05.09.2026: „videolar cok cok büyük". Wortgleich mit dem Befund vom
   03.09.2026 zur Simulation, und die Loesung steht schon weiter unten bei
   `.ft-sim-buehne`: `max-height` waere der falsche Griff, es arbeitet
   gegen das Seitenverhaeltnis und staucht den Rahmen - der Player
   skaliert mit und bekaeme Balken. Ueber `max-width` bleibt 16:9 exakt.

   Der Deckel haengt an der BILDSCHIRMHOEHE (62vh), nicht an einer festen
   Pixelzahl: ein Video soll auf jedem Schirm neben den Text passen, nicht
   ihn verdraengen. Dieselbe Zahl wie bei der Simulation, damit auf einer
   Themenseite mit beidem nicht zwei verschiedene Groessen stehen.

   `aspect-ratio` statt `padding-top:56.25%`: die Prozentangabe rechnet
   gegen die Breite des ELTERNS, nicht gegen die eigene - zusammen mit
   `max-width` waere das Verhaeltnis am breiten Schirm falsch. */
.ti-frame{position:relative;width:100%;aspect-ratio:16/9;
  max-width:min(100%, calc(62vh * 16 / 9));margin-inline:auto;
  border-radius:var(--r-card);overflow:hidden;background:var(--ink);}
.ti-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ti-medien video{max-width:min(100%, calc(62vh * 16 / 9));margin-inline:auto;}
/* ---- Zwei-Klick fuer Drittland-Video (nur Lehrkraft) ---------------------
   ⛔ DER PLATZHALTER LAEDT NICHTS. Kein iframe, kein Vorschaubild vom
   Anbieter, kein preconnect - sonst waere der Zwei-Klick eine Geste und
   keine Massnahme. Erst der Klick baut die Verbindung auf.
   In der KINDERANSICHT gibt es diesen Kasten gar nicht; dort faellt das
   Medium serverseitig aus der Liste (docs/MEDIENVERTRAG.md §4.1). */
.ti-zweiklick{background:var(--surface-subtle);}
.ti-zk-knopf{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:transparent;cursor:pointer;font:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px;text-align:center;}
.ti-zk-knopf b{font-size:var(--fs-xs);}
.ti-zk-knopf span{font-size:var(--fs-2xs);color:var(--muted);max-width:46ch;
  line-height:1.45;}
.ti-zk-knopf svg{width:30px;height:30px;}
.ti-zk-knopf:hover b{text-decoration:underline;}
.ti-zk-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;}
/* Was NICHT gezeigt wird - nur die Lehrkraft sieht diesen Kasten. */
.ti-medien-sperre{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  padding:12px 14px;border-radius:var(--r-card);background:var(--surface-subtle);
  font-size:var(--fs-2xs);line-height:1.5;}
.ti-medien-sperre svg{width:18px;height:18px;flex:none;margin-top:2px;}
.ti-sperre-hinweis{color:var(--muted);margin-top:4px;}
.ti-cap{font-size:var(--fs-2xs);color:var(--muted);margin-top:6px;}
/* Die Quellenzeile. Sie steht KLEINER als die Beschriftung und ist
   trotzdem da - eine Nennung, die man abschalten kann, ist keine
   (docs/MEDIENVERTRAG.md §5). */
.ti-quelle{font-size:var(--fs-2xs);color:var(--muted);margin-top:3px;
  opacity:.85;word-break:break-word;}

/* ---- Die Simulation ------------------------------------------------------
   ⛔ DIE HOEHE IST GEDECKELT, UND ZWAR UEBER DIE BREITE (v2.605.0). Befund
   Murat 03.09.2026: „cok cok büyük ... ekrana sigmiyor." Das Verhaeltnis
   1024/618 ergab auf einem 1500 px breiten Arbeitsplatz 905 px Hoehe - man
   sah die Simulation und sonst nichts. `max-height` waere der falsche Griff:
   es arbeitet gegen `aspect-ratio` und staucht den Rahmen, PhET skaliert mit
   und bekaeme Balken. Ueber `max-width` bleibt das Verhaeltnis exakt.

   DIE KLASSEN HEISSEN `ft-sim-*` UND NICHT `ti-sim-*`. Sie sind aus
   fach-thema.css hierher gewandert, nicht umbenannt:
   qa/unit/test_fach_simulationen.py prueft die Lizenznennung an genau diesen
   Namen, und eine Umbenennung waere Testarbeit ohne Gegenwert. */
.ft-sim-hinweis{margin:0 0 var(--s-4);font-size:var(--fs-sm);
  color:var(--muted);line-height:1.5;}
.ft-sim-buehne{aspect-ratio:1024/618;width:100%;
  max-width:min(100%, calc(62vh * 1024 / 618));margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface-subtle);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-3);overflow:hidden;}
/* Kein Startknopf (Anweisung Murat 03.09.2026): geladen wird, sobald die
   Buehne in Sichtweite kommt. Diese Zeile steht nur so lange da. */
.ft-sim-warte{margin:0;font-size:var(--fs-sm);color:var(--muted);}
.ft-sim-last{margin:0;font-size:var(--fs-2xs);color:var(--muted);}
.ft-sim-laeuft{background:var(--card);}
/* ⛔ ABSOLUT POSITIONIERT (v2.607.1). Der Ladehinweis bleibt jetzt stehen,
   bis der Rahmen fertig ist - beide sind also kurz GLEICHZEITIG in der
   Buehne. Im Flex-Fluss teilten sie sich die Hoehe und der Rahmen waere
   gestaucht. So liegt er ueber dem Text und deckt ihn zu, sobald er da ist. */
.ft-sim-buehne{position:relative;}
.ft-sim-rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;
  display:block;background:var(--card);}
/* DIE NENNUNG IST PFLICHT, NICHT ZIERRAT. CC BY 4.0 verlangt sie "as close as
   possible to the point of use and human-readable" - leise darf sie sein, weg
   nicht. Wer sie ausblendet, verliert die Lizenz, unter der die Datei
   ueberhaupt bei uns liegen darf (fach_simulationen.py, Regel 2). */
.ft-sim-nennung{margin:var(--s-2) 0 0;font-size:var(--fs-2xs);
  color:var(--muted);line-height:1.5;}
.ft-sim-nennung a{color:inherit;}

/* ---- Material & Links (Vitrine) ------------------------------------------ */
.ti-mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;}
.ti-mat{display:flex;flex-direction:column;gap:var(--s-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:14px 16px;background:var(--card);
  box-shadow:var(--shadow);transition:transform .13s,box-shadow .13s,border-color .13s;}
.ti-mat:hover{transform:translateY(-2px);border-color:var(--brand);}
.ti-mat-schmal{max-width:340px;}
.ti-mat-kopf{display:flex;align-items:center;gap:10px;}
.ti-mat-kopf b{font-size:var(--fs-sm);letter-spacing:-.01em;}
.ti-mat-ic{width:38px;height:38px;flex:none;border-radius:var(--r-control);display:flex;
  align-items:center;justify-content:center;background:var(--brand-soft);
  color:var(--brand);}
.ti-mat-ic .ti-ic,.ti-mat-ic svg{width:19px;height:19px;}
/* Eine Datei sieht anders aus als ein Link - das ist die einzige Auskunft,
   die man vor dem Antippen braucht. */
.ti-mat-ic.datei{background:var(--amber-soft);color:var(--amber-ink);}
.ti-mat-text{font-size:var(--fs-2xs);color:var(--muted);line-height:1.5;flex:1;}
.ti-mat-quelle{font-size:var(--fs-3xs);color:var(--muted);}
.ti-mat-akt{display:flex;gap:8px;margin-top:2px;flex-wrap:wrap;}
.ti-mat-akt a{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-2xs);font-weight:600;color:var(--brand);
  border:1px solid var(--line);border-radius:var(--r-control);padding:6px 10px;transition:.12s;}
.ti-mat-akt a:hover{border-color:var(--brand);}
.ti-mat-akt a .ti-ic,.ti-mat-akt a svg{width:13px;height:13px;}

/* ---- Das Regal ----------------------------------------------------------- */
.ti-regal-hinweis{margin:0 0 var(--s-3);font-size:var(--fs-sm);color:var(--muted);
  line-height:1.5;}
/* EIN GITTER, EINE ZEILE JE MATERIAL - Begruendung in der Vorlage.
   `auto-fill` statt einer festen Spaltenzahl: dieselbe Regel traegt den
   breiten Arbeitsplatz (drei bis vier Spalten) und das Handy (eine). */
.ti-regal-gitter{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0 var(--s-5);}
.ti-regal-gitter>li{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--s-1) var(--s-3);min-width:0;
  padding:var(--s-2) 0;border-bottom:1px solid var(--line);}
.ti-regal-titel{font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  min-width:0;overflow-wrap:anywhere;}
a.ti-regal-titel:hover{color:var(--brand);}
.ti-regal-arten{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s-1) var(--s-3);}
.ti-regal-arten a{font-size:var(--fs-2xs);font-weight:600;color:var(--brand);}
.ti-regal-thema{font-size:var(--fs-3xs);color:var(--muted);}

/* DER DECKEL - neun Eintraege, dann „Alle anzeigen".
   Ohne eine Zeile JavaScript: das Kaestchen ist unsichtbar, aber
   tastaturbedienbar (`position:absolute` statt `display:none`), und die
   Beschriftung daneben schaltet es um. Verborgen wird nur die ANZEIGE -
   im HTML steht jeder Eintrag, sonst saehe ihn keine Suchmaschine. */
.ti-regal-schalter{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none;}
.ti-regal-schalter:not(:checked)+.ti-regal-gitter>li:nth-child(n+10){display:none;}
.ti-regal-mehr{display:inline-block;margin-top:var(--s-3);cursor:pointer;
  font-size:var(--fs-2xs);font-weight:600;color:var(--brand);}
.ti-regal-mehr:hover{text-decoration:underline;}
.ti-regal-schalter:focus-visible~.ti-regal-mehr{text-decoration:underline;}
.ti-regal-schalter:checked~.ti-regal-mehr .ti-regal-auf{display:none;}
.ti-regal-schalter:not(:checked)~.ti-regal-mehr .ti-regal-zu{display:none;}

/* ---- Verwandte Themen ---------------------------------------------------- */
.ti-vw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;}
.ti-vw{display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:var(--r-card);padding:12px 14px;background:var(--card);
  box-shadow:var(--shadow);transition:transform .13s,border-color .13s;}
.ti-vw:hover{transform:translateY(-2px);border-color:var(--brand);}
.ti-vw-ic{width:34px;height:34px;flex:none;border-radius:var(--r-control);display:flex;
  align-items:center;justify-content:center;background:var(--brand-soft);
  color:var(--brand);}
.ti-vw-ic .ti-ic,.ti-vw-ic svg{width:18px;height:18px;}
.ti-vw-tx{min-width:0;}
.ti-vw-tx b{display:block;font-size:var(--fs-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ti-vw-tx span{display:block;font-size:var(--fs-3xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- Bloecke aus dem Editor ----------------------------------------------
   `bx-*` heisst hier, was der Editor in fach.html schreibt - dieselben Namen
   wie in seiner Vorschau. Die BREITE steht als Klasse (`bw-mittel`) und nicht
   als style="--bw:42%": eine neue Datei darf kein style="" tragen. */
.bx-text{margin:0 0 var(--s-3);}
.bx-fig{margin:6px 0 16px;}
.bx-fig img{max-width:100%;border-radius:var(--r-card);display:block;}
.bx-fig video{max-width:100%;border-radius:var(--r-card);display:block;background:var(--ink);}
.bx-fig figcaption{font-size:var(--fs-2xs);color:var(--muted);margin-top:6px;}
.bx-fig.links{float:left;width:var(--bw,42%);margin:4px 20px 12px 0;}
.bx-fig.rechts{float:right;width:var(--bw,42%);margin:4px 0 12px 20px;}
.bx-fig.bw-klein{width:30%;}
.bx-fig.bw-mittel{width:42%;}
.bx-fig.bw-gross{width:58%;}
.bx-fig.voll{width:auto;float:none;}
.bx-frame{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-card);
  overflow:hidden;background:var(--ink);}
.bx-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.bx-clear{clear:both;}

/* ---- Die Erklärung von Serlo --------------------------------------------
   ⛔ SIE MUSS ALS FREMDER TEXT ERKENNBAR BLEIBEN - das ist die Lizenzbedingung
   und nicht Geschmack (CC BY-SA, siehe serlo_inhalte.py). Deshalb ein
   abgesetzter Rand und eine Herkunftszeile, die NICHT ausblendbar ist.
   Zurückhaltend bleibt es trotzdem: die Antwort der Seite ist unser eigener
   Text darüber, Serlo die zweite Stimme. */
.ti-serlo{border-left:3px solid var(--brand);}
.ti-serlo-quelle{margin:var(--s-4) 0 0;padding-top:var(--s-3);
  border-top:1px solid var(--line);font-size:var(--fs-2xs);color:var(--muted);
  line-height:1.6;}
.ti-serlo-quelle a{color:inherit;text-decoration:underline;}
/* Auf einer Begriffsseite ist der fremde Text die GANZE Seite - dort steht
   die Herkunft OBEN, nicht als Fussnote (templates/serlo_wissen.html). */
.ti-serlo-oben{margin:0 0 var(--s-4);padding:0 0 var(--s-3);
  border-top:0;border-bottom:1px solid var(--line);}
/* Die Kästen, die Serlo im Text benutzt (Merksatz, Beispiel, Warnung).
   Eine ruhige Bauform für alle - eine eigene Farbe je Art wäre eine zweite
   Farbwelt (DESIGN_SYSTEM.md §9). */
.sl-box{display:block;margin:var(--s-3) 0;padding:var(--s-3) var(--s-4);
  background:var(--surface-subtle);border-radius:var(--r-card);
  border-left:3px solid var(--line);}
.sl-box>b{display:block;margin-bottom:var(--s-1);color:var(--ink);}
.sl-box p:last-child{margin-bottom:0;}
/* ⛔ SERLOS BILDER SIND SCHEMATA, KEINE FOTOS - und sie kommen in ihrer
   Originalgröße. Ohne Deckel füllte ein geviertelter Kreis die ganze
   Spalte (gemessen am 03.09.2026: 640 px hoch für „drei Viertel"), und der
   Text darunter rutschte aus dem Bild. 420 px ist die Größe, in der ein
   Schema noch alles zeigt und trotzdem ein Bild IM Text bleibt.
   Zentriert, weil ein linksbündiges Schema neben nichts steht. */
.sl-text figure{margin:var(--s-4) 0;}
/* KLEIN, ABER ZUM ANSEHEN. 260 px reicht, um ein Schema zu erkennen; wer es
   genau braucht, oeffnet es in voller Groesse (der Link kommt aus
   scripts/serlo_holen.py). Der Rahmen sagt, dass da etwas zu holen ist. */
.sl-bild{display:block;}
/* `width:fit-content` und nicht nur `inline-block`: die Regel fuer Verweise
   im Fliesstext daneben macht den Rahmen sonst so breit wie die Spalte, und
   dann steht ein 260-px-Bild in einem 800-px-Kasten. */
.sl-bild a{display:block;width:fit-content;margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--r-control);
  padding:var(--s-2);background:var(--card);transition:border-color .13s;}
.sl-bild a:hover{border-color:var(--brand);}
/* ⛔ EINE FESTE BREITE, KEIN PROZENT. `max-width:min(100%, 260px)` sah
   richtiger aus, war es aber nicht: das Prozent misst sich am Rahmen, und
   der Rahmen ist `fit-content` - also am Bild. Der Browser loest das auf,
   indem er das Prozent bei der Groessenermittlung ignoriert; der Rahmen wurde
   so breit wie das ORIGINALBILD (gemessen: 775 px statt 276 px). Auf dem
   Telefon deckelt die schmale Regel unten. */
.sl-text img{max-width:260px;height:auto;display:block;}

/* ---- Bausteine IM gespeicherten Inhalt -----------------------------------
   Sie beschreiben Text, den eine Lehrkraft geschrieben hat - keine Bedienung.
   Bis v2.605.0 standen sie nur im <style>-Block von templates/fach.html;
   derselbe Text stand oeffentlich unter /fach/<fach>/<thema> und sah dort
   anders aus. Dieselbe Doppelung im Kleinen, dieselbe Loesung: EINE Datei,
   von beiden Seiten geladen.
   Die Informatik-Bausteine (.if-*) sind didaktisch benannt - Merksatz,
   Denkfehler, Glossar. Keine zweite Seite und keine neue Farbpalette; alle
   Toene kommen aus dem Woerterbuch. */
/* ---- Block-Inhalte (Kutu-Rendering) ---- */
.ti-inhalt .bx-text{margin:0 0 var(--s-3);}
.ti-inhalt .bx-text:last-child{margin-bottom:0;}
/* Informatik 5/6: derselbe Inhaltsbereich, aber mit didaktisch benannten
   Bausteinen. Keine zweite Seite und keine neue Farbpalette. */
.if-kurz{font-size:var(--fs-base);line-height:1.65;margin:0 0 18px;max-width:76ch}
.if-lesetext{max-width:78ch;font-size:var(--fs-md);line-height:1.72}
.if-lesetext p{margin:0 0 12px}
.if-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.if-karte{border:1px solid var(--line);border-top:3px solid var(--brand);padding:13px 14px;background:var(--card)}
.if-karte:nth-child(2){border-top-color:var(--violett)}
.if-karte:nth-child(3){border-top-color:var(--amber)}
.if-label{display:block;color:var(--muted);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:6px}
.if-karte b{display:block;margin-bottom:5px;font-size:var(--fs-md)}
.if-karte p{margin:0;line-height:1.55}
.if-ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.if-schritt{position:relative;border-left:3px solid var(--brand);background:var(--surface-subtle);
  padding:12px 13px 12px 42px;min-height:74px}
.if-schritt span{position:absolute;left:12px;top:12px;width:21px;height:21px;border-radius:50%;
  background:var(--brand);color:var(--card);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:700}
.if-schritt b{display:block;margin-bottom:3px}
.if-merksatz,.if-fehler{border-left:4px solid var(--ok);background:var(--ok-soft);
  padding:12px 14px;margin:14px 0;line-height:1.55}
.if-fehler{border-left-color:var(--amber);background:var(--amber-soft)}
.if-merksatz b,.if-fehler b{display:block;margin-bottom:3px}
.if-niveau{display:inline-block;border:1px solid var(--line);color:var(--muted);font-size:var(--fs-2xs);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;margin-right:6px}
.if-projekt{border:1px solid var(--violett);background:var(--violett-soft);padding:14px 16px;margin:8px 0}
.if-projekt b{display:block;color:var(--violett-ink);margin-bottom:5px}
.if-beispiel{border:1px solid var(--line);background:var(--surface-subtle);padding:14px 16px;margin:10px 0 16px}
.if-beispiel p{margin:0 0 9px}.if-beispiel ol{margin:8px 0 10px;padding-left:22px}
.if-glossar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 18px}
.if-glossar div{border:1px solid var(--line);padding:11px 12px;background:var(--card)}
.if-glossar dt{font-weight:700;margin-bottom:4px}.if-glossar dd{margin:0;color:var(--muted);line-height:1.45}
.if-aufgaben>li{padding:9px 0 13px;line-height:1.6}.if-aufgaben details{margin-top:7px}
.if-projektplan{border:1px solid var(--line);padding:13px 15px;margin:12px 0}
.if-projektplan h3{margin-top:0}.if-projektplan li{margin-bottom:6px}
@media (max-width:760px){.if-raster,.if-ablauf{grid-template-columns:1fr}}
@media (max-width:760px){.if-glossar{grid-template-columns:1fr}}

/* ---- Schmal (CLAUDE.md: schmal aendern heisst SCHMAL aendern) -------------
   NUR Regeln, die auf dem Telefon anders sein muessen. Die Grundregeln oben
   bleiben unangetastet - auf Tablet und Rechner war nichts kaputt. */
@media (max-width:640px){
  .ti-sect{padding:var(--s-4);border-radius:var(--r-card);}
  .ti-titel{font-size:var(--fs-xl);}
  .ti-mat-grid,.ti-vw-grid{grid-template-columns:1fr;}
  /* Ein umflossenes Bild wird hochkant zur Briefmarke - lieber volle Breite. */
  .bx-fig.links,.bx-fig.rechts{float:none;width:100%;margin:6px 0 16px;}
  /* Hochkant ist die Spalte schmaler als 260 px - dann gilt die Geraetebreite. */
  .sl-text img{max-width:100%;}
  .sl-bild a{width:auto;}
  /* Der Hoehendeckel der Buehne wird HIER AUFGEHOBEN: hochkant ist sie schon
     durch die Geraetebreite klein (375 px -> 226 px hoch), ein zweiter Deckel
     machte sie zur Briefmarke. Das Seitenverhaeltnis bleibt - wer die
     PhET-Buehne hochkant zwingt, bekommt Balken statt Simulation. */
  .ft-sim-buehne{max-width:100%;min-height:15rem;}
  .ti-regal-arten{gap:var(--s-2) var(--s-4);}
}

/* ===========================================================================
   TEILEN (docs/PLAN_LESESTUNDE.md §3)
   ===========================================================================
   ⛔ ER KOSTET KEINE ZEILE (Anweisung Murat 04.09.2026: „kücücük olsun
   basinca büyüsün yani ek satir kaplamasin ... hover gibi olsun"). Also:
   drei kleine Symbolknoepfe rechts in der Krumenzeile, und das aufgeklappte
   Feld SCHWEBT darueber (position:absolute) statt den Text wegzuschieben.

   Beim ersten Anlauf waren es 44-px-Knoepfe mit Beschriftung und ein Feld
   im Fluss - zusammen zwei zusaetzliche Zeilen ueber jedem Thema. Genau das
   war gemeint mit „ek satir kaplamasin". */
.ti-teilen{position:relative;display:inline-flex;align-items:center;
  gap:var(--s-1);margin-left:auto;flex:none;}
.ti-tl-k{width:28px;height:28px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;padding:0;
  border:1px solid transparent;border-radius:var(--r-control);
  background:none;color:var(--muted);cursor:pointer;}
.ti-tl-k .ti-ic,.ti-tl-k svg{width:15px;height:15px;}
/* „hover gibi" - im Ruhezustand fast unsichtbar, unter dem Zeiger deutlich. */
.ti-tl-k:hover{color:var(--brand);border-color:var(--line);
  background:var(--surface-subtle);}
.ti-tl-k:focus-visible{outline:2px solid var(--brand);outline-offset:1px;
  color:var(--brand);}
.ti-tl-k[aria-expanded="true"]{color:var(--brand);border-color:var(--line);
  background:var(--surface-subtle);}
/* Die Rueckmeldung des Kopierens: zwei Symbole im Knopf, eines sichtbar.
   Ohne Text braucht es sie - sonst weiss niemand, ob es geklappt hat. */
.ti-tl-ok{display:none;}
.ti-tl-k.ok .ti-tl-ruhe{display:none;}
.ti-tl-k.ok .ti-tl-ok{display:inline-flex;}
.ti-tl-k.ok{color:var(--ok, var(--brand));}

/* DAS SCHWEBENDE FELD. Rechtsbuendig unter den Knoepfen - links waere es auf
   dem Handy sofort ueber dem Rand. z-index, weil darunter der Seitentitel
   und ggf. eine Simulation stehen. */
/* ⛔ `display:flex` SCHLAEGT `[hidden]`. Ohne die Zeile darunter steht das
   Feld beim Laden offen da - im Browser am 04.09.2026 genau so gesehen:
   ein leerer weisser Kasten unter der Krumenzeile. `[hidden]` setzt nur
   `display:none` mit der Staerke einer Regel des Browsers, und jede eigene
   display-Angabe gewinnt dagegen. */
.ti-tl-auf[hidden]{display:none;}
.ti-tl-auf{position:absolute;top:calc(100% + var(--s-2));right:0;z-index:30;
  display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-panel);
  background:var(--card);box-shadow:var(--e-2);}
.ti-tl-qrbild{width:168px;height:168px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--card);
  border-radius:var(--r-control);}
.ti-tl-qrbild img,.ti-tl-qrbild canvas{border-radius:var(--r-control);}
/* Die Adresse darf umbrechen und bleibt schmal wie der QR - sie ist zum
   Ablesen da, nicht zum Ausbreiten. */
.ti-tl-adresse{max-width:168px;font-size:var(--fs-3xs);color:var(--muted);
  word-break:break-all;line-height:1.4;}

@media (max-width:640px){
  /* Am Handy darf das Feld nicht ueber den rechten Rand hinausragen. */
  .ti-tl-auf{right:0;max-width:calc(100vw - var(--s-6));}
}