/* Grundgestaltung der Anwendung – bewusst schlicht, ohne externe Abhängigkeiten.
   Farben aus den Logos des CDH-Stephanus Bezirksverbands Bremen:
   Rot aus dem Kreuz (#B4282B), warmer Ton aus dem Brot-Logo (#E8C0A8). */

:root {
  --text: #1f1f1f;
  --text-leise: #5c5552;
  --hintergrund: #f7f3f0;
  --flaeche: #ffffff;
  --rahmen: #ddd3cc;
  --akzent: #b4282b;
  --akzent-dunkel: #8e1f22;
  --warm: #e8c0a8;
  --warm-hell: #faf1eb;
  --fehler: #a11d20;
  --fehler-hell: #fbe9e9;
  --warnung-hell: #fff4dc;
  --erfolg-hell: #e7f3ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--hintergrund);
}

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--flaeche);
  border-bottom: 4px solid var(--akzent);
}
.kopf a { color: var(--text); }
.marke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.marke img { width: 56px; height: 56px; }
.marke-text { display: grid; line-height: 1.2; }
.marke-text strong { font-size: 1.1rem; }
.marke-text small { color: var(--text-leise); font-size: 0.85rem; }
.instanz {
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--warnung-hell);
  border: 1px solid #e0b84c;
}
.benutzer { display: flex; align-items: center; gap: 1rem; }
.benutzer span { color: var(--text-leise); }
.hauptmenue { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-right: auto; margin-left: 1.5rem; }
.hauptmenue a { text-decoration: none; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 4px; }
.hauptmenue a:hover { background: var(--warm-hell); color: var(--akzent-dunkel); }
.hauptmenue a[aria-current="page"] { background: var(--warm-hell); color: var(--akzent-dunkel); box-shadow: inset 0 -3px 0 var(--akzent); }

/* Links ohne Unterstrich; erst beim Darüberfahren unterstrichen */
a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); text-decoration: underline; }

/* Anmeldeseiten: Logo über dem Formular */
.anmelde-logo { display: block; margin: 0 auto 1.25rem; width: 260px; max-width: 100%; height: auto; }
.benutzer form { margin: 0; }

.inhalt {
  max-width: 72rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 6px;
}
.inhalt.schmal { max-width: 32rem; }

h1 { font-size: 1.5rem; margin-top: 0; }
.hinweis { color: var(--text-leise); font-size: 0.95rem; }

.formular { display: grid; gap: 0.4rem; margin: 1rem 0; }
.formular label { font-weight: 600; margin-top: 0.5rem; }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

button, .knopf {
  font: inherit;
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 4px;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  justify-self: start;
}
button:hover, .knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf-hell { background: var(--flaeche); color: var(--akzent); border: 1px solid var(--akzent); }
.knopf-hell:hover { background: var(--warm-hell); color: var(--akzent-dunkel); }
button.link {
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
}
button.link:hover { background: none; color: var(--akzent); }

/* Nebenaktionen (bearbeiten, Export, Datenschutz …): kleine umrandete Knöpfe statt unterstrichener Links */
.knopf-klein, .export-links a, .datenschutz-links a, .wochenwahl a {
  display: inline-block;
  margin: 0;
  padding: 0.2rem 0.65rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--akzent);
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.knopf-klein:hover, .export-links a:hover, .datenschutz-links a:hover, .wochenwahl a:hover {
  color: var(--akzent-dunkel);
  background: var(--warm-hell);
  border-color: var(--akzent);
  text-decoration: none;
}
/* "Abbrechen" und "Zurücksetzen" neben dem Hauptknopf: heller Knopf in gleicher Größe */
.aktionen > a:not(.knopf), .filter > a {
  display: inline-block;
  padding: calc(0.55rem - 1px) 1.1rem;
  border: 1px solid var(--akzent);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--akzent);
  text-decoration: none;
}
.aktionen > a:not(.knopf):hover, .filter > a:hover { background: var(--warm-hell); color: var(--akzent-dunkel); text-decoration: none; }
.aktionen .knopf { margin-top: 0; }

.meldung { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; background: var(--erfolg-hell); }
.meldung-error { background: var(--fehler-hell); color: var(--fehler); }
.meldung-warning { background: var(--warnung-hell); }

