/* MitReeder — Anwendung.
 *
 * Dieselben Farben und Schriften wie die Werbeseite (eine Marke), aber die Haltung
 * einer Betriebsoberflaeche: dicht, tabellarisch, Zahlen rechts mit `tabular-nums`,
 * je Seite eine Hauptsache. Siehe Kommentarkopf in includes/ansicht.php.
 *
 * Mobil hat Vorrang: Eine Belegung wird am Steg eingetragen, nicht am Schreibtisch.
 * Deshalb werden Tabellen unter 720px zu Karten (jede Zelle mit ihrer Bezeichnung
 * ueber `data-l`), statt waagerecht zu scrollen.
 */

:root {
  --tief: #0B1622;  --tief-2: #13222F;  --linie-d: #273F52;
  --grund: #FFFFFF; --flaeche: #F2F6F8; --linie: #DCE5EB;
  --tinte: #0B1622; --tinte-2: #5A6B78; --tinte-d: #9FB4C4;
  --marke: #2D5BFF; --marke-h: #7694FF; --marke-w: #E8EDFF;
  --gut: #0E9F6E;   --offen: #D97A2B;   --schlecht: #C8393B;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --r: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--flaeche); color: var(--tinte);
  font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(26px, 4vw, 34px); }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
a { color: var(--marke); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

/* ── Kopf ──────────────────────────────────────────────────────────────────── */
.mr-kopf { background: var(--tief); color: #fff; }
.mr-kopf-innen, .mr-nav-innen, .mr-innen {
  max-width: 1180px; margin-inline: auto; padding-inline: 20px;
}
.mr-kopf-innen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 14px; }
.mr-marke { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 19px;
  color: #fff; letter-spacing: -.02em; }
.mr-marke:hover { text-decoration: none; color: var(--marke-h); }
/* Der hellere Markenton, nicht #2D5BFF: Auf dem dunklen Kopf (#0B1622) liegt das
   kräftige Blau zu dicht am Grund und das Zeichen wirkt matschig. */
.mr-zeichen { width: 26px; height: 26px; flex: 0 0 auto; color: var(--marke-h); }
.mr-marke:hover .mr-zeichen { color: #fff; }
.mr-boot { display: flex; flex-direction: column; line-height: 1.25;
  padding-left: 16px; border-left: 1px solid var(--linie-d); }
.mr-boot strong { font-weight: 600; font-size: 15px; }
.mr-boot span { font-size: 12.5px; color: var(--tinte-d); }
.mr-wechsel { margin: 0; }
.mr-wechsel select { background: var(--tief-2); color: #fff; border: 1px solid var(--linie-d);
  border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 14px; }
.mr-konto { margin-left: auto; font-size: 13.5px; color: var(--tinte-d);
  display: flex; gap: 10px; align-items: baseline; }
.mr-konto a { color: var(--marke-h); }

.mr-nav { border-top: 1px solid var(--linie-d); }
.mr-nav-innen { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mr-nav-innen::-webkit-scrollbar { display: none; }
.mr-nav a {
  color: var(--tinte-d); padding: 11px 13px; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.mr-nav a:hover { color: #fff; text-decoration: none; }
.mr-nav a.hier { color: #fff; border-bottom-color: var(--marke); }

/* ── Flaeche ───────────────────────────────────────────────────────────────── */
.mr-haupt { padding-block: 26px 48px; }
.mr-innen > h1 { margin-bottom: 4px; }
.mr-leise { color: var(--tinte-2); font-weight: 400; }
.mr-unterzeile { color: var(--tinte-2); margin: 0 0 22px; font-size: 15px; }

.mr-meldung {
  background: var(--marke-w); border: 1px solid var(--marke-h); color: #15306E;
  border-radius: var(--r); padding: 11px 14px; margin-bottom: 20px; font-size: 15px;
}
.mr-meldung.fehler { background: #FDECEC; border-color: #F0B4B4; color: #8A2326; }

.mr-karte {
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 20px; margin-bottom: 20px;
}
.mr-karte > h2 { margin-bottom: 14px; }
.mr-karte > :last-child { margin-bottom: 0; }
.mr-start { max-width: 620px; }
.mr-hilfe { color: var(--tinte-2); font-size: 14px; margin: -4px 0 14px; }
/* Der negative obere Rand gilt für Hilfetexte UNTER einem Feld — dort sollen sie
   ans Label rücken. Nach einem Knopf oder Absatz ist er falsch: Der Text klebte dann
   am Knopf (Christians Befund 10.10.2026). */
form + .mr-hilfe, p + .mr-hilfe, table + .mr-hilfe, div + .mr-hilfe { margin-top: 12px; }
.mr-warnung { color: #8A2326; }
.mr-notiz { background: var(--flaeche); border-radius: 8px; padding: 14px; margin-top: 18px;
  font-size: 14.5px; }
.mr-notiz p { margin: 0 0 10px; }

/* ── Kennzahlen: eine Reihe, keine Kachelwand ──────────────────────────────── */
.mr-zahlen { display: flex; flex-wrap: wrap; gap: 0; background: var(--grund);
  border: 1px solid var(--linie); border-radius: var(--r); margin-bottom: 20px; }
.mr-zahlen > div { flex: 1 1 160px; padding: 16px 20px; border-right: 1px solid var(--linie); }
.mr-zahlen > div:last-child { border-right: 0; }
.mr-zahlen dt { font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinte-2); margin: 0 0 6px; }
.mr-zahlen dd { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mr-zahlen small { display: block; font: 400 13px/1.4 var(--sans); color: var(--tinte-2);
  margin-top: 3px; letter-spacing: 0; }

/* ── Tabellen ──────────────────────────────────────────────────────────────── */
.mr-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.mr-tabelle th, .mr-tabelle td { padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--linie); vertical-align: top; }
.mr-tabelle th { font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinte-2); white-space: nowrap; }
.mr-tabelle tr:last-child td { border-bottom: 0; }
.mr-tabelle td.r, .mr-tabelle th.r { text-align: right; }
.mr-tabelle tfoot td { font-weight: 600; border-top: 2px solid var(--tinte);
  border-bottom: 0; }
.mr-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-plus { color: var(--gut); }
.mr-minus { color: var(--schlecht); }
/* Eine BREITE Karte nimmt das seitliche Polster weg, damit Tabellen bis an den Rand
   laufen — der Zebrastreifen einer Zeile soll die ganze Karte queren.
   ⚠️ Dann braucht es JEDES andere Kind zurück. Die Regel nannte nur `h2` und `p`,
   also standen Formulare und Listen am Kartenrand und sahen aus, als lägen sie
   daneben (Christians Befund 11.10.2026 an der Wunschrunde). Deshalb jetzt
   umgekehrt gedacht: Alles bekommt das Polster, AUSSER dem, was ohne auskommen
   soll. So ist das nächste Element richtig, ohne dass jemand daran denkt. */
.mr-karte.breit { padding: 20px 0; }
.mr-karte.breit > * { padding-inline: 20px; }
.mr-karte.breit > table,
.mr-karte.breit > .mr-tabelle-rahmen,
.mr-karte.breit > hr { padding-inline: 0; }

.mr-marke-pille, .mr-pille {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--flaeche); color: var(--tinte-2);
  white-space: nowrap;
}
.mr-pille.toern { background: var(--marke-w); color: #15306E; }
.mr-pille.wartung { background: #FFF3E4; color: #8A5115; }
.mr-pille.gesperrt { background: #ECEFF2; color: var(--tinte-2); }
.mr-pille.reserviert { background: #FFF3E4; color: #8A5115; }
/* Kassenfuehrung und Fehlbestand: zwei Rollen, die man in der Zeile sehen soll. */
.mr-pille.kasse { background: #E8F3EC; color: #1C5B38; }
.mr-pille.warn { background: #FBE9E7; color: #8A2318; }

/* ── Formulare ─────────────────────────────────────────────────────────────── */
.mr-form { display: grid; gap: 4px; max-width: 460px; }
.mr-form label { font-size: 13.5px; font-weight: 600; margin-top: 10px; }
.mr-form input, .mr-form select, .mr-form textarea, .mr-reihe input, .mr-reihe select {
  font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--grund); color: var(--tinte); width: 100%;
}
.mr-form textarea { min-height: 70px; resize: vertical; }
.mr-form input[type=file] { padding: 7px; background: var(--flaeche); }
.mr-form .mr-knopf { margin-top: 16px; justify-self: start; }

/* Waagerechte Formularreihe fuer kurze Eingaben (Buchen, Erfassen). */
.mr-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mr-reihe > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; }
.mr-reihe > div.weit { flex: 2 1 220px; }
.mr-reihe label { font-size: 13px; font-weight: 600; }
.mr-reihe .mr-knopf { flex: 0 0 auto; }

.mr-knopf {
  font: 600 15px/1 var(--sans); padding: 11px 18px; border: 0; border-radius: 8px;
  background: var(--marke); color: #fff; cursor: pointer;
}
.mr-knopf:hover { background: #1F49E0; }
.mr-knopf.still { background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--linie); }
.mr-knopf.still:hover { background: #E7EDF1; }
.mr-knopf.klein { font-size: 13px; padding: 6px 11px; }
/* Überschrift einer Dokumentgruppe (12.10.2026). Trägt die Gliederung der Unterlagen
   nach Art — klein genug, um die Kartenüberschrift nicht zu verdrängen. */
.mr-gruppe { font-size: 15px; margin: 18px 0 6px; font-weight: 650; }
/* Die Gefahrenzone (12.10.2026): Löschen sieht anders aus als Speichern. Keine rote
   Fläche — nur eine rote Kante links und die Überschrift in Rot. Eine ganze rote Karte
   schreit, und was schreit, liest man irgendwann nicht mehr. */
.mr-karte.mr-gefahr { border-left: 3px solid #B3261E; }
.mr-karte.mr-gefahr h2 { color: #B3261E; }
.mr-liste-knapp { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--tinte-2); }
.mr-liste-knapp li { margin-bottom: 4px; }
.mr-gruppe:first-of-type { margin-top: 4px; }
/* Nur für Vorleseprogramme: ein Feld in einer Reihe braucht eine Beschriftung, auch
   wenn die Spaltenüberschrift sie für Sehende schon trägt. */
.mr-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip: rect(0 0 0 0); white-space: nowrap; }
.mr-knopf.warn { background: transparent; color: var(--schlecht);
  border: 1px solid #F0B4B4; }
.mr-knopf.warn:hover { background: #FDECEC; }

.mr-leer { color: var(--tinte-2); font-size: 15px; }
.mr-hinweise { margin: 0 0 18px; padding: 0; list-style: none; }
.mr-hinweise li { background: #FFF6E8; border: 1px solid #F0D8B4; color: #7A4A12;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 7px; font-size: 14.5px; }

/* ── Kalender ──────────────────────────────────────────────────────────────── */
.mr-monat-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mr-monat-kopf h2 { margin-right: auto; }
.mr-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: 8px;
  overflow: hidden; }
.mr-gitter .wt { background: var(--flaeche); padding: 7px 6px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinte-2); text-align: center; }
.mr-tag { background: var(--grund); min-height: 76px; padding: 5px 6px; }
.mr-tag.aus { background: var(--flaeche); }
.mr-tag.we { background: #FAFCFD; }
.mr-tag .nr { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.mr-tag.heute .nr { background: var(--marke); color: #fff; border-radius: 999px;
  padding: 1px 6px; font-weight: 600; }
.mr-band { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 3px;
  padding: 2px 5px; border-radius: 4px; background: var(--marke-w); color: #15306E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-band .z { margin-right: 4px; font-size: 10.5px; }
.mr-band.wartung { background: #FFF3E4; color: #8A5115; }
.mr-band.gesperrt { background: #ECEFF2; color: var(--tinte-2); }

/* Acht Farben je Miteigner. Blasse Flächen mit dunkler Schrift derselben Familie:
   So bleibt die Zelle ruhig, und der Kontrast trägt auch auf dem Telefon.
   Die Farbe ist nie der einzige Träger — der Name steht daneben. */
.mr-band.p1 { background: #E8EDFF; color: #15306E; }   /* Marine   */
.mr-band.p2 { background: #E3F5EC; color: #11513A; }   /* Seegrün  */
.mr-band.p3 { background: #FDEDE4; color: #7A3A12; }   /* Rost     */
.mr-band.p4 { background: #F2E9FA; color: #4A2370; }   /* Flieder  */
.mr-band.p5 { background: #E6F4F8; color: #114A5C; }   /* Petrol   */
.mr-band.p6 { background: #FBF0D8; color: #6B4A08; }   /* Messing  */
.mr-band.p7 { background: #FBE6EE; color: #6E1538; }   /* Signal   */
.mr-band.p8 { background: #E9EDE4; color: #37491F; }   /* Oliv     */

/* Reserviert: schraffiert statt andersfarbig — die Farbe gehört der Person, das
   Muster dem Zustand. Zwei Dinge, zwei Mittel. */
.mr-band.res {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.65) 0 3px, transparent 3px 7px);
}

/* Die Legende: dieselben Bänder, nur in einer Reihe. Wer den Kalender liest, braucht
   sie nicht — wer stockt, findet sie unter dem Gitter. */
.mr-legende {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 12px 0 0;
  padding-top: 12px; border-top: 1px solid var(--linie);
}
.mr-legende .mr-band { display: inline-block; margin: 0; max-width: none; }
/* (alte .res-Regel ersetzt — siehe oben) */

/* ── Kosten nach Art ───────────────────────────────────────────────────────────
   Drei Spalten: Bezeichnung, Balken, Betrag. Die Bezeichnung IM Balken war der
   Fehler — ein kurzer Balken schob sie auf den leeren Grund, wo sie mit halber
   Farbe hing. Daneben ist sie immer lesbar, egal wie kurz der Balken ist. */
.mr-balken { display: grid; gap: 8px; }
.mr-balken > div { display: grid; grid-template-columns: minmax(96px, 168px) 1fr auto;
  gap: 12px; align-items: center; }
.mr-balken .was { font-size: 13.5px; font-weight: 500; color: var(--tinte); }
.mr-balken .spur { background: var(--flaeche); border-radius: 4px; height: 12px;
  overflow: hidden; }
.mr-balken .fuell { background: var(--marke); height: 100%; border-radius: 4px; }
@media (max-width: 560px) {
  /* Am Telefon reicht die Breite fuer drei Spalten nicht: Name und Betrag in eine
     Zeile, der Balken darunter ueber die volle Breite. */
  .mr-balken > div { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .mr-balken .spur { grid-column: 1 / -1; }
}

.mr-fuss { border-top: 1px solid var(--linie); padding-block: 18px 34px;
  font-size: 13.5px; color: var(--tinte-2); }

/* ── Schmal: Tabellen werden Karten ────────────────────────────────────────── */
@media (max-width: 720px) {
  .mr-tabelle thead { display: none; }
  .mr-tabelle, .mr-tabelle tbody, .mr-tabelle tfoot { display: block; }
  .mr-tabelle tr { display: block; border-bottom: 1px solid var(--linie);
    padding: 12px 0; }
  .mr-tabelle tr:last-child { border-bottom: 0; }
  .mr-tabelle td { display: flex; justify-content: space-between; gap: 14px;
    border: 0; padding: 3px 0; text-align: right; }
  .mr-tabelle td::before { content: attr(data-l); font-size: 12px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2);
    text-align: left; }
  .mr-tabelle td:empty { display: none; }
  .mr-karte.breit { padding: 20px; }
  .mr-karte.breit > h2, .mr-karte.breit > p { padding-inline: 0; }
  .mr-zahlen > div { border-right: 0; border-bottom: 1px solid var(--linie); }
  .mr-zahlen > div:last-child { border-bottom: 0; }
  .mr-tag { min-height: 54px; }
  .mr-band { font-size: 0; padding: 3px; margin-top: 2px; }
  .mr-konto { margin-left: 0; order: 9; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Beschlüsse ────────────────────────────────────────────────────────────── */
.mr-beschluss { padding-bottom: 16px; }
.mr-b-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.mr-b-kopf h2 { margin: 0; flex: 1 1 auto; }
.mr-b-offen { background: var(--marke-w); color: #15306E; }
.mr-b-angenommen { background: #E3F5EE; color: #0A6B4A; }
.mr-b-abgelehnt { background: #FDECEC; color: #8A2326; }
.mr-b-zurueckgezogen { background: var(--flaeche); color: var(--tinte-2); }
.mr-b-eck { color: var(--tinte-2); font-size: 14.5px; margin: 0 0 10px; }
.mr-b-text { margin: 0 0 14px; max-width: 70ch; }

/* Der Balken zeigt den Stand UND die Schwelle. Ein Fortschrittsbalken ohne Ziellinie
   beantwortet die eine Frage nicht, die alle haben: reicht das schon? */
.mr-b-balken {
  position: relative; height: 12px; border-radius: 6px;
  background: var(--flaeche); overflow: hidden; margin-bottom: 8px;
}
.mr-b-balken .fuell { height: 100%; background: var(--marke-h); border-radius: 6px;
  transition: width .2s; }
.mr-b-balken .fuell.erreicht { background: var(--gut); }
.mr-b-balken .marke {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinte);
  overflow: visible;
}
.mr-b-zahlen { font-size: 14px; color: var(--tinte-2); margin: 0 0 12px;
  font-variant-numeric: tabular-nums; }
.mr-b-zahlen .ja { color: var(--gut); font-weight: 600; }
.mr-b-zahlen .nein { color: var(--schlecht); font-weight: 600; }
.mr-b-liste td { padding-block: 7px; }
.mr-b-wahl { display: inline-flex; gap: 6px; }
.mr-knopf.gewaehlt { background: var(--tinte); color: #fff; }
.mr-s-ja { background: #E3F5EE; color: #0A6B4A; }
.mr-s-nein { background: #FDECEC; color: #8A2326; }
.mr-s-enthaltung { background: var(--flaeche); color: var(--tinte-2); }
.mr-s-offen { background: #FFF3E4; color: #8A5115; }

@media (max-width: 720px) {
  .mr-b-wahl { flex-wrap: wrap; justify-content: flex-end; }
}

/* ── Zeitraum markieren (Maus und Finger) ─────────────────────────────────────
 * `touch-action: none` ist hier Pflicht, nicht Geschmack: Ohne das scrollt der Browser
 * beim Ziehen die Seite, statt zu markieren. `user-select: none` verhindert, dass beim
 * Ziehen die Tagesziffern blau markiert werden.
 */
.mr-gitter { touch-action: none; user-select: none; -webkit-user-select: none; }
.mr-tag[data-tag] { cursor: pointer; }
.mr-tag.gewaehlt { background: var(--marke-w); box-shadow: inset 0 0 0 2px var(--marke); }
.mr-tag.gewaehlt.belegt { background: #FFF3E4; box-shadow: inset 0 0 0 2px var(--offen); }

/* Die Leiste stand auf dunklem Grund mit weisser Schrift — als Kontrast gedacht, in
   Wahrheit ein schwarzer Balken, in dem man die Felder suchen musste (Christian,
   11.10.2026: „das ist so zu dunkel, Inhalte nicht gut zu sehen"). Jetzt helle Flaeche
   wie jede Karte; abheben tut sie sich ueber Rahmen und Schatten, nicht ueber Dunkelheit —
   das traegt auch dann, wenn sie am unteren Rand klebt. */
.mr-auswahl {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px; padding: 12px 14px;
  background: var(--grund); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(11, 22, 34, .12);
}
.mr-a-text { margin-right: auto; }
.mr-a-text strong { font-family: var(--display); font-size: 17px; }
.mr-a-text .mr-leise { color: var(--tinte-2); margin-left: 8px; font-size: 14px; }
.mr-a-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr-a-form { display: flex; gap: 8px; align-items: center; margin: 0; }
/* ⚠️ `display` schlägt `hidden`. Ohne diese Zeile stand das versteckte Absage-Formular
   als leere Blase zwischen „Buchen" und „Aufheben" — Christians Befund vom
   10.10.2026, und derselbe Fehler wie zuvor beim <dialog> der Belegschau. Der
   Grundreset bringt zwar `[hidden]{display:none!important}` mit, aber nur in der
   Artefakt-Hülle; hier gilt unser eigenes Blatt. */
.mr-a-form[hidden] { display: none !important; }
.mr-a-form input[type=text], .mr-a-form select {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--linie); background: var(--grund); color: var(--tinte);
}
.mr-a-form input[type=text]::placeholder { color: var(--tinte-2); }
.mr-a-form input[type=text] { width: 170px; }
.mr-a-form input::placeholder { color: var(--tinte-d); }

@media (max-width: 720px) {
  .mr-auswahl { position: sticky; bottom: 0; z-index: 5; }
  .mr-a-text { flex: 1 1 100%; margin-right: 0; }
  .mr-a-knoepfe, .mr-a-form { flex: 1 1 100%; }
  .mr-a-form input[type=text] { flex: 1 1 auto; width: auto; }
}

/* ── Beschluss: wer setzt um ────────────────────────────────────────────────── */
/* Christians Einwand (10.10.2026): „bei entscheidungen muss auch klar sein wer
   umsetzt, kauft etc". Der Block sitzt UNTER der Stimmliste und ist ein eigener
   Streifen, nicht eine weitere Karte — er gehört zum Beschluss, ist aber nicht die
   Abstimmung. Offen = Markenton, erledigt = grün; das ist der ganze Zustand. */
.mr-b-umsetzung {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--marke-w); border-left: 3px solid var(--marke);
  font-size: 14.5px;
}
.mr-b-umsetzung.fertig { background: #E7F6EF; border-left-color: var(--gut); }
.mr-b-u-zeile { display: flex; align-items: flex-start; gap: 10px; }
.mr-b-u-marke { flex: 0 0 auto; font-weight: 700; color: var(--marke); line-height: 1.5; }
.mr-b-umsetzung.fertig .mr-b-u-marke { color: var(--gut); }
.mr-b-u-haken { margin: 0 0 0 auto; flex: 0 0 auto; }
.mr-b-u-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(11, 22, 34, .08);
}
.mr-b-u-form select, .mr-b-u-form input {
  font: inherit; font-size: 13.5px; padding: 6px 9px; border: 1px solid var(--linie);
  border-radius: 7px; background: var(--grund); color: var(--tinte);
}
/* Der Hinweis nimmt den Rest der Zeile — er ist das Feld, das wirklich Platz braucht. */
.mr-b-u-form input[type="text"] { flex: 1 1 220px; min-width: 0; }

/* ── Belegschau: die Datei im Overlay, nicht im neuen Fenster ───────────────── */
/* Christians Wunsch (10.10.2026). Der <dialog> ist selbst das Blatt; ::backdrop ist
   der Rand, und ein Klick darauf schließt. Hoch darf er bis fast an den Rand — ein
   Beleg, den man nur im Ausschnitt sieht, erspart keinen Reiterwechsel. */
/* ⚠️ `display` NUR unter [open]. Ein geschlossener <dialog> ist über das
   UA-Stylesheet `display:none` — eine eigene display-Regel auf dem Element selbst
   hebt das auf, und die leere Hülle steht dann auf JEDER Seite im Dokumentfluss.
   Genau so gesehen am 10.10.2026 auf /app/einstellungen. */
.mr-schau {
  width: min(1020px, calc(100vw - 32px)); max-width: none;
  height: min(90vh, 1200px); max-height: none;
  padding: 0; border: 0; border-radius: var(--r); background: var(--grund);
  box-shadow: 0 24px 60px rgba(11, 22, 34, .32);
  overflow: hidden;
}
.mr-schau[open] { display: flex; flex-direction: column; }
.mr-schau::backdrop { background: rgba(11, 22, 34, .62); }
.mr-schau-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--linie);
  background: var(--flaeche); flex: 0 0 auto;
}
.mr-schau-name {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-schau-neu { margin-left: auto; font-size: 13.5px; flex: 0 0 auto; }
.mr-schau-zu {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--grund);
  color: var(--tinte-2); font-size: 20px; line-height: 1;
}
.mr-schau-zu:hover { background: var(--marke-w); color: var(--marke); border-color: var(--marke-h); }
.mr-schau-blatt { flex: 1 1 auto; min-height: 0; background: var(--flaeche); }
.mr-schau-blatt iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Bilder mittig und ganz, nicht beschnitten: ein Kassenzettel ist hoch, eine
   Rechnung breit — `contain` trägt beide. */
.mr-schau-blatt img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #fff;
}
@media (max-width: 720px) {
  .mr-schau { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ── Das Boot ───────────────────────────────────────────────────────────────── */
/* Foto links, Daten rechts — und unter 820px übereinander. Das Bild ist nicht
   Beilage: Ein Boot erkennt man am Bild, nicht an der Registernummer. */
.mr-boot-karte { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mr-boot-foto { margin: 0; flex: 1 1 320px; min-width: 0; position: relative; }
.mr-boot-foto img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  background: var(--flaeche);
}
/* Der Klick aufs Bild öffnet die Belegschau — der Link liegt darüber, unsichtbar,
   damit nicht zwei Dinge anklickbar aussehen. */
.mr-boot-foto a {
  position: absolute; inset: 0; z-index: 1; border-radius: 8px;
  font-size: 0; color: transparent;
}
.mr-boot-foto a:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; }
.mr-boot-daten { flex: 1 1 320px; min-width: 0; }
.mr-boot-text { margin: 0 0 14px; color: var(--tinte-2); }
/* Beschriftung links, Wert rechts — eine Definitionsliste in Tabellenform, damit die
   Spalte an derselben Stelle steht wie in den übrigen Tabellen. */
.mr-boot-liste th {
  text-align: left; font-weight: 500; color: var(--tinte-2); width: 46%;
  padding-block: 7px; font-size: 14.5px;
}
.mr-boot-liste td { padding-block: 7px; }
.mr-boot-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 880px) { .mr-boot-paar { grid-template-columns: 1fr; } }

/* ── Adresse am Mitglied ────────────────────────────────────────────────────── */
.mr-adresse { color: var(--tinte-2); font-size: 13.5px; line-height: 1.4; }
.mr-adresse .fehlt { color: var(--offen); }

/* ── Kielwasser-Abgleich ────────────────────────────────────────────────────── */
/* Die Zuordnungszeile: Auswahl, Anteil, Knopf — nebeneinander, solange Platz ist,
   darunter sobald nicht. In der Tabelle wird sie sonst zur dritten Spalte, die
   am Handy alles sprengt. */
.mr-kw-zuordnen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.mr-kw-zuordnen select, .mr-kw-zuordnen input {
  font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--linie);
  border-radius: 7px; background: var(--grund); color: var(--tinte); max-width: 100%;
}
.mr-kw-zuordnen select { flex: 1 1 150px; min-width: 0; }

/* ── Anlage-Assistent ───────────────────────────────────────────────────────── */
/* Eigene Seite ohne Navigation: eine Aufgabe, ein Fortschritt. Schmaler als die
   Anwendung — wer hier ist, liest und tippt, er sucht nicht. */
.mr-anlegen { max-width: 760px; }
.mr-anlegen h1 { margin-bottom: 8px; }

/* Die Stufen. Kein Balken: Vier Wörter sagen mehr als ein Prozentsatz, weil sie
   nennen, was kommt. */
.mr-stufen {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px; padding: 0; font-size: 14px;
}
.mr-stufen li {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 20px;
  background: var(--grund); border: 1px solid var(--linie); color: var(--tinte-2);
}
.mr-stufen li .nr { font-weight: 700; color: var(--gut); min-width: 0; }
.mr-stufen li.hier {
  background: var(--marke-w); border-color: var(--marke-h);
  color: var(--tinte); font-weight: 600;
}
.mr-stufen li.durch { color: var(--gut); border-color: #BFE6D5; }

/* Die grosse Wahl im ersten Schritt: zwei Flächen, keine zwei Radiopunkte. Die
   Entscheidung „habe ich ein Bordbuch" bestimmt den ganzen Rest. */
.mr-wahl-gross { border: 0; padding: 0; margin: 4px 0 18px; }
.mr-wahl-gross legend {
  padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px;
}
.mr-wahl-gross label {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 13px 15px; margin-bottom: 8px; font-weight: 400;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 9px;
  line-height: 1.45;
}
.mr-wahl-gross label:hover { border-color: var(--marke-h); }
/* ⚠️ `width: auto` MUSS hier stehen. `.mr-form input { width: 100% }` hat dieselbe
   Spezifität und steht weiter oben — ohne diese Zeile wird aus dem Auswahlknopf ein
   Balken über die halbe Karte, und der Text quetscht sich einspaltig daneben
   (Christian, 11.10.2026: „anlagefenster geht garnicht"). Dieselbe Falle wie bei den
   Länder-Kästchen am 10.10. */
.mr-wahl-gross input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.mr-wahl-gross label > span { flex: 1 1 auto; min-width: 0; }

/* Die Crew-Auswahl über den Personenfeldern: klein und beiläufig — sie ist eine
   Abkürzung, nicht der Hauptweg. Wer niemanden aus der Crew nimmt, tippt einfach. */
.mr-crew-wahl {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 13.5px; color: var(--tinte-2); font-weight: 500;
}
.mr-crew-wahl select {
  width: auto; min-width: 180px; flex: 0 1 auto; padding: 6px 9px; font-size: 14px;
}

/* Der Knopf für eine weitere Zeile steht für sich — nicht neben „Weiter", damit
   niemand den falschen trifft. */
.mr-leute-mehr { margin: 2px 0 18px; }
.mr-wahl-gross label:has(input:checked) {
  border-color: var(--marke); background: var(--marke-w);
}

/* Personenzeilen: Name, Mail, Anteil in einer Reihe — darunter die Anschrift.
   Unter 720px steht alles untereinander, weil am Handy nichts anderes passt. */
.mr-person {
  border: 1px solid var(--linie); border-radius: 9px;
  padding: 14px 16px 6px; margin-bottom: 14px; background: var(--grund);
}
.mr-person legend {
  padding: 0 7px; font-size: 13px; font-weight: 600; color: var(--tinte-2);
}
.mr-person .reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-person .reihe > span { flex: 1 1 160px; min-width: 0; display: block; }
.mr-person .reihe > span.weit { flex: 2 1 240px; }
.mr-person .reihe > span.schmal { flex: 0 1 100px; }
.mr-person label {
  display: block; font-size: 12.5px; color: var(--tinte-2); margin-bottom: 3px;
  font-weight: 400;
}
.mr-person input {
  width: 100%; font: inherit; font-size: 14.5px; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 7px; background: var(--grund);
  color: var(--tinte); margin-bottom: 10px;
}
.mr-person input:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }

/* Die Prüftabelle vor der Zahlung — Beschriftung links, Wert rechts. */
.mr-pruef th { text-align: left; font-weight: 500; color: var(--tinte-2); width: 34%;
  padding-block: 9px; vertical-align: top; }
.mr-pruef td { padding-block: 9px; }
.mr-knopf.gross { font-size: 16px; padding: 13px 26px; }

/* Zustimmungen vor dem Kaufknopf — Pflicht, also sichtbar und anklickbar groß. */
.mr-haken {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; cursor: pointer;
}
.mr-haken input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; }
.mr-bestellen .mr-knopf { margin-top: 8px; }

/* ── Drucken ────────────────────────────────────────────────────────────────── */
/*
 * Der Weg zum PDF, den jeder Browser schon kann: „Drucken → Als PDF sichern".
 * Eine Bibliothek dafür wäre eine Abhängigkeit, die bei jeder Schriftart und jedem
 * Umlaut neu überzeugt werden will — und das Ergebnis sähe schlechter aus.
 *
 * Gedruckt wird, was auf dem Papier etwas zu suchen hat: die Jahresabrechnung, die
 * Kostenliste, die Beschlüsse. Nicht die Navigation, nicht die Formulare, nicht die
 * Knöpfe — ein ausgedrucktes Eingabefeld ist ein Fleck.
 */
@media print {
  .mr-kopf, .mr-nav, .mr-fuss, .mr-meldung,
  .mr-form, .mr-reihe, form, .mr-knopf, details,
  .mr-stufen, .mr-hinweise { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .mr-haupt { padding: 0; }
  .mr-innen { max-width: none; padding: 0; }

  /* Karten werden zu Abschnitten: kein Rahmen, kein Schatten, kein Radius — aber ein
     Seitenumbruch davor, wenn es eng wird. */
  .mr-karte {
    border: 0; border-radius: 0; padding: 0; margin: 0 0 18pt;
    break-inside: avoid; box-shadow: none;
  }
  .mr-karte > h2 { font-size: 13pt; margin-bottom: 8pt; }
  h1 { font-size: 17pt; }

  /* Tabellen sind der Grund, warum gedruckt wird. Linien in Grau, Kopfzeile auf
     jeder Seite wiederholt — eine Abrechnung über zwei Seiten ohne Spaltenköpfe
     liest niemand. */
  .mr-tabelle { width: 100%; border-collapse: collapse; }
  .mr-tabelle thead { display: table-header-group; }
  .mr-tabelle th, .mr-tabelle td {
    border-bottom: 0.5pt solid #999; padding: 4pt 6pt; font-size: 10pt;
  }
  .mr-tabelle tr { break-inside: avoid; }

  .mr-pille { border: 0.5pt solid #999; padding: 1pt 4pt; font-size: 9pt; }
  .mr-zahl { font-variant-numeric: tabular-nums; }
  a { color: #000; text-decoration: none; }
  /* Adressen ausschreiben: Ein Link auf Papier, dessen Ziel man nicht sieht, ist
     keiner. Interne Anker bleiben stumm — die führen nirgendwohin. */
  .mr-innen a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }

  /* Woher das Blatt kommt und von wann — sonst liegt irgendwann eine Abrechnung auf
     dem Tisch, von der niemand weiss, welches Jahr sie zeigt. */
  .mr-druckfuss { display: block !important; margin-top: 14pt;
    border-top: 0.5pt solid #999; padding-top: 5pt; font-size: 8.5pt; color: #555; }
}
.mr-druckfuss { display: none; }

/* Wortmarke und Anmelde-Knopf — wie auf der Werbeseite, damit beide Welten
   zusammengehören. „Reeder" abgesetzt: Der Name ist zusammengesetzt, und die Farbe
   zeigt, wo die Fuge sitzt. */
.mr-reeder { color: var(--marke-h); }
.mr-marke:hover .mr-reeder { color: #fff; }
.mr-anmelden {
  margin-left: auto; padding: 7px 15px; border-radius: 8px;
  border: 1px solid var(--linie-d); color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
}
.mr-anmelden:hover { background: var(--marke); border-color: var(--marke); text-decoration: none; }

/* Der Nebenweg: da, aber nicht im Weg. Ein <details> als Karte — zugeklappt eine
   Zeile, aufgeklappt das volle Formular. */
.mr-vonhand > summary {
  cursor: pointer; font-size: 14.5px; list-style: none;
}
.mr-vonhand > summary::-webkit-details-marker { display: none; }
.mr-vonhand > summary::before { content: "▸ "; color: var(--marke); }
.mr-vonhand[open] > summary::before { content: "▾ "; }

/* Feiertage: der Name klein neben der Tagesnummer, der Tag leicht getönt. Kein
   eigenes Band — ein Feiertag ist keine Buchung, er ist Hintergrund. */
.mr-tag.feiertag { background: #FFFBF2; }
.mr-tag.feiertag.we { background: #FFF9EC; }
.mr-feier {
  display: inline-block; margin-left: 5px; font-size: 10px; font-weight: 500;
  color: #8A5115; max-width: 72%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: top;
}
/* Die Länderwahl: zwei Spalten, damit neun Länder nicht neun Zeilen brauchen. */
.mr-laender {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 4px 12px; margin-bottom: 14px;
}
.mr-laender label {
  display: flex; gap: 7px; align-items: center; justify-content: flex-start;
  font-weight: 400; font-size: 14.5px; margin: 0; cursor: pointer;
}
/* ⚠️ `.mr-form input` setzt width:100% — das streckt auch ein Kaestchen und schiebt
   den Text ans andere Ende der Zeile („krum und schief", 10.10.2026). Haekchen sind
   keine Eingabefelder und brauchen ihre eigene Breite. */
.mr-laender input[type=checkbox] {
  width: auto; min-width: 0; flex: 0 0 auto; margin: 0; padding: 0;
}

/* Fehlt das Foto, steht an seiner Stelle die Flaeche zum Ablegen — nicht nichts.
   Der Hochladeteil lag frueher als eigener Abschnitt ganz unten, weit weg von dem,
   wozu er gehoert. */
.mr-boot-foto.leer {
  border: 1px dashed var(--linie); border-radius: 10px; padding: 18px;
  background: var(--flaeche); display: flex; flex-direction: column; justify-content: center;
  min-height: 170px;
}
.mr-foto-form { display: grid; gap: 8px; justify-items: start; }
.mr-boot-foto:not(.leer) .mr-foto-form { margin-top: 10px; }
.mr-foto-form label { font-size: 13.5px; font-weight: 500; display: grid; gap: 2px; }
.mr-foto-form input[type=file] { font-size: 13px; max-width: 100%; }

/* ── Dialoge ───────────────────────────────────────────────────────────────────
   Ein Aenderungsformular gehoert nicht in eine Tabellenzelle: In der schmalen
   letzten Spalte wird daraus eine meterlange Rolle. `[open]`, nie `display` auf
   dem <dialog> selbst — sonst steht die leere Huelle auf jeder Seite. */
.mr-dialog {
  border: none; border-radius: 14px; padding: 0; width: min(620px, calc(100vw - 32px));
  max-height: 86vh; background: var(--karte, #fff); color: var(--tinte);
  box-shadow: 0 24px 60px rgba(16, 32, 48, .28);
}
.mr-dialog::backdrop { background: rgba(16, 32, 48, .45); }
.mr-dialog[open] { display: block; }
.mr-dialog-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--linie); position: sticky; top: 0;
  background: inherit; border-radius: 14px 14px 0 0;
}
.mr-dialog-zu {
  border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--tinte-2); padding: 0 4px;
}
.mr-dialog-blatt { padding: 6px 18px 20px; overflow-y: auto; max-height: calc(86vh - 56px); }
.mr-dialog-blatt section { padding-block: 14px; border-bottom: 1px solid var(--linie); }
.mr-dialog-blatt section:last-child { border-bottom: none; }
.mr-dialog-blatt h3 { font-size: 14px; margin: 0 0 4px; }
.mr-dialog-blatt .mr-form { max-width: none; }
.mr-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 460px) { .mr-zwei { grid-template-columns: 1fr; } }
.mr-knopf.still {
  background: none; color: var(--marke); border: 1px solid var(--linie); font-weight: 500;
}

/* Kopf rechts: Zugang und Sprache nebeneinander. */
.mr-kopf-rechts { display: flex; align-items: center; gap: 10px; }
.mr-sprachwahl { margin: 0; }
.mr-sprachwahl select {
  font: inherit; font-size: 13.5px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--linie); background: var(--grund); color: var(--tinte);
  max-width: 150px;
}
/* Arabisch liest von rechts — das betrifft die ganze Seite, nicht nur den Text. */
[dir=rtl] .mr-tabelle th, [dir=rtl] .mr-tabelle td { text-align: right; }
[dir=rtl] .mr-tabelle th.r, [dir=rtl] .mr-tabelle td.r { text-align: left; }

/* ── Angebotsauswahl ───────────────────────────────────────────────────────────
   Ein Auswahl-Beschluss zeigt n Angebote nebeneinander, jedes mit eigenem Balken
   und derselben Schwellenmarke. Kein Ja/Nein: Die Frage ist „welches davon". */
.mr-b-angebote { display: grid; gap: 12px; margin: 14px 0 4px; }
.mr-angebot {
  border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px;
  background: var(--grund);
}
.mr-angebot.gewonnen { border-color: var(--gut, #1E9E6A); background: #F3FBF7; }
.mr-angebot .kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 6px;
}
.mr-angebot p { margin: 4px 0 8px; font-size: 14px; }
.mr-angebot-neu { margin-top: 10px; }
.mr-angebot-neu label { visibility: hidden; height: 0; }
.mr-b-thema {
  display: block; font-size: 13px; font-weight: 400; color: var(--tinte-2);
  margin-top: 2px;
}

/* Archivjahre: zusammengeklappt, das laufende und das Vorjahr offen. */
.mr-archiv-jahr { border-top: 1px solid var(--linie); }
.mr-archiv-jahr:first-of-type { border-top: none; }
.mr-archiv-jahr > summary {
  cursor: pointer; padding: 12px 20px; font-weight: 600; font-size: 14.5px;
  list-style-position: inside;
}
.mr-archiv-jahr[open] > summary { color: var(--tinte); }

/* ── Hilfe ─────────────────────────────────────────────────────────────────────
   Eine Seite mit Ankern: Das Inhaltsverzeichnis oben springt, Strg+F findet alles. */
.mr-hilfe-navi {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px;
}
.mr-hilfe-navi a { font-size: 14.5px; font-weight: 500; }
.mr-hilfe-text { padding-bottom: 6px; scroll-margin-top: 90px; }
.mr-hilfe-text p { margin: 0 0 12px; max-width: 70ch; line-height: 1.62; }
.mr-hilfe-text h2 { margin-bottom: 10px; }

/* ── Die Saison als Band ───────────────────────────────────────────────────────
   Eine Spalte je Woche: 210 Tage nebeneinander waeren auf dem Telefon drei Pixel
   breit. Die Spalten sind gleich breit, damit dieselbe Spalte in jeder Zeile
   dieselbe Woche meint. */
.mr-saisonband .kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  flex-wrap: wrap; padding: 0 20px;
}
.mr-saisonband .kopf h2 { margin: 0; }
.mr-saisonband .band { padding: 14px 20px 6px; overflow-x: auto; }
.mr-saisonband .monate, .mr-saisonband .spur {
  display: grid; grid-template-columns: 78px repeat(auto-fit, minmax(7px, 1fr));
  gap: 2px; align-items: center; min-width: 420px;
}
.mr-saisonband .monate {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-2); margin-bottom: 4px;
}
.mr-saisonband .spur { margin-bottom: 3px; }
.mr-saisonband .name {
  font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-right: 8px;
}
.mr-saisonband i { height: 17px; border-radius: 3px; display: block; }
.mr-saisonband i.leer { background: var(--flaeche); }
.mr-saisonband i.wartung { background: #C9A227; }
/* Die Art heisst in der Datenbank `gesperrt` — `sperre` traf nie zu, und die Woche
   blieb unsichtbar. */
.mr-saisonband i.gesperrt { background: #9AA6B2; }
/* Die Woche eines Toerns traegt die Personenfarbe `p1`–`p8`. Ohne diese acht Regeln
   war sie durchsichtig: Das Band zeigte nur noch die LUECKEN zwischen den Toerns,
   und jede belegte Woche sah aus wie Papier (Christian, 10.10.2026: „zeigt hier
   keine belegung an"). Dieselben acht Farben wie `.mr-band`, nur kraeftiger —
   ein 17 Pixel hoher Streifen braucht mehr Saettigung als eine Pille mit Schrift. */
.mr-saisonband i.p1 { background: #4A6CC9; }   /* Marine  */
.mr-saisonband i.p2 { background: #2E8B63; }   /* Seegrün */
.mr-saisonband i.p3 { background: #D07B45; }   /* Rost    */
.mr-saisonband i.p4 { background: #8A5CC0; }   /* Flieder */
.mr-saisonband i.p5 { background: #2E8FA8; }   /* Petrol  */
.mr-saisonband i.p6 { background: #C9A227; }   /* Messing */
.mr-saisonband i.p7 { background: #C2557E; }   /* Signal  */
.mr-saisonband i.p8 { background: #7A8C4F; }   /* Oliv    */
.mr-saisonband .zaehler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--linie); margin-top: 10px;
}
.mr-saisonband .zaehler b { font-size: 22px; font-weight: 600; display: block; }
.mr-saisonband .zaehler small { color: var(--tinte-2); font-size: 12.5px; }

/* Das Fragezeichen im Kopf: Die Hilfe ist auch der elfte Navigationspunkt, aber
   dort sucht sie niemand. */
.mr-hilfe-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linie);
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
  color: var(--tinte-2); flex: 0 0 auto;
}
.mr-hilfe-knopf:hover { color: var(--marke); border-color: var(--marke); }

/* ── Die Kasse ─────────────────────────────────────────────────────────────────
   Der Stand gross, die drei Summanden klein darunter: Die Frage ist „reicht das
   Geld", nicht „wie setzt es sich zusammen" — das kommt erst danach. */
.mr-kasse-stand { padding: 4px 20px 2px; }
.mr-kasse-stand .haupt { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mr-kasse-stand .label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2);
}
.mr-kasse-stand .zahl {
  font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums;
  font-family: var(--zahl, inherit);
}
.mr-kasse-stand .teile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie);
}
.mr-kasse-stand .teile span {
  display: block; font-size: 12.5px; color: var(--tinte-2);
}
.mr-kasse-stand .teile b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ── Die eingebettete Stripe-Kasse ───────────────────────────────────────────────
   Stripe liefert einen eigenen Rahmen (iframe) und bringt sein eigenes Aussehen mit;
   wir geben ihm nur Platz und den Grund drumherum. Eine Mindesthöhe, damit die Seite
   beim Laden nicht springt — der Rahmen wächst danach selbst. */
.mr-kasse { min-height: 480px; margin-top: 18px; }
.mr-kasse iframe { border: 0; width: 100%; }

/* ── Segelgarderobe: eine Zeile je Segel ─────────────────────────────────────────
   Name breit, Reffstufen schmal — dieselbe Aufteilung wie bei den Miteignern im
   Anlageweg. Auf dem Telefon stehen beide untereinander; eine Auswahl mit vier
   Werten neben einem Textfeld ist bei 400 px nicht mehr zu treffen. */
.mr-segelzeilen { display: flex; flex-direction: column; gap: 10px; }
.mr-segelzeile { display: flex; gap: 12px; align-items: flex-end; }
.mr-segelzeile > span { display: flex; flex-direction: column; gap: 4px; }
.mr-segelzeile > span.weit { flex: 1 1 auto; min-width: 0; }
.mr-segelzeile > span.schmal { flex: 0 0 104px; }
.mr-segelzeile label { font-size: 13px; color: var(--mr-leise, #5d7183); }
/* Ab der zweiten Zeile stehen die Beschriftungen nicht noch einmal da — sie sagen
   dasselbe, und untereinander liest sich die Liste sonst wie ein Formular je Segel. */
.mr-segelzeile label.nurlesbar { display: none; }
.mr-segelzeile input, .mr-segelzeile select { width: 100%; }
@media (max-width: 560px) {
  .mr-segelzeile { flex-direction: column; align-items: stretch; }
  .mr-segelzeile > span.schmal { flex: 1 1 auto; }
  .mr-segelzeile label.nurlesbar { display: block; }
}