/* k2-unterricht.css — Paket K2 (06.11.2026), auf jeder Seite: Beamer-Modus, Stimmungsbild, QR-Dialog,
   „Zitat mit Fundstelle kopieren“, Tempo-Knopf im Vorlese-Balken, Druckrand. Tokens der Webseite + Stimmen-Farben des Kerns. */

/* Druckrand: unbenannte @page auf jeder Seite (Safari kennt keine benannten Seiten). */
@page { margin: 15mm; }

:root { --k2-ease: cubic-bezier(.22, .8, .28, 1); }

/* ---------- 1. Beamer-Knopf in der Kopfleiste ---------- */
/* Mit Skript (html.js) ab 761 px von Anfang an sichtbar: kein Nachrücken der Kopfleiste. Auf dem Handy nie (zu wenig Platz). */
@media (min-width: 761px) { html.js .beamer-toggle[hidden] { display: inline-flex; } }
.beamer-toggle svg { transition: scale .25s var(--k2-ease), rotate .3s var(--k2-ease); }
.beamer-toggle:active { scale: .94; }
.beamer-toggle[aria-pressed="true"] { color: #191204; background: var(--accent); border-color: var(--accent); }
.beamer-toggle[aria-pressed="true"] svg { scale: 1.08; rotate: -6deg; }

/* ---------- Beamer-Modus: Inhalt 35 % größer, mehr Kontrast, ruhiger ---------- */
html[data-beamer="1"] main { zoom: 1.35; }
html[data-beamer="1"] { --ink-2: var(--ink); --line: color-mix(in srgb, var(--ink) 34%, var(--bg)); }
html[data-beamer="1"] .sternenfeld .stern, html[data-beamer="1"] .sternenfeld .flieger, html[data-beamer="1"] .sternenfeld .nebel { animation-play-state: paused !important; }
html[data-beamer="1"].js .reveal { opacity: 1; transform: none; transition: none; }
html[data-beamer="1"] .totop, html[data-beamer="1"] .gloss-tip { display: none !important; }
html[data-beamer="1"] .src, html[data-beamer="1"] .quote__src { opacity: .92; }
/* Quellen-Randnotizen (ab 1320 px absolut am Rand) passen mit der Vergrößerung nicht mehr daneben: zurück in den Fluss. */
html[data-beamer="1"] main .wrap--text > .src:not([style]) { position: static; transform: none; width: auto; }

/* ---------- 2. Stimmungsbild (Spoiler-Schutz) ---------- */
.k2-stimmung { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px dashed var(--stimme-du); border-radius: 12px; background: var(--stimme-du-soft);
  animation: k2-ein .3s var(--k2-ease); }
.k2-stimmung__kopf { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; margin: 0 0 .3rem; }
.k2-stimmung__kopf strong { color: var(--stimme-du); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.k2-stimmung__kopf span, .k2-stimmung__hilfe { font-size: .9rem; color: var(--ink-2); }
.k2-stimmung__hilfe { margin: 0 0 .7rem; }
.k2-stimmung__liste { display: grid; gap: .45rem; }
.k2-stimmung__zeile { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.k2-stimmung__plus { display: grid; grid-template-columns: minmax(0, 12rem) 1fr auto; align-items: center; gap: .8rem; width: 100%; min-height: 48px;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--box); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, scale .15s; }
.k2-stimmung__plus:hover { border-color: var(--stimme-du); }
.k2-stimmung__plus:active { scale: .98; }
.k2-stimmung__name { font-weight: 600; overflow-wrap: anywhere; }
.k2-stimmung__balken { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.k2-stimmung__balken i { display: block; height: 100%; background: var(--stimme-du); transform-origin: left; transform: scaleX(0); transition: transform .3s var(--k2-ease); }
.k2-stimmung__zahl { min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; }
.k2-stimmung__zahl.ist-neu { animation: k2-hups .3s var(--k2-ease); }
.k2-stimmung__minus { min-width: 48px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: .85rem; cursor: pointer; }
.k2-stimmung__minus:disabled { opacity: .4; cursor: default; }
.k2-stimmung__kurz { margin: .6rem 0 0; font-size: 1.6rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--stimme-du); text-align: center; }
.k2-stimmung__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.k2-stimmung__neu { min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: .9rem; cursor: pointer; }
.k2-stimmung__neu:active, .k2-stimmung__auf:active { scale: .97; }
.k2-stimmung__ergebnis { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.k2-stimmung__ergebnis:empty { display: none; }
.k2-stimmung.ist-aufgedeckt { border-style: solid; }
.k2-stimmung.ist-aufgedeckt :is(.k2-stimmung__hilfe, .k2-stimmung__liste, .k2-stimmung__kurz, .k2-stimmung__aktionen, .k2-stimmung__kopf span) { display: none; }
.k2-stimmung :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .k2-stimmung__plus { grid-template-columns: 1fr auto; } .k2-stimmung__balken { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Kopierknöpfe: Symbol morpht zum Haken ---------- */
.k2-kopierknopf { position: relative; }
.k2-kopierknopf .k2-ico { transition: opacity .2s, rotate .3s var(--k2-ease), scale .3s var(--k2-ease); }
.k2-kopierknopf .k2-ico--haken { position: absolute; opacity: 0; rotate: -50deg; scale: .4; }
.k2-kopierknopf .k2-ico--haken path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--k2-ease) .08s; }
.k2-kopierknopf.ist-kopiert .k2-ico--kopie { opacity: 0; rotate: 50deg; scale: .4; }
.k2-kopierknopf.ist-kopiert .k2-ico--haken { opacity: 1; rotate: 0deg; scale: 1; }
.k2-kopierknopf.ist-kopiert .k2-ico--haken path { stroke-dashoffset: 0; }
.k2-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; margin-top: .8rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--box); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .2s, scale .15s; }
.k2-link:hover { border-color: var(--accent); }
.k2-link:active { scale: .97; }
.k2-link .k2-ico--haken { left: 1rem; }
.k2-link:focus-visible, .k2-zitat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 3. QR-Dialog ---------- */
.k2-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--box); color: var(--ink); box-shadow: 0 24px 70px rgba(5, 10, 22, .4); overflow: auto;
  opacity: 0; translate: 0 10px; scale: .97;
  transition: opacity .25s var(--k2-ease), translate .25s var(--k2-ease), scale .25s var(--k2-ease), overlay .25s allow-discrete, display .25s allow-discrete; }
