/* Feuerwehr Dengling - Vereinsverwaltung
   Bewusst handgeschriebenes CSS ohne Baukasten: Ein Nachfolger soll die Oberflaeche
   oeffnen und aendern koennen, ohne vorher etwas zu installieren. */

:root {
  --rot: #8c1919;
  --rot-hell: #f3e3e3;
  --rot-dunkel: #6d1212;
  --text: #1c1c1c;
  --grau: #6b6b6b;
  --linie: #dcdcdc;
  --flaeche: #ffffff;
  --hintergrund: #f4f4f2;
  --gruen: #1f7a3d;
  --gruen-hell: #e2f3e7;
  --gelb-hell: #fdf4d9;
  --gelb: #8a6d12;
  --rand: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
a { color: var(--rot); }

/* ---------------------------------------------------------------- Gerüst */
header.kopf {
  background: var(--rot);
  color: #fff;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Das Logo ist ein rotes Wappen - auf dem roten Balken braucht es eine helle Unterlage,
   sonst geht es unter. */
header.kopf .logo {
  height: 34px; width: 34px; flex: none;
  background: #fff; border-radius: 7px; padding: 2px;
  object-fit: contain;
}
header.kopf .titel { font-weight: 700; font-size: 1.05rem; flex: 1; }
header.kopf .wer { font-size: .8rem; opacity: .85; }
header.kopf button {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}
/* Der Name daneben - kein Knopf, nur die Auskunft, wer angemeldet ist. */
header.kopf #mein-name { opacity: .85; margin-right: .2rem; }
/* Solange das Startpasswort gilt, faellt der Knopf auf. */
header.kopf button.warnt {
  background: #fff;
  color: #8C1919;
  border-color: #fff;
  font-weight: 600;
}

nav.reiter {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  background: var(--rot-dunkel);
  padding: 0 .5rem;
  position: sticky;
  top: 52px;
  z-index: 19;
  scrollbar-width: none;
}
nav.reiter::-webkit-scrollbar { display: none; }
nav.reiter a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  padding: .6rem .75rem;
  white-space: nowrap;
  font-size: .9rem;
  border-bottom: 3px solid transparent;
}
nav.reiter a.aktiv { color: #fff; font-weight: 600; border-bottom-color: #fff; }
nav.reiter .zahl {
  background: #fff; color: var(--rot); border-radius: 999px;
  padding: 0 .35rem; margin-left: .3rem; font-size: .72rem; font-weight: 700;
}

/**
 * Die zweite Reihe: die Unterreiter einer Gruppe (Beitraege, Wehr, Kasse, Verwaltung).
 * Bewusst RUHIGER als die Hauptreihe - hell, schmal, ohne roten Balken. Sie soll sagen
 * „hier geht es weiter“, nicht mit der Hauptnavigation um Aufmerksamkeit ringen.
 */
nav.unterreiter {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--linie);
  margin: -.25rem 0 1rem;
  scrollbar-width: none;
}
nav.unterreiter::-webkit-scrollbar { display: none; }
nav.unterreiter a {
  color: var(--grau);
  text-decoration: none;
  padding: .45rem .8rem;
  white-space: nowrap;
  font-size: .92rem;
  border-bottom: 2px solid transparent;
}
nav.unterreiter a:hover { color: var(--text); }
nav.unterreiter a.aktiv {
  color: var(--rot);
  font-weight: 600;
  border-bottom-color: var(--rot);
}

main { padding: 1rem; max-width: 1100px; margin: 0 auto; }

/* ---------------------------------------------------------------- Bausteine */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1rem;
  margin-bottom: 1rem;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rand); padding: .85rem; }
.kachel .zahl { font-size: 1.7rem; font-weight: 700; color: var(--rot); line-height: 1.1; }
.kachel .text { font-size: .82rem; color: var(--grau); }

button, .knopf {
  font: inherit;
  font-size: .92rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  min-height: 42px;
}
button:hover { background: #f7f7f7; }
button.haupt, .knopf.haupt {
  background: var(--rot); color: #fff; border-color: var(--rot); font-weight: 600;
}
button.haupt:hover { background: var(--rot-dunkel); }
button.klein { min-height: 34px; padding: .3rem .6rem; font-size: .84rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  font-size: 1rem;
  padding: .55rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  width: 100%;
  min-height: 42px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rot); outline-offset: -1px; }
label { display: block; font-size: .8rem; color: var(--grau); margin: .6rem 0 .2rem; }

.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 .8rem; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .78rem; color: var(--grau); text-transform: uppercase; letter-spacing: .03em; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: var(--rot-hell); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.marke {
  display: inline-block; font-size: .74rem; padding: .1rem .45rem;
  border-radius: 999px; background: #eee; color: #555; white-space: nowrap;
}
.marke.rot { background: var(--rot-hell); color: var(--rot); font-weight: 600; }
.marke.gruen { background: var(--gruen-hell); color: var(--gruen); }
.marke.gelb { background: var(--gelb-hell); color: var(--gelb); }

