:root {
  --hena-scale-wide: clamp(1, calc(0.58 + 100vw / 2400px), 1.65);
  --hena-scale-narrow: clamp(1, calc(0.8 + 100vw / 5200px), 1.3);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--megura-bg);
  color: var(--megura-fg);
  font-family: var(--megura-font-regular);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* Texte muessen sich markieren und mit Cmd+C kopieren lassen: Das Personal holt
     am Anlass Namen und Texte aus der App heraus. Bedienflaechen bleiben
     unmarkierbar – sonst schmiert beim Tippen auf dem Touchscreen eine blaue
     Markierung ueber die Knoepfe. */
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

body { cursor: default; }

/* Die Zeichenflaeche bleibt unmarkierbar: Ein Strich darueber soll zeichnen und
   nicht den Text daneben markieren. Alles andere – auch Knopfbeschriftungen –
   laesst sich markieren und kopieren. */
canvas {
  -webkit-user-select: none;
  user-select: none;
}

/* Schieberegler und Kaestchen sind keine Textfelder und behalten den Zeiger. */
input:not([type='range']):not([type='checkbox']):not([type='radio']),
textarea {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

[hidden] { display: none !important; }

/* Gemeinsamer Seitenabstand: Einstellungen-Button und Inhalt stehen auf
   derselben Linie – so wirkt die Startseite so ruhig wie die Spiele. */
:root {
  --hena-gutter: clamp(32px, 6.5vw, 200px);
}

/* ───────────────────────────────────────────────────────────────────────────
   Der Verbindungspunkt oben rechts. Er soll niemanden ablenken: ein Punkt,
   daneben ein kurzes Wort. Alles Weitere steht in den Einstellungen unter
   «Geräte & Abgleich».
   ─────────────────────────────────────────────────────────────────────────── */

.syncpunkt {
  position: fixed;
  z-index: 20;
  top: 34px;
  right: var(--hena-gutter);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}

.syncpunkt__punkt {
  width: 9px;
  height: 9px;
  border-radius: var(--megura-radius-full);
  background: var(--megura-fg-muted);
  box-shadow: 0 0 0 0 rgba(47, 163, 96, 0.45);
}

.syncpunkt__text {
  font-family: var(--megura-font-regular);
  font-size: 12px;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-fg-muted);
}

.syncpunkt[data-stand='verbunden'] .syncpunkt__punkt { background: #2fa360; animation: syncpuls 2.4s var(--megura-ease) infinite; }
.syncpunkt[data-stand='allein'] .syncpunkt__punkt { background: var(--megura-color-sec); }
.syncpunkt[data-stand='fehler'] .syncpunkt__punkt { background: #e0362a; }

@keyframes syncpuls {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(47, 163, 96, 0); }
  35% { box-shadow: 0 0 0 6px rgba(47, 163, 96, 0.28); }
}

.home {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Oben etwas weniger Luft als früher: der Platz gehört der Karte in der Mitte. */
  padding: 60px var(--hena-gutter) 34px;
  gap: 22px;
}

.home__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--megura-space-1);
}

.home__eyebrow {
  font-family: var(--megura-font-regular);
  font-size: 0.85rem;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-sec);
  margin: 0;
}

/* Der Titel steht immer auf einer Zeile (29.10.: «oben links auf einer Zeile»). Die Schrift rechnet sich aus der freien Breite
   (der Standardtext ist 29 Zeichen lang, rund 15 Schriftbreiten); ein zu langer eigener Text wird gekürzt, statt die Seite zu verbreitern. */
.home__title {
  font-family: var(--megura-font-bold);
  font-size: clamp(1.5rem, calc((100vw - 2 * var(--hena-gutter)) / 15.5), 3.4rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 100%;
  color: var(--megura-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home__intro {
  max-width: 570px;
  margin: 10px 0 0;
  color: var(--megura-fg);
  font: 400 19px/1.4 var(--megura-font-light);
}

/* ───────────────────────────────────────────────────────────────────────────
   Karussell – ein Spiel gross in der Mitte, die beiden Nachbarn links und
   rechts angeschnitten. Wer weiterblättert, sieht immer schon, was kommt.
   ─────────────────────────────────────────────────────────────────────────── */

.karussell {
  position: relative;
  flex: 1;
  min-height: 0;
  animation: karussell-in .5s var(--megura-ease) both;
}

@keyframes karussell-in { from { opacity: 0; transform: translateY(12px); } }

.karussell__buehne {
  position: relative;
  height: 100%;
  min-height: 0;
  /* Was über den Rand hinausragt, wird angeschnitten – und zwar weich. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.karussell__karte {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Fast quadratisch: darüber liegt das Spielbild im Format 16:10, darunter der
     Streifen mit dem Namen. So wird nie ein Stück Spielbild abgeschnitten. */
  height: min(100%, 700px);
  aspect-ratio: 103 / 100;
  width: auto;
  max-width: 46%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-md);
  background: var(--megura-bg);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  /* Der Versatz zählt in eigenen Kartenbreiten – so bleibt der Abstand gleich,
     egal wie breit der Bildschirm ist. */
  transform: translate(-50%, -50%) translateX(calc(var(--versatz, 0) * 110%)) translateX(var(--zug, 0px)) scale(var(--groesse, 1));
  transition: transform .55s var(--megura-ease), opacity .55s var(--megura-ease), border-color .35s var(--megura-ease);
}

/* Wischen (app.js): Die Startseite gehört der Wischgeste – senkrecht passiert nichts (die Seite scrollt nie), waagrecht übernimmt
   das Karussell. Ohne das fängt der Browser auf grossen Bildschirmen die Berührung ab und meldet sie als abgebrochen.
   Beim Ziehen folgen die Karten dem Finger sofort (--zug, ohne Übergang) und nichts wird markiert. */
.home, .home * { touch-action: pan-y; }
.home--zieht, .home--zieht * { -webkit-user-select: none; user-select: none; }
.home--zieht .karussell__karte { transition: none; }
.karussell__bild { -webkit-user-drag: none; }

/* Die Karte in der Mitte ist rund ein Drittel grösser als ihre Nachbarn – nahe
   genug, dass die Nachbarn erkennbar bleiben, deutlich genug, dass klar ist,
   welches Spiel gerade zur Wahl steht. .77 ist der Kehrwert von 1.3. */
.karussell__karte[data-stand='aktiv'] { --groesse: 1; opacity: 1; z-index: 3; }
.karussell__karte[data-stand='nachbar'] { --groesse: .77; opacity: .5; z-index: 2; }
.karussell__karte[data-stand='fern'] { --groesse: .58; opacity: 0; z-index: 1; pointer-events: none; }

.karussell__karte[data-stand='aktiv']:hover,
.karussell__karte:focus-visible { border-color: var(--megura-color-accent); }
.karussell__karte:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 4px; }

/* Oben das echte Spielbild, unten ein ruhiges Feld für den Namen: der Titel
   liegt nie über den Knöpfen des Spiels und bleibt immer lesbar. */
.karussell__bild {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64%;
  object-fit: cover;
}

.karussell__folie {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 11%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--megura-bg));
}

