/*
  unterricht.css
  Globale Styles für die Bausteine eines Unterrichtsbeitrags
  (Definitionsbox, Tipp-/Lösungsbox, Ressourcen-Links, Embeds, Prompt-Block).

  Wird von jedem Beitrag zusätzlich zum Haupt-Stylesheet der Seite
  eingebunden. Farb-Variablen folgen der Namenskonvention aus dem
  "Freundlich"-Design (--bg, --card, --line, --text, --muted,
  --physik, --mathe, --info). Ist bereits ein umgebendes .site[data-mode]
  vorhanden, gewinnen dessen Werte automatisch — die Variablen hier
  sind nur ein Fallback, falls diese Datei mal einzeln getestet wird.
*/

:root{
  --bg:#f2f3e4; --text:#242419; --muted:#666b52; --muted-2:#8a8f74;
  --physik:#2f7cc9; --mathe:#d98d1f; --info:#3f9e6d; --tutorials:#7752c0; --nawi:#1a8f9a;
  --card:#f9faf0; --line:#e2e6cd;
}

/* Fach-Akzentfarbe: am Beitrags-Container per data-fach setzen,
   z. B. <main class="beitrag" data-fach="physik"> */
[data-fach="physik"]{ --fach-akzent: var(--physik); }
[data-fach="mathe"]{ --fach-akzent: var(--mathe); }
[data-fach="informatik"]{ --fach-akzent: var(--info); }
[data-fach="tutorials"]{ --fach-akzent: var(--tutorials); }
[data-fach="naturwissenschaften"]{ --fach-akzent: var(--nawi); }

.beitrag{ max-width:760px; margin:0 auto; padding:24px 20px 64px; }

.breadcrumbs{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }

.beitrag-head h1{ margin:0 0 10px; font-size:clamp(21px,3vw,26px); line-height:1.3; }

/* ---------- Beitragstitel wandert beim Scrollen in die Menüleiste ----------
   Die Leiste wächst dabei mit (Grid-Zeile von 0fr auf 1fr), statt den Text
   zu beschneiden. Reine CSS-Transition, JS setzt nur die Klasse. */
/* ---------- Beitragstitel ersetzt beim Scrollen die Menülinks ----------
   Der Titel liegt im HTML INNERHALB der <nav> der Kopfzeile und erbt
   damit automatisch deren Position und vertikale Ausrichtung — es muss
   nichts eigens positioniert oder zentriert werden. Beim Scrollen werden
   schlicht die Links versteckt und der Titel eingeblendet.

   Hinweis: Die Selektoren sind bewusst auf ".site > header" bezogen,
   weil der Beitragskopf ebenfalls ein <header> und der Breadcrumb
   ebenfalls ein <nav> ist. */

.site > header nav .hb-titel{
  display:none;
  font-size:14px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:min(48vw, 520px);
}

/* Zustand "gescrollt": Links weg, Titel her, Leiste etwas flacher */
.site > header.zeigt-beitrag nav a{ display:none; }
.site > header.zeigt-beitrag nav .hb-titel{ display:block; }
.site > header.zeigt-beitrag .container.row{ padding-top:9px; padding-bottom:9px; }

.site > header .container.row{ transition:padding .18s ease; }

@media (prefers-reduced-motion:reduce){
  .site > header .container.row{ transition:none; }
}
/* Beschreibung des Beitrags — eigene Sektion unter der Überschrift */
.beitrag-intro{
  margin:0 0 22px; color:var(--muted);
  font-size:15.5px; line-height:1.6;
}

/* ---------- Ressourcen-Links (Präsentation / Arbeitsblatt) ---------- */
.ressourcen-links{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px; }
.res-card{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px; font-weight:700; font-size:14px;
  color:var(--text); background:var(--card); border:1px solid var(--line);
  text-decoration:none;
}
.res-card:hover{ border-color:var(--fach-akzent, var(--muted)); }

/* ---------- Fließtext-Rhythmus ---------- */
.beitrag-text{ font-size:16px; line-height:1.7; }
.beitrag-text > * + *{ margin-block-start:20px; }

/* ---------- Boxen: Definition, Tipp, Lösung ---------- */
.box{
  border-radius:14px; border:1px solid var(--line);
  background:var(--card); padding:16px 18px;
  border-inline-start-width:4px; border-inline-start-style:solid;
}
.box-label{
  margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2);
}
.definition-box{ border-inline-start-color: var(--fach-akzent, var(--muted)); }

/* Tipp- und Lösungsbox als <details>: nativ ein-/ausklappbar, ohne JS,
   damit Tastatur- und Screenreader-Nutzung von Haus aus funktioniert. */
.tipp-box, .loesung-box{ border-inline-start-color: var(--muted-2); padding:0; overflow:hidden; }
.tipp-box summary, .loesung-box summary{
  cursor:pointer; list-style:none; padding:14px 18px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.tipp-box summary::before{ content:"💡"; }
.loesung-box summary::before{ content:"🔎"; }
.tipp-box summary::-webkit-details-marker, .loesung-box summary::-webkit-details-marker{ display:none; }
.tipp-box[open] summary, .loesung-box[open] summary{ border-block-end:1px solid var(--line); }
.tipp-box > *:not(summary), .loesung-box > *:not(summary){ padding:14px 18px; margin:0; }

/* ---------- Responsive Embeds: YouTube, GeoGebra, WebGL-iframe ---------- */
.embed-responsive{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--card);
}
.embed-responsive iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.embed-responsive.is-quadratisch{ aspect-ratio:1/1; }

.beitrag-redaktion p{ margin-block-end:12px; }

/* ---------- Eigenes Video (selbst gehostet) und Standbilder ----------
   preload="none" im Markup: erst der Klick lädt die Datei. */
.beitrag-text .medien{ margin-inline:0; }
.beitrag-text .medien video,
.beitrag-text .medien img{
  width:100%; height:auto; display:block; background:#000;
  border-radius:14px; border:1px solid var(--line);
}
.beitrag-text .medien figcaption{
  margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--muted-2);
}
.beitrag-text h2{ margin-block:34px 0; font-size:19px; line-height:1.35; }

/* Kapitel eines Videos: Zeitmarken springen im Video (unterricht.js) */
.kapitel{ margin:0; padding-inline-start:0; list-style:none; columns:2 220px; column-gap:24px; }
.kapitel li{ break-inside:avoid; padding:2px 0; font-size:15px; }
.kapitel a{ color:var(--text); text-decoration:none; }
.kapitel a:hover{ text-decoration:underline; }
.kapitel .zeit{
  display:inline-block; min-width:3.2em; font-variant-numeric:tabular-nums;
  color:var(--fach-akzent, var(--muted)); font-weight:700;
}

/* Hinweiskasten (Entstehung, maschinelle Übersetzung) — wie auf den
   Textseiten, hier für Beiträge */
.beitrag-text .hinweis,
.beitrag .hinweis{
  padding:14px 16px; border:1px dashed var(--line);
  border-inline-start:4px solid var(--fach-akzent, var(--muted));
  border-radius:12px; background:var(--card);
  font-size:14px; line-height:1.6; color:var(--muted);
}
.beitrag .hinweis p{ margin:0 0 8px; }
.beitrag .hinweis p:last-child{ margin-bottom:0; }
.beitrag .hinweis a{ color:inherit; text-decoration:underline; }
.beitrag > .hinweis{ margin:0 0 22px; }

/* Vor-/Zurück-Navigation innerhalb einer Reihe */
.reihen-nav{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:34px; }

/* ---------- JSXGraph-Board ---------- */
.board-wrap{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); padding:8px;
}
/* Nur das ÄUSSERE svg der Grafik skalieren. Der Kindselektor ist hier
   entscheidend: die Beschriftungen in der Grafik sind selbst <svg>-
   Elemente (von MathJax.tex2svg erzeugt). Ein unqualifiziertes
   ".board-wrap svg" würde sie auf volle Breite ziehen. */
.board-wrap > svg{ width:100%; height:auto; display:block; }