.schritte li { margin-bottom: 1rem; }
.qr-code { margin: 0.75rem 0; }
.qr-code svg { width: 200px; height: auto; background: #fff; }
.geheimnis { font-size: 1.05rem; letter-spacing: 0.05em; word-break: break-all; }

.codes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.codes code { font-size: 1.1rem; letter-spacing: 0.08em; }

/* --- Listen ----------------------------------------------------------------- */

h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.titelzeile h1, .titelzeile h2 { margin-bottom: 0.5rem; }
.titelzeile .knopf { margin-top: 0; }

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem;
  background: var(--warm-hell);
  border-radius: 4px;
}
.filter input[type="search"] { flex: 1 1 16rem; font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--rahmen); border-radius: 4px; }
.filter select { width: auto; }
.filter button { margin-top: 0; }

.zurueck { margin: 0 0 0.25rem; font-size: 0.95rem; }

/* Briefauswahl in der Patenschaftstabelle */
.brief-knopf { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: 0.5rem; }
.brief-knopf select { width: auto; padding: 0.15rem 0.3rem; font-size: 0.85rem; }

/* Reiter je Projekt über der Kinderliste */
.reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--akzent); margin: 0 0 1rem; }
.reiter a {
  padding: 0.45rem 0.9rem; border: 1px solid var(--rahmen); border-bottom: 0; border-radius: 4px 4px 0 0;
  text-decoration: none; color: inherit; background: var(--flaeche);
}
.reiter a:hover { background: var(--warm-hell); }
.reiter a[aria-current="page"] { background: var(--akzent); color: #fff; border-color: var(--akzent); font-weight: 600; }

/* Leiste "Patenschaftskarteien" über der Kinderliste */
.karteien { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.75rem; }
.karteien button { margin-top: 0; }

/* Aufklappbare Mehrfachauswahl (z. B. Standorte) ohne JavaScript */
.mehrfachauswahl { position: relative; }
.mehrfachauswahl summary {
  cursor: pointer;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  background: var(--flaeche);
  list-style-position: inside;
}
.mehrfachauswahl[open] summary { border-color: var(--akzent); }
.mehrfachauswahl-liste {
  position: absolute;
  z-index: 10;
  margin-top: 0.25rem;
  padding: 0.75rem;
  min-width: 16rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mehrfachauswahl fieldset { border: 0; margin: 0 0 0.5rem; padding: 0; }
.mehrfachauswahl legend { font-weight: 600; padding: 0; }
.mehrfachauswahl label { display: block; padding: 0.15rem 0; }

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rahmen); }
.tabelle th { background: var(--warm-hell); font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--warm); }
.tabelle tbody tr:hover { background: var(--warm-hell); }
.tabelle .zahl { text-align: right; }
/* Sortierbare Spaltenüberschriften (static/js/sortieren.js) */
.tabelle th .sortieren {
  all: unset; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem;
}
.tabelle th .sortieren:hover { text-decoration: underline; }
.tabelle th .sortieren:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.tabelle th .sortieren::after { content: "↕"; opacity: 0.35; font-size: 0.85em; }
.tabelle th[aria-sort="ascending"] .sortieren::after { content: "▲"; opacity: 0.8; }
.tabelle th[aria-sort="descending"] .sortieren::after { content: "▼"; opacity: 0.8; }

.seiten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; color: var(--text-leise); }
.seiten a { margin: 0 0.5rem; }

.marke-rot, .marke-gelb, .status {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 3px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.marke-rot { background: var(--fehler-hell); color: var(--fehler); }
.marke-gelb { background: var(--warnung-hell); }
.status { background: var(--hintergrund); }
.status-aktiv { background: var(--erfolg-hell); }
.status-warteliste, .status-ende_in_klaerung { background: var(--warnung-hell); }

/* --- Detailseiten ----------------------------------------------------------- */

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2rem; }
.daten { display: grid; grid-template-columns: 10rem 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; }

/* --- Formulare -------------------------------------------------------------- */

.formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem 1.5rem; margin-top: 1rem; }
.feld { display: grid; gap: 0.25rem; align-content: start; }
.feld label { font-weight: 600; }
.feld-haken { display: flex; align-items: center; gap: 0.5rem; }
.feld-haken label { font-weight: normal; }
.feld:has(textarea) { grid-column: 1 / -1; }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--fehler); }
.fehlertext { color: var(--fehler); }
.aktionen { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }
.aktionen button { margin-top: 0; }

.konflikt {
  border: 2px solid var(--fehler);
  background: var(--fehler-hell);
  border-radius: 6px;
  padding: 0.5rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}
.konflikt h2 { color: var(--fehler); margin-top: 0.75rem; }
.konflikt .tabelle { background: var(--flaeche); }

.fotos { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.fotos figure { margin: 0; }
.fotos img { width: 160px; height: 160px; object-fit: cover; border-radius: 4px; border: 1px solid var(--rahmen); display: block; }
.fotos figcaption { font-size: 0.85rem; color: var(--text-leise); }
.aktionen a + a, p a + a { margin-left: 1rem; }

.tabelle tr.abweichend td { background: var(--warnung-hell); }
.export-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; margin-right: 1rem; font-size: 0.95rem; color: var(--text-leise); }
.datenschutz-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--text-leise); }
.hinweis .knopf-klein { margin-left: 0.4rem; }
p .knopf-klein + .knopf-klein { margin-left: 0.4rem; }
button.gefahr { background: var(--fehler); }
button.gefahr:hover { background: #7a1416; }

.verlauf-eintrag { border-left: 4px solid var(--warm); padding-left: 1rem; margin-bottom: 1.5rem; }
.verlauf-eintrag h2 { font-size: 1rem; margin-top: 0; }

/* --- Startseite ------------------------------------------------------------- */

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.kachel {
  display: block;
  padding: 1rem;
  border: 1px solid var(--rahmen);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}
.kachel { border-top: 4px solid var(--warm); }
.kachel:hover { border-color: var(--akzent); color: var(--text); background: var(--warm-hell); }
.kachel .zahl { display: block; font-size: 1.8rem; font-weight: 600; color: var(--akzent); }

@media (max-width: 40rem) {
  .daten { grid-template-columns: 1fr; }
  .daten dd { margin-bottom: 0.5rem; }

  /* Smartphone: flacher Kopf, Menü als waagerecht wischbare Leiste */
  .kopf { padding: 0.4rem 0.75rem 0; gap: 0.25rem 0.75rem; }
  .marke img { width: 40px; height: 40px; }
  .marke-text small { display: none; }
  .benutzer { order: 3; margin-left: auto; gap: 0.75rem; font-size: 0.9rem; }
  .benutzer a, .benutzer span { white-space: nowrap; }
  .hauptmenue { order: 4; width: 100%; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hauptmenue a { white-space: nowrap; padding: 0.5rem 0.6rem; border-radius: 4px 4px 0 0; }

  /* Inhalt bis an den Rand, Tabellen zeilenweise kompakt und seitlich wischbar */
  .inhalt { margin: 0; padding: 1rem; border: 0; border-radius: 0; }
  .tabelle th, .tabelle td { white-space: nowrap; }
  .export-links { margin: 0; }
}

/* --- Startseite mit den Bereichen ------------------------------------------- */

.bereiche { grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); }
.kachel.bereich { padding: 1.5rem; border-top-width: 6px; }
.kachel.bereich h2 { margin: 0 0 0.4rem; color: var(--akzent); }
.kachel.bereich .marke-gelb { display: inline-block; margin-top: 0.6rem; }

/* --- Fuhrpark --------------------------------------------------------------- */

.wochenwahl { display: inline-flex; gap: 0.4rem; }
.status-bestaetigt { background: var(--erfolg-hell); }
.status-angefragt { background: var(--warnung-hell); }
.status-abgelehnt, .status-storniert { background: var(--fehler-hell); color: var(--fehler); }

.plan { table-layout: fixed; min-width: 56rem; }
.plan .fahrzeug-spalte { width: 11rem; }
.plan td { vertical-align: top; height: 4.5rem; padding: 0.3rem; }
.plan tbody th { font-weight: normal; vertical-align: top; background: var(--flaeche); border-bottom: 1px solid var(--rahmen); }
.plan .heute { background: var(--warm-hell); }
.plan tbody tr:hover { background: inherit; }
.belegung {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0.15rem 0.35rem;
  border-left: 3px solid #2f7a45;
  border-radius: 3px;
  background: var(--erfolg-hell);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.25;
  text-decoration: none;
}
.belegung:hover { color: var(--akzent-dunkel); }
.belegung-angefragt { background: var(--warnung-hell); border-left: 3px dashed #a07400; }
.belegung.legende { display: inline-block; margin: 0 0.4rem 0 0; }
.plan .frei { font-size: 0.8rem; color: var(--text-leise); }
.plan .frei:hover, .plan .frei:focus-visible { color: var(--akzent); }