/* Seiten des Punkteprogramms (technisch: bonus) im einheitlichen Feuerwehr-Design (Design-Standard der Projektleitung).
   Farben, Formen und Abstände kommen aus feuerwehr-design.css (--fw-…); hier stehen nur die Feinheiten.
   Keine Inline-Stile: Die Content-Security-Policy erlaubt nur Stylesheets der eigenen Herkunft. */
* { box-sizing: border-box; }
html { color-scheme: light; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
.verwaltung main { max-width: 1100px; padding-bottom: 40px; }
[hidden] { display: none !important; }
h2 { margin: 18px 0 10px; font-size: 1.2rem; }
h3 { margin: 0 0 10px; font-size: 1rem; }
button { font: inherit; cursor: pointer; }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .92rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kopftitel { margin: 0; font-size: inherit; }
.kopfzusatz { color: #fff; opacity: .9; font-size: .92rem; }
.fw-kopf__person { display: flex; gap: 10px; align-items: center; }
.fw-kopf__person button { min-height: var(--fw-bedienflaeche); padding: 6px 14px; color: #fff; background: transparent;
  border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--fw-radius-klein); }
footer.fw-fuss { background: #fff; }
footer.fw-fuss p { margin: 0; }
.versionsanzeige { font-size: .72rem; color: var(--fw-grau); }
.versionsanzeige--fehler { color: var(--fw-arbeit); font-weight: 600; }

.fw-karte { margin-bottom: 14px; box-shadow: var(--fw-schatten); }
.fw-meldung { margin: 0 0 12px; }
.anmeldung { max-width: 420px; margin: 24px auto; }
.anmeldung button { margin-top: 16px; width: 100%; }
.hinweis, .klein { color: var(--fw-grau); font-size: .86rem; }
.leer { color: var(--fw-grau); }
.breit { width: 100%; margin-top: 12px; }
.spalte { display: flex; flex-direction: column; gap: 6px; }

.punkte-chip { display: inline-block; white-space: nowrap; padding: 3px 11px; border-radius: 99px; background: var(--fw-gold);
  color: var(--fw-tinte); font-weight: 800; }

/* Foto-Nachweis: nie breiter als die Karte, nicht übermäßig hoch. */
.foto { display: block; max-width: 100%; max-height: 60vh; margin: 8px 0; border-radius: 8px; object-fit: contain;
  background: #f1f1f1; }

/* Verwaltung: Fotos und KI-Bewertung einer Wachenaufgabe (28.10.2026) */
.fotos-fenster { margin: 10px 0 0; }
.foto-eintrag { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--fw-linie); }
.foto-eintrag:last-child { border-bottom: 0; }
.foto-klein { width: 200px; max-height: 140px; margin: 0; }
.fotos-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ki-kasten { background: var(--fw-grund); border-radius: 8px; padding: 8px 10px; }
@media (max-width: 640px) { .foto-eintrag { grid-template-columns: 1fr; } .foto-klein { width: 100%; } }

/* Meine Punkte */
.stand .gross { margin: 4px 0; font-size: 3rem; font-weight: 900; color: var(--fw-rot); line-height: 1; }
.stand .einheit { font-size: 1rem; color: var(--fw-grau); font-weight: 600; }
.stand p { margin: 4px 0; }
.toepfe { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.topf { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--fw-radius-klein); background: var(--fw-rot-hell); }
.topf__frei { font-weight: 800; }

/* Spielelemente (Konzept 4.8): Stufe, Siegerpodest, Glückwunsch-Zeile. Gold nur als Akzent, nie als Textfarbe auf Weiß. */
.stand { position: relative; overflow: hidden; }
.stufe { margin-top: 12px; }
.stufe__name { margin: 0 0 6px; font-weight: 800; color: var(--fw-rot-dunkel); }
.stufe__nummer { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 99px; background: var(--fw-gold);
  color: var(--fw-tinte); text-align: center; }
.stufe__balken { width: 100%; height: 12px; accent-color: var(--fw-rot); }
.podest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; align-items: end; text-align: center; }
.podest__platz { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-radius: var(--fw-radius-klein);
  background: var(--fw-rot-hell); }
.podest__pokal { margin: 0 auto; width: 34px; height: 34px; border-radius: 0 0 50% 50%; border: 3px solid var(--fw-tinte); }
.podest__platz--1 { order: 2; padding-top: 22px; }
.podest__platz--1 .podest__pokal { background: var(--fw-gold); }
.podest__platz--2 { order: 1; padding-top: 14px; }
.podest__platz--2 .podest__pokal { background: #c9ced6; }
.podest__platz--3 { order: 3; }
.podest__platz--3 .podest__pokal { background: #c98a4b; }
.podest__name { font-weight: 700; hyphens: auto; overflow-wrap: break-word; }
.podest__punkte { font-weight: 900; }
.podest__platz--ich { outline: 3px solid var(--fw-rot); }
.vitrine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; }
.abzeichen { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--fw-radius-klein);
  border: 2px solid var(--fw-gold); background: #fffbeb; }
.abzeichen__name { font-weight: 800; }
.abzeichen--offen { border-color: var(--fw-linie); background: var(--fw-karte-2); color: var(--fw-grau); }

/* Listen und Aufgaben */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zeile { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.zeile.spalte { align-items: stretch; }
.aufgabe__kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.aufgabe__text { display: flex; flex-direction: column; gap: 2px; }
.aufgabe__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aufgabe__knoepfe .fw-knopf { flex: 1 1 140px; }
/* Melden mit Foto: zwei Schritte in der Karte; der ausgeschaltete Weg ist sichtbar, aber ausgegraut. */
.foto-ablauf { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fw-linie); }
.foto-ablauf .schritt { margin: 8px 0 4px; font-weight: 700; color: var(--fw-tinte); }
.foto-ablauf .fw-knopf:disabled { opacity: .5; cursor: not-allowed; }
.fw-knopf--ok { background: var(--fw-ok); border-color: var(--fw-ok); color: #fff; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.stufe-zeile { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--fw-linie); }
.stufe-zeile--neu { border-bottom: 0; }
/* Treppe der Stufen in der Verwaltung (Jonas 28.10.2026): ein Balken je Stufe, dazwischen ein „+“ zum Einfügen. */
.treppe { display: flex; align-items: flex-end; padding: 14px 8px 8px; overflow-x: auto; border-bottom: 6px solid var(--fw-linie); }
.tr-stufe { display: flex; flex-direction: column; align-items: stretch; flex: none; width: 72px; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; cursor: pointer; }
.tr-balken { display: flex; justify-content: center; padding-top: 6px; border-radius: 8px 8px 0 0; background: var(--fw-rot);
  color: #fff; font-weight: 800; font-size: .85rem; }
.tr-stufe--aktiv .tr-balken { background: var(--fw-gold); color: var(--fw-tinte); outline: 3px solid var(--fw-rot); }
.tr-stufe:focus-visible .tr-balken { outline: 3px solid var(--fw-tinte); }
.tr-name { margin-top: 6px; min-height: 2.3em; font-weight: 800; font-size: .72rem; line-height: 1.15; text-align: center; }
.tr-ab { font-size: .74rem; text-align: center; color: var(--fw-grau); }
.tr-leute { font-size: .72rem; font-weight: 700; text-align: center; color: var(--fw-info); }
.tr-plus { flex: none; align-self: flex-end; display: flex; justify-content: center; width: 30px; padding-bottom: 62px; }
.tr-plus__knopf { width: 26px; height: 26px; padding: 0; border: 2px dashed var(--fw-rot); border-radius: 50%; background: #fff;
  color: var(--fw-rot); font: inherit; font-weight: 900; line-height: 1; cursor: pointer; }
.tr-plus--neu .tr-plus__knopf { border-style: solid; }
.tr-plus__knopf--aktiv { background: var(--fw-rot); color: #fff; border-style: solid; }
.tr-plus__knopf:disabled { opacity: .35; cursor: not-allowed; }
.stufe-zeile--bearbeiten { max-width: 560px; margin-top: 12px; padding: 14px 16px; border: 2px solid var(--fw-rot); border-radius: var(--fw-radius); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hinweis-verlangt { margin: 6px 0; padding: 6px 8px; border-left: 4px solid var(--fw-pruefung); background: var(--fw-pruefung-hell); }
.hinweis-karte { border-left: 4px solid var(--fw-rot); }
.hinweis-karte p { margin: 0 0 8px; }
.bestaetigen { background: var(--fw-aktion-hell); border-color: #f0c28a; }

/* Ausschreiben */
.schritt { margin: 16px 0 6px; color: var(--fw-grau); }
.unterzeile { margin: 10px 0 6px; font-weight: 700; font-size: .86rem; color: var(--fw-rot-dunkel); }
.auswahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl { min-height: var(--fw-bedienflaeche); padding: 6px 14px; border-radius: 99px; border: 1px solid var(--fw-linie-stark);
  background: #fff; color: var(--fw-tinte); font-weight: 700; }
.wahl--aktiv { background: var(--fw-rot); border-color: var(--fw-rot); color: #fff; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 8px 0; }
.stepper output { min-width: 80px; text-align: center; font-size: 2.6rem; font-weight: 900; }
.rund { width: 52px; height: 52px; border-radius: 99px; font-size: 1.6rem; }
.haken { display: flex; gap: 10px; align-items: center; font-weight: 600; }

/* Rangliste */
.rangliste { list-style: none; margin: 0 0 12px; padding: 0; background: #fff; border: 1px solid var(--fw-linie); border-radius: var(--fw-radius); overflow: hidden; }
.rang { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--fw-linie); }
.rang:last-child { border-bottom: 0; }
.rang__platz { width: 30px; font-weight: 800; }
.rang__name { flex: 1; font-weight: 600; }
.rang__punkte { font-weight: 800; }
.rang--1 .rang__platz { color: #9a7400; }
.rang--ich { background: var(--fw-rot-hell); color: var(--fw-rot-dunkel); }

/* Menü im Kopf wie in den anderen Programmen (.fw-kopf__nav aus dem gemeinsamen Design). Auf dem Handy eine eigene
   Zeile unter Wappen und Abmelden, die drei Punkte gleichmäßig verteilt, ohne waagrechtes Scrollen. */
.kopfnav a { font-weight: 700; }
@media (max-width: 640px) {
  .kopfzusatz { display: none; }
  .kopfnav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
  .kopfnav a { font-size: .92rem; white-space: nowrap; }
}

/* Verwaltung als Unterseiten (Jonas, 20.10.2026): Kopf mit Menü und die Meldungen kleben oben, auch beim Scrollen in
   einer langen Unterseite. Auf dem Handy eine eigene Menüzeile, die sich waagrecht wischen lässt; die Seite selbst
   scrollt nie waagrecht. */
.kopfleiste { position: sticky; top: 0; z-index: 20; }
.kopfleiste__meldungen { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.kopfleiste__meldungen .fw-meldung { margin: 8px 0 0; box-shadow: var(--fw-schatten); }
.verwaltungsnav { gap: 4px 14px; }
.verwaltungsnav a { font-weight: 700; white-space: nowrap; }
.verwaltungsnav a:focus-visible, .bereich > h2:focus-visible { outline: 3px solid var(--fw-gold); outline-offset: 2px; }
.bereich > h2:focus { outline-offset: 2px; }
@media (max-width: 900px) {
  .verwaltungsnav {
    order: 3; flex-basis: 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto;
    overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    /* Unauffälliger Balken: nicht mit der Markierung des aktuellen Punkts zu verwechseln. */
    scrollbar-color: rgba(255, 255, 255, .35) transparent; padding-bottom: 4px;
  }
}

/* Eigene Ausschreibungen: der Status groß, die Farbe am linken Rand */
.ausschreibung { border-left: 6px solid var(--fw-linie-stark); }
.ausschreibung--offen { border-left-color: var(--fw-grau); }
.ausschreibung--uebernommen { border-left-color: var(--fw-ok); }
.ausschreibung--gemeldet { border-left-color: var(--fw-aktion-flaeche); background: var(--fw-aktion-hell); }
.ausschreibung__status { margin: 10px 0 2px; font-size: 1.15rem; font-weight: 800; }
.ausschreibung--gemeldet .ausschreibung__status { color: var(--fw-aktion); }
.ausschreibung__meldung { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fw-linie); }

/* Verwaltung */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.tabelle-rahmen { overflow-x: auto; }
.formular { max-width: 520px; }
.formular button { margin-top: 14px; }
.schmal { max-width: 110px; }
.klein-knopf { min-height: 36px; padding: 4px 10px; font-size: .86rem; }
section { scroll-margin-top: 12px; }

/* QR-Aufgaben (ADR 0012) ---------------------------------------------------------------------------------- */
.qr-grenzen { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.qr-grenzen legend { font-weight: 600; margin-bottom: 6px; }
.qr-grenzen .haken { flex-wrap: wrap; font-weight: 400; }
.qr-grenzen .schmal { width: 6rem; }

/* Druckseite A4: auf dem Bildschirm unsichtbar, beim Drucken das Einzige.
   Garantiert genau eine Seite (Jonas, 20.10.2026; Auflagen der Projektleitung): Die Seite ist ein fester Kasten in
   Seitenhöhe, der nie überläuft. Titel höchstens 3, Beschreibung höchstens 6 Zeilen, gekürzt sichtbar mit „…“ (voll
   bleibt sie in der Verwaltung). Das QR-Bild ist 120 mm groß und nie kleiner als 90 mm; der Code darin (ohne den
   vorgeschriebenen weißen Rand) bleibt damit über 70 mm. Reicht der Platz nicht, wird der Text gekürzt, nicht der Code.
   Alles nur im Druck, die Bildschirmansicht bleibt unverändert. */
.druckseite { display: none; }
@media print {
  @page { size: A4 portrait; margin: 15mm; }
  html, body.drucken {
    margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
    display: block !important; background: #fff !important;
  }
  body.drucken > *:not(.druckseite) { display: none !important; }
  body.drucken .druckseite {
    display: flex; flex-direction: column; align-items: center; text-align: center; color: #000;
    box-sizing: border-box; width: 100%; height: 262mm; overflow: hidden;
    break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .druckseite > * { flex: none; }
  .druckseite__kopf { display: flex; flex-direction: column; align-items: center; gap: 2mm; margin-bottom: 5mm; }
  .druckseite__kopf img { width: 20mm; height: 20mm; }
  .druckseite__kopf p { margin: 0; font-size: 10pt; letter-spacing: 0.04em; }
  .druckseite h1 {
    font-size: 24pt; line-height: 1.15; margin: 0 0 5mm; padding-bottom: 3mm; max-width: 180mm;
    border-bottom: 1.5mm solid var(--fw-rot); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .druckseite__text {
    font-size: 13pt; line-height: 1.35; margin: 0 auto 5mm; max-width: 165mm; white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
  }
  .druckseite__text[hidden] { display: none; }
  .druckseite__qr {
    flex: 0 1 120mm; height: 120mm; min-height: 90mm; max-height: 120mm; width: auto; aspect-ratio: 1 / 1;
    object-fit: contain; image-rendering: pixelated;
  }
  .druckseite__punkte { font-size: 16pt; font-weight: 700; margin: 4mm 0 1mm; }
  .druckseite__hinweis { font-size: 10pt; margin: 0 auto; max-width: 150mm; }
}

.qr-karte { border-left: 6px solid var(--fw-rot); }

/* Rechte einer Funktion in der Verwaltung (ADR 0018): aufklappbar, damit die Tabelle schmal bleibt. */
.rechte summary { cursor: pointer; min-width: 12rem; }
.rechte .haken { font-weight: 400; margin-top: 6px; }

/* Prüf-Balken unter der Kopfzeile (Wunsch Jonas, 22.10.2026): auffällig in der Farbe für Handlungsbedarf. */
.pruefbalken {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--fw-aktion-flaeche); color: var(--fw-tinte); font-weight: 700;
}
.pruefbalken[hidden] { display: none; }
.pruefbalken__knopf { background: var(--fw-karte); color: var(--fw-tinte); min-height: var(--fw-bedienflaeche); }
/* Meldung zu einer Wachenaufgabe in der Prüfliste der Handy-Seite: farblich abgehoben (Wunsch Jonas, 22.10.2026). */
.meldung--wache { border-left: 6px solid var(--fw-pruefung); background: var(--fw-pruefung-hell); }

/* Symbole der Abzeichen (ADR 0019): Vitrine auf dem Handy und Verwaltung. */
.abzeichen__symbol { width: 40px; height: 40px; border-radius: 50%; background: var(--fw-gold); display: grid; place-items: center; flex: none; }
.abzeichen__symbol svg { width: 22px; height: 22px; fill: var(--fw-tinte); }
.abzeichen--offen .abzeichen__symbol { background: var(--fw-linie); }
.abzeichen--offen .abzeichen__symbol svg { fill: var(--fw-grau); }
.sammler { font-size: 12px; font-weight: 700; color: var(--fw-pruefung); }
.abzeichen-kopf { display: flex; gap: 12px; align-items: center; }
.abzeichen-kopf h3 { margin: 0; }
.abzeichen-karte--beendet { background: var(--fw-grund); border-style: dashed; }
.symbolraster { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.symbolwahl { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--fw-linie-stark); background: #fff; padding: 9px; cursor: pointer; }
.symbolwahl svg { width: 100%; height: 100%; fill: var(--fw-grau); }
.symbolwahl[aria-checked="true"] { border: 2px solid var(--fw-rot); background: var(--fw-rot-hell); }
.symbolwahl[aria-checked="true"] svg { fill: var(--fw-rot); }
.beschriftung { font-weight: 600; margin: 10px 0 0; }