/* ==========================================================================
   Nadal a Palma — Verwaltung
   Funktionales Dashboard (Stripe/Linear-Orientierung), Desktop-optimiert,
   mit den Marken-Farben der oeffentlichen Seite als Akzent.
   ========================================================================== */

:root {
  /* ==========================================================================
     Farbwelt der Verwaltung — abgeleitet aus der Dashboard-Vorlage
     (Navy-Verlauf, Himmelblau, Türkis, Mint auf neutralgrauem Grund).

     Die Marken-Namen der ersten Fassung (--tanne, --gold) bleiben als Alias
     bestehen: sie stehen in mehreren tausend Zeilen dieser Datei und in vier
     weiteren Stylesheets. Sie zeigen jetzt auf die neuen Werte, damit eine
     Änderung an EINER Stelle überall durchschlägt — statt in 500 Regeln
     einzeln nachgezogen werden zu müssen.
     ========================================================================== */

  /* --- Grundflächen ------------------------------------------------------ */
  --buehne:     #e7e8ec;   /* Seitengrund, neutralgrau — die Schale hebt sich davon ab */
  --karte:      #ffffff;
  --fl:         #f2f7fc;   /* zarte Füllfläche, leicht blaustichig */
  --fl-satt:    #e4eef8;
  --linie:      #e7eef5;
  --linie-satt: #d2dfeb;

  /* --- Blau: die Leitfarbe ----------------------------------------------- */
  --navy:       #143f74;
  --navy-tief:  #0d2c52;
  --navy-hell:  #1d5fa5;
  --blau:       #1e7bc4;
  --blau-hell:  #35a4dd;
  --blau-fl:    #e9f3fb;

  /* --- Türkis und Mint: die Datenfarben ---------------------------------- */
  --cyan:       #2ec2d7;
  --cyan-fl:    #e2f6f9;
  --mint:       #2fcaa0;
  --mint-hell:  #7edcb4;
  --gruen-hell: #b6e6ae;

  /* --- Verläufe ----------------------------------------------------------
     Die Vorlage arbeitet fast ausschließlich mit diagonalen Verläufen:
     Navy für die betonte Kennzahl, Himmelblau für Knöpfe, Blau→Türkis→Mint
     für alles, was Daten zeigt (Balken, Bögen, Fortschritt). */
  --v-navy:   linear-gradient(135deg, #16457c 0%, #1e63aa 100%);
  --v-blau:   linear-gradient(135deg, #1c79c2 0%, #33a2da 100%);
  --v-daten:  linear-gradient(90deg, #1e7bc4 0%, #2ec2d7 52%, #3ccfae 100%);
  --v-mint:   linear-gradient(135deg, #2fcaa0 0%, #7edcb4 100%);
  --v-schale: linear-gradient(168deg, #ffffff 0%, #f5f9fd 40%, #e6f0fa 100%);

  /* Diagonale Schraffur — in der Vorlage liegt sie über Fortschrittsbalken
     und über dem hervorgehobenen Balken des Wochendiagramms. */
  --v-schraffur: repeating-linear-gradient(115deg,
                   rgba(255,255,255,0.20) 0 6px,
                   rgba(255,255,255,0)    6px 13px);

  /* --- Alias auf die alten Marken-Namen ---------------------------------- */
  --tanne:      var(--navy);
  --tanne-tief: var(--navy-tief);
  --tanne-hell: var(--navy-hell);
  --gold:       var(--cyan);
  --gold-hell:  var(--mint-hell);

  /* --- Schrift ------------------------------------------------------------ */
  --text:       #0f1620;
  --leise:      #6d7d8e;
  --sehr-leise: #97a5b4;

  /* --- Zustände ----------------------------------------------------------- */
  --gut:        #17a67b;
  --gut-fl:     #ddf5ea;
  --schlecht:   #e0574f;
  --schlecht-fl:#fde9e7;
  --warn:       #c08415;
  --warn-fl:    #fdf3de;
  --info:       #1e7bc4;
  --info-fl:    #e9f3fb;

  /* --- Schriftfamilien ----------------------------------------------------
     Die Vorlage ist durchgehend in einer geometrischen Grotesk gesetzt —
     keine Serifen, runde Formen, große Gewichtssprünge. Jost liegt bereits
     lokal im Projekt (300–700) und trifft diese Anmutung; Georgia als
     Titelschrift ist damit hinfällig. --serif bleibt als Name bestehen,
     zeigt aber auf dieselbe Grotesk, damit alle Titelregeln greifen. */
  --sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif:   var(--sans);
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Form -------------------------------------------------------------- */
  --r:        16px;   /* Karten */
  --r-klein:  12px;   /* Innenflächen, Dialoge, Blätter */
  --r-fein:   10px;   /* Eingabefelder, kleine Kästen */
  --pille:   999px;   /* Knöpfe, Plaketten, Reiter — die Vorlage rundet sie voll */

  --schatten:      0 1px 2px rgba(16, 42, 74, 0.04), 0 10px 28px rgba(16, 42, 74, 0.06);
  /*
   * Zwei Lagen, nicht eine: die weite Lage traegt die Tiefe, die enge eine
   * Kante rundherum. Mit nur `0 20px 48px` sass der Schatten 20 Punkte TIEFER
   * als das Element — nach oben warf es gar keinen, und die Oberkante eines
   * Klappfelds stand hart an der Leiste, als waere sie abgeschnitten.
   */
  --schatten-hoch: 0 18px 44px rgba(16, 42, 74, 0.15), 0 2px 10px rgba(16, 42, 74, 0.10);
  --schatten-navy: 0 12px 26px rgba(20, 63, 116, 0.28);
}

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

/* -------------------------------------------------------------------------
   Das hidden-Attribut muss immer gewinnen (13.08.2026)

   Gemeldet: der Ladekreisel am Knopf "Plan hochladen und Hütten erkennen"
   drehte sich dauerhaft, ohne dass jemand geklickt hatte.

   Ursache: das Markup setzt `<span class="a-laden" hidden>`, aber
   `.a-laden { display: inline-block }` ist eine Autor-Regel und schlägt das
   `display: none`, das der Browser dem hidden-Attribut mitgibt. Das Attribut
   war damit wirkungslos — der Kreisel liess sich gar nicht verstecken.

   Vorher wurde dieser Kampf fünfmal einzeln geführt (.a-lightbox[hidden],
   .a-plan__panel[hidden], drei Panel-Zeilen …) und beim Kreisel vergessen.
   Diese eine Regel erledigt die ganze Fehlerklasse. `!important` ist hier
   nicht Not, sondern die Empfehlung der HTML-Spezifikation für
   Autor-Stylesheets; alle bisherigen Einzelregeln setzen ohnehin
   `display: none` und werden dadurch nur überflüssig, nicht gebrochen.
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }

body.admin {
  margin: 0;
  background-color: var(--buehne);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Buehne und Schale
   --------------------------------------------------------------------------
   Die Vorlage setzt die gesamte Anwendung als EIN grosses, abgerundetes Feld
   auf einen neutralgrauen Grund. Genau das sind diese beiden Elemente: die
   Buehne ist der Grund, die Schale das Feld. Alles Weitere liegt darin.

   Warum das mehr ist als Zierrat: die Verwaltung lief bis dahin von Fensterrand
   zu Fensterrand. Auf einem breiten Schirm hiess das 2500 Punkte Zeilenlaenge
   und kein Ort, an dem der Blick anhaelt. Die Schale begrenzt die Flaeche und
   gibt ihr eine Kante.
   -------------------------------------------------------------------------- */

.a-buehne {
  min-height: 100vh;
  padding: 20px;
  background-color: var(--buehne);

  /*
   * Seit dem 17.08.2026 wieder zweispaltig: links die Leiste, rechts die
   * Schale. Fabi: „wir müssen wieder zum side panel menü zurück, es sind zu
   * viele menüpunkte geworden." Elf Bereiche passen waagerecht nicht
   * nebeneinander — senkrecht schon, und ohne Klappfeld „Mehr".
   */
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 1860px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Seitenleiste
   --------------------------------------------------------------------------
   Sie bleibt stehen, waehrend der Inhalt scrollt, und hat ihren eigenen
   Bildlauf: bei elf Bereichen mit offenen Unterpunkten reicht ein 900er
   Schirm sonst nicht bis zum letzten Eintrag.
   -------------------------------------------------------------------------- */

.a-leiste {
  flex: 0 0 262px;
  width: 262px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px;

  border-radius: 24px;
  background: var(--v-schale);
  box-shadow: 0 1px 2px rgba(16, 42, 74, 0.05), 0 24px 60px rgba(16, 42, 74, 0.10);
}

/* Die Marke steht oben in der Leiste, nicht mehr in der Kopfzeile. */
.a-leiste .a-marke { padding: 4px 6px; }

/*
 * In der Leiste steht nur der Name des Punktes.
 *
 * Die Erklaerungszeile („Bestand, Belegung und Umsatz je Hütte") war im
 * waagerechten Klappfeld hilfreich — dort hatte sie 330 Punkte Breite und
 * erschien nur beim Aufklappen. Senkrecht macht sie aus jedem Eintrag drei
 * Zeilen: mit zwoelf Bereichen reicht kein Bildschirm mehr. Sie bleibt als
 * `title` am Element und damit im Tooltip.
 */
.a-leiste .a-nav__eintrag-text { display: none; }
.a-leiste .a-nav__eintrag { padding: 8px 12px; }

.a-schale {
  flex: 1 1 auto;
  /* Ohne das quillt eine breite Tabelle die Spalte auf, statt in ihrem
     eigenen Bildlauf zu bleiben. */
  min-width: 0;
  margin: 0;
  min-height: calc(100vh - 40px);
  border-radius: 28px;
  background: var(--v-schale);
  box-shadow: 0 1px 2px rgba(16, 42, 74, 0.05), 0 24px 60px rgba(16, 42, 74, 0.10);
  /* `clip` und nicht `hidden`: es schneidet die Ecken genauso ab, macht die
     Schale aber NICHT zum Scrollbereich — sonst waere jedes `position: sticky`
     darin (Tabellenkoepfe, klebrige Karten) wirkungslos. */
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Kopf
   --------------------------------------------------------------------------
   Die Navigation stand bis 15.08.2026 als senkrechte Leiste links. Sie ist
   zurueck in die Kopfzeile gewandert — als Reihe von Pillen, wie in der
   Vorlage. Was die senkrechte Leiste damals noetig machte (zehn Gruppen
   brachen in zwei Zeilen um), loesen hier zwei Dinge: die Gruppen tragen nur
   noch ihren Namen und oeffnen ihre Punkte in einem Klappfeld, und der
   Bereich, in dem man steht, zeigt seine Punkte in der zweiten Zeile.
   -------------------------------------------------------------------------- */

.a-kopf { padding: 18px 26px 0; }

.a-kopf__innen {
  display: flex;
  align-items: center;
  gap: 16px;

  /*
   * Seit die Navigation links steht, ist hier nur noch der Kontoblock. Er
   * rueckt nach rechts, statt einsam links zu kleben.
   */
  justify-content: flex-end;
}

.a-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.a-marke__zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background-color: var(--karte);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.10);
}

.a-marke__text { display: flex; flex-direction: column; line-height: 1.15; }

.a-marke__name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.a-marke__rolle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sehr-leise);
}

/* --- Hauptnavigation: senkrechte Liste in der Leiste -------------------- */

.a-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

/*
 * Ueberschrift eines Abschnitts (Verwaltung, Marktbetrieb, Marketing).
 *
 * Warum (19.08.2026, Fabi): dreizehn Punkte untereinander lasen sich als eine
 * einzige lange Liste. Die Ueberschriften geben ihr drei Griffe.
 *
 * Nachtrag vom selben Tag: sie waren grau und 10,5 px — Fabi wollte sie
 * „schwarz und etwas größer", und sie sollten sich zuklappen lassen. Sie sind
 * damit keine Beschriftung mehr, sondern ein Schalter: dieselbe Farbe wie die
 * Menuepunkte, 12 px, ein Pfeil rechts, und die ganze Zeile ist anklickbar.
 * Die Versalien und der weite Buchstabenabstand bleiben — sie halten die
 * Ueberschrift trotz gleicher Farbe von den Punkten darunter getrennt.
 */
.a-nav__block { margin-top: 16px; }
.a-nav > .a-nav__block:first-child { margin-top: 4px; }

.a-nav__abschnitt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 2px;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Das Dreieck, das Browser vor ein <summary> setzen, waere hier doppelt. */
.a-nav__abschnitt { list-style: none; }
.a-nav__abschnitt::-webkit-details-marker { display: none; }
.a-nav__abschnitt::marker { content: ''; }

.a-nav__abschnitt:hover { background-color: rgba(255, 255, 255, 0.72); }

/* Der Pfeil zeigt nach unten, solange der Abschnitt offen ist — wie bei den
   Gruppen eine Zeile tiefer. */
.a-nav__block[open] > .a-nav__abschnitt .a-nav__pfeil { transform: rotate(180deg); }
.a-nav__abschnitt .a-nav__pfeil { opacity: 0.45; }

/*
 * 🔴 Das `display` gehoert hinter `[open]` — nicht auf das Element selbst.
 *
 * Gemessen am 19.08.2026: mit `display: flex` direkt auf dem Inhalt blieb der
 * zugeklappte Abschnitt in voller Hoehe stehen (85 px statt 0). Ein <details>
 * blendet seinen Inhalt nur aus, solange dessen `display` unangetastet ist —
 * ein gesetzter Wert gewinnt und haelt das Feld offen. Die Gruppen eine Zeile
 * tiefer (.a-nav__feld) haben deshalb nie ein `display` bekommen.
 */
.a-nav__blockinhalt {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.a-nav__block[open] > .a-nav__blockinhalt { display: flex; }

/* Ein Punkt ohne Ueberschrift, der auf einen Abschnitt folgt (System, Hilfe):
   derselbe Abstand wie vor einer Ueberschrift, sonst laese er sich als Teil
   des Abschnitts darueber. */
.a-nav > .ist-abgesetzt { margin-top: 16px; }

.a-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--leise);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.a-nav__link:hover { background-color: rgba(255, 255, 255, 0.72); color: var(--text); }

.a-nav__link.ist-aktiv {
  background: var(--v-navy);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--schatten-navy);
}

/* Das Dreieck, das Browser vor ein <summary> setzen, waere hier doppelt —
   die Gruppe hat ihren eigenen Pfeil. */
.a-nav__link--gruppe { list-style: none; }
.a-nav__link--gruppe::-webkit-details-marker { display: none; }
.a-nav__link--gruppe::marker { content: ''; }

.a-nav__pfeil {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.a-nav__gruppe[open] .a-nav__pfeil { transform: rotate(180deg); }

/*
 * Die Unterpunkte klappen IN der Leiste auf, eingerueckt an einer Linie.
 *
 * 🔴 Kein schwebendes Feld mehr (`position: absolute`). In der waagerechten
 *    Leiste war es noetig, weil dort kein Platz nach unten war; in der
 *    Seitenleiste ist er da. Ein schwebendes Feld haette hier zwei Probleme:
 *    es wuerde am eigenen Bildlauf der Leiste abgeschnitten, und es laege
 *    ueber dem Inhalt statt neben ihm.
 */
.a-nav__feld {
  margin: 2px 0 6px 12px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--linie);
}

.a-nav__eintrag {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.13s ease;
}

.a-nav__eintrag:hover { background-color: var(--fl); }
.a-nav__eintrag-titel { font-size: 13.5px; font-weight: 600; display: block; }
.a-nav__eintrag-text { font-size: 12px; color: var(--leise); line-height: 1.4; }

/* Zwischenueberschrift im Klappfeld „Mehr" — trennt Team von System, ohne
   einen Strich zu ziehen. */
.a-nav__ueberschrift {
  margin: 10px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sehr-leise);
}

.a-nav__feld > .a-nav__ueberschrift:first-child { margin-top: 4px; }

/* „Mehr" steht am rechten Ende der Leiste: sein Klappfeld oeffnet nach links,
   sonst stuende es halb ausserhalb der Schale. */
.a-nav__feld--rechts { left: auto; right: 0; }

/* --- Zweite Zeile: die Punkte des Bereichs, in dem man steht ------------ */

.a-unternav {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  /*
   * 6 statt 4 Punkte Innenabstand: der Schatten der aktiven Pille reicht
   * 2 Punkte nach unten und verlaeuft ueber 7 — mit 4 Punkten Platz endete er
   * an der Leistenkante, und die Pille sah aus wie ausgeschnitten.
   */
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.66);
  border-radius: var(--pille);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);

  /*
   * 🔴 KEIN `overflow-x: auto` — dieselbe Falle wie in der Hauptleiste
   *    (siehe dort): ein Scrollbereich schneidet alles an seiner Kante ab,
   *    hier den Schatten der aktiven Pille. Passt die Reihe nicht, bricht sie
   *    um.
   */
  flex-wrap: wrap;
  row-gap: 4px;
}

.a-unternav__punkt {
  padding: 8px 15px;
  border-radius: var(--pille);
  font-size: 13px;
  font-weight: 500;
  color: var(--leise);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.a-unternav__punkt:hover { color: var(--text); }

.a-unternav__punkt.ist-aktiv {
  background-color: var(--karte);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 2px 7px rgba(16, 42, 74, 0.12);
}

/* --- Rechte Seite: Glocke, Sprache, Konto, Abmelden --------------------- */

.a-kopf__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.a-konto {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--pille);
  background-color: var(--karte);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.15s ease;
}

.a-konto:hover { box-shadow: 0 4px 14px rgba(16, 42, 74, 0.16); }
.a-konto.ist-aktiv { box-shadow: 0 0 0 2px var(--blau-hell); }

.a-konto__zeichen {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.a-konto__text { display: flex; flex-direction: column; line-height: 1.2; }
.a-konto__name { font-size: 13px; font-weight: 600; color: var(--text); }
.a-konto__rolle { font-size: 11px; color: var(--sehr-leise); }

.a-abmelden {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--karte);
  color: var(--leise);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.a-abmelden:hover { color: var(--schlecht); box-shadow: 0 4px 14px rgba(16, 42, 74, 0.16); }


/* --------------------------------------------------------------------------
   Benachrichtigungen — die Glocke in der Kopfzeile
   --------------------------------------------------------------------------
   Anlass: eine Anfrage ueber das Website-Formular stand tagelang unbemerkt in
   der Liste. Die Glocke ist der Ort, an dem "es ist etwas passiert" sichtbar
   wird — deshalb steht sie in der Kopfzeile und nicht auf einer eigenen Seite.

   Gebaut als <details>: oeffnet ohne JavaScript, die Tastatur bedient es von
   selbst. Das Blatt schwebt ueber dem Inhalt, damit es die Seite nicht
   verschiebt.
   -------------------------------------------------------------------------- */

.a-glocke { position: relative; }

.a-glocke__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

/* Das Dreieck, das Browser vor ein <summary> setzen, waere hier nur Ballast. */
.a-glocke__knopf::-webkit-details-marker { display: none; }
.a-glocke__knopf::marker { content: ''; }

.a-glocke__knopf:hover { background-color: var(--fl); }
.a-glocke__knopf:focus-visible { outline: 2px solid var(--tanne); outline-offset: 2px; }
.a-glocke[open] .a-glocke__knopf { background-color: var(--fl); }

/*
 * Die Zahl sitzt am Rand des Zeichens, nicht daneben: so bleibt die Breite der
 * Kopfzeile gleich, ob eine Meldung offen ist oder keine.
 */
.a-glocke__zahl {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-klein);
  background-color: var(--schlecht);
  color: #fff;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.a-glocke__blatt {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 42, 74, 0.14);
}

.a-glocke__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
}

.a-glocke__alle {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tanne);
  font-family: var(--sans);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

.a-glocke__leer {
  margin: 0;
  padding: 18px 14px;
  color: var(--leise);
  font-size: 13px;
  line-height: 1.6;
}

.a-glocke__liste { margin: 0; padding: 0; list-style: none; }

.a-glocke__eintrag + .a-glocke__eintrag { border-top: 1px solid var(--linie); }

.a-glocke__link {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

.a-glocke__link:hover { background-color: var(--fl); }

.a-glocke__titel { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.a-glocke__text { font-size: 12.5px; color: var(--leise); line-height: 1.45; }
.a-glocke__zeit { font-size: 11.5px; color: var(--sehr-leise); }

/*
 * Ungelesen traegt eine Marke am linken Rand statt einer eingefaerbten Zeile:
 * gelesen und ungelesen stehen damit ruhig nebeneinander, und die Schrift
 * bleibt in beiden Faellen gleich gut lesbar.
 */
.a-glocke__eintrag.ist-neu .a-glocke__link {
  border-left: 3px solid var(--tanne);
  padding-left: 11px;
}

.a-glocke__eintrag.ist-neu .a-glocke__titel { color: var(--tanne); }

@media (max-width: 640px) {
  /* Auf dem Telefon nimmt das Blatt die volle Breite unter der Kopfzeile. */
  .a-glocke { position: static; }
  .a-glocke__blatt { left: 12px; right: 12px; width: auto; }
}

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

.a-inhalt { padding: 24px 26px 44px; }

.a-seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/*
 * Der Seitentitel steht in der Vorlage gross, fett und dunkel ueber einer
 * leisen Zeile Erklaerung — nicht in einer Schmuckfarbe. Die Farbe des
 * Arbeitsbereichs traegt stattdessen die Zeile darueber und das Band unter
 * der Kopfzeile; so bleibt der Titel in jedem Bereich gleich gut lesbar.
 */
.a-titel {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
}

/*
 * Klammerzusatz im Seitentitel — nennt die Herkunft, ohne den Titel zu
 * verdoppeln: „Hütten-Anfragen (Webseiten-Formular)". Leiser gesetzt,
 * damit der Titel der Titel bleibt.
 */
.a-titel__zusatz {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--leise);
  letter-spacing: 0;
  white-space: nowrap;
}

.a-untertitel { margin: 5px 0 0; color: var(--leise); font-size: 13.5px; }

.a-zurueck {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--leise);
  text-decoration: none;
}
.a-zurueck:hover { color: var(--blau); }

/*
 * Zurueck und „Naechste" nebeneinander ueber dem Titel einer Akte
 * (04.09.2026). Fabi: „hier neben zurueck will ich ein button ‚naechste‘".
 *
 * Am Ende der Reihe bleibt der Knopf stehen und wird still — ein Element, das
 * mal da ist und mal nicht, laesst einen beim naechsten Klick ins Leere greifen.
 */
.a-akte-navi {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 2px;
}
.a-akte-navi .a-zurueck { margin-bottom: 0; }
.a-akte-navi__weiter.ist-still {
  color: var(--rand, #d1d5db);
  cursor: default;
}


/* --------------------------------------------------------------------------
   Karten
   --------------------------------------------------------------------------
   Die Vorlage kennt keine Rahmen: eine Karte ist eine weisse Flaeche mit
   grosser Rundung, die ueber dem Grund schwebt. Getrennt wird durch Abstand
   und Schatten, nicht durch Striche.
   -------------------------------------------------------------------------- */

.a-karte {
  background-color: var(--karte);
  border: 0;
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--schatten);
}

.a-karte--flach { padding: 0; overflow: hidden; }
.a-karte--breit { grid-column: 1 / -1; }
.a-karte--klebrig { position: sticky; top: 20px; }

/* Betonte Karte: der Navy-Verlauf der Vorlage, weisse Schrift. */
.a-karte--betont {
  background: var(--v-navy);
  color: #fff;
  box-shadow: var(--schatten-navy);
}

/*
 * Auf dem dunklen Grund muessen Titel und Beschriftungen VOLL deckend stehen.
 * Mit 82 % Deckkraft las sich die Ueberschrift „Lageplan hochladen" wie ein
 * abgeschalteter Knopf. Leise bleiben nur die Erklaerungssaetze darunter.
 */
.a-karte--betont .a-karte__titel,
.a-karte--betont .a-abschnitt,
.a-karte--betont .a-feld__label,
.a-karte--betont label,
.a-karte--betont legend { color: #fff; }

.a-karte--betont .a-fliess,
.a-karte--betont .a-feld__hilfe,
.a-karte--betont .a-hinweis { color: rgba(255, 255, 255, 0.78); }

/* Eingabefelder behalten ihren hellen Grund — sie sind Arbeitsflaechen. */
.a-karte--betont input,
.a-karte--betont select,
.a-karte--betont textarea {
  background-color: var(--karte);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text);
}

.a-karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/*
 * Kartentitel: in der Vorlage eine normale, dunkle Ueberschrift („User
 * Growth", „Customers Volume") — keine gesperrte Grossschrift. Die war
 * ein Ueberbleibsel der ersten Fassung und liess jede Karte wie eine
 * Tabellenspalte aussehen.
 */
.a-karte__titel {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--text);
}

.a-karte__kopf .a-karte__titel { margin: 0; }

/* --------------------------------------------------------------------------
   KPI
   --------------------------------------------------------------------------
   Vorbild ist die Kachelreihe der Vorlage: grosse Zahl, kleine Beschriftung
   darueber, und EINE Kachel im Navy-Verlauf, die den wichtigsten Wert traegt.
   -------------------------------------------------------------------------- */

.a-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  /* Ohne das zieht eine Kachel mit zwei Zusatzzeilen alle anderen auf ihre
     Hoehe — drei Kacheln standen dann halb leer daneben. */
  align-items: start;
}

.a-kpi {
  position: relative;
  background-color: var(--karte);
  border: 0;
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: var(--schatten);
}

/* Die hervorgehobene Kennzahl — „Total Sales" der Vorlage. */
.a-kpi--akzent {
  background: var(--v-navy);
  box-shadow: var(--schatten-navy);
}

.a-kpi__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--leise);
}

.a-kpi__wert {
  margin: 0;
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}

.a-kpi__zusatz { margin: 6px 0 0; font-size: 12.5px; color: var(--sehr-leise); }

.a-kpi--akzent .a-kpi__label { color: rgba(255, 255, 255, 0.76); }
.a-kpi--akzent .a-kpi__wert { color: #fff; }
.a-kpi--akzent .a-kpi__zusatz { color: rgba(255, 255, 255, 0.68); }
.a-kpi--akzent .a-info__zeichen {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}

.a-kpi__zusatz { margin: 4px 0 0; font-size: 12px; color: var(--sehr-leise); }

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

.a-status-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.a-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background-color: var(--fl);
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.a-status:hover { background-color: var(--karte); box-shadow: var(--schatten); }

.a-status__name { font-size: 13px; }

.a-status__wert {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.a-status__punkt {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--sehr-leise);
  flex-shrink: 0;
}

.a-status__punkt--neu        { background-color: var(--blau-hell); }
.a-status__punkt--inpruefung { background-color: var(--gold); }
.a-status__punkt--zugesagt   { background-color: var(--gut); }
.a-status__punkt--abgelehnt  { background-color: var(--schlecht); }
.a-status__punkt--warteliste { background-color: #6b5fc4; }

/* --------------------------------------------------------------------------
   Versand
   -------------------------------------------------------------------------- */

.a-versand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.a-versand__zahl {
  padding: 14px 16px;
  background-color: var(--fl);
  border-radius: 14px;
  text-align: center;
}

.a-versand__zahl > span:not(.a-info) {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.15;
}

.a-versand__zahl small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--leise);
}

.a-versand__zahl--gut > span:not(.a-info) { color: var(--gut); }
.a-versand__zahl--schlecht > span:not(.a-info) { color: var(--schlecht); }

.a-fortschritt {
  height: 10px;
  background-color: var(--fl-satt);
  border-radius: var(--pille);
  overflow: hidden;
  margin-bottom: 10px;
}

/*
 * Fuellung wie in der Vorlage: Verlauf von Blau ueber Tuerkis nach Mint, mit
 * einer feinen diagonalen Schraffur darueber. Die Schraffur ist kein Zierrat —
 * sie macht auch einen sehr kurzen Balken als Balken erkennbar.
 */
.a-fortschritt__balken {
  height: 100%;
  border-radius: var(--pille);
  background-image: var(--v-schraffur), var(--v-daten);
  background-size: auto, 100vw 100%;
  transition: width 0.4s ease;
}

.a-lauf { margin: 0 0 14px; font-size: 13px; color: var(--leise); }

.a-knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Diagramme
   -------------------------------------------------------------------------- */

.a-diagramme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

/*
 * Hoechstens DREI Spalten (14.08.2026, Fabis Vorgabe zur Auswertung).
 * Vorher liess `auto-fit` auf einem breiten Schirm vier Karten nebeneinander
 * einrasten — Tabellen mit drei Zahlenspalten wurden dadurch so schmal, dass
 * sie eine eigene Bildlaufleiste brauchten. Die Begrenzung greift erst ab
 * 1100px, darunter bleibt das freie Einrasten (2 Spalten, dann 1).
 */
@media (min-width: 1100px) {
  .a-diagramme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * Eine Karte, die zwei Spalten braucht. Fuer Tabellen mit mehreren
 * Zahlenspalten: in einem Drittel der Breite brauchten sie eine eigene
 * waagerechte Bildlaufleiste — gemessen 391px Inhalt in 257px Platz.
 * Unter 700px rastet das Raster einspaltig ein, dort wird span 2 aufgehoben.
 */
.a-diagramme .a-karte--doppelt { grid-column: span 2; }

@media (max-width: 700px) {
  .a-diagramme .a-karte--doppelt { grid-column: auto; }
}

.a-diagramme .a-karte { margin-bottom: 0; }

.a-leinwand { position: relative; height: 260px; }

/*
 * Eine hoehere Leinwand fuer liegende Balken.
 *
 * 260px reichen fuer drei bis vier Kategorien. Das Nachfrage-Diagramm zeigt
 * seit 19.08.2026 die Bauarten der Saison. Liegend gezeichnet braucht jede
 * Zeile Hoehe statt Breite, sonst kleben die Balken aneinander.
 *
 * Der Wert hier ist nur der Rueckfall: die Ansicht rechnet die Hoehe aus der
 * Zahl der Bauarten aus und setzt sie am Element. Nimmt jemand die Rechnung
 * heraus, steht das Diagramm damit immer noch brauchbar da.
 */
.a-leinwand--hoch { height: 340px; }

/* --------------------------------------------------------------------------
   Knoepfe
   -------------------------------------------------------------------------- */

.a-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--pille);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

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

