/* ==========================================================================
   Parc de Nadal — Betreiberportal
   ---------------------------------------------------------------------------
   Der persoenliche Bereich eines Huettenbetreibers.

   Gestaltungsentscheidung: HELLE Flaeche statt des Nachthimmels der
   oeffentlichen Seite. Das Portal ist ein Arbeitsbereich — hier werden
   Formulare ausgefuellt, Zahlen eingetragen und Dateien hochgeladen. Auf
   dunklem Grund ermuedet das und Eingabefelder verlieren ihre Kontur.
   Die Marke bleibt praesent ueber den Kopfbereich (Nachtblau), das
   Messinggold als Akzent und die Marken-Schriften.

   Mobile first: die Betreiber stehen beim Aufbau auf dem Platz und
   bedienen das am Telefon.
   ========================================================================== */

:root {
  /* ==========================================================================
     Farbwelt des Huettenbereichs — dieselbe wie in der Verwaltung
     (siehe admin.css). Die `--b-…`-Namen bleiben, weil rund tausend Zeilen
     dieser Datei und sechs Ansichten daran haengen; die WERTE stammen jetzt
     aus der Dashboard-Vorlage.

     Was damit verschwindet: das Nachtblau-Gold der oeffentlichen Seite. Es
     gehoert auf die Einladungsseite, nicht in einen Arbeitsbereich, in dem
     Betreiber Unterlagen hochladen und Geraete melden.
     ========================================================================== */

  --b-nacht:      #143f74;
  --b-nacht-hell: #1d5fa5;
  --b-gold:       #2ec2d7;
  --b-gold-tief:  #1a9cb4;
  --b-gold-hell:  #dcf0f8;

  /* Arbeitsflaechen */
  --b-buehne:     #e7e8ec;
  --b-fl:         #f2f7fc;
  --b-karte:      #ffffff;
  --b-linie:      #e7eef5;
  --b-linie-satt: #d2dfeb;

  --b-text:       #0f1620;
  --b-leise:      #6d7d8e;
  --b-sehr-leise: #97a5b4;

  /* Zustaende */
  --b-gut:        #17a67b;
  --b-gut-fl:     #ddf5ea;
  --b-warn:       #c08415;
  --b-warn-fl:    #fdf3de;
  --b-schlecht:   #c0453d;
  --b-schlecht-fl:#fde9e7;

  /*
   * Schrift: dieselbe geometrische Grotesk wie in der Verwaltung. Jost liegt
   * lokal im Projekt und wird ueber fonts.css geladen (siehe
   * views/betreiber/partials/kopf.ejs).
   */
  --b-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --b-display: var(--b-sans);

  --b-r:       16px;
  --b-r-klein: 12px;
  --b-pille:  999px;
  --b-breite:  900px;
  --b-schatten: 0 1px 2px rgba(16, 42, 74, 0.04), 0 10px 28px rgba(16, 42, 74, 0.06);

  --b-v-navy: linear-gradient(135deg, #16457c 0%, #1e63aa 100%);
  --b-v-blau: linear-gradient(135deg, #1c79c2 0%, #33a2da 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.betreiber {
  margin: 0;
  background-color: var(--b-fl);
  color: var(--b-text);
  font-family: var(--b-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */

.b-kopf {
  background: var(--b-v-navy);
  color: #fff;
  border-bottom: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 26px rgba(20, 63, 116, 0.20);
}

.b-kopf__innen {
  max-width: var(--b-breite);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.b-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

/*
 * Der Schriftzug des Logos 2026 steht zweizeilig. Bei den frueheren 30 px
 * blieben je Zeile 15 px — zu wenig. 38 px halten die Kopfzeile schmal und
 * machen beide Zeilen lesbar.
 */
.b-marke__wortmarke {
  display: block;
  height: 38px;
  width: auto;
}

.b-marke__rolle {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-gold);
  border-left: 1px solid rgba(203, 157, 106, 0.45);
  padding-left: 10px;
}

.b-kopf__rechts {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sprachumschalter */
.b-sprache {
  display: flex;
  gap: 2px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px;
}

.b-sprache__wahl {
  display: block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--b-gold-hell);
  min-height: 32px;
  line-height: 22px;
}

.b-sprache__wahl:hover { background-color: rgba(255, 255, 255, 0.12); }

.b-sprache__wahl.ist-aktiv {
  background-color: var(--b-gold);
  color: var(--b-nacht);
}

/* --------------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------------- */

.b-inhalt {
  max-width: var(--b-breite);
  margin: 0 auto;
  padding: 26px 20px 60px 20px;
}

.b-seitenkopf { margin-bottom: 22px; }

.b-titel {
  font-family: var(--b-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 6px 0;
  color: var(--b-nacht);
}

.b-untertitel {
  margin: 0;
  font-size: 16px;
  color: var(--b-leise);
}

.b-karte {
  background-color: var(--b-karte);
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  box-shadow: var(--b-schatten);
  padding: 22px;
  margin-bottom: 20px;
}

.b-karte--betont {
  border-left: 4px solid var(--b-gold);
}

.b-abschnitt {
  font-family: var(--b-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 14px 0;
  color: var(--b-nacht);
}

.b-fliess {
  margin: 0 0 14px 0;
  color: var(--b-leise);
  font-size: 16px;
}

.b-fliess:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Huetten-Nummer — das wichtigste Element der Seite
   -------------------------------------------------------------------------- */

.b-huette {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.b-huette__nummer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 14px 18px;
  background-color: var(--b-nacht);
  color: var(--b-gold-hell);
  border-radius: var(--b-r);
  border: 2px solid var(--b-gold);
}

.b-huette__nummer-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-gold);
}

.b-huette__nummer-wert {
  font-family: var(--b-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--b-gold-hell);
}

/* Eine Kachel je Huette (19.08.2026). Bei genau einer Huette sieht es aus
   wie zuvor; ab zwei stehen sie nebeneinander und werden etwas kleiner,
   damit auch vier Nummern noch in eine Zeile passen. */
.b-huette__nummern {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b-huette__nummer--klein {
  min-width: 88px;
  padding: 10px 14px;
}

.b-huette__nummer--klein .b-huette__nummer-wert {
  font-size: 30px;
}

.b-huette__nummer-zusatz {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--b-gold);
}

/* Kein Eintrag in betreiber_huetten: benannt statt leer gelassen. */
.b-huette__nummer--leer {
  border-style: dashed;
}

.b-huette__nummer-hinweis {
  max-width: 132px;
  padding-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--b-gold);
}

.b-huette__daten { flex: 1 1 260px; }

.b-daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 16px;
}

.b-daten dt {
  color: var(--b-leise);
  font-size: 14px;
}

.b-daten dd {
  margin: 0;
  font-weight: 500;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Plaketten
   -------------------------------------------------------------------------- */

.b-plakette {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.b-plakette--gut      { background-color: var(--b-gut-fl);      color: var(--b-gut); }
.b-plakette--warn     { background-color: var(--b-warn-fl);     color: var(--b-warn); }
.b-plakette--schlecht { background-color: var(--b-schlecht-fl); color: var(--b-schlecht); }
.b-plakette--leise    { background-color: #e7eef5;              color: var(--b-leise); }

/* --------------------------------------------------------------------------
   Checkliste
   -------------------------------------------------------------------------- */

.b-fortschritt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--b-leise);
}

.b-fortschritt__balken {
  flex: 1;
  height: 8px;
  background-color: #e4eef8;
  border-radius: 999px;
  overflow: hidden;
}

.b-fortschritt__fuellung {
  display: block;
  height: 100%;
  background-color: var(--b-gold);
  border-radius: 999px;
}

.b-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.b-punkt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: #ffffff;
}

.b-punkt.ist-erledigt { background-color: var(--b-gut-fl); border-color: #9fe3c8; }
.b-punkt.ist-gesperrt { opacity: 0.72; }

/* Zustandszeichen: bewusst mit Text-Alternative im Markup (aria-hidden hier). */
.b-punkt__zeichen {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--b-linie-satt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--b-sehr-leise);
  background-color: #fff;
}

.b-punkt.ist-erledigt .b-punkt__zeichen {
  border-color: var(--b-gut);
  background-color: var(--b-gut);
  color: #fff;
}

.b-punkt.ist-arbeit .b-punkt__zeichen {
  border-color: var(--b-warn);
  color: var(--b-warn);
}

.b-punkt__text { flex: 1; min-width: 0; }

.b-punkt__titel {
  margin: 0 0 2px 0;
  font-size: 17px;
  font-weight: 500;
}

.b-punkt__hinweis {
  margin: 0;
  font-size: 15px;
  color: var(--b-leise);
}

.b-punkt__status { flex: 0 0 auto; margin-top: 2px; }

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

/*
 * 🔴 `hidden` muss gewinnen — immer (21.08.2026).
 *
 *    Das HTML-Attribut `hidden` bewirkt `display: none` nur über das
 *    Vorgabe-Stylesheet des Browsers. JEDE eigene Regel mit `display:` schlaegt
 *    es, weil sie spezifischer ist. `.b-feld { display: grid }` genuegt bereits:
 *    ein Feld mit `hidden` bleibt dann sichtbar.
 *
 *    Das ist an diesem einen Tag ZWEIMAL passiert — beim Steckerfeld der
 *    Geraeteseite (sollte bei reinem Gas verschwinden) und beim Feld „Name der
 *    neuen Kategorie" auf der Fotoseite. Beide Male setzte das Skript
 *    korrekt `hidden`, und beide Male blieb das Feld stehen.
 *
 *    Besonders tueckisch: `element.hidden` meldet im Test brav `true`. Wer die
 *    Property misst statt der berechneten `display`, haelt den Fehler fuer
 *    behoben. Genau so ist er beim Stecker durch den Test gerutscht.
 *
 *    Fuer `.b-liter` gab es dafuer schon einen Einzelflicken (Zeile ~709). Ab
 *    hier gilt die Regel fuer ALLES — `!important`, weil `hidden` eine Aussage
 *    ueber Sichtbarkeit ist und keine Layout-Regel sie ueberstimmen darf.
 */
[hidden] { display: none !important; }

.b-formular { display: grid; gap: 16px; }

.b-feld { display: grid; gap: 6px; }

.b-feld > span {
  font-size: 14px;
  font-weight: 500;
  color: var(--b-leise);
}

.b-feld input {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 17px;
  color: var(--b-text);
  background-color: #fff;
  border: 1px solid var(--b-linie-satt);
  border-radius: var(--b-r-klein);
  min-height: 48px;
}

.b-feld input:focus {
  outline: 2px solid var(--b-gold);
  outline-offset: 1px;
  border-color: var(--b-gold);
}

.b-feld__hinweis {
  font-size: 14px;
  color: var(--b-sehr-leise);
}

/*
 * 🔴 Ein abgeschalteter Knopf muss abgeschaltet AUSSEHEN (21.08.2026).
 *
 *    Gefunden beim Nachmessen der neuen Raum-Knöpfe „Drehen" und „Löschen":
 *    sie tragen `disabled`, solange nichts ausgewählt ist — sahen aber exakt
 *    aus wie ein bedienbarer Knopf. Gemessen: dieselbe Deckkraft, dieselbe
 *    Farbe, sogar derselbe Zeiger.
 *
 *    Wer darauf drückt und nichts geschieht, hält die Seite für kaputt. Es
 *    gab für den ganzen Betreiberbereich keine einzige Regel für `:disabled`
 *    — der Fall war schlicht noch nie vorgekommen.
 */
.b-knopf:disabled,
.b-knopf[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  /* Kein Hover-Wechsel: er verspräche eine Reaktion, die nicht kommt. */
  pointer-events: none;
}

.b-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  min-height: 48px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--b-pille);
  border: 1px solid transparent;
  background-color: #fff;
  color: var(--b-text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.b-knopf:active { transform: translateY(1px); }

.b-knopf:hover { box-shadow: 0 4px 14px rgba(16, 42, 74, 0.17); }

.b-knopf--haupt {
  background: var(--b-v-blau);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 123, 196, 0.30);
}

.b-knopf--haupt:hover { box-shadow: 0 9px 22px rgba(30, 123, 196, 0.42); }

.b-knopf--breit { width: 100%; }

.b-knopf--leise {
  background-color: transparent;
  border-color: rgba(203, 157, 106, 0.5);
  color: var(--b-gold-hell);
}

.b-knopf--leise:hover { background-color: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   Live-Rechner (Geräte & Kilowatt)

   Die Ampel liegt auf der Randfarbe UND auf einem Wort ("über der Grenze") —
   nie auf der Farbe allein. Rot-Grün-Blindheit betrifft rund 8 % der Männer,
   und diese Seite entscheidet darüber, ob eine Hütte angeschlossen wird.
   -------------------------------------------------------------------------- */

.b-messwerte {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.b-messwert {
  border: 1px solid var(--b-linie);
  border-left: 5px solid var(--b-linie-satt);
  border-radius: var(--b-r);
  padding: 16px 18px;
  background-color: #ffffff;
}

.b-messwert--gruen    { border-left-color: var(--b-gut);      background-color: var(--b-gut-fl); }
.b-messwert--gelb     { border-left-color: var(--b-warn);     background-color: var(--b-warn-fl); }
.b-messwert--rot      { border-left-color: var(--b-schlecht); background-color: var(--b-schlecht-fl); }
.b-messwert--unbekannt{ border-left-color: var(--b-linie-satt); }

.b-messwert__titel {
  margin: 0 0 2px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--b-leise);
}

.b-messwert__zahl {
  margin: 0;
  font-family: var(--b-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--b-nacht);
}

.b-messwert__grenze {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: var(--b-leise);
}

.b-messwert__balken {
  display: block;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.b-messwert__fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--b-gold);
  transition: width 0.15s ease-out;
}

.b-messwert--gruen .b-messwert__fuellung { background-color: var(--b-gut); }
.b-messwert--gelb  .b-messwert__fuellung { background-color: var(--b-warn); }
.b-messwert--rot   .b-messwert__fuellung { background-color: var(--b-schlecht); }

.b-messwert__lage { margin: 0 0 6px 0; font-size: 16px; }
.b-messwert--rot .b-messwert__lage { color: var(--b-schlecht); }

.b-messwert__erklaerung {
  margin: 0;
  font-size: 14px;
  color: var(--b-sehr-leise);
}

/* --------------------------------------------------------------------------
   Tabelle
   -------------------------------------------------------------------------- */

/* Auf dem Telefon darf die Tabelle scrollen — die SEITE aber nie. */
.b-tabelle__huelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.b-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.b-tabelle th,
.b-tabelle td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--b-linie);
}

