/* ============================================================================
   Ergänzungen zum Design-System für die Rundgang-App.
   Die Grundlage (Tokens, Karten, Knöpfe, Panels) steht in app.css und bleibt
   unverändert — hier kommt nur dazu, was die App zusätzlich braucht.
   ========================================================================== */

/* Größere Grundflächen als im Portfolio: die App wird einhändig im Gehen
   bedient, oft mit Handschuhen oder nassen Fingern. */
:root { --tap: 56px; }

body { overscroll-behavior-y: contain; }

/* Bewusst KEIN Flex-Container: die Gruppenkoepfe im Design-System arbeiten mit
   negativen Seitenrändern, und in einem Flex-Kontext zwingt das die ganze Seite
   breiter als den Bildschirm. Als normaler Block bleibt alles in der Spur. */
.buehne { min-height:100vh;min-height:100svh; }

/* ----------------------------------------------------------------- Netzband */
/* Klebt oben und verschwindet, sobald nichts mehr wartet.

   Die App-Leiste klebt DARUNTER, nicht dahinter: Beide klebten bei 0, und
   gescrollt lag das Band über „Häuser" und dem Haken zum Abschluss — genau
   im Keller ohne Netz fand man den Weg hinaus nicht mehr. Damit alles, was
   oben klebt, weiß, wie weit es nachrücken muss, hat das Band eine feste
   Höhe mit Platz für zwei Zeilen: --netz-h (ohne den Rand oben am Telefon).
   Nur per CSS, weil das Markup des Bands in app.js steht. */
:root { --netz-h: 0px; }
body:has(> .netzband:not([hidden])) { --netz-h: 3.25rem; }
.netzband {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--s2);
  min-height: calc(var(--netz-h) + var(--safe-t));
  padding: var(--safe-t) var(--s4) 0;
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--ink); font-size: .88rem; line-height: 1.25;
}
/* Der Text bricht innerhalb seiner Spalte um; der Knopf „Ansehen" rutscht
   nicht in eine dritte Zeile, die über die feste Höhe hinausginge. */
.netzband > span { flex: 1 1 auto; min-width: 0; }
.netzband.klaerung { flex-wrap: nowrap; }
body:has(> .netzband:not([hidden])) .appbar {
  top: calc(var(--netz-h) + var(--safe-t));
  height: var(--bar); padding-top: 0;      /* den Rand oben trägt jetzt das Band */
}
body:has(> .netzband:not([hidden])) .grp { top: calc(var(--bar) + var(--safe-t) + var(--netz-h)); }
.netzband.offline {
  background: color-mix(in srgb, var(--orange) 18%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--orange) 45%, transparent);
}
.netzband .ic { flex: none; color: var(--brand); }
.netzband.offline .ic { color: var(--orange); }
.netzband b { font-weight: 700; }

/* ----------------------------------------------------------------- App-Bar */
.appbar-titel {
  flex: 1; min-width: 0; text-align: center;
  font-weight: 700; font-size: .98rem; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar .panel-back { flex: none; }
.appbar-actions { flex: none; }

/* --------------------------------------------------------------- Anmeldung */
.anmelde-seite {
  min-height:100vh;min-height:100svh; display: grid; place-items: center; padding: var(--s6) var(--s4);
  background:
    radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    var(--bg);
}
.anmelde-karte {
  width: min(420px, 100%); padding: var(--s7) var(--s5) var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); text-align: center;
}
.anmelde-karte h1 { font-size: 1.4rem; letter-spacing: -.02em; margin-top: var(--s4); }
.feld-gruppe { display: block; text-align: left; margin-top: var(--s4); }
.feld-marke {
  display: block; margin-bottom: 6px;
  font-size: .8rem; font-weight: 650; color: var(--ink-2);
}
.anmelde-karte .btn { margin-top: var(--s5); }

