/* ============================================================ */
/* markdown.css -- Styles fuer den von markdown.js (parseMarkdown())    */
/* erzeugten HTML-Output. Bewusst in einer EIGENEN Datei getrennt von   */
/* layout.css (Anforderung: "damit ich sie leicht in ein anderes       */
/* Projekt portieren kann") -- diese Regeln haengen NUR an Klassen/     */
/* Tags, die markdown.js selbst erzeugt (bzw. an "#zl_gerendert"/".text"*/
/* fuer den umschliessenden Container, siehe zl_ansicht.php), NICHT an  */
/* App-Layout wie Spalten/Popups/Formularen (die bleiben in layout.css).*/
/*                                                                       */
/* PORTIERBARKEIT: die Regeln hier nutzen dieselben CSS-Custom-         */
/* Properties (Farbvariablen) wie das restliche Projekt, damit Dark-    */
/* mode automatisch mitfunktioniert -- in einem neuen Projekt muessen   */
/* diese Variablen (oder ein passender Ersatz) im Host-Stylesheet       */
/* definiert sein: --err, --bg_strong, --bg_subtle, --bg_hover,         */
/* --border_column, --border_input, --text_secondary, --accent.        */
/* Fehlen sie, greift der CSS-Fallback (unset/initial), Aussehen bleibt */
/* aber trotzdem funktional -- nur ohne die eigentlichen Akzentfarben.  */
/* ============================================================ */

/* -- Wiki-Link [[zl_id]] auf einen ZL ohne Leserecht (siehe markdown.js) -- */
.wikilink_gesperrt
{
  color: var(--err);
}

/* -- Kurzer Zwischenzustand direkt nach dem Laden (Anforderung SEO, siehe
   zl_ansicht.php): #zl_gerendert enthaelt serverseitig zunaechst den ROHEN
   Markdown-Text als echten Textinhalt (statt leer + nur im data-raw-Attribut
   versteckt) -- .zl_roh sorgt hier fuer halbwegs lesbare Zeilenumbrueche
   (sonst wuerde der Browser alle Zeilenumbrueche/Mehrfach-Leerzeichen zu
   einem einzigen Leerzeichen zusammenfassen). js.js: zl_gerendert_html_
   setzen() entfernt die Klasse WIEDER, sobald echt gerendert wird (parseMarkdown()
   liefert bereits fertiges Block-HTML mit eigenem Absatz-/Zeilenumbruch-Verhalten
   -- pre-wrap wuerde DORT zusaetzliche, unerwuenschte Leerzeilen erzeugen,
   deshalb bewusst NUR auf diesen kurzen Rohtext-Zwischenzustand beschraenkt) --*/
.zl_roh
{
  white-space: pre-wrap;
}

/* Gerenderter ZL-Inhalt (siehe zl_ansicht.php: #zl_gerendert, Klasse ".text") --
   Bilder darin (inline per Markdown, siehe markdown.js) sollen nicht breiter
   als die Spalte werden */
.text img
{
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: pointer;
}

/* -- YouTube-Einbettung (Anforderung, siehe markdown.js: md_youtube_embed_html()/
   yt_embed_starten()): Thumbnail mit mittigem Play-Button, Klick tauscht es an
   GENAU DERSELBEN Stelle gegen den eingebetteten YouTube-Player (<iframe>) aus.
   .yt_embed_iframe_wrap erzwingt dabei dasselbe 16:9-Seitenverhaeltnis, das ein
   YouTube-Player ohnehin hat -- kein Sprung im Layout beim Umschalten. Play-
   Button-Kreis bewusst mit festem rgba()-Schwarz statt einer Theme-Variable --
   soll auf JEDEM Thumbnail (hell oder dunkel) gleich gut lesbar bleiben, unab-
   haengig vom aktuellen Dark-/Lightmode. */
.yt_embed
{
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
}

.yt_embed img
{
  display: block; /* -- sonst bleibt unten ein paar Pixel Inline-Whitespace stehen -- */
}

.yt_play_btn
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  pointer-events: none; /* -- Klick soll IMMER am umschliessenden .yt_embed ankommen -- */
}