/* Der Hauptknopf traegt den Blau-Verlauf der Vorlage („Filter") — samt des
   farbigen Schattens, der ihn von der weissen Flaeche abhebt. */
.a-knopf--haupt {
  background: var(--v-blau);
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 123, 196, 0.30);
}
.a-knopf--haupt:hover { box-shadow: 0 9px 22px rgba(30, 123, 196, 0.42); }

/* Der leise Knopf ist in der Vorlage weiss und rahmenlos — er traegt einen
   Schatten statt eines Strichs („Export"). */
.a-knopf--leise {
  background-color: var(--karte);
  border-color: transparent;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
}
.a-knopf--leise:hover { box-shadow: 0 4px 14px rgba(16, 42, 74, 0.17); }

/* Der kleine Knopf sitzt meist IN einer Karte — dort waere ein Schatten
   Unruhe. Er bekommt stattdessen die blasse Fuellflaeche („Default View"). */
.a-knopf--klein {
  padding: 6px 13px;
  font-size: 12.5px;
  background-color: var(--blau-fl);
  border-color: transparent;
  color: var(--navy-hell);
}
.a-knopf--klein:hover { background-color: #dcebf8; }

.a-knopf--gefahr { color: var(--schlecht); background-color: var(--schlecht-fl); }
.a-knopf--gefahr:hover { background-color: #fbd9d6; }

/* Knopf, der nur ein Symbol traegt (Papierkorb in der Betreiberliste,
   09.09.2026). Quadratisch, das Symbol mittig; der Text steht im
   aria-label und im title. */
.a-knopf--symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  line-height: 1;
}
.a-knopf--symbol svg { display: block; }

/* Formular in einer Knopfreihe — soll sich wie ein Knopf verhalten, nicht
   wie ein Block mit eigenem Abstand. */
.a-inline-form { display: inline-flex; margin: 0; }

/*
 * Kombinationen. `--klein` regelt Groesse UND Farbe; steht es zusammen mit
 * `--haupt` oder `--gefahr` am selben Knopf, gewaenne allein die Reihenfolge
 * in dieser Datei. Gemessen auf /admin/dokumente: „Neue Dokumentart" hatte den
 * blauen Verlauf von `--haupt` und die dunkelblaue Schrift von `--klein` —
 * dunkelblau auf blau, praktisch unlesbar. Die Grosse-Variante hat dasselbe
 * Problem, nur andersherum.
 */
.a-knopf--haupt.a-knopf--klein,
.a-knopf--klein.a-knopf--haupt {
  background: var(--v-blau);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30, 123, 196, 0.28);
}

.a-knopf--gefahr.a-knopf--klein,
.a-knopf--klein.a-knopf--gefahr {
  background-color: var(--schlecht-fl);
  color: var(--schlecht);
}

.a-knopf--leise.a-knopf--klein,
.a-knopf--klein.a-knopf--leise {
  background-color: var(--karte);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
}

.a-knopf--voll { width: 100%; }

.a-knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Formularfelder
   -------------------------------------------------------------------------- */

.a-feld { margin-bottom: 15px; }

.a-feld__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
}

.a-feld input[type='text'],
.a-feld input[type='email'],
.a-feld input[type='password'],
.a-feld input[type='number'],
.a-feld input[type='search'],
.a-feld input[type='file'],
.a-feld select,
.a-feld textarea,
.a-filter input,
.a-filter select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
  background-color: var(--karte);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.a-feld textarea { resize: vertical; }

.a-feld input:focus,
.a-feld select:focus,
.a-feld textarea:focus,
.a-filter input:focus,
.a-filter select:focus {
  outline: none;
  border-color: var(--tanne-hell);
  box-shadow: 0 0 0 3px rgba(30, 123, 196, 0.16);
}

.a-feld__hilfe { margin: 6px 0 0; font-size: 12px; color: var(--sehr-leise); }

/*
 * Aktion = Feld + Knopf in einer Zeile (10.09.2026, Anforderungs-Seite).
 *
 * Fabi: „Außerdem haben wir hier noch grafisch etwas zu tun. Das ist nicht
 * komplett fertig, passend zum Rest des Backends." Die Felder fuer
 * Ablehnungsgrund und Frist standen ohne `.a-feld`-Huelle nackt neben den
 * Knoepfen — eckig, grau, Browser-Schrift. Sie tragen jetzt denselben Rahmen
 * wie `.a-feld input` und `.a-filter input`, nur in Knopfhoehe (41px, gemessen
 * am gerenderten `.a-knopf` am 10.09.2026: 10px Innenabstand, 13.5px Schrift
 * mit Zeilenhoehe, 1px Rahmen), damit Feld und Knopf auf einer Linie sitzen.
 */
.a-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }

.a-aktion { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }

.a-aktion--rechts { margin-left: auto; }

.a-aktion__feld {
  box-sizing: border-box;
  height: 41px;
  width: 280px;
  max-width: 100%;
  padding: 0 13px;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
  background-color: var(--karte);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.a-aktion__feld--datum { width: 180px; }

.a-aktion__feld:focus {
  outline: none;
  border-color: var(--tanne-hell);
  box-shadow: 0 0 0 3px rgba(30, 123, 196, 0.16);
}

/*
 * Entscheiden (10.09.2026): Annehmen und Ablehnen untereinander, damit das
 * Grundfeld eindeutig zum Ablehnen gehoert. Der Knopf steht links, das Feld
 * fuellt die Zeile — der Grund darf ein ganzer Satz sein.
 */
.a-entscheidung { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.a-entscheidung .a-aktion .a-knopf { flex: 0 0 auto; min-width: 118px; }
.a-aktion__feld--breit { flex: 1 1 auto; width: auto; max-width: 640px; }
.a-aktion__text { font-size: 13px; color: var(--leise); }

/* Ein Satz je Knopf (Nachfassen). */
.a-erklaerung { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--sehr-leise); }
.a-erklaerung li { margin: 0 0 4px; }
.a-erklaerung strong { color: var(--leise); font-weight: 600; }

@media (max-width: 640px) {
  .a-aktion { flex-wrap: wrap; width: 100%; }
  .a-aktion--rechts { margin-left: 0; }
  .a-aktion__feld, .a-aktion__feld--datum, .a-aktion__feld--breit { width: 100%; max-width: none; }
}

/*
 * Hochladen durch die Verwaltung (10.09.2026): Datei-Knopf des Hauses,
 * darunter der Absendeknopf, darunter das Kleingedruckte. Der obere Strich
 * trennt es von der Dateiliste, ohne eine zweite Karte aufzumachen.
 */
.a-hochladen {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

.a-hochladen .a-datei { margin: 0; }
.a-hochladen__aktionen { display: flex; margin-top: 10px; }
.a-hochladen__hilfe { margin-top: 8px; }

/*
 * Datei-Knopf in einer Tabellenzeile (Unterlagen am Betreiber, 10.09.2026).
 * Ohne die gerahmte Auswahlzeile aus datei-knopf.css — in einer Zeile mit
 * „Oeffnen" soll er wie ein zweiter kleiner Knopf aussehen, nicht wie ein
 * Formularfeld. Die feste Hoehe von 30px wird aufgehoben, damit er genau so
 * hoch ist wie der Knopf daneben.
 */
.a-zelle__aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.a-zeilenupload { margin: 0; }
.a-datei--knapp { width: auto; }
.a-datei--knapp .a-datei__zeile {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.a-datei--knapp .a-datei__zeile:hover { border-color: transparent; }
.a-datei--knapp .a-datei__knopf { height: auto; }

/* Mehrsprachige Eingabefelder (Einstellungen) */

.a-sprachfelder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.a-sprachfeld { display: flex; align-items: flex-start; gap: 10px; }

.a-sprachfeld__code {
  flex: 0 0 30px;
  padding-top: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sehr-leise);
}

.a-sprachfeld input,
.a-sprachfeld textarea { flex: 1 1 auto; min-width: 0; }

@media (min-width: 1100px) {
  .a-sprachfelder { grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
}

.a-feld__hilfe code {
  font-family: var(--mono);
  font-size: 11.5px;
  background-color: var(--fl);
  padding: 2px 5px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Filter
   -------------------------------------------------------------------------- */

.a-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--schatten);
}

.a-filter__feld label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--leise);
}

.a-filter__aktionen { display: flex; gap: 8px; align-items: end; }

/*
 * Die Knoepfe bleiben in DERSELBEN Zeile wie die Felder (14.08.2026, Fabis
 * Vorgabe: „den zurücksetzen button auf selbe höhe wie die eingabefelder").
 *
 * Vorher rutschten sie in eine zweite Zeile, sobald die Felder zusammen mit
 * den Abstaenden ein paar Pixel zu breit wurden — gemessen 907 px Inhalt plus
 * 48 px Abstand in einem 953 px breiten Formular. Es fehlten zwei Pixel.
 *
 * Deshalb: die Felder duerfen schrumpfen (`min-width: 0` hebt die Sperre auf,
 * die ein Eingabefeld von sich aus mitbringt), der Knopfblock nicht. Und er
 * sitzt am unteren Rand, damit er auf einer Linie mit den Feldern steht und
 * nicht mit deren Beschriftung.
 *
 * Nur als KINDER der Filterzeile — dieselben Klassen stehen auch in den
 * Detailmasken, wo sie untereinander gehoeren.
 */
.a-filter > .a-filter__feld {
  flex: 1 1 140px;
  min-width: 0;
}

/*
 * Das breite Feld bricht auf eine eigene Zeile um. Die Regel MUSS hier stehen
 * und nicht weiter oben: die Kurzform `flex` darueber setzt auch die
 * Grundbreite und schlaegt jedes `flex-basis`, das frueher in der Datei steht.
 * Gemessen auf /admin/team: 179 statt 1125 Punkte — das Formular „Neues Konto"
 * stand dadurch in zwei losen Haelften nebeneinander.
 */
.a-filter > .a-filter__feld--breit {
  flex: 1 1 100%;
  width: 100%;
}

.a-filter > .a-filter__aktionen {
  flex: 0 0 auto;
  align-self: end;
}

/*
 * Alle Bedienelemente der Filterzeile auf eine Linie.
 *
 * Vorher standen Auswahlfelder, Suchfeld und Knöpfe unterschiedlich hoch:
 * `type="search"` bekommt in Chrome eine eigene Höhe, und die Knöpfe haben ein
 * anderes Innenmaß als die Felder. Eine feste Mindesthöhe bringt beides auf
 * dieselbe Grundlinie.
 */
.a-filter input,
.a-filter select,
.a-filter__aktionen .a-knopf {
  min-height: 38px;
  box-sizing: border-box;
}

.a-filter__aktionen .a-knopf {
  display: inline-flex;
  align-items: center;
}

/*
 * Der Filtern-Knopf entfällt, sobald das Skript die Zeile selbsttätig macht
 * (siehe /js/admin-filter.js). Ohne Skript bleibt er stehen — sonst ließe sich
 * ohne JavaScript gar nicht mehr filtern.
 */
.a-filter.ist-selbsttaetig button[type="submit"] { display: none; }

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

.a-tabelle__huelle { overflow-x: auto; border-radius: var(--r-klein); }

.a-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/*
 * Die Kopfzeile traegt keine Fuellfarbe mehr, sondern nur eine feine Linie:
 * in der Vorlage trennen Abstand und Schrift, nicht Flaechen. Die gesperrte
 * Grossschrift bleibt — sie haelt die Spaltennamen auf Abstand zum Inhalt,
 * ohne sie fett und laut zu machen.
 */
.a-tabelle th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sehr-leise);
  background-color: transparent;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.a-tabelle tbody th {
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: normal;
  border-bottom: 1px solid rgba(16, 42, 74, 0.06);
  vertical-align: top;
}

.a-tabelle td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 42, 74, 0.06);
  vertical-align: top;
}

.a-tabelle tbody tr:last-child td { border-bottom: 0; }
.a-tabelle tbody tr { transition: background-color 0.13s ease; }
.a-tabelle tbody tr:hover { background-color: var(--fl); }

.a-zelle__zusatz { display: block; font-size: 12px; color: var(--sehr-leise); margin-top: 2px; }

.a-link { color: var(--blau); font-weight: 600; text-decoration: none; }
.a-link:hover { text-decoration: underline; }

.a-leer { padding: 34px 22px; text-align: center; color: var(--leise); margin: 0; }

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

.a-plakette {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--pille);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  background-color: var(--fl);
  color: var(--leise);
  white-space: nowrap;
}

.a-plakette--huette  { background-color: var(--gut-fl); color: var(--gut); }
.a-plakette--sponsor { background-color: var(--info-fl); color: var(--info); }
.a-plakette--sent    { background-color: var(--gut-fl); color: var(--gut); }
.a-plakette--failed  { background-color: var(--schlecht-fl); color: var(--schlecht); }
.a-plakette--pending { background-color: var(--fl); color: var(--leise); }
.a-plakette--warnung { background-color: var(--warn-fl); color: var(--warn); }

/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

.a-meldung {
  padding: 12px 16px;
  border-radius: var(--r-fein);
  font-size: 13.5px;
  margin: 0 0 18px;
}

.a-meldung--info     { background-color: var(--info-fl); color: var(--info); }
.a-meldung--warnung  { background-color: var(--warn-fl); color: var(--warn); }
.a-meldung--fehler   { background-color: var(--schlecht-fl); color: var(--schlecht); }

/* --------------------------------------------------------------------------
   Detailansicht
   -------------------------------------------------------------------------- */

.a-spalten { display: grid; grid-template-columns: 1fr; gap: 18px; }

.a-daten { margin: 0; }

.a-daten__zeile {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
}

.a-daten__zeile:last-child { border-bottom: 0; }

.a-daten dt { font-size: 13px; color: var(--leise); }
.a-daten dd { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.a-fliesstext {
  margin: 0 0 16px;
  padding: 14px 16px;
  background-color: var(--fl);
  border-radius: var(--r-fein);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.a-kopierbar { cursor: pointer; border-bottom: 1px dashed var(--linie-satt); }
.a-kopierbar:hover { color: var(--tanne); border-bottom-color: var(--tanne); }
.a-kopierbar--klein { font-size: 12.5px; color: var(--leise); }
.a-kopierbar.ist-kopiert { color: var(--gut); border-bottom-color: var(--gut); }

/* --------------------------------------------------------------------------
   Sterne
   -------------------------------------------------------------------------- */

.a-sterne { display: flex; align-items: center; gap: 3px; }

.a-stern { font-size: 22px; color: var(--linie-satt); line-height: 1; }
.a-stern.ist-voll { color: var(--gold); }

.a-stern--knopf {
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  transition: transform 0.1s ease, color 0.1s ease;
}

.a-stern--knopf:hover { transform: scale(1.15); color: var(--gold-hell); }

.a-sterne .a-knopf--klein { margin-left: 8px; }

.a-sterne-zelle { white-space: nowrap; }

/*
 * Angebot verschickt (20.08.2026). Das Haekchen sitzt mittig in einer schmalen
 * Spalte: beim Ueberfliegen der Liste soll eine Reihe von Haken entstehen, in
 * der eine Luecke sofort auffaellt. Deshalb steht bei Huetten ohne Angebot ein
 * Strich und nicht nichts.
 */
.a-angebot-zelle { text-align: center; white-space: nowrap; }
.a-angebot { font-size: 15px; color: var(--sehr-leise); }
.a-angebot.ist-gesendet { color: var(--gut); font-weight: 700; }
.a-sterne-zelle .a-stern { font-size: 15px; }

/*
 * Ein Formular MITTEN in einer Tabellenzelle (24.08.2026).
 *
 * Traegt das Auswahlfeld fuer den Stand eines Huetten-Interessenten. Ohne die
 * Begrenzung waehlte das Feld die volle Zellenbreite und schob die Spalte
 * "Stand" auf die Breite ihres laengsten Eintrags ("Vertrag abgeschlossen")
 * auf — bei elf Spalten der Unterschied zwischen einer lesbaren Tabelle und
 * einer waagerechten Bildlaufleiste.
 *
 * `min-width: 0` am Formular, weil ein Flex- oder Grid-Kind sonst nicht unter
 * die Breite seines Inhalts schrumpft. Derselbe Fallstrick wie am 24.08.2026
 * in der Akte.
 */
/*
 * Die Anfrage-Zelle der Hütten-Interessenten (24.08.2026).
 *
 * Traegt Art, Groesse, Eingang, Bewertung und das Angebots-Haekchen in EINER
 * Spalte. Fuenf eigene Spalten trieben die Tabelle auf 1491 px bei 893 px
 * verfuegbarer Breite — gemessen, nicht geschaetzt.
 *
 * Die Sterne bekommen hier ihre eigene Zeile: `a-sterne-zelle` ist sonst eine
 * Tabellenzelle mit `white-space: nowrap`, als Block innerhalb der Zelle
 * braucht sie `display: block`, sonst stuende sie hinter dem Datum und die
 * Zeile liefe breit.
 */
.a-anfrage-zelle { white-space: nowrap; }
.a-anfrage-zelle .a-zelle__zusatz { display: block; }
.a-anfrage-zelle .a-sterne-zelle { display: block; margin-top: 2px; }
.a-anfrage-zelle .a-angebot { margin-left: 4px; }

/*
 * Die Aktionsspalte der Hütten-Interessenten: Knöpfe NEBENEINANDER (24.08.2026).
 *
 * Fabi: „die beiden spalten können entfernt werden, dann ist auch mehr platz
 * für die buttons nebeneinander." Vorher standen „Akte", „Schnell bearbeiten"
 * und „Löschen" übereinander und machten jede Zeile dreimal so hoch wie nötig.
 *
 * 🔴 `align-items: flex-start`, nicht `center`: das mittlere Element ist ein
 *    <details>. Im GEÖFFNETEN Zustand wächst es — zwar legt es sich per
 *    `position: fixed` über die Seite, doch schon ein kurzer Moment mit
 *    zentrierter Ausrichtung schiebt die Nachbarn sichtbar hin und her.
 *
 * `flex-wrap` erlaubt den Umbruch auf schmalen Fenstern — lieber zwei Reihen
 * als eine Zeile, die aus der Hülle läuft.
 */
.a-zeilen-aktionen {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

/*
 * Das <details> darf im Fluss keine eigene Breite beanspruchen — sonst drängt
 * es die beiden Nachbarn auseinander, obwohl es geschlossen nur so breit ist
 * wie sein Knopf.
 */
.a-zeilen-aktionen > .a-klapp { flex: 0 0 auto; }
.a-zeilen-aktionen > form { margin: 0; }

.a-zeilenform { display: flex; align-items: center; gap: 6px; min-width: 0; }

/*
 * Das Auswahlfeld in der Zeile trägt DIESELBE Gestalt wie die Filter oben
 * (24.08.2026).
 *
 * Fabi: „dann stand auswahl bitte im selben design wie die filter. nicht
 * viereckig." Vorher standen hier nur Innenabstand und Schriftgröße — alles
 * Weitere kam vom Browser, und der zeichnet ein eckiges, graues Feld. In einer
 * Tabelle, deren Filterleiste zwei Handbreit darüber runde Felder zeigt, fällt
 * das sofort als Fremdkörper auf.
 *
 * Die Werte sind bewusst dieselben wie bei `.a-filter select` (Rahmen, Radius,
 * Hintergrund, Schrift) — nur der Innenabstand ist kleiner und die Höhe
 * niedriger: ein Feld in Filtergröße machte jede Tabellenzeile 14 px höher.
 */
.a-zeilenform select {
  max-width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
  background-color: var(--karte);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Die Rückmeldung neben dem Auswahlfeld (24.08.2026).
 *
 * Seit der Stand ohne Neuladen gesetzt wird, gibt es keine Meldung mehr oben
 * auf der Seite — genau das war der Wunsch („er springt immer noch oben … das
 * nervt"). Stattdessen ein Haken direkt am Feld, der nach zweieinhalb Sekunden
 * verschwindet. Ein Fehler bleibt dagegen stehen, bis das nächste Mal gesetzt
 * wird: er will gelesen werden.
 *
 * `min-width` hält den Platz frei, damit die Knöpfe rechts nicht bei jedem
 * Setzen um eine Haaresbreite wandern.
 */
.a-zeilen-vermerk {
  min-width: 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--sehr-leise);
  white-space: nowrap;
}

.a-zeilen-vermerk.ist-gut { color: var(--gut); }

.a-zeilen-vermerk.ist-schlecht {
  color: var(--schlecht);
  font-weight: 600;
  font-size: 12px;
  white-space: normal;
}

/* Derselbe Fokus wie überall — sonst springt die Umrandung ins Browser-Blau. */
.a-zeilenform select:focus {
  outline: none;
  border-color: var(--tanne-hell);
  box-shadow: 0 0 0 3px rgba(30, 123, 196, 0.16);
}

/*
 * Die Zelle „Stand / Zuständig" der Interessentenliste (07.09.2026).
 *
 * Fabi: „dann will ich etwas abstand zwischen den beiden dropdown haben und
 * beide gleichlang." Zwei Formulare stehen untereinander; ohne diese Regel
 * klebten sie aneinander, und jedes Auswahlfeld war so breit wie sein
 * laengster Eintrag — „Neu" kurz, „Tamara Taschner" lang. Die Zelle wird
 * ein Raster mit Zeilenabstand, jedes Formular fuellt die Spalte, und das
 * Auswahlfeld darin nimmt die ganze Formularbreite — beide sind damit
 * gleich lang, egal was drinsteht.
 */
.a-zelle-stand {
  display: grid;
  gap: 8px;
  min-width: 160px;
}

.a-zelle-stand .a-zeilenform {
  width: 100%;
}

.a-zelle-stand .a-zeilenform select {
  flex: 1 1 auto;
  width: 100%;
}

/*
 * Eingabefelder in einer Tabellenzeile — bisher gab es hier nur `select`
 * (24.08.2026). Die berichtigte E-Mail-Adresse in der Einladungsliste ist das
 * erste Textfeld an dieser Stelle; ohne eigene Regel erschiene es in der
 * Standardgroesse des Browsers und spraengte die Spalte.
 *
 * Die Rahmenwerte sind dieselben wie bei `.a-feld input`, nur enger gesetzt.
 */
.a-zeilenform input[type='email'],
.a-zeilenform input[type='text'] {
  min-width: 0;
  flex: 1 1 auto;
  padding: 4px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
  background-color: var(--karte);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
}

.a-speicher-status { font-size: 12px; font-weight: 600; color: var(--sehr-leise); }
.a-speicher-status.ist-gespeichert { color: var(--gut); }
.a-speicher-status.ist-fehler { color: var(--schlecht); }

/* --------------------------------------------------------------------------
   Galerie und Lightbox
   -------------------------------------------------------------------------- */

.a-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

.a-galerie__bild {
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: border-color 0.13s ease;
}

.a-galerie__bild:hover { border-color: var(--gold); }
.a-galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(13, 44, 28, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.a-lightbox[hidden] { display: none; }
.a-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-fein); }

.a-lightbox__schliessen {
  position: absolute;
  top: 18px; right: 24px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.a-lightbox__schliessen:hover { background-color: rgba(255, 255, 255, 0.26); }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.admin--login { background-color: var(--tanne-tief); }

.a-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.a-login__karte {
  width: 100%;
  max-width: 380px;
  background-color: var(--karte);
  border-radius: var(--r);
  padding: 40px 34px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.a-login__jahr {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.a-login__titel {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  color: var(--tanne);
}

.a-login__untertitel {
  margin: 2px 0 26px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sehr-leise);
}

/* --------------------------------------------------------------------------
   Anmeldung: das Wappen                                     (19.08.2026)
   --------------------------------------------------------------------------
   Fabi: "das Echte log auftaucht statt Ausgeschrieben Par de NAdal. und
   2026 kann auch weg."

   Die Bereichswahl darunter ist eine gewoehnliche Klappliste in einem
   `.a-feld` — sie braucht keine eigene Regel, sie erbt die des Hauses.

   Das Wappen traegt den Namen selbst - Titel, Untertitel und Jahreszahl sind
   deshalb aus der Vorlage genommen. Ihre Regeln bleiben oben stehen: die
   Anmeldung des Ticketshop-Scanners benutzt sie weiter.
   -------------------------------------------------------------------------- */

.a-login__logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 26px;
}

.a-login__karte .a-feld { text-align: left; }

/* Der Knopf klebte direkt am Eingabefeld und wirkte dadurch deaktiviert. */
.a-login__karte .a-knopf--voll { margin-top: 16px; }

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

.a-fuss {
  margin: 0 26px;
  padding: 18px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sehr-leise);
  border-top: 1px solid rgba(16, 42, 74, 0.07);
}

/* --------------------------------------------------------------------------
   Ab Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .a-spalten { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .a-spalten--drittel { grid-template-columns: repeat(3, 1fr); }
  .a-spalte--schmal { min-width: 0; }
}

@media (max-width: 999px) {
  .a-spalten--drittel { grid-template-columns: 1fr; }
  .a-karte--klebrig { position: static; }
  .a-daten__zeile { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   Erklaer-Symbole
   Ohne JavaScript: sichtbar bei Mausberuehrung und bei Tastatur-Fokus.
   -------------------------------------------------------------------------- */

.a-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  border: 0;
  background-color: var(--fl-satt);
  color: var(--leise);
  cursor: help;
  flex: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.a-info:hover { background-color: var(--blau-fl); color: var(--blau); }

.a-info:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

.a-info__zeichen {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  color: var(--leise);
}

.a-info:hover { border-color: var(--gold); }
.a-info:hover .a-info__zeichen { color: var(--gold); }

.a-info__blase {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 40;
  width: max-content;
  max-width: 270px;
  padding: 9px 12px;
  transform: translateX(-50%) translateY(3px);
  border-radius: var(--r-klein);
  background-color: var(--tanne-tief, #0d2c52);
  color: #eef4fa;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}

/* Spitze zum Symbol hin */
.a-info__blase::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--tanne-tief, #0d2c52);
}

.a-info:hover .a-info__blase,
.a-info:focus .a-info__blase,
.a-info:focus-within .a-info__blase {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Am linken Rand nach rechts ausrichten, damit nichts abgeschnitten wird */
.a-tabelle th:first-child .a-info__blase,
.a-preise__block:first-child .a-info__blase {
  left: 0;
  transform: translateX(0) translateY(3px);
}

.a-tabelle th:first-child .a-info:hover .a-info__blase,
.a-tabelle th:first-child .a-info:focus .a-info__blase,
.a-preise__block:first-child .a-info:hover .a-info__blase,
.a-preise__block:first-child .a-info:focus .a-info__blase {
  transform: translateX(0) translateY(0);
}

.a-tabelle th:first-child .a-info__blase::after,
.a-preise__block:first-child .a-info__blase::after { left: 13px; }

/* Auf schmalen Geraeten gibt es kein Hover — Blase bleibt per Fokus erreichbar */
@media (max-width: 700px) {
  .a-info__blase { max-width: 220px; }
}

/* --------------------------------------------------------------------------
   Sprachumschalter der Verwaltung
   -------------------------------------------------------------------------- */

.a-sprache {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--pille);
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.a-sprache__wahl {
  padding: 6px 11px;
  border-radius: var(--pille);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--leise);
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.a-sprache__wahl:hover { color: var(--text); }

.a-sprache__wahl.ist-aktiv {
  color: var(--navy);
  background-color: var(--karte);
  box-shadow: 0 2px 7px rgba(16, 42, 74, 0.12);
}

/* --------------------------------------------------------------------------
   Huettenverwaltung
   -------------------------------------------------------------------------- */

/* Rueckmeldung nach einer Aktion */
.a-hinweis {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 14px;
  border: 1px solid transparent;
}
.a-hinweis--gut     { background-color: var(--gut-fl);     color: var(--gut);     border-color: var(--gut); }
.a-hinweis--schlecht{ background-color: var(--schlecht-fl); color: var(--schlecht); border-color: var(--schlecht); }
.a-hinweis--warnung { background-color: var(--warn-fl);      color: var(--warn);      border-color: var(--warn); }

/*
 * 🔴 Ein Hinweis IN einer betonten Karte bringt seinen eigenen hellen Grund
 *    mit — die Karte vererbt aber weisse Schrift (siehe .a-karte--betont).
 *    Ergebnis: weiss auf hellgelb, praktisch unlesbar. Am 17.08.2026 genau so
 *    auf der Seite „Ticketshop auf der Webseite" gelandet.
 *
 *    Die Regel faengt das ab, egal wer die beiden Bausteine das naechste Mal
 *    kombiniert. Ueberschriften und Aufzaehlungen ausdruecklich mit, sonst
 *    bleiben sie weiss.
 */
.a-karte--betont .a-hinweis,
.a-karte--betont .a-hinweis p,
.a-karte--betont .a-hinweis li,
.a-karte--betont .a-hinweis strong {
  color: var(--text);
}

.a-knopf[disabled] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Einheitliche Formularfelder
   .a-filter__feld ist urspruenglich fuer die waagerechte Filterleiste gebaut.
   In Formularen und Klappbereichen muss die Beschriftung UEBER dem Feld
   stehen und jedes Feld die volle Breite nutzen — sonst springen die Breiten.
   -------------------------------------------------------------------------- */

.a-formular .a-filter__feld,
.a-klapp__inhalt .a-filter__feld,
.a-karte .a-filter__feld {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin: 0 0 2px;
}

.a-formular .a-filter__feld > span,
.a-klapp__inhalt .a-filter__feld > span,
.a-karte .a-filter__feld > span {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

/* Alle Eingabeelemente gleich hoch, gleich breit, gleicher Rahmen */
.a-formular input:not([type='checkbox']):not([type='radio']),
.a-formular select,
.a-formular textarea,
.a-klapp__inhalt input:not([type='checkbox']):not([type='radio']),
.a-klapp__inhalt select,
.a-klapp__inhalt textarea,
.a-karte .a-filter__feld input:not([type='checkbox']):not([type='radio']),
.a-karte .a-filter__feld select,
.a-karte .a-filter__feld textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-klein);
  background-color: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
}

.a-formular input:focus,
.a-formular select:focus,
.a-formular textarea:focus,
.a-klapp__inhalt input:focus,
.a-klapp__inhalt select:focus,
.a-klapp__inhalt textarea:focus,
.a-karte .a-filter__feld input:focus,
.a-karte .a-filter__feld select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.a-formular input::placeholder,
.a-klapp__inhalt input::placeholder { color: var(--sehr-leise, var(--leise)); }

/* Kontrollkästchen bleiben waagerecht */
.a-formular .a-filter__feld--kasten,
.a-klapp__inhalt .a-filter__feld--kasten,
.a-karte .a-filter__feld--kasten {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
}

.a-formular .a-filter__feld--kasten input,
.a-klapp__inhalt .a-filter__feld--kasten input,
.a-karte .a-filter__feld--kasten input {
  width: 17px;
  min-height: 17px;
  height: 17px;
  margin-top: 2px;
  flex: none;
}

.a-formular .a-filter__feld--kasten > span,
.a-klapp__inhalt .a-filter__feld--kasten > span { font-weight: 400; font-size: 13px; }

/* Mehrzeiliges Textfeld (Firmenwissen für die KI) */
.a-textfeld {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r);
  background-color: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 180px;
}

.a-textfeld:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.a-formular--voll { display: block; }
.a-formular--voll .a-filter__feld { width: 100%; margin-bottom: 12px; }

/* Kennzahlen-Kacheln */
.a-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.a-kachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--karte);
  border: 0;
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--schatten);
}