.b-tabelle thead th {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--b-leise);
  white-space: nowrap;
}

.b-tabelle tbody th { font-weight: 500; }

.b-tabelle tfoot th,
.b-tabelle tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--b-linie-satt);
  font-size: 17px;
}

.b-rechts { text-align: right; }

.b-zelle__zusatz {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--b-sehr-leise);
}

/* --------------------------------------------------------------------------
   Aufklappen
   -------------------------------------------------------------------------- */

.b-klapp summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
}

.b-klapp summary::-webkit-details-marker { display: none; }

.b-klapp__inhalt {
  margin-top: 12px;
  padding: 16px;
  background-color: var(--b-fl);
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  display: grid;
  gap: 14px;
  min-width: 260px;
}

.b-knopf--klein {
  padding: 8px 14px;
  min-height: 40px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Formular-Ergänzungen
   -------------------------------------------------------------------------- */

.b-feldpaar {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.b-feld select {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 17px;
  color: var(--b-text);
  background-color: #fff;
  border: 1px solid var(--b-linie-satt);
  border-radius: var(--b-r-klein);
  min-height: 48px;
}

.b-feld select:focus {
  outline: 2px solid var(--b-gold);
  outline-offset: 1px;
}

/* Das Liter-Feld ist ein Block mit eigener Beschriftung, kein <label>. */
.b-liter { display: grid; gap: 6px; }
.b-liter[hidden] { display: none; }
.b-liter > label { display: grid; gap: 6px; }
.b-liter > label > span {
  font-size: 14px;
  font-weight: 500;
  color: var(--b-leise);
}

/* --------------------------------------------------------------------------
   Plaketten-Foto
   -------------------------------------------------------------------------- */

.b-unterabschnitt {
  font-family: var(--b-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--b-nacht);
}

/* Der Foto-Weg ist optisch abgesetzt, damit er nicht wie ein Pflichtfeld
   des Formulars wirkt — er ist eine Abkürzung, kein zusätzlicher Schritt. */
.b-plakettenblock {
  margin-bottom: 24px;
  padding: 18px;
  background-color: var(--b-fl);
  border: 1px dashed var(--b-linie-satt);
  border-radius: var(--b-r);
}

/* --------------------------------------------------------------------------
   Die beiden Fotos eines Geraets nebeneinander (21.08.2026)

   🔴 Fabi: „das muss nebeneinander stehen, erst foto des gerät dann das foto
      der Technischen daten."

      Zwei Fotos je Geraet — eines vom Geraet, eines von den technischen Daten.
      Sie standen an den beiden ENDEN des Formulars: das Typenschild ganz oben,
      das Geraetefoto ganz unten hinter allen Eingabefeldern. Wer das eine
      machte, sah das andere nicht.

   🔴 Die Reihenfolge ist Absicht: LINKS das Geraet, RECHTS die Daten. So
      herum, weil man erst das Geraet vor sich hat und dann sein Typenschild
      sucht — nicht umgekehrt.
   -------------------------------------------------------------------------- */

.b-fotopaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

/*
 * Der Plakettenblock bringt seinen eigenen Abstand mit. Innerhalb des Paars
 * ergaebe der eine schiefe Unterkante — die Spalten sollen gleich enden.
 */
.b-fotopaar .b-plakettenblock { margin-bottom: 0; }

.b-fotopaar__teil {
  min-width: 0;
  padding: 18px;
  border-radius: var(--b-r);
}

/* Die linke Spalte trägt denselben Rahmen wie der Plakettenblock rechts. */
.b-fotopaar__teil:not(.b-plakettenblock) {
  background-color: var(--b-fl);
  border: 1px dashed var(--b-linie-satt);
}

.b-fotopaar .b-unterabschnitt { margin-top: 0; }

@media (max-width: 720px) {
  /*
   * Untereinander — nebeneinander wird jede Spalte so schmal, dass der
   * Dateiname im Knopf nicht mehr lesbar ist. Die Reihenfolge bleibt: erst
   * das Geraet, dann die Daten.
   */
  .b-fotopaar { grid-template-columns: 1fr; }
}

.b-vorschau {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px;
  background-color: #fff;
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
}

.b-vorschau__bild {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--b-r-klein);
  border: 1px solid var(--b-linie);
  background-color: var(--b-fl);
}

.b-vorschau__text { flex: 1 1 240px; min-width: 0; }

/*
 * Das Gerätefoto in der Liste — klein genug, dass zehn Geräte noch auf einen
 * Blick passen, groß genug, um eine Fritteuse von einem Kühlschrank zu
 * unterscheiden. Zum Ansehen führt ein Klick auf das volle Bild.
 */
.b-geraetbild {
  float: left;
  margin: 0 12px 6px 0;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--b-linie);
  background-color: var(--b-fl);
}

