/* style.css — gemeinsames Aussehen. Schlicht, gross genug fuer den Blick im
   Vorbeigehen (Auftrag: "das Blatt wird nicht studiert, es wird
   ueberflogen"). Farben angelehnt an das bestehende Dispo-/Infoblatt-Design
   (_werkzeug/dispo_blatt.py: ANTHRAZIT, SIGNALROT, GRAU_*).

   CI-Entscheidung 19.08.2026 (gedaempfte Fassung, NICHT #ff2f2f/#262121):
   --akzent (#c84443) ist die Band-Akzentfarbe fuer Bedienelemente (Knoepfe,
   Links, Hervorhebungen/aktive Zustaende). Die Ampel-Farben (--rot etc.)
   bleiben davon bewusst getrennt - sie zeigen den Vollstaendigkeitsstatus
   einer Dispo an, nicht die Marke, und muessen unverwechselbar bleiben
   (Auftrag: "Ampelfarben NICHT mit der CI-Akzentfarbe verwechselbar
   machen"). Deshalb verwendet ab hier KEINE Nicht-Ampel-Stelle mehr
   var(--rot) - nur noch Ampelpunkt, Warnbalken und Fehlerkasten tun das. */

:root {
  color-scheme: dark;
  --bg: #141212;
  --bg-karte: #211d1d;
  --bg-karte-hell: #2a2525;
  --rand: #3a3333;
  --text: #f5f0ef;
  --text-sek: #b8adac;
  --text-label: #8c8180;
  --akzent: #c84443;
  --anthrazit: #343232;
  --rot: #e12519;
  --rot-dunkel: #4a1512;
  --orange: #e0a83c;
  --orange-dunkel: #4a3a15;
  --gruen: #4caf6e;
  --gruen-dunkel: #163d26;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1rem 1rem 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: 17px;
}

h1 {
  font-size: 1.5rem;
  margin: 0.4rem 0 0.2rem;
}
h2 {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 1.6rem 0 0.5rem;
}
p { margin: 0.5rem 0; }
/* Echte Inhalts-Links (Kartenlink, anklickbare Begriffe im Zeitplan) in der
   CI-Akzentfarbe, unterstrichen - Unterstrich zusaetzlich zur Farbe, damit
   ein Link auch bei schwacher Farbunterscheidung als Link erkennbar bleibt.
   .kopfzeile/.nav.unten ueberschreiben das gezielt (eigene, spezifischere
   Regeln weiter unten). */
a { color: var(--akzent); text-decoration: underline; }

/* -- Anmeldung -------------------------------------------------------- */
.anmeldung {
  max-width: 420px;
  margin: 2rem auto 0;
}
.anmeldung input[type="email"],
.anmeldung input[type="text"] {
  display: block;
  width: 100%;
  font-size: 1.1rem;
  padding: 0.8rem;
  margin: 0.6rem 0;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--bg-karte);
  color: var(--text);
}
/* Aktiver Zustand (Auftrag: "Akzentfarbe auf Links, Knoepfe, aktive
   Zustaende") - Eingabefeld beim Antippen erkennbar hervorgehoben. */
.anmeldung input[type="email"]:focus,
.anmeldung input[type="text"]:focus {
  border-color: var(--akzent);
  outline: none;
}

/* Antippbereich vergroessert (min. 44pt Richtwert) - vorher 0.9rem Padding
   ergab bei 1.05rem Schrift ca. 39px Gesamthoehe, knapp darunter. */
button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.05rem;
  padding: 1rem 0.9rem;
  margin: 0.6rem 0;
  border: none;
  border-radius: 10px;
  background: var(--akzent);
  color: white;
  font-weight: 600;
}
button:active { opacity: 0.85; }
button.zweitrangig {
  background: var(--bg-karte-hell);
  color: var(--text);
}

.meldung { font-size: 0.95rem; color: var(--text-sek); min-height: 1.3rem; }

/* -- Allgemeine Kasten -------------------------------------------------- */
.kasten {
  background: var(--bg-karte);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.7rem 0;
}
.kasten.warnung {
  background: var(--orange-dunkel);
  border-left: 4px solid var(--orange);
}
.kasten.fehler {
  background: var(--rot-dunkel);
  border-left: 4px solid var(--rot);
}