/*
 * Die Zahl fuehrt, die Beschriftung folgt leise darunter — dieselbe Ordnung
 * wie in den KPI-Kacheln und in der Vorlage. Vorher war die Beschriftung
 * fett und die Zahl duenn; die Kachel las sich dadurch von unten nach oben.
 */
.a-kachel__wert {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
.a-kachel__marke  { font-size: 13px; font-weight: 500; color: var(--leise); }
.a-kachel__zusatz { font-size: 12px; color: var(--sehr-leise); }

/* Abschnittsueberschrift — traegt in .a-karte--flach (padding: 0) das Padding selbst */
.a-abschnitt {
  margin: 0;
  padding: 16px 22px 10px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}

.a-abschnitt .a-zelle__zusatz { font-family: var(--sans, inherit); margin-left: 8px; }

/* Auslastungsbalken in der Bestandstabelle */
.a-balken {
  display: inline-block;
  width: 62px;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  background-color: var(--fl-satt);
  border-radius: var(--pille);
  overflow: hidden;
}

.a-balken__fuell {
  display: block;
  height: 100%;
  background-image: var(--v-daten);
  background-size: 62px 100%;
  border-radius: var(--pille);
}

/* Summenzeile */
.a-tabelle__summe th,
.a-tabelle__summe td {
  font-weight: 600;
  border-top: 2px solid var(--linie-satt);
  background-color: var(--fl);
}

/* Belegungs-Plaketten */
.a-plakette--frei       { background-color: var(--fl);          color: var(--leise); }
.a-plakette--optioniert { background-color: var(--warn-fl);     color: var(--warn); }
.a-plakette--gebucht    { background-color: var(--gut-fl);      color: var(--gut); }
.a-plakette--gesperrt   { background-color: var(--schlecht-fl); color: var(--schlecht); }

/*
 * Zustands-Plaketten für Vorgänge (Protokoll, Verlauf am Betreiber).
 *
 * Fehlten bisher: `a-plakette--schlecht` wurde in protokoll.ejs und
 * betreiber-detail.ejs benutzt, hatte aber keine Regel — die Plakette
 * „Vorgang fehlgeschlagen" war deshalb unauffällig grau statt rot, und man
 * übersah sie in einer langen Liste. Gefunden mit scripts/ansicht-pruefen.js,
 * das jede benutzte Klasse gegen dieses Stylesheet hält.
 */
.a-plakette--gut        { background-color: var(--gut-fl);      color: var(--gut); }
.a-plakette--schlecht   { background-color: var(--schlecht-fl); color: var(--schlecht); }

/* Aufklappbare Bearbeitungsbereiche — bewusst ohne JavaScript */
.a-klapp > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.a-klapp[open] > summary { margin-bottom: 10px; }

.a-klapp__inhalt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 14px 22px 20px;
  background-color: var(--fl);
  border-top: 1px solid var(--linie);
  text-align: left;
}

/* Formulare innerhalb der Klappbereiche */
.a-formular {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
  padding: 14px;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.a-formular .a-abschnitt {
  padding: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
}

.a-formular .a-filter__feld { width: 100%; }
.a-formular .a-knopf { align-self: flex-start; margin-top: 4px; }
.a-formular .a-zelle__zusatz { line-height: 1.45; }

.a-klapp__inhalt code,
.a-leer code {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--linie);
  font-size: 12.5px;
}

/* Die Aktionsspalte darf die Tabelle nicht sprengen */
.a-tabelle td > .a-klapp { position: static; }

/* Abschnitt in einer normalen (nicht flachen) Karte: kein Extra-Padding noetig */
.a-abschnitt--frei { padding: 0 0 8px; }

/* Fliesstext fuer Erklaerungen — die Verwaltung wird nicht von Entwicklern bedient */
.a-fliess {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--leise);
}

.a-fliess--leise { padding: 0 22px 18px; margin: 0; font-size: 13px; }

.a-liste {
  margin: 0;
  padding-left: 20px;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--leise);
}

.a-liste li { margin-bottom: 7px; }

/* Alles in der betonten Karte steht auf dunklem Grund — Schrift, Zahlen,
   Verweise und die Fuellflaechen darin muessen das mitmachen. */
.a-karte--betont,
.a-karte--betont p,
.a-karte--betont li,
.a-karte--betont strong,
.a-karte--betont .a-kachel__wert,
.a-karte--betont .a-kachel__marke { color: #fff; }

.a-karte--betont .a-fliess,
.a-karte--betont .a-untertitel,
.a-karte--betont .a-kachel__zusatz,
.a-karte--betont .a-mass__einheit { color: rgba(255, 255, 255, 0.72); }

.a-karte--betont .a-link { color: var(--mint-hell); }

.a-karte--betont .a-kachel,
.a-karte--betont .a-fortschritt {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.a-karte--betont .a-fortschritt__balken {
  background-image: var(--v-schraffur), linear-gradient(90deg, #6fd8e6 0%, #7fe3c0 100%);
}

.a-knopf--gross { padding: 11px 22px; font-size: 15px; }

/* --- Bestandsgenerator --- */

.a-bestand { display: block; }

.a-bestand__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.a-bestand__reihe--fein { align-items: flex-end; }

.a-bestand__feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  padding: 14px 16px;
  background-color: var(--fl);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.a-bestand__marke { font-size: 13px; font-weight: 600; color: var(--text); }

.a-bestand__feld input {
  width: 100%;
  padding: 9px 11px;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-klein);
  background-color: var(--karte);
  color: var(--text);
}

.a-bestand__hinweis { font-size: 11.5px; color: var(--sehr-leise, var(--leise)); text-align: center; }

/* --- Preisliste --- */

.a-preise {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.a-preise__block {
  flex: 1 1 230px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background-color: var(--fl);
}

.a-preise__marke {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.a-preise__stand { margin: 10px 0 0; font-size: 13px; color: var(--leise); }

.a-preise .a-filter__feld { width: 100%; margin-bottom: 10px; }

.a-formular--breit { grid-column: 1 / -1; }

.a-klapp__inhalt--eng { grid-template-columns: 1fr; background-color: transparent; border-top: none; padding: 4px 0 0; }

/* --------------------------------------------------------------------------
   Kundenverwaltung
   -------------------------------------------------------------------------- */

.a-kachel--klickbar { text-decoration: none; transition: border-color .15s, transform .15s; }
.a-kachel--klickbar:hover { border-color: var(--gold); transform: translateY(-1px); }
.a-kachel--klickbar.ist-dringend { border-color: var(--warn); background-color: var(--warn-fl); }

/* Pipeline als waagerechte Kette */
.a-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 22px 20px;
}

.a-pipeline__stufe {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background-color: var(--fl);
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.a-pipeline__stufe:hover { background-color: var(--karte); box-shadow: var(--schatten); }
.a-pipeline__stufe.ist-aktiv {
  background-color: var(--blau-fl);
  box-shadow: inset 0 0 0 1.5px var(--blau-hell);
}

.a-pipeline__zahl {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
}
.a-pipeline__marke { font-size: 12px; color: var(--leise); line-height: 1.3; }

/* Fällige Wiedervorlagen sichtbar machen */
.a-tabelle tr.ist-faellig { background-color: var(--warn-fl); }
.a-faellig { font-weight: 600; color: var(--warn); }

.a-tabelle td .a-knopf--klein,
.a-tabelle th .a-knopf--klein {
  padding: 5px 11px;
  font-size: 12px;
}

.a-tabelle .a-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.a-plakette--stufe { background-color: var(--info-fl); color: var(--info); }
.a-plakette--einstufung {
  margin-left: 6px;
  background-color: var(--gold);
  color: var(--tanne-tief, #fff);
  padding: 2px 7px;
  font-size: 10.5px;
}

/* Kontaktverlauf als Zeitleiste */
.a-verlauf {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--linie);
  max-height: 320px;
  overflow-y: auto;
}

.a-verlauf__eintrag { position: relative; padding: 0 0 14px; }

.a-verlauf__eintrag::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gold);
}

.a-verlauf__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.a-verlauf__zeit { font-size: 11.5px; color: var(--leise); }
.a-verlauf__wer  { font-size: 11.5px; font-weight: 600; color: var(--text); }
.a-verlauf__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* Kontrollkästchen mit Beschriftung daneben statt darunter */
.a-filter__feld--kasten {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.a-filter__feld--kasten input { width: auto; margin: 0; }
.a-filter__feld--kasten span { font-size: 13px; color: var(--text); }

@media (max-width: 700px) {
  .a-klapp__inhalt { grid-template-columns: 1fr; padding: 12px 14px 16px; }
  .a-abschnitt { padding: 14px 14px 8px; }
  .a-bestand__feld { min-width: 120px; flex: 1 1 120px; }
  .a-pipeline { padding: 4px 14px 16px; }
  .a-pipeline__stufe { flex: 1 1 calc(50% - 4px); }
}

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

/* ==========================================================================
   Hüttenplan (Lageplan-Editor)

   Aufbau: eine "Buehne" mit festem Ausschnitt und verstecktem Ueberlauf, darin
   eine "Flaeche", die als Ganzes verschoben und skaliert wird. Die Marker
   sitzen mit left/top in Prozent auf der Flaeche und wandern damit automatisch
   mit — die Nummer klebt am Marker, weil sie sein Kind ist.

   Die Marker bekommen ueber --gegen-zoom eine Gegenskalierung. Ohne die wuerde
   ein Marker beim Hineinzoomen mitwachsen und bei 400 % den halben Plan
   verdecken.
   ========================================================================== */

.a-plan { padding-bottom: 14px; }

/* --- Werkzeugleiste ------------------------------------------------------ */

.a-plan__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 14px;
}

.a-plan__modus {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linie-satt);
  border-radius: 10px;
  background-color: var(--fl);
}

.a-plan__modus-wahl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 148px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  background-color: transparent;
  font-family: inherit;
  color: var(--leise);
  text-align: left;
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease, box-shadow .13s ease;
}

.a-plan__modus-wahl:hover { color: var(--text); }

.a-plan__modus-wahl.ist-aktiv {
  background-color: var(--karte);
  border-color: var(--linie-satt);
  color: var(--tanne);
  box-shadow: var(--schatten);
}

.a-plan__modus-wahl.ist-aktiv .a-plan__modus-name { color: var(--tanne); }

.a-plan__modus-name { font-size: 13.5px; font-weight: 600; }
.a-plan__modus-text { font-size: 11.5px; color: var(--sehr-leise); }

.a-plan__modus-hinweis {
  flex: 1 1 240px;
  min-width: 200px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--leise);
}

.a-plan__werkzeuge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.a-plan__zoom {
  min-width: 52px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--leise);
  text-align: center;
}

/* Speicherstand. Kein Aufpoppen, sondern ein ruhiger Text an fester Stelle —
   bei Dutzenden Aenderungen je Minute waere jede Meldung ein Stoerer. */
.a-plan__stand {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}
.a-plan__stand[data-stand="ruhe"]      { background-color: var(--gut-fl);      color: var(--gut); }
.a-plan__stand[data-stand="speichert"] { background-color: var(--info-fl);     color: var(--info); }
.a-plan__stand[data-stand="fehler"]    { background-color: var(--schlecht-fl); color: var(--schlecht); }

/* --- Buehne und Flaeche -------------------------------------------------- */

.a-plan__buehne {
  position: relative;
  height: 68vh;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r);
  background-color: var(--fl);
  cursor: grab;
  /* Ohne das scrollt die Seite, sobald man mit dem Finger im Plan zieht. */
  touch-action: none;
}

.a-plan__buehne.ist-schiebend { cursor: grabbing; }
.a-plan.ist-setzen .a-plan__buehne { cursor: crosshair; }

.a-plan__flaeche {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 0;
  --gegen-zoom: 1;
}

.a-plan__bild {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Reihenbaender ------------------------------------------------------- */

.a-plan__reihen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   EBENE 2 — gezeichneter Plan über der Grundkarte (13.08.2026)

   Liegt deckungsgleich über Ebene 1 und nimmt keine Klicks an: darüber liegen
   die Hüttenboxen, die gegriffen und verschoben werden. Ein `pointer-events`
   hier würde jedes Ziehen abfangen.

   Die Deckung stimmt nur, weil beide Bilder denselben Bildausschnitt zeigen —
   gemessen am aktiven Plan: Zeichnung 6000 × 4000, Karte 10800 × 7200, also
   dasselbe Seitenverhältnis 1,5000 bei anderer Auflösung. Verhältnisse
   auseinander, Deckung dahin; deshalb wird beim Hochladen dieselbe Ansicht
   beider Bilder erwartet.
   ------------------------------------------------------------------------- */
.a-plan__pdf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.6;
}

/* Ebenen-Schalter in der Werkzeugleiste. */
.a-plan__ebenen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.a-plan__ebene {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.a-plan__ebene input[type="checkbox"] { cursor: pointer; }

.a-plan__ebene--regler { cursor: default; }

/* Kurz gehalten, damit die Werkzeugleiste nicht umbricht. */
.a-plan__ebene--regler input[type="range"] { width: 84px; cursor: pointer; }

/* -------------------------------------------------------------------------
   Eigene Elemente: runde Formen, Bäume, Dekoration (13.08.2026)

   Alles bleibt eine Box mit Breite, Höhe und Drehung — nur das Aussehen
   unterscheidet sich. Das hält die Bedienung gleich: greifen, ziehen, drehen,
   beschriften funktioniert für jedes Element auf demselben Weg.
   ------------------------------------------------------------------------- */

/* Rund. Als Ellipse gedacht: bei gleichen Seiten ein Kreis, sonst oval —
   ein Karussell ist rund, ein Blumenbeet oft nicht.

   Doppelte Klasse mit Absicht: `.a-plan__marker--box` steht weiter unten im
   Stylesheet, und bei gleicher Spezifität gewinnt die spätere Regel. Im
   Browser war der erste gesetzte Baum deshalb eckig statt rund. Mit
   `.a-plan__marker.a-plan__marker--kreis` zählt die Reihenfolge nicht mehr —
   das gilt seit dem 01.09.2026 erst recht, seit die Box `border-radius: 0`
   trägt (Architektenplan, siehe die Begründung dort). */
.a-plan__marker.a-plan__marker--kreis { border-radius: 50%; }

/* Legende der platzierten Elemente: Gruppenzeile und Summe hervorgehoben,
   Einzelzeilen eingerückt — so ist auf einen Blick zu sehen, was zusammengehört. */
.a-tabelle__gruppe > th,
.a-tabelle__gruppe > td {
  background-color: var(--fl);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.a-tabelle__summe > th,
.a-tabelle__summe > td { border-top: 2px solid var(--linie); }

.a-zelle--eingerueckt { padding-left: 22px; }

/* Baum und Dekoration tragen ihr Zeichen mittig; die Schrift skaliert mit der
   Box, damit ein kleiner Baum kein überstehendes Symbol bekommt. */
.a-plan__marker--baum,
.a-plan__marker--dekoration {
  border-style: dashed;
  font-size: clamp(8px, 60%, 22px);
  line-height: 1;
}

/* KEINE Hintergrundfarbe hier.
   Baum und Dekoration bekommen ihre Farbe beim Anlegen in den Datensatz
   geschrieben (siehe NEU_SORTEN in js/lageplan.js). Eine CSS-Regel verlor gegen
   `.a-plan__marker.ist-frei`, das die Farbe mit gleicher Spezifität später setzt
   — der erste gesetzte Baum war golden statt grün. Am Datensatz greift dieselbe
   Angabe wie bei den Hütten aus dem PDF, und sie ist im Panel änderbar. */

/* Nicht vermietbare Elemente brauchen keine Nummer und zeigen daher keine. */
.a-plan__marker--baum .a-plan__nummer,
.a-plan__marker--dekoration .a-plan__nummer { display: none; }

/* -------------------------------------------------------------------------
   SYMBOLE IM PLAN (13.08.2026)

   Jedes von Hand gesetzte Element trägt ein SVG. Es füllt die ganze Box und
   skaliert mit ihr — ein auf zwanzig Meter gezogenes Element bleibt scharf.
   `color` kommt aus der Markerfarbe, deshalb wirken `currentColor`-Flächen im
   Symbol wie die eingestellte Farbe.
   ------------------------------------------------------------------------- */
/* Das Sprite selbst ist unsichtbar: es hält nur die Formen, die per <use>
   geholt werden. Ohne eigene Regel stünde die Klasse im HTML, ohne dass das
   Stylesheet sie kennt — die Ansichtsprüfung meldet das zu Recht. */
.a-plan__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.a-plan__symbol {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Ein Element MIT Symbol zeigt NUR das Symbol (13.08.2026, Vorgabe Fabi:
   „mach mal das Oval weg, auch kein Hintergrund — nur das Element mit den
   Bearbeitungstools herum").

   Die Box bleibt als Fläche zum Greifen und Ziehen bestehen, ist aber
   vollständig unsichtbar: keine Füllung, kein Rahmen, keine Rundung, kein
   Schatten. Sichtbar ist allein das SVG und, bei Auswahl, die Griffe.

   Drei Klassen mit Absicht: `.a-plan__marker.ist-frei` setzt Hintergrund und
   Rahmen und steht weiter unten im Stylesheet — bei gleicher Spezifität gewinnt
   die spätere Regel. Genau daran lag das grüne Oval: die Regel war da, sie kam
   nur nicht durch.
   ------------------------------------------------------------------------- */
.a-plan__marker.hat-symbol.ist-frei,
.a-plan__marker.hat-symbol.ist-besetzt,
.a-plan__marker.hat-symbol.ist-gewaehlt,
.a-plan__marker.hat-symbol.ist-gezogen,
.a-plan__marker.hat-symbol.ist-doppelt,
.a-plan__marker.hat-symbol.ist-frei:hover,
.a-plan__marker.hat-symbol.ist-besetzt:hover {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Das SVG holt seine Farbe über `currentColor` von hier. */
  color: var(--marker-farbe, var(--gold));
}

/* Auch die runde Form braucht keine Rundung mehr — die bringt das Symbol mit. */
.a-plan__marker.a-plan__marker--kreis.hat-symbol { border-radius: 0; }

.a-plan__marker.hat-symbol .a-plan__nummer { display: none; }

/* Das Schloss (13.08.2026, Vorgabe Fabi: „kein Rahmen drum, Schloss einfarbig
   und so klein wie das Rotier-Icon").

   Es ist ein Griff wie die anderen und sitzt über `--ul` unten links — damit
   gleiche Größe und gleiche Ecken-Mechanik. Anders als die Griffe trägt es aber
   KEINEN Kreis und keinen Rand: nur die Form selbst, einfarbig. Ein
   Schlagschatten hält sie auf hellen wie dunklen Karten lesbar; das ist kein
   Rahmen, sondern Kontrast. */
.a-plan__griff--schloss {
  border: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
  color: var(--tanne);
  filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.9));
}

/* Gesperrt: dieselbe Größe, nur deutlicher. */
.a-plan__griff--schloss[data-gesperrt="1"] { color: var(--schlecht, #c0453d); }

/* Das Zeichen füllt den Griff ohne Rand — dieselbe Kantenlänge wie ⟳. */
.a-plan__griff--schloss svg { width: 15px; height: 15px; display: block; }

/* -------------------------------------------------------------------------
   AUSWAHLFENSTER („Sheet")
   ------------------------------------------------------------------------- */
.a-plan__sheet {
  position: absolute;
  z-index: 40;
  top: 52px;
  left: 12px;
  width: min(420px, calc(100% - 24px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.a-plan__sheet-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--sans);
  font-size: 13px;
}

.a-plan__sheet-zu {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  padding: 0 4px;
}

/* Scrollt für sich, damit Titelfeld und Knopf immer sichtbar bleiben. */
.a-plan__sheet-inhalt {
  overflow-y: auto;
  padding: 8px 12px 12px;
}

.a-plan__sheet-gruppe {
  margin: 10px 0 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise, #6d7d8e);
}

.a-plan__sheet-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}

.a-plan__sheet-wahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  background-color: var(--flaeche);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
}

.a-plan__sheet-wahl svg { width: 30px; height: 30px; }

.a-plan__sheet-wahl:hover { border-color: var(--linie); }

.a-plan__sheet-wahl.ist-gewaehlt {
  border-color: var(--tanne);
  background-color: var(--karte);
  box-shadow: inset 0 0 0 1px var(--tanne);
}

.a-plan__sheet-fuss {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--linie);
}

.a-plan__sheet-titel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--sans);
  font-size: 11.5px;
}

.a-plan__sheet-titel input { width: 100%; }

.a-plan__sheet-hinweis {
  margin: 0;
  padding: 0 12px 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text-leise, #6d7d8e);
}

/* -------------------------------------------------------------------------
   Werkzeug „Element hinzufügen"
   ------------------------------------------------------------------------- */
.a-plan__neu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.a-plan__neu select {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 4px 6px;
}

/* Im Setzen-Modus zeigt der Zeiger über der ganzen Fläche ein Kreuz — sonst
   weiß man nicht, dass der nächste Klick etwas anlegt. */
.ist-setzen .a-plan__buehne { cursor: crosshair; }

/* Ebene 1 abgeschaltet: Platz bleibt, Bild ist unsichtbar. `display: none`
   wäre hier falsch — das Bild hält als einziges Element im Fluss die Höhe der
   Fläche, und die Boxen liegen in Prozent davon. */
.a-plan__flaeche.ohne-karte .a-plan__bild { visibility: hidden; }

/* Ebene 3 abgeschaltet: die Boxen verschwinden, die Karte bleibt greifbar. */
.a-plan__flaeche.ohne-huetten .a-plan__marker { display: none; }

.a-plan__reihe {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(16, 42, 74, .28);
  border-bottom: 1px dashed rgba(16, 42, 74, .28);
  background-color: rgba(200, 162, 74, .12);
}

.a-plan__reihe-marke {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%) scale(var(--gegen-zoom));
  transform-origin: left center;
  padding: 1px 7px;
  border-radius: 4px;
  background-color: var(--tanne);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   GEZEICHNETE HÜTTENREIHEN (14.08.2026, Vorgabe Fabi)

   Ein SVG über der Karte, dessen Koordinatensystem 0..100 in beide Richtungen
   läuft — dieselbe Einheit wie die Marker-Positionen. Es wird durch
   `preserveAspectRatio="none"` auf die Planform gestreckt; damit die Linien
   dabei nicht ungleich dick werden, tragen alle Formen im Markup
   `vector-effect="non-scaling-stroke"`.

   KEINE Klicks: darüber liegen die Hüttenboxen, die gegriffen werden. Ein
   `pointer-events` hier würde jedes Ziehen abfangen. Während des Zeichnens
   übernimmt stattdessen die Fangfläche.
   ------------------------------------------------------------------------- */

.a-plan__reihenlage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  /* BEWUSST OHNE z-index. Mit einem eigenen Stapelwert läge die Zeichnung
     über den Hüttenboxen — die haben im Ruhezustand keinen, und ein
     z-index-Element gewinnt gegen `auto` unabhängig von der Reihenfolge im
     Dokument. Ohne Angabe entscheidet die Reihenfolge: das SVG steht vor den
     Boxen, liegt also über der Karte und unter den Hütten. Genau so soll es
     sein. */
}

.a-plan__reihe-form {
  fill: var(--reihe-farbe, #2ec2d7);
  fill-opacity: .12;
  stroke: var(--reihe-farbe, #2ec2d7);
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* Der noch nicht gespeicherte Umriss: gestrichelt, damit „gezeichnet" und
   „gespeichert" nie verwechselt werden. */
.a-plan__reihe-form--entwurf {
  fill: rgba(200, 162, 74, .18);
  stroke: var(--tanne);
  stroke-width: 2px;
  stroke-dasharray: 6 4;
}

/* Die Namen liegen in einer eigenen Ebene über dem SVG — nicht darin.
   Im SVG säßen sie im gestreckten Koordinatensystem und würden breitgezogen;
   hier behalten sie ihre Form und über `--gegen-zoom` auch ihre Größe, genau
   wie die Hüttennummern. */
.a-plan__reihenmarken {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.a-plan__reihe-name {
  position: absolute;
  padding: 1px 7px;
  border-radius: 4px;
  background-color: var(--reihe-farbe, #2ec2d7);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: .04em;
  /* Nach oben aus dem Umriss heraus und gegen den Zoom skaliert: die Marke
     sitzt auf der Oberkante und deckt keine Hütte darunter zu. */
  transform: translateY(-100%) scale(var(--gegen-zoom, 1));
  transform-origin: left bottom;
  box-shadow: 0 1px 3px rgba(16, 42, 74, .35);
}

.a-plan__reihe-linie {
  fill: none;
  stroke: var(--tanne);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.a-plan__reihe-gummi {
  stroke: var(--tanne);
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  opacity: .75;
}

/* Die Vorschau der Schlusskante ist schwächer als das Gummiband zum nächsten
   Punkt: sie zeigt, was passieren WÜRDE, nicht was gerade gezogen wird. */
.a-plan__reihe-gummi--schluss { opacity: .35; }

.a-plan__reihe-punkt {
  fill: #fff;
  stroke: var(--tanne);
  stroke-width: 2px;
}

.a-plan__reihe-punkt--erster { fill: var(--tanne); }

/* Der erste Punkt leuchtet auf, sobald der Zeiger nah genug zum Schließen
   ist. Ohne dieses Zeichen klickt man ins Leere und wundert sich, warum die
   Reihe nicht zugeht. */
.a-plan__reihe-punkt.ist-ziel {
  fill: var(--gold);
  stroke: var(--gold);
  stroke-width: 4px;
}

/* Fangfläche: liegt WÄHREND des Zeichnens über dem ganzen Plan und schluckt
   jeden Zeigerdruck, damit nicht versehentlich eine Hütte verschoben wird. */
.a-plan__zeichenflaeche {
  position: absolute;
  inset: 0;
  /* Über allem, was im Plan liegt (Marker, Griffe, Umrisse) — aber unter
     Panel und Auswahlfenster (40), die während des Zeichnens bedienbar
     bleiben sollen. */
  z-index: 20;
  cursor: crosshair;
  touch-action: none;
}

.a-plan__zeichenleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--linie);
  background-color: var(--flaeche);
  font-family: var(--sans);
  font-size: 12px;
}

/* Rückgängig: die Zahl sagt, wie viele Schritte bereitliegen. Ohne sie wäre
   nicht zu sehen, ob überhaupt etwas zurückzunehmen ist — und ein Knopf, der
   nichts tut, wird für kaputt gehalten. */
.a-plan__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.a-plan__zurueck-zahl {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--tanne);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.a-plan__zurueck:disabled .a-plan__zurueck-zahl { background-color: var(--sehr-leise); }

/* --------------------------------------------------------------------------
   DRUCKANSICHT (14.08.2026, Vorgabe Fabi)

   „ein druckermodus, der zeigt dann in kleinen blasen die Bezeichnungen alle
   an, also alles so als wäre mouseover."

   Die Blase entsteht aus `data-typ-name` — derselbe Wert, den auch der
   Mouseover zeigt. Kein zweites Element im Markup, das mit den Daten
   auseinanderlaufen könnte.
   -------------------------------------------------------------------------- */

.a-plan__flaeche.ist-druck .a-plan__marker::after {
  content: attr(data-typ-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 3px;
  padding: 1px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  background-color: rgba(255, 255, 255, .94);
  color: var(--text);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  /* Gegen den Zoom und gegen die Drehung der Hütte: die Beschriftung soll
     waagerecht und in gleicher Größe stehen, auch über einer schräg
     gestellten Hütte an einer geschwungenen Straße. */
  transform: translateX(-50%) rotate(calc(-1 * var(--winkel, 0deg))) scale(var(--gegen-zoom, 1));
  transform-origin: bottom center;
  z-index: 14;
}

/* Ohne Bezeichnung keine leere Blase. */
.a-plan__flaeche.ist-druck .a-plan__marker[data-typ-name=""]::after { content: none; }

/* Beim Drucken bleibt nur der Plan: Menü, Werkzeugleiste, Panel und alle
   Kästen darunter verschwinden. Ohne diese Regeln landet die halbe
   Verwaltungsoberfläche auf dem Papier. */
@media print {
  .a-menue,
  .a-kopf,
  .a-plan__leiste,
  .a-plan__panel,
  .a-plan__sheet,
  .a-plan__fuss,
  .a-plan__zeichenleiste,
  .a-kennzahlen,
  .a-planwerkzeug,
  .a-seitenkopf,
  .a-fuss { display: none !important; }

  .a-plan,
  .a-karte { border: 0; box-shadow: none; }

  /* Der Ausschnitt wird beim Drucken NICHT beschnitten — sonst fehlt genau
     der Teil des Plans, der gerade aus dem Bild geschoben war. */
  .a-plan__buehne { overflow: visible !important; height: auto !important; }

  /* Farbflächen der Hütten müssen mitgedruckt werden; ohne diese Angabe
     lassen Browser Hintergründe im Druck weg, und der Plan wäre leer. */
  .a-plan__marker,
  .a-plan__reihe-form,
  .a-plan__reihe-name {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.a-plan__zeichenschritt { font-weight: 700; }
.a-plan__zeichenhilfe { color: var(--sehr-leise); }

.a-plan__reihe-zahl {
  margin: 10px 0 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

/* Kein Treffer im Umriss ist kein Fehler, aber eine Warnung: eine leere Reihe
   liefert am Verteilerkasten 0 kW und sieht wie eine Messung aus. */
.a-plan__reihe-zahl.ist-leer { color: var(--warn); }

.a-plan__reihe-huetten {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.a-plan__reihe-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Marker -------------------------------------------------------------- */

.a-plan__marker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--karte);
  /* Eckig, nicht gerundet: ein Marker steht für ein Bauwerk mit rechten
     Winkeln. Rundung bleibt der ausdrücklich gewählten Form `--kreis`
     vorbehalten (Bäume, Dekoration). */
  border-radius: 0;
  background-color: var(--marker-farbe, var(--gold));
  color: #fff;
  font-family: var(--sans);
  cursor: grab;
  box-shadow: 0 1px 3px rgba(16, 42, 74, .35);
  transform: translate(-50%, -50%) scale(var(--gegen-zoom));
  /* Ohne diese Angabe skaliert der Marker um seine Ecke und laeuft beim Zoomen
     von seiner Position weg. */
  transform-origin: center center;
  transition: box-shadow .12s ease;
}

.a-plan__marker:hover { box-shadow: 0 2px 8px rgba(16, 42, 74, .45); z-index: 4; }
.a-plan__marker:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 5; }

.a-plan__nummer {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  /* Der Plan darunter ist beliebig hell oder dunkel — ohne Schattenkante
     verschwindet die Nummer auf manchen Untergruenden. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* Frei und besetzt muessen auf einen Blick unterscheidbar sein, auch ohne
   Farbwahrnehmung: besetzt ist gefuellt und dunkel umrandet, frei ist hell
   und gestrichelt. */
.a-plan__marker.ist-frei {
  background-color: var(--karte);
  border-style: dashed;
  border-color: var(--marker-farbe, var(--linie-satt));
  color: var(--text);
}
.a-plan__marker.ist-frei .a-plan__nummer { text-shadow: none; }

.a-plan__marker.ist-besetzt {
  background-color: var(--marker-farbe, var(--tanne));
  border-color: var(--tanne-tief);
  color: #fff;
}

.a-plan__marker.ist-doppelt {
  border-color: var(--schlecht);
  border-style: solid;
  box-shadow: 0 0 0 3px var(--schlecht-fl), 0 1px 3px rgba(16, 42, 74, .35);
  z-index: 6;
}

/* Ausgewählte Hütte: erkennbar, aber ohne die Zeichnung darunter zu verdecken
   (13.08.2026, Vorgabe Fabi).

   Vorher lag ein 3 px starker Ring mit 2 px Abstand um die Box. Zusammen mit der
   deckenden Füllung (siehe unten) war von der Hütte im Plan nichts mehr zu sehen —
   genau die Stelle, die man beim Platzieren vergleichen will. Jetzt zeigt ein
   dünner heller Rand INNEN, welche Box gewählt ist; er braucht keinen Platz
   außerhalb und deckt nichts ab. */
.a-plan__marker.ist-gewaehlt {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--tanne);
  z-index: 7;
}

.a-plan__marker.ist-gezogen {
  cursor: grabbing;
  opacity: .85;
  z-index: 9;
}

/* Das Tauschziel im Reihen-Modus. Es muss VOR dem Loslassen sichtbar sein —
   sonst tauscht man auf Verdacht. */
.a-plan__marker.ist-tauschziel {
  outline: 3px dashed var(--info);
  outline-offset: 3px;
  z-index: 8;
}

.a-plan__fuss {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--sehr-leise);
}

/* --- Panel -------------------------------------------------------------- */

.a-plan__panel {
  position: fixed;
  top: 74px;
  right: 16px;
  z-index: 40;
  width: 320px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 16px 18px 18px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r);
  background-color: var(--karte);
  box-shadow: 0 8px 28px rgba(16, 42, 74, .18);
}

.a-plan__panel[hidden] { display: none; }

.a-plan__panel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.a-plan__panel-kopf .a-abschnitt { margin: 0; }

.a-plan__panel-inhalt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dieselbe Feldgestalt wie in den Karten — das Panel ist keine Karte, muesste
   die Regeln also sonst nicht erben. */
.a-plan__panel .a-filter__feld {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin: 0;
}

.a-plan__panel .a-filter__feld > span {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.a-plan__panel input:not([type="color"]),
.a-plan__panel select,
.a-plan__panel textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-klein);
  background-color: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}

.a-plan__panel input[type="color"] {
  width: 56px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-fein);
  background-color: var(--karte);
}

.a-plan__panel textarea { resize: vertical; }

.a-plan__panel input:focus,
.a-plan__panel select:focus,
.a-plan__panel textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.a-plan__panel-lage,
.a-plan__panel-abgleich,
.a-plan__panel-leistung {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--leise);
}

.a-plan__panel-abgleich {
  padding: 7px 10px;
  border-radius: var(--r-fein);
  background-color: var(--info-fl);
  color: var(--info);
}

/*
 * Die Anschlussleistung bleibt absichtlich ruhig (wie die Lage-Zeile): sie ist
 * eine Angabe fuer den Aufbau, kein Widerspruch, der auffallen muss. Der
 * Buchungs-Abgleich daneben ist hervorgehoben, weil er auf einen Fehler
 * hinweist.
 */
.a-plan__panel-betreiber {
  margin: 8px 0 0;
}

.a-plan__panel-abgleich[hidden],
.a-plan__panel-leistung[hidden],
.a-plan__panel-betreiber[hidden] { display: none; }

.a-plan__panel-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* --- Legende, Upload, Listen -------------------------------------------- */

.a-plan__legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.a-plan__legende-eintrag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px;
}