.b-geraetbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================================================================
   TAGESUMSAETZE
   ===========================================================================

   Bedient wird das auf einem Telefon, abends nach Marktschluss. Eine Zeile je
   Tag, ein Feld, ein Knopf — nichts zum Aufklappen, nichts, was seitlich
   wegläuft.
   =========================================================================== */

.b-umsatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--b-linie);
}

.b-umsatz:last-child { border-bottom: none; }

/*
 * Offene Tage färben sich links. Wer fünf Tage nachträgt, sieht am Balken,
 * welche noch fehlen — ohne jede Zeile zu lesen.
 */
.b-umsatz.ist-offen { border-left: 3px solid var(--b-warn, #c0453d); padding-left: 10px; }
.b-umsatz.ist-gemeldet { border-left: 3px solid transparent; padding-left: 10px; }

.b-umsatz__tag {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.b-umsatz__wert { font-size: 15px; font-weight: 600; }
.b-umsatz__zu { font-size: 13px; color: var(--b-leise, #6d7d8e); }

.b-umsatz__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
}

.b-umsatz__feld { display: flex; flex-direction: column; gap: 3px; }
.b-umsatz__label { font-size: 12px; color: var(--b-leise, #6d7d8e); }

.b-umsatz__feld input {
  width: 120px;
  padding: 9px 10px;
  /* 16px, damit iOS beim Antippen nicht hineinzoomt. */
  font-size: 16px;
  border: 1px solid var(--b-linie);
  border-radius: 10px;
}

.b-umsatz__zu-form { flex: 1 1 100%; }
.b-umsatz__zu-form summary {
  font-size: 13px;
  color: var(--b-leise, #6d7d8e);
  cursor: pointer;
  padding: 4px 0;
}
.b-umsatz__zu-form .b-umsatz__form { margin-top: 8px; }
.b-umsatz__zu-form .b-umsatz__feld { flex: 1 1 auto; }
.b-umsatz__zu-form .b-umsatz__feld input { width: 100%; }

@media (max-width: 520px) {
  .b-umsatz__form { flex: 1 1 100%; }
  .b-umsatz__feld { flex: 1 1 auto; }
  .b-umsatz__feld input { width: 100%; }
}

.b-feld input[type='file'] {
  padding: 10px 12px;
  font-size: 16px;
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   Produktfoto-Galerie
   -------------------------------------------------------------------------- */

.b-galerie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  /* Kachelbreite wächst mit dem Platz, statt fester Spaltenzahl — auf dem
     Telefon zwei, am Rechner fünf. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.b-galerie__eintrag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-galerie__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--b-r);
  border: 1px solid var(--b-linie);
  background-color: var(--b-fl);
}

/* --------------------------------------------------------------------------
   Hinweise
   -------------------------------------------------------------------------- */

.b-hinweis {
  margin: 0 0 18px 0;
  padding: 13px 16px;
  border-radius: var(--b-r-klein);
  font-size: 16px;
  border: 1px solid transparent;
}

.b-hinweis--gut      { background-color: var(--b-gut-fl);      color: var(--b-gut);      border-color: #9fe3c8; }
.b-hinweis--schlecht { background-color: var(--b-schlecht-fl); color: var(--b-schlecht); border-color: #f6c9c5; }
.b-hinweis--info     { background-color: var(--b-warn-fl);     color: var(--b-warn);     border-color: #cdeaf7; }

/* --------------------------------------------------------------------------
   Anmelde-Seiten (ohne Navigation, zentriert)
   -------------------------------------------------------------------------- */

body.betreiber--tor {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--b-nacht);
}

.b-tor {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.b-tor__saeule {
  width: 100%;
  max-width: 440px;
}

.b-tor__karte {
  width: 100%;
  background-color: var(--b-karte);
  border-radius: var(--b-r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 32px 28px;
}

/* Helle Logo-Fassung — steht auf dem dunklen Seitenhintergrund, nicht auf der Karte. */
.b-tor__marke {
  display: block;
  margin: 0 auto 26px auto;
  height: 110px;
  width: auto;
  max-width: 70%;
  object-fit: contain;
}

.b-tor__kontakt {
  margin: 14px 0 0 0;
  text-align: center;
  font-size: 14px;
  color: rgba(240, 220, 188, 0.75);
}

.b-tor__kontakt a { color: var(--b-gold-hell); }

.b-tor__titel {
  font-family: var(--b-display);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 6px 0;
  color: var(--b-nacht);
}

.b-tor__unter {
  text-align: center;
  margin: 0 0 22px 0;
  font-size: 15px;
  color: var(--b-leise);
}

.b-tor__fuss {
  margin: 20px 0 0 0;
  text-align: center;
  font-size: 15px;
}

.b-tor__fuss a { color: var(--b-gold-tief); }

.b-tor__sprache {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 18px 0 0 0;
}

.b-tor__sprache .b-sprache__wahl { color: var(--b-gold-hell); }

/* --------------------------------------------------------------------------
   Fuss
   -------------------------------------------------------------------------- */

.b-fuss {
  border-top: 1px solid var(--b-linie);
  background-color: #ffffff;
}

.b-fuss__innen {
  max-width: var(--b-breite);
  margin: 0 auto;
  padding: 22px 20px 34px 20px;
  font-size: 15px;
  color: var(--b-leise);
}

.b-fuss a { color: var(--b-gold-tief); }

/* --------------------------------------------------------------------------
   Ab Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .b-titel { font-size: 40px; }
  .b-karte { padding: 26px 28px; }
  .b-knopf--breit { width: auto; }

  /* Beide Leistungswerte nebeneinander — sie gehören zusammen gelesen. */
  .b-messwerte { grid-template-columns: 1fr 1fr; }
  .b-feldpaar { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Passwort sichtbar machen
   --------------------------------------------------------------------------
   Gleiche Klassen wie in der Verwaltung (admin.css), weil derselbe Umschalter
   sie setzt: /js/passwort-auge.js. Dieser Bereich laedt admin.css nicht mit,
   deshalb steht der Block hier noch einmal.
   -------------------------------------------------------------------------- */

.a-pw { position: relative; display: block; }
.a-pw > input { width: 100%; }

.a-pw__auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #6d7d8e;
  cursor: pointer;
}

.a-pw__auge:hover,
.a-pw__auge[aria-pressed='true'] { color: #143f74; }

.a-pw__auge:focus-visible {
  outline: 2px solid #143f74;
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Erklärung „thermisch oder elektrisch?" (15.08.2026)

   Fabi: „ich will das es eine erklärung zu diesem thema in den Betreiber
   portalen gibt, die meisten verstehen es nicht."

   Der Aufklapper steht direkt unter den beiden Feldern. Er soll als
   Hilfsangebot erkennbar sein, ohne das Formular zu dominieren: eine Zeile,
   die nach Frage aussieht — nicht nach einem weiteren Pflichtfeld.
   -------------------------------------------------------------------------- */

.b-klapp--hilfe { margin: 4px 0 18px 0; }

.b-klapp--hilfe > summary {
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: var(--b-fl);
  font-size: 15px;
  font-weight: 600;
  color: var(--b-text);
  /* Finger auf dem Handy: die Zeile muss sicher zu treffen sein. */
  min-height: 44px;
}

.b-klapp--hilfe > summary::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--b-nacht);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}

.b-klapp--hilfe[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.b-klapp--hilfe .b-klapp__inhalt { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Zwischenüberschrift im Erklärtext — kleiner als eine Abschnittsüberschrift. */
.b-klapp__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--b-nacht);
}

.b-klapp--hilfe .b-klapp__inhalt p { margin: 0; line-height: 1.55; }

/* ==========================================================================
   Der Funnel je Hütte (19.08.2026)
   --------------------------------------------------------------------------
   Ein Betreiber kann mehrere Hütten haben. Jede hat ihren eigenen Vertrag,
   ihre eigene Zahlung und ihren eigenen Stand — IN10 kann in Phase 4 sein,
   während IN49 noch auf die Zahlung wartet.

   Keine neue Farbe, keine neue Schrift: alles hier unten benutzt die Token,
   die oben in dieser Datei stehen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Verweise im Inhalt

   🔴 Bugfix 11.5. Die Aufgaben-Links trugen Browser-Standard: unterstrichen,
      blau — und violett, sobald sie einmal besucht waren. Auf einer Seite, auf
      der man dieselben Punkte wochenlang wieder aufruft, sah das nach einem
      halb kaputten Dokument aus.

      Deshalb: EINE Regel für alle Verweise im Inhaltsbereich, mit :visited
      ausdrücklich auf derselben Farbe. Ohne diese Zeile gewinnt der Browser.
   -------------------------------------------------------------------------- */

.b-inhalt a,
.b-verweis {
  color: var(--b-nacht-hell);
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
}

.b-inhalt a:visited,
.b-verweis:visited { color: var(--b-nacht-hell); }

.b-inhalt a:hover,
.b-verweis:hover {
  color: var(--b-nacht);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-inhalt a:focus-visible,
.b-verweis:focus-visible {
  outline: 2px solid var(--b-nacht);
  outline-offset: 2px;
  text-decoration: none;
}

/* Knöpfe sind Knöpfe und bleiben es — die Regel oben darf sie nicht einfärben. */
.b-inhalt a.b-knopf,
.b-inhalt a.b-knopf:visited { color: inherit; text-decoration: none; }
.b-inhalt a.b-knopf:hover { text-decoration: none; }

.b-verweis.ist-aktiv { color: var(--b-gold-tief); }

/* --------------------------------------------------------------------------
   Kopf einer Hüttenseite
   -------------------------------------------------------------------------- */

.b-huettenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: var(--b-karte);
  box-shadow: var(--b-schatten);
}

.b-huettenkopf__wer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.b-huettenkopf__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-leise);
  width: 100%;
}

.b-huettenkopf__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--b-nacht);
  /* Ein langer Anzeigename darf die Zeile nicht über den Rand schieben. */
  overflow-wrap: anywhere;
}

.b-huettenkopf__masse { font-size: 14px; color: var(--b-leise); }

.b-huettenwahl { position: relative; flex: 0 0 auto; }

.b-huettenwahl > summary {
  list-style: none;
  cursor: pointer;
  /* Fingergerecht: 44 px sind das Mindestmass für ein Ziel am Handy. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.b-huettenwahl > summary::-webkit-details-marker { display: none; }

.b-huettenwahl__liste {
  position: absolute;
  right: 0;
  z-index: 20;
  margin: 6px 0 0 0;
  padding: 8px;
  list-style: none;
  min-width: 200px;
  max-width: min(280px, 90vw);
  border: 1px solid var(--b-linie-satt);
  border-radius: var(--b-r-klein);
  background-color: var(--b-karte);
  box-shadow: 0 12px 30px rgba(16, 42, 74, 0.16);
}

.b-huettenwahl__liste li { margin: 0; }

.b-huettenwahl__liste a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  min-height: 44px;
  line-height: 24px;
}

.b-huettenwahl__liste a:hover { background-color: var(--b-fl); text-decoration: none; }

.b-huettenwahl__fehlt {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--b-sehr-leise);
}

/* --------------------------------------------------------------------------
   Bereichsleiste einer Hütte
   -------------------------------------------------------------------------- */

.b-huettennavi {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  /* Bei 375 px passen vier Punkte nicht nebeneinander — dann scrollt die
     LEISTE, nicht die Seite. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.b-huettennavi::-webkit-scrollbar { display: none; }

.b-huettennavi__punkt {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: var(--b-pille);
  background-color: var(--b-karte);
  border: 1px solid var(--b-linie);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.b-huettennavi__punkt:hover { text-decoration: none; background-color: var(--b-fl); }

.b-huettennavi__punkt.ist-aktiv {
  background: var(--b-v-navy);
  color: #fff;
  border-color: transparent;
}

.b-inhalt .b-huettennavi__punkt.ist-aktiv,
.b-inhalt .b-huettennavi__punkt.ist-aktiv:visited { color: #fff; }

/* --------------------------------------------------------------------------
   Hüttenauswahl
   -------------------------------------------------------------------------- */

.b-huettenliste {
  display: grid;
  gap: 14px;
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
}

.b-huettenkachel {
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: var(--b-karte);
  box-shadow: var(--b-schatten);
  overflow: hidden;
}

.b-huettenkachel__verweis {
  display: grid;
  gap: 8px;
  padding: 20px;
  text-decoration: none;
}

.b-huettenkachel__verweis:hover { background-color: var(--b-fl); text-decoration: none; }

.b-huettenkachel__name {
  font-size: 24px;
  font-weight: 700;
  color: var(--b-nacht);
  overflow-wrap: anywhere;
}

.b-huettenkachel__masse { font-size: 14px; color: var(--b-leise); }

.b-huettenkachel__naechstes { font-size: 15px; color: var(--b-text); }

.b-huettenkachel.ist-fehlt { opacity: 0.7; padding: 20px; }
.b-huettenkachel.ist-fehlt .b-huettenkachel__name { color: var(--b-leise); }
.b-huettenkachel__hinweis { margin: 6px 0 0 0; font-size: 14px; color: var(--b-leise); }

.b-fortschritt--klein { font-size: 14px; gap: 8px; }
.b-fortschritt__text { color: var(--b-leise); }

/* --------------------------------------------------------------------------
   Der grosse Fortschrittsbalken

   🔴 Vorher war er ein 8px-Strich in derselben Zeile wie der Text und bei
      0 % gar nicht als Balken zu erkennen — eine hellblaue Linie neben
      „0 von 4 erledigt". Jetzt steht er allein, doppelt so hoch, mit der
      Prozentzahl oben rechts neben der Überschrift.

      Die Füllung bekommt einen Verlauf und einen weichen Übergang: bewegt
      sich der Wert nach einem Upload, sieht man die Bewegung. Ein Sprung
      ohne Animation wird schlicht übersehen.
   -------------------------------------------------------------------------- */

.b-karte--fortschritt { border-left: 4px solid var(--b-nacht-hell); }

.b-fortschritt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.b-abschnitt--eng { margin: 0; }

.b-fortschritt__prozent {
  flex: 0 0 auto;
  font-family: var(--b-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  /* Ebenfalls kein `--b-v-blau`: als Verlaufswert taugt es nicht für `color`. */
  color: var(--b-nacht);
  font-variant-numeric: tabular-nums;
}

.b-fortschritt--gross {
  margin-bottom: 10px;
}

.b-fortschritt--gross .b-fortschritt__balken {
  height: 16px;
  background-color: #dbe8f5;
  /* Ohne Innenschatten verschwimmt eine leere Leiste mit dem Kartenweiss. */
  box-shadow: inset 0 1px 2px rgba(16, 42, 74, 0.12);
}

.b-fortschritt--gross .b-fortschritt__fuellung {
  /*
   * 🔴 Hier stand zuerst `linear-gradient(90deg, var(--b-v-blau), var(--b-gold))`.
   *    `--b-v-blau` ist aber selbst ein VERLAUF (linear-gradient(135deg, …)),
   *    kein Farbwert — ein Verlauf im Verlauf ist ungültig, die ganze
   *    Deklaration fiel weg. Sichtbar blieb nur die Grundfarbe der Basisregel.
   *    Deshalb hier echte Farbwerte, keine Verlaufs-Variable.
   */
  background-image: linear-gradient(90deg, var(--b-nacht-hell), var(--b-gold));
  transition: width 420ms ease;
  min-width: 0;
}

.b-fortschritt--gross + .b-fortschritt__text {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--b-text);
}

@media (prefers-reduced-motion: reduce) {
  .b-fortschritt--gross .b-fortschritt__fuellung { transition: none; }
}

/* Die Statuszeile des sofort gespeicherten Geraetefotos (21.08.2026). */
.b-geraetfoto__stand {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--b-leise);
}

.b-geraetfoto__stand.ist-gut { color: var(--b-gut); }
.b-geraetfoto__stand.ist-schlecht { color: var(--b-schlecht); }

/* --------------------------------------------------------------------------
   Kategorien der Produktfotos (21.08.2026)

   🔴 Fabi: „Ich muss Kategorie bearbeiten können oder löschen können."

      Jede Kategorie steht als eigener Punkt mit ihrem Namen, der Zahl ihrer
      Fotos und zwei Formularen: umbenennen und entfernen.

   🔴 `.b-formular` ist ein Grid — darin streckt sich ein Knopf über die volle
      Spaltenbreite. Bei einer 1167 px breiten Karte wurde aus „Umbenennen" ein
      1133 px langer Balken, der wie eine Trennlinie aussah und nicht wie ein
      Knopf. Deshalb hier ausdrücklich auf die natürliche Breite zurück.
   -------------------------------------------------------------------------- */

.b-kategorie__formular {
  gap: 8px;
  margin-top: 10px;
  /* Feld und Knopf nebeneinander, sobald Platz ist. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.b-kategorie__formular button {
  justify-self: start;
}

/* Der Entfernen-Knopf steht allein, ohne Feld daneben. */
.b-kategorie__weg {
  margin-top: 8px;
}

.b-kategorie__weg button {
  justify-self: start;
}

@media (max-width: 560px) {
  /* Untereinander: nebeneinander wird das Feld sonst unbrauchbar schmal. */
  .b-kategorie__formular { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Die Unterlagenseite (21.08.2026)

   🔴 Fabi: „warum nutzen wir 2 verschiedene designs? wir nutzen überall im
      backend das helle design."

      `/documentacion/<zugang>` liegt im öffentlichen Bereich, weil der
      Token-Link aus der E-Mail ohne Anmeldung funktionieren muss — und trug
      deshalb bis hierher das Nachtblau-Gold der Einladungsseite. Nur wird dort
      gearbeitet: Formulare ausgefüllt, unterschrieben, Dateien hochgeladen.

      Diese vier Regeln sind alles, was die Seite über das Portal-Stylesheet
      hinaus braucht. Sie standen vorher in `site.css` und hätten mit dem
      Wechsel ersatzlos gefehlt — die Seite wäre an genau diesen Stellen
      unformatiert gewesen.
   -------------------------------------------------------------------------- */

/* Ein Fehler DIREKT am Feld — nicht als Meldung oben, wo er die Zuordnung
   verliert. */
.b-feld__fehler {
  margin: 6px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--b-schlecht);
}

/*
 * 🔴 Dieselbe Regel noch einmal, spezifischer (07.09.2026).
 *
 * Steht die Meldung als <span> direkt im <label class="b-feld">, gewinnt
 * `.b-feld > span` (eine Klasse UND ein Element = spezifischer als eine
 * Klasse allein) — die Fehlermeldung war dadurch grau und sah aus wie ein
 * Hinweis. Gemessen im Firmendaten-Formular: color rgb(109,125,142) statt
 * der Signalfarbe.
 *
 * Ein <p> statt <span> wäre die Alternative gewesen, aber <p> ist in einem
 * <label> nicht erlaubt.
 */
.b-feld > span.b-feld__fehler {
  font-weight: 600;
  color: var(--b-schlecht);
}

/* Der Hinweis unter einem Feld bleibt leise — auch als <span>. */
.b-feld > span.b-feld__hinweis {
  font-weight: 400;
  color: var(--b-sehr-leise);
}

/* Ankreuzfeld und Beschriftung auf einer Linie (Fabi, 18.08.2026). */
.b-feld__reihe {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  cursor: pointer;
}

.b-feld__reihe input[type='checkbox'] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0 0;
}

/* Links der Dokumentart — oft der eigentliche Grund der Mail
   („Hygienekurs: hier in 20 Minuten erledigt"). */
.b-infoliste {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.b-infoliste__punkt + .b-infoliste__punkt { margin-top: 14px; }

.b-infoliste__link {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--b-nacht-hell);
  text-decoration: underline;
}

/* Die volle Adresse darunter — damit der Link auch auf Papier lesbar ist. */
.b-infoliste__adresse {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--b-leise);
  word-break: break-all;
}

.b-infobilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.b-infobilder img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--b-r-klein);
  border: 1px solid var(--b-linie);
}

/* --------------------------------------------------------------------------
   Zahlwege: Karte oder Ueberweisung (07.09.2026)

   Zwei Knoepfe nebeneinander, auf dem Handy untereinander. Der gewaehlte Weg
   traegt `b-knopf--haupt` und ist damit gefuellt — mehr Auszeichnung braucht
   es nicht, die Wahl ist jederzeit umkehrbar.
   -------------------------------------------------------------------------- */

.b-zahlwege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px 0;
}

.b-zahlwege__wahl {
  margin: 0;
  flex: 1 1 200px;
}

.b-zahlwege__wahl .b-knopf {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Die Phasenkarten

   🔴 Alle Phasen sind immer sichtbar, untereinander, nummeriert — und seit
      dem 21.08.2026 alle gleichzeitig bearbeitbar. Die EINE empfohlene Karte
      ist optisch dominant, die übrigen treten zurück, ohne auszugrauen: sie
      sind kein Ausblick mehr, sondern Arbeit, die sofort möglich ist.
   -------------------------------------------------------------------------- */

.b-phasen {
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.b-phase {
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: var(--b-karte);
  box-shadow: var(--b-schatten);
  overflow: hidden;
}

.b-phase > details { margin: 0; }

.b-phase__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}

.b-phase__kopf::-webkit-details-marker { display: none; }

.b-phase__nummer {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--b-fl);
  border: 1px solid var(--b-linie-satt);
  font-size: 15px;
  font-weight: 700;
  color: var(--b-leise);
}

.b-phase__titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--b-text);
  overflow-wrap: anywhere;
}

.b-phase__inhalt {
  padding: 16px 18px 18px 18px;
  border-top: 1px solid var(--b-linie);
}

.b-phase__sperre { margin: 0; font-size: 15px; color: var(--b-leise); }

/* --------------------------------------------------------------------------
   Der Teilbalken EINER Karte

   🔴 Seit die Schritte nebeneinander laufen, sind mehrere Karten gleichzeitig
      „offen". Ohne diesen Balken sähe eine Karte mit sechs von sieben
      Unterlagen genauso aus wie eine, in der noch nichts liegt.

      Er sitzt direkt unter der Kopfzeile und über dem Inhalt — als
      Fortsetzung der Kopfzeile, nicht als weiteres Element im Fliesstext.
   -------------------------------------------------------------------------- */

.b-phase__zaehler {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--b-leise);
  font-variant-numeric: tabular-nums;
}

.b-phase__mini {
  display: block;
  height: 9px;
  margin: 2px 18px 12px 18px;
  /*
   * 🔴 Der Track war zuerst #e4eef8 bei 6px Höhe — auf dem Kartenweiss eine
   *    Linie, die man erst sah, wenn man sie suchte. Der Screenshot vom
   *    21.08.2026 hat das gezeigt: der Zähler „3/7" stand da, der Balken
   *    darunter war praktisch unsichtbar. Dunklerer Track, mehr Höhe,
   *    Innenschatten.
   */
  background-color: #cddef1;
  box-shadow: inset 0 1px 2px rgba(16, 42, 74, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.b-phase__mini-fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: var(--b-nacht-hell);
  transition: width 420ms ease;
}

.b-phase.ist-erledigt .b-phase__mini-fuellung { background-color: var(--b-gut); }
.b-phase.ist-abgelehnt .b-phase__mini-fuellung { background-color: var(--b-schlecht); }
.b-phase.ist-eingereicht .b-phase__mini-fuellung { background-color: var(--b-warn); }

@media (prefers-reduced-motion: reduce) {
  .b-phase__mini-fuellung { transition: none; }
}

/* Die aktive Karte — dominant, aber nicht schreiend. */
.b-phase.ist-aktiv {
  border-color: var(--b-nacht-hell);
  box-shadow: 0 0 0 2px rgba(29, 95, 165, 0.16), 0 10px 28px rgba(16, 42, 74, 0.10);
}

.b-phase.ist-aktiv .b-phase__nummer {
  background: var(--b-v-blau);
  border-color: transparent;
  color: #fff;
}

.b-phase.ist-erledigt { background-color: var(--b-gut-fl); border-color: #9fe3c8; }
.b-phase.ist-erledigt .b-phase__nummer { background-color: var(--b-gut); border-color: transparent; color: #fff; }
.b-phase.ist-erledigt .b-phase__titel { color: var(--b-gut); }

/*
 * 🔴 `ist-gesperrt` greift seit 21.08.2026 nicht mehr: die Statusmaschine
 *    vergibt den Status nicht mehr, und die Migration in lib/portal/db.js hat
 *    die Altzeilen aufgemacht. Die Regeln bleiben als Rückfall stehen, falls
 *    eine Datenbank ohne Migration gelesen wird — dann sieht die Karte grau
 *    aus, statt unformatiert zu wirken.
 */
.b-phase.ist-gesperrt { opacity: 0.66; }

.b-phase.ist-abgelehnt { border-color: #f6c9c5; }
.b-phase.ist-abgelehnt .b-phase__nummer { background-color: var(--b-schlecht); border-color: transparent; color: #fff; }

.b-phase.ist-eingereicht .b-phase__nummer { background-color: var(--b-warn); border-color: transparent; color: #fff; }

/* Der Kommentar der Verwaltung — der Grund, warum eine Karte offen ist. */
.b-kommentar {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--b-linie-satt);
  border-radius: 0 var(--b-r-klein) var(--b-r-klein) 0;
  background-color: var(--b-fl);
  font-size: 15px;
  line-height: 1.55;
}

.b-kommentar--warn { border-left-color: var(--b-warn); background-color: var(--b-warn-fl); }

.b-fliess--leise { color: var(--b-leise); font-size: 15px; }

.b-tabelle--summe { margin: 8px 0 16px 0; }

/* --------------------------------------------------------------------------
   Zusatzleistungen
   -------------------------------------------------------------------------- */

.b-artikelliste {
  display: grid;
  gap: 14px;
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
}

.b-artikel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r);
  background-color: var(--b-karte);
  box-shadow: var(--b-schatten);
}

.b-artikel__text { flex: 1 1 240px; min-width: 0; }
.b-artikel__kauf { flex: 0 1 220px; min-width: 0; }

.b-artikel__name {
  margin: 0 0 6px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--b-nacht);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.b-artikel__beschreibung { margin: 0 0 8px 0; font-size: 15px; line-height: 1.55; }
.b-artikel__verfuegbar { margin: 0; font-size: 14px; color: var(--b-leise); }
.b-artikel__preis { margin: 0 0 10px 0; font-size: 20px; }
.b-artikel__ust { display: block; font-size: 13px; font-weight: 400; color: var(--b-leise); }
.b-artikel__hinweis { margin: 8px 0 0 0; font-size: 13px; color: var(--b-leise); }

.b-artikel__form { display: grid; gap: 10px; }

.b-feld--menge input { max-width: 110px; }

/*
 * 🔴 Ausverkauft: ausgegraut, aber SICHTBAR. Den Artikel auszublenden wäre die
 *    naheliegende und falsche Lösung — der Betreiber, der ihn gestern noch
 *    gesehen hat, hielte die Seite für kaputt.
 */
.b-artikel.ist-ausverkauft { opacity: 0.6; background-color: var(--b-fl); }
.b-artikel.ist-ausverkauft .b-artikel__preis { color: var(--b-leise); }

/* --------------------------------------------------------------------------
   Umsatzliste und Protokoll
   -------------------------------------------------------------------------- */

.b-umsatzliste { margin: 12px 0 0 0; padding: 0; list-style: none; }

.b-feld--betrag input { max-width: 160px; }
.b-feld--zu { flex-direction: row; align-items: center; gap: 8px; }
.b-feld--grund input { max-width: 220px; }

.b-protokoll { margin: 0; padding: 0; list-style: none; font-size: 14px; }

.b-protokoll__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--b-linie);
}

.b-protokoll__zeile:last-child { border-bottom: 0; }
.b-protokoll__zeit { color: var(--b-sehr-leise); font-variant-numeric: tabular-nums; }
.b-protokoll__was { font-weight: 600; }
.b-protokoll__wert { color: var(--b-leise); }
.b-protokoll__wer { margin-left: auto; color: var(--b-sehr-leise); }

/* --------------------------------------------------------------------------
   Dateiauswahl in der Nachforderungskarte

   Eigener Knopf statt des Systemknopfes: dessen Beschriftung kommt vom
   BROWSER und steht auf der spanischen Oberfläche trotzdem auf Deutsch.
   Gleiche Begründung wie in css/datei-knopf.css.
   -------------------------------------------------------------------------- */

.b-datei { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.b-datei input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.b-datei__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--b-linie-satt);
  border-radius: var(--b-pille);
  background-color: var(--b-karte);
  font-weight: 600;
  cursor: pointer;
}

.b-datei input[type='file']:focus-visible + .b-datei__knopf {
  outline: 2px solid var(--b-nacht);
  outline-offset: 2px;
}

.b-datei__name { font-size: 14px; color: var(--b-leise); overflow-wrap: anywhere; }

.b-formular--eng { gap: 10px; }

/* Nur für Vorleseprogramme — sichtbar ist das Feld über seinen Platzhalter. */
.b-nur-lesegeraet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   375 px — kein waagerechtes Scrollen

   🔴 Bugfix 11.6. Geprüft für Hüttenauswahl, Phasenkarten, Rechnungstabelle
      und Add-on-Shop. Die Regel dahinter: die SEITE scrollt nie zur Seite;
      breite Inhalte (Tabellen, die Bereichsleiste) scrollen in ihrem eigenen
      Rahmen.
   -------------------------------------------------------------------------- */

body.betreiber { overflow-x: hidden; }

.b-inhalt { max-width: 100%; }

.b-tabelle__huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 480px) {
  .b-huettenkopf { padding: 12px 14px; }
  .b-huettenkopf__name { font-size: 19px; }

  .b-phase__kopf { padding: 14px; gap: 10px; }
  .b-phase__titel { font-size: 16px; }
  .b-phase__inhalt { padding: 14px; }

  .b-artikel { padding: 16px; }
  .b-artikel__kauf { flex: 1 1 100%; }

  /* Das Umsatzformular bricht auf dem Handy in Zeilen um, statt zu quetschen. */
  .b-umsatz__form { flex-wrap: wrap; }
  .b-feld--betrag input,
  .b-feld--grund input { max-width: 100%; width: 100%; }
}

@media (min-width: 640px) {
  .b-huettenliste { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ===========================================================================
 * UMSATZKALENDER (08.09.2026, Vorgabe Fabi mit Bildvorlage)
 *
 * „Grosser Kalender, grosse Zahlen." Der Monat steht als Ueberschrift in
 * Versalien, das Jahr blass daneben; die Tage sind Kreise, der heutige traegt
 * einen kraeftigen Ring. Tage ausserhalb des Marktes stehen grau und ohne
 * Kreis da — sie sind sichtbar, aber offensichtlich nicht gemeint.
 *
 * Die Kreise sind bewusst gross (Vorlage: gut 60 px): Gearbeitet wird mit dem
 * Telefon in der Hand, oft mit Handschuhen. Ein 44-px-Ziel waere die untere
 * Grenze des Zumutbaren, kein Entwurf.
 * ======================================================================== */

.b-kal { padding: 22px 18px 16px; }

@media (max-width: 420px) {
  /* Weniger Rand heisst groessere Kreise — gearbeitet wird mit dem Daumen. */
  .b-kal { padding: 18px 12px 14px; }
  .b-kal__wochentage,
  .b-kal__gitter { gap: 6px; }
}

.b-kal__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.b-kal__kopf > div:first-child { flex: 0 0 auto; }

.b-kal__monat {
  margin: 0;
  /* Monat und Jahr gehoeren in EINE Zeile — sonst rutscht der Punkt darunter. */
  white-space: nowrap;
  font-size: clamp(21px, 6.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--b-text);
  line-height: 1.1;
}

/* Das Jahr tritt zurueck — der Monat traegt die Orientierung. */
.b-kal__jahr { color: var(--b-sehr-leise); font-weight: 500; }

/* Der kleine Punkt unter dem Monatsnamen aus der Vorlage. */
.b-kal__punkt {
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--b-gold);
}

.b-kal__blaettern { display: flex; gap: 6px; }

.b-kal__pfeil {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--b-sehr-leise);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.b-kal__pfeil:hover:not(:disabled) { background: var(--b-fl); color: var(--b-nacht); }
.b-kal__pfeil:disabled { opacity: 0.3; cursor: default; }

.b-kal__wochentage,
.b-kal__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  justify-items: center;
}

/*
 * 🔴 Die Deckelung ist keine Kosmetik. Ohne sie wuchsen die Kreise auf dem
 *    Rechner auf 163 px — sieben Spalten mal 1fr in einer 900 px breiten
 *    Karte, dazu `aspect-ratio: 1`. Der November war dann 800 px hoch und
 *    passte auf keinen Bildschirm. Auf dem Telefon greift die Deckelung
 *    nicht: dort ist die Spalte ohnehin schmaler.
 */
.b-kal__tag,
.b-kal__aus,
.b-kal__leer {
  width: 100%;
  max-width: 62px;
}

.b-kal__wochentage {
  margin-bottom: 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-sehr-leise);
}

/*
 * Der Tageskreis. `aspect-ratio` statt fester Hoehe: die Kreise wachsen mit
 * der Spaltenbreite mit und bleiben auf jedem Geraet rund.
 */
.b-kal__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 1.5px solid var(--b-gold-hell);
  border-radius: 50%;
  background: var(--b-karte);
  color: var(--b-text);
  font-family: inherit;
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.b-kal__tag:hover:not(:disabled) { border-color: var(--b-gold); transform: scale(1.05); }

/* Heute: der kraeftige Ring aus der Vorlage. */
.b-kal__tag.ist-heute { border-width: 3px; border-color: var(--b-gold); }

/* Gemeldet: gefuellt — auf einen Blick zu sehen, was schon erledigt ist. */
.b-kal__tag.ist-gemeldet {
  background: var(--b-gold);
  border-color: var(--b-gold);
  color: #ffffff;
}

/* Geschlossen: ruhiges Grau, kein Alarm — es ist eine gueltige Meldung. */
.b-kal__tag.ist-zu {
  background: var(--b-buehne);
  border-color: var(--b-linie-satt);
  color: var(--b-leise);
}

/*
 * Noch nicht dran: blass und unantastbar. Der Kreis bleibt sichtbar, damit
 * der Monat sein Muster behaelt — nur eben ohne Aufforderung.
 */
.b-kal__tag.ist-spaeter,
.b-kal__tag:disabled {
  border-color: var(--b-linie);
  color: var(--b-sehr-leise);
  cursor: default;
}

/* Tage ausserhalb des Marktes: nackte Zahl, kein Kreis (wie in der Vorlage). */
.b-kal__aus {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: clamp(15px, 4.2vw, 20px);
  color: var(--b-sehr-leise);
  opacity: 0.55;
}

.b-kal__leer { aspect-ratio: 1; }

.b-kal__legende {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--b-leise);
}

