/* =============================================================================
   zufallsrad.css: Werkzeugseite /gluecksrad (/en/wheel-spinner).

   Nur von public/werkzeug.php geladen ($meta['css'], Cache-Marke per
   asset_ver()). Baut auf den Tokens aus styles.css auf, darum folgt der Dark
   Mode von selbst: --paper, --on-paper, --ink, --rule, --muted tauschen dort
   unter :root[data-theme="dark"] und im prefers-color-scheme-Rückfall. Eigene
   Farben stehen nur, wo kein Token passt, und dann für beide Themes.
   color-scheme ist auf der Site erlaubt (Ausnahme von CLAUDE.md Regel 6, die
   nur OBS-Quellen betrifft) und kommt ebenfalls aus styles.css.

   Mobil zuerst: die Grundregeln sind das Telefon, die @media-Blöcke erweitern.
   Klassen der Seite: zr-page, zr-kopf, zr-kopf-zeile, zr-flaeche, zr-app,
   zr-noscript, zr-info, zr-obs. Die übrigen zr-*-Klassen gehören der App
   (src/games/zufallsrad/site.js, Liste im Kopfkommentar dort); .zr-buehne
   ist dort das Rad samt Konfetti, nicht der Seitenabschnitt.
   ============================================================================= */

/* ---- Kopf: schmal, damit das Rad auf dem Telefon oben ankommt ------------- */
.zr-kopf {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: 16px 20px;
}
.zr-kopf .breadcrumb { margin-bottom: 12px; }
.zr-kopf .d-cat {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.zr-kopf h1 {
  font-family: var(--display);
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--on-ink);
  margin-top: 8px;
  overflow-wrap: break-word;
}
.zr-kopf h1 .h1-kw {
  display: block;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted-ink);
  margin-top: 6px;
}
.zr-kopf-zeile {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--on-ink);
  opacity: .82;
  margin-top: 10px;
  max-width: 60ch;
}
/* Am Desktop in einer Zeile: jede Zeile im Kopf fehlt dem Rad in der Höhe
   (siehe --zr-oben unten). */
@media (min-width: 960px) { .zr-kopf-zeile { max-width: 90ch; } }
/* Auf dem Telefon kostet die Zeile eine Bildschirmhöhe-Spanne, die dem Rad
   fehlt; dasselbe sagt die Anleitung unter dem Rad. */
@media (max-width: 560px) {
  .zr-kopf-zeile { display: none; }
  .zr-kopf .d-cat { display: none; }
}

/* ---- Fläche: der Abschnitt mit der App ----------------------------------- */
.zr-flaeche {
  background: var(--paper);
  color: var(--on-paper);
  padding-block: 16px 40px;
}
.zr-flaeche .wrap { padding-inline: 16px; }
@media (min-width: 720px) {
  .zr-flaeche { padding-block: 32px 64px; }
  .zr-flaeche .wrap { padding-inline: var(--gutter); }
}

/* ---- Radgröße und Platzhalter (CLS) --------------------------------------
   Das Rad richtet sich nach der Breite UND nach der Höhe des Fensters: oben
   auf der Seite sollen Rad, Drehen-Knopf und Ergebnis ohne Scrollen zu sehen
   sein. --zr-oben ist der Abstand vom Fensterrand bis zur App (Seitenkopf
   77 px, .zr-kopf, Polster der Fläche), gemessen in Chrome: Telefon 217,
   Desktop 1280 x 900 rund 330 px. --zr-unten ist, was unter dem Rad noch
   Platz braucht (Zeigerpolster 14, Abstand 18, Knopf 60, Ergebnis samt
   Abstand). Der Boden (max(…)) hält das Rad auf sehr flachen Fenstern
   bedienbar groß; dort scrollt man dann zum Ergebnis.

   Vor dem Bündel ist #zr-app leer. Damit Anleitung und FAQ darunter beim
   Einhängen nicht springen, hält min-height den Platz: das Rad samt allem
   bis zum Ergebnis exakt, darunter eine Untergrenze für die Bereiche, die
   sicher unter dem Fensterrand liegt und kleiner bleibt als ihre echte Höhe
   (Telefon rund 1500 px, Desktop rechte Spalte rund 1250 px). Nur mit JS
   (.js setzt head.php): ohne Skript stünde sonst eine leere Fläche über dem
   noscript-Hinweis. */