.a-plan__legende-farbe {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--linie-satt);
  border-radius: 3px;
  vertical-align: middle;
}

.a-plan__legende-form,
.a-plan__upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.a-plan__upload-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 18px;
}

.a-plan__feld--breit textarea { min-height: 120px; font-family: var(--mono); font-size: 13px; }

.a-plan__fein { font-size: 12px; color: var(--sehr-leise); }

.a-plan__frei {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 1100px) {
  .a-plan__panel {
    position: static;
    width: auto;
    max-height: none;
    margin-bottom: 18px;
  }
  .a-plan__werkzeuge { margin-left: 0; }
}

@media (max-width: 700px) {
  .a-plan__buehne { height: 58vh; }
  .a-plan__modus { width: 100%; }
  .a-plan__modus-wahl { flex: 1 1 0; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Kopfleiste auf schmalen Schirmen
   --------------------------------------------------------------------------
   Hier stand bis 15.08.2026 der Regelblock der senkrechten Seitenleiste
   (Klappfelder eingerueckt, Leiste als Schublade ueber dem Inhalt). Die
   Navigation liegt seit dem Umbau wieder in der Kopfzeile; die Regeln waeren
   nicht nur ueberfluessig, sie stuenden SPAETER in der Datei als die neuen
   und wuerden sie ueberschreiben.

   Was bleibt, ist die Frage, die sie beantworten sollten: was passiert, wenn
   der Platz nicht reicht. Antwort in drei Stufen — erst faellt der Text des
   Kontoblocks weg, dann rutscht die Navigation in eine eigene Zeile, zuletzt
   auch der Markenname.
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  /* Name und Funktion sind der erste verzichtbare Teil: das runde Zeichen
     mit den Initialen fuehrt genauso gut zum Konto. */
  .a-konto { padding: 4px; }
  .a-konto__text { display: none; }
}

/* Der Menueknopf und der Schleier gehoeren der schmalen Ansicht. */
.a-menue-knopf,
.a-menue-schleier { display: none; }

@media (max-width: 1000px) {
  .a-buehne { padding: 10px; display: block; }
  .a-schale { border-radius: 20px; min-height: calc(100vh - 20px); }
  .a-kopf { padding: 14px 16px 0; position: relative; }
  .a-inhalt { padding: 18px 16px 34px; }
  .a-fuss { margin: 0 16px; }

  /*
   * Auf dem Telefon ist die Leiste kein Panel, sondern eine Schublade: sie
   * liegt UEBER dem Inhalt und ist zu, bis der Knopf sie oeffnet. Nebeneinander
   * blieben von 390 Punkten Breite keine 130 fuer den Inhalt.
   */
  .a-leiste {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    z-index: 30;
    box-shadow: var(--schatten-hoch);

    /*
     * 🔴 `dvh` und NICHT `vh` (18.08.2026, Fabi: „ich kann weder den letzten
     *    Punkt anwählen noch Benachrichtigungs Icon klicken").
     *
     *    `100vh` ist auf Android Chrome und iOS Safari die Höhe des Fensters
     *    OHNE die Adressleiste — also mehr, als man tatsächlich sieht, solange
     *    sie eingeblendet ist. Gemessen auf Fabis Gerät: rund 170 Punkte
     *    Unterschied. Das Blatt war damit höher als der Schirm und ragte unten
     *    heraus; „Hilfe" als letzter Punkt lag im unerreichbaren Teil.
     *
     *    Und es half kein Scrollen: das Blatt hatte innen nichts zu scrollen
     *    (`scrollHeight` = `clientHeight`), also scrollte stattdessen die
     *    SEITE. Dabei wanderte die Kopfzeile nach oben aus dem Bild — sie
     *    steht im Fluss, während das Blatt fixiert bleibt. Genau so
     *    verschwand die Glocke. Ein Fehler, zwei Symptome.
     *
     *    `dvh` folgt der ein- und ausfahrenden Adressleiste. Die `vh`-Zeile
     *    davor bleibt als Rückfall für Browser, die `dvh` nicht kennen.
     */
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .a-menue-schalter:checked ~ .a-buehne .a-leiste { display: flex; }

  /*
   * Solange die Schublade offen ist, steht die Seite still.
   *
   * Das ist die zweite Hälfte desselben Fehlers: ohne Sperre nimmt ein Wisch
   * im Menü die Seite mit, sobald das Blatt an seinem Ende angekommen ist.
   * Die Kopfzeile fährt dann nach oben weg, und Glocke, Sprache und Konto
   * sind nicht mehr erreichbar — das Blatt bleibt fixiert stehen und liegt
   * an ihrer Stelle.
   *
   * `overscroll-behavior: contain` steht bereits an der Leiste und hält den
   * Wisch INNERHALB des Blattes; diese Regel deckt den Rest ab (Wisch neben
   * dem Blatt, auf dem Schleier).
   *
   * Über `:has()` und ohne Skript — dasselbe Prinzip wie beim Menüschalter
   * selbst: was ohne JavaScript funktioniert, funktioniert auch, während es
   * noch lädt.
   */
  html:has(.a-menue-schalter:checked),
  html:has(.a-menue-schalter:checked) body {
    overflow: hidden;
  }

  /*
   * 🔴 Hier stand kurzzeitig eine zweite Regel, die die Kopfzeile bei offenem
   *    Menü zusätzlich `sticky` machen sollte — als Netz für den Fall, dass
   *    die Sperre nicht greift. Sie ist wieder heraus, weil sie NICHT WIRKT:
   *    `position: sticky` klebt am nächsten scrollenden Vorfahren, und den
   *    nimmt ihr die Sperre darüber gerade weg. Gemessen am 18.08.2026 —
   *    Kopf auf `sticky`, `z-index: 40`, und die Glocke stand nach einem
   *    Sprung trotzdem bei −275 Punkten.
   *
   *    Eine Regel, die Schutz verspricht und keinen gibt, ist schlechter als
   *    keine: sie lädt dazu ein, sich auf sie zu verlassen.
   *
   *    Nötig ist sie auch nicht. Der Grund, warum jemand bei offenem Menü
   *    überhaupt scrollt, war das zu hohe Blatt — und das ist mit `dvh` weg.
   */

  /* Die Marke steht in der Schublade schon oben — in der Kopfzeile waere sie
     doppelt. Dort bleibt der Menueknopf. */
  .a-kopf__innen { justify-content: space-between; }

  /*
   * Der Knopf, der die Schublade oeffnet. Auf breiten Schirmen ist er nicht
   * da — dort steht die Leiste ohnehin offen daneben.
   */
  .a-menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: var(--pille);
    background-color: var(--karte);
    box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    order: 2;
  }

  /* Drei Striche aus einem Element. */
  .a-menue-knopf__striche,
  .a-menue-knopf__striche::before,
  .a-menue-knopf__striche::after {
    display: block;
    width: 16px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
  }

  .a-menue-knopf__striche { position: relative; }

  .a-menue-knopf__striche::before,
  .a-menue-knopf__striche::after { content: ''; position: absolute; left: 0; }
  .a-menue-knopf__striche::before { top: -5px; }
  .a-menue-knopf__striche::after { top: 5px; }

  /* Offen wird aus den Strichen ein Kreuz — dasselbe Ziel schliesst wieder. */
  .a-menue-schalter:checked ~ .a-buehne .a-menue-knopf__striche { background-color: transparent; }
  .a-menue-schalter:checked ~ .a-buehne .a-menue-knopf__striche::before { top: 0; transform: rotate(45deg); }
  .a-menue-schalter:checked ~ .a-buehne .a-menue-knopf__striche::after { top: 0; transform: rotate(-45deg); }

  .a-kopf__rechts { flex-shrink: 1; margin-left: auto; }

  /* In der Schublade darf jeder Punkt etwas groesser sein — Daumen statt Maus. */
  .a-nav__link { padding: 12px 14px; font-size: 15px; }
  .a-nav__eintrag { padding: 10px 12px; }

  /* Die Ueberschrift ist hier nicht nur Beschriftung, sondern der Schalter zum
     Zuklappen. Mit 6 px Polsterung waere sie 31 px hoch — zu wenig fuer einen
     Daumen. 12 px bringen sie auf gut 44 px. */
  .a-nav__abschnitt { padding: 12px 14px; font-size: 12.5px; }

  /* Die Erklaerungszeile faellt weg: auf 390 Punkten Breite macht sie aus
     jedem Eintrag drei Zeilen. */
  .a-nav__eintrag-text { display: none; }

  /* Die zweite Zeile wandert mit ins Blatt. */
  .a-unternav {
    order: 5;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
  }

  /*
   * Ist das Menue offen, tritt die zweite Leiste zurueck. Sie gehoert zum
   * Bereich, in dem man GERADE ist — waehrend man einen anderen sucht, ist sie
   * eine zweite Auswahl neben der ersten und lenkt nur ab.
   */
  .a-menue-schalter:checked ~ .a-buehne .a-unternav { display: none; }

  /* Der Schleier liegt ueber dem Inhalt, aber unter dem Blatt. */
  .a-menue-schalter:checked ~ .a-buehne .a-menue-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(16, 42, 74, 0.35);
  }

  .a-kopf { z-index: 30; }
}

@media (max-width: 640px) {
  /* Das Markenzeichen allein genuegt — der Name kostet hier die halbe Zeile. */
  .a-marke__text { display: none; }

  .a-titel { font-size: 24px; }
  .a-kpis { gap: 12px; }
  .a-karte { padding: 18px 16px; }
  .a-inhalt { padding: 16px 12px 30px; }
  .a-kopf { padding: 12px 12px 0; }
  .a-fuss { margin: 0 12px; }
}

/* --------------------------------------------------------------------------
   Panel schwebt — der Plan darf sich beim Öffnen NICHT verschieben

   Hier stand vorher eine Regel, die dem Panel Platz im Inhaltsbereich einräumte
   (padding-right). Gut gemeint, in der Hand aber schlecht: die Bühne wurde
   dadurch um rund 350 Punkte schmaler, und die gerade angeklickte Hütte sprang
   messbar 54 Punkte nach links und 110 nach oben — weg vom Mauszeiger. Wer eine
   Hütte anklickt und dann verschieben will, greift ins Leere.

   Das Panel schwebt deshalb über dem Plan und verschiebt nichts. Verdeckt es
   eine Hütte, zieht man es am Kopf beiseite (siehe unten) — das ist eine
   Bewegung, die der Nutzer auslöst, und keine, die ihm der Plan aufzwingt.
   -------------------------------------------------------------------------- */

/* Absichtlich keine Layout-Änderung mehr an .a-inhalt. Die Klasse bleibt
   erhalten, weil das Skript sie setzt und andere Regeln daran hängen können. */

/* --------------------------------------------------------------------------
   Markergröße und Durchsicht

   Auf einem echten Lageplan ist eine Hütte von 2,5 x 2,5 m nur rund zehn
   Bildpunkte groß. Ein deckender Marker von 30 Punkten verdeckt sie dann
   vollständig — man sieht nur noch Kästchen und kann nicht mehr prüfen, ob der
   Marker überhaupt auf der richtigen Hütte sitzt.

   Zwei Maßnahmen dagegen:
   1. Freie Marker sind halbdurchlässig; die Hütte darunter bleibt sichtbar.
      Die Nummer bekommt dafür einen hellen Textschatten und bleibt auf jedem
      Untergrund lesbar.
   2. Die Größe ist umschaltbar. Sie ist eine Ansichtsvorliebe, kein Merkmal des
      Plans — sie wird deshalb im Browser gemerkt und nicht in der Datenbank.
   -------------------------------------------------------------------------- */

.a-plan { --marker-groesse: 30px; --marker-schrift: 12px; }

.a-plan[data-groesse="klein"]  { --marker-groesse: 20px; --marker-schrift: 9px; }
.a-plan[data-groesse="mittel"] { --marker-groesse: 26px; --marker-schrift: 11px; }
.a-plan[data-groesse="gross"]  { --marker-groesse: 34px; --marker-schrift: 13px; }

.a-plan__marker {
  width: var(--marker-groesse);
  height: var(--marker-groesse);
}

.a-plan__nummer { font-size: var(--marker-schrift); }

/* Freie Hütten: durchscheinend, damit der Plan darunter lesbar bleibt. */
.a-plan__marker.ist-frei {
  background-color: rgba(255, 255, 255, 0.55);
}

.a-plan__marker.ist-frei .a-plan__nummer {
  color: var(--text);
  /* Heller Schein um die Ziffern — sonst verschwinden sie auf dunklen
     Luftbildstellen wie Wasser oder Schatten. */
  text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 6px rgba(255, 255, 255, .7);
}

/* Beim Überfahren und beim Ziehen wird der Marker deckend — dann will man ihn
   sehen, nicht durch ihn hindurch.

   NICHT mehr im ausgewählten Zustand (13.08.2026): eine ausgewählte Hütte bleibt
   in ihrer Farbe und halbdurchsichtig, damit die gezeichnete Hütte darunter
   sichtbar bleibt. Sonst prüft man beim Platzieren gegen eine weiße Fläche. */
.a-plan__marker.ist-frei:hover,
.a-plan__marker.ist-frei.ist-gezogen,
.a-plan__marker.ist-frei.ist-tauschziel {
  background-color: var(--karte);
}

.a-plan__groesse {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-klein);
  background-color: var(--fl);
}

.a-plan__groesse-wahl {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-fein);
  background-color: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--leise);
  cursor: pointer;
}

.a-plan__groesse-wahl.ist-aktiv {
  background-color: var(--karte);
  border-color: var(--linie-satt);
  color: var(--tanne);
  font-weight: 600;
}

/* ==========================================================================
   Hütten als Boxen, Vollbild

   Die Hütte ist ein Rechteck in ihrer echten Größe und kein Punkt. Der
   Unterschied ist nicht kosmetisch: nur so deckt der Marker die im Planbild
   gemalte Hütte ab, und nur so lässt sich eine Hütte wirklich verschieben.

   Wichtig ist der Umgang mit dem Zoom:
   - Die BOX skaliert mit dem Plan. Sie liegt auf der Karte wie ein Gebäude
     und muss beim Hineinzoomen mitwachsen.
   - Die NUMMER skaliert GEGEN den Zoom. Sie ist eine Beschriftung und soll
     bei jeder Vergrößerung gleich groß und lesbar bleiben.
   Deshalb hat nur die Nummer die Gegenskalierung, nicht der Marker.
   ========================================================================== */

.a-plan__marker--box {
  /* Macht die Box zum Container: das Kuerzel darin bemisst seine Schrift
     in cq-Einheiten und waechst und schrumpft dadurch MIT der Box — bei
     jedem Zoom, ohne Skript. Die Groesse der Box selbst ist explizit
     gesetzt, die Size-Containment-Bedingung ist also erfuellt. */
  container-type: size;
  width: var(--box-breite, 24px);
  height: var(--box-hoehe, 24px);

  /*
   * 🔴 KEINE MINDESTGRÖSSE UND KEIN RADIUS — das hier ist ein Architektenplan
   *    (01.09.2026, Vorgabe Fabi: „die elemente müssen eckig sein, nicht
   *    abgerundet, die kontur muss genau auf die vorgabe passen … die größe
   *    muss auch perfekt passen, es ist ein architektenplan").
   *
   *    Vorher stand hier `min-width: 10px; min-height: 10px` — gedacht als
   *    Griffhilfe, damit eine 2,5-m-Hütte bei Übersichtszoom anklickbar
   *    bleibt. Der Preis dafür war die Maßtreue, und zwar drastisch.
   *    Gemessen an denselben 72 Hütten, nur bei verschiedener Planbreite:
   *
   *      1200 px     0 von 72 verfälscht
   *       800 px    61 von 72   (6,5 × 8,8 wurde zu 10 × 10)
   *       600 px    68 von 72   (4,9 × 6,6 wurde zu 10 × 10)
   *       400 px    72 von 72   (3,2 × 4,4 wurde zu 10 × 10)
   *
   *    Bei Übersichtszoom stimmte also KEINE einzige Hütte mehr — und weil
   *    die Mindestgröße auf beide Seiten wirkt, wurde aus jedem Rechteck ein
   *    Quadrat. Das Seitenverhältnis, das eine 6 × 3 von einer 3 × 3
   *    unterscheidet, war weg.
   *
   *    Die Greifbarkeit ist nicht verschwunden, sondern umgezogen: `::before`
   *    legt eine unsichtbare Trefferfläche über die Box, mindestens 14 Pixel.
   *    Angeklickt wird die, gezeichnet wird das echte Maß.
   *
   *    `border-radius: 3px` war bei einer 10 Pixel breiten Box fast ein
   *    Drittel der Breite. Eine Hütte hat rechte Winkel; auf einem Plan, der
   *    gegen eine Vorlage gelegt wird, muss die Ecke die Ecke treffen.
   */
  border-radius: 0;
  border-width: 1.5px;
  transform: translate(-50%, -50%) rotate(var(--winkel, 0deg));
}

/*
 * Die Trefferfläche — unsichtbar, mindestens 14 × 14 Pixel, mittig über der
 * Box. Sie ersetzt die frühere Mindestgröße: die Maus trifft sie, das Auge
 * sieht nur die maßhaltige Box.
 *
 * 🔴 Sie liegt HINTER dem Inhalt (`z-index: -1`), sonst verdeckte sie die
 *    Nummer und finge Klicks ab, bevor sie den Knopf erreichen.
 */
/*
 * 🔴 KEIN SCHLAGSCHATTEN AUF DER BOX (01.09.2026).
 *
 *    `.a-plan__marker` gibt allen Markern `box-shadow: 0 1px 3px` — auf dem
 *    Luftbild hebt das ein Symbol angenehm ab. Bei einer maßhaltigen Box ist
 *    es das Gegenteil von hilfreich: drei Pixel Unschärfe an einer zehn Pixel
 *    breiten Hütte verwischen genau die Kante, die auf der Vorlage liegen
 *    soll, und der Versatz nach unten lässt sie tiefer wirken, als sie steht.
 *
 *    Punkt-Marker behalten den Schatten — sie sind Symbole, keine Maßangabe.
 */
.a-plan__marker--box { box-shadow: none; }

.a-plan__marker--box:hover { box-shadow: none; }

/*
 * 🔴 ::before, NICHT ::after (01.09.2026, Fabi: "auch die pill ist nicht
 *    richtig"): Das ::after des Markers gehoert der Hinweis-Pille beim
 *    Ueberfahren (`[data-info]:hover::after`, weiter unten) und der
 *    Druckansicht. Als die Trefferflaeche zuerst auf ::after lag, erbten
 *    beide deren Breite `max(100%, 14px)` — die Pille wurde auf Kastengroesse
 *    gequetscht und der Masstext abgeschnitten.
 */
.a-plan__marker--box::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 14px);
  height: max(100%, 14px);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/*
 * Das Bauart-Kuerzel IM Kasten (01.09.2026, Vorgabe Fabi: "innerhalb des
 * kasten" muss "die abkürzung platz finden wie M3x2 oder M6x4").
 *
 * 🔴 ANDERS als die Nummer wird das Kuerzel NICHT zurueckgedreht und NICHT
 *    gegen den Zoom skaliert: Es laeuft die lange Seite der Huette entlang
 *    und waechst mit ihr — wie die Beschriftung auf dem Architektenplan
 *    selbst. Die Nummer dagegen bleibt aufrecht und konstant gross, sie ist
 *    Bedienelement, keine Planbeschriftung.
 *
 * 🔴 Die Schriftgroesse rechnet mit der TEXTLAENGE (--kz-laenge, gesetzt in
 *    lageplan.ejs und lageplan.js): 160cqw geteilt durch die Zeichenzahl
 *    haelt auch "F8,5x2,15T" im Kasten, waehrend ein kurzes "M3x2" gross
 *    werden darf. 62cqh deckelt gegen die kurze Kante.
 */
.a-plan__kuerzel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  /*
   * 🔴 Mit Luft zur Kontur (01.09.2026, Fabi: "die typen dynamisch größe
   *    anpassbar machen das sie ins feld passen ohne die kontur zu
   *    berühren"). Die erste Formel (62cqh / 160cqw je Zeichen) fuellte
   *    83 % der Kastenbreite — der Text KLEBTE an den Kanten. Jetzt:
   *    Ziel: gross, aber nie an der Kante. 🔴 cq-Einheiten messen die
   *    CONTENT-Box (ohne Rand!) — gemessen: 100cqh einer 6-px-Box sind nur
   *    3,97 px. Die 62cqh/133cqw sind darauf geeicht: die Tinte bleibt
   *    unter ~72 % der Breite und ~55 % der Hoehe der sichtbaren Box.
   */
  font-size: clamp(1px, min(62cqh, calc(133cqw / max(var(--kz-laenge, 5), 3))), 34px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  /*
   * 🔴 Dunkle Schrift mit weissem Schein — IMMER, unabhaengig vom Status
   *    (01.09.2026, Fabi: "die Zahlen sind weiß, man kann sie auf weißem
   *    hintergrund nicht sehen").
   *
   *    Vorher erbte das Kuerzel die Markerfarbe: bei "besetzt" WEISS. Die
   *    Fuellfarbe der Box ist aber frei waehlbar — auf einer hellen oder
   *    weissen Huette verschwand die Beschriftung vollstaendig. Dunkle
   *    Tinte mit hellem Schein ist der Kartenstandard: lesbar auf jeder
   *    Fuellung, auch auf dunklen, weil der Schein die Kontur traegt.
   */
  color: #0f1620;
  text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .6);
}

/*
 * 🔴 HIER STAND eine @container-Regel, die das Kuerzel unter 26 px
 *    Kastenbreite ausblendete — entfernt am 01.09.2026 (Fabi: "jetzt steht
 *    gar nichts mehr drin").
 *
 *    Der Denkfehler: Der Plan zoomt per transform: scale. Die LAYOUT-Groesse
 *    der Kaesten bleibt dabei konstant klein (eine T1 misst ~10 Layout-Pixel,
 *    egal wie weit man hineinzoomt) — die Container-Abfrage sah also IMMER
 *    "zu klein" und versteckte jede Beschriftung dauerhaft.
 *
 *    Stattdessen: keine Untergrenze. Die Schrift skaliert visuell mit dem
 *    Zoom, genau wie die Beschriftung des Architektenplans selbst — weit
 *    herausgezoomt winzig (wie der Plan auch), beim Hineinzoomen gross und
 *    scharf (Text wird als Vektor transformiert).
 */


.a-plan__marker--punkt {
  width: var(--marker-groesse);
  height: var(--marker-groesse);
  transform: translate(-50%, -50%) rotate(var(--winkel, 0deg)) scale(var(--gegen-zoom));
}

/*
 * 🔴 DIE NUMMER: schwarzer Punkt UEBER der Kiste, IN ZEILENRICHTUNG der
 *    Beschriftung (01.09.2026, dritte Fassung nach Fabis Photoshop-Vorlage:
 *    "Du hast die Typbeschreibung … Und dadrüber will ich einen schwarzen
 *    dot mit der Nummer drinne haben. In derselben Zeilenrichtung wie auch
 *    die Beschreibung, über die Kiste.").
 *
 *    Der Punkt ist Teil der Huetten-Beschriftung: Er DREHT MIT der Huette
 *    (keine Aufrichtung, keine Gegenrotation — auch die Ziffer laeuft in
 *    der Leserichtung des Kuerzels, wie auf Fabis Vorlage), er waechst mit
 *    ihr, und er sitzt mittig ueber der oberen Langkante — wie eine zweite
 *    Zeile ueber dem Kuerzel.
 *
 *    Die beiden Vorfassungen (mittig ueber der Bildschirm-Huelle; dann an
 *    der Bildschirm-Ecke) rechneten mit Trigonometrie gegen die Drehung —
 *    genau das war falsch. Ein Kind des gedrehten Markers steht von selbst
 *    richtig: bottom: 100% IST "ueber der Kiste" im Zeilen-System.
 */
.a-plan__marker.a-plan__marker--box .a-plan__nummer {
  position: absolute;
  left: 50%;
  bottom: 100%;
  /*
   * 🔴 ZEHNFACH GROSS GELAYOUTET, GEOMETRISCH AUF EIN ZEHNTEL VERKLEINERT
   *    (02.09.2026, Fabi: "die zahlen sind nicht mittig zum punkt, teilweise
   *    sind die kreise oval").
   *
   *    Der Punkt misst im Layout unter 4 Pixel — die Ziffern-Glyphe wird bei
   *    so winziger Schrift aufs Pixelraster gelegt und sitzt daneben, sobald
   *    der Zoom sie vergroessert; auch die Kreisform franst. Deshalb: alle
   *    Masse mal zehn (Schrift ~24 px statt 2,4 px), und scale(0.1) bringt
   *    das Ergebnis als VEKTOR auf die Zielgroesse — rund und mittig auf
   *    jeder Zoomstufe. transform-origin unten Mitte haelt die Unterkante
   *    an der Kiste fest.
   */
  transform: translate(-50%, -8%) scale(0.1);
  transform-origin: 50% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Feste Masse statt cqh (02.09.2026, Fabi: bei den grossen Huetten war
     "die zahl groesser als alles andere") — cqh wuchs mit der Huettenhoehe,
     T2mod bekam einen 2,3-fachen Punkt. Alle Marker teilen denselben
     Plan-Layoutraum und der Zoom laeuft per transform, also ist eine feste
     Pixelgroesse (im 10x-Layout, geeicht auf die kleinen Huetten: Punkt
     44 px, Schrift 27 px) fuer JEDE Huette gleich gross und zoomt mit. */
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10, 12, 16, 0.94);
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 0 0 1.6px rgba(255, 255, 255, 0.65);
  pointer-events: none;
  z-index: 3;
}