.b-kal__marke {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.b-kal__marke--gemeldet { background: var(--b-gold); }
.b-kal__marke--zu { background: var(--b-buehne); border: 1px solid var(--b-linie-satt); }
.b-kal__marke:not(:first-child) { margin-left: 10px; }

/* ---------------------------------------------------------------------------
 * DAS SHEET — faehrt von unten herein.
 *
 * <dialog> bringt Fokusfang, Escape und den dunklen Grund selbst mit; hier
 * steht nur, wie es aussieht und wie es hereinfaehrt.
 * ------------------------------------------------------------------------ */

.b-sheet {
  width: 100%;
  max-width: 520px;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--b-karte);
  color: var(--b-text);
}

.b-sheet::backdrop { background: rgba(10, 22, 38, 0.45); }

.b-sheet[open] { animation: b-sheet-herein 0.22s ease-out; }

@keyframes b-sheet-herein {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Wer keine Bewegung will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .b-sheet[open] { animation: none; }
  .b-kal__tag { transition: none; }
}

.b-sheet__inhalt { padding: 10px 20px 26px; }

/* Der Griff oben: sagt ohne Worte, dass sich das Blatt schliessen laesst. */
.b-sheet__griff {
  width: 42px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--b-linie-satt);
}

.b-sheet__titel {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
  text-transform: capitalize;
}

