:root {
  --green: #2d8c4e;
  --green-light: #e8f5ed;
  --red: #c0392b;
  --red-light: #fdecea;
  --blue: #1a56a0;
  --blue-light: #e8f0fb;
  --gold: #c9941f;
  --gold-light: #fbf2e1;
  --gray: #f4f5f7;
  --border: #dde1e8;
  --text: #1e2330;
  --muted: #676e7c;
  --white: #ffffff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #eef1f6;
  color: var(--text);
  min-height: 100vh;
}
header {
  background: var(--blue);
  color: white;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}
header h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 1 200px; justify-content: flex-end; }
.header-logo { height: 44px; width: auto; display: block; }
.header-user { font-size: 13px; opacity: 0.95; display: flex; align-items: center; gap: 6px; }

nav {
  display: flex;
  gap: 4px;
  background: var(--white);
  padding: 8px 28px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
nav button {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
}
nav button:hover { background: var(--gray); }
nav button.active { color: var(--blue); border-bottom-color: var(--blue); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.tab-section { display: none; }
.tab-section.active { display: block; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--blue); }
.card h3 { font-size: 15px; margin-bottom: 10px; }
.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-header-row h2 { margin-bottom: 0; }

.connect-screen {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
}
.connect-screen .card { padding: 32px; text-align: left; }
.connect-screen p { color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

button.btn, a.btn {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.btn:hover, a.btn:hover { opacity: 0.9; }
button.btn.secondary, a.btn.secondary { background: var(--gray); color: var(--text); border: 1px solid var(--border); }
button.btn.success { background: var(--green); }
button.btn.danger { background: var(--red); }
button.btn.small, a.btn.small { padding: 6px 12px; font-size: 13px; }
button.btn:disabled { opacity: 0.6; cursor: default; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.muted { color: var(--muted); font-size: 13px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }

.version-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 4px;
}
.card .version-badge { background: var(--blue-light); color: var(--blue); border-color: transparent; }

#changelog-list { display: flex; flex-direction: column; gap: 8px; }
.changelog-entry { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.changelog-entry .cv { font-weight: 700; color: var(--blue); }
.changelog-group { display: flex; flex-direction: column; gap: 4px; }
.changelog-group .cg-title { font-weight: 700; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.changelog-group .cg-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--text); }

.back-to-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.back-to-dashboard:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }

/* ---------- Neue Meldung: Positions-Zeilen ---------- */

.position-row {
  display: grid;
  grid-template-columns: 1fr 100px 40px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.position-row:last-child { border-bottom: none; }
.position-material, .position-menge {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
.btn-remove-position {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
}
.btn-remove-position:hover { background: var(--red-light); color: var(--red); border-color: #f0b8b0; }

@media (max-width: 560px) {
  .position-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Meldungen (Meine Meldungen + Verwaltung) ---------- */

.meldung-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.meldung-row-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.meldung-positionen { font-weight: 600; font-size: 14px; }
.meldung-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.admin-kommentar-field { margin-top: 6px; max-width: 320px; }
.admin-kommentar-field label { font-size: 11px; }

.dringend-flag {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
}

#bearbeitet-status-filter {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

/* ---------- Status-Badge ---------- */

.status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-badge.status-offen { background: var(--gold-light); color: var(--gold); }
.status-badge.status-angenommen { background: var(--green-light); color: var(--green); }
.status-badge.status-abgelehnt { background: var(--red-light); color: var(--red); }
.status-badge.status-bestellt { background: var(--blue-light); color: var(--blue); }
/* Endzustand deutlich abgesetzt: verteilt = abgeschlossen, danach passiert nichts mehr. */
.status-badge.status-verteilt { background: var(--green); color: var(--white); }

/* ---------- Druckansicht (PDF-Export via window.print) ---------- */

#print-area { display: none; }
body.printing-report > *:not(#print-area) { display: none !important; }
body.printing-report #print-area { display: block; padding: 20px; }
#print-area h1 { font-size: 1.4rem; margin-bottom: 4px; color: #000; }
#print-area .print-meta { font-size: 0.85rem; color: #444; margin-bottom: 16px; }
.print-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.print-table th, .print-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; vertical-align: top; color: #000; }
.print-table th.num, .print-table td.num { text-align: right; white-space: nowrap; }
.print-table tr.total-row td { font-weight: 700; border-top: 2px solid #000; }
@media print {
  .print-table tr { page-break-inside: avoid; }
}

/* Rechte Nav-Gruppe (Einstellungen/Verwaltung + Info). Das margin haengt
   am Wrapper, damit die Gruppe rechts bleibt, auch wenn einzelne Buttons
   fuer Nicht-Admins ausgeblendet sind. */
/* flex-wrap, weil die Gruppe sonst als ein Stueck ueber den rechten Rand
   hinauslaeuft: bei 375px bleiben neben dem linken Reiter nur ~319px, und
   vier Reiter brauchen mehr. Ohne den Umbruch ist der letzte nicht antippbar. */
nav .nav-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: inherit; }

/* ---------- Handy: Formularfelder mindestens 16px ----------
   iOS Safari zoomt beim Antippen eines Feldes unter 16px automatisch in die
   Seite hinein — und wieder heraus zoomt es nicht. Die Feldregeln weiter oben
   laufen über Klassen und sind damit höher spezifisch als ein reiner
   Elementsatz, deshalb hier !important. Gilt nur auf schmalen Schirmen, das
   Desktop-Design bleibt unverändert. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}
/* ---------- Kleiderbörse: Angebots-Raster ---------- */
/* minmax(0, 1fr) statt 1fr: sonst sprengt ein langer Bemerkungstext die Spalte,
   weil die implizite Mindestbreite "auto" beim Grid der Inhaltsbreite folgt. */
.angebot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.angebot-karte {
  border: 1px solid #d9dee6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.angebot-bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eef1f5;
  display: block;
  cursor: zoom-in;
}
.angebot-bild-leer {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eef1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a93a0;
  font-size: 13px;
}
.angebot-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
.angebot-titel { font-weight: 600; font-size: 15px; }
.angebot-meta { color: #5b6472; font-size: 13px; margin-top: 3px; }
.angebot-bemerkung {
  font-size: 13px;
  margin-top: 8px;
  white-space: pre-line; /* Freitext bleibt Text, Zeilenumbrüche bleiben erhalten */
  overflow-wrap: anywhere;
}
.angebot-actions { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Weitere Fotos als kleine Reihe unter dem Hauptbild */
.angebot-thumbs { display: flex; gap: 5px; padding: 6px 12px 0; flex-wrap: wrap; }
.angebot-thumbs img {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 4px; border: 1px solid #d9dee6; cursor: zoom-in;
}

/* Statuspille auf der Karte */
.status-pille {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; vertical-align: middle;
}
.status-wartet  { background: #fdf0d5; color: #8a5b00; }
.status-frei    { background: #e3f5e6; color: #1d6b2c; }
.status-vergeben{ background: #eceff3; color: #5b6472; }
.status-alt     { background: #fbe4e4; color: #9c2b2b; }

/* ---------- Foto-Auswahl im Formular ---------- */
.foto-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.foto-slot {
  width: 96px; height: 96px; border: 2px dashed #c2cad5; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #8a93a0; font-size: 26px; cursor: pointer; position: relative;
  background: #f7f9fc; overflow: hidden;
}
.foto-slot img { width: 100%; height: 100%; object-fit: cover; }
.foto-slot .foto-weg {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 50%;
  width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 14px;
}

/* ---------- Vollbild-Ansicht eines Fotos ---------- */
.foto-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px; cursor: zoom-out;
}
.foto-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Filterleiste ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.filter-row .form-field { margin: 0; min-width: 150px; }

/* ---------- Listen-Pflege (Einstellungen) ---------- */
.listen-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.listen-chip {
  background: #eef1f5; border-radius: 999px; padding: 4px 10px;
  font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.listen-chip button {
  border: 0; background: none; color: #9c2b2b; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
}

/* Der geheime Eltern-Link soll auch auf schmalen Bildschirmen umbrechen
   statt die Karte seitlich aus dem Bild zu schieben. */
.link-box {
  background: #f7f9fc; border: 1px solid #d9dee6; border-radius: 6px;
  padding: 10px; font-family: monospace; font-size: 13px;
  overflow-wrap: anywhere; margin-top: 8px;
}

/* Karte „Funktionen“ im Info-Reiter. Die Schriftgroesse haengt sonst an
   .changelog-entry — diese Klasse hat die Funktionen-Karte nicht. */
#funktionen-list { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }