:root {
  --bg: #14100d;
  --bg-card: #1f1915;
  --bg-elevated: #2a221c;
  --text: #f3ece4;
  --muted: #a89c8f;
  --accent: #f59e0b;
  --accent-dark: #b45309;
  --danger: #ef4444;
  --ok: #22c55e;
  --maybe: #eab308;
  --border: #3a3028;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; margin: 1.2rem 0 0.8rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 0.8rem 1.4rem;
  background: var(--bg-card);
  border-bottom: 2px solid var(--accent-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { margin-right: auto; font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: 0.03em; display: flex; align-items: center; gap: 0.4rem; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); }
.brand-logo { height: 2.2rem; display: block; }
.hero-logo { max-width: min(480px, 80vw); max-height: 180px; }
/* Die Navigation ist überall eingeklappt — bei 17 Einträgen ist eine
   aufgeräumte Kopfzeile auch am Rechner angenehmer als zwei volle Reihen. */
/* Ein Klappmenü für alle Bildschirmgrößen — gleiche Bedienung überall. */
.site-header nav {
  display: none; flex-direction: column; gap: 0.1rem;
  position: absolute; top: calc(100% + 2px); right: 0.9rem;
  min-width: 14rem; max-width: calc(100vw - 1.8rem);
  max-height: 80vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.4rem; z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.nav-toggle:checked ~ nav { display: flex; }
.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 1.2rem; cursor: pointer; user-select: none;
}
.nav-burger:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle:checked ~ .nav-burger { border-color: var(--accent); color: var(--accent); }
.site-header nav a { padding: 0.65rem 0.8rem; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.site-header nav a:hover { color: var(--text); text-decoration: none; background: var(--bg-elevated); }
.site-header nav a.active { color: var(--accent); background: var(--bg-elevated); }
.header-user { display: flex; gap: 0.4rem; align-items: center; }
/* Login, Logout und der Wechsel zwischen Website und Bandbereich stehen im
   Klappmenü — oben bleibt nur die Sprachwahl neben dem Menüknopf. */
.nav-user { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--border); }
.nav-user form { margin: 0; }
.nav-link-button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0.65rem 0.8rem; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 1rem; font-family: inherit; }
.nav-link-button:hover { background: var(--bg-elevated); color: var(--text); }
.flag { width: 21px; height: 14px; border-radius: 2px; display: inline-block; vertical-align: -2px; }
.lang-dd { position: relative; margin-right: 0.5rem; }
.lang-dd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; color: var(--muted); }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd[open] summary { border-color: var(--accent); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem; display: flex; flex-direction: column; min-width: 10rem; z-index: 20; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.lang-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 6px; color: var(--text); font-size: 0.9rem; }
.lang-menu a:hover { background: var(--bg-elevated); text-decoration: none; }
.lang-menu a.active { color: var(--accent); }