.k2-dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .k2-dialog[open] { opacity: 0; translate: 0 10px; scale: .97; } }
.k2-dialog::backdrop { background: rgba(5, 10, 22, 0); transition: background .25s, overlay .25s allow-discrete, display .25s allow-discrete; }
.k2-dialog[open]::backdrop { background: rgba(5, 10, 22, .55); }
@starting-style { .k2-dialog[open]::backdrop { background: rgba(5, 10, 22, 0); } }
.k2-dialog__innen { padding: 1.2rem 1.3rem 1.3rem; }
.k2-dialog__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.k2-dialog__kopf h2 { font-size: 1.3rem; margin: .2rem 0 .4rem; }
.k2-dialog__zu { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.k2-dialog__zu:hover { color: var(--ink); background: var(--stimme-gegen-soft); }
.k2-dialog__hilfe { font-size: .92rem; color: var(--ink-2); margin: 0 0 .9rem; }
.k2-dialog__qr { width: min(240px, 70vw); margin: 0 auto 1rem; border-radius: 10px; overflow: hidden; }
.k2-dialog__qr svg { display: block; width: 100%; height: auto; }
.k2-dialog__qr.ist-zu-lang { width: auto; padding: .8rem 1rem; background: var(--stimme-gegen-soft); font-size: .92rem; }
.k2-dialog__qr.ist-zu-lang p { margin: 0; }
.k2-dialog__label { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem; }
.k2-dialog__zeile { display: flex; flex-wrap: wrap; gap: .5rem; }
.k2-dialog__url { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
  font: .85rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.k2-dialog__url:focus-visible, .k2-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k2-dialog__kopieren { min-height: 44px; padding: .5rem 1rem; }
.k2-dialog__kopieren .k2-ico--haken { left: 1rem; }
.k2-dialog__kopieren:active { scale: .97; }

/* ---------- 4. Zitat mit Fundstelle kopieren ---------- */
/* Platz für den Knopf ist reserviert, bevor das Skript ihn einsetzt (data-k2-stelle setzt der Bau): ein leerer Float
   in Knopfgröße oben rechts. Das Skript ersetzt ihn im selben Bild durch den gleich großen Knopf-Float (.k2-hat-knopf),
   der Text darunter verschiebt sich nicht. Kein position:relative am Zitat — positioniert würde es neben einem
   umflossenen Bild dessen Bildunterschrift überdecken. */
blockquote.quote[data-k2-stelle]::before, .k2-zitat { float: right; width: 44px; height: 44px; margin: -.55rem -.7rem .3rem .8rem; }
blockquote.quote[data-k2-stelle]::before { content: ""; }
blockquote.quote.k2-hat-knopf::before { content: none; }
.k2-zitat { position: relative; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, scale .15s; }
.k2-zitat:hover, .k2-zitat:focus-visible { color: var(--accent); border-color: var(--line); background: var(--bg); }
.k2-zitat:active { scale: .94; }
.k2-zitat .k2-ico { grid-area: 1 / 1; }
.k2-zitat .k2-ico--haken { position: static; }
.k2-zitat.ist-kopiert { color: var(--stimme-kant); }
.k2-zitat__tipp { position: absolute; right: 0; bottom: calc(100% + 6px); white-space: nowrap; padding: .3rem .6rem; border-radius: 8px; background: var(--ink); color: var(--bg);
  font: 600 .78rem/1.3 var(--font-text); font-style: normal; pointer-events: none; opacity: 0; translate: 0 4px; transition: opacity .2s, translate .2s var(--k2-ease); }
.k2-zitat:hover .k2-zitat__tipp, .k2-zitat:focus-visible .k2-zitat__tipp, .k2-zitat.ist-kopiert .k2-zitat__tipp { opacity: 1; translate: 0 0; }

/* ---------- Tempo-Knopf im Vorlese-Balken (site.js) ---------- */
.ra-bar__tempo { min-width: 3.2rem; font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s, scale .15s; }
.ra-bar__tempo:active { scale: .94; }
.ra-bar__tempo[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
@media (max-width: 400px) { .ra-bar__skip.ra-bar__tempo { display: inline-flex; align-items: center; justify-content: center; } }

/* ---------- Hinweis ---------- */
.k2-toast { position: fixed; left: 50%; bottom: 84px; z-index: 120; translate: -50% 12px; max-width: calc(100vw - 32px); padding: .6rem 1rem; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .3s var(--k2-ease); }
.k2-toast.ist-da { opacity: 1; translate: -50% 0; }

@keyframes k2-ein { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes k2-hups { 40% { scale: 1.3; } }

@media (prefers-reduced-motion: reduce) {
  .k2-stimmung, .k2-stimmung__zahl.ist-neu { animation: k2-blende .15s; }
  .k2-stimmung__balken i, .k2-kopierknopf .k2-ico, .k2-dialog, .k2-toast, .k2-zitat__tipp { transition-duration: .15s; transition-property: opacity; }
  .k2-dialog, .k2-dialog[open] { translate: none; scale: none; }
  @keyframes k2-blende { from { opacity: 0; } }
}

@media print {
  .k2-zitat, .k2-link, .k2-toast, .k2-dialog, .k2-stimmung__aktionen, .beamer-toggle { display: none !important; }
  blockquote.quote[data-k2-stelle]::before { content: none; }
  html[data-beamer="1"] main { zoom: 1; }
}