/* Ohne Nummer kein Punkt — ein leerer schwarzer Kreis waere nur Laerm. */
.a-plan__marker--box .a-plan__nummer:empty { display: none; }

/*
 * Dienst-Punkt (02.09.2026, Vorgabe Fabi): Erste Hilfe, Lager und
 * Sicherheit tragen "wie die nummern einen kreis" mit Symbol darin,
 * "nur halt auf die andere seite der huette". Exakt der Nummern-Punkt,
 * gespiegelt: Oberkante an der Unterkante der Kiste verankert, gleiche
 * 10x-Masse + scale(0.1) (Vektor-Rendering, siehe Nummern-Punkt oben).
 */
.a-plan__marker.a-plan__marker--box .a-plan__dienst {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 8%) scale(0.1);
  transform-origin: 50% 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(10, 12, 16, 0.94);
  color: #fff;
  box-shadow: 0 0 0 1.6px rgba(255, 255, 255, 0.65);
  pointer-events: none;
  z-index: 3;
}

.a-plan__marker--box .a-plan__dienst svg { width: 26px; height: 26px; display: block; }

.a-plan__marker--box .a-plan__dienst:empty { display: none; }

/*
 * NUR-LESEN, weil jemand anderes am Plan arbeitet (07.09.2026).
 *
 * Die Marker bleiben sichtbar und anklickbar — ansehen darf jeder, und das
 * Panel zeigt weiter, wer in welcher Huette sitzt. Gesperrt ist das
 * ANFASSEN: kein Ziehen, keine Griffe. Die Felder im Panel schaltet
 * public/js/lageplan.js einzeln ab; hier steht nur, was man sieht.
 */
.a-plan.ist-nur-lesen .a-plan__marker { cursor: pointer; }
.a-plan.ist-nur-lesen .a-plan__griff { display: none; }
.a-plan.ist-nur-lesen .a-plan__flaeche { touch-action: auto; }

/* Eine Box, die gerade gezogen wird, bekommt einen deutlichen Rand — bei
   kleinen Hütten ist die Füllung allein zu unauffällig. */
.a-plan__marker--box.ist-gezogen {
  outline: 2px solid var(--tanne);
  outline-offset: 1px;
}

/* --- Vollbild ------------------------------------------------------------ */

/* Im Vollbild soll der Plan die ganze Höhe nutzen. Die Werkzeugleiste bleibt
   oben stehen, alles andere (Kennzahlen, Legende, Tabellen) ist ausgeblendet —
   im Vollbild will man arbeiten, nicht lesen. */
.a-plan:fullscreen {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 8px;
  background-color: var(--karte);
}

.a-plan:fullscreen .a-plan__buehne {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.a-plan:fullscreen .a-plan__fuss { margin: 6px 0 0; }

/* Das Panel liegt im Vollbild über dem Plan. Es erscheint erst beim Anklicken
   einer Hütte — im Vollbild ist der Platz zu wertvoll für ein dauerhaft
   sichtbares Formular. */
.a-plan:fullscreen .a-plan__panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  max-height: none;
  z-index: 60;
}

/* --- Maßfelder im Panel -------------------------------------------------- */

.a-plan__panel-mass {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.a-plan__panel-mass .a-filter__feld > span { font-size: 11.5px; }
.a-plan__panel-mass input { text-align: right; }

/* --------------------------------------------------------------------------
   Boxen: Aussehen wie die gemalte Hütte

   Die Box soll aussehen wie das Rechteck, das im Plan gezeichnet war — nur
   eben beweglich. Deshalb wird sie in der Legendenfarbe gefüllt und nicht wie
   ein Punkt-Marker weiß. Der Plan sieht damit aus wie vorher, ist aber
   editierbar; genau das ist der Zweck.

   Diese Regeln stehen NACH den allgemeinen Marker-Regeln und überschreiben
   deren weiße Füllung für den Fall "Box".
   -------------------------------------------------------------------------- */

.a-plan__marker--box.ist-frei {
  /* Deutlich, aber leicht durchlässig: so bleibt erkennbar, was auf der Karte
     darunter liegt (Weg, Rasen, Pflaster). */
  background-color: color-mix(in srgb, var(--marker-farbe, #2ec2d7) 82%, transparent);
  border-style: solid;
  border-color: rgba(40, 40, 36, .75);
}

/* Rückfall für Browser ohne color-mix: dann eben volldeckend. */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
  .a-plan__marker--box.ist-frei { background-color: var(--marker-farbe, #2ec2d7); }
}

.a-plan__marker--box.ist-besetzt {
  background-color: var(--marker-farbe, var(--tanne));
  border-color: var(--tanne-tief);
  border-width: 2.5px;
  /* Besetzt muss auch ohne Farbwahrnehmung erkennbar sein: die Box bekommt
     einen kräftigeren Rand und einen Schlagschatten. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 5px rgba(16, 42, 74, .5);
}

/* Farbe und Schein der Nummer stehen jetzt am Punkt selbst (siehe oben) —
   er ist auf jeder Fuellfarbe gleich schwarz/weiss. */

/* Sehr kleine Boxen: die Nummer würde über den Rand hinausragen und die
   Nachbarhütte überdecken. Sie wird deshalb erst ab einer greifbaren Größe
   gezeigt — die Nummer steht im Panel und in der Kurzinfo. */

/* --------------------------------------------------------------------------
   Vollbild: das Element muss den Bildschirm auch wirklich füllen

   Ohne diese Regeln behält der Plan-Abschnitt im Vollbild seine Breite aus dem
   Seitenlayout — der Browser zeigt ihn dann klein in der Ecke, der Rest bleibt
   schwarz. Die Karte .a-karte bringt Rand, Radius und Abstände mit, die im
   Vollbild alle weg müssen.
   -------------------------------------------------------------------------- */

.a-plan:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Der Browser setzt bei :fullscreen einen schwarzen Hintergrund. Für einen
   Lageplan ist das falsch — die Fläche gehört zur Arbeitsfläche. */
.a-plan:fullscreen::backdrop { background-color: var(--fl); }

/* --------------------------------------------------------------------------
   Panel verschiebbar

   Das Panel liegt über dem Plan und steht damit zwangsläufig manchmal genau
   über der Hütte, die man gerade bearbeitet. Es lässt sich deshalb am Kopf
   greifen und beiseite ziehen.
   -------------------------------------------------------------------------- */

.a-plan__panel-kopf {
  cursor: grab;
  /* Ohne das markiert das Ziehen die Überschrift statt das Panel zu bewegen. */
  user-select: none;
  touch-action: none;
}

.a-plan__panel-kopf:active { cursor: grabbing; }

/* Der Schließen-Knopf im Kopf darf nicht zum Ziehgriff werden. */
.a-plan__panel-kopf .a-knopf { cursor: pointer; }

.a-plan__panel.ist-verschoben {
  /* Sobald der Nutzer das Panel bewegt hat, gilt seine Position — die
     Standardausrichtung am rechten Rand wird aufgehoben. */
  right: auto;
  bottom: auto;
}

.a-plan__panel-griff {
  margin-left: auto;
  font-size: 11px;
  color: var(--sehr-leise);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Produktfoto-Galerie (Betreiberportal, Schritt 06)
   -------------------------------------------------------------------------- */

.a-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  padding: 0 22px 18px;
}

.a-galerie__eintrag { display: block; }

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

/* --------------------------------------------------------------------------
   Empfaenger-Auswahl beim Anfordern einer Unterlage
   -------------------------------------------------------------------------- */

/* Das Feld klappt aus der Tabellenzelle heraus — ohne feste Breite waere es
   so schmal wie die Spalte und unlesbar. */
.a-klapp--anfordern .a-klapp__inhalt {
  min-width: 340px;
  max-width: 460px;
}

.a-auswahl {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.a-auswahl__eintrag {
  border-bottom: 1px solid var(--linie);
  padding: 8px 12px;
}

.a-auswahl__eintrag:last-child { border-bottom: none; }

/* Bereits angeforderte und gesperrte Zeilen bleiben sichtbar, aber gedaempft:
   sie verschwinden zu lassen wuerde die Frage aufwerfen, wo Huette 12 blieb. */
.a-auswahl__eintrag:has(input:disabled) { opacity: 0.6; }

/*
 * Titel und Beschreibung eines Auswahl-Eintrags stehen UNTEREINANDER.
 *
 * Fabi (14.08.2026) zu den freigegebenen Bereichen: „die Beschreibungen unter
 * die titel".
 *
 * 🔴 `display: block` an der Beschreibung reicht dafür nicht. Die Hülle erbt
 *    von `.a-karte .a-filter__feld > span` ein `display: flex` mit der
 *    Voreinstellung `row` — eine Regel, die für gewöhnliche Beschriftungen
 *    gedacht ist, wo Text und Info-Zeichen nebeneinander gehören. In einer
 *    Flex-Zeile stehen auch Block-Elemente nebeneinander; die Beschreibung
 *    landete dadurch rechts vom Titel und lief in die Nachbarspalte.
 *
 *    Drei Klassen im Selektor sind Absicht: die geerbte Regel bringt zwei
 *    Klassen und ein Element mit, eine einzelne Klasse würde sie nicht
 *    schlagen und die Zeile bliebe, wie sie war.
 */
.a-auswahl__eintrag .a-filter__feld > .a-auswahl__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.a-auswahl__eintrag .a-auswahl__text .a-zelle__zusatz {
  margin-top: 0;
  line-height: 1.4;
}

/*
 * Die Zeile, in der ein Team-Konto bearbeitet wird.
 *
 * Sie steht unter der Zeile des Kontos und geht über alle Spalten — vorher
 * lag das Formular in der Zelle der Aktions-Spalte und war 284 von 1001
 * Pixeln breit (Fabi: „von sidepanel auf vollflächig").
 *
 * Der linke Balken zeigt, dass die Zeile zur daruberliegenden gehört: ohne
 * ihn sieht ein aufgeklapptes Formular wie ein eigener Abschnitt aus, der mit
 * dem Konto darüber nichts zu tun hat.
 */
.a-tabelle__ausklapp > td {
  padding: 0;
  background-color: var(--fl, #f2f7fc);
  border-left: 3px solid var(--akzent, #c0453d);
}

.a-tabelle__ausklapp .a-klapp__inhalt {
  padding: 18px 20px 22px;
}

/*
 * Zweispaltig, solange Platz ist. Genau das war in der Tabellenzelle nicht
 * moeglich — dort standen Passwortfeld, Rolle und acht Bereichs-Haken in
 * einer einzigen schmalen Spalte untereinander.
 */
@media (min-width: 900px) {
  .a-tabelle__ausklapp .a-klapp__inhalt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    align-items: start;
  }
}

/* ==========================================================================
   Drehgriffe an den Ecken

   Wird eine Hütte ausgewählt, erscheint an jeder ihrer vier Ecken ein
   Drehsymbol. Zieht man daran, dreht sich die Hütte um ihren Mittelpunkt — so
   lässt sich die von der Bilderkennung geschätzte Ausrichtung nachjustieren.

   Zwei Feinheiten, ohne die es nicht benutzbar wäre:
   - Die Griffe skalieren GEGEN den Zoom und drehen GEGEN den Winkel der Hütte.
     Sie behalten damit ihre Größe und bleiben aufrecht, während die Hütte sich
     dreht — ein mitgedrehtes Symbol wäre bei 90° auf dem Kopf.
   - Sie liegen nur an der ausgewählten Hütte. Vier Griffe an sechzig Hütten
     würden jeden Klick auf den Plan zum Glücksspiel machen.
   ========================================================================== */

.a-plan__griff {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tanne);
  border-radius: 50%;
  background-color: var(--karte);
  color: var(--tanne);
  font-size: 12px;
  line-height: 1;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(16, 42, 74, .4);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--winkel, 0deg))) scale(var(--gegen-zoom));
  transform-origin: center center;
  z-index: 12;
}

.a-plan__griff:hover { background-color: var(--gold-hell); }
.a-plan__griff:active,
.a-plan__griff.ist-aktiv { cursor: grabbing; background-color: var(--gold); }

/* Der Griff für die Größe: unten rechts, eigenes Zeichen, eigener Zeiger.
   Er liegt AUF der Ecke und nicht daneben, damit er bei einer gedrehten Box
   mitwandert — als Kind der Box dreht er automatisch mit. */
/* Der Maßgriff sitzt an der Ecke unten rechts — über die Klasse `--ur` wie die
   anderen Griffe. Vorher stand hier `right/bottom: -9px` ZUSAMMEN mit dem
   `translate(-50%, -50%)` der Grundregel: das schob ihn nach innen, und beim
   Vergrößern lag das Werkzeugzeichen mitten im Element. */
.a-plan__griff--mass {
  cursor: nwse-resize;
  background-color: var(--tanne);
  color: #fff;
}

.a-plan__griff--mass.ist-aktiv { background-color: var(--gold); }
.a-plan__griff:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.a-plan__griff--ol { left: 0;    top: 0; }
.a-plan__griff--or { left: 100%; top: 0; }
.a-plan__griff--ul { left: 0;    top: 100%; }
.a-plan__griff--ur { left: 100%; top: 100%; }

/* Während des Drehens: die Hütte selbst wird hervorgehoben, und der aktuelle
   Winkel steht an der Hütte — sonst dreht man blind. */
.a-plan__marker.ist-dreht { outline: 2px dashed var(--gold); outline-offset: 2px; z-index: 11; }

.a-plan__winkelanzeige {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -100%) rotate(calc(-1 * var(--winkel, 0deg))) scale(var(--gegen-zoom));
  transform-origin: bottom center;
  padding: 2px 7px;
  border-radius: 4px;
  background-color: var(--tanne);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 13;
}

/* ==========================================================================
   Hüttennummer auf der Box

   Die Nummer ist die wichtigste Angabe im ganzen Plan: sie ist die Sprache, die
   Aufbau, Technik, Aussteller und Feuerwehr gemeinsam sprechen. Sie muss also
   auf der Hütte stehen und lesbar sein — auch auf einer 2,5-Meter-Hütte, die im
   Plan nur wenige Bildpunkte groß ist.

   Deshalb hängt ihre Schriftgröße NICHT an der eingestellten Markergröße
   (S/M/L). Die Nummer bleibt lesbar, auch wenn die Boxen klein dargestellt
   werden; bei einer sehr kleinen Hütte ragt sie über den Rand hinaus, was
   allemal besser ist als eine unlesbare Nummer.
   ========================================================================== */

/* Schriftgroesse und Farbe der Nummer definiert der Punkt ueber der Huette
   (ein Block, weiter oben) — hier stand eine zweite Fassung, die mit ihm
   konkurrierte. */


/*
 * 🔴 HIER STANDEN drei aeltere Nummern-Regeln (dunkle Tinte bei "frei",
 *    Deckkraft-Stufen, ein 9-px-Platzhalterpunkt). Entfernt am 01.09.2026:
 *    Die Nummer ist jetzt der schwarze Punkt UEBER der Huette (ein Block,
 *    weiter oben) — die ist-frei-Regel haette mit ihrer hoeheren Spezifitaet
 *    die weisse Ziffer auf dem schwarzen Punkt DUNKEL gefaerbt: unsichtbar.
 */
.a-plan__marker--box[data-nummer=""] .a-plan__nummer { display: none; }

/* --------------------------------------------------------------------------
   Aufklapper, dessen Griff ein KNOPF ist

   Trägt das <summary> die Knopf-Klasse, muss das Dreieck weg, das Browser
   sonst davorsetzen — sonst steht es mitten im Knopf. `list-style: none`
   allein genügt Firefox nicht, dort braucht es zusätzlich ::marker.
   -------------------------------------------------------------------------- */

.a-klapp--knopf > summary::marker { content: ''; }
.a-klapp--knopf > summary::-webkit-details-marker { display: none; }

/* Der Knopf soll nur so breit sein wie sein Text, nicht wie die Karte. */
.a-klapp--knopf > summary { display: inline-flex; width: auto; }

/* --------------------------------------------------------------------------
   Bildschirmfüllendes Blatt aus einem Aufklapper

   Anlass: Der Bearbeiten-Bereich der Kundenliste steckt in einer
   Tabellenzelle. Eine Zelle gibt ihrem Inhalt die Breite vor — drei Formulare
   landeten deshalb untereinander in einer 300 Pixel schmalen Spalte.

   Lösung: Im geöffneten Zustand verlässt das Blatt den Textfluss und legt
   sich über die Seite. Kein JavaScript nötig, <details> öffnet und schließt
   weiterhin von selbst.
   -------------------------------------------------------------------------- */

.a-klapp--voll[open] > .a-klapp__inhalt {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Zwei Spalten statt „so viele wie passen": Formularfelder brauchen Breite,
     bei fünf Spalten stünde neben jedem Feld nur noch Luft. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 22px;

  /* Oben Platz für den Schließen-Knopf, der dort schwebt. */
  padding: 72px clamp(20px, 4vw, 48px) 48px;
  border-top: none;
}

/* Der Griff wird zum Schließen-Knopf: er muss über dem Blatt liegen,
   sonst wäre er darunter begraben und der Bereich nicht mehr zu schließen. */
.a-klapp--voll[open] > summary {
  position: fixed;
  top: 16px;
  right: clamp(20px, 4vw, 48px);
  z-index: 101;
  font-size: 0;
}

/* Beschriftung kommt aus dem Markup (data-zu), damit sie übersetzbar bleibt. */
.a-klapp--voll[open] > summary::after {
  content: attr(data-zu);
  font-size: 13.5px;
  font-weight: 600;
}

/* Auf schmalen Geräten ist eine Spalte richtig — zwei nebeneinander wären
   je 160 Pixel breit und damit unbrauchbar. */
@media (max-width: 900px) {
  .a-klapp--voll[open] > .a-klapp__inhalt {
    grid-template-columns: 1fr;
    padding: 68px 16px 40px;
  }
}

/* --------------------------------------------------------------------------
   Hilfe-Assistent
   -------------------------------------------------------------------------- */

.a-gespraech {
  display: grid;
  gap: 12px;
  margin: 0 22px 20px;
}

.a-blase {
  padding: 13px 16px;
  border-radius: var(--r);
  border-left: 3px solid transparent;
  max-width: 46em;
}

/* Frage und Antwort verschieden eingefärbt — beim Überfliegen soll man sehen,
   wer was gesagt hat, ohne die Beschriftung zu lesen. */
.a-blase--frage   { background-color: var(--info-fl); border-left-color: var(--info); }
.a-blase--antwort { background-color: var(--fl);      border-left-color: var(--tanne); }

/* Die Antwort ist die wichtigere von beiden und rückt deshalb nach rechts. */
.a-blase--antwort { justify-self: end; }

.a-blase__wer {
  margin: 0 0 4px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Zeilenumbrüche der Antwort erhalten — das Modell nummeriert Schritte
   zeilenweise, ohne pre-wrap stünde alles in einem Block. */
.a-blase__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.a-frageform textarea,
.a-filter__feld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background-color: #fff;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-fein);
  resize: vertical;
}

.a-filter__feld--breit { grid-column: 1 / -1; }

/* Blase unterhalb des Symbols — die Spitze muss dann nach oben zeigen.
   Wird vom Skript gesetzt, wenn oben kein Platz ist. Die Klasse sitzt auf der
   Blase selbst, weil die beim Anzeigen an den body umgehängt wird und dort
   kein `.a-info` mehr über sich hat. */
.a-info__blase--unten::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--tanne-tief, #0d2c52);
}

/* Klebt die Blase am Fensterrand, sitzt sie nicht mehr mittig über dem
   Symbol. Das Skript reicht die Position der Spitze als `--spitze` durch. */
.a-info__blase[style*='--spitze']::after {
  left: var(--spitze);
}

/* --------------------------------------------------------------------------
   Feldgruppe in Formularen — z. B. die Firmenanschrift
   --------------------------------------------------------------------------
   Straße, Nummer, PLZ und Ort gehören sachlich zusammen. Nebeneinander in
   einer Reihe stehend sind sie als eine Angabe lesbar, statt als vier
   unabhängige Felder. Die Nummer bekommt nur so viel Platz, wie sie braucht.
   -------------------------------------------------------------------------- */

.a-gruppe {
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
}

.a-gruppe__titel {
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-leise, #6d7d8e);
}

.a-gruppe__reihe {
  display: grid;
  gap: 10px;
}

/* Straße nimmt den Rest, die Nummer bleibt schmal. */
.a-gruppe__reihe--strasse { grid-template-columns: 1fr 100px; }

/* PLZ ist kurz und immer gleich lang, der Ort variiert. */
.a-gruppe__reihe--ort { grid-template-columns: 120px 1fr; }

.a-gruppe__reihe + .a-gruppe__reihe { margin-top: 10px; }

/* Auf schmalen Geräten untereinander — nebeneinander wäre unbedienbar. */
@media (max-width: 560px) {
  .a-gruppe__reihe--strasse,
  .a-gruppe__reihe--ort { grid-template-columns: 1fr; }
}

/* Zwei Felder nebeneinander: Beschriftung und Adresse eines Links. */
.a-gruppe__reihe--link {
  grid-template-columns: 1fr 1.4fr;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .a-gruppe__reihe--link { grid-template-columns: 1fr; }
}

/* Bereits hinterlegte Erklärbilder mit Häkchen zum Entfernen. */
.a-galerie--infos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.a-galerie--infos .a-galerie__stueck {
  display: block;
  cursor: pointer;
}

.a-galerie--infos img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: var(--r-fein);
}

.a-galerie__weg {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-leise, #6d7d8e);
}

/* --------------------------------------------------------------------------
   Maßangabe aus zwei Feldern: Meter und Zentimeter

   Getrennte Felder, weil in Metern mit Komma zu tippen fehleranfällig ist —
   "3.2" und "3,2" meinen dasselbe, ergeben in einem Zahlenfeld aber je nach
   Browser Verschiedenes. Gespeichert wird ohnehin eine Ganzzahl in Zentimetern.
   -------------------------------------------------------------------------- */

.a-mass {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Die Felder bleiben schmal: eine Hütte ist keine 100 Meter breit, und ein
   breites Feld verspricht eine Genauigkeit, die es nicht gibt.
   -------------------------------------------------------------------------
   🔴 Der Selektor MUSS so lang sein. `.a-mass input` allein hat die
   Spezifität 0,1,1 und verlor gegen `.a-feld input[type='number']` (0,2,1,
   Zeile 441) — die Zahlenfelder wurden dadurch 100 % breit, das
   Zentimeter-Feld rutschte aus der Karte heraus und stand einen ganzen
   Bildschirm weiter rechts (gemessen: 1037 px statt 88 px, 1045 px
   Ueberlauf). Reihenfolge half nicht: bei ungleicher Spezifitaet gewinnt
   immer die spezifischere Regel, egal wo sie steht.
   Wer hier kuerzt, holt den Fehler zurueck. */
.a-feld .a-mass input[type='number'],
.a-mass input[type='number'],
.a-mass input {
  width: 5.5em;
  min-width: 0;
  flex: 0 0 auto;
}

/* Auf schmalen Schirmen darf die Zeile umbrechen, statt seitlich
   hinauszulaufen — Meter und Zentimeter bleiben dabei beieinander. */
.a-mass { flex-wrap: wrap; }

.a-mass__einheit {
  font-size: 13px;
  color: var(--text-leise, #6d7d8e);
  white-space: nowrap;
}

/* ------------------------------------------------------------------------- */
/* Was jetzt zu tun ist (Übersicht)                                          */
/*                                                                           */
/* Steht oben auf der Startseite und muss ohne Erklärung lesbar sein: eine    */
/* Zeile je Punkt, Farbe nur als Hinweis auf die Dringlichkeit — nicht als    */
/* Dekoration. Wer die Farben nicht unterscheiden kann, liest denselben Satz. */
/* ------------------------------------------------------------------------- */
.a-zutun__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.a-zutun__punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background-color: var(--fl);
  font-size: 13.5px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.a-zutun__punkt:hover { background-color: var(--karte); box-shadow: var(--schatten); }

/* Der Punkt vor der Zeile traegt die Dringlichkeit. */
.a-zutun__punkt::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--blau-hell);
}

.a-zutun__punkt a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.a-zutun__punkt a:hover,
.a-zutun__punkt a:focus-visible {
  text-decoration: underline;
}

/* Dringend: Frist läuft ab, Widerspruch im Plan, überfällige Unterlagen. */
.a-zutun__punkt--dringend { background-color: var(--schlecht-fl); }
.a-zutun__punkt--dringend::before { background-color: var(--schlecht); }

/* Offen: wartet auf Bearbeitung, aber ohne Frist im Rücken. */
.a-zutun__punkt--offen { background-color: var(--warn-fl); }
.a-zutun__punkt--offen::before { background-color: var(--warn); }

/* Hinweis: sollte irgendwann erledigt werden, drückt aber nicht. */
.a-zutun__punkt--hinweis { color: var(--leise); }
.a-zutun__punkt--hinweis::before { background-color: var(--sehr-leise); }

.a-zutun__leer {
  margin: 0;
  color: var(--leise);
}