.zr-app {
  --zr-oben: 225px;
  --zr-unten: 280px;
  --zr-rad: min(100%, 560px, max(240px, 100svh - var(--zr-oben) - var(--zr-unten)));
}
.js #zr-app { min-height: calc(min(100vw - 32px, 560px, max(240px, 100svh - 505px)) + 1200px); }
@media (min-width: 960px) {
  .zr-app {
    --zr-oben: 340px;
    --zr-unten: 200px;
    --zr-rad: min(54% * .92, 560px, max(280px, 100svh - var(--zr-oben) - var(--zr-unten)));
  }
  .js #zr-app { min-height: 1150px; }
}

.zr-noscript {
  font-size: var(--t-body);
  line-height: 1.6;
  max-width: 60ch;
  padding: 16px 18px;
  border: 2px solid var(--on-paper);
}

/* ---- App (src/games/zufallsrad/site.js) ---------------------------------
   Telefon: alles untereinander, das Rad zuerst. Ab 960 px links Rad, Knopf,
   Ergebnis und Meldung, rechts die Bereiche. Gebaut mit float statt Grid:
   die App setzt alle Teile als Geschwister in #zr-app, und in einem Grid
   teilten sich linke und rechte Spalte die Zeilenhöhen (ein langes Feldfeld
   rechts risse Lücken zwischen Rad und Ergebnis links). Floats mit clear
   stapeln links unabhängig von rechts. */
.zr-app {
  display: flow-root;
  color: var(--on-paper);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
}
/* Die App versteckt per [hidden]; jede display-Regel unten würde das sonst
   überstimmen. */
.zr-app [hidden] { display: none !important; }
.zr-app :focus-visible { outline: 3px solid var(--lime-ink); outline-offset: 3px; }

.zr-app .zr-buehne {
  width: var(--zr-rad);
  margin-inline: auto;
  padding-top: 14px;          /* Platz für den Zeiger, der über den Rand ragt */
}
/* Harter Ring um das Rad: der dunkle Außenring der Zeichnung verschwindet
   sonst im Dark Mode auf dem dunklen Papier. Kein weicher Schatten. */
.zr-app .zr-rad { cursor: pointer; border-radius: 50%; box-shadow: 0 0 0 2px var(--on-paper); }
.zr-app[data-zustand="dreht"] .zr-rad { cursor: progress; }

.zr-steuerung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.zr-tastenhinweis {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--muted);
  text-align: center;
}
/* Hinweis, wenn bei vielen Feldern keine Beschriftung ins Rad passt. Steht im
   Fluss unter dem Knopf: er wechselt nur, wenn sich die Felder ändern (Tippen,
   Rad wählen), also nach einer Eingabe, die CLS nicht zählt. Am Desktop liegt
   er in der Knopfspalte, neben dem Ergebnis, und schiebt keine Bereiche. */
.zr-steuerung .zr-rad-hinweis { margin-top: 0; max-width: 40ch; text-align: center; }
/* Auf Touch-Geräten gibt es keine Leertaste. */
@media (hover: none) { .zr-tastenhinweis { display: none; } }

/* Knöpfe: gleiche Sprache wie .btn der Site, aber kompakter. Mindestens 44 px
   hoch (Touch-Ziel). */
.zr-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--on-paper);
  background: transparent;
  border: 2px solid var(--on-paper);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.zr-knopf:hover { background: var(--on-paper); color: var(--paper); }
.zr-knopf:disabled, .zr-knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.zr-knopf:disabled:hover, .zr-knopf[aria-disabled="true"]:hover { background: transparent; color: var(--on-paper); }