.b-sheet__feld { display: block; margin-bottom: 16px; }

.b-sheet__marke {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--b-leise);
}

.b-sheet__betrag { position: relative; }

/*
 * Die grosse Zahl (Fabi: „grosse Zahlen"). Wer abends abrechnet, tippt eine
 * Summe und will sie lesen koennen, ohne das Telefon nah ans Gesicht zu
 * halten.
 */
.b-sheet__betrag input {
  width: 100%;
  padding: 14px 44px 14px 16px;
  border: 1.5px solid var(--b-linie-satt);
  border-radius: 14px;
  background: var(--b-karte);
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  color: var(--b-text);
  text-align: right;
}

.b-sheet__betrag input:focus {
  outline: none;
  border-color: var(--b-gold);
}

.b-sheet__betrag input:disabled { background: var(--b-fl); color: var(--b-sehr-leise); }

.b-sheet__waehrung {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 600;
  color: var(--b-sehr-leise);
  pointer-events: none;
}

.b-sheet__zu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  cursor: pointer;
}

.b-sheet__zu input { width: 22px; height: 22px; accent-color: var(--b-gold); }

.b-sheet__fehler {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--b-schlecht-fl);
  color: var(--b-schlecht);
  font-size: 13.5px;
}

.b-sheet__knoepfe { display: flex; flex-direction: column; gap: 10px; }
.b-sheet__knoepfe .b-knopf { width: 100%; padding: 14px; font-size: 16px; }