.karussell__text {
  position: absolute;
  left: clamp(20px, 4%, 38px);
  right: clamp(20px, 4%, 38px);
  bottom: clamp(16px, 3.4%, 30px);
  display: grid;
  justify-items: start;
  gap: 5px;
}

.karussell__nummer {
  font-family: var(--megura-font-regular);
  font-size: .78rem;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-sec);
}

.karussell__titel {
  font-family: var(--megura-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  color: var(--megura-fg);
}

.karussell__beschrieb {
  font: 400 clamp(.9rem, 1.15vw, 1.05rem)/1.35 var(--megura-font-light);
  color: var(--megura-fg-muted);
}

/* Aussehen und Verhalten kommen aus dem Designsystem (megura-btn--solid --sm).
   Angeklickt wird die ganze Karte – die Pille zeigt nur, was passiert. */
.karussell__cta {
  margin-top: 9px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--megura-ease), transform .4s var(--megura-ease),
    background-color var(--megura-duration) var(--megura-ease), color var(--megura-duration) var(--megura-ease);
}

.karussell__karte[data-stand='aktiv'] .karussell__cta { opacity: 1; transform: none; }

.karussell__karte[data-stand='aktiv']:hover .karussell__cta {
  background: var(--megura-fg);
  color: var(--megura-bg);
  border-color: var(--megura-fg);
}

.karussell__marke {
  position: absolute;
  top: clamp(14px, 3%, 26px);
  right: clamp(14px, 3%, 26px);
  padding: 5px 12px;
  border-radius: var(--megura-radius-pill);
  background: rgba(0, 0, 0, .6);
  font-size: .68rem;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-sec);
}

.karussell__karte[data-frei='nein'] .karussell__bild { filter: grayscale(1) brightness(.5); }

.karussell__pfeil {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-full);
  background: rgba(8, 8, 8, .72);
  color: var(--megura-fg);
  cursor: pointer;
  transition: background-color .3s var(--megura-ease), border-color .3s var(--megura-ease), color .3s var(--megura-ease);
}

.karussell__pfeil--zurueck { left: 0; }
.karussell__pfeil--vor { right: 0; }

.karussell__pfeil svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.karussell__pfeil:hover,
.karussell__pfeil:focus-visible {
  background: var(--megura-color-accent);
  border-color: var(--megura-color-accent);
  color: var(--megura-color-accent-contrast);
}

.karussell__pfeil:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

.karussell__punkte {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 10px;
}

.karussell__punkt {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: var(--megura-radius-pill);
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  transition: width .4s var(--megura-ease), background-color .4s var(--megura-ease);
}

.karussell__punkt[aria-selected='true'] { width: 28px; background: var(--megura-color-accent); }
.karussell__punkt:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

@media (max-height: 720px) and (min-width: 701px) {
  .home { padding-top: 58px; padding-bottom: 18px; gap: 15px; }
  .home__title { font-size: clamp(1.4rem, calc((100vw - 2 * var(--hena-gutter)) / 15.5), 2.6rem); }
  .home__intro { margin-top: 2px; font-size: 16px; }
  .karussell__karte { max-width: 42%; }
  .karussell__pfeil { width: 48px; height: 48px; }
}

.home__status {
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--megura-fg-muted);
}
/* ───────────────────────────────────────────────────────────────────────────
   Einstellungen – ein Fenster über der Startseite, nicht eine neue Seite.
   Die Startseite bleibt gedämpft sichtbar, der Fensterkopf zeigt als Pfad
   immer an, wo man gerade ist und woher man kam.
   ─────────────────────────────────────────────────────────────────────────── */

.settings {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Rückfall für Browser vor Chromium 87 (Samsung/Tizen): sie kennen «inset» nicht, die Ebene bliebe sonst unsichtbar unter dem Bildschirm */
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3.4vh, 48px) clamp(18px, 3vw, 64px);
}