/* Der eine primäre Knopf der Seite: Lime nur hier (Akzent = Handlung). */
.zr-knopf-primaer {
  width: 100%;
  max-width: 360px;
  min-height: 60px;
  padding: 14px 32px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0e0e10;
  background: var(--lime);
  border-color: var(--lime);
}
.zr-knopf-primaer:hover { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); }
.zr-knopf-primaer[aria-disabled="true"],
.zr-knopf-primaer[aria-disabled="true"]:hover { opacity: .6; cursor: progress; background: var(--lime); color: #0e0e10; border-color: var(--lime); }

.zr-knopf-gefahr { background: #b3261e; border-color: #b3261e; color: #fff; }
.zr-knopf-gefahr:hover { background: #8c1d17; border-color: #8c1d17; color: #fff; }

/* Ergebnis: groß, damit es auch über den Raum gelesen werden kann.
   Sein Platz ist immer reserviert. Die App versteckt es per [hidden]; hier
   bleibt es dann im Fluss und ist nur unsichtbar (visibility:hidden nimmt es
   wie display:none aus dem Bedienbaum, ein Screenreader liest nichts davon,
   der Knopf darin ist nicht erreichbar). Sonst schöbe jedes Ergebnis die
   Bereiche darunter weg (CLS). Dasselbe für den Knopf "Gewinner entfernen"
   und für die Meldungszeile darunter: die kommt bei "Gewinner nach jedem
   Dreh entfernen" ohne Klick, 1,6 s nach dem Ergebnis. */
.zr-app > .zr-ergebnis[hidden] { display: block !important; visibility: hidden; }
.zr-app .zr-ergebnis > .zr-gewinner-entfernen[hidden] { display: inline-flex !important; visibility: hidden; }
.zr-app > .zr-meldung[hidden] { display: flex !important; visibility: hidden; }
/* Das Angebot für ein geteiltes Rad ist auch eine .zr-meldung, bekommt aber
   keinen reservierten Platz: es erscheint nur beim Laden mit einem geteilten
   Link (mit dem ersten Aufbau, also ohne Sprung) und verschwindet per Klick.
   Solange es steht, gibt die leere Meldungszeile darüber ihren Platz ab,
   sonst stünde das Angebot unter einem Loch. */
.zr-app > .zr-meldung.zr-angebot[hidden] { display: none !important; }
.zr-app > .zr-meldung[hidden]:has(+ .zr-angebot:not([hidden])) { display: none !important; }
.zr-angebot .zr-knopfreihe { margin-top: 0; }
/* Telefon: unter dem leeren Ergebnisplatz läge das Angebot unter dem
   Fensterrand. Bis es beantwortet ist, gibt auch der Ergebnisplatz nach.
   Dreht jemand, ohne zu antworten, springt es einmal; das ist die bewusste
   Ausnahme, das Angebot zu sehen ist wichtiger. */
@media (max-width: 959px) {
  .zr-app > .zr-ergebnis[hidden]:has(~ .zr-angebot:not([hidden])) { display: none !important; }
}
/* Die freie Meldungszeile soll unter dem Ergebnis nicht wie ein Loch wirken. */
.zr-app > .zr-meldung + .zr-panel,
.zr-app > .zr-angebot + .zr-panel { margin-top: 18px; }
.zr-ergebnis {
  margin-top: 18px;
  padding: 16px 18px;
  text-align: center;
  background: var(--paper-2);
  border: 2px solid var(--on-paper);
}
.zr-ergebnis-titel {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.zr-ergebnis-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  margin-top: 6px;
  min-height: 1.1em;          /* eine Zeile, auch solange der Text leer ist */
  overflow-wrap: anywhere;
}
.zr-ergebnis .zr-gewinner-entfernen { margin-top: 14px; }
/* Nach "Gewinner entfernen" bleibt die Karte stehen, als entfernt kenntlich:
   Text durchgestrichen und gedämpft, statt des Knopfs ein Vermerk in genau
   der Höhe des Knopfs (44 px, gleicher Abstand), damit nichts springt. Der
   reservierte Platz des versteckten Knopfs fällt dann weg. */
.zr-ergebnis[data-entfernt="true"] .zr-ergebnis-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
.zr-ergebnis-vermerk {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--muted);
}
.zr-app .zr-ergebnis > .zr-ergebnis-vermerk:not([hidden]) + .zr-gewinner-entfernen[hidden] { display: none !important; }

.zr-meldung {
  min-height: 72px;           /* Text plus Rückgängig-Knopf, mit und ohne Knopf gleich hoch */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 2px solid var(--on-paper);
}
/* Fehler: derselbe harte Rand ringsum, nur in Rot; kein einseitiger Akzent. */
.zr-meldung[data-art="fehler"] { border-color: #b3261e; }
.zr-meldung-text { flex: 1 1 16ch; }
.zr-teilen-link { display: grid; gap: 6px; width: 100%; font-family: var(--mono); font-size: var(--t-label); }

/* Bereiche */
.zr-panel { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--on-paper); }
.zr-panel-titel {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.zr-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  margin-bottom: 6px;
}
/* 16 px Schrift in Feldern: darunter zoomt iOS Safari beim Antippen. */
.zr-felder-text, .zr-eingabe, .zr-profil-auswahl {
  display: block;
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--on-paper);
  background: var(--paper-2);
  border: 2px solid var(--on-paper);
  border-radius: 0;
  padding: 10px 12px;
}
.zr-felder-text { min-height: 12em; resize: vertical; }
.zr-profil-auswahl { min-height: 48px; }
.zr-hinweis { font-size: 16px; color: var(--muted); margin-top: 8px; }
.zr-felder-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 12px;
}
.zr-felder-fuss .zr-knopfreihe { margin-top: 0; }
.zr-felder-anzahl { font-family: var(--mono); font-size: var(--t-label); color: var(--muted); }
.zr-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zr-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  cursor: pointer;
}
.zr-schalter input { width: 22px; height: 22px; flex: none; accent-color: var(--lime-ink); }
.zr-import { margin-top: 8px; }
.zr-datei { position: relative; }
.zr-datei:focus-within { outline: 3px solid var(--lime-ink); outline-offset: 3px; }
.zr-profil-form, .zr-bestaetigen { margin-top: 12px; }
.zr-bestaetigen p { font-weight: 600; }