/* ---------- Layout ---------- */
.container { max-width: 860px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.container.wide { max-width: 1080px; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.1rem;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.prewrap { white-space: pre-wrap; }
.inline { display: inline; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
  background: radial-gradient(ellipse at top, rgba(245, 158, 11, 0.15), transparent 65%);
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
.hero .tagline { color: var(--accent); font-size: 1.2rem; margin-top: 0.4rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1c1917; font-weight: 600; }
.btn-primary:hover { background: #fbbf24; }
.btn-ghost { background: transparent; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
.btn-tiny { padding: 0.15rem 0.45rem; font-size: 0.8rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; margin-top: 0.5rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span2 { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--text); }
input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-dark); border-color: var(--accent); }
/* Datumsfeld und Kalenderknopf nebeneinander (#343). Das Feld nimmt den Platz,
   der Knopf nur so viel, wie er braucht; min-width:0 verhindert, dass das
   Eingabefeld die Zeile in schmalen Spalten aufspreizt. */
.date-row { display: flex; gap: 0.35rem; align-items: stretch; }
.date-row input { flex: 1 1 auto; min-width: 0; }
.date-row .date-btn { flex: 0 0 auto; padding: 0.5rem 0.6rem; line-height: 1; }
.stack { display: flex; flex-direction: column; gap: 0.8rem; }
.row-buttons { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.login-box { max-width: 400px; margin: 3rem auto; }
.error { background: rgba(239, 68, 68, 0.15); border: 1px solid var(--danger); border-radius: 8px; padding: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
/* Wo etwas ansteht (#384). Eine Zahl und kein Punkt: „3“ sagt, ob es sich
   lohnt, jetzt hinzugehen — ein Punkt sagt nur, dass irgendwas ist. */
.nav-count {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 99px;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-group > summary .nav-count { margin-right: 0.4rem; }

.flash { background: rgba(245, 158, 11, 0.15); border-bottom: 1px solid var(--accent-dark); padding: 0.5rem 1.4rem; }

/* ---------- Events ---------- */
.event-list { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.event-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }
.event-list li:last-child { border-bottom: 0; }
.event-date { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* Monatsmarke in der Terminliste (#233): eine Landmarke, kein Titel — sie soll
   den Blick führen und nicht mit den Terminen um Aufmerksamkeit streiten. */
.event-month {
  margin: 1.6rem 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}
.event-month:first-of-type { margin-top: 0.6rem; }

/* Die Begrüßungszeile unter „Hallo <Name>" (#266). Die Flagge behält ihr
   Seitenverhältnis von 3:2 und bekommt einen Rahmen, damit sie auf hellem wie
   dunklem Grund eine Kante hat. */
.willkommen { display: flex; align-items: center; gap: 0.5rem; margin: -0.4rem 0 1.2rem; }
.willkommen .bild { height: 1.6rem; width: auto; max-width: 5rem; flex: none; object-fit: contain; }
/* Nur die mitgelieferte Flagge bekommt Kante und Radius: Ein hochgeladenes
   Logo steht meist frei und sähe im Rähmchen falsch aus (#267). */
.willkommen .flagge { width: 2.4rem; border-radius: 3px; border: 1px solid var(--border); }

/* Der Terminkopf steht in der Karte der Terminliste und in der Zeile der
   Übersicht — dieselbe Anordnung, damit beides gleich aussieht (#264). */
.event-head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }
/* In der Übersichtszeile bekommt der Kopf eine eigene Zeile; Zeiten und
   Rückmelde-Knöpfe teilen sich die darunter. */
.event-list li .event-head { flex: 1 1 100%; }
.event-list li p.small { margin: 0; }
/* Die Uebersicht faltet ihre Termine (#320): Der Kopf ist dort die
   Zusammenfassung. Ein Flex-Kasten verliert das Dreieck des Browsers,
   deshalb ein eigenes Zeichen am rechten Rand -- ohne eins sieht niemand,
   dass da etwas aufgeht. */
/* Neu und geaendert (#321): faellt auf, ohne zu schreien -- dieselbe Farbe,
   mit der die Anwendung sonst auf sich aufmerksam macht. */
.badge.neu { background: var(--accent); color: #1c1917; font-weight: 600; }

/* Die Verweise einer Terminkarte stehen unter der Zusammenfassung (#325):
   als eigene Zeile, im selben Abstand wie der Kopf darüber. */
.event-links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0.35rem 0 0; }

summary.event-head { cursor: pointer; list-style: none; }
summary.event-head::-webkit-details-marker { display: none; }
summary.event-head::after { content: '▾'; color: var(--muted); margin-left: auto; }
details[open] > summary.event-head::after { content: '▴'; }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.gig { border-color: var(--accent); color: var(--accent); }
.badge.probe { border-color: #60a5fa; color: #60a5fa; }
.badge.public { border-color: var(--ok); color: var(--ok); }
/* Navi und Setliste sind Ziele für einen Daumen: Ein Emoji in Kleinschrift ist
   auf dem Telefon kaum zu treffen, deshalb sind Badge-Links höher. */
a.badge.link { cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.25rem; padding: 0.1rem 0.7rem; }
.badge.status-aktiv { border-color: var(--ok); color: var(--ok); }
.badge.status-in_arbeit { border-color: var(--maybe); color: var(--maybe); }
.badge.status-vorschlag { border-color: #60a5fa; color: #60a5fa; }
.badge.status-abgewiesen { border-color: var(--danger); color: var(--danger); }
.badge.ev-bestaetigt { border-color: var(--ok); color: var(--ok); }
.badge.ev-angefragt { border-color: var(--maybe); color: var(--maybe); }
.badge.ev-reserviert { border-color: #60a5fa; color: #60a5fa; }
.badge.ev-blockiert { border-color: #a78bfa; color: #a78bfa; }
.badge.ev-abgesagt { border-color: var(--danger); color: var(--danger); }

.warn {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid var(--maybe);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
}
.pubfields { border: 1px dashed var(--border); border-radius: 8px; padding: 0.7rem 1rem; display: grid; gap: 0.6rem; }
.pubfields legend { color: var(--muted); font-size: 0.85rem; padding: 0 0.4rem; }

/* ---------- Bebilderte Hilfe (#305) ---------- */
/* Die Bilder sind gezeichnet und nehmen die Farben der Oberfläche an. Ein
   Bildschirmfoto wäre in einer Sprache richtig und nach der nächsten Änderung
   falsch; eine Zeichnung zeigt die Form und bleibt stehen. */
/* Ein Bildschirmfoto aus der Demo: gerahmt, damit es sich vom Text abhebt, und
   breiter als eine Zeichnung, weil darauf Beschriftungen lesbar bleiben müssen. */
.helpshot {
  display: block; width: 100%; max-width: 34rem; height: auto;
  margin: 0.2rem 0 1rem; border: 1px solid var(--border); border-radius: 10px;
}
.helpfig { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0.2rem 0 1rem; }
.helpfig .hf-card { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1.5; }
.helpfig .hf-card-fill { fill: var(--bg-card); }
.helpfig .hf-card-fill-stroke { fill: none; stroke: var(--bg-card); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.helpfig .hf-stroke { stroke: var(--border); stroke-width: 1.5; }
/* Ein bedrucktes Blatt ist weiß, auch im dunklen Programm — sonst sieht der
   Ausdruck auf dem Bild anders aus als auf dem Papier. */
.helpfig .hf-sheet { fill: #f6f4f1; stroke: var(--border); stroke-width: 1.5; }
.helpfig .hf-ink { fill: #3a3028; }
.helpfig .hf-line { fill: var(--text); }
.helpfig .hf-line-fill { fill: var(--muted); }
.helpfig .hf-line-soft { fill: var(--muted); opacity: 0.5; }
.helpfig .hf-line-soft-stroke { fill: none; stroke: var(--muted); stroke-width: 2; opacity: 0.5; }
.helpfig .hf-accent, .helpfig .hf-accent-fill { fill: var(--accent); }
.helpfig .hf-accent-soft { fill: var(--accent); opacity: 0.4; }
.helpfig .hf-accent-stroke { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.helpfig .hf-ok { fill: var(--ok); }
.helpfig .hf-ok-stroke { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.helpfig .hf-no { fill: var(--danger); }
.helpfig .hf-no-stroke { fill: none; stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.helpfig .hf-maybe { fill: var(--maybe); }
.helpfig .hf-box { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.helpfig .hf-edge { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.helpfig .hf-edge-fill { fill: var(--muted); }

/* „Ich möchte …": der Einstieg für alle, die den Namen des Bereichs nicht
   kennen. Große Ziele, weil das hier oft auf dem Telefon gelesen wird. */
.help-tasks { list-style: none; margin: 0.4rem 0 1.4rem; padding: 0; display: grid; gap: 0.4rem; }
.help-tasks a {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.5rem 0.8rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none;
}
.help-tasks a:hover, .help-tasks a:focus-visible { border-color: var(--accent); }
.help-tasks .tick { font-size: 1.2rem; flex: 0 0 auto; }
/* Der erste Satz eines Bereichs beantwortet „wofür ist das?" und darf deshalb
   größer sein als der Rest. */
.help-lead { font-size: 1.05rem; color: var(--text); margin: 0 0 0.6rem; }
@media (min-width: 40rem) { .help-tasks { grid-template-columns: 1fr 1fr; } }

/* Angebote (#302): Beträge stehen rechts, damit man sie übereinander liest,
   und die Endsumme hebt sich ab — das ist die Zeile, die gesucht wird. */
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table tr.sum td { font-weight: 700; border-top: 2px solid var(--border); }
/* Bezeichnung und Betrag eines frei eingetragenen Postens nebeneinander. */
.row-fields { display: flex; gap: 0.4rem; margin: 0.3rem 0; }
.row-fields input { flex: 1 1 auto; min-width: 0; }
.row-fields input:last-child { flex: 0 0 8rem; }
.comment-form.grow { flex: 1; }

.attendance { display: flex; gap: 0.35rem; margin: 0.5rem 0; flex-wrap: wrap; }
.chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 99px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip-yes { border-color: var(--ok); color: var(--ok); background: rgba(34, 197, 94, 0.12); }
.chip-maybe { border-color: var(--maybe); color: var(--maybe); background: rgba(234, 179, 8, 0.12); }
.chip-no { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.12); }

/* Nach der Antwort nehmen die Knoepfe nichts mehr an (#377). Der Browser graut
   ausgeschaltete Knoepfe von sich aus ein - dann waere ausgerechnet die eben
   gegebene Antwort die blasseste Stelle der Zeile. Also zurueckgenommen wird
   hier nur, was NICHT gewaehlt wurde. */
.chip:disabled { cursor: default; opacity: 1; }
.chip-stumm { opacity: 0.4; }

.attendance-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; margin: 0.3rem 0; }
.att { padding: 0.05rem 0.5rem; border-radius: 99px; background: var(--bg-elevated); }
.att-yes { color: var(--ok); }
.att-maybe { color: var(--maybe); }
.att-no { color: var(--danger); }
/* Noch nicht abgehakt: dieselbe Form wie eine Zusage, nur ohne Farbe —
   die Aussage ist ja gerade, dass hier noch nichts passiert ist. */
.att-open { color: var(--muted); }

.subsection { margin-top: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; }
.subsection summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.collapsible summary { cursor: pointer; font-weight: 600; }
.inline-details { display: inline-block; }
.inline-details summary { list-style: none; display: inline-block; }

.comment-list { list-style: none; padding: 0; }
.comment-list li { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.comment-list p { margin: 0.15rem 0; }
/* Wo der ungelesene Teil eines Themas anfaengt (#318): eine Trennlinie mit
   Beschriftung, damit der Sprung aus der Uebersicht sichtbar landet. */
.comment-list .new-mark { border-bottom: 0; padding: 0.6rem 0 0.2rem; text-align: center; }
.comment-list .new-mark .badge { background: var(--accent); color: #1c1917; font-weight: 600; }
.comment-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.comment-form input, .comment-form select { flex: 1; }

/* ---------- Tables & Listen ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--border); }
.table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

.task-list { list-style: none; padding: 0; margin: 0; }
.task-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.task-list li:last-child { border-bottom: 0; }
/* Die Zeile, auf die eine Mitteilung gezeigt hat (#421). Sie leuchtet kurz
   auf und hört wieder auf: Wer aus einer Mitteilung kommt, soll sehen, welche
   der neun Zeilen gemeint war — und zwei Minuten später nicht mehr daran
   erinnert werden. Der Rahmen trägt die Aussage, nicht die Farbe allein. */
.task-list li.angesprungen {
  animation: angesprungen 3s ease-out 1;
  border-left: 3px solid var(--accent);
  padding-left: 0.5rem;
}
@keyframes angesprungen {
  from { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  to   { background: transparent; }
}
/* Wer Bewegung abbestellt hat, bekommt den Rahmen und kein Blinken. */
@media (prefers-reduced-motion: reduce) {
  .task-list li.angesprungen { animation: none; }
}
.task-list li.done strong { text-decoration: line-through; color: var(--muted); }
/* Abhaken passiert oft im Stehen, mit dem Daumen: die Flaeche muss zu
   treffen sein, auch wenn das Zeichen darin klein bleibt. */
.check { background: none; border: none; color: var(--accent); font-size: 1.1rem; cursor: pointer;
         padding: 0; min-width: 2.75rem; min-height: 2.75rem; display: inline-flex;
         align-items: center; justify-content: center; }

.setlist-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.setlist-name { font-size: 1.1rem; font-weight: 600; }
.setlist-songs { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: none; }
.setlist-songs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.setlist-songs .pos { color: var(--accent); font-weight: 700; min-width: 1.6rem; text-align: right; }
.setlist-songs .row-buttons { margin-left: auto; }

/* ---------- Fotos & Medien ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.photo-grid.large { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.photo-grid figure { margin: 0; }
/* Eingepasst, nicht beschnitten (#209): Die längste Seite bestimmt die Größe,
   das ganze Bild bleibt sichtbar. Hochformate stehen dann mit Rand im 4:3-Feld —
   der Rand bekommt den Seitengrund, damit die Kachel eine Kachel bleibt. */
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg);
  border-radius: 8px; display: block; cursor: zoom-in; }
.lightbox-overlay { position: fixed; inset: 0; background: rgba(10, 8, 6, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; z-index: 100; cursor: zoom-out; padding: 1.5rem; }
.lightbox-overlay img { max-width: 95vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.lightbox-caption { color: var(--muted); font-size: 0.95rem; }
/* Blättern in der Großansicht: die Knöpfe liegen über dem Bild an den Rändern,
   nicht darunter — mit dem Daumen erreicht man den Rand, nicht die Mitte. */
.lightbox-nav, .lightbox-show { position: fixed; background: rgba(0,0,0,0.5); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; cursor: pointer;
  line-height: 1; z-index: 101; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2rem; }
.lightbox-nav.prev { left: 0.8rem; }
.lightbox-nav.next { right: 0.8rem; }
.lightbox-show { bottom: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
.lightbox-nav:hover, .lightbox-show:hover { background: rgba(0,0,0,0.8); }

/* Mehrere Fotos auf einen Termin: die Leiste über dem Raster. */
.photo-mass { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* Das Häkchen sitzt an der Kachel und bleibt sichtbar, ohne sie zu verdecken. */

/* Doppelte nebeneinander (#199): Die Entscheidung, welches bleibt, braucht den
   direkten Vergleich — untereinander sähe man immer nur eines. */
.dup-group { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; }
.dup-photo { width: 180px; margin: 0; }
.dup-photo img { width: 100%; height: 120px; object-fit: contain; background: var(--bg); border-radius: 6px; }

/* Der Medien-Baum (#216): Jahr, Termin, Fotograf als aufklappbare Ordner.
   Die Einrückung macht die Ebene sichtbar; die Zusammenfassung bleibt eine
   Zeile, damit zwanzig geschlossene Ordner auf einen Blick passen. */
.photo-year > summary { cursor: pointer; list-style: none; padding: 0.2rem 0; font-size: 1.05rem; }
.photo-year > summary::-webkit-details-marker { display: none; }
.photo-year > summary::before { content: '▸ '; color: var(--muted); }
.photo-year[open] > summary::before { content: '▾ '; }
.photo-event-folder, .photo-src-folder { margin: 0.35rem 0 0.35rem 1rem; }
.photo-event-folder > summary, .photo-src-folder > summary {
  cursor: pointer; list-style: none; padding: 0.3rem 0.4rem; border-radius: 8px;
  background: var(--bg-elevated); display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.photo-event-folder > summary::-webkit-details-marker,
.photo-src-folder > summary::-webkit-details-marker { display: none; }
.photo-event-folder > summary:hover, .photo-src-folder > summary:hover { outline: 1px solid var(--border); }
.photo-src-folder { margin-left: 1.6rem; }

/* Schlagwörter und Personen als Chips (#201, #203): klein, klickbar, mit einem
   ×, das nur das eine Bild betrifft. Die Eingaben daneben bleiben schmal —
   sie sind Werkzeug, nicht Inhalt. */
.photo-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin: 0.25rem 0; }
.chip { display: inline-flex; align-items: center; gap: 0.2rem; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.78rem; }
.chip a { color: var(--text); }
.chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0.1rem; font-size: 0.85rem; }
.chip-x:hover { color: var(--danger); }
.chip-add input, .chip-add select { padding: 0.15rem 0.4rem; font-size: 0.78rem; max-width: 7.5rem; }
/* Ein archiviertes Bild im Suchergebnis sagt, warum es in der Galerie fehlt. */
.photo-archived { background: var(--bg-elevated); color: var(--muted); }

/* Die Herkunft steht klein und umbrechend unter dem Bild: Pfade sind lang, und
   ein langer Pfad darf die Kachel nicht in die Breite ziehen. */
.photo-source { display: block; font-size: 0.75rem; color: var(--muted);
  overflow-wrap: anywhere; opacity: 0.8; }

/* Häkchen und Neu-Markierung liegen über dem Bild in seinen Ecken: Sie sollen
   die Kachel nicht höher machen, und in der Ecke verdecken sie am wenigsten. */
.photo-admin { position: relative; }
.photo-tick { position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2; cursor: pointer;
  background: rgba(0,0,0,0.55); border-radius: 6px; padding: 0.15rem 0.25rem; line-height: 1; }
.photo-tick input { margin: 0; width: 1.1rem; height: 1.1rem; cursor: pointer; }
.photo-new { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2;
  background: var(--accent); color: #1c1917; font-size: 0.7rem; font-weight: 700;
  padding: 0.1rem 0.4rem; border-radius: 999px; letter-spacing: 0.04em; }
.photo-grid figcaption { font-size: 0.85rem; color: var(--muted); padding-top: 0.25rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.embed-16x9 { position: relative; aspect-ratio: 16 / 9; }
.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.embed-spotify { width: 100%; height: 152px; border: 0; border-radius: 8px; }
.embed-consent { background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; }
.embed-consent .embed-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; padding: 1rem; }
.embed-consent-spotify { position: relative; height: 152px; }
.embed-consent-spotify iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* ---------- Avatare ---------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 2px solid var(--border); vertical-align: middle; }
.avatar-big { width: 84px; height: 84px; font-size: 2rem; }
.avatar-placeholder { color: var(--accent); font-weight: 700; font-size: 1.2rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.2rem 1.4rem 2rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.footer-social { display: flex; gap: 0.9rem; align-items: center; }
.social-link { color: var(--muted); display: inline-flex; }
.social-link:hover { color: var(--accent); }
.social-link svg { width: 24px; height: 24px; }

/* Song-Bewertung */
.stars { display: inline-flex; gap: 1px; }
.star { background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1;
        color: rgba(255,255,255,0.22); padding: 0 1px; }
.star:hover { color: var(--accent); }
.star-on { color: var(--accent); }
.star-clear { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin-left: 3px; }
td.rating { white-space: nowrap; }

/* Setlist per Ziehen umsortieren */
ol.sortable li { cursor: grab; }
ol.sortable li.dragging { opacity: 0.45; background: rgba(255,255,255,0.05); }
/* Der Griff ist die einzige Fläche, die zieht — deshalb nimmt ihm touch-action
   das Scrollen ab, und nur ihm: Der Rest der Zeile muss mit dem Finger weiter
   scrollen können (#237). Die Polsterung ist Fingergröße, ohne die Zeile
   auseinanderzuziehen. */
.drag-handle {
  color: rgba(255,255,255,0.3);
  margin: -0.5rem 0.2rem -0.5rem -0.4rem;
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; color: rgba(255,255,255,0.7); }
.sort-note { font-size: 0.82rem; color: var(--accent); opacity: 0; transition: opacity 0.3s; height: 1.1em; }
.sort-note-error { color: #e05656; }

/* ---------- Handy und Tablet ---------- */

@media (max-width: 760px) {
  /* Kopfbereich kompakt: das Menü klappt hinter dem Burger auf, damit
     die 17 Einträge nicht den halben Bildschirm belegen. */
  .site-header { padding: 0.6rem 0.9rem; gap: 0.5rem 0.8rem; }
  .brand { font-size: 1.05rem; }
  .brand-logo { height: 1.8rem; }
  .nav-toggle:checked ~ .nav-burger { border-color: var(--accent); color: var(--accent); }
  .nav-toggle:checked ~ nav { display: flex; }
  .header-user { margin-left: 0; }
  /* Auf schmalen Schirmen sitzt der Sprachwähler links — das Menü muss dann
     nach rechts aufklappen, sonst steht es außerhalb des Bildschirms. */
  .lang-menu { left: 0; right: auto; }

  /* Inhalt: mehr Platz, kleinere Überschriften */
  .container { padding: 0.6rem 0.8rem 2.5rem; }
  h1 { font-size: 1.5rem; margin: 0.8rem 0 0.6rem; }
  h2 { font-size: 1.1rem; }
  .card { padding: 0.9rem; }

  /* Breite Tabellen scrollen innerhalb ihrer Karte statt die Seite zu sprengen */
  .card { overflow-x: auto; }
  .table { min-width: 34rem; }
  .table th, .table td { padding: 0.45rem 0.4rem; }

  /* Bedienelemente fingerfreundlich */
  .btn { padding: 0.55rem 0.9rem; }
  .btn-tiny { padding: 0.4rem 0.6rem; }
  .chip { padding: 0.5rem 0.8rem; }
  .star { font-size: 1.35rem; padding: 0 3px; }
  input, select, textarea { font-size: 16px; }   /* verhindert das Zoomen in iOS */

  /* Kopfzeilen und Knopfreihen umbrechen lassen */
  .page-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .event-head { gap: 0.35rem 0.6rem; }
  /* Setliste am Telefon: Griff und Pfeile sind Ziele für einen Daumen. Das
     Löschkreuz daneben wächst absichtlich nicht mit — es soll nicht so leicht
     zu treffen sein wie die beiden, die man dutzendfach tippt (#265). */
  .drag-handle { padding: 0.6rem 0.65rem; margin: -0.6rem 0.2rem -0.6rem -0.5rem; }
  ol.sortable button[name="dir"] { min-width: 2.75rem; min-height: 2.75rem; }
  .row-buttons { gap: 0.35rem; }
  .setlist-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .site-footer { flex-direction: column; gap: 0.8rem; text-align: center; }
}

@media (max-width: 420px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .table { min-width: 28rem; }
}

/* Bildvorschau bei Dateianhängen */
.file-thumb { max-height: 3.2rem; max-width: 5rem; border-radius: 6px; vertical-align: middle;
              margin-right: 0.5rem; border: 1px solid var(--border); }

/* Bildauswahl beim Gerät. Waagerecht scrollbar, damit die Auswahl die Seite
   nicht auseinanderzieht, wenn im Inventar viele Fotos liegen. */
.photo-pick-strip { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.3rem 0 0.6rem; }
.photo-pick-item { flex: 0 0 auto; width: 7.5rem; text-align: center; cursor: pointer; }
.photo-pick-item img { width: 100%; height: 5rem; object-fit: contain; background: #fff;
                       border: 2px solid var(--border); border-radius: 6px; display: block; }
.photo-pick-item input { position: absolute; opacity: 0; }
.photo-pick-item input:checked + img { border-color: var(--accent); }
.photo-pick-item span { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; }

/* Anhang im Rahmen der App. Höhe am Fenster statt am Inhalt, weil eine PDF
   sonst entweder auf eine Zeile schrumpft oder endlos wächst. */
.file-view { padding: 0; overflow: hidden; }
.file-view object { width: 100%; height: min(75vh, 900px); border: 0; display: block; }
.file-view img { width: 100%; height: auto; display: block; background: #fff; }
.file-view audio { width: 100%; display: block; margin: 1rem 0; }
.file-view p { padding: 1rem; margin: 0; }

/* Vorschau in der Geräteliste. Weißer Grund, weil Produktfotos freigestellt
   sind — auf dunklem Grund verschwindet sonst das halbe Gerät. Feste Höhe,
   damit die Zeilen nicht bei jedem Bild anders hoch werden. */
.eq-thumb {
  height: 2.6rem; width: 2.6rem; object-fit: contain; background: #fff;
  border-radius: 6px; border: 1px solid var(--border); padding: 2px;
  flex: 0 0 auto; align-self: center;
}
.eq-thumb-small { height: 1.8rem; width: 1.8rem; vertical-align: middle; margin-right: 0.3rem; }

/* Ausgeblendete Formularfelder sollen auch im Raster verschwinden */
[hidden] { display: none !important; }

/* Bestandteile: Name sieht aus wie ein Link, öffnet aber einen Dialog */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--accent, #e2a13a); }

.eq-dialog {
  width: min(680px, 94vw);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #1c1714;
  color: inherit;
  padding: 1.1rem 1.2rem 1.3rem;
}
.eq-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }

/* Der Absage-Hinweis (#401). Am Rechner eine Box in der Mitte wie jedes andere
   Fenster; auf dem Telefon fährt er von oben ein und sieht aus wie eine
   Mitteilung — dort ist das die Gestalt, die jeder kennt und sofort einordnet.

   Wer schnelle Bewegung nicht sehen will, bekommt ihn ruhig stehend. */
@media (max-width: 640px) {
  #absage-dialog {
    margin: 0 auto;
    top: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 14px 14px;
    border-top: 0;
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    animation: absage-rein 220ms ease-out 1;
  }
}
@keyframes absage-rein {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #absage-dialog { animation: none; }
}
.eq-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Aufklappbare Karten: immer nur eine offen. Das übernimmt das name-Attribut
   von <details>; wo der Browser das noch nicht kennt, hilft accordion.js nach.
   Der Pfeil zeigt nach rechts, wenn zu, und nach unten, wenn offen. */
.acc { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.acc > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.15rem; font-weight: 600; color: var(--text);
  padding: 0.25rem 0;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before {
  content: '›';
  display: inline-block; width: 0.8rem;
  font-size: 1.3rem; line-height: 1; color: var(--accent);
  transition: transform 0.15s ease;
}
.acc[open] > summary::before { transform: rotate(90deg); }
.acc[open] > summary { margin-bottom: 0.7rem; }
.acc > summary:hover { color: var(--accent); }

/* Im Inventar trägt die Kopfzeile mehr als nur den Namen: Besitzer, Lagerort
   und Wert sollen lesbar bleiben, ohne dass alles fett wird. */
.acc > summary.eq-summary {
  flex-wrap: wrap; gap: 0.3rem 0.8rem;
  font-size: 1rem; font-weight: 400; align-items: baseline;
}
.acc > summary.eq-summary::before { align-self: center; }
.acc > summary.eq-summary strong { font-size: 1.1rem; font-weight: 600; }

/* Bühnenplan: die Zeichnung passt sich der Breite an, im Ausdruck wird sie
   schwarzweiß. Die Zahlenfelder darunter bleiben schmal. */
.stage-plot { width: 100%; height: auto; max-height: 70vh; color: var(--text); }
.stage-plot .stage-item { cursor: default; }
/* touch-action: none — sonst scrollt das Handy die Seite, statt das Symbol
   zu verschieben. */
.stage-plot[data-stageedit] .stage-item { cursor: grab; touch-action: none; }
.stage-plot[data-stageedit] .stage-item:active { cursor: grabbing; }
.stage-plot[data-stageedit] .stage-item:hover circle { stroke: var(--accent); stroke-width: 3; }
.stage-print { color: #222; }
.stage-list li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.stage-list input, .stage-list select { margin: 0; }
/* Beschriftung und Zusatz teilen sich den Platz, die Zahlen bleiben schmal —
   so passt eine Zeile auch auf ein Tablet, ohne dass der Knopf umbricht. */
.stage-list input:not(.stage-num) { flex: 1 1 7rem; min-width: 5rem; }
.stage-list select { flex: 0 1 9rem; }
.stage-num { flex: 0 0 4.2rem; width: 4.2rem; }

/* Ersatzleute am Termin: Name, Erfahrung und Knopf bleiben zusammen, auch
   wenn die Zeile umbricht. */
.sub-option {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0.15rem 0.6rem 0.15rem 0; white-space: nowrap;
}
.sub-option form { margin: 0; }

/* Systemprüfung: das Zeichen vorne trägt die Aussage, die Farbe verstärkt sie
   nur — wer Farben schlecht unterscheidet, liest trotzdem ✔, ! oder ✘. */
.sys-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.sys-mark { flex: 0 0 1.2rem; font-weight: 700; }
.sys-ok .sys-mark { color: #7fb069; }
.sys-warn .sys-mark { color: var(--accent); }
.sys-fail .sys-mark { color: #d9534f; }
.sys-list .small { flex-basis: 100%; }

/* Rechtevergabe: je Bereich eine Zeile mit zwei Häkchen. Auf schmalen
   Schirmen rutschen die Häkchen unter den Namen, statt zu quetschen. */
.perm-list { list-style: none; padding: 0; margin: 0.4rem 0; }
.perm-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border);
}
.perm-list .perm-name { flex: 1 1 10rem; font-weight: 500; }
.perm-list .checkbox { display: flex; align-items: center; gap: 0.35rem; margin: 0; white-space: nowrap; }

/* Bestandteile können tief verschachtelt sein — Rack, Empfänger, Mikrofon,
   Kapsel. Statt immer weiter einzurücken (auf dem Handy wäre nach drei Ebenen
   Schluss) markiert eine Linie am Rand, dass etwas dazugehört. */
.eq-parts { margin: 0.2rem 0 0; }
.eq-parts .eq-parts {
  margin-left: 0.7rem; padding-left: 0.7rem;
  border-left: 2px solid var(--border);
}

/* Packliste im Terminformular: eine schmale Spalte je Gerät, Bestandteile
   eingerückt darunter. Bei viel Inventar scrollt die Liste, statt das
   Formular auseinanderzuziehen. */
.gear-picker {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.8rem 0.8rem; margin: 0.2rem 0 0;
  max-height: 18rem; overflow-y: auto;
}
.gear-picker legend { padding: 0 0.35rem; font-size: 0.9rem; color: var(--muted); }
.gear-picker .checkbox { display: flex; align-items: center; gap: 0.45rem; margin: 0.15rem 0; }
.gear-cat { display: block; margin: 0.6rem 0 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.gear-cat:first-of-type { margin-top: 0; }
.gear-part { margin-left: 1.4rem !important; font-size: 0.92rem; opacity: 0.85; }

/* Klappmenü: die Einträge stehen in thematischen Gruppen, damit die Liste
   nicht als 17 gleichwertige Zeilen erschlägt. Ohne JavaScript bedienbar —
   <details> kann das von Haus aus. */
.nav-group summary {
  list-style: none; cursor: pointer;
  padding: 0.5rem 0.8rem; border-radius: 8px;
  color: var(--muted); font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { color: var(--text); background: var(--bg-elevated); }
.nav-group summary::after { content: '▸'; font-size: 0.75rem; transition: transform 0.15s; }
.nav-group[open] summary::after { transform: rotate(90deg); }
.nav-group.has-active summary { color: var(--accent); }
/* Die Links stehen im <details> und sind damit keine Flex-Kinder mehr */
.site-header nav .nav-group a { display: block; padding-left: 1.5rem; }

/* Zeichen vor den Menüpunkten. Feste Breite, weil Emoji unterschiedlich breit
   sind — ohne sie fängt jede Beschriftung an einer anderen Stelle an, und eine
   Spalte aus siebzehn Zeilen sieht ausgefranst aus. Die Sperrung und die
   Großschreibung der Gruppenüberschrift gelten hier nicht: Beides wirkt auf
   Emoji nicht, schiebt sie aber unnötig weit vom Wort weg. */
.nav-icon {
  display: inline-block; width: 1.4em; margin-right: 0.4em;
  text-align: center; letter-spacing: normal; text-transform: none;
  font-style: normal; flex: 0 0 auto;
}

/* Der nachgeladene Bearbeiten-Block: bis er da ist, steht dort nur der Knopf,
   der ohne JavaScript auf dieselbe Seite führt. */
.eq-detail { margin-top: 0.6rem; }

/* Liedtext: zum Lesen aus Armlänge, nicht zum Überfliegen. Die Abschnitte
   heben sich ab, damit ein Blick die Stelle wiederfindet. */
.lyrics { font-size: 1.15rem; line-height: 1.5; max-width: 34rem; }
.lyrics-line { margin: 0; }
.lyrics-gap { height: 0.7rem; }
.lyrics-part { margin: 1.1rem 0 0.3rem; font-size: 0.78rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.lyrics-part:first-child { margin-top: 0; }

/* Abschnitts-Farben: ein Blick findet über die Farbe die Stelle wieder. Gelten
   auf der Leseseite wie auf der Bühne, damit beide dieselbe Sprache sprechen. */
.part-verse  { color: #6ea8fe; }
.part-chorus { color: #ff8fa3; }
.part-bridge { color: #c58cff; }
.part-solo   { color: #ffd166; }
.part-intro  { color: #7ee0c0; }
.part-outro  { color: #9aa0aa; }

/* Bühne: der Liedtext im Vollbild, auf Armlänge lesbar, selbstlaufend. Bewusst
   immer dunkel — eine Bühne ist dunkel, und der Kontrast muss stimmen, egal
   welches Design sonst gewählt ist. */
.buehne-body { margin: 0; background: #000; }
.buehne { position: fixed; inset: 0; display: flex; flex-direction: column;
          background: #000; color: #f4f4f4; }
.buehne-bar { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #b9b9b9;
              /* unter Notch/Status-Bar schieben, sonst liegt die Leiste am iPhone darunter */
              padding: calc(0.5rem + env(safe-area-inset-top, 0)) 0.8rem 0.5rem; }
.buehne-title { font-weight: 700; color: #fff; }
.buehne-pos { margin-left: auto; opacity: 0.7; font-variant-numeric: tabular-nums; }
.buehne-musician { background: #1c1c1c; color: #f4f4f4; border: 1px solid #333; border-radius: 8px;
                   padding: 0.2rem 0.4rem; font-size: 0.9rem; max-width: 45vw; }
.buehne-scroll { flex: 1; overflow-y: auto; padding: 6vh 6vw 40vh;
                 -webkit-overflow-scrolling: touch; cursor: pointer; }
.buehne-line { margin: 0; font-size: clamp(1.6rem, 6vw, 3rem); line-height: 1.35; }
.buehne-gap { height: 1.4rem; margin: 0; }
.buehne-part { margin: 1.6rem 0 0.5rem; font-size: 0.95rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: 0.1em; }
.buehne-part:first-child { margin-top: 0; }
.buehne-empty { opacity: 0.6; font-size: 1.4rem; }
.buehne-controls { display: flex; align-items: center; justify-content: center; gap: 0.7rem;
                   padding: 0.6rem env(safe-area-inset-right, 0.8rem)
                   calc(0.6rem + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0.8rem); }
.buehne-btn { min-width: 3rem; min-height: 3rem; font-size: 1.3rem; background: #1c1c1c;
              color: #f4f4f4; border: 1px solid #333; border-radius: 10px; cursor: pointer;
              text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.buehne-bar .buehne-btn { min-width: 2.2rem; min-height: 2.2rem; font-size: 1rem; }
.buehne-speed { min-width: 4.5rem; text-align: center; color: #b9b9b9; font-variant-numeric: tabular-nums; }
/* Tempo-Knopf in der Leiste: zeigt die aktuelle BPM-Zahl, öffnet das Popup. */
.buehne-tempo-btn { min-width: 4.6rem; font-size: 0.95rem; padding: 0 0.4rem; }
/* Tempo-Popup: dunkler Vorhang, mittige Karte, viel Luft zwischen den Zeilen. */
.buehne-tempo { position: fixed; inset: 0; z-index: 20; display: flex;
                align-items: center; justify-content: center; background: rgba(0,0,0,0.7);
                padding: env(safe-area-inset-top,0) 1rem env(safe-area-inset-bottom,0); }
.buehne-tempo[hidden] { display: none; }
.buehne-tempo-card { display: flex; flex-direction: column; gap: 1.2rem; width: min(20rem, 90vw);
                     background: #1c1c1c; border: 1px solid #333; border-radius: 16px; padding: 1.5rem; }
.buehne-tempo-set { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.buehne-bpm { width: 5.5rem; text-align: center; font-size: 2rem; font-weight: 700; -moz-appearance: textfield;
              background: #000; color: #fff; border: 1px solid #333; border-radius: 12px; padding: 0.4rem 0.2rem; }
.buehne-bpm::-webkit-outer-spin-button, .buehne-bpm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buehne-bpm-unit { color: #b9b9b9; font-size: 0.95rem; }
.buehne-tap { justify-content: center; gap: 0.5rem; font-size: 1.1rem; width: 100%; min-height: 3rem; }
.buehne-tempo-hint { margin: 0; text-align: center; color: #9a9a9a; font-size: 0.85rem; }
.buehne-tempo-done { justify-content: center; width: 100%; min-height: 3rem; font-size: 1.05rem;
                     background: #2f2820; border-color: #4a3f30; color: #fff; }
/* Notizzettel (Akkorde): feste Zeichenbreite, Leerräume bleiben stehen — sonst
   rutschen die Akkorde von den Silben. Auf der Bühne, der Leseseite und im Feld. */
.buehne.is-mono .buehne-line { font-family: ui-monospace, Menlo, Consolas, monospace;
                               white-space: pre; font-size: clamp(1.1rem, 4vw, 2rem); }
.chords { margin: 0; padding: 0.6rem 0.8rem; overflow-x: auto; white-space: pre;
          font-family: ui-monospace, Menlo, Consolas, monospace;
          background: rgba(127, 127, 127, 0.08); border-radius: 6px; }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Abschnittsmarken zum Einklicken über einem Textfeld — die immer gleichen
   Klammern als kleine Knöpfe, statt sie jedes Mal zu tippen. */
.marker-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
/* Adress-Suche (Geocoding): Knopf + Treffer unter dem Adressfeld. */
.geo-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.geo-results { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.geo-hit { text-align: left; }
/* Karten-App-Auswahl (nur iPhone): iOS gibt die Standard-Navi-App nicht preis,
   also fragt route.js beim Antippen des 🧭, womit navigiert werden soll. */
.maps-pick { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
             justify-content: center; background: rgba(0,0,0,0.6); padding: 1rem; }
.maps-pick[hidden] { display: none; }
.maps-pick-card { display: flex; flex-direction: column; gap: 0.6rem; width: min(18rem, 90vw);
                  background: var(--bg-elevated); border: 1px solid var(--border);
                  border-radius: 14px; padding: 1.2rem; }
.maps-pick-title { margin: 0 0 0.2rem; text-align: center; font-weight: 600; color: var(--text); }
.maps-pick-btn { width: 100%; min-height: 3rem; justify-content: center; }
.maps-pick-hint { margin: 0.2rem 0 0; text-align: center; font-size: 0.8rem; color: var(--muted); }
/* Auf dem iPhone das lange Drücken (Auswahl wechseln) sauber abfangen, statt
   das System-Vorschau-Menü des Links zu zeigen. */
.navi-link { -webkit-touch-callout: none; }
/* Hinweis auf einen Stand aus dem Zwischenspeicher: auffällig, aber nicht im Weg */
.stale-banner { margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; border-radius: 6px;
                background: rgba(200, 120, 40, 0.14); font-size: 0.9rem; }

/* Wo bin ich gelandet? (#373)
   Ein Anker springt an die richtige Stelle und sagt dann nichts mehr. In einer
   Liste mit dreissig Aufgaben oder Terminen sucht man danach trotzdem, welche
   gemeint war. Die Markierung verblasst von selbst: Sie zeigt den Weg und
   hebt nicht dauerhaft etwas hervor.

   Gefaerbt wird mit --bg-elevated, der Flaeche, die dieses Blatt ohnehin fuer
   Hervorgehobenes benutzt - und nicht mit einem festen Farbwert. Aendert
   jemand das Erscheinungsbild, zieht die Markierung mit, statt als einziges
   Element in der alten Farbe stehenzubleiben. */
.task-list li:target,
details.event-card:target {
  animation: anker-zeigen 2.4s ease-out 1;
  border-radius: 6px;
}
@keyframes anker-zeigen {
  0%, 55% { background: var(--bg-elevated); }
  100% { background: transparent; }
}
/* Wer schnelle Bewegung nicht sehen will, bekommt sie ruhig stehend. */
@media (prefers-reduced-motion: reduce) {
  .task-list li:target,
  details.event-card:target { animation: none; background: var(--bg-elevated); }
}