.settings__scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* Rückfall für Browser vor Chromium 87 (Samsung/Tizen): sie kennen «inset» nicht, die Ebene bliebe sonst unsichtbar unter dem Bildschirm */
  inset: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(3px);
  animation: scrim-in .3s var(--megura-ease) both;
}

@keyframes scrim-in { from { opacity: 0; } }

.settings__window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1560px, 100%);
  height: min(940px, 100%);
  overflow: hidden;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-md);
  background: var(--megura-bg);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .72);
  animation: settings-in .34s var(--megura-ease) both;
}

@keyframes settings-in { from { opacity: 0; transform: translateY(14px) scale(.99); } }

/* Fensterkopf mit Pfad */
.settings__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--megura-space-3);
  flex: 0 0 auto;
  padding: clamp(18px, 2.2vh, 26px) var(--hena-window-pad);
  border-bottom: 1px solid var(--megura-border);
}

:root { --hena-window-pad: clamp(24px, 2.6vw, 52px); }

.settings__ident { min-width: 0; display: flex; flex-direction: column; gap: 9px; }

.settings__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--megura-font-bold);
  font-size: 12px;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-accent);
}

.settings__kicker::before { content: ''; width: 24px; height: 1px; background: currentColor; }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }

.crumbs__step {
  padding: 0;
  border: 0;
  background: none;
  color: var(--megura-fg-muted);
  font-family: var(--megura-font-regular);
  font-size: clamp(14px, 1.3vmin, 16px);
  line-height: 1.2;
  transition: color var(--megura-duration) var(--megura-ease);
}

button.crumbs__step { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .25); }
button.crumbs__step:hover { color: var(--megura-fg); text-decoration-color: var(--megura-color-accent); }
button.crumbs__step:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }
.crumbs__step.is-current { color: var(--megura-fg); font-family: var(--megura-font-bold); }
.crumbs__sep { color: #5e5e5e; font-size: 14px; }

.settings__x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-full);
  background: transparent;
  color: var(--megura-fg);
  cursor: pointer;
  /* Rund statt Pille, weil nur ein Kreuz darin steht – sonst genau wie jeder Megura-Knopf. */
  transition: background-color var(--megura-duration) var(--megura-ease),
              color var(--megura-duration) var(--megura-ease),
              border-color var(--megura-duration) var(--megura-ease),
              transform var(--megura-duration) var(--megura-ease);
}

.settings__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.settings__x:hover { background: var(--megura-fg); color: var(--megura-bg); border-color: var(--megura-fg); }

.settings__x:active { transform: scale(.97); }
.settings__x:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

/* Fensterinhalt: die beiden Stufen wechseln sich hier ab */
.settings__body { position: relative; flex: 1; min-height: 0; }

.settings__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.8vh, 40px) var(--hena-window-pad) clamp(18px, 2.2vh, 30px);
  animation: screen-vor .3s var(--megura-ease) both;
}

/* Die Bewegung zeigt die Richtung: hinein nach links, zurück nach rechts. */
@keyframes screen-vor { from { opacity: 0; transform: translateX(28px); } }
@keyframes screen-zurueck { from { opacity: 0; transform: translateX(-28px); } }
.settings__body.is-back .settings__screen { animation-name: screen-zurueck; }
.settings__body.is-start .settings__screen { animation-name: settings-in; }

/* Fensterfuss */
.settings__foot {
  display: flex;
  align-items: center;
  gap: var(--megura-space-3);
  flex: 0 0 auto;
  padding: clamp(16px, 2vh, 24px) var(--hena-window-pad);
  border-top: 1px solid var(--megura-border);
}

.settings__status { flex: 1; color: var(--megura-fg-muted); font-size: 15px; text-align: right; }

.settings__dirty {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--megura-color-accent);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings__dirty::before { content: ''; width: 7px; height: 7px; border-radius: var(--megura-radius-full); background: currentColor; }

/* Gemeinsame Grundformen ---------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--megura-font-bold);
  font-size: 13px;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-accent);
}

.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }

.lead { margin: 0; color: var(--megura-fg-muted); font-size: clamp(15px, 1.35vmin, 18px); line-height: 1.5; }

/* Einziger Zusatz zum Designsystem-Knopf: Loeschen ist rot, damit es sich vom
   Speichern abhebt. Es steht von Anfang an gefuellt da – wer eine Rangliste leert,
   soll das sehen, bevor er hinfaehrt. Beim Darueberfahren dreht es um wie jeder
   Megura-Knopf: aus gefuellt wird hell. Form, Groesse, Uebergang und Klick-Verhalten
   bleiben die des Designsystems. */
.btn--danger { background: #e0362a; border-color: #e0362a; color: var(--megura-color-white); }

.btn--danger:hover { background: var(--megura-color-white); border-color: var(--megura-color-white); color: #e0362a; }


.ghostlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--megura-color-accent);
  font-family: var(--megura-font-regular);
  font-size: 16px;
  cursor: pointer;
}

.ghostlink--back::before {
  content: '←';
  font-family: var(--megura-font-light);
  transition: transform var(--megura-duration) var(--megura-ease);
}

.ghostlink:hover::before { transform: translateX(-4px); }
.ghostlink:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 4px; }

/* Übersicht ----------------------------------------------------------------- */

.overview__head { flex: 0 0 auto; margin-bottom: clamp(18px, 2.4vh, 32px); }

.overview__head h2 {
  margin: 0;
  font-family: var(--megura-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vmin, 2.7rem);
  line-height: var(--megura-line-tight);
  letter-spacing: -.02em;
}

.overview__head .lead { margin-top: 12px; max-width: 52ch; }