/* ---------- Code-Blöcke ----------
   Eigenes Highlight.js-Farbschema statt externem Theme: nutzt dieselben
   CSS-Variablen wie der Rest der Seite und folgt damit automatisch dem
   Hell-/Dunkel-Umschalter (ein extern geladenes Theme würde stattdessen
   nur auf die OS-Einstellung reagieren, nicht auf unseren eigenen Button).
   Drei Farben (physik/mathe/info) reichen als kleines Syntax-Farbschema. */

pre:has(code.hljs){
  border-radius:12px; border:1px solid var(--line); overflow:hidden; margin:0;
}
code.hljs{
  display:block; background:var(--card); color:var(--text);
  font-size:14px; line-height:1.6;
  font-family:ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  padding-block:14px;   /* oben/unten Luft, auch wenn die Zeilennummern-
                           Tabelle den seitlichen Abstand selbst mitbringt */
}
/* Ohne Zeilennummern-Plugin (z. B. falls JS deaktiviert ist) trotzdem lesbar */
code.hljs:not(.hljs-line-numbers){ padding:16px 18px; }

.hljs-comment, .hljs-quote{ color:var(--muted); font-style:italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal{ color:var(--physik); font-weight:600; }
.hljs-string, .hljs-doctag, .hljs-attribute, .hljs-template-variable{ color:var(--info); }
.hljs-number{ color:var(--mathe); font-weight:600; }
.hljs-title, .hljs-section, .hljs-selector-id{ color:var(--text); font-weight:700; }
.hljs-type, .hljs-class .hljs-title, .hljs-tag, .hljs-name{ color:var(--physik); }
.hljs-built_in, .hljs-builtin-name{ color:var(--info); font-weight:600; }
.hljs-variable, .hljs-params{ color:var(--muted-2); }
.hljs-meta{ color:var(--muted); }

/* ---------- Zeilennummern + Zebra-Streifen (highlightjs-line-numbers.js) ----------
   Das Plugin verschachtelt die Klassen unterschiedlich (mal auf der
   Tabellenzelle, mal auf einem inneren div), deshalb werden beide Ebenen
   angesprochen — sonst greift der Abstand nicht. */
table.hljs-ln{ width:100%; border-collapse:collapse; }

td.hljs-ln-numbers,
.hljs-ln-numbers{
  text-align:right;
  -webkit-user-select:none; user-select:none;
  color:var(--muted-2); vertical-align:top; white-space:nowrap;
  padding-inline-start:16px;
  padding-inline-end:20px;     /* Abstand zwischen Nummer und Trennlinie */
  border-inline-end:1px solid var(--line);
}
/* Nummern werden vom Plugin über das data-Attribut ausgegeben */
.hljs-ln-n::before{ content:attr(data-line-number); }

table.hljs-ln td.hljs-ln-code,
td.hljs-ln-code,
.hljs-ln-code{
  /* Abstand nach der Trennlinie. padding-left zusätzlich als Rückfall,
     falls die logische Eigenschaft überschrieben wird. */
  padding-left:30px;
  padding-inline-start:30px;
  padding-right:16px;
  padding-block:1px;
  white-space:pre;
}

.hljs-ln-line:nth-child(even) td{ background:color-mix(in srgb, var(--text) 5%, transparent); }
tr.hljs-ln-line:nth-child(even) > td{ background:color-mix(in srgb, var(--text) 5%, transparent); }

/* ---------- Prompt-Box (zum Rauskopieren für LLM-Abfragen) ---------- */
.prompt-box{
  border-radius:14px; border:1px dashed var(--muted-2);
  background:var(--card); padding:16px 18px;
}
.prompt-text{
  white-space:pre-wrap; font-family:ui-monospace, "SF Mono", Consolas, monospace;
  font-size:13.5px; line-height:1.6; margin:10px 0 14px; color:var(--text);
}
.copy-btn{
  font-family:inherit; font-size:13.5px; font-weight:700;
  padding:9px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--text); color:var(--bg); cursor:pointer;
}
.copy-btn.is-copied{ background:var(--fach-akzent, var(--info)); }

@media (prefers-reduced-motion:reduce){
  .copy-btn{ transition:none; }
}