/* ══════════════════════════════════════════════════════════════════════
   App-Anleitung (/app) — Spec specs/app-anleitung/spec.md

   Die Seite wird gerade dann aufgerufen, wenn jemand nicht weiterkommt.
   Deshalb: große Schrift, viel Luft, jeder Schritt mit Bild, und ohne
   JavaScript bleibt alles lesbar.
   ══════════════════════════════════════════════════════════════════════ */

.app-seite {
  --app-gr: #2d5016;
  --app-gr-hell: #f0f7ec;
  --app-linie: #dde5d8;
  --app-warn: #b45309;
  --app-warn-bg: #fffbeb;
}

/* Das `hidden`-Attribut steht im Browser-Grundblatt nur als `display:none`
   ohne Klasse — jede eigene Regel mit `display:flex` oder `display:grid`
   schlägt es. Genau daran blieben alle Browserreihen gleichzeitig stehen
   und der Installationsknopf war auch ohne Angebot des Browsers sichtbar.
   Deshalb hier ausdrücklich. */
.app-seite [hidden] { display: none !important; }

.app-lead {
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 62ch;
  color: #374151;
}

/* ── Statusband ───────────────────────────────────────────────────── */

.app-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 10px;
}

.app-status-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
}

.app-status-p.ja {
  background: var(--app-gr-hell);
  color: var(--app-gr);
  border: 1.5px solid #bcd6ae;
}

.app-status-p.offen {
  background: #f8fafc;
  color: #475569;
  border: 1.5px solid #e2e8f0;
}

.app-status-p.warn {
  background: var(--app-warn-bg);
  color: var(--app-warn);
  border: 1.5px solid #fcd34d;
}

.app-status-p svg { flex: 0 0 auto; }

/* ── Geräte- und Browserwahl ──────────────────────────────────────── */

.app-wahl {
  margin: 26px 0 10px;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid var(--app-linie);
  border-radius: 14px;
}

.app-wahl-t {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #475569;
  border: 0;
  padding: 0;
}

.app-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-browserreihe {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--app-linie);
}

.app-wk {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--app-linie);
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.app-wk:hover { border-color: var(--app-gr); color: var(--app-gr); }

.app-wk.on {
  background: var(--app-gr);
  border-color: var(--app-gr);
  color: #fff;
}

/* Der Hinweis für Besucher ohne JavaScript verschwindet, sobald das
   Skript läuft — dann übernimmt die Auswahl oben. */
.app-ohne-js {
  margin: 14px 0 0;
  font-size: .9rem;
  color: #64748b;
}

/* ── Ein Weg ──────────────────────────────────────────────────────── */

.app-weg {
  margin: 34px 0;
  padding-top: 6px;
  scroll-margin-top: 90px;
}

.app-weg h2,
.app-abschnitt h2 {
  font-size: 1.35rem;
  color: var(--app-gr);
  margin: 0 0 6px;
}

.app-untertitel {
  margin: 0 0 18px;
  color: #64748b;
  font-size: .95rem;
}

/* ── Die Schritte ─────────────────────────────────────────────────── */

.app-schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
}

.app-schritte > li {
  counter-increment: schritt;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 26px;
  padding: 18px 18px 18px 62px;
  background: #fff;
  border: 1px solid var(--app-linie);
  border-radius: 14px;
}

/* Die Nummer ist die Orientierung — sie muss auch beim Blättern
   sichtbar bleiben, nicht nur beim ersten Hinsehen. */
.app-schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--app-gr);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-schritte h3,
.app-zwei h3,
.app-kasten h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #1f2937;
}

.app-schritte p,
.app-zwei p {
  margin: 0 0 8px;
  line-height: 1.6;
}

.app-schritte img,
.app-zwei img,
.app-einzelbild {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 4px auto 0;
  border-radius: 12px;
  background: #fff;
}

.app-einzelbild { margin: 18px auto; }

/* Die Rechnerbilder sind breit statt hoch. */
.app-schritte img[width="520"] { max-width: 460px; }

/* „Falls es anders aussieht" — der Nebenweg, blasser als der Hauptweg. */
.app-wenn {
  font-size: .88rem;
  color: #64748b;
  padding-left: 12px;
  border-left: 3px solid var(--app-linie);
}

