/* =========================================================================
   shell.css – Grundlayout und Bedienelemente aller Apps
   Baut auf tokens.css, theme-*.css, base.css und components.css auf.
   ========================================================================= */
html { height: 100%; }
body.app {
  min-height: 100dvh; height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
button { touch-action: manipulation; }
.app-wurzel { min-height: 100%; display: flex; flex-direction: column; }
.app-kopfleiste { position: sticky; top: 0; z-index: 10; }
.app-inhalt { flex: 1; width: 100%; max-width: 1100px; margin-inline: auto; padding: var(--a-5) var(--seitenrand) var(--a-8); }
html.schrift-gross .app-inhalt, html.schrift-gross .app-dialog { zoom: 1.18; }

/* Startbildschirm */
.startbild { display: flex; flex-direction: column; align-items: center; gap: var(--a-6); padding-top: var(--a-6); }
.startbild__marke { display: flex; flex-direction: column; align-items: center; gap: var(--a-4); text-align: center; }
.startbild__marke img { width: 96px; height: 96px; border-radius: var(--r-karte-gross); }
.startbild__marke h1 { font-size: clamp(36px, 6vw, 56px); margin: 0; }
.startbild__marke p { color: var(--c-text-leise); margin: 0; max-width: 32em; }
.startbild__menue { display: grid; gap: var(--a-3); width: min(100%, 460px); }
.startbild__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--a-3); }
.startbild__fuss { color: var(--c-text-leise); font-size: var(--fs-klein); text-align: center; margin: 0; }
.btn--gross { min-height: 64px; font-size: 20px; flex-direction: column; gap: 2px; }
.btn--gross small { font-size: 14px; font-weight: 400; opacity: .85; }
.btn--gefahr { background: transparent; color: var(--c-hinweis-achtung); border-color: var(--c-hinweis-achtung); }
.btn--gefahr:hover { background: color-mix(in srgb, var(--c-hinweis-achtung) 14%, transparent); }

/* Werbung in Apps: ruhig, mit Abstand zu Bedienelementen */
.app-werbung-platz { width: min(100%, 760px); margin-top: var(--werbung-abstand); }
.app-werbung { margin: 0; min-height: 0; padding: var(--a-7) var(--a-4) var(--a-4); }

/* Installationshinweis */
.install-hinweis {
  display: flex; align-items: center; gap: var(--a-4); flex-wrap: wrap;
  padding: var(--a-4) var(--a-5); border: 1px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-flaeche);
  width: min(100%, 460px);
}
.install-hinweis > .icon { color: var(--c-akzent); width: 28px; height: 28px; }
.install-hinweis > div { flex: 1 1 200px; display: flex; flex-direction: column; }
.install-hinweis span { color: var(--c-text-leise); font-size: var(--fs-klein); }

/* Dialoge der Apps */
.app-dialog { width: min(560px, calc(100vw - 24px)); }
.app-dialog--breit { width: min(720px, calc(100vw - 24px)); }
.app-dialog .dialog__inhalt { max-height: calc(100dvh - 200px); overflow: auto; }
.app-dialog h3 { font-size: 19px; margin: var(--a-6) 0 var(--a-2); }
.app-dialog .app-menue { border: 0; padding: 0; background: none; }
.app-regeln h3:first-child { margin-top: 0; }
.app-regeln ul, .app-regeln ol { padding-left: 1.2em; }

/* Formulare */
.eingabe {
  width: 100%; min-height: 48px; padding: var(--a-3) var(--a-4);
  background: var(--c-hintergrund); color: var(--c-text);
  border: 1.5px solid var(--c-chip-rand); border-radius: var(--r-button-klein);
  font: inherit;
}
.eingabe:focus { outline: none; border-color: var(--c-akzent); }
select.eingabe { appearance: auto; }
.feld { display: flex; flex-direction: column; gap: var(--a-2); margin: 0 0 var(--a-4); border: 0; padding: 0; }
.feld > span, .feld > legend { font-weight: 700; color: var(--c-text); padding: 0; }
.eingabe-zeile { display: flex; gap: var(--a-2); margin-bottom: var(--a-3); }
.eingabe-zeile .eingabe { flex: 1; }
.datei-knopf { cursor: pointer; }
.datei-knopf:focus-within { outline: 3px solid var(--c-akzent); outline-offset: 3px; }