/* -- Kopfzeile / Navigation --------------------------------------------- */
.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.kopfzeile a {
  text-decoration: none;
  color: var(--text-sek);
  font-size: 0.95rem;
  /* Antippbereich vergroessert, ohne den Zeilenabstand sichtbar zu aendern
     (negatives Aussenmass gleicht das zusaetzliche Innenmass wieder aus). */
  padding: 0.5rem 0.2rem;
  margin: -0.5rem -0.2rem;
}
/* Gruppiert zwei Kopfzeilen-Links rechts (app.html: Schalter "Memberview"/
   "Managerview" + "Über · Abmelden"), damit 'justify-content: space-between'
   auf .kopfzeile weiterhin nur zwei Gruppen auseinanderzieht (Schriftzug
   links, alles andere rechts) statt drei Elemente gleichmaessig zu verteilen. */
.kopfzeile-rechts {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
/* Schalter "Memberview"/"Managerview" (js/sichtwechsel.js, zeigeKopfSchalter())
   - Auftrag 19.08.2026, Korrektur Martins: eigener Kopfzeilen-Knopf statt
   Karte auf ueber.html, gleiche Optik wie ".kopfzeile a". Als <button>
   gebaut, deshalb Button-Grundformat hier explizit zurueckgesetzt. */
.kopfzeile button.kopfzeile-schalter {
  all: unset;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-sek);
  font-size: 0.95rem;
  padding: 0.5rem 0.2rem;
  margin: -0.5rem -0.2rem;
}
.kopfzeile button.kopfzeile-schalter:active { opacity: 0.85; }
.zaehler {
  color: var(--text-sek);
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
}

/* -- Schriftzug (CI-Wortmarke im Kopf, Anmeldeseite und Uebersicht) ------ */
.schriftzug {
  display: block;
  width: auto;
}
.schriftzug-kopf { height: 26px; }
.schriftzug-anmeldung { height: 42px; margin-bottom: 0.3rem; }
.anmeldung h1 {
  font-size: 1.05rem;
  color: var(--text-sek);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
}

/* -- Hinweisbalken Bandmitglied-Sicht ------------------------------------ */
/* Dezent, aber unuebersehbar (Auftrag): eigene, gedaempfte Umrandung in der
   Akzentfarbe statt der gefuellten Standard-Knopf-Optik - eine Klasse
   schlaegt dank hoeherer Spezifitaet das allgemeine 'button'-Aussehen. Als
   <button> gebaut (nicht <div>), damit sie ohne Zusatzaufwand antippbar UND
   per Tastatur bedienbar ist. */
.sicht-balken {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-karte);
  border: 1.5px solid var(--akzent);
  color: var(--akzent);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.sicht-balken:active { opacity: 0.85; }

/* -- Warnbalken (rote Ampel) --------------------------------------------- */
.warnbalken {
  background: var(--rot);
  color: white;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0 1.1rem;
  font-weight: 600;
}
.warnbalken .details {
  font-weight: 400;
  font-size: 0.9rem;
  margin-top: 0.3rem;
  opacity: 0.92;
}

/* -- Gig-Liste (Uebersicht) ---------------------------------------------- */
.gig-liste { list-style: none; margin: 0; padding: 0; }
.gig-zeile {
  display: block;
  background: var(--bg-karte);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 0.6rem 0;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.12s ease;
}
.gig-zeile:active { transform: scale(0.98); }
.gig-zeile.naechster {
  border: 1px solid var(--akzent);
}
.naechster-hinweis {
  color: var(--akzent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Ladezustand statt leerer Flaeche (app.html-Liste, gig.html-Blatt), bis
   die echten Daten da sind. '.skeleton' auf '.gig-zeile' ODER '.kasten'
   gesetzt - beide bringen bereits Randradius/Aussenabstand mit, hier wird
   nur der Inhalt durch die schimmernde Flaeche ersetzt. */
.skeleton {
  background: linear-gradient(90deg, var(--bg-karte) 0%, var(--bg-karte-hell) 50%, var(--bg-karte) 100%);
  background-size: 200% 100%;
  animation: sp-schimmer 1.3s ease-in-out infinite;
}
.gig-zeile.skeleton { height: 92px; }
@keyframes sp-schimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.gig-kopfzeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gig-datum { font-weight: 700; font-size: 1.05rem; }
.gig-titel { font-size: 1.02rem; margin: 0.15rem 0; }
.gig-ort { color: var(--text-sek); font-size: 0.92rem; }
.gig-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-sek);
}