.app-tipp {
  font-size: .9rem;
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
}

/* ── Kästen ───────────────────────────────────────────────────────── */

.app-kasten {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--app-gr-hell);
  border: 1px solid #cfe0c4;
  border-left: 4px solid var(--app-gr);
  border-radius: 10px;
}

.app-kasten p { margin: 0 0 8px; line-height: 1.6; }
.app-kasten p:last-child { margin-bottom: 0; }

.app-kasten-wichtig,
.app-kasten-umleitung {
  background: var(--app-warn-bg);
  border-color: #fcd34d;
  border-left-color: #d97706;
}

.app-kasten-wichtig h3,
.app-kasten-umleitung h3 { color: #92400e; }

.app-mini {
  margin: 10px 0;
  padding-left: 22px;
  line-height: 1.7;
}

.app-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--app-gr);
}

/* ── Aktionsknöpfe ────────────────────────────────────────────────── */

.app-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 24px;
}

.app-tun {
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2d5016, #3a6b1e);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 80, 22, .22);
}

.app-tun:hover { filter: brightness(1.08); }
.app-tun:disabled { opacity: .5; cursor: default; filter: none; }

.app-tun-leise {
  background: #fff;
  color: var(--app-gr);
  border: 1.5px solid var(--app-gr);
  box-shadow: none;
  font-size: .94rem;
  min-height: 46px;
}

.app-knopf-note {
  font-size: .88rem;
  color: #64748b;
  flex: 1 1 220px;
  line-height: 1.45;
}

/* ── Abschnitte ───────────────────────────────────────────────────── */

.app-abschnitt {
  margin: 40px 0;
  padding-top: 26px;
  border-top: 2px solid var(--app-linie);
  scroll-margin-top: 90px;
}

.app-zwei {
  display: grid;
  gap: 16px;
  align-items: start;
}

/* ── Die vier Benachrichtigungsarten ──────────────────────────────── */

.app-artenliste {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.app-art {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--app-linie);
  border-radius: 14px;
}

/* Was nur den Einzelnen betrifft, hebt sich ab — das ist die häufigste
   Sorge: „Sieht das jetzt jeder?" */
.app-art-privat { border-left: 4px solid #1d4ed8; }

.app-art-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.app-art-sym {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--app-gr-hell);
  color: var(--app-gr);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-art-privat .app-art-sym { background: #eff6ff; color: #1d4ed8; }

.app-art h3 { margin: 0; font-size: 1.08rem; color: #1f2937; }

.app-art-kurz {
  margin: 2px 0 0;
  font-size: .86rem;
  color: #64748b;
}

.app-art-nutzen { margin: 0 0 12px; line-height: 1.65; }

.app-beispiel {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: #1f2937;
}

.app-beispiel span {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}

.app-art-fakten { margin: 0; }

.app-art-fakten > div {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
  font-size: .9rem;
}

.app-art-fakten dt {
  flex: 0 0 116px;
  color: #94a3b8;
  font-weight: 600;
}

.app-art-fakten dd { margin: 0; color: #475569; }

.app-art-auto {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--app-linie);
  font-size: .86rem;
  color: #64748b;
}

/* ── Häufige Fragen ───────────────────────────────────────────────── */

.app-frage {
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--app-linie);
  border-radius: 10px;
  overflow: hidden;
}

.app-frage summary {
  padding: 14px 16px;
  min-height: 48px;
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
}

.app-frage[open] summary {
  border-bottom: 1px solid var(--app-linie);
  color: var(--app-gr);
}

.app-frage > *:not(summary) { padding: 0 16px; }
.app-frage > p:first-of-type { padding-top: 14px; }
.app-frage > *:last-child { padding-bottom: 14px; }
.app-frage ul { line-height: 1.7; margin: 0 0 6px; }

.app-hilfe-fuss {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--app-gr-hell);
  border-radius: 10px;
  line-height: 1.6;
}

/* ── Weitergeben ──────────────────────────────────────────────────── */

.app-teilen-in {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--app-linie);
  border-radius: 14px;
}