@media (min-width: 560px) {
  .b-sheet { border-radius: 22px; margin: auto; }
  .b-sheet__knoepfe { flex-direction: row-reverse; }
  .b-sheet__knoepfe .b-knopf { width: auto; flex: 1; }
}

/* ===========================================================================
 * DIE WOCHEN (08.09.2026, Fabi: „Dann gibt es noch immer von Montag bis
 * Sonntag den gesamten Umsatz anzuzeigen. Und aus dem werden wir dann unsere
 * Provision berechnen.")
 *
 * Eine Zeile je Woche: links der Zeitraum und der Stand, rechts die Zahlen.
 * Die Summe ist die groesste Zahl der Karte — sie ist das, weswegen der
 * Betreiber ueberhaupt hierher kommt.
 * ======================================================================== */

.b-wochen { padding: 20px 18px; }

.b-wochen__titel {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--b-text);
}

.b-wochen__liste {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.b-wochen__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--b-linie);
}

.b-wochen__zeile:first-child { border-top: 0; }

/* Eine vollstaendig gemeldete Woche traegt links eine ruhige Markierung. */
.b-wochen__zeile.ist-voll { border-left: 3px solid var(--b-gold); padding-left: 11px; }

.b-wochen__raum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.b-wochen__tage {
  font-size: 15px;
  font-weight: 600;
  color: var(--b-text);
  white-space: nowrap;
}