.ampel-punkt {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.ampel-rot { background: var(--rot); }
.ampel-orange { background: var(--orange); }
.ampel-gruen { background: var(--gruen); }

/* Sicherheitsstufe: Form UND Farbe unterscheidbar (ZIEL.md 3.5), nicht nur
   ein Wort. "fix" = gefuellte Pille, "zugesagt" = umrandete Pille. */
.stufe-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.stufe-fix {
  background: var(--akzent);
  color: white;
}
.stufe-zugesagt {
  background: transparent;
  border: 1.5px solid var(--orange);
  color: var(--orange);
}
.stufe-anfrage {
  background: transparent;
  border: 1.5px dashed var(--text-label);
  color: var(--text-label);
}
/* Paket 21 (19.08.2026): zwei weitere Status.
   "vergangen" = gedaempft, gefuellt aber leise - abgehakt, kein Handlungs-
   bedarf. Gefuellt (nicht umrandet), damit es sich in der Form von
   "anfrage"/"zugesagt" unterscheidet und nicht nur in der Farbe.
   "abgesagt" = umgedrehte Pille, hell auf dunkel. Das ist auf diesem
   dunklen Hintergrund das auffaelligste Muster ueberhaupt und benutzt
   trotzdem KEINE der drei Ampelfarben und auch nicht die CI-Akzentfarbe -
   ein abgesagter Gig darf nie mit einer roten Ampel verwechselt werden
   (die heisst "unvollstaendig", nicht "findet nicht statt"). */
.stufe-vergangen {
  background: var(--anthrazit);
  color: var(--text-sek);
}
.stufe-abgesagt {
  background: var(--text);
  color: var(--bg);
}

details.vergangen summary {
  cursor: pointer;
  color: var(--text-label);
  padding: 0.6rem 0;
}

/* -- Gig-Blatt ------------------------------------------------------------ */
.feld-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.98rem;
}
.feld-zeile:last-child { border-bottom: none; }
.feld-label { color: var(--text-label); flex: 0 0 40%; }
.feld-wert { text-align: right; flex: 1; }
.feld-wert.offen { color: var(--text-label); font-style: italic; }

table.blatt-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
table.blatt-tabelle th {
  text-align: left;
  color: var(--text-label);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rand);
}
table.blatt-tabelle td {
  padding: 0.5rem 0.3rem 0.5rem 0;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
table.blatt-tabelle tr:last-child td { border-bottom: none; }

.anmerkung-karte { margin: 0.6rem 0; }
.anmerkung-titel {
  font-weight: 700;
  border-left: 3px solid var(--akzent);
  padding-left: 0.5rem;
  margin-bottom: 0.3rem;
}
.anmerkung-karte ul { margin: 0.2rem 0 0.2rem 1.1rem; padding: 0; }

.leerer-abschnitt { color: var(--text-label); font-style: italic; }

/* -- Sanfte Uebergaenge -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .kasten:not(.skeleton), .warnbalken, .gig-zeile:not(.skeleton) {
    animation: sp-einblenden 0.25s ease;
  }
}
@keyframes sp-einblenden {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

nav.unten {
  display: flex;
  gap: 0.6rem;
  margin-top: 2rem;
}
nav.unten a {
  flex: 1;
  text-align: center;
  padding: 0.7rem;
  border-radius: 10px;
  background: var(--bg-karte);
  text-decoration: none;
  color: var(--text);
}
/* Gleiche Optik wie 'nav.unten a', aber fuer den Abmelden-Knopf (Auftrag
   19.08.2026, Korrektur Martins: "Über" und "Abmelden" waren im
   Fuss-Navi ein einziger Link "Über · Abmelden" und wirkten wie ein
   Knopf - jetzt zwei eigenstaendige Elemente). */
nav.unten button {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  padding: 0.7rem;
  border-radius: 10px;
  background: var(--bg-karte);
  color: var(--text);
  cursor: pointer;
}
nav.unten button:active { opacity: 0.85; }

/* -- "Abmelden" am Seitenende von ueber.html: kleiner, sichtbar getrennter
   Punkt (Auftrag 19.08.2026) - eigener Abstand plus Trennlinie, statt direkt
   im Anschluss an die Anleitung zu stehen. */
.abmelden-bereich {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

/* -- Startseite: neue Karten (P9, STUFE3-ENTWURF Abschnitt 7) ------------ */
/* h2 sitzt hier (anders als bei .kasten in blatt.js) INNERHALB der Karte -
   der allgemeine Aussenabstand oben waere dort zu viel. */
.kasten.karte-handlung > h2:first-child,
.kasten.karte-manager > h2:first-child {
  margin-top: 0;
}
.handlung-eintrag,
.manager-eintrag {
  display: block;
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rand);
  color: var(--text);
  text-decoration: none;
}
.handlung-eintrag:last-child,
.manager-eintrag:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.handlung-titel { font-weight: 600; margin: 0 0 0.15rem; }
.handlung-frist { color: var(--text-sek); font-size: 0.88rem; margin: 0 0 0.5rem; }
.handlung-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
}
.manager-eintrag { font-size: 0.95rem; }