.overview__list { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.scope-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  flex: 1;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--megura-border);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  animation: row-in .4s var(--megura-ease) both;
}

.scope-row:last-child { border-bottom: 1px solid var(--megura-border); }
.scope-row:nth-child(2) { animation-delay: 40ms; }
.scope-row:nth-child(3) { animation-delay: 80ms; }
.scope-row:nth-child(4) { animation-delay: 120ms; }
.scope-row:nth-child(5) { animation-delay: 160ms; }
.scope-row:nth-child(6) { animation-delay: 200ms; }

.scope-row__ghost {
  flex: 0 0 auto;
  width: clamp(56px, 5vw, 88px);
  font-family: var(--megura-font-display);
  font-size: clamp(1.6rem, 2.7vmin, 2.4rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26);
  transition: color var(--megura-duration) var(--megura-ease),
              -webkit-text-stroke-color var(--megura-duration) var(--megura-ease);
}

.scope-row:hover .scope-row__ghost,
.scope-row:focus-visible .scope-row__ghost {
  color: var(--megura-color-accent);
  -webkit-text-stroke-color: var(--megura-color-accent);
}

.scope-row__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.scope-row__title {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-family: var(--megura-font-display);
  font-size: clamp(1.1rem, 1.8vmin, 1.5rem);
  line-height: 1.1;
}

.scope-row__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--megura-color-accent);
  transition: width var(--megura-duration) var(--megura-ease);
}

.scope-row:hover .scope-row__title::after,
.scope-row:focus-visible .scope-row__title::after { width: 100%; }

.scope-row__meta {
  color: var(--megura-fg-muted);
  font-size: clamp(13px, 1.2vmin, 15px);
  transition: color var(--megura-duration) var(--megura-ease);
}

.scope-row:hover .scope-row__meta { color: #ccc; }

.scope-row__arrow {
  flex: 0 0 auto;
  font-family: var(--megura-font-light);
  font-size: clamp(1.2rem, 1.9vmin, 1.6rem);
  color: var(--megura-fg-muted);
  transition: transform var(--megura-duration) var(--megura-ease),
              color var(--megura-duration) var(--megura-ease);
}

.scope-row:hover .scope-row__arrow,
.scope-row:focus-visible .scope-row__arrow { color: var(--megura-color-accent); transform: translate(4px, -4px); }

.scope-row:focus-visible { outline: none; }

/* Geöffneter Bereich -------------------------------------------------------- */

.detail__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  margin-bottom: clamp(18px, 2.6vh, 34px);
}

#settings-game-title {
  margin: 0;
  font-family: var(--megura-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vmin, 2.5rem);
  line-height: var(--megura-line-tight);
  letter-spacing: -.02em;
}

.detail__body {
  display: grid;
  grid-template-columns: clamp(186px, 14vw, 248px) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 68px);
  flex: 1;
  min-height: 0;
}

/* Kapitelspalte */
.chapters { display: flex; flex-direction: column; align-content: start; }

.chapter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 1.7vh, 21px) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: none;
  color: var(--megura-fg-muted);
  font-family: var(--megura-font-regular);
  font-size: clamp(15px, 1.5vmin, 18px);
  text-align: left;
  cursor: pointer;
  transition: color var(--megura-duration) var(--megura-ease),
              border-color var(--megura-duration) var(--megura-ease);
}

.chapter:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.chapter:hover { color: var(--megura-fg); }
.chapter:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 2px; }

.chapter__meta {
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: .06em;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.chapter.is-active {
  color: var(--megura-fg);
  font-family: var(--megura-font-bold);
  border-top-color: var(--megura-color-accent);
}

.chapter.is-active .chapter__meta { color: var(--megura-color-accent); font-family: var(--megura-font-regular); }

/* Inhaltsfeld */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.panel__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--megura-space-4);
  flex: 0 0 auto;
  padding-bottom: clamp(14px, 1.8vh, 22px);
}

.panel__heading { min-width: 0; }

.panel__title {
  margin: 0;
  font-family: var(--megura-font-display);
  font-size: clamp(1.2rem, 2vmin, 1.7rem);
  line-height: 1.1;
}

.panel__count { margin: 8px 0 0; color: var(--megura-fg-muted); font-size: clamp(13px, 1.2vmin, 15px); }

.searchline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 300px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--megura-border);
  color: var(--megura-fg-muted);
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.searchline:focus-within { border-bottom-color: var(--megura-color-accent); }
.searchline__icon { display: flex; }
.searchline__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.searchline input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--megura-fg);
  font-family: var(--megura-font-regular);
  font-size: 16px;
}

.searchline input::placeholder { color: #6f6f6f; }
.searchline input:focus-visible { outline: none; }
.searchline input::-webkit-search-cancel-button { -webkit-appearance: none; }

.settings__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.settings__list::-webkit-scrollbar { width: 3px; }
.settings__list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

.settings__list.is-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 18vw, 280px), 1fr)); column-gap: clamp(20px, 2.2vw, 40px); align-content: start; }
.settings__list.is-texts { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 26vw, 430px), 1fr)); column-gap: clamp(24px, 2.8vw, 52px); align-content: start; }

.settings__empty { grid-column: 1 / -1; margin: 18px 0 0; color: var(--megura-fg-muted); }

/* Inhalte: Haken nur als Umriss ----------------------------------------------
   «Angehakt» steht als Klasse .content-toggle--an an der Zeile (app.js), nicht über :has():
   ältere Browser (Samsung/Tizen vor Chromium 105) kennen :has() nicht, und die Häkchen blieben unsichtbar. */