/* Größer als im Portfolio — Hauptziel eines Bildschirms. */
.btn-gross { min-height: 56px; font-size: 1.02rem; }
/* Das dunklere Rot: Weiß auf --bad kam nur auf 3,4 : 1 — auf „Löschen" und
   „Verwerfen", also gerade dort, wo man genau lesen soll, was man tippt. */
.btn-gefahr { background: var(--bad-flaeche); color: #fff; }

/* ---------------------------------------------------------------- Fortsetzen */
.fortsetzen {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  margin-bottom: var(--s5); padding: var(--s4);
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff; border: 0; border-radius: var(--r-lg); text-align: left;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 36%, transparent);
}
.fortsetzen:active { filter: brightness(.95); }
.fortsetzen-t { flex: 1; min-width: 0; }
.fortsetzen-t b { display: block; font-size: 1.04rem; font-weight: 750; }
.fortsetzen-t span { display: block; font-size: .82rem; opacity: .92; margin-top: 2px; }

/* -------------------------------------------------------------------- Laden */
.laedt { min-height:60vh;min-height:60svh; display: grid; place-items: center; align-content: center; gap: var(--s4); padding: var(--s8); color: var(--ink-2); }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--brand);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Dialog */
.dialog-huelle {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--s4);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: einblenden .15s var(--ease);
}
.dialog {
  width: min(420px, 100%); padding: var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.dialog h2 { font-size: 1.1rem; letter-spacing: -.015em; }
.dialog p { margin-top: var(--s2); color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.dialog-knoepfe { display: flex; gap: var(--s2); margin-top: var(--s5); }
.dialog-knoepfe .btn { flex: 1; min-height: 50px; }
@keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }

/* ------------------------------------------------------------------- Toast */
/* Dunkleres Grün als --ok: Weiß auf --ok kam nur auf 2,8:1, und hier stehen
   jetzt die Meldungen, die man lesen MUSS („Nachtrag: …"). Dasselbe Grün
   wie die Foto-Leiste. */
.toast.gut { background: #23743a; }

/* Eine Meldung gibt keinen Tipp an das weiter, was sie verdeckt: Ein Tipp auf
   sie schließt sie (ui.js), sonst nichts. Durchlässig lag sie über einem
   offenen Blatt genau auf „Passt so" — ein Tipp auf die Meldung bestätigte den
   Vorschlag von travdo, ohne dass jemand den Knopf gesehen hatte; im Blatt
   „Wo fängst du an?" wählte er einen Ort. Die Bedienleiste macht sie trotzdem
   nie tot: Dort steht sie nicht, siehe gleich darunter. */
.toast { pointer-events: auto; cursor: pointer; -webkit-user-select: none; user-select: none; }

/* Und sie soll die Bedienleiste auch optisch nicht verdecken. Die Höhe der
   Leiste setzt die App selbst (--leiste-h), weil sie während der Aufnahme wächst. */
body.im-rundgang .toast {
  bottom: calc(var(--leiste-h, 170px) + var(--s3) + var(--safe-b));
}

/* Liegt ein Blatt, eine Rückfrage oder die Großansicht obenauf, steht die
   Meldung oben unter der Kopfleiste. Unten liegt dort der Knopf, mit dem es
   weitergeht („Übernehmen", „Passt so", „Fertig") — und die Meldung über der
   Erfassungsleiste lag genau auf ihm. Muss nach der Regel darüber stehen. */
body:has(> .blatt.offen) .toast,
body:has(> .dialog-huelle) .toast,
body:has(> .lupe) .toast {
  top: calc(var(--bar) + var(--safe-t) + var(--s2));
  bottom: auto;
}

/* Im Portfolio sind Zeilen kompakt; hier dürfen sie größer sein. */
.dash .hrow { min-height: 84px; }
.dash .hrow-ph { width: 68px; height: 68px; }
.dash .hrow-name { font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .dialog-huelle { animation: none; }
}

/* Hilfsklassen statt style=""-Attributen — die CSP verbietet die, mit Absicht. */
.mt-4 { margin-top: var(--s4); }
.noscript-kasten { margin: 40px var(--s4); }