/* Der Verlauf wächst mit jedem Dreh, ohne Klick (das Ergebnis kommt Sekunden
   danach). Darum ein fester Kasten für vier Zeilen, der darüber scrollt, und
   die leere Ansage gleich hoch; der Knopf "Liste leeren" hält seinen Platz. */
.zr-verlauf-liste, .zr-verlauf-leer { height: calc(4 * (1.5em + 13px)); overflow-y: auto; }
.zr-verlauf-liste { margin: 0; padding-left: 1.6em; }
.zr-app .zr-verlauf > .zr-knopf { margin-top: 12px; }
.zr-app .zr-verlauf > .zr-knopf[hidden] { display: inline-flex !important; visibility: hidden; }
.zr-verlauf-liste li { padding: 6px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.zr-verlauf-profil {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
}
.zr-verlauf-leer { color: var(--muted); }

/* Ab 960 px: Rad links, Bereiche rechts. Unter dem Rad stehen Knopf und
   Ergebnis nebeneinander, damit beides oben auf der Seite ins Fenster passt;
   das Rad ist in der Spalte zentriert (Polster statt Breite, die Spalte
   bleibt 54 %). */
@media (min-width: 960px) {
  .zr-app > .zr-buehne,
  .zr-app > .zr-meldung {
    float: left;
    clear: left;
    width: 54%;
    max-width: none;
  }
  .zr-app > .zr-buehne {
    margin-inline: 0;
    padding-inline: calc((54% - var(--zr-rad)) / 2);
  }
  .zr-app > .zr-steuerung {
    float: left;
    clear: left;
    width: calc(54% * .4);
    align-items: stretch;
  }
  .zr-app > .zr-steuerung .zr-knopf-primaer { max-width: none; padding-inline: 16px; }
  .zr-app > .zr-ergebnis {
    float: left;
    width: calc(54% * .6 - 16px);
    margin-left: 16px;
    padding: 12px 16px;
  }
  .zr-app > .zr-ergebnis .zr-ergebnis-text { font-size: clamp(28px, 2.6vw, 40px); margin-top: 2px; }
  .zr-app > .zr-ergebnis .zr-gewinner-entfernen,
  .zr-app > .zr-ergebnis .zr-ergebnis-vermerk { margin-top: 10px; }
  .zr-app > .zr-panel { margin-left: calc(54% + 48px); }
  .zr-app > .zr-panel.zr-felder { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---- Anleitung und FAQ ---------------------------------------------------- */
.zr-info { border-top: 1px solid var(--rule); }
.zr-info .guide-wrap > section + section { margin-top: clamp(40px, 6vw, 68px); }
.zr-info .block-title { margin-bottom: 16px; }

/* ---- Hinweis aufs Overlay (tool_obs_hint, nur wenn das Overlay live ist) ---
   Ein Kasten mit hartem Rand ringsum statt eines zweiten gefüllten Knopfs: der
   primäre Knopf der Seite bleibt "Drehen". Kein einseitiger Akzentrand. */
.zr-obs {
  border: 2px solid var(--on-paper);
  padding: 18px 20px 20px;
}
.zr-obs p { max-width: 60ch; line-height: 1.6; margin: 0 0 16px; }