.b-wochen__stand { font-size: 12.5px; color: var(--b-sehr-leise); }

.b-wochen__zahlen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.b-wochen__summe {
  font-size: 21px;
  font-weight: 700;
  color: var(--b-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Die Provision steht kleiner darunter — sie ist eine Folge des Umsatzes,
 * nicht die Hauptzahl. Bei Huetten ohne Kommission (Artesanos) fehlt diese
 * Zeile ganz; das entscheidet die Ansicht, nicht das Stylesheet.
 */
.b-wochen__provision {
  font-size: 12.5px;
  color: var(--b-leise);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.b-wochen__provision b { font-weight: 700; color: var(--b-nacht); }

.b-umsatz__fussnote { margin: 14px 2px 0; }

/* --------------------------------------------------------------------------
   Vorbereitung ohne zugeteilte Hütte (09.09.2026)

   Die Liste dessen, was ohne Hütte schon möglich ist. Bewusst KEINE Kacheln
   wie bei den Hütten: dort wählt man eine von mehreren, hier arbeitet man
   alle vier ab. Eine Liste liest sich als Reihenfolge, ein Kachelraster als
   Auswahl — und eine Auswahl war genau das Missverständnis, das diese Seite
   vorher erzeugt hat.
   -------------------------------------------------------------------------- */

.b-vorbereitung {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.b-vorbereitung__punkt {
  border: 1px solid var(--b-linie);
  border-radius: var(--b-r-klein);
  background-color: var(--b-fl);
  padding: 14px 16px;
}

.b-vorbereitung__verweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  /* 🔴 Trefferflaeche fuers Handy: der Titel allein mass 27 px, gefordert
     sind 44. Gemessen am 09.09.2026 bei 375 px Breite. */
  min-height: 44px;
  padding: 2px 0;
}

.b-vorbereitung__verweis:hover .b-vorbereitung__name { text-decoration: underline; }

.b-vorbereitung__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--b-nacht-hell);
}

.b-vorbereitung__text {
  margin: 6px 0 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--b-leise);
}

/* --------------------------------------------------------------------------
   Fotovorschau auf der Hüttenseite (14.09.2026) — klein, mit Namen
   -------------------------------------------------------------------------- */

.b-galerie--mini {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 6px 0 16px;
}

.b-galerie__name {
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Ohne Namen zählt das Foto nicht — das soll man sehen. */
.b-galerie__name--fehlt {
  color: var(--b-warn);
  font-style: italic;
}