.hinweis { padding: .7rem .85rem; border-radius: 8px; font-size: .9rem; margin-bottom: .8rem; }
.hinweis.rot { background: var(--rot-hell); border-left: 4px solid var(--rot); }
.hinweis.gelb { background: var(--gelb-hell); border-left: 4px solid #d6a520; }
.hinweis.gruen { background: var(--gruen-hell); border-left: 4px solid var(--gruen); }
.hinweis.grau { background: #f0f0ef; border-left: 4px solid var(--grau); }

.werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.werkzeuge input[type="search"] { flex: 1; min-width: 180px; }
.werkzeuge select { width: auto; min-width: 140px; }

.klein { font-size: .82rem; color: var(--grau); }
.rechts { text-align: right; }
.abstand { margin-top: 1rem; }

/* ---------------------------------------------------------------- Dialog */
.ueberlagerung {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto; z-index: 40;
}
.dialog {
  background: #fff; border-radius: var(--rand); width: 100%; max-width: 900px;
  padding: 1.1rem; margin: 2rem 0;
}
/* Felder, die ihre volle Breite brauchen - eine IBAN darf nicht abgeschnitten sein.
   Die IBAN hatte zuerst eine Festbreitenschrift; Daniel wollte am 19.09.2026 ueberall
   dieselbe Schrift, deshalb nur noch etwas Buchstabenabstand zum Mitlesen. */
.dialog .breit { grid-column: 1 / -1; }
.dialog input.iban { letter-spacing: .04em; }
.dialog .kopfzeile { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.dialog .kopfzeile h2 { flex: 1; margin: 0; }
.dialog .fuss { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Belegscan
   Daniel, 20.09.2026: "Waere es moeglich, die Eingabe auf eine Seite des Bildschirms zu
   ruecken und auf der anderen eine Vorschau des Belegs zu erhalten, so dass ich
   gleichzeitig lesen und ausfuellen kann?" - Genau das: links der Beleg, rechts das
   Formular. Eingescannte Papierbelege muss man abtippen, aber nicht mehr aus dem
   Gedaechtnis oder mit einem zweiten Fenster daneben. */
.dialog.weit { max-width: 1320px; }
/* Beim reinen Ansehen steht nichts daneben - das Fenster darf so breit werden wie der
   Bildschirm es hergibt. Daniel am 20.09.2026: „Das Fenster ist relativ klein." */
.dialog.ganzweit { max-width: min(1700px, 96vw); }
.belegscan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.belegscan .vorschau { position: sticky; top: 0; }
.belegscan .vorschau .werkzeuge { margin-bottom: .4rem; align-items: center; }
.belegscan .vorschau iframe,
.belegscan .vorschau img,
.belegscan .vorschau #vorschauPlatz {
  display: block; width: 100%; height: 72vh; border: 1px solid var(--linie);
  border-radius: var(--rand); background: var(--flaeche);
}
/* Ein Bild soll sich einpassen, nicht auf 72vh gezerrt werden. */
.belegscan .vorschau img { height: auto; max-height: 72vh; object-fit: contain; }

/* Schmaler Bildschirm: untereinander, Beleg zuerst - man liest ihn ja, bevor man tippt.
   Die Vorschau wird flacher, damit die ersten Felder noch mit aufs Bild passen. */
@media (max-width: 980px) {
  .belegscan { grid-template-columns: 1fr; }
  .belegscan .vorschau { position: static; }
  .belegscan .vorschau iframe,
  .belegscan .vorschau #vorschauPlatz { height: 44vh; }
  .belegscan .vorschau img { max-height: 44vh; }
}

/* ---------------------------------------------------------------- Datei ansehen */
/*
 * Hier ist der Beleg das EINZIGE im Fenster - anders als beim Scannen, wo daneben noch
 * das Formular steht. Also darf er fast den ganzen Bildschirm bekommen.
 *
 * 🔴 Der Rahmen und der Platzhalter („Wird geladen …") tragen dieselbe Kennung, weil der
 *    eine den anderen ersetzt. Die Regeln muessen deshalb die ART mitnennen
 *    (`div#` gegen `iframe#`) - sonst erwischt die Platzhalter-Regel mit ihrem
 *    `height: auto` auch den fertigen Rahmen. Genau so ist es am 20.09.2026 passiert:
 *    Das PDF stand in einem Streifen von 180 Pixeln.
 */
.dateiansehen iframe,
.dateiansehen img {
  display: block; width: 100%; height: 82vh; border: 1px solid var(--linie);
  border-radius: var(--rand); background: var(--flaeche); padding: 0;
}
.dateiansehen div#ansehenPlatz {
  display: block; width: 100%; padding: 1rem; min-height: 8rem;
  border: 1px solid var(--linie); border-radius: var(--rand); background: var(--flaeche);
}
/* Ein Bild soll sich einpassen, nicht auf 82vh gezerrt werden. */
.dateiansehen img { height: auto; max-height: 82vh; object-fit: contain; }
.dateiansehen .werkzeuge { margin-top: .7rem; justify-content: flex-end; }

/* Auf einem schmalen Bildschirm ist hoch wichtiger als breit - aber die Knoepfe
   muessen noch draufpassen. */
@media (max-width: 980px) {
  .dateiansehen iframe { height: 70vh; }
  .dateiansehen img { max-height: 70vh; }
}

/* ---------------------------------------------------------------- Anmeldung */
.anmeldung { max-width: 380px; margin: 8vh auto; }
.anmeldung .karte { padding: 1.4rem; text-align: center; }
.anmeldung .karte form { text-align: left; }
.anmeldung h1 { color: var(--rot); font-size: 1.3rem; }
.anmeldung img.logo { width: 108px; height: auto; margin-bottom: .6rem; }

/* ---------------------------------------------------------------- Handy */
@media (max-width: 640px) {
  main { padding: .7rem; }
  h1 { font-size: 1.25rem; }
  /* Auf dem Handy nur Mitgliedsart und Eintritt ausblenden - Nummer, Name und
     Beitrag bleiben stehen, die braucht man unterwegs. */
  table.schmal th:nth-child(3), table.schmal td:nth-child(3),
  table.schmal th:nth-child(4), table.schmal td:nth-child(4),
  table.schmal th:nth-child(6), table.schmal td:nth-child(6) { display: none; }
  .dialog { margin: .5rem 0; }
}

.laedt { color: var(--grau); padding: 2rem 0; text-align: center; }