.content-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(11px, 1.4vh, 16px) 2px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.content-toggle:hover { border-top-color: rgba(255, 255, 255, .34); }
.content-toggle:has(input:focus-visible) { outline: 2px solid var(--megura-color-accent); outline-offset: 2px; }

/* Der Haken ist ein eigenes Etikett mit grosszügiger Trefferfläche; der Name daneben
   ist ein Knopf und öffnet das Detailfenster.
   «position: relative» ist wichtig: Das unsichtbare Eingabefeld darin ist absolut gesetzt. Ohne diesen Anker
   hängt es am ganzen Fenster, bleibt beim Scrollen der Liste an seiner alten Stelle, und der Klick auf einen
   Haken weit unten schob das gesamte Einstellungsfenster aus dem Bild (leeres schwarzes Fenster). */
.content-toggle__check {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin: calc(-1 * clamp(6px, 1vh, 10px)) -6px;
  padding: clamp(6px, 1vh, 10px) 6px;
  cursor: pointer;
}

.content-toggle input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.content-toggle__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--megura-radius-sm);
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.content-toggle__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--megura-color-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--megura-duration) var(--megura-ease),
              transform var(--megura-duration) var(--megura-ease);
}

.content-toggle--an .content-toggle__box { border-color: var(--megura-color-accent); }
.content-toggle--an .content-toggle__box svg { opacity: 1; transform: scale(1); }
.content-toggle:hover .content-toggle__box { border-color: rgba(255, 255, 255, .55); }
.content-toggle--an:hover .content-toggle__box { border-color: var(--megura-color-accent); }

.content-toggle__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--megura-fg-muted);
  font-size: clamp(15px, 1.4vmin, 17px);
  transition: color var(--megura-duration) var(--megura-ease);
}

.content-toggle--an .content-toggle__label { color: var(--megura-fg); }

.content-toggle__name {
  flex: 1 1 auto;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.content-toggle__name:hover,
.content-toggle--an .content-toggle__name:hover { color: var(--megura-color-accent); }
.content-toggle__name:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 2px; }

/* Spieleauswahl: rechts steht, wenn ein Spiel gerade nicht in der Auswahl ist. */
.content-toggle__stand {
  flex: 0 0 auto;
  color: var(--megura-fg-muted);
  font-size: clamp(13px, 1.2vmin, 15px);
}
.settings__list.is-spiele { max-width: 640px; }

/* Runden & Zeiten: Haarlinien-Regler ----------------------------------------- */

.timing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 3.4vh, 42px) 2px;
  border-top: 1px solid var(--megura-border);
}

.timing-row:last-child { border-bottom: 1px solid var(--megura-border); }
.timing-row__copy { display: grid; gap: 8px; min-width: 0; }
.timing-row__label { font-family: var(--megura-font-display); font-size: clamp(1.1rem, 1.8vmin, 1.55rem); }
.timing-row__hint { color: var(--megura-fg-muted); font-size: clamp(14px, 1.3vmin, 16px); }

.stepper { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); flex: 0 0 auto; }

.stepper__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-full);
  background: transparent;
  color: var(--megura-fg-muted);
  font-family: var(--megura-font-light);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--megura-duration) var(--megura-ease),
              border-color var(--megura-duration) var(--megura-ease),
              transform var(--megura-duration) var(--megura-ease);
}

.stepper__btn:hover:not(:disabled) { color: var(--megura-fg); border-color: var(--megura-fg); }
.stepper__btn:active:not(:disabled) { transform: scale(.94); }
.stepper__btn:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }
.stepper__btn:disabled { opacity: .3; cursor: default; }

.stepper__core { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.stepper__val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 116px;
  font-family: var(--megura-font-display);
  font-size: clamp(2rem, 3.4vmin, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--megura-color-accent);
  font-variant-numeric: tabular-nums;
}

.stepper__val small { font-family: var(--megura-font-light); font-size: 18px; color: var(--megura-fg-muted); }
.stepper__val:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 6px; }

.scale { display: flex; gap: 7px; cursor: pointer; padding: 6px 0; }
.scale i { width: 15px; height: 3px; background: rgba(255, 255, 255, .2); transition: background var(--megura-duration) var(--megura-ease); }
.scale i.on { background: var(--megura-color-accent); }
.scale--fein { gap: 4px; }
.scale--fein i { width: 8px; }

/* Texte & Bild -------------------------------------------------------------- */

.text-group {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(28px, 3.4vh, 44px) 0 6px;
  font-family: var(--megura-font-bold);
  font-size: 13px;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-color-accent);
}

.text-group::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.settings__list.is-texts > .text-group:first-child { margin-top: 0; }

.text-field { padding: clamp(14px, 1.8vh, 20px) 2px; border-top: 1px solid rgba(255, 255, 255, .12); }
.text-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.text-field__label {
  color: var(--megura-fg-muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--megura-duration) var(--megura-ease);
}

.text-field.is-changed .text-field__label { color: var(--megura-color-accent); }

.text-field__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--megura-fg-muted);
  font-family: var(--megura-font-regular);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--megura-duration) var(--megura-ease);
}

.text-field__reset:hover { color: var(--megura-fg); }
.text-field__reset:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