.yt_embed_iframe_wrap
{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.yt_embed_iframe_wrap iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

.text table
{
  border-collapse: collapse;
  max-width: 100%;
}

.text td, .text th
{
  padding: 4px 8px;
  border-color: var(--border_column) !important;
}

/* Sortierbare Tabellen-Spaltenkoepfe (Anforderung, siehe markdown.js:
   md_tabelle_sortieren()/parseMarkdownTables()) -- Pfeil steckt in einem
   EIGENEN Span neben dem Ueberschrifttext (nicht im selben Textknoten),
   damit ein evtl. per md_inline_styling() formatierter Ueberschrifttext
   (Farbe/Fett/...) beim Setzen/Loeschen des Pfeils unangetastet bleibt. */
.zl_tabelle_th_sortierbar
{
  cursor: pointer;
  user-select: none;
}

.zl_tabelle_th_sortierbar:hover
{
  background: var(--bg_hover);
}

.zl_tabelle_sort_pfeil
{
  font-size: 0.8em;
  color: var(--text_secondary);
}

/* Ausklappbare Bereiche im ZL-Text ("+++ Titel" ... "+++", siehe markdown.js) --
   natives <details>/<summary>, eigener Pfeil statt dem browserspezifischen
   nativen Marker. */
.zl_ausklappbar
{
  margin: 10px 0;
  border: 1px solid var(--border_column);
  border-radius: 6px;
  overflow: hidden;
}

.zl_ausklappbar summary
{
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  background: var(--bg_subtle);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.zl_ausklappbar summary::-webkit-details-marker
{
  display: none;
}

.zl_ausklappbar summary::before
{
  content: '▶';
  font-size: 11px;
  color: var(--text_secondary);
  transition: transform 0.15s ease;
}

.zl_ausklappbar[open] summary::before
{
  transform: rotate(90deg);
}

.zl_ausklappbar summary:hover
{
  background: var(--bg_hover);
}

.zl_ausklappbar_inhalt
{
  padding: 10px 12px;
}

code{padding:10px;border:1px solid cyan;font-family:'Courier New',Courier,monospace;display:block;white-space:pre;overflow-x:auto;}

/* Einzeiliger Inline-Code (siehe markdown.js: <code_inline>) -- MUSS ein echtes
   Inline-Element bleiben (laeuft im Fliesstext mit), daher eigene, kleinere
   Polsterung statt der Block-Werte von <code> oben, UND Umbruch statt
   Scrollbalken bei langen Werten (kein overflow-x hier) */
code_inline{display:inline;padding:1px 4px;border:1px solid cyan;font-family:'Courier New',Courier,monospace;white-space:pre-wrap;word-break:break-word;overflow-x:visible;}

/* Kopieren-Button an Codebloecken (siehe markdown.js: md_code_html()) -- per Hover
   eingeblendet (opacity), NICHT dauerhaft sichtbar, um kurzen Code nicht zuzumuellen. */
.zl_code_wrap{position:relative;}
.zl_code_copy_btn{position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;background:var(--bg_subtle);border:1px solid var(--border_column);border-radius:4px;cursor:pointer;padding:2px 6px;font-size:0.85em;}
.zl_code_wrap:hover .zl_code_copy_btn{opacity:1;}
.zl_code_inline_wrap{position:relative;display:inline-block;}
.zl_code_copy_btn_inline{position:absolute;top:-2px;right:-18px;font-size:0.7em;padding:0 2px;}
.zl_code_inline_wrap:hover .zl_code_copy_btn_inline{opacity:1;}

/* Zeilennummern-Gutter bei mehrzeiligen Codebloecken (siehe markdown.js:
   md_code_html() -- Klasse "zl_hat_zeilen" wird NUR bei wirklich mehrzeiligem Code
   gesetzt). BUGFIX ggue. der vorherigen sticky-Loesung: die Nummern liefen dort bei
   KURZEN Zeilen trotzdem mit aus dem Bild (deren eigener, nur zeilenbreiter
   Containing Block bot der sticky-Nummer nicht genug "Platz" zum Mithalten -- nur
   bei den laengsten Zeilen sah es zufaellig richtig aus). Jetzt sind Gutter
   (.zl_code_gutter) und Codetext (.zl_code_scroll) ZWEI GETRENNTE Flex-Spalten:
   NUR .zl_code_scroll hat overflow-x:auto, der Gutter ist gar nicht erst Teil des
   scrollenden Bereichs -- kann also strukturell NIE mitscrollen, unabhaengig von
   der jeweiligen Zeilenlaenge (Anforderung: "GARKEINE Zahlen sollen mitscrollen").
   KEIN Padding auf dem <code>-Element selbst mehr (Anforderung: "Zahlen-Spalte
   soll GARKEINEN Zwischenraum zum Rand haben") -- oben/unten/links sitzt der
   Gutter dadurch direkt am Rand, "padding" auf .zl_code_scroll gibt NUR dem
   Codetext seinen gewohnten Abstand. WICHTIG: beide Spalten duerfen oben/unten
   KEIN eigenes Padding haben (auch nicht .zl_code_scroll) -- sonst stuenden Zeile
   und zugehoerige Nummer nicht mehr auf gleicher Hoehe (Gutter faengt ja bei 0 an). */
code.zl_hat_zeilen{display:flex;align-items:stretch;overflow-x:visible;padding:0;}
/* font-family:inherit auf BEIDEN Spalten noetig (Bugfix: "Courier New" kommt zwar
   vom <code>-Element, aber eine globale Reset-Regel wie "*{font-family:arial}"
   (falls das Host-Projekt sowas hat, siehe layout.css) greift DIREKT auf jedes
   einzelne Element, nicht nur "vererbt" -- ohne diese Zeile ueberschreibt sie das
   geerbte Courier auf .zl_code_gutter/.zl_code_scroll sonst wieder mit der
   Reset-Schrift). */
code.zl_hat_zeilen .zl_code_gutter{display:block;flex-shrink:0;box-sizing:border-box;padding:0 6px;text-align:right;white-space:pre;font-family:inherit;background:var(--bg_strong);border-right:1px solid var(--border_column);color:var(--text_secondary);user-select:none;}
code.zl_hat_zeilen .zl_code_scroll{display:block;flex:1;min-width:0;overflow-x:auto;white-space:pre;font-family:inherit;padding:0 10px;box-sizing:border-box;}

/* Anker-Link an Ueberschriften (🔗, siehe markdown.js: HID-Marker) -- nur per Hover
   ueber die jeweilige Ueberschrift sichtbar. Explizite h1..h6-Liste statt :is(),
   um mit der Vorgabe "nur flaechendeckend >95% unterstuetzte CSS-Funktionen" auf
   Nummer sicher zu gehen (siehe CLAUDE.md). */
.zl_anker_link{opacity:0;text-decoration:none;margin-left:4px;font-size:0.7em;transition:opacity 0.15s;}
h1:hover .zl_anker_link,h2:hover .zl_anker_link,h3:hover .zl_anker_link,
h4:hover .zl_anker_link,h5:hover .zl_anker_link,h6:hover .zl_anker_link{opacity:1;}

/* Inhaltsverzeichnis (siehe markdown.js: "[[TOC]]") -- bewusst eine FLACHE Liste
   mit Einrueckung nach Ebene statt echter Verschachtelung <ul><ul>, das waere bei
   Ueberschriften-Spruengen (z.B. H1 direkt gefolgt von H4) unnoetig kompliziert.
   Standardmaessig VERSTECKT (Anforderung: "erst wenn man draufklickt sichtbar").
   Offen ist es ein FEST auf dem Bildschirm stehendes Menue (Anforderung: "muss
   IMMER mitscrollen, wie ein Menue, rechtsbuendig direkt unter dem Menue-Button")
   -- position:fixed statt normalem Fluss, bleibt dadurch beim Scrollen des
   Dokuments an Ort und Stelle stehen. top/right werden dafuer per JS aus der
   tatsaechlichen Position des Buttons berechnet, siehe js.js: zl_toc_umschalten()
   (.zl_toc haengt an der Stelle im DOM, wo "[[TOC]]" im Text stand -- irgendwo
   TIEF in #zl_gerendert, NICHT neben dem Button oben im Kopf -- eine rein CSS-
   relative Positionierung zum Button waere deshalb nicht moeglich). */
.zl_toc{display:none;position:fixed;z-index:50;width:min(320px,90vw);max-height:70vh;overflow-y:auto;border:1px solid var(--border_column);border-radius:6px;padding:10px 14px;background:var(--bg_subtle);box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.zl_toc.zl_toc_offen{display:block;}
/* KEINE Listen-Bullets (Anforderung) + Einrueckung STUFENWEISE pro Ebene (Bugfix:
   vorher fehlten eigene Regeln fuer Ebene 1/2, wodurch H1 und H2 optisch IDENTISCH
   eingerueckt waren -- nur H3+ hatte ueberhaupt einen Versatz) -- jede Ebene bekommt
   jetzt 16px mehr als die vorherige, Ebene 1 bei 0 (Anforderung: "erster Punkt soll
   linksbuendig mit 'Inhaltsverzeichnis' sein") -- margin-left:0 auf der <ul>, GENAU
   das gleiche linke Padding wie beim umschliessenden .zl_toc (padding:10px 14px)
   sorgt dafuer OHNE Zusatzabstand fuer die Ausrichtung.
   WICHTIG (Bugfix "Listenpunkte abgeschnitten"): Selektor bewusst "#zl_gerendert
   .zl_toc ul" statt nur ".zl_toc ul" -- weiter unten steht "#zl_gerendert
   ul,#zl_gerendert ol{margin-left:-20px;}" fuer die NORMALE Listendarstellung im
   Fliesstext. Die ID (#zl_gerendert) macht diese Regel SPEZIFISCHER als ein
   reiner Klassenselektor -- ".zl_toc ul" allein wurde davon also trotz spaeterer
   Position im Stylesheet immer wieder mit margin-left:-20px ueberschrieben, das
   TOC (das ja selbst IN #zl_gerendert haengt, siehe oben) rutschte dadurch nach
   LINKS aus seiner eigenen, nur begrenzt breiten Box heraus und wurde am linken
   Rand abgeschnitten. Mit "#zl_gerendert" davor hat diese Regel dieselbe ID- UND
   zusaetzlich noch eine Klassen-Angabe -- damit ist sie SPEZIFISCHER als
   "#zl_gerendert ul" und gewinnt IMMER, unabhaengig von der Position im
   Stylesheet. */
#zl_gerendert .zl_toc ul{list-style:none;margin:6px 0 0 0;padding-left:0;}
.zl_toc_ebene1{padding-left:0;}
.zl_toc_ebene2{padding-left:16px;}
.zl_toc_ebene3{padding-left:32px;}
.zl_toc_ebene4{padding-left:48px;}
.zl_toc_ebene5{padding-left:64px;}
.zl_toc_ebene6{padding-left:80px;}

/* Fussnoten (siehe markdown.js: "Text[^1]" + "[^1]: Erklaerung") */
.zl_footnotes{margin-top:20px;font-size:0.9em;color:var(--text_secondary);}
.zl_footnote_ref a{text-decoration:none;}
.zl_footnote_back{text-decoration:none;margin-left:4px;}

#zl_gerendert a{word-wrap: break-word;}
#zl_gerendert a.datei_link{color:red;border:1px solid red;padding:2px;text-decoration:none;}
#zl_gerendert img{max-width:100%;}
/* Leerzeile vor/nach einer HR (siehe markdown.js: parseMarkdown(), HR-LOGIK) --
   bewusst per CSS-Rand statt per <br>: ein <br> DIREKT VOR einem Block-Element
   wie <hr> wird von Browsern beim Rendern ignoriert, ein <br> DANACH aber nicht --
   ein CSS-Rand wirkt dagegen zuverlaessig auf BEIDEN Seiten gleich. */
#zl_gerendert hr{margin:1em 0;}
/* Fortschrittsbalken (siehe markdown.js: "[progress:70]") -- Balken + Label als
   ZWEI getrennte Elemente NEBENEINANDER (kein ueberlagerter Text AUF dem Balken),
   sonst waere die Lesbarkeit je nach Fuellstand mal auf hellem, mal auf dunklem
   Untergrund schlecht. */
#zl_gerendert .md_progress{display:inline-block;width:160px;max-width:50%;height:14px;background:var(--bg_strong);border:1px solid var(--border_input);border-radius:7px;vertical-align:middle;overflow:hidden;}
#zl_gerendert .md_progress_fill{display:block;height:100%;background:var(--accent);}
#zl_gerendert .md_progress_label{font-size:12px;color:var(--text_secondary);vertical-align:middle;}
/* Balkendiagramme (siehe markdown.js: "[chart]"/"[chart v]") -- GENAU dieselbe
   Optik wie der Fortschrittsbalken oben (bg_strong-Schiene + accent-Fuellung),
   damit sich beide Diagramm-Typen als EIN visuelles System anfuehlen. */
/* CSS-Grid statt Flex-Zeilen (Bugreport/Anforderung: "Balken soll erst
   beginnen, wenn das groesste Wort links zu Ende ist") -- bei unabhaengigen
   Flex-Zeilen hatte JEDE Zeile ihre EIGENE, nur am eigenen Label bemessene
   Label-Breite, Balken in verschiedenen Zeilen fingen dadurch an
   UNTERSCHIEDLICHEN Stellen an. Als CSS-Grid-Container gemessen, bemisst
   "max-content" die Label-SPALTE dagegen ueber ALLE Zeilen hinweg am
   LAENGSTEN vorkommenden Label -- jeder Balken startet dadurch automatisch
   an derselben Stelle (rein CSS, keine JS-Breitenmessung noetig). ".md_chart_h_
   zeile" bleibt im HTML unveraendert die Klick-/Titel-Klammer um Label+Balken+
   Wert (siehe markdown.js), wird per "display:contents" aber selbst
   layoutmaessig unsichtbar -- ihre drei Kinder zaehlen dadurch direkt als
   Grid-Items DIESES Containers (Klicks auf die Kinder bubbeln normal zum
   Listener am Wrapper hoch, "display:contents" aendert daran nichts). */
#zl_gerendert .md_chart_h{display:grid;grid-template-columns:max-content 1fr max-content;align-items:center;column-gap:8px;row-gap:6px;margin:10px 0;}
#zl_gerendert .md_chart_h_zeile{display:contents;}
#zl_gerendert .md_chart_h_label{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text_secondary);cursor:pointer;}
/* Mittlere Spalte ist "1fr" (nimmt den gesamten UEBRIGEN Platz nach Label- und
   Wert-Spalte ein) -- groesster Balken bleibt weiterhin bei 100% BREITE
   DIESER Spalte, die Prozent-Berechnung selbst muss davon nichts wissen. */
#zl_gerendert .md_chart_h_balken_wrap{height:14px;background:var(--bg_strong);border:1px solid var(--border_input);border-radius:7px;overflow:hidden;cursor:pointer;}
#zl_gerendert .md_chart_h_balken{display:block;height:100%;min-width:2px;background:var(--accent);}
#zl_gerendert .md_chart_h_zeile:hover .md_chart_h_balken{opacity:0.8;}
#zl_gerendert .md_chart_h_wert{min-width:2.5em;font-size:12px;color:var(--text_secondary);text-align:right;cursor:pointer;}
/* Vertikale Balken: .md_chart_v_balken_wrap ist die feste 200px-Messlatte
   (Anforderung: "groesster Wert = 200 Pixel hoch"). Jetzt selbst eine Flex-
   Spalte (Zahl + Balken) mit justify-content:flex-end -- beide zusammen werden
   als GRUPPE an der Unterkante verankert, die Zahl wandert dadurch IMMER direkt
   mit der Balkenhoehe mit. Bewusst KEIN overflow:hidden: ragt die Gruppe bei
   einem sehr hohen Balken ueber die 200px hinaus, bleibt das trotzdem normal
   sichtbar (Anforderung: "egal ob das dann 200px ueberschreitet"). Das Label
   haengt bewusst AUSSERHALB dieses Wrappers (eigenes Element darunter), sonst
   wuerde sich der hoechste Balken den 200px-Platz mit dem Label teilen muessen. */
#zl_gerendert .md_chart_v{display:flex;align-items:flex-end;gap:14px;margin:10px 0;padding:0 2px;overflow-x:auto;}
#zl_gerendert .md_chart_v_saeule{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;cursor:pointer;}
#zl_gerendert .md_chart_v_balken_wrap{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:200px;}
#zl_gerendert .md_chart_v_wert{font-size:11px;color:var(--text_secondary);white-space:nowrap;margin-bottom:2px;}
#zl_gerendert .md_chart_v_balken{width:28px;min-height:2px;background:var(--accent);border-radius:3px 3px 0 0;}
#zl_gerendert .md_chart_v_saeule:hover .md_chart_v_balken{opacity:0.8;}
#zl_gerendert .md_chart_v_label{margin-top:6px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text_secondary);text-align:center;}
#zl_gerendert ul,#zl_gerendert ol{margin:0px;margin-left:-20px;}
#zl_gerendert blockquote{margin:0px 0px 0px 20px;}
#zl_gerendert span.code{padding:2px;border:1px solid cyan;font-family: 'Courier New';}
#zl_gerendert .fa-calculator{color:cyan;}
/* -- +/--Zahlen UND die "Summe: X"/"Gesamt: Y"-Zeile selbst (siehe markdown.js:
   berechne_summen()) -- beide gleich behandelt: cyan + anklickbar (Hover-title
   UND Klick-Alert zeigen die laufende Summe/das laufende Gesamt bis zu dieser
   Stelle) -- cursor:pointer als sichtbarer Hinweis darauf, wichtig besonders
   auf Touch-Geraeten, wo es kein Hover gibt -- */
#zl_gerendert .md_summen_zahl{color:cyan;cursor:pointer;}
#zl_gerendert span.todo{padding:2px;background-color:blue;}

/* Anklickbare Checkbox in der gerenderten Ansicht (siehe markdown.js: checkbox_index,
   js.js: md_checkbox_umschalten()) -- nur optisch als klickbar erkennbar, die
   eigentliche Schreibrechts-Pruefung passiert in JS (data-darf-schreiben) */
.md_checkbox{cursor:pointer;}