/* Bescheid App — Installieren, Anleitung, Offline-Seite.
 * Nur Token des Themes (bescheid.css); Flächen statt Linien, keine Rundungen, beide Ansichten (dunkel, gelb).
 * Alles Sichtbare ist zunächst hidden; app.js blendet nur ein, was wirklich geht. */

/* ---------- Knopf im Band ---------------------------------------------------- */
/* Gestaltung kommt von .knopf-symbol (Theme). Am Handy ist im Band kein Platz mehr: Dort laufen
   Karte auf der Startseite, Fuß-Link und Anleitung. */
@media (max-width: 640px) {
  .band .app-knopf { display: none; }
}

/* ---------- Link im Fuß ------------------------------------------------------- */
.fuss .app-fuss { margin-top: var(--a-2); }
.app-fuss-link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit; text-align: left;
}
.app-fuss-link:hover { text-decoration: underline; }

/* ---------- Karte auf der Startseite (nur mobil) ------------------------------ */
.app-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-4) var(--a-5); align-items: start;
  margin-block: var(--a-7); padding: var(--a-5); background: var(--grund-2);
}
.app-karte-icon { box-sizing: border-box; width: 72px; height: 72px; padding: 4px; background: var(--band); } /* Rand in Bandfarbe: In der gelben Ansicht hebt sich das gelbe Symbol so von der Fläche ab. */
.app-karte-text { display: grid; gap: var(--a-2); min-width: 0; }
.app-karte-titel { font-size: var(--t-3); line-height: 1.08; }
.app-karte-text > p:last-child { color: var(--tinte-2); font-size: var(--t-klein); line-height: 1.5; max-width: 46ch; }
.app-karte-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-5); }
.app-karte-weg {
  appearance: none; background: none; border: 0; cursor: pointer; min-height: 44px; padding: 0;
  font: 760 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2);
}
.app-karte-weg:hover { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
@media (min-width: 861px) {
  .app-karte { display: none; }
}

/* ---------- Anleitung (Ebene) --------------------------------------------------- */
.ebene--app { height: fit-content; } /* Blatt von oben in Höhe des Inhalts; der Rest der Seite bleibt abgedunkelt sichtbar. */
.ebene--app .rahmen { padding-block: var(--a-6) var(--a-7); }
.ebene--app .etikett::before { background: var(--band-tinte); } /* Marker in Gelb auf Gelb wäre unsichtbar. */
.app-hinweis-titel { font-size: var(--t-2); line-height: 1.04; max-width: 20ch; padding-right: 56px; margin-bottom: var(--a-5); }
.app-fuer { display: none; max-width: 56ch; }
.ebene--app:not([data-plattform]) .app-fuer--desktop,
.ebene--app[data-plattform="desktop"] .app-fuer--desktop,
.ebene--app[data-plattform="ios"] .app-fuer--ios,
.ebene--app[data-plattform="android"] .app-fuer--android { display: block; }
.app-schritte { list-style: none; padding: 0; display: grid; gap: var(--a-4); counter-reset: schritt; }
.app-schritte li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--a-4); align-items: start; counter-increment: schritt; font: 500 1.1rem/1.4 var(--lesen); }
.app-schritte li::before {
  content: counter(schritt); display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--band-tinte); color: var(--band); font: 400 1.2rem/1 var(--display);
}
.app-schritte strong { font-weight: 700; }
.app-schritte svg { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.app-hinweis-push { margin-top: var(--a-5); padding: var(--a-3) var(--a-4); background: var(--band-tinte); color: var(--band); font-weight: 600; line-height: 1.45; }
.app-fertig {
  appearance: none; border: 0; cursor: pointer; margin-top: var(--a-6); padding: 16px 20px 15px;
  background: var(--band-tinte); color: var(--band);
  font: 760 .875rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
}
.app-hinweis-klein { margin-top: var(--a-5); max-width: 56ch; font-size: .875rem; line-height: 1.5; color: var(--band-tinte-2); }

/* ---------- Hinweis „offline“ / „gespeicherter Stand“ unten im Bild ----------------- */
.app-status {
  position: fixed; left: 50%; bottom: max(var(--a-4), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  width: max-content; max-width: calc(100% - 2 * var(--rand)); padding: 12px 16px 11px;
  background: var(--tinte); color: var(--grund);
  font: 760 .78rem/1.3 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

.app-status-neu {
  appearance: none; border: 0; cursor: pointer; margin-left: var(--a-3); padding: 10px 12px 9px;
  background: var(--grund); color: var(--tinte); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.app-status-neu:focus-visible { outline-color: var(--grund); outline-offset: 2px; }

/* ---------- Offline-Seite --------------------------------------------------------- */
.offline { padding-block: clamp(32px, 6vw, 96px) clamp(48px, 8vw, 120px); }
.offline-titel { font-size: var(--t-riesig); line-height: .9; letter-spacing: -.028em; margin: var(--a-4) 0 var(--a-5); max-width: 12ch; }
.offline-text { max-width: 54ch; font: 500 1.15rem/1.5 var(--lesen); color: var(--tinte-2); }
.offline-knoepfe { margin: var(--a-5) 0 var(--a-8); }
.offline-gelesen .abschnitt-titel { margin-bottom: var(--a-4); }
.offline-liste { list-style: none; padding: 0; display: grid; gap: var(--a-2); max-width: 760px; }
.offline-liste a {
  display: grid; gap: 6px; padding: var(--a-4) var(--a-5); text-decoration: none; background: var(--grund-2);
  transition: background-color var(--kurz);
}
.offline-liste a:hover { background: var(--grund-3); }
.offline-liste strong { font: 700 1.1rem/1.3 var(--lesen); }
.offline-leer { max-width: 54ch; color: var(--tinte-2); }
.offline-leeren {
  appearance: none; background: none; border: 0; cursor: pointer; min-height: 44px; margin-top: var(--a-3); padding: 0;
  font: 760 .78rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3);
}
.offline-leeren:hover { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ---------- Seite „Bescheid als App“: Erklärvideo ---------------------------------- */
.app-film { margin-block: var(--a-6) var(--a-7); }
.app-film-wahl { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-4); }
.app-film-knopf {
  appearance: none; border: 0; cursor: pointer; min-height: 44px; padding: 13px 16px 12px;
  background: var(--grund-2); color: var(--tinte);
  font: 760 .8rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color var(--kurz), color var(--kurz);
}
.app-film-knopf:hover { background: var(--grund-3); }
.app-film-knopf[aria-pressed="true"] { background: var(--band); color: var(--band-tinte); }
.app-film-bild { margin: 0; }
.app-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--schwarz, #0A0A0A); }
/* Hochformat am Handy: so hoch, dass Knöpfe darüber und Beschriftung darunter noch zu sehen sind. */
.app-film[data-format="9x16"] video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: calc(100svh - var(--band-hoehe) - 140px); margin-inline: auto; }
.app-film-bild figcaption { margin-top: var(--a-3); color: var(--tinte-2); font-size: .95rem; line-height: 1.45; }
.app-film[data-format="9x16"] figcaption { text-align: center; }
.app-film-los { margin-top: var(--a-5); }
.app-film-schritte { display: grid; gap: var(--a-6); margin-top: var(--a-6); }
.app-film-schritte h3 { margin: 0 0 var(--a-4); }
.textseite-inhalt .app-film-schritte .app-schritte { padding-left: 0; }
.textseite-inhalt .app-film-schritte li + li { margin-top: 0; }

/* Video-Link in der Anleitung und auf der Karte */
.app-hinweis-film { margin-top: var(--a-5); }
.app-hinweis-film a, .app-karte-film {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; color: inherit;
  font: 760 .82rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.app-hinweis-film svg { width: 1.1em; height: 1.1em; }

/* Fuß: Die Seite mit dem Video nur, wenn kein Installieren-Knopf daneben steht — und nie in der App selbst. */
.fuss .app-fuss-seite { margin-top: var(--a-2); }
.app-fuss:not([hidden]) + .app-fuss-seite,
[data-modus="app"] .app-fuss-seite { display: none; }
@media (max-width: 480px) {
  .app-film-wahl { display: grid; grid-template-columns: 1fr 1fr; }
}

/* In der installierten App kein Erklärvideo mehr — nur der Hinweis (data-modus setzt der Vorspann im Kopf). */
.app-film-schon { display: none; }
[data-modus="app"] .app-film-schon { display: block; margin-block: var(--a-6); padding: var(--a-4) var(--a-5); background: var(--grund-2); font-weight: 600; }
[data-modus="app"] .app-film { display: none; }

/* ---------- Tipp: schwebend, alle Geräte --------------------------------------------- */
/* Eine Fläche in Bandfarbe (dunkle Ansicht: gelb, gelbe Ansicht: schwarz). Am Rechner eine Karte unten rechts,
   am Handy ein Blatt am unteren Rand. Die kleine Szene links zeigt, wohin Bescheid kommt: Taskleiste bzw.
   Startbildschirm — das Symbol fällt hinein. */
.app-tipp {
  --mulde: rgb(10 10 10 / .12);
  position: fixed; z-index: 60; right: var(--a-5); bottom: var(--a-5); width: min(420px, calc(100vw - 2 * var(--a-5)));
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "bild text" "knoepfe knoepfe";
  gap: var(--a-4) var(--a-4); padding: var(--a-5) var(--a-5) var(--a-4);
  background: var(--band); color: var(--band-tinte); --fokus: var(--band-tinte);
  box-shadow: 0 18px 48px rgb(0 0 0 / .45);
  transform: translateY(24px); opacity: 0;
  transition: transform var(--mittel) var(--kurve), opacity var(--mittel) var(--kurve);
}
:root[data-ansicht="gelb"] .app-tipp { --mulde: rgb(255 255 255 / .16); box-shadow: 0 18px 48px rgb(0 0 0 / .3); }
.app-tipp.ist-da { transform: none; opacity: 1; }
.app-tipp :focus-visible { outline-color: var(--band-tinte); }
.app-tipp .etikett { color: var(--band-tinte-2); margin-bottom: var(--a-2); }
.app-tipp .etikett::before { background: var(--band-tinte); }
.app-tipp-text { grid-area: text; min-width: 0; padding-right: 28px; }
.app-tipp-titel { font-size: 1.35rem; line-height: 1.08; margin: 0 0 var(--a-2); }
.app-tipp-text > p:last-child { font-size: .92rem; line-height: 1.45; color: var(--band-tinte-2); }
.app-tipp-knoepfe { grid-area: knoepfe; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-5); }
.app-tipp .knopf { background: var(--band-tinte); color: var(--band); }
.app-tipp-film {
  display: inline-flex; align-items: center; min-height: 44px; color: inherit;
  font: 760 .8rem/1 var(--werkzeug); font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.app-tipp-zu { position: absolute; top: 6px; right: 6px; }

/* Szene: Taskleiste (Rechner) oder Startbildschirm (Handy) */
.app-tipp-bild { grid-area: bild; align-self: start; }
.app-tipp-leiste, .app-tipp-raster { display: none; }
.app-tipp-leiste {
  align-items: center; justify-content: center; gap: 6px; height: 64px; margin-top: 18px; padding: 0 6px;
  background: var(--mulde);
}
.app-tipp-leiste > span { width: 14px; height: 14px; background: var(--mulde); }
.app-tipp-leiste > .app-tipp-ziel { width: 34px; height: 44px; background: none; }
.app-tipp-raster { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; background: var(--mulde); }
.app-tipp-raster > span { aspect-ratio: 1; background: var(--mulde); }
.app-tipp-raster > .app-tipp-ziel { background: none; }
.app-tipp[data-plattform="ios"] .app-tipp-raster,
.app-tipp[data-plattform="android"] .app-tipp-raster { display: grid; }
.app-tipp:not([data-plattform="ios"]):not([data-plattform="android"]) .app-tipp-leiste { display: flex; }

.app-tipp-ziel { position: relative; display: grid; place-items: center; }
.app-tipp-ziel img { display: block; width: 100%; height: auto; max-width: 34px; box-shadow: 0 0 0 2px var(--band-tinte); opacity: 0; }
/* Unter dem Symbol in der Taskleiste der Strich „läuft“ — wie bei Windows. */
.app-tipp-leiste .app-tipp-ziel::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: var(--band-tinte);
  transform: translateX(-50%);
}
.app-tipp.ist-da .app-tipp-ziel img { animation: app-tipp-landen .7s var(--kurve) .35s both; }
.app-tipp.ist-da .app-tipp-leiste .app-tipp-ziel::after { animation: app-tipp-strich .3s var(--kurve) 1s both; }
@keyframes app-tipp-landen {
  0% { opacity: 0; transform: translateY(-34px) scale(.6); }
  60% { opacity: 1; transform: translateY(3px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes app-tipp-strich { to { width: 16px; } }

/* Handy: Blatt am unteren Rand, kompakt, über dem Home-Balken */
@media (max-width: 640px) {
  .app-tipp {
    left: 0; right: 0; bottom: 0; width: auto; grid-template-columns: 72px minmax(0, 1fr);
    padding: var(--a-4) var(--rand) max(var(--a-4), env(safe-area-inset-bottom));
    box-shadow: 0 -12px 36px rgb(0 0 0 / .4);
  }
  .app-tipp-titel { font-size: 1.15rem; }
  .app-tipp-text > p:last-child { font-size: .86rem; }
  .app-tipp-raster { gap: 4px; padding: 6px; }
  .app-tipp-zu { top: 2px; right: 2px; }
}
@media print { .app-tipp { display: none !important; } }