.text-field__input {
  width: 100%;
  margin-top: 10px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--megura-fg);
  font-family: var(--megura-font-regular);
  font-size: clamp(15px, 1.4vmin, 17px);
  line-height: 1.45;
  resize: vertical;
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.text-field__input::placeholder { color: #5e5e5e; }
.text-field__input:hover { border-bottom-color: rgba(255, 255, 255, .18); }
.text-field__input:focus-visible { outline: none; border-bottom-color: var(--megura-color-accent); }

.text-field__hint { margin: 8px 0 0; color: #6f6f6f; font-size: 12px; line-height: 1.5; }

/* Fehlender Platzhalter: der Text bleibt bedienbar, die Stelle wird aber deutlich markiert. */
.text-field__hint--fehler { color: var(--megura-color-accent); }
.text-field.is-invalid .text-field__input { border-bottom-color: var(--megura-color-accent); }
.text-field.is-invalid .text-field__label { color: var(--megura-color-accent); }

/* Hinweiszeile für Texte, die mehrere Spiele teilen. */
.text-field__sync {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.text-field__sync-note { margin: 0; color: #6f6f6f; font-size: 12px; line-height: 1.5; }
.text-field.is-synced .text-field__sync-note { color: var(--megura-fg-muted); }

.text-field__sync-note::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border: 1px solid #6f6f6f;
  border-radius: 50%;
  vertical-align: middle;
}

.text-field.is-synced .text-field__sync-note::before {
  border-color: var(--megura-color-accent);
  background: var(--megura-color-accent);
}

.text-field__sync-button {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--megura-fg-muted);
  font-family: var(--megura-font-regular);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--megura-duration) var(--megura-ease);
}

.text-field__sync-button:hover { color: var(--megura-fg); }
.text-field__sync-button:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 3px; }

/* Rangliste ----------------------------------------------------------------- */

.leaderboard-full { width: 100%; }

.leaderboard-full__row {
  display: grid;
  grid-template-columns: 62px minmax(130px, 1.4fr) minmax(100px, .8fr) 82px minmax(160px, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
  align-items: center;
  min-height: 54px;
  padding: 6px 2px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.leaderboard-full__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.leaderboard-full__row:not(.leaderboard-full__header):hover { border-top-color: rgba(255, 255, 255, .34); }
.leaderboard-full__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-full__row > span { font-variant-numeric: tabular-nums; }
.leaderboard-full__row > span:first-child { color: var(--megura-color-accent); font-family: var(--megura-font-display); }

.leaderboard-full__header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 38px;
  border-top: 0;
  background: var(--megura-bg);
  color: #6f6f6f;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.leaderboard-full__header > span:first-child { color: #6f6f6f; font-family: var(--megura-font-regular); }

.leaderboard-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.leaderboard-person__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leaderboard-delete {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--megura-radius-full);
  background: transparent;
  color: #6f6f6f;
  cursor: pointer;
  opacity: 0;
  transition: color var(--megura-duration) var(--megura-ease),
              border-color var(--megura-duration) var(--megura-ease),
              opacity var(--megura-duration) var(--megura-ease);
}

.leaderboard-full__row:hover .leaderboard-delete,
.leaderboard-delete:focus-visible { opacity: 1; }
/* Beim Zeigen mit der Maus deutlich sichtbar – der Papierkorb war vorher zu blass. */
.leaderboard-full__row:hover .leaderboard-delete { color: #b8b8b8; border-color: rgba(255, 255, 255, .18); }
.leaderboard-delete svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leaderboard-delete:hover { color: #ff8a80; border-color: rgba(224, 54, 42, .55); }
.leaderboard-delete:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 2px; }

/* Frühere Spieler ------------------------------------------------------------ */

/* Ein einleitender Satz, damit klar ist, woher diese Namen kommen – am Anlass steht
   hier jemand davor, der die App nicht gebaut hat. */
.players__lead { max-width: 68ch; margin: 0 0 20px; color: var(--megura-fg-muted); font-size: 15px; line-height: 1.55; }

/* Erst was gewaehlt ist, dann was man damit tun kann – in dieser Reihenfolge liest
   man die Leiste, bevor man klickt. Sie bleibt beim Scrollen stehen, damit der
   Knopf auch weit unten in einer langen Liste erreichbar ist. */
.players__actions {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--megura-space-3);
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: var(--megura-bg);
}

/* Der Text schiebt alles Uebrige nach rechts – dann steht der Knopf immer aussen,
   ob «Auswahl aufheben» nun sichtbar ist oder nicht. */
.players__selection { margin-right: auto; color: var(--megura-fg-muted); font-size: 15px; }
.ghostlink--plain::before { content: none; }

/* Eine Spalte mehr als die normale Rangliste: ganz links das Haekchen. */
.leaderboard-full--players .leaderboard-full__row {
  grid-template-columns: 34px minmax(160px, 1.6fr) minmax(100px, .8fr) 82px minmax(150px, 1fr);
}

/* Die Aktionsleiste klebt schon oben – zwei klebende Zeilen uebereinander waeren
   eine zu viel, und der Knopf ist wichtiger als die Spaltentitel. */
.leaderboard-full--players .leaderboard-full__header { position: static; }

.player-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.player-check input { width: 17px; height: 17px; accent-color: var(--megura-color-accent); cursor: pointer; }

/* Die Zeilen laufen gestaffelt ein wie ueberall sonst im Fenster. */
.player-row { animation: row-in .4s var(--megura-ease) both; }
.player-row:hover { background: rgba(255, 255, 255, .03); }

/* Angehakte Zeilen heben sich ab, damit man die Auswahl auch beim Scrollen sieht. */
.leaderboard-full--players .leaderboard-full__row.is-picked { background: rgba(255, 255, 255, .06); }
.leaderboard-full--players .leaderboard-full__row.is-picked .player-name__text { color: var(--megura-color-accent); }

/* Der Name traegt die Marke gleich neben sich – abgeschnitten wird nur der Name,
   nie die Marke, sonst stuende dort ein sinnloser Wortanfang. */
.player-name { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: visible; }
.player-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.player-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--megura-radius-pill);
  color: var(--megura-fg-muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Nur ein Fall lohnt das Zurueckholen wirklich – nur der wird eingefaerbt. */
.player-badge--better { border-color: rgba(243, 149, 7, .45); color: var(--megura-color-accent); }

/* «Rückgängig» steht direkt neben der Meldung im Fensterfuss und faellt nur auf,
   solange es etwas zurueckzunehmen gibt. */
.ghostlink--undo { flex: 0 0 auto; text-decoration: underline; text-underline-offset: 4px; }

/* Rückfrage ----------------------------------------------------------------- */

.confirm {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Rückfall für Browser vor Chromium 87 (Samsung/Tizen): sie kennen «inset» nicht, die Ebene bliebe sonst unsichtbar unter dem Bildschirm */
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--megura-space-4);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
}