/* ------------------------------------------------------------------------- */
/* Verlauf am Objekt (wer hat hier was bearbeitet)                            */
/* ------------------------------------------------------------------------- */
.a-verlauf {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.a-verlauf__zeile {
  padding: 4px 0;
  border-bottom: 1px solid var(--rand);
}

.a-verlauf__zeile:last-child { border-bottom: 0; }

/* Ein gescheiterter Vorgang bleibt sichtbar — dass jemand es VERSUCHT hat,
   ist die Information. */
.a-verlauf__zeile.ist-fehlgeschlagen { color: var(--leise); }

/* ==========================================================================
   ÄNDERUNGSPROTOKOLL und NACHGELADENE PANELS
   ========================================================================== */

/*
 * Der Platzhalter, solange ein Bearbeiten-Panel nachgeladen wird — und der
 * Rückfall-Verweis, wenn kein JavaScript läuft. Beides steht an derselben
 * Stelle, deshalb dieselbe Klasse.
 */
.a-lade {
  margin: 0;
  padding: 10px 0;
  color: var(--leise);
  font-size: 13px;
}

/*
 * Protokolltabelle. Die Zeitspalte wird schmal gehalten und bricht nicht, damit
 * die Zeilen untereinander lesbar bleiben — man liest das Protokoll von oben
 * nach unten, nicht quer.
 */
.a-tabelle--protokoll {
  font-size: 13px;
}

.a-zelle--zeit {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.a-zelle--einzelheiten {
  max-width: 320px;
}

/*
 * Der Rohwert eines Vorgangs steckt in einem <details>. Er wird selten
 * gebraucht, soll aber vollständig lesbar sein, wenn doch — deshalb umbrechend
 * statt abgeschnitten.
 */
.a-vorschau {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-fein);
  background-color: var(--flaeche-2, rgba(0, 0, 0, 0.04));
  color: var(--leise);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/*
 * Eine gescheiterte Zeile wird zurückgenommen, nicht rot geschrien: Sie ist
 * eine Tatsache im Verlauf, kein Alarm, den man wegklicken muss.
 */
.a-tabelle--protokoll tr.ist-fehlgeschlagen {
  opacity: 0.72;
}

.a-blaettern {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Filterleiste: die Knöpfe dürfen nicht aus ihrer Zelle laufen
   --------------------------------------------------------------------------
   Die Leiste ist ein Raster aus gleich breiten Spalten (minmax(150px, 1fr)).
   „Filtern" und „Zurücksetzen" nebeneinander brauchen aber rund 196 px —
   gemessen: Zelle 160 px, Knöpfe 196 px, also 36 px Überstand. Auf breiten
   Bildschirmen fiel das in den leeren Raum daneben, auf schmalen ragten die
   Knöpfe sichtbar über den Rand der Karte hinaus.

   Zwei Maßnahmen, beide nötig:
   - Die Aktionen belegen zwei Spalten. Gibt es nur eine, klemmt das Raster
     die Angabe von selbst auf die vorhandene Breite.
   - Umbruch erlaubt. Wird es trotzdem zu eng, rutscht der zweite Knopf unter
     den ersten, statt hinauszulaufen.
   -------------------------------------------------------------------------- */

.a-filter__aktionen {
  grid-column: span 2;
  flex-wrap: wrap;
  min-width: 0;
}

/* Zahl neben einer Knopf-Beschriftung, z. B. „Team 3". */
.a-knopf__zahl {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

/* Knopf „Legende aus dem Plan lesen" samt Rückmeldung daneben. */
.a-legende__helfer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.a-legende__helfer .a-feld__hilfe { margin: 0; }
.a-legende__helfer .a-feld__hilfe.ist-fehler { color: var(--rot, #c0453d); }

/* -------------------------------------------------------------------------
   Werkzeuge über dem Hüttenplan (12.08.2026)

   Vorher: ein <details>, dessen <summary> wie eine Überschrift aussah, ganz
   unten hinter der Karte. Gemeldet als "gefunden, aber versteckt" — niemand
   erkennt eine Zeile ohne Rahmen als anklickbar. Jetzt trägt das summary die
   volle Knopfoptik samt Pfeil, der sich beim Öffnen dreht.
   ------------------------------------------------------------------------- */

.a-planwerkzeug__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.a-planwerkzeug__feld { flex: 1 1 260px; }

/* Das Dreieck, das Browser vor ein summary setzen, würde neben dem eigenen
   Pfeil doppelt stehen. */
.a-planwerkzeug__knopf::-webkit-details-marker { display: none; }
.a-planwerkzeug__knopf { list-style: none; }

.a-planwerkzeug__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--a-linie, #e7eef5);
  border-radius: 10px;
  background: var(--a-flaeche, #fff);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.a-planwerkzeug__knopf:hover { background: var(--a-flaeche-warm, #f2f7fc); }
.a-planwerkzeug__knopf:focus-visible { outline: 2px solid var(--a-akzent, #1d5fa5); outline-offset: 2px; }

/* Pfeil rechts, dreht sich beim Aufklappen. */
.a-planwerkzeug__knopf::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.a-planwerkzeug__feld[open] > .a-planwerkzeug__knopf::after { transform: rotate(-135deg); }
.a-planwerkzeug__feld[open] > .a-planwerkzeug__knopf { border-color: var(--a-akzent, #1d5fa5); }

.a-planwerkzeug__zahl {
  margin-left: auto;
  margin-right: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--a-flaeche-warm, #e4eef8);
  font-size: 0.85em;
  font-weight: 600;
}

.a-planwerkzeug__inhalt { padding: 16px 2px 4px; }

.a-planwerkzeug__gefahr { margin-top: 14px; }
.a-planwerkzeug__gefahrzeile {
  list-style: none;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--a-text-leise, #6d7d8e);
}
.a-planwerkzeug__gefahrzeile::-webkit-details-marker { display: none; }
.a-planwerkzeug__gefahrzeile:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Planliste als Kacheln statt Tabelle

   Die fünfspaltige Tabelle stand in einer waagerecht scrollenden Hülle:
   "Zustand" und die Knöpfe lagen außerhalb des Sichtfelds. Kacheln brechen
   um, statt zu scrollen.
   ------------------------------------------------------------------------- */

.a-planliste { list-style: none; margin: 0; padding: 0; }

.a-planliste__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--a-linie, #e7eef5);
  border-radius: 10px;
  margin-bottom: 8px;
}

/* Der aktive Plan bekommt eine kräftigere Kante — auf einen Blick erkennbar,
   ohne die Plakette lesen zu müssen. */
.a-planliste__zeile.ist-aktiv {
  border-color: var(--a-akzent, #1d5fa5);
  border-left-width: 4px;
}

.a-planliste__haupt { flex: 1 1 220px; min-width: 0; }
.a-planliste__name { margin: 0 0 3px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-planliste__fein { margin: 0; font-size: 0.86em; color: var(--a-text-leise, #6d7d8e); overflow-wrap: anywhere; }
.a-planliste__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.a-planliste__knoepfe form { margin: 0; }

/* -------------------------------------------------------------------------
   Kreisel im Knopf (12.08.2026)

   Für Vorgänge, die spürbar dauern — der Lageplan-Upload braucht rund zehn
   Sekunden. Ohne Rückmeldung wirkt der Knopf tot und wird ein zweites Mal
   gedrückt.
   ------------------------------------------------------------------------- */

.a-laden {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  /* Eine offene Seite macht die Drehung überhaupt erst sichtbar. */
  border-top-color: transparent;
  border-radius: 50%;
  animation: a-laden-dreh 0.7s linear infinite;
}

@keyframes a-laden-dreh {
  to { transform: rotate(360deg); }
}

/* Wer Bewegung reduziert hat, bekommt einen ruhigen Punkt statt Rotation —
   die Rückmeldung bleibt, das Kreisen entfällt. */
@media (prefers-reduced-motion: reduce) {
  .a-laden { animation: none; border-top-color: currentColor; opacity: 0.5; }
}

/* -------------------------------------------------------------------------
   Hinweisbox am Hüttenmarker (12.08.2026)

   Der Browser-Tooltip aus dem title-Attribut erscheint erst nach rund einer
   Sekunde Verweilen und verschwindet beim geringsten Wackeln — beim
   Überfahren einer Hüttenreihe sieht man ihn praktisch nie. Diese Box kommt
   ohne Verzögerung.
   ------------------------------------------------------------------------- */

.a-plan__marker[data-info]:hover::after {
  content: attr(data-info);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px) rotate(calc(-1 * var(--winkel, 0deg))) scale(var(--gegen-zoom, 1));
  transform-origin: center bottom;
  z-index: 40;
  padding: 5px 9px;
  border-radius: var(--r-fein);
  background: rgba(24, 24, 22, 0.92);
  color: #fff;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Mehrfachauswahl in Listen (Einladungen)

   Die Leiste erscheint erst, sobald etwas gewaehlt ist, und bleibt beim
   Scrollen am oberen Rand der Tabelle stehen — bei 127 Zeilen ist der
   Loeschen-Knopf sonst staendig ausserhalb des Bildes.
   -------------------------------------------------------------------------- */

.a-auswahlleiste {
  position: sticky;
  /* 58px = Hoehe des klebenden Seitenkopfs (.a-kopf__innen). Bei top: 0
     verschwindet die Leiste beim Scrollen hinter dem Kopf. */
  top: 58px;
  z-index: 20;
  display: flex;
  align-items: center;
  /* Die Formulare duerfen untereinander umbrechen (17.08.2026): auf dem
     Tablet passen drei Sammelaktionen nicht in eine Zeile, und ohne Umbruch
     ragten sie stumm aus der Leiste heraus. Innerhalb eines Formulars bleibt
     der Umbruch aus — dort soll der Knopf neben der Auswahl stehen. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background-color: var(--gold-hell);
  border: 1px solid var(--linie-satt);
  border-radius: var(--r);
  margin-bottom: 10px;
  box-shadow: var(--schatten);
}

/*
 * Die Formulare in der Leiste laufen EINZEILIG (17.08.2026, Fabis Vorgabe:
 * „der übernehmen button neben die auswahl und nicht darunter").
 *
 * Die Leiste war flex, ihre Formulare nicht — darin standen ein
 * `.a-filter__feld` (Block) und der Knopf und stapelten sich deshalb. Der
 * Knopf sass unter dem Auswahlfeld und machte die Leiste doppelt hoch.
 *
 * Auch die Beschriftung steht jetzt NEBEN dem Auswahlfeld statt darüber.
 * Sonst wäre das Formular weiter höher als der Löschknopf daneben, und die
 * Leiste (`align-items: center`) hätte die Knöpfe auf verschiedene Höhen
 * gesetzt — sichtbar als Treppe. Einzeilig sind alle Teile gleich hoch, und
 * die Leiste bleibt so flach wie eine Zeile.
 *
 * Kein `flex-wrap`: bräche der Knopf um, wäre genau der Zustand zurück, der
 * behoben werden sollte. Auf schmalen Fenstern rutscht lieber das ganze
 * Formular in die nächste Zeile — dafür sorgt die Leiste selbst.
 */
.a-auswahlleiste form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.a-auswahlleiste form .a-filter__feld {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Die Beschriftung sitzt links daneben, nicht darüber — kein Abstand nach
   unten, der sie sonst aus der Zeilenmitte schieben würde. */
.a-auswahlleiste form .a-feld__label {
  margin-bottom: 0;
  white-space: nowrap;
}

.a-auswahlleiste__text {
  font-size: 13px;
  color: var(--text);
  margin-right: auto;
}

.a-auswahlleiste__text strong { font-size: 15px; }

.a-auswahl__spalte {
  width: 40px;
  text-align: center;
  padding-right: 0 !important;
}

/* 18px statt der Browser-Vorgabe: mit der Maus schneller zu treffen und auf
   dem Tablet ueberhaupt erst bedienbar. */
.a-auswahl__spalte input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--tanne);
}

.a-tabelle tbody tr.ist-gewaehlt { background-color: var(--gut-fl); }
.a-tabelle tbody tr.ist-gewaehlt:hover { background-color: var(--gut-fl); }

/* --------------------------------------------------------------------------
   Arbeitsbereiche — Farbe als Ortsangabe
   --------------------------------------------------------------------------

   Bis 13.08.2026 trug jede der 45 Seiten dieselbe Koerperklasse "admin" und
   damit dieselbe einzige Markenfarbe. Der haeufigste Einwand dazu: „für mich
   sieht jede Seite gleich aus, man hat nie das Gefühl, dass man in einem
   anderen Bereich ist."

   Jeder Bereich bekommt deshalb genau EINE eigene Farbe. Sie faerbt drei
   Dinge und sonst nichts: das Band unter der Kopfzeile, den Seitentitel und
   die aktive Markierung in der Leiste. Mehr waere Buntheit statt Orientierung.

   Die Kennung kommt aus src/admin-navigation.js und steht als Klasse am
   <body> ("bereich-vertrieb"). Alle Werte sind gegen Weiss auf mindestens
   4.5:1 geprueft, damit Titel in jeder Farbe lesbar bleiben.
   -------------------------------------------------------------------------- */

body.admin {
  /* Rueckfall: die Hausfarbe. Gilt fuer Uebersicht, Hilfe und alles, was
     ausserhalb der Admin-Middleware gerendert wird (z. B. die Fehlerseite). */
  --bereich: var(--navy);
  --bereich-fl: var(--blau-fl);
}

/*
 * Die sieben Bereichsfarben bleiben sieben unterscheidbare Farben — sie
 * stammen jetzt aber alle aus der kuehlen Familie der Vorlage (Blau, Petrol,
 * Indigo, Smaragd). Ein warmes Ocker oder Ziegelrot daneben waere der eine
 * Fleck, an dem man sofort sieht, dass zwei Entwuerfe uebereinanderliegen.
 * Alle Werte sind gegen Weiss auf mindestens 4.5:1 geprueft.
 */
body.bereich-markt       { --bereich: #1d5fa5; --bereich-fl: #e8f1fa; } /* Platz und Hütten */
body.bereich-vertrieb    { --bereich: #0d7378; --bereich-fl: #e0f2f3; } /* Verkauf */
body.bereich-betreiber   { --bereich: #3f66c4; --bereich-fl: #ebeffb; } /* Partner */
body.bereich-auswertung  { --bereich: #6b5fc4; --bereich-fl: #eeecfa; } /* Zahlen */
body.bereich-buchhaltung { --bereich: #0f7660; --bereich-fl: #e2f3ee; } /* Geld */
body.bereich-personal    { --bereich: #1478a8; --bereich-fl: #e5f2f9; } /* Menschen */
body.bereich-system      { --bereich: #4a6076; --bereich-fl: #edf0f3; } /* Technik */

/* Das Band unter der Kopfzeile. Es laeuft ueber die volle Breite und ist das
   erste, was sich beim Bereichswechsel aendert. */
.a-bereich-band {
  height: 3px;
  margin: 16px 26px 0;
  border-radius: var(--pille);
  background-color: rgba(16, 42, 74, 0.07);
  overflow: hidden;
}

.a-bereich-band i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,
              var(--bereich) 0%,
              color-mix(in srgb, var(--bereich) 55%, var(--cyan)) 62%,
              color-mix(in srgb, var(--bereich) 30%, var(--mint)) 100%);
  border-radius: var(--pille);
  /* Ausgangszustand fuer das Einfahren. Ohne Skript bleibt es stehen —
     admin-bereich.js setzt es auf 0 und faehrt es aus. */
  transform-origin: left center;
}

/* Bereichsname ueber dem Seitentitel: „VERTRIEB" in klein und in Bereichsfarbe.
   Zusammen mit dem Band beantwortet er die Frage „wo bin ich" in einem Blick. */
.a-bereich-name {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bereich);
}

/*
 * Der Seitentitel steht dunkel, nicht in der Bereichsfarbe (Umbau 16.08.2026).
 * In der Vorlage ist die Ueberschrift der ruhige Anker der Seite; die Farbe
 * des Bereichs traegt die Zeile darueber und das Band unter der Kopfzeile.
 * Ein grosser farbiger Titel ueber farbigen Karten waere ein Ton zu viel.
 */
.a-titel { color: var(--text); }

/* Aktive Markierung in der Leiste. Die Gruppe, in der man steht, traegt die
   Farbe des Bereichs — damit stimmen Leiste und Inhalt ueberein. */
.a-nav__link.ist-aktiv,
.a-nav__link--gruppe.ist-aktiv {
  background: linear-gradient(135deg,
              var(--bereich) 0%,
              color-mix(in srgb, var(--bereich) 62%, var(--cyan)) 100%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bereich) 32%, transparent);
}

.a-nav__eintrag.ist-aktiv {
  background-color: var(--bereich-fl);
  box-shadow: inset 3px 0 0 var(--bereich);
}

.a-nav__eintrag.ist-aktiv .a-nav__eintrag-titel { color: var(--bereich); }

/* Die Kachel mit Akzent folgt ebenfalls dem Bereich statt immer Gold zu sein. */
.a-kpi--akzent { border-color: var(--bereich); border-top-color: var(--bereich); }

/*
 * 🔴 Die hervorgehobene Kachel war UNSICHTBAR — weisse Schrift auf weissem Grund.
 *
 * `.a-kpi--akzent` (oben, Zeile 863) setzt den Navy-Grund, hat aber nur die
 * Spezifitaet 0,1,0. Nach admin.css laedt der Kopf noch admin-personal.css
 * und lager.css, und BEIDE definieren `.a-kpi` erneut mit `background:
 * var(--karte)` — gleiche Spezifitaet, spaetere Datei, also gewinnen sie.
 * Der Grund wurde weiss, waehrend `.a-kpi--akzent .a-kpi__label/__wert/
 * __zusatz` (0,2,0) weiterhin weisse Schrift setzten. Ergebnis auf
 * /admin/documentacion, /admin (Dashboard), Statistik, Newsletter und
 * Ticketshop: eine leere Kachel ohne Beschriftung und ohne Zahl.
 *
 * Deshalb hier 0,2,0 — das schlaegt jedes spaetere `.a-kpi` der Modul-Dateien.
 * Der Rahmen wird durchsichtig statt entfernt: lager.css gibt allen Kacheln
 * einen 4 Pixel breiten Balken links, und ohne diesen Platzhalter saesse der
 * Text der Akzentkachel 4 Pixel weiter links als in den Nachbarkacheln.
 */
.a-kpis .a-kpi--akzent {
  background: var(--v-navy);
  box-shadow: var(--schatten-navy);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Kennzahl-Kacheln als Verweis
   --------------------------------------------------------------------------
   Vor dem Umbau war keine einzige der 47 Kacheln anklickbar — „4 Zugänge
   offen" fuehrte nirgendwo hin, obwohl die Antwort eine gefilterte Liste ist.
   -------------------------------------------------------------------------- */

/*
 * 🔴 HIER KEIN `display` SETZEN.
 *
 * Diese Regel hat die Spezifitaet 0,1,1 und schlaegt damit `.a-kpi` (0,1,0) —
 * auch das `.a-kpi` in admin-personal.css, das `display: flex;
 * flex-direction: column` setzt. Mit `display: block` fiel die Personal-Kachel
 * aus ihrer Spalte: Zahl und Wort standen nebeneinander, und das Zeichen oben
 * rechts legte sich ueber den Text („Vollständi", „Noch dab").
 *
 * Der Verweis braucht kein eigenes `display` — er uebernimmt das der Kachel.
 */
a.a-kpi {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

a.a-kpi:hover,
a.a-kpi:focus-visible {
  border-color: var(--bereich);
  box-shadow: 0 2px 4px rgba(16, 42, 74, 0.09), 0 8px 20px rgba(16, 42, 74, 0.07);
}

/* Der Pfeil erscheint erst beim Zeigen — im Ruhezustand soll die Zahl wirken,
   nicht die Verzierung. */
a.a-kpi .a-kpi__label::after {
  content: ' →';
  opacity: 0;
  color: var(--bereich);
  transition: opacity 0.14s ease;
}

a.a-kpi:hover .a-kpi__label::after,
a.a-kpi:focus-visible .a-kpi__label::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  a.a-kpi,
  a.a-kpi .a-kpi__label::after { transition: none; }
}

/* Flachere Leinwand fuer den Akquise-Trichter: sieben waagerechte Balken
   brauchen weniger Hoehe als ein Verlauf, sonst wirken sie verloren. */
.a-leinwand--flach { height: 280px; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Einstellungen: Sprungmenue und mitlaufende Speicherleiste
   --------------------------------------------------------------------------
   Die Seite ist ueber 5000 Pixel hoch. Ohne Sprungmenue sucht man eine
   Einstellung durch Scrollen; ohne mitlaufenden Knopf scrollt man an sechs
   Abschnitten vorbei, nur um zu speichern.
   -------------------------------------------------------------------------- */

.a-sprungmenue {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 12px;
  margin-bottom: 4px;
  background-color: var(--fl);
  border-bottom: 1px solid var(--linie);
}

.a-sprungmenue__punkt {
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background-color: var(--karte);
  color: var(--leise);
  text-decoration: none;
  white-space: nowrap;
}

.a-sprungmenue__punkt:hover,
.a-sprungmenue__punkt:focus-visible {
  border-color: var(--bereich);
  color: var(--bereich);
}

/* Damit die Ueberschrift beim Springen nicht unter der klebenden Leiste
   verschwindet. */
.a-karte[id^='gruppe-'] { scroll-margin-top: 62px; }

.a-speicherleiste {
  position: sticky;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 18px;
  background-color: var(--karte);
  border: 1px solid var(--bereich);
  border-radius: var(--r);
  box-shadow: 0 2px 6px rgba(16, 42, 74, 0.1), 0 10px 26px rgba(16, 42, 74, 0.12);
}

.a-speicherleiste[hidden] { display: none; }

.a-speicherleiste__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--bereich);
}

/* Cockpit-Kacheln als Verweis — dieselbe Optik wie der Kasten, das Zeigen
   macht den Unterschied. Die Kachel dort ist anders aufgebaut als a-kpi im
   uebrigen Panel (Zeichen + Zahl + Wort), deshalb eine eigene Regel. */
a.a-kpi:has(.a-kpi__zahl) { text-decoration: none; }

/* Sprungmarken sollen nicht unter dem Seitenkopf landen. */
#alarme, #wer-ist-da, #liste, #bestand { scroll-margin-top: 20px; }

/* --------------------------------------------------------------------------
   Passwort sichtbar machen
   --------------------------------------------------------------------------
   Ein Auge im Feld. Wer sich vertippt, sieht sonst nur Punkte und probiert es
   blind noch einmal — besonders bei den langen Zufallspasswoertern, die diese
   Verwaltung vergibt. Angehaengt wird der Knopf von /js/passwort-auge.js;
   ohne das Skript bleibt das Feld ein ganz normales Passwortfeld.
   -------------------------------------------------------------------------- */

.a-pw {
  position: relative;
  display: block;
}

/* Das Feld darin behaelt seine Breite — die Huelle uebernimmt sie. */
.a-pw > input { width: 100%; }

.a-pw__auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  /* 34px: gross genug, um mit dem Finger getroffen zu werden, ohne das Feld
     zu sprengen. */
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-fein);
  background: none;
  color: var(--leise);
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.a-pw__auge:hover { color: var(--bereich, var(--tanne)); background-color: var(--fl); }

.a-pw__auge:focus-visible {
  outline: 2px solid var(--bereich, var(--tanne));
  outline-offset: 1px;
  color: var(--bereich, var(--tanne));
}

/* Sichtbares Passwort: das Auge traegt die Bereichsfarbe, damit der Zustand
   auch ohne Blick auf das Feld erkennbar ist. */
.a-pw__auge[aria-pressed='true'] { color: var(--bereich, var(--tanne)); }

@media (prefers-reduced-motion: reduce) {
  .a-pw__auge { transition: none; }
}

/* ==========================================================================
   Freigegebene Arbeitsbereiche (Team)

   Die allgemeine `.a-auswahl` begrenzt ihre Höhe auf 320 px und scrollt —
   richtig für eine Liste mit dreißig Hütten, falsch für acht feste Bereiche:
   dort entstünde eine Bildlaufleiste in einem Kasten, der ohnehin auf den
   Schirm passt, und die letzten zwei Häkchen wären unsichtbar.

   Ab 620 px stehen sie zweispaltig. Der Rahmen bleibt, damit erkennbar ist,
   wo die Häkchen aufhören und das nächste Feld beginnt.
   ========================================================================== */
.a-auswahl--bereiche {
  max-height: none;
  overflow: visible;
}

@media (min-width: 620px) {
  .a-auswahl--bereiche {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Bei zwei Spalten trennt die untere Linie sonst mitten im Satz. Getrennt
     wird jetzt nach Spalten (rechts) und nach Zeilen (unten). */
  .a-auswahl--bereiche .a-auswahl__eintrag:nth-child(odd) {
    border-right: 1px solid var(--linie);
  }
}

/* --------------------------------------------------------------------------
   Bearbeiten-Zeile in Tabellen
   --------------------------------------------------------------------------
   Das Formular einer Bauart stand bis 14.08.2026 in der Aktions-Zelle. Dort
   war es auf gut 300 px gequetscht, obwohl es sechzehn Felder in vier Sprachen
   enthaelt — die Textfelder waren dabei so schmal, dass drei Woerter je Zeile
   umbrachen.

   Jetzt oeffnet es eine eigene Zeile ueber die gesamte Tabellenbreite und legt
   die Felder in zwei Spalten: links die Stammdaten (Hersteller, Maße, Preis),
   rechts die Texte in allen Sprachen.
   -------------------------------------------------------------------------- */

.a-zeile--bearbeiten > td {
  padding: 0;
  background-color: var(--fl);
  border-top: 2px solid var(--tanne);
}

.a-bearbeiten {
  padding: 22px 20px 26px;
  scroll-margin-top: 80px;
}

/*
 * EINE Spalte, nicht zwei (17.08.2026).
 *
 * Fabis Vorgabe fuer die Bauarten: „erst Hersteller und größe darunter
 * bezeichung darunter beschreibung." Vorher lag das Formular in zwei
 * Spalten: links die vier Zahlenfelder, rechts die vier Sprachfelder der
 * Bezeichnung. Zwei verschiedene Themen nebeneinander lesen sich schlecht —
 * das Auge springt hin und her und findet die Reihenfolge nicht, in der
 * ausgefuellt werden soll.
 *
 * Untereinander ist es dieselbe Menge Felder auf mehr Hoehe, aber in EINER
 * Leserichtung. Die Breite geht nicht verloren: die Felderreihen und die
 * Sprachbloecke teilen sie unter sich auf (siehe unten).
 */
.a-bearbeiten .a-formular {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
}

/* Löschen und der Hinweis dazu stehen unter dem Formular, nicht daneben. */
.a-bearbeiten > .a-formular:last-child,
.a-bearbeiten > .a-feld__hilfe {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Bauart-Formular (neu anlegen UND bearbeiten)

   Beide Formulare tragen `a-formular--bauart` und teilen sich damit dieselbe
   Aufteilung. Vorher galt die eine Haelfte der Regeln nur in der
   Bearbeiten-Zeile und die andere nirgends — die zwei Formulare sahen
   unterschiedlich aus, obwohl sie dieselben Felder zeigen.
   -------------------------------------------------------------------------- */

/*
 * Mehr Luft zwischen den Bloecken als in einem gewoehnlichen Formular.
 *
 * `.a-formular` setzt 9 px — richtig fuer eine Reihe einzelner Felder, zu
 * wenig fuer fuenf Bloecke, von denen jeder mehrere Felder buendelt. Ohne den
 * groesseren Abstand verschwimmen „Bezeichnung" und „Beschreibung"
 * ineinander, weil ihre Sprachfelder gleich aussehen.
 */
.a-formular--bauart { gap: 18px; }

/*
 * Die Stammdatenzeile: Hersteller, Breite, Tiefe, Preis nebeneinander.
 * `auto-fit` mit Mindestbreite statt fester Spaltenzahl — auf einem schmalen
 * Schirm rutschen die Felder von selbst untereinander, ohne zweiten
 * Umbruchpunkt in einer Medienabfrage.
 */
.a-formular--bauart .a-feld__reihe--stamm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
  align-items: start;
}

/*
 * Die zwei Preise nebeneinander (17.08.2026): Standardpreis und der Preis
 * fuer Gastronomie. `max-width` haelt sie zusammen — ueber die volle Breite
 * gezogen stuenden zwei kurze Betragsfelder verloren nebeneinander, und der
 * Zusammenhang „das eine gilt statt des anderen" ginge verloren.
 */
.a-formular--bauart .a-feld__reihe--preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 20px;
  align-items: start;
  max-width: 620px;
}

/*
 * Hoehe, Bruestung und Fensterstreifen nebeneinander (Huettenplaner,
 * 18.08.2026).
 *
 * Dieselbe `auto-fit`-Mechanik wie bei der Stammdatenzeile, nur mit
 * kleinerer Mindestbreite: in den drei Feldern steht je eine dreistellige
 * Zahl, 190px waeren dafuer verschenkt. `max-width` haelt die Reihe
 * zusammen, damit drei schmale Zahlenfelder nicht ueber die ganze Breite
 * auseinanderlaufen — dieselbe Ueberlegung wie bei den Preisen darunter.
 */
.a-formular--bauart .a-feld__reihe--hoehen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 20px;
  align-items: start;
  max-width: 620px;
}

/*
 * Eine leise Plakette — fuer Merkmale, die zur Sache gehoeren, aber keine
 * Warnung sind: „mit Turm" an der Bauart. Die vorhandenen Plaketten sind
 * alle gefaerbt (Warnung gelb, gesperrt grau-rot) und haetten dem Turm eine
 * Bedeutung gegeben, die er nicht hat.
 */
.a-plakette--leise {
  background-color: var(--fl);
  color: var(--leise);
  border: 1px solid var(--linie);
}

/* Die Ankreuzfelder am Fuss stehen nebeneinander und brauchen keine Spalten. */
.a-formular--bauart .a-feld__reihe--schalter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}

.a-formular--bauart .a-feld__reihe--schalter .a-filter__feld { width: auto; }

/* Bezeichnung, Beschreibung und Bild nehmen die volle Breite. */
.a-formular--bauart .a-feld--breit { width: 100%; }

/*
 * Vier Sprachen in EINER Reihe. `auto-fit` bricht sie von selbst um, wenn der
 * Platz nicht reicht.
 *
 * 🔴 Die Mindestbreite ist gemessen, nicht geschaetzt: in der Bearbeiten-Zeile
 *    stehen dem Block 935 Punkte zur Verfuegung. Mit 240 als Mindestmass
 *    passten nur drei Spalten hinein (3 × 301), und Englisch rutschte allein
 *    in eine zweite Reihe — vier gleiche Felder, davon eines abgesetzt, sieht
 *    nach Fehler aus. 200 laesst vier Spalten zu (4 × 200 + 3 × 16 = 848) und
 *    bleibt fuer ein Textfeld gut lesbar.
 */
.a-formular--bauart .a-sprachfelder--vier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}

/* --- Bildfeld mit Vorschau ---------------------------------------------- */

.a-bildfeld__zeile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.a-bildfeld__mitte {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Der Hilfstext sitzt sonst mit 6 px Abstand am Feld darueber und wirkt lose. */
.a-bildfeld__mitte .a-feld__hilfe { margin: 0; }

.a-bildfeld__vorschau {
  width: 132px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background-color: var(--fl);
}

/*
 * Der Platzhalter hat DIESELBEN Masse wie die Vorschau. Ohne das springt die
 * Zeile beim ersten Bild um gut achtzig Punkte nach unten.
 */
.a-bildfeld__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 88px;
  font-size: 26px;
  color: var(--sehr-leise);
  border: 1px dashed var(--linie);
  border-radius: var(--r);
  background-color: var(--fl);
}

/* --- Bildspalte der Liste ------------------------------------------------ */

.a-zelle--bild { width: 92px; }

.a-bauartbild {
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background-color: var(--fl);
}

/* --------------------------------------------------------------------------
   Dialog (Popup)
   14.08.2026 — Fabis Vorgabe: Bearbeiten soll die Seite nicht mehr nach unten
   fahren lassen, sondern ueber der Liste aufgehen. Gebaut auf dem nativen
   <dialog>: Escape, Fokusfalle und Hintergrund bringt der Browser mit, wir
   muessten sie sonst nachbauen — und zwar schlechter.

   Genutzt von: Dokumentart bearbeiten. Vorgesehen fuer den Schriftverkehr.
   -------------------------------------------------------------------------- */

.a-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background-color: var(--karte);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.a-dialog::backdrop {
  background-color: rgba(20, 24, 20, 0.55);
}

.a-dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie);
  /* Bleibt beim Blaettern im langen Formular sichtbar. */
  position: sticky;
  top: 0;
  background-color: var(--karte);
  z-index: 1;
}

.a-dialog__titel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/*
 * Der Inhalt blaettert, nicht der Dialog: sonst wandert die Kopfzeile mit dem
 * Schliessen-Knopf aus dem Bild.
 */
.a-dialog__inhalt {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 150px);
}

/* Der Schliessen-Knopf traegt Wort UND Zeichen — ein blosses × wird auf
   kleinen Schirmen zu leicht verfehlt und ist fuer Vorlesegeraete stumm. */
.a-dialog__schliessen {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .a-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .a-dialog__inhalt { max-height: calc(100vh - 70px); }
}

/* --------------------------------------------------------------------------
   Schriftverkehr (14.08.2026)
   Verlauf im Popup, eigener Datei-Knopf.
   -------------------------------------------------------------------------- */

.a-dialog--mail { width: min(760px, calc(100vw - 32px)); }

/* --------------------------------------------------------------------------
   DIALOGE DES HÜTTENPLANS (14.08.2026, Vorgabe Fabi)

   „ich will diese fenster in eigenem design haben, sie müssen in der bildmitte
   auftauchen und komplett übersetzt sein."

   Ersetzt `window.confirm` / `window.prompt`. Deren Rahmen zeichnet der
   Browser in der Sprache des Betriebssystems — über einer spanischen
   Oberfläche stand dort deutscher Text.

   Schmaler als der Mail-Dialog: hier stehen ein Satz, ein Feld, zwei Knöpfe.
   -------------------------------------------------------------------------- */

.a-dialog--frage { width: min(440px, calc(100vw - 32px)); }
.a-dialog--plan  { width: min(480px, calc(100vw - 32px)); }

/* Beim Benennen einer Reihe liegt der frisch gezeichnete Umriss dahinter —
   der Hintergrund wird deshalb nur angedeutet, nicht zugedeckt. */
.a-dialog--plan::backdrop { background-color: rgba(20, 24, 20, 0.35); }

/* Knopfzeile am unteren Rand: die Entscheidung steht rechts, das Zurück
   daneben. Getrennt vom Inhalt, damit sie beim Blättern stehen bleibt. */
.a-dialog__fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--linie);
  background-color: var(--flaeche);
}

/* Im Frage-Fenster hat der Text keinen unteren Abstand nötig, wenn kein Feld
   folgt — sonst klafft eine leere Zeile über der Knopfzeile. */
.a-dialog--frage .a-fliess:last-child { margin-bottom: 0; }

/*
 * Der Verlauf blaettert fuer sich, das Antwortformular bleibt sichtbar.
 * Ohne diese Trennung schiebt ein langer Briefwechsel das Textfeld aus dem
 * Bild, und man muss erst nach unten blaettern, um antworten zu koennen.
 */
.a-mail__verlauf {
  max-height: 42vh;
  overflow-y: auto;
  padding: 4px 2px 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linie);
}

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

.a-verlauf__eintrag {
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--linie);
  background-color: var(--fl);
}

/*
 * Eingang und Ausgang unterscheiden sich in der Kante, nicht in der Farbe:
 * eine farbige Sprechblasen-Ansicht wie im Nachrichtendienst waere hier
 * fehl am Platz — das ist Geschaeftspost.
 */
.a-verlauf__eintrag--rein  { border-left: 3px solid var(--bereich, var(--tanne)); }
.a-verlauf__eintrag--raus  { border-left: 3px solid var(--linie); background-color: var(--karte); }

.a-verlauf__kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--leise);
  margin-bottom: 6px;
}

.a-verlauf__wer { font-weight: 600; color: var(--text); }

.a-verlauf__betreff { margin: 0 0 6px; font-weight: 600; font-size: 14px; }

/* Absaetze der Originalmail erhalten, ohne HTML des Absenders zu uebernehmen. */
.a-verlauf__text {
  margin: 0;
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.a-verlauf__anhaenge {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.a-verlauf__offen {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #17a67b;
}

.a-dialog__wer { font-weight: 400; color: var(--leise); font-size: 13.5px; }

/* --- Das gruene Mail-Symbol in den Listen ------------------------------- */
/*
 * Fabis Vorgabe: „Erhalte ich jetzt eine Email zurück soll in seiner Spalte
 * ein grüner Mail Icon auftauchen, heisst für mich das ich hier antworten
 * muss." Deshalb GRUEN und nicht rot: es ist eine Gelegenheit, keine Panne.
 */
.a-mailzeichen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #17a67b;
  background-color: #ddf5ea;
  color: #0f8a66;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  /* 44px Trefferflaeche: die Zeile wird auch am Telefon bedient. */
  min-height: 30px;
}

.a-mailzeichen:hover { background-color: #c9efe0; }

.a-mailzeichen__zahl {
  font-variant-numeric: tabular-nums;
}

/* --- Eigener Datei-Knopf: umgezogen (18.08.2026) ------------------------
 *
 * Die Regeln stehen jetzt in css/datei-knopf.css. Hier erreichten sie nur
 * die Verwaltung — Huettenbereich, Buchhaltung, Personal und die
 * oeffentlichen Seiten laden admin.css nicht und zeigten deshalb weiterhin
 * den Systemknopf des Browsers (Fabi, 18.08.2026).
 * ---------------------------------------------------------------------- */

/*
 * Nur fuer Vorlesegeraete.
 *
 * Das gruene Symbol ist ein Briefumschlag mit einer Zahl — sichtbar eindeutig,
 * vorgelesen aber „Briefumschlag zwei". Der Satz hier sagt, was er bedeutet.
 * Nicht `display: none`: das nehmen Vorlesegeraete ebenfalls aus.
 */
.a-nur-lesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Zugang eines Betreibers — das Schloss (14.08.2026)
   Fabis Vorgabe: „ausgegrautes schloss heist nein, grünes Schloss heist ja."
   Wort daneben, weil diese Liste ausgedruckt und mitgenommen wird und ein
   Vorlesegeraet kein Schloss kennt.
   -------------------------------------------------------------------------- */

.a-schloss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.3;
  min-height: 30px;
}

.a-schloss__wort { font-weight: 600; }

/* Passwort gesetzt, Anmeldung moeglich. */
.a-schloss.ist-offen { color: #0f8a66; }
.a-schloss.ist-offen span[aria-hidden] { filter: none; }

/*
 * Eingeladen, aber noch kein Passwort. Graustufig UND blasser: nur Grau
 * unterscheidet sich auf einem Schwarz-Weiss-Ausdruck nicht genug von Gruen.
 */
.a-schloss.ist-zu { color: var(--leise); }
.a-schloss.ist-zu span[aria-hidden] { filter: grayscale(1); opacity: 0.55; }

/* Zugang entzogen. */
.a-schloss.ist-gesperrt { color: #c0453d; }
.a-schloss.ist-gesperrt span[aria-hidden] { filter: grayscale(1) brightness(0.8); }

/* --------------------------------------------------------------------------
   Sprachfeld mit Übersetzungsknopf (A9/A13, 14.08.2026)
   -------------------------------------------------------------------------- */

.a-sprachfeld { display: grid; gap: 8px; }

.a-sprachfeld__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/*
 * Der Knopf zeigt die ZIELSPRACHE („→ ES"), kein Sinnbild: ein Globus sagt
 * nicht, in welche Richtung uebersetzt wird.
 */
.a-sprachfeld__knopf {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.a-sprachfeld__fremd { border-left: 2px solid var(--linie); padding-left: 12px; }

.a-sprachfeld__fremdkopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Anlege-Formulare in Reihen (14.08.2026)

   Fabi zum Aushang-Formular: „das geht besser."

   Solche Formulare trugen die Klasse `a-filter`. Die ist fuer FILTERLEISTEN
   gebaut — ein Raster, das alle Kinder in EINE Zeile presst, dazu ein eigener
   Kartenrahmen. In einer Karte ergab das eine Karte in der Karte, und sieben
   Felder quetschten sich nebeneinander: Titel und Beschreibung wurden so
   schmal, dass der eingetippte Satz nicht mehr lesbar war.

   `a-anlegen` macht daraus Reihen. Jede Reihe ist ein eigenes Raster, der
   Rahmen kommt von der Karte darum. Die Felder behalten `a-filter__feld` —
   deren Stil greift ohnehin ueber `.a-karte .a-filter__feld`.
   -------------------------------------------------------------------------- */

/*
 * 🔴 Die eine Spalte MUSS ausgeschrieben stehen.
 *
 * Ohne sie erbte das Formular die Spalten aus dem Kartenraster und stellte
 * die Reihen NEBENEINANDER — gemessen am 14.08.2026: 510 px und 351 px statt
 * untereinander. Ein blosses `display: grid` genuegt hier nicht.
 */
.a-anlegen {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 16px;
}

.a-anlegen__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;

  /*
   * 🔴 Drei Zeilen je Feld: Beschriftung, Eingabe, Hilfetext.
   *
   *    Vorher stand hier `align-items: end`. Damit hing jedes Feld an seiner
   *    Unterkante — sobald EIN Feld einen Hilfetext trug („Leer =
   *    unbegrenzt.") oder eine zweizeilige Beschriftung hatte, stand seine
   *    Eingabe hoeher als die daneben. Fabi am 17.08.2026 mit Bild: „die
   *    eingabe felder sind nicht alles in einer linie."
   *
   *    `subgrid` gibt allen Feldern derselben Reihe DIESELBEN drei Zeilen.
   *    Die Eingaben liegen damit auf einer Linie, gleich wie lang die
   *    Beschriftung ist und ob ein Hilfetext folgt.
   */
  grid-template-rows: auto auto auto;
  align-items: start;
}

@supports (grid-template-rows: subgrid) {
  .a-anlegen__reihe > .a-feld {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    /* Der Abstand kommt vom Raster; ein eigener schoebe die Zeilen auseinander. */
    margin-bottom: 0;
  }

  /* Die Beschriftung sitzt in Zeile 1 und braucht keinen eigenen Abstand mehr. */
  .a-anlegen__reihe > .a-feld > .a-feld__label { margin-bottom: 5px; align-self: end; }
  .a-anlegen__reihe > .a-feld > .a-feld__hilfe { align-self: start; }
}

/*
 * Ohne subgrid (aeltere Browser): wenigstens oben ausrichten, damit die Reihe
 * nicht durcheinanderkippt.
 */
@supports not (grid-template-rows: subgrid) {
  .a-anlegen__reihe > .a-feld { margin-bottom: 0; }
}

/*
 * Fuer Text: Titel und Beschreibung brauchen Platz. 320 px statt 200 —
 * darunter passt kein halber Satz mehr in die Zeile.
 */
.a-anlegen__reihe--breit { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.a-anlegen__voll { grid-column: 1 / -1; }

/*
 * 🔴 Die Knopfleiste zwang eine zweite Spalte herbei.
 *
 * `.a-filter__aktionen` traegt aus der Filterleiste ein `grid-column: span 2`.
 * In einem einspaltigen Raster erzeugt das eine IMPLIZITE zweite Spalte — und
 * genau dort landeten die ersten beiden Reihen nebeneinander (gemessen:
 * 529 px und 332 px statt untereinander). Zwei Stunden Suche nach einer
 * Regel, die es gar nicht gab: die Spalte kam vom Kind, nicht vom Container.
 */
.a-anlegen .a-filter__aktionen { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Zweite Akzentfarbe für Knöpfe (A4, 15.08.2026)

   Fabi zu den E-Mail-Texten: „bitte die button speichern und in alle sprachen
   übersetzen farbig hervorheben."

   „Speichern" trägt die Hauptfarbe (Tanne). Für den zweiten wichtigen Knopf
   daneben braucht es eine EIGENE Farbe: zweimal dieselbe sähe aus wie ein
   Doppelklick-Angebot, und wer schnell arbeitet, trifft den falschen. Gold ist
   im Haus bereits gesetzt (Kennzahlen, Sterne, Prüfstatus) und steht für
   „Achtung, das tut etwas Größeres" — hier: alle vier Sprachen auf einmal.
   -------------------------------------------------------------------------- */

.a-knopf--gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.a-knopf--gold:hover { background-color: var(--gold-hell); border-color: var(--gold-hell); }

/* Während der Übersetzung wird der Knopf gesperrt — er soll dann auch so aussehen. */
.a-knopf--gold:disabled { background-color: var(--gold-hell); border-color: var(--gold-hell); opacity: 0.75; }

/* --------------------------------------------------------------------------
   Nachtrag 16.08.2026 — Klassen, die im Markup standen, aber in keiner Regel

   Gefunden mit `node scripts/ansicht-pruefen.js`: acht Klassennamen wurden von
   Ansichten benutzt, ohne dass es sie im Stylesheet gab. Sichtbar wurde das
   beim Umbau — ein Element ohne Regel faellt in einer rahmenlosen Oberflaeche
   sofort auf, waehrend es zwischen Kaesten und Strichen unterging.
   -------------------------------------------------------------------------- */

/* Die Sammelgruppe „Mehr" am Ende der Leiste. */
.a-nav__gruppe--mehr > .a-nav__link { color: var(--leise); }

/* Das Glockensymbol in der Kopfzeile. */
.a-glocke__zeichen {
  display: grid;
  place-items: center;
  color: var(--leise);
}

.a-glocke[open] .a-glocke__zeichen,
.a-glocke__knopf:hover .a-glocke__zeichen { color: var(--navy); }

/* Person mit Bild oder Initialen — in der Team-Liste und ueberall, wo ein
   Konto genannt wird. */
.a-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.a-person__bild,
.a-person__initialen {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.a-person__initialen {
  display: grid;
  place-items: center;
  background: var(--v-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.a-person__name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
}

/* Zwei Formulare nebeneinander in einer Tabellenzelle (Reihenfolge aendern). */
.a-zelle--knoepfe {
  white-space: nowrap;
}

.a-zelle--knoepfe > .a-inline + .a-inline { margin-left: 4px; }

.a-inline { display: inline-block; }

/* Das Schreibformular im Mail-Fenster: eine Spalte, damit Betreff, Text und
   Anhaenge untereinander stehen. */
.a-mail__formular {
  display: grid;
  gap: 12px;
}

/* Mehrfachauswahl der Kategorien eines Aushangs. */
.a-kategoriewahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

/* Zwei Kuratierungs-Status hatten keine eigene Punktfarbe und standen grau
   zwischen den anderen. */
.a-status__punkt--interessant { background-color: var(--cyan); }
.a-status__punkt--vertragabgeschlossen { background-color: var(--mint); }

/* ==========================================================================
   Anzeigetypen der Dashboard-Vorlage (16.08.2026)
   ==========================================================================

   Die Vorlage zeigt fuenf Bausteine, die es hier vorher nicht gab: eine
   Trendplakette neben der Kennzahl, eine Segmentwahl in der Karte, einen Bogen
   aus einzelnen Strichen, ein Saeulendiagramm mit hervorgehobener Saeule und
   eine Rangliste mit Zahl am rechten Rand.

   Vier davon sind reines HTML und CSS — kein Chart.js. Das ist kein Geiz: eine
   Zahl, die als Balken danebensteht, muss nicht durch eine Zeichenflaeche
   gehen. Sie ist so auch im Ausdruck da, laesst sich markieren und vorlesen,
   und sie kann nicht „leer bleiben", wenn ein Skript ausfaellt.

   Die SERIENFARBEN fuer echte Diagramme (Chart.js) stehen weiter unten und
   sind mit dem Pruefskript des dataviz-Bausteins geprueft:
   `#1d5fa5 → #2ec2d7 → #6b5fc4 → #2fcaa0` besteht alle sechs Pruefungen
   (schlechtestes Nachbarpaar ΔE 22.6 bei Deuteranopie, 26.4 bei normalem
   Sehen). Die Reihenfolge ist FEST — eine Serie behaelt ihre Farbe, auch wenn
   eine andere wegfaellt.
   -------------------------------------------------------------------------- */

:root {
  --serie-1: #1d5fa5;
  --serie-2: #2ec2d7;
  --serie-3: #6b5fc4;
  --serie-4: #2fcaa0;
  --serie-5: #c08415;
}

/* --------------------------------------------------------------------------
   Trendplakette — „+22 % vs. Vormonat"
   -------------------------------------------------------------------------- */

.a-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--pille);
  background-color: var(--gut-fl);
  color: var(--gut);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.a-trend--runter { background-color: var(--schlecht-fl); color: var(--schlecht); }
.a-trend--gleich { background-color: var(--fl-satt); color: var(--leise); }

/* Der Pfeil steht als Zeichen davor, damit die Richtung nicht nur an der
   Farbe haengt (rot und gruen sind fuer rund acht Prozent der Maenner
   dasselbe). */
.a-trend::before { content: '\2191'; font-size: 10px; line-height: 1; }
.a-trend--runter::before { content: '\2193'; }
.a-trend--gleich::before { content: '\2192'; }

/* Der Vergleichstext daneben — klein, leise, kein Teil der Plakette. */
.a-trend-text {
  margin-left: 7px;
  font-size: 11.5px;
  color: var(--sehr-leise);
}

.a-kpi--akzent .a-trend-text { color: rgba(255, 255, 255, 0.66); }

/* --------------------------------------------------------------------------
   Segmentwahl in der Karte — die Zeitspannen der Vorlage
   -------------------------------------------------------------------------- */

.a-segment {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--pille);
  background-color: var(--fl);
}

.a-segment__wahl {
  padding: 6px 13px;
  border: 0;
  border-radius: var(--pille);
  background-color: transparent;
  color: var(--leise);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.a-segment__wahl:hover { color: var(--text); }

.a-segment__wahl.ist-aktiv {
  background: var(--v-blau);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(30, 123, 196, 0.28);
}

/* --------------------------------------------------------------------------
   Bogen — der Halbkreis aus einzelnen Strichen
   --------------------------------------------------------------------------
   Nachgebaut wie in der Vorlage: 40 Striche ueber 180 Grad, die gefuellten in
   einem Verlauf von Tuerkis nach Hellgruen, die uebrigen blass. Gezeichnet
   wird er in der Ansicht (partials/bogen.ejs) als SVG — hier steht nur, wie er
   sitzt und was die Zahl in der Mitte tut.
   -------------------------------------------------------------------------- */

.a-bogen {
  display: grid;
  justify-items: center;
  gap: 2px;
  position: relative;
}

.a-bogen__bild { display: block; width: 100%; max-width: 300px; height: auto; }

/* Zahl und Beschriftung liegen IM Bogen, nicht darunter: sonst waere der
   Halbkreis nur Zierrat um einen leeren Kreis. */
.a-bogen__mitte {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.a-bogen__wert {
  margin: 0;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.a-bogen__marke { margin: 2px 0 0; font-size: 13px; color: var(--leise); }

.a-bogen__fuss {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sehr-leise);
  text-align: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Saeulen — das Wochendiagramm der Vorlage
   --------------------------------------------------------------------------
   Jede Saeule ist ein Element mit eigener Hoehe. Die hoechste traegt den
   Verlauf und die Schraffur, die uebrigen stehen blass daneben — so sieht man
   den Ausschlag, bevor man eine Zahl gelesen hat.
   -------------------------------------------------------------------------- */

.a-saeulen {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 210px;
  padding-top: 26px;  /* Platz fuer die Werte ueber den Saeulen */
}

/*
 * Raster statt Reihe: die obere Zeile ist die Flaeche der Saeule, die untere
 * traegt die Beschriftung. In einer Flex-Reihe bezog sich die Prozenthoehe der
 * Saeule auf den GANZEN Punkt und wurde anschliessend geschrumpft, damit die
 * Beschriftung noch Platz hat — gemessen 97 statt 158 Punkte. Die hoechste
 * Saeule fuellte dadurch nur die halbe Karte.
 */
.a-saeulen__punkt {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: end;
  height: 100%;
  gap: 8px;
  text-decoration: none;
}

.a-saeulen__saeule {
  position: relative;
  width: 100%;
  max-width: 54px;
  border-radius: 10px 10px 6px 6px;
  /* Etwas kraeftiger als die uebrigen Fuellflaechen: eine Saeule mit dem Wert
     null ist sonst auf Weiss nicht mehr zu sehen, und die Null darueber
     schwebt im Leeren. */
  background-color: #dbe7f2;
  /* Auch eine Saeule mit dem Wert null bleibt als Stummel sichtbar — sonst
     schwebte die Null ueber einer Luecke, und ein Tag ohne Eingang saehe aus
     wie ein Tag ohne Messung. */
  min-height: 10px;
  transition: filter 0.15s ease;
}

.a-saeulen__punkt:hover .a-saeulen__saeule { filter: brightness(0.96); }

.a-saeulen__punkt--hoch .a-saeulen__saeule {
  background-color: transparent;
  background-image: var(--v-schraffur), linear-gradient(180deg, #35cfa4 0%, #2ec2d7 100%);
}

/* Der Wert steht ueber der Saeule, als kleine Plakette wie in der Vorlage. */
.a-saeulen__wert {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--pille);
  background-color: var(--blau-fl);
  color: var(--navy-hell);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.a-saeulen__punkt--hoch .a-saeulen__wert { background-color: var(--gut-fl); color: var(--gut); }

.a-saeulen__marke {
  font-size: 12px;
  color: var(--leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Auf schmalen Schirmen bleiben die Saeulen lesbar, indem sie schmaler werden
   statt umzubrechen — ein umgebrochenes Diagramm ist keines mehr. */
@media (max-width: 640px) {
  .a-saeulen { gap: 5px; height: 170px; }
  .a-saeulen__marke { font-size: 10.5px; }
  .a-saeulen__wert { font-size: 10px; padding: 1px 6px; }
}

/* --------------------------------------------------------------------------
   Rangliste — die Liste mit der Zahl am rechten Rand
   -------------------------------------------------------------------------- */

.a-rangliste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.a-rangliste__eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background-color: var(--fl);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

a.a-rangliste__eintrag:hover { background-color: var(--karte); box-shadow: var(--schatten); }

.a-rangliste__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--karte);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(16, 42, 74, 0.12);
}

.a-rangliste__text { min-width: 0; flex: 1 1 auto; }
.a-rangliste__titel { display: block; font-size: 13.5px; font-weight: 600; }
.a-rangliste__zusatz { display: block; font-size: 12px; color: var(--sehr-leise); }

/* Die Zahl rechts sitzt in einer Pille — in der Vorlage traegt sie die
   Leitfarbe und ist damit das Erste, was man in der Zeile sieht. */
.a-rangliste__wert {
  flex: none;
  min-width: 44px;
  padding: 5px 12px;
  border-radius: var(--pille);
  background: var(--v-blau);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.a-rangliste__eintrag--leer .a-rangliste__wert {
  background: var(--fl-satt);
  color: var(--sehr-leise);
}

/* Die Zeichenflaechen (.a-leinwand) und das Raster der Diagrammkarten
   (.a-diagramme) sind weiter oben in dieser Datei geregelt — hier stuenden sie
   ein zweites Mal und wuerden die dortigen Masse still ueberschreiben. */

/* --------------------------------------------------------------------------
   Raster der Uebersicht — der Aufbau der Vorlage
   --------------------------------------------------------------------------
   Obere Reihe: schmale Spalte mit zwei gestapelten Kennzahlen, daneben der
   Verlauf, rechts der Bogen. Untere Reihe: das Saeulendiagramm breit, die
   Rangliste schmal daneben.
   -------------------------------------------------------------------------- */

.a-uebersicht {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(300px, 1.2fr) minmax(280px, 1.05fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.a-uebersicht--unten {
  grid-template-columns: minmax(320px, 1.9fr) minmax(280px, 1fr);
}

/* Die beiden gestapelten Kennzahlen der linken Spalte. */
.a-uebersicht__stapel { display: grid; gap: 20px; }

/* In der Reihe stehen die Karten nebeneinander — der Aussenabstand kommt vom
   Raster, nicht von der Karte. */
.a-uebersicht__karte { margin-bottom: 0; }

@media (max-width: 1180px) {
  .a-uebersicht,
  .a-uebersicht--unten { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 720px) {
  .a-uebersicht,
  .a-uebersicht--unten { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Provision je zugeteilter Huette (17.08.2026)
   --------------------------------------------------------------------------
   Eine Zeile je Huette: links die Nummer, daneben die Vereinbarung, rechts
   der Stand als Plakette. Auf schmalen Schirmen stapelt sich das — eine
   Auswahl neben einem Zahlenfeld neben einem Knopf braucht sonst 500 Punkte,
   die es dort nicht gibt.
   -------------------------------------------------------------------------- */

.a-provision { display: grid; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }

.a-provision__zeile {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(280px, 1fr) minmax(120px, auto);
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background-color: var(--fl);
}

.a-provision__huette { display: grid; gap: 3px; align-content: center; }

.a-provision__form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.a-provision__wahl { min-width: 150px; }
.a-provision__satz { width: 110px; }

/* Das Satzfeld ist gesperrt, solange keine Provision faellig ist. Gesperrt
   heisst hier: sichtbar, aber erkennbar ausser Betrieb — ein verstecktes Feld
   liesse die Zeile bei jedem Wechsel springen. */
.a-provision__satz input[disabled] {
  background-color: var(--fl-satt);
  color: var(--sehr-leise);
  cursor: not-allowed;
}

.a-provision__stand { margin: 0; text-align: right; align-self: center; }

@media (max-width: 860px) {
  .a-provision__zeile { grid-template-columns: minmax(0, 1fr); }
  .a-provision__stand { text-align: left; }
}

/* --------------------------------------------------------------------------
   Übersetzungsknopf an mehrsprachigen Feldern (17.08.2026)

   Fabi: „habe dann einen übersetzung icon um alles anderen sprachen
   automatisch zu übersetzen".

   🔴 Der Knopf sitzt IN der Beschriftung, nicht darunter und nicht daneben.
      Eine eigene Zeile darüber hätte die Felder einer Reihe unterschiedlich
      hoch gemacht — genau die schiefe Linie, die am 17.08. beanstandet wurde.
      Die Beschriftungszeile wird zu einer Flex-Zeile; das Subgrid der
      Anlege-Reihe hält alle Beschriftungen weiterhin auf einer Höhe.
   -------------------------------------------------------------------------- */

.a-feld__label--mit-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.a-uebersetzen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-fein);
  background: none;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--leise);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.a-uebersetzen:hover:not([disabled]),
.a-uebersetzen:focus-visible {
  color: var(--blau);
  border-color: var(--linie-satt);
  background-color: var(--fl);
}

.a-uebersetzen[disabled] { cursor: progress; opacity: 0.7; }

/*
   Im Ruhezustand nur der Globus. Vier Spalten mit dem Wort „Übersetzen"
   darüber wären mehr Knopf als Feld; der Text klappt erst auf, wenn es etwas
   zu melden gibt. Für Screenreader bleibt er über aria-label immer lesbar.
*/
.a-uebersetzen__wort {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.2s ease, opacity 0.2s ease;
}

.a-uebersetzen--meldet .a-uebersetzen__wort,
.a-uebersetzen:hover .a-uebersetzen__wort,
.a-uebersetzen:focus-visible .a-uebersetzen__wort {
  max-width: 190px;
  opacity: 1;
}

.a-uebersetzen--fehler { color: var(--schlecht); }

.a-uebersetzen--laeuft svg { animation: a-uebersetzen-dreht 1.4s linear infinite; }

@keyframes a-uebersetzen-dreht {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .a-uebersetzen--laeuft svg { animation: none; }
  .a-uebersetzen__wort { transition: none; }
}

/* Kurzes Aufleuchten der gefüllten Felder — sonst merkt niemand, was passiert ist. */
.a-feld--uebersetzt {
  animation: a-feld-gefuellt 1.6s ease;
}

@keyframes a-feld-gefuellt {
  0% { background-color: var(--cyan-fl); }
  100% { background-color: var(--karte); }
}

/* --------------------------------------------------------------------------
   Partnerseite bearbeiten (17.08.2026)

   Fabi: „sie sollte in Webseite bearbeiten, dann kommt der editor und dort
   wollte ich AUCH die partnerseite bearbeiten können."

   Ein Baustein ist ein <fieldset>: vier Sprachen, die zusammengehören. Die
   dünne Linie links macht sichtbar, wo einer aufhört und der nächste anfängt —
   bei zwanzig Bausteinen untereinander verschwimmt das sonst zu einer Wand
   aus Feldern.
   -------------------------------------------------------------------------- */

.a-baustein {
  margin: 0 0 18px;
  padding: 12px 0 2px 14px;
  border: 0;
  border-left: 2px solid var(--linie);
}

.a-baustein:hover { border-left-color: var(--cyan); }

.a-baustein__name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px;
  font-size: 12px;
  color: var(--leise);
}

.a-baustein__name code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--navy-hell);
}

/*
   Der Originaltext unter dem Feld. Er steht nur da, wenn eine eigene Fassung
   existiert — sonst wäre es eine Zeile, die dasselbe zweimal sagt.
*/
.a-baustein__original {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--sehr-leise);
}

.a-baustein textarea {
  min-height: 40px;
  resize: vertical;
}

/* ==========================================================================
   Betreiber-Funnel, Verwaltungsteil (19.08.2026)
   --------------------------------------------------------------------------
   Ergänzt die Klassen, die es in dieser Datei noch nicht gab. Alles benutzt
   die Token oben — keine neue Farbe, keine neue Schrift.

   Ansichten: views/admin/portal-huetten.ejs, portal-huette.ejs,
              portal-revision.ejs, portal-extras.ejs
   ========================================================================== */

/* Zahlenspalten rechtsbündig — Beträge liest man an der letzten Stelle. */
.a-rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* Zwei Felder nebeneinander, sobald Platz ist. */
.a-feldpaar { display: grid; gap: 14px; }

@media (min-width: 640px) {
  .a-feldpaar { grid-template-columns: 1fr 1fr; }
}

.a-feld__hinweis {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--leise);
}

/* Ein Kontrollkästchen mit Beschriftung daneben, nicht darüber. */
.a-feld--haken {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* Fingergerecht auch am Tablet. */
  min-height: 44px;
}

.a-feld--haken input { width: auto; margin: 0; }
.a-feld--haken > span { font-weight: 500; }

/* Ein gedrängtes Formular in einer Tabellenzelle oder Listenzeile. */
.a-formular--eng {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.a-formular--eng input[type='text'] { min-width: 160px; flex: 1 1 160px; }

/* Summenblock unter einem Formular. */
.a-tabelle--summe { max-width: 420px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Listenzeilen — für Nachforderungen, Zusatzleistungen, Verteilung
   -------------------------------------------------------------------------- */

.a-listenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.a-listenzeile:last-child { border-bottom: 0; }

.a-listenzeile__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Phasenliste einer Hütte
   -------------------------------------------------------------------------- */

.a-phasenliste {
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.a-phase {
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  overflow: hidden;
}

.a-phase__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--fl);
  border-bottom: 1px solid var(--linie);
}

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

.a-phase__titel { font-weight: 700; flex: 1 1 auto; min-width: 0; }

.a-phase__inhalt { padding: 12px 14px; display: grid; gap: 10px; }

.a-phase__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/*
 * Die Zustände. Farbig ist nur, was eine Entscheidung verlangt — sonst wäre
 * eine Liste aus sechs bunten Kästen, in der nichts mehr heraussticht.
 */
.a-phase--eingereicht { border-color: #f0d59a; }
.a-phase--eingereicht .a-phase__kopf { background: var(--warn-fl, #fdf3de); }
.a-phase--eingereicht .a-phase__nummer { background: var(--warn, #c08415); border-color: transparent; color: #fff; }

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

.a-phase--erledigt .a-phase__nummer { background: var(--mint); border-color: transparent; color: #fff; }

.a-phase--gesperrt { opacity: 0.7; }
.a-phase--entfaellt { opacity: 0.5; }

/* Inaktive Artikel treten in der Übersicht zurück, verschwinden aber nicht. */
.a-tabelle tr.ist-inaktiv { opacity: 0.6; }

/* ==========================================================================
   REITER IM BEARBEITEN-PANEL EINER HUETTE          (19.08.2026)
   ==========================================================================

   Fabi: „bau das bitte in taps um, es ist mir alles zu unuebersichtlich."

   Das Panel war auf zehn Karten untereinander gewachsen — Stammdaten,
   Konditionen, Stornieren, Sperren, dann der ganze Portal-Ablauf mit sechs
   Phasen, Nachforderungen und Rechnungen. Wer die Provision aendern wollte,
   scrollte an allem vorbei.

   🔴 OHNE JAVASCRIPT, absichtlich. Das Panel ist laut eigenem Kopfkommentar
      auch als vollstaendige Seite erreichbar — „die Seite funktioniert also
      auch ohne JavaScript vollstaendig". Ein Reiter, der ein Skript braucht,
      haette daraus eine Seite gemacht, auf der man nur noch ein Viertel
      sieht. Deshalb verdeckte Radios + Geschwister-Selektor: der Browser
      haelt den Zustand selbst, ganz ohne Code.

   🔴 KEINE eigene Reiter-Optik. `.a-unternav` ist die Pillenreihe, die im
      Kopf der Verwaltung schon benutzt wird — dieselbe Form, dieselben
      Abstaende, derselbe Schatten. Hier kommt nur das Umschalten dazu.

   Die Zaehlung laeuft ueber nth-of-type, nicht ueber IDs: die Blaetter
   haengen an der Huette, und ein Panel kann mehrfach im Dokument stehen.
   Radios (input) und Blaetter (section) muessen daher in GLEICHER
   Reihenfolge stehen — das dritte Radio gehoert zum dritten section.
   ========================================================================== */

.a-reiter {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/*
 * Die Radios tragen den Zustand und sind nicht sichtbar — aber sie bleiben
 * fokussierbar (kein `display: none`), damit die Reiter mit der Tastatur
 * erreichbar sind: Tab auf die Gruppe, Pfeiltasten zum Wechseln.
 */
.a-reiter__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.a-reiter__leiste {
  margin: 0 0 18px;
  cursor: default;
}

.a-reiter__leiste .a-unternav__punkt {
  cursor: pointer;
  user-select: none;
}

/*
 * Das Blatt traegt denselben Abstand wie das Panel selbst (18px zwischen den
 * Karten, siehe `.a-bearbeiten .a-formular`) — sonst kleben die Karten im
 * Reiter enger aneinander als ausserhalb.
 */
.a-reiter__blatt {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.a-reiter__wahl:nth-of-type(1):checked ~ .a-reiter__blatt:nth-of-type(1),
.a-reiter__wahl:nth-of-type(2):checked ~ .a-reiter__blatt:nth-of-type(2),
.a-reiter__wahl:nth-of-type(3):checked ~ .a-reiter__blatt:nth-of-type(3),
.a-reiter__wahl:nth-of-type(4):checked ~ .a-reiter__blatt:nth-of-type(4),
/*
 * Der fuenfte Reiter: „Produkte & Kueche" an der Huette (03.09.2026).
 * Ohne diese Zeile bliebe sein Blatt verborgen — die Reihe endete bei vier.
 */
.a-reiter__wahl:nth-of-type(5):checked ~ .a-reiter__blatt:nth-of-type(5) {
  display: flex;
}

/*
 * Dieselbe Optik wie `.a-unternav__punkt.ist-aktiv` im Kopf — nur ueber den
 * Zustand des Radios statt ueber eine Klasse, die ein Skript setzen muesste.
 *
 * 🔴 DIESE REGEL NICHT MIT `getComputedStyle` PRUEFEN — nur mit einem
 *    Screenshot.
 *
 *    Am 19.08.2026 meldete `getComputedStyle(punkt).backgroundColor` nach
 *    jedem Reiterwechsel, der Hintergrund haenge noch beim ERSTEN Reiter,
 *    waehrend `font-weight` und `box-shadow` aus DERSELBEN Regel korrekt
 *    mitwanderten. Das galt in der Vorschau UND im echten Chrome. Der
 *    Screenshot zeigte dann: die Darstellung war die ganze Zeit richtig.
 *
 *    Bei `:checked ~ …` liefert die Abfrage fuer `background-color` also
 *    veraltete Werte. Wer dieser Messung glaubt, „repariert" eine Regel,
 *    die funktioniert — und baut den Fehler erst ein. (Genau das ist hier
 *    beinahe passiert: die Farben standen schon fest ausgeschrieben statt
 *    als Token, bevor der Screenshot die Messung widerlegte.)
 */
.a-reiter__wahl:nth-of-type(1):checked ~ .a-reiter__leiste .a-unternav__punkt:nth-child(1),
.a-reiter__wahl:nth-of-type(2):checked ~ .a-reiter__leiste .a-unternav__punkt:nth-child(2),
.a-reiter__wahl:nth-of-type(3):checked ~ .a-reiter__leiste .a-unternav__punkt:nth-child(3),
.a-reiter__wahl:nth-of-type(4):checked ~ .a-reiter__leiste .a-unternav__punkt:nth-child(4),
.a-reiter__wahl:nth-of-type(5):checked ~ .a-reiter__leiste .a-unternav__punkt:nth-child(5) {
  background-color: var(--karte);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 2px 7px rgba(16, 42, 74, 0.12);
}

/* Tastaturbedienung muss man sehen — sonst wandert der Fokus unsichtbar. */
.a-reiter__wahl:nth-of-type(1):focus-visible ~ .a-reiter__leiste .a-unternav__punkt:nth-child(1),
.a-reiter__wahl:nth-of-type(2):focus-visible ~ .a-reiter__leiste .a-unternav__punkt:nth-child(2),
.a-reiter__wahl:nth-of-type(3):focus-visible ~ .a-reiter__leiste .a-unternav__punkt:nth-child(3),
.a-reiter__wahl:nth-of-type(4):focus-visible ~ .a-reiter__leiste .a-unternav__punkt:nth-child(4),
.a-reiter__wahl:nth-of-type(5):focus-visible ~ .a-reiter__leiste .a-unternav__punkt:nth-child(5) {
  outline: 2px solid var(--blau-hell);
  outline-offset: 2px;
}

/*
 * Der Zaehler am Reiter „Ablauf" (3/6) und der Hinweis auf Wartendes.
 * Eine Zahl an der Pille erspart das Oeffnen, nur um zu sehen, ob etwas
 * offen ist.
 */
.a-reiter__zahl {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: 0.75;
}

/*
 * Im Panel darf die Pillenreihe nicht den weissen Kopf-Hintergrund erben —
 * dort steht sie auf der hellen Seitenflaeche, hier auf der Karte.
 */
.a-bearbeiten .a-reiter__leiste {
  background-color: var(--flaeche, rgba(16, 42, 74, 0.045));
  box-shadow: none;
}


/* ==========================================================================
   ZWEISPRACHIGER SCHRIFTVERKEHR (24.08.2026)
   ==========================================================================

   Fabis Vorgabe: „am besten machen wir das vielleicht so, dass wir die
   Schriftverkehrmaske verbreitern. Links Spanisch, rechts Deutsch. Und je
   nachdem, was ich schreibe, kann ich dann übersetzen und dann absenden."

   🔴 Breiter wird das Fenster NUR, wenn es auch zwei Spalten hat. Ohne
      hinterlegten Schlüssel steht dort ein einzelnes Textfeld — auf 1180px
      gezogen wäre das eine sehr lange Zeile und schlechter lesbar als vorher.
      Deshalb hängt die Breite an der Zusatzklasse, nicht an .a-dialog--mail.
   -------------------------------------------------------------------------- */

.a-dialog--mail-breit { width: min(1180px, calc(100vw - 32px)); }

/*
 * 🔴 Das Antwortformular hat EINE Spalte — auch wenn ein Kind etwas anderes
 *    behauptet.
 *
 *    `.a-mail__formular` ist ein Raster ohne Spaltenangabe, also eigentlich
 *    einspaltig. Die Knopfzeile am Ende trägt jedoch `grid-column: span 2`
 *    (aus `.a-filter__aktionen`, gedacht für die zweispaltigen Masken der
 *    Verwaltung). Damit legt der Browser eine ZWEITE Spalte an — und der
 *    zweisprachige Block landete am 24.08.2026 neben dem Betreff statt
 *    darunter: links das Betrefffeld, rechts gequetscht die beiden Fassungen.
 *
 *    Deshalb hier ausdrücklich: jedes direkte Kind über die volle Breite.
 */
.a-mail__formular > * { grid-column: 1 / -1; }

/*
 * 🔴 Im Mail-Fenster blättert NUR der äussere Kasten, nicht auch noch die
 *    Liste darin.
 *
 *    `.a-verlauf` ist ursprünglich die Zeitleiste der Kundenakte und bringt
 *    von dort `max-height: 320px; overflow-y: auto` mit. Im Popup steckt sie
 *    in `.a-mail__verlauf`, der dasselbe tut — zwei Rollbalken ineinander.
 *    Sichtbare Folge: der Sprung ans Ende des Briefwechsels ging ins Leere
 *    (das Skript rollt den äusseren Kasten, gerollt werden müsste die innere
 *    Liste), und eine eingeblendete Übersetzung wurde unten abgeschnitten,
 *    statt den Kasten wachsen zu lassen.
 */
.a-mail__verlauf .a-verlauf {
  max-height: none;
  overflow-y: visible;
  border-left: 0;
}

/* Der breite Dialog hat Platz für mehr Briefwechsel auf einen Blick. */
.a-dialog--mail-breit .a-mail__verlauf { max-height: 46vh; }

/*
 * Zwei gleich breite Spalten. Nicht 60/40: beide Fassungen sind derselbe
 * Brief, und wer links prüft, vergleicht Zeile für Zeile mit rechts.
 */
.a-mail__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/*
 * Unter 980px nebeneinander wären es zwei Spalten von je 40 Zeichen. Dann
 * lieber untereinander — die Reihenfolge im Quelltext ist so gewählt, dass
 * dabei das Feld ganz oben steht, das hinausgeht.
 */
@media (max-width: 980px) {
  .a-mail__spalten { grid-template-columns: 1fr; }
}

.a-mail__spalte { display: grid; gap: 6px; }

.a-mail__spaltenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

.a-mail__spaltentitel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  /* „Geht hinaus" brach neben der Sprachwahl auf zwei Zeilen um und schob die
     beiden Spaltenköpfe auf unterschiedliche Höhen. Zwei Wörter, eine Zeile. */
  white-space: nowrap;
}

/* Beschriftung und Sprachwahl in einer Zeile — die Wahl gehört zur
   Überschrift „Geht hinaus", nicht darunter. */
.a-mail__sprachwahl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.a-mail__sprachwahl select {
  padding: 3px 8px;
  font-size: 13px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background-color: var(--fl);
  color: var(--text);
}

.a-mail__spalte textarea {
  width: 100%;
  resize: vertical;
}

/*
 * Die Fassung, die hinausgeht, bekommt eine Kante in der Bereichsfarbe. Sie
 * ist der Brief — das rechte Feld ist eine Notiz und wird nicht verschickt.
 */
.a-mail__spalte--hinaus textarea {
  border-left: 3px solid var(--bereich, var(--tanne));
}

/* Hinweis und Fehler unter dem Feld. Nimmt auch im leeren Zustand Platz ein,
   damit die beiden Spalten beim Übersetzen nicht gegeneinander springen. */
.a-mail__stand {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--leise);
}

/* --- Übersetzung im Verlauf --------------------------------------------- */

/*
 * Original und Übersetzung nebeneinander (24.08.2026).
 *
 * Fabi: „am besten wir machen es nebeneinander, links die original nachricht,
 * rechts daneben die deutsche übersetzung im eigenen feld."
 *
 * 🔴 Zwei Spalten NUR mit sichtbarer Übersetzung. Sonst stünde das Original
 *    auf halber Breite mit einer leeren Fläche daneben — schlechter zu lesen
 *    als vorher. Die Klasse setzt die Vorlage (bereits übersetzt) oder das
 *    Skript beim Umschalten.
 */
.a-verlauf__paar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.a-verlauf__paar--zwei { grid-template-columns: 1fr 1fr; }

/*
 * Im schmalen Fenster untereinander: zwei Spalten von je 40 Zeichen sind
 * kein Vergleich mehr, sondern zwei Schluchten.
 */
@media (max-width: 980px) {
  .a-verlauf__paar--zwei { grid-template-columns: 1fr; }
}

/* Beide Seiten gleich aufgebaut: Fahne, darunter der Text. */
.a-verlauf__seite { min-width: 0; }

/*
 * Die deutsche Fassung ist eine Lesehilfe, nicht der Brief. Deshalb bleibt sie
 * abgesetzt — gestrichelte Kante, eigene Fläche. Wer zitiert, greift nach
 * links.
 */
.a-verlauf__uebersetzt {
  padding: 8px 12px;
  border-left: 2px dashed var(--linie);
  background-color: var(--karte);
  border-radius: 0 var(--r) var(--r) 0;
}

/* Die Fahne über dem Original ist nur eine Beschriftung, kein Hinweis —
   deshalb blasser als die der Übersetzung. */
.a-verlauf__fahne--still { opacity: 0.75; }

/*
 * „Warte auf Antwort" — der Knopf sagt den Zustand, nicht die Handlung
 * (24.08.2026).
 *
 * Fabi: „ich habe jetzt auf die email geantwortet. jetzt muss statt email
 * schreiben in dem button stehen warte auf antwort."
 *
 * Er sieht anders aus als „E-Mail schreiben", weil er etwas anderes bedeutet:
 * dort steht eine offene Aufgabe, hier ein erledigter Zug. Blasser Text und
 * ein gestrichelter Rahmen — dieselbe Sprache wie bei der Übersetzung im
 * Verlauf, wo gestrichelt „nicht das Original" heisst.
 *
 * 🔴 Klickbar bleibt er trotzdem, und er sieht auch so aus (Zeiger, Hover).
 *    Nachfassen muss möglich sein, ohne dass man erst rätselt, ob der Knopf
 *    noch geht.
 */
.a-knopf--wartet {
  border: 1px dashed var(--linie);
  background-color: transparent;
  box-shadow: none;
  color: var(--leise);
  font-style: italic;
}

.a-knopf--wartet:hover {
  border-style: solid;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(16, 42, 74, 0.09);
}

.a-verlauf__fahne {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--leise);
}

.a-verlauf__werkzeuge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
 * Interessenten-Akte (views/admin/kunde-akte.ejs)
 *
 * Eine Akte kann MEHRERE Anfragen derselben Firma zeigen — wer zweimal
 * geschrieben hat, hat zwei Zeilen in "einsendungen". Ohne Trennlinie liefen
 * die Bloecke ineinander und der zweite sah aus wie eine Fortsetzung des
 * ersten. Der letzte Block traegt keine Linie: sie waere ein Strich ins Leere
 * kurz vor dem Kartenrand.
 * ------------------------------------------------------------------------- */
.a-akte__block + .a-akte__block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

/* Zwischentitel ueber den Fliesstexten der Anfrage. Kleiner als
   .a-untertitel, damit die Ueberschrift den Text nicht ueberstimmt — gelesen
   werden soll, was die Firma geschrieben hat. */
.a-akte__zwischentitel {
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--leise);
}

/*
 * Kopfzeile einer Anfrage: Datum links, „Anfrage öffnen" rechts.
 *
 * Auf dem Telefon (390 px) schob sich der Knopf am 24.08.2026 ueber den
 * rechten Kartenrand hinaus und war zur Haelfte abgeschnitten: die
 * Ueberschrift daneben hat als Flex-Kind die Vorgabe `min-width: auto` und
 * schrumpft deshalb nicht unter ihre laengste Zeile. Mit `min-width: 0` darf
 * sie umbrechen, mit der Grundbreite von 220 px rutscht der Knopf darunter,
 * sobald es enger wird.
 */
.a-akte__block .a-karte__kopf { align-items: flex-start; }
.a-akte__block .a-karte__kopf > .a-untertitel {
  min-width: 0;
  flex: 1 1 220px;
}

/*
 * Die beiden Spalten der Akte duerfen schmaler werden als ihr breitester
 * Inhalt.
 *
 * Ein Grid-Kind hat die Vorgabe `min-width: auto` und waechst mit dem, was
 * darin steht. Die Tabelle des Schriftverkehrs (vier Spalten, lange Betreffs)
 * schob die linke Spalte am 24.08.2026 auf 421 px auf, obwohl das Telefon nur
 * 390 px hat — die Karte lief rechts aus dem Bild, samt Knopf „Anfrage
 * oeffnen". Mit `min-width: 0` bleibt die Spalte in ihrer Bahn und die
 * Tabelle scrollt in ihrer eigenen Huelle (.a-tabelle__huelle), so wie es
 * gedacht war.
 *
 * Bewusst nur fuer diese Seite: eine Regel auf alle `.a-spalte` traefe ein
 * Dutzend Ansichten, die das Problem nicht haben.
 */
.a-spalten--akte > .a-spalte { min-width: 0; }

/* ==========================================================================
   ZUGANGSSTAND — die Stufen einer verschickten Zugangsmail (08.09.2026)

   Fabi: „Hier brauchen wir dann noch eine Bestaetigung, dass der Zugang
   erstellt wurde, dass die E-Mail erhalten wurde und dass die E-Mail
   geoeffnet wurde."

   Bewusst eine eigene Liste und keine Tabelle: es sind fuenf feste Zeilen,
   die auf dem Telefon untereinander stehen sollen. Eine Tabelle braechte
   waagerechtes Scrollen fuer zwei Angaben.
   ========================================================================== */

.a-stufen {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  font-size: 13px;
}

.a-stufen__zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--rand);
}

.a-stufen__zeile:last-child { border-bottom: 0; }

/* Der Name der Stufe traegt das Gewicht, der Zeitpunkt steht leise daneben. */
.a-stufen__was {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
}

.a-stufen__wann {
  font-size: 12px;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}

/*
 * Eine offene Stufe wird BLASSER, nicht rot: sie ist kein Fehler, sondern
 * etwas, das noch aussteht. Rot ist dem Abpraller vorbehalten.
 */
.a-stufen__zeile.ist-offen .a-stufen__was { font-weight: 500; color: var(--leise); }

/* ===========================================================================
 * FELDSAETZE IN DER BETREIBERAKTE (09.09.2026)
 *
 * Fabi: „dass das mal vernuenftig aufgeraeumt ist, so wie das normalerweise
 * auch aussehen sollte, nicht so hingeklatscht."
 *
 * Vorher war das Stammdatenformular EINE `a-filter`-Leiste: zwanzig Felder in
 * einer waagerechten Flex-Reihe. `flex` teilte den Platz nach INHALT zu, also
 * wurde jedes Feld anders breit und die Reihe brach an wechselnden Stellen um
 * — deshalb stand nichts in einer Linie.
 *
 * `grid` statt `flex`: gleich breite Spalten, feste Zeilen, keine Sprünge.
 * ======================================================================== */

.a-stammdaten { padding: 4px 22px 18px; }

.a-feldsatz {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linie);
  padding-top: 16px;
}

/* Der erste Satz braucht keine Trennlinie — darueber steht die Ueberschrift. */
.a-feldsatz:first-of-type { border-top: 0; padding-top: 4px; }

.a-feldsatz__titel {
  padding: 0;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
}

/*
 * `auto-fit` mit `minmax` statt einer festen Spaltenzahl: auf dem grossen
 * Bildschirm stehen vier Felder nebeneinander, auf dem Laptop drei, auf dem
 * Telefon eines — ohne eigene Umbruchregel je Breite.
 */
.a-feldsatz__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 16px;
  align-items: start;
}

/* Zwei Ausnahmen vom gleichmaessigen Raster — siehe Kommentar in der Ansicht. */
.a-feldsatz__raster--anschrift { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.a-feld--weit { grid-column: span 2; }
.a-feld--schmal { max-width: 100%; }

@media (max-width: 640px) {
  /* Auf dem Telefon ist jede Spanne eine Spalte — sonst quetscht sie. */
  .a-feld--weit { grid-column: auto; }
  .a-stammdaten { padding: 4px 14px 16px; }
}

.a-stammdaten__aktionen {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

/* ---------------------------------------------------------------------------
 * WAS VERKAUFT WIRD
 *
 * Fabi: „Design passt nicht … ich moechte hier manuell reinschreiben koennen,
 * was verkauft wird."
 *
 * Oben das Feld, das gilt; darunter die Quellen als ruhige Bloecke. Die
 * abgeleiteten Kategorien stehen als Marken — vorher standen dort die rohen
 * Schluessel („bier_dose · holz_papier") als nackter Fliesstext.
 * ------------------------------------------------------------------------ */

.a-sortiment__form { padding: 0 22px 6px; }
.a-sortiment__form textarea { min-height: 74px; resize: vertical; }

.a-sortiment__aktionen {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.a-sortiment__quelle {
  padding: 14px 22px 0;
  margin-top: 14px;
  border-top: 1px solid var(--linie);
}

.a-sortiment__titel {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Marken: eine Kategorie je Stueck, umbruchfaehig. */
.a-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.a-marken__stueck {
  padding: 5px 11px;
  border: 1px solid var(--linie-satt);
  border-radius: 999px;
  background: var(--fl, var(--karte));
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * PRODUKTFOTOS IN DER AKTE (09.09.2026)
 *
 * Fabi: „entweder kann ich manuell was hochladen oder halt die Fotos werden
 * aus dem Partnerbackend hier angezeigt." Beides steht in DERSELBEN Galerie,
 * jedes Bild mit eigenem Loeschknopf darunter.
 *
 * `.a-galerie__stueck` gibt es schon fuer die Infobilder — dort als `block`.
 * Hier braucht es eine Spalte (Bild, darunter der Knopf), deshalb der eigene,
 * engere Selektor.
 * ------------------------------------------------------------------------ */

.a-galerie .a-galerie__stueck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

/* Der Loeschknopf tritt zurueck — er soll da sein, nicht locken. */
.a-galerie .a-galerie__stueck form { display: flex; justify-content: center; }
.a-galerie .a-galerie__stueck .a-knopf { font-size: 11.5px; padding: 3px 10px; }

.a-fotoupload {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  align-items: end;
  padding: 16px 22px 4px;
  margin-top: 14px;
  border-top: 1px solid var(--linie);
}

.a-fotoupload__aktionen { display: flex; justify-content: flex-start; }

@media (max-width: 640px) {
  .a-fotoupload { padding: 14px 14px 4px; }
}

/* ===========================================================================
 * BETREIBERAKTE — FEINSCHLIFF (09.09.2026)
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Der fehlende Innenabstand
 *
 * Fabi: „der Text kriegt ganz an der Box dran, da ist nix dazwischen, also
 * kein Padding".
 *
 * 🔴 `.a-karte--flach` setzt `padding: 0` — die Karte polstert NICHT, jedes
 *    Kind bringt seinen Abstand selbst mit. `.a-abschnitt` tut das
 *    (16px 22px), `.a-daten` und `.a-fliess` taten es nicht. Deshalb stand
 *    die Ueberschrift eingerueckt und die Liste darunter an der Kante.
 *
 *    Gepolstert wird hier und nicht an `.a-daten` selbst: in gepolsterten
 *    Karten (`.a-karte` ohne `--flach`) liegt der Abstand schon am Behaelter,
 *    dort kaeme er sonst doppelt.
 * ------------------------------------------------------------------------ */

.a-karte--flach > .a-daten,
.a-karte--flach > .a-fliess,
.a-karte--flach > .a-leer,
.a-karte--flach > .a-tabellenhuelle,
.a-karte--flach > .a-galerie,
/*
 * 🔴 Auch eine Ebene tiefer. Die Kuechenkarte gruppiert je Huette in
 *    `.a-kueche__huette` — mit `>` allein blieb ihre Liste ungepolstert und
 *    klebte weiter an der Kante, waehrend die Ueberschrift darueber schon
 *    eingerueckt war. Genau das Bild, das Fabi gemeldet hat.
 */
.a-kueche__huette > .a-daten {
  padding-left: 22px;
  padding-right: 22px;
}

/* Unten braucht die Karte denselben Abstand, sonst klebt die letzte Zeile. */
.a-karte--flach > :last-child { margin-bottom: 0; padding-bottom: 16px; }

@media (max-width: 640px) {
  .a-karte--flach > .a-daten,
  .a-karte--flach > .a-fliess,
  .a-karte--flach > .a-leer,
  .a-karte--flach > .a-tabellenhuelle,
  .a-karte--flach > .a-galerie,
  .a-kueche__huette > .a-daten {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Die Huettennummer gross
 *
 * Fabi: „da machen wir aber ganz groß die dreißig … Nicht so ganz klein, also
 * son son kleine Pill. Sieht ja auch doof aus, vor allem unuebersichtlich."
 *
 * Sie ist das Ordnungsmerkmal der Zeile: wer drei Huetten untereinander sieht,
 * sucht die Zahl. Als blasse Pille ueber die halbe Spalte gezogen war sie das
 * Kleinste im ganzen Block.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Huettenmarke — welche Huette eine Tabellenzeile betrifft (09.09.2026)
 *
 * Die kleine Schwester von .a-huettenzahl. Jene steht allein in ihrer Spalte
 * und darf 30px gross sein; hier stehen dreizehn Zeilen untereinander, in
 * denen die Marke NEBEN dem Dokumentnamen laeuft.
 *
 * Trotzdem kein blasses Pillchen (Fabis Kritik vom selben Tag): dunkler Text
 * auf hellem Grund, Serifenziffer, klare Kante. Sie soll beim Ueberfliegen
 * der Spalte auffallen, ohne den Namen der Unterlage zu ueberschreien.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Produktfotos je Huette (09.09.2026)
 *
 * Fabi: „hier muss pro huette unterteilt sein." Die Bloecke brauchen eine
 * sichtbare Kante — sonst liest sich die zweite Ueberschrift wie eine
 * Bildunterschrift der ersten Reihe.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Beschriftung unter dem Bild (09.09.2026)
 *
 * Fabi: „ich will jetzt unter die bilder schreiben können was es ist."
 * Das Feld ist so breit wie das Vorschaubild und traegt eine kleine
 * Beschriftung darueber — ohne sie waere ein leeres Kaestchen unter einem
 * Foto nicht als Eingabe zu erkennen.
 * ------------------------------------------------------------------------ */

.a-galerie__feld {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
}

.a-galerie__feldname {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-leise, #6b7166);
}

.a-galerie__feld input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--linie);
  border-radius: 5px;
  font-size: 13px;
  background: var(--flaeche, #fff);
  color: var(--text);
}

.a-galerie__feld input[type="text"]:focus-visible {
  outline: 2px solid var(--tanne);
  outline-offset: 1px;
}

/* Der Speichern-Knopf sitzt unter dem Raster, links wie die Bilder. */
.a-fotogruppe__fuss {
  margin-top: 8px;
}

.a-fotogruppe {
  padding: 4px 0 12px;
}

.a-fotogruppe + .a-fotogruppe {
  border-top: 1px solid var(--linie);
  padding-top: 14px;
}

.a-fotogruppe__titel {
  margin: 0 0 10px;
  font-family: var(--serif, inherit);
  font-size: 16px;
  font-weight: 600;
  color: var(--tanne);
}

/* Der Leer-Hinweis einer Gruppe traegt weniger Luft als der der ganzen Karte. */
.a-leer--schmal {
  margin: 0;
  padding: 6px 0 2px;
  /* Linksbuendig unter der Ueberschrift: mittig stuende der Satz allein im
     Raum, waehrend die Bilder der Nachbargruppe links beginnen. */
  text-align: left;
}

.a-huettenmarke {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--tanne);
  border-radius: 4px;
  font-family: var(--serif, inherit);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--tanne);
  background: transparent;
}

.a-huettenzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 2px 10px;
  font-family: var(--serif, inherit);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  /* Kein Hintergrund, kein Rahmen: die Groesse traegt sie schon. */
}

/* ---------------------------------------------------------------------------
 * 3. Geplante Kueche — je Huette ein abgesetzter Block
 *
 * Vorher folgte auf die letzte Zeile der einen Huette sofort die Ueberschrift
 * der naechsten. Bei drei Huetten mit demselben Konzept war nicht zu sehen,
 * wo die eine endet.
 * ------------------------------------------------------------------------ */

.a-kueche__huette {
  padding: 4px 0 10px;
  border-top: 1px solid var(--linie);
}

.a-kueche__huette:first-of-type { border-top: 0; }

.a-kueche__titel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 12px 22px 6px;
  font-weight: 400;
}

/* Das Wort tritt hinter die Zahl zurueck — die Zahl unterscheidet. */
.a-kueche__wort {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ---------------------------------------------------------------------------
 * 4. Der Foto-Upload
 *
 * Fabi: „hier ist auch noch nicht grafisch alles ok". Der Systemknopf ist
 * gegen den Datei-Knopf des Hauses getauscht (siehe Ansicht); hier bleibt,
 * die Zeile ruhig zu setzen: Feld und Knopf auf einer Grundlinie, mit Luft
 * zum Rand und zur Galerie darueber.
 * ------------------------------------------------------------------------ */

.a-fotoupload__feld .a-datei { margin: 0; }
.a-fotoupload__feld .a-datei__beschreibung {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Wohin die Zugangsmail geht (11.09.2026)

   Die Adresse steht zwar oben im Formular, beim Senden sieht man sie dort aber
   nicht. Ein Buchstabe darin kostete einen Betreiber zwei Tage Wartezeit —
   deshalb steht sie jetzt unuebersehbar am Knopf.
   -------------------------------------------------------------------------- */

.a-zugangziel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background-color: var(--fl);
}

.a-zugangziel__was {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
}

.a-zugangziel__adresse {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   Passwort von Hand vergeben (14.09.2026) — Feld und Knopf in einer Zeile
   -------------------------------------------------------------------------- */

.a-passwortvergabe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 8px;
}

.a-passwortvergabe .a-filter__feld {
  flex: 0 1 320px;
  min-width: 220px;
}

.a-passwortvergabe input {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Tabellen in der betonten Karte (14.09.2026)

   Fabi zur Seite „Dokumente": „da kann man so nicht lesen". Die blaue Karte
   vererbt weisse Schrift, die Tabelle kannte davon nichts:
     - die Zeile unter der Maus wurde hellblau (var(--fl)) — weiss auf fast
       weiss, der Inhalt verschwand
     - die erste Spalte (tbody th, „Huette") blieb var(--text), also
       dunkelblau auf blau
     - Kopfzeile, Zusatzzeilen und Trennlinien waren fuer hellen Grund gedacht

   Die Regel gilt fuer JEDE Tabelle in einer betonten Karte: 17 Ansichten
   haben diese Kombination, und alle hatten dasselbe Problem.
   -------------------------------------------------------------------------- */

.a-karte--betont .a-tabelle th {
  color: rgba(255, 255, 255, 0.66);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.a-karte--betont .a-tabelle tbody th,
.a-karte--betont .a-tabelle td {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Die Zeile unter der Maus: eine Spur heller statt fast weiss. */
.a-karte--betont .a-tabelle tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.09);
}

.a-karte--betont .a-tabelle .a-zelle__zusatz {
  color: rgba(255, 255, 255, 0.72);
}