/* Zwei grosse Knoepfe nebeneinander ("Ich kann" / "Ich kann nicht",
   STUFE3-ENTWURF Abschnitt 5). '.aktiv' markiert die aktuelle Antwort auf
   dem Gig-Blatt (dort bleiben beide Knoepfe stehen und bleiben aenderbar). */
.antwort-knopfreihe {
  display: flex;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.antwort-knopfreihe button.antwort-knopf {
  flex: 1;
  margin: 0;
  background: var(--bg-karte-hell);
  color: var(--text);
}
.antwort-knopfreihe button.antwort-knopf.aktiv {
  background: var(--akzent);
  color: white;
}
.antwort-frist,
.antwort-status {
  color: var(--text-sek);
  font-size: 0.9rem;
  margin: 0.2rem 0;
}

/* Fahrzeugfrage (P5, STUFE3-ENTWURF Abschnitt 2/5) - Radio-Optionen
   untereinander, ausreichend Antippbereich. */
.fahrzeug-frage-titel { margin-top: 0.9rem; }
label.fahrzeug-option {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.98rem;
}
label.fahrzeug-option input[type="radio"] {
  margin-right: 0.5rem;
  vertical-align: middle;
}
label.fahrzeug-option input[type="number"] {
  width: 3.5rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--rand);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}
#fahrzeugfrage-platz button#fahrzeug-passt {
  margin-top: 0.4rem;
}

/* -- Karte "Deine Gigs": kompakte Einzeiler (P9, STUFE3-ENTWURF 7.4) ----- */
.gig-zeile-kompakt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bg-karte);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0;
  text-decoration: none;
  color: var(--text);
}
.gig-zeile-kompakt.naechster { border: 1px solid var(--akzent); }
.kompakt-hauptzeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.kompakt-datum { font-weight: 700; }
.kompakt-titel { color: var(--text); }
.kompakt-stagetime {
  color: var(--akzent);
  font-size: 0.9rem;
  font-weight: 600;
  padding-left: 1.1rem; /* richtet sich am Ampelpunkt+Datum darueber aus */
}

/* -- Karte "Anfragen" (P9, STUFE3-ENTWURF 7.5) ---------------------------- */
.anfragen-zeile { margin: 0.5rem 0; }
.anfragen-zeile-details summary,
.anfragen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  background: var(--bg-karte);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  list-style: none;
}
.anfragen-zeile-details summary::-webkit-details-marker { display: none; }
.anfragen-datum { font-weight: 700; }
.anfragen-titel { color: var(--text-sek); }
.anfragen-zaehler { margin-left: auto; color: var(--akzent); font-weight: 600; font-size: 0.92rem; }
.anfragen-hinweis { margin-left: auto; color: var(--text-label); font-style: italic; font-size: 0.9rem; }
.anfragen-detail {
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.anfragen-detail p { margin: 0.3rem 0; }

.anfragen-freigeben-knopf { margin: 0.5rem 0 0; }
.anfragen-freigeben-formular {
  background: var(--bg-karte-hell);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-top: 0.4rem;
}
.welle-wahl { display: flex; gap: 0.5rem; }
.welle-wahl button { flex: 1; margin: 0.3rem 0; }
.welle-wahl button.aktiv {
  background: var(--akzent);
  color: white;
}
.personen-liste { margin: 0.4rem 0; }
label.personen-option {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.freigeben-bestaetigen-knopf { margin-top: 0.4rem; }

/* -- "Abfrage verwalten" (Auftrag 19.08.2026 Punkt 2, dauerhafter
   Verwaltungs-Bereich) - Anfragen-Karte der Startseite UND Gig-Blatt. */
.verwalten-bereich { margin-top: 0.5rem; }
.verwalten-knopf { margin: 0.3rem 0; }
.verwalten-panel {
  background: var(--bg-karte-hell);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-top: 0.4rem;
}
.verwalten-welle { margin-bottom: 0.9rem; }
.verwalten-welle:last-child { margin-bottom: 0; }
.verwalten-welle-titel { margin: 0 0 0.3rem; }