/* Schalter (Einstellungen) */
.einst-gruppe + .einst-gruppe { border-top: 1px solid var(--c-linie); margin-top: var(--a-4); }
.schalter { display: flex; align-items: center; gap: var(--a-4); min-height: 56px; cursor: pointer; padding-block: var(--a-2); }
.schalter > span { flex: 1; display: flex; flex-direction: column; color: var(--c-text); }
.schalter small { color: var(--c-text-leise); font-size: var(--fs-klein); }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter i { width: 52px; height: 30px; border-radius: var(--r-chip); background: var(--c-flaeche-2); border: 1.5px solid var(--c-chip-rand); position: relative; flex: none; transition: background var(--dauer); }
.schalter i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--c-text-leise); transition: transform var(--dauer), background var(--dauer); }
.schalter input:checked + i { background: var(--c-akzent); border-color: var(--c-akzent); }
.schalter input:checked + i::after { transform: translateX(22px); background: var(--c-text-auf-akzent); }
.schalter input:focus-visible + i { outline: 3px solid var(--c-akzent); outline-offset: 3px; }

/* Segmentauswahl */
.segment { display: flex; flex-wrap: wrap; gap: var(--a-1); padding: var(--a-1); border: 1px solid var(--c-linie); border-radius: var(--r-button); background: var(--c-hintergrund); }
.segment button { flex: 1 1 auto; min-height: var(--touch-min); padding: var(--a-2) var(--a-4); border: 0; border-radius: var(--r-button-klein); background: none; color: var(--c-text-leise); font-weight: 700; }
.segment button[aria-checked="true"] { background: var(--c-akzent); color: var(--c-text-auf-akzent); }

/* Spielerliste */
.spieler-liste { display: grid; gap: var(--a-1); margin-bottom: var(--a-3); }
.spieler-zeile { display: flex; align-items: center; gap: var(--a-3); min-height: 52px; padding: var(--a-1) var(--a-1) var(--a-1) var(--a-3); border-bottom: 1px solid var(--c-linie); }
.spieler-zeile__name { flex: 1; font-weight: 700; color: var(--c-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spieler-zeile__name small { display: block; font-weight: 400; }
.spieler-marke {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--spieler-farbe, var(--c-akzent)); color: var(--c-text-auf-akzent); font-weight: 700; font-size: 14px;
}
.spieler-liste--archiv .spieler-zeile__name { color: var(--c-text-leise); }
.auswahl-liste { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.auswahl-chip { position: relative; }
.auswahl-chip input { position: absolute; opacity: 0; }
.auswahl-chip span { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: var(--a-2) var(--a-4); border: 1px solid var(--c-chip-rand); border-radius: var(--r-chip); color: var(--c-text); cursor: pointer; }
.auswahl-chip input:checked + span { background: var(--c-akzent); border-color: var(--c-akzent); color: var(--c-text-auf-akzent); font-weight: 700; }
.auswahl-chip input:focus-visible + span { outline: 3px solid var(--c-akzent); outline-offset: 2px; }

.sicherung-vorschau { margin-top: var(--a-4); padding: var(--a-4); border: 1px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-hintergrund); }
.sicherung-vorschau ul { padding-left: 1.2em; }
.hinweis-text--fehler { color: var(--c-hinweis-achtung); }

/* Toasts über allem */
.toast-bereich { z-index: 100; pointer-events: none; }
.toast { pointer-events: auto; animation: toast-ein var(--dauer-lang) var(--kurve); }
@keyframes toast-ein { from { opacity: 0; transform: translateY(8px); } }