.confirm__panel {
  width: min(560px, 100%);
  padding: clamp(28px, 3.4vh, 44px);
  border: 1px solid var(--megura-border);
  background: var(--megura-bg);
  animation: settings-in .26s var(--megura-ease) both;
}

.confirm__panel h2 {
  margin: 16px 0 0;
  font-family: var(--megura-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vmin, 2rem);
  line-height: var(--megura-line-tight);
}

.confirm__panel > p:not(.eyebrow) { margin: 14px 0 0; color: var(--megura-fg-muted); line-height: 1.55; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: clamp(24px, 3vh, 36px); }


/* Statistik ------------------------------------------------------------------ */

.statistik { width: 100%; }

.statistik__row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(180px, 2fr) 76px;
  gap: clamp(12px, 1.4vw, 24px);
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 6px 2px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: border-color var(--megura-duration) var(--megura-ease);
}

.statistik__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.statistik__header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 38px;
  border-top: 0;
  background: var(--megura-bg);
  color: #6f6f6f;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.statistik__header > span:last-child { text-align: right; }

.statistik__zeile { cursor: pointer; }
.statistik__zeile:hover { border-top-color: rgba(255, 255, 255, .34); }
.statistik__zeile:hover .statistik__titel { color: var(--megura-color-accent); }
.statistik__zeile:focus-visible { outline: 2px solid var(--megura-color-accent); outline-offset: 2px; }
.statistik__zeile.is-leer { color: #6f6f6f; }

.statistik__name { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.statistik__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--megura-duration) var(--megura-ease); }
.statistik__sub { overflow: hidden; color: #6f6f6f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.statistik__wert { display: flex; min-width: 0; align-items: center; gap: 12px; }
.statistik__zahl { flex: 0 0 auto; min-width: 74px; font-variant-numeric: tabular-nums; }
.statistik__balken { position: relative; flex: 1; height: 6px; min-width: 40px; background: rgba(255, 255, 255, .12); }
.statistik__fuellung { position: absolute; top: 0; bottom: 0; left: 0; inset: 0 auto 0 0; background: var(--megura-color-accent); }
.statistik__anzahl { color: #6f6f6f; font-variant-numeric: tabular-nums; text-align: right; }

/* Bild gross ------------------------------------------------------------------ */

.bildbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Rückfall für Browser vor Chromium 87 (Samsung/Tizen): sie kennen «inset» nicht, die Ebene bliebe sonst unsichtbar unter dem Bildschirm */
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--megura-space-4);
}

.bildbox__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }

.bildbox__panel {
  position: relative;
  display: flex;
  width: min(1080px, 100%);
  max-height: 92vh;
  flex-direction: column;
  padding: clamp(20px, 2.6vh, 34px);
  border: 1px solid var(--megura-border);
  background: var(--megura-bg);
  animation: settings-in .26s var(--megura-ease) both;
}

.bildbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.bildbox__ident { min-width: 0; }
.bildbox__eyebrow { margin: 0; color: var(--megura-color-accent); font-size: 12px; letter-spacing: var(--megura-tracking-eyebrow); text-transform: uppercase; }
.bildbox__title { margin: 8px 0 0; font-family: var(--megura-font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vmin, 1.9rem); line-height: var(--megura-line-tight); }
.bildbox__wert { margin: 6px 0 0; color: var(--megura-fg-muted); font-size: 15px; }

.bildbox__bilder {
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(18px, 2.4vh, 28px);
}

.bildbox__figur { display: flex; margin: 0; flex-direction: column; align-items: center; gap: 10px; }
/* Helle Platte: viele Logos sind schwarz und waeren auf dem dunklen Fenster unsichtbar.
   Feste Groesse statt max-*: die Logos von Spiel 4 bringen nur ein viewBox mit und keine
   eigene Groesse – ohne festen Rahmen faellt der Browser auf 150px zurueck und das Logo
   schrumpft auf einen Punkt. «contain» haelt jedes Seitenverhaeltnis unverzerrt. */
.bildbox__figur img {
  width: min(46vw, 520px);
  height: min(58vh, 420px);
  padding: clamp(10px, 1.4vw, 20px);
  background: var(--megura-color-white);
  object-fit: contain;
}
.bildbox__fehlt { display: grid; width: min(30vw, 260px); height: min(24vh, 180px); place-items: center; border: 1px dashed var(--megura-border); color: var(--megura-fg-muted); font-size: 14px; }
.bildbox__figur figcaption { color: var(--megura-fg-muted); font-size: 14px; }