.app-qr {
  flex: 0 0 auto;
  width: 148px;
  height: 148px;
  border: 1px solid var(--app-linie);
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}

.app-teilen-t { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; }

.app-adresse {
  margin: 10px 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--app-gr);
  letter-spacing: .01em;
}

/* ── Ab Tablet: Text und Bild nebeneinander ───────────────────────── */

@media (min-width: 720px) {
  .app-schritte > li {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: start;
    gap: 22px;
  }

  .app-schritte img { margin: 0; max-width: 240px; }
  .app-schritte img[width="520"] { max-width: 100%; }

  /* Die breiten Rechnerbilder bekommen die ganze Zeile. */
  .app-schritte > li:has(img[width="520"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-zwei { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .app-zwei img { margin: 0; }
}

@media (min-width: 900px) {
  .app-artenliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Dunkle Darstellung ───────────────────────────────────────────── */

html[data-theme="dark"] .app-schritte > li,
html[data-theme="dark"] .app-art,
html[data-theme="dark"] .app-frage,
html[data-theme="dark"] .app-teilen-in,
html[data-theme="dark"] .app-wahl,
html[data-theme="dark"] .app-wk {
  background: #1f2933;
  border-color: #334155;
}

html[data-theme="dark"] .app-wk { color: #e2e8f0; }
html[data-theme="dark"] .app-art h3,
html[data-theme="dark"] .app-schritte h3,
html[data-theme="dark"] .app-frage summary,
html[data-theme="dark"] .app-beispiel { color: #e5e7eb; }
html[data-theme="dark"] .app-beispiel { background: #111827; }
html[data-theme="dark"] .app-kasten { background: #1a2e12; border-color: #3f6b28; }
html[data-theme="dark"] .app-kasten-wichtig,
html[data-theme="dark"] .app-kasten-umleitung { background: #2e2410; border-color: #92400e; }

/* ══════════════════════════════════════════════════════════════════
   Druckfassung — taugt als Aushang im Laden.
   Gedruckt wird der gewählte Weg, nicht alle acht.
   ══════════════════════════════════════════════════════════════════ */

@media print {
  @page { margin: 14mm; }

  body { background: #fff !important; }

  /* Alles, was zum Bedienen da ist, gehört nicht aufs Papier. */
  .mob-ticker, .mob-header, .mob-nav, .mob-nav-overlay,
  .tb, .nv, .ft, .skip, .bc,
  .cookie-bar, .wa-float, #hp-wa-float,
  .app-wahl, .app-ohne-js, .app-knopfzeile, .app-status,
  .app-nur-schirm, #mob-pwa-install, #mob-push-toggle {
    display: none !important;
  }

  /* Ein verborgener Weg bleibt auch im Druck verborgen: Gedruckt wird,
     was auf dem Schirm steht. */
  .app-weg[hidden] { display: none !important; }

  .app-seite { max-width: none; margin: 0; padding: 0; }

  h1 { font-size: 19pt; margin: 0 0 4mm; }
  .app-lead { font-size: 10.5pt; max-width: none; }
  .app-weg h2, .app-abschnitt h2 { font-size: 14pt; }

  .app-schritte > li,
  .app-art,
  .app-kasten,
  .app-teilen-in {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #cbd5e1;
    box-shadow: none;
  }

  .app-schritte > li { margin-bottom: 5mm; padding: 4mm 4mm 4mm 16mm; }
  .app-schritte > li::before { background: #2d5016 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-schritte img { max-width: 52mm; }

  /* Die Fragen im Druck aufgeklappt — zugeklappt nützen sie nichts. */
  .app-frage[open] summary, .app-frage summary { border-bottom: 0; }
  .app-frage > *:not(summary) { display: block !important; }

  .app-abschnitt { border-top: 1px solid #cbd5e1; }

  /* Der QR-Code ist der Zweck des Aushangs: groß und am Anfang. */
  .app-teilen { break-before: page; page-break-before: always; }
  .app-qr { width: 62mm; height: 62mm; }
  .app-adresse { font-size: 15pt; }

  a { text-decoration: none; color: inherit; }
}