/* Platte unter der Schablone: dieselbe Rolle wie die weisse Flaeche unter den uebrigen Logos. */
.bildbox__platte { display: block; padding: clamp(10px, 1.4vw, 20px); }

/* Die Logos von Spiel 5 sind Schablonen – die Markenfarbe scheint durch sie hindurch. */
.bildbox__maske {
  display: block;
  width: min(46vw, 420px);
  height: min(42vh, 300px);
  background-color: var(--logo-farbe, #fff);
  -webkit-mask-image: var(--logo-bild);
  mask-image: var(--logo-bild);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.bildbox--viele .bildbox__figur img { width: min(28vw, 300px); height: min(34vh, 240px); }


/* ───────────────────────────────────────────────────────────────────────────
   Geräte & Abgleich – der Abschnitt in den Einstellungen. Er zeigt zuerst den
   eigenen Mac, dann die gefundenen anderen, und darunter die Handgriffe für
   den Fall, dass sich zwei nicht von selbst finden.
   ─────────────────────────────────────────────────────────────────────────── */

.geraete { display: grid; gap: clamp(20px, 2.6vh, 32px); }

.geraete__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(18px, 2.2vh, 28px);
  border-bottom: 1px solid var(--megura-border);
}

.geraete__lage { display: grid; gap: 10px; min-width: 0; }
.geraete__titel { display: flex; align-items: center; gap: 12px; font-family: var(--megura-font-display); font-size: clamp(1.15rem, 1.9vmin, 1.6rem); }
.geraete__zeile { color: var(--megura-fg-muted); font-size: clamp(14px, 1.3vmin, 16px); }
.geraete__zeile--warnung { color: #e0362a; }

.geraete__lampe {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: var(--megura-radius-full);
  background: var(--megura-fg-muted);
}
.geraete[data-stand='verbunden'] .geraete__lampe { background: #2fa360; }
.geraete[data-stand='allein'] .geraete__lampe { background: var(--megura-color-sec); }
.geraete[data-stand='fehler'] .geraete__lampe { background: #e0362a; }

.geraete__knoepfe { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.geraete__liste { display: grid; gap: 0; }

.geraet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(14px, 1.8vh, 20px) 2px;
  border-bottom: 1px solid var(--megura-border);
}
.geraet-row:first-child { border-top: 1px solid var(--megura-border); }

.geraet-row__copy { display: grid; gap: 6px; min-width: 0; }
.geraet-row__name { font-family: var(--megura-font-regular); font-size: clamp(15px, 1.5vmin, 18px); }
.geraet-row__meta { color: var(--megura-fg-muted); font-size: clamp(13px, 1.2vmin, 15px); }
.geraet-row__meta--warnung { color: #e0362a; }

.geraet-row__stand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--megura-font-regular);
  font-size: 12px;
  letter-spacing: var(--megura-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--megura-fg-muted);
}
.geraet-row__stand i {
  width: 8px;
  height: 8px;
  border-radius: var(--megura-radius-full);
  background: var(--megura-fg-muted);
}
.geraet-row[data-stand='verbunden'] .geraet-row__stand { color: #2fa360; }
.geraet-row[data-stand='verbunden'] .geraet-row__stand i { background: #2fa360; }
.geraet-row[data-stand='fehler'] .geraet-row__stand { color: #e0362a; }
.geraet-row[data-stand='fehler'] .geraet-row__stand i { background: #e0362a; }

.geraete__leer {
  padding: clamp(18px, 2.4vh, 30px) 2px;
  border-top: 1px solid var(--megura-border);
  border-bottom: 1px solid var(--megura-border);
  color: var(--megura-fg-muted);
  font-size: clamp(14px, 1.3vmin, 16px);
}

.geraete__feld { display: grid; gap: 10px; }
.geraete__feld label { font-family: var(--megura-font-regular); font-size: clamp(14px, 1.3vmin, 16px); }
.geraete__feld small { color: var(--megura-fg-muted); font-size: clamp(13px, 1.2vmin, 15px); }
.geraete__eingabe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.geraete input[type='text'] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-pill);
  background: transparent;
  color: var(--megura-fg);
  font: 400 15px/1.3 var(--megura-font-light);
}
.geraete input[type='text']:focus-visible { outline: 2px solid var(--megura-color-sec); outline-offset: 2px; }

.geraete__marken { display: flex; flex-wrap: wrap; gap: 10px; }
.geraete__marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 16px;
  border: 1px solid var(--megura-border);
  border-radius: var(--megura-radius-pill);
  font: 400 14px/1 var(--megura-font-light);
  color: var(--megura-fg);
}
.geraete__marke button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--megura-radius-full);
  background: var(--megura-border);
  color: var(--megura-fg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.geraete__marke button:hover { background: #e0362a; color: var(--megura-color-white); }

/* Kleine Bildschirme --------------------------------------------------------- */

@media (max-width: 860px) {
  .detail__body { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vh, 32px); }
  .chapters { flex-direction: row; flex-wrap: wrap; gap: 0 clamp(16px, 3vw, 32px); }
  .chapter { flex: 1 1 auto; }
  .chapter:last-child { border-bottom: 0; }
  .panel__bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .searchline { width: 100%; }
  .timing-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .geraete__kopf { flex-direction: column; align-items: flex-start; gap: 18px; }
  .geraet-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .settings,
  .scope-row,
  .player-row,
  .confirm__panel { animation: none; }
  .bildbox__panel { animation: none; }
  .syncpunkt__punkt { animation: none; }
  .megura-btn,
  .stepper__btn,
  .scope-row__arrow,
  .ghostlink--back::before { transition: none; }
}