/*
 * Salonika — Gestaltungsgrundlage.
 *
 * Ruhig und sachlich, heller Hintergrund, ein gedaempfter Akzentton.
 * Kraeftige Farbe ausschliesslich fuer Ampel und Aktionen (Entscheidung 7).
 * Handgeschrieben statt Tailwind, damit die App ohne Bauwerkzeug laeuft.
 */

/*
 * Beide Themes stehen in EINEM Satz: `light-dark(hell, dunkel)` waehlt nach
 * `color-scheme` aus. Umgeschaltet wird deshalb nur `color-scheme` (unten) —
 * frueher standen die Dunkelwerte doppelt da, einmal fuer `data-theme` und
 * einmal fuer die Systemvorgabe, und mussten von Hand gleich gehalten werden.
 *
 * Hell ist weiss-blau-grau, Dunkel warmes Nahe-Schwarz mit Terrakotta —
 * bewusst zwei eigene Stimmungen, nicht dieselbe Palette abgedunkelt.
 */
:root {
  color-scheme: light dark;

  /* Flaechen */
  --grund: light-dark(#eef1f6, #141312);
  --flaeche: light-dark(#ffffff, #1e1c1a);
  --flaeche-still: light-dark(#f7f9fb, #242220);
  --leiste: light-dark(#ffffff, #1e1c1a);
  /* Dezente Wochenend-Tönung im Kalender — bisher ein fester Hellwert, der im
     Dunkelmodus als heller Fleck durchschlug. */
  --wochenende: light-dark(#f2f2ef, #27221e);
  /* Halbtransparente Schwebeflaeche fuer Hover und Symbolplaetze. */
  --flaeche-schwebend: light-dark(rgba(74, 93, 120, 0.07), rgba(255, 244, 235, 0.06));

  /* Text */
  --text: light-dark(#14181f, #f0efec);
  --text-leise: light-dark(#545c68, #c3c2b7);
  --text-still: light-dark(#838b97, #8f8d84);

  /* Linien — nur noch Andeutung, tragen keine Trennung mehr */
  --linie: light-dark(#dde3ec, #302d2a);
  --linie-kraeftig: light-dark(#c3ccd9, #4a453f);
  /* Haarfeine Lichtkante oben auf schwebenden Flaechen. */
  --kante-licht: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 236, 220, 0.05));

  /* Akzent — zentral austauschbar */
  --akzent: light-dark(#4a5d78, #c6613f);
  --akzent-dunkel: light-dark(#3a4a61, #a84f30);
  --akzent-leise: light-dark(#e4eaf3, #2e2420);
  --akzent-text: light-dark(#33445c, #e8916e);
  --akzent-schein: light-dark(rgba(74, 93, 120, 0.22), rgba(198, 97, 63, 0.3));

  /* Umgebungslicht der Grundflaeche */
  --licht-warm: light-dark(rgba(255, 255, 255, 0.85), rgba(198, 97, 63, 0.1));
  --licht-kuehl: light-dark(rgba(74, 93, 120, 0.07), rgba(90, 120, 150, 0.06));

  /* Ampel */
  --gut: light-dark(#2f7a4d, #4fae74);
  --gut-leise: light-dark(#eaf4ee, #1c3226);
  --mittel: light-dark(#9a6a12, #d9a13c);
  --mittel-leise: light-dark(#fbf3e3, #3a2c14);
  --schlecht: light-dark(#a33a33, #e0685c);
  --schlecht-leise: light-dark(#faedec, #3a1f1c);

  /* Masse */
  /*
   * Die Seitenleiste ist seit Entwurf D (2026-09-05) eine schmale
   * Symbolschiene, die sich auf Zeigen oder auf Wunsch dauerhaft
   * (`data-schiene="fest"`) auf die volle Breite oeffnet.
   */
  --sidebar-breite: 64px;
  --sidebar-breite-offen: 236px;
  /* Fussabstand einer Buehne. Hielt bis 2026-09-05 den Streifen fuer das
     schwebende Dock frei (104 px) — das Dock ist entfallen. */
  --dock-freiraum: 28px;
  --radius: 14px;
  --radius-klein: 9px;

  /*
   * Knopfmasse (Entscheidung 2026-09-05, Knopf-System 4 „Fingerbreit"):
   * Salonika wird im Stehen bedient — am Tresen, oft am Tablet, oft nebenbei.
   * Darum grosszuegige Trefferflaechen und eine vollrunde Form, die einen
   * Knopf auch aus zwei Metern von einem Eingabefeld unterscheidet. Die
   * Stilwelten duerfen `--knopf-radius` ueberschreiben, wenn ihr Charakter
   * harte Kanten verlangt (siehe `dragon`).
   */
  --knopf-hoehe: 36px;
  --knopf-hoehe-klein: 30px;
  --knopf-hoehe-filter: 34px;
  --knopf-glyph: 32px;
  --knopf-radius: 999px;

  --schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-zahl: "Segoe UI", system-ui, sans-serif;

  /*
   * `light-dark()` gilt nur fuer Farben — die Schatten werden deshalb aus
   * themenabhaengigen Schattenfarben zusammengesetzt, nicht selbst umgeschaltet.
   */
  --schatten-farbe-nah: light-dark(rgba(23, 32, 48, 0.05), rgba(0, 0, 0, 0.42));
  --schatten-farbe-weit: light-dark(rgba(23, 32, 48, 0.07), rgba(0, 0, 0, 0.34));
  --schatten-farbe-tief: light-dark(rgba(23, 32, 48, 0.17), rgba(0, 0, 0, 0.6));

  --schatten: 0 1px 2px var(--schatten-farbe-nah), 0 6px 18px var(--schatten-farbe-weit);
  --schatten-hoch: 0 18px 48px var(--schatten-farbe-tief), 0 4px 12px var(--schatten-farbe-nah);
}

/* Die Wahl aus `theme.js` bzw. dem Inline-Skript in index.html. */
:root[data-theme='hell'] { color-scheme: light; }
:root[data-theme='dunkel'] { color-scheme: dark; }

/*
 * Testweise Stilwelten (raw/Planning-Themes-2026-08-23.md): `light-dark()`
 * bleibt fuer Hell/Dunkel unveraendert, jede Stilwelt bekommt stattdessen
 * hier einen eigenen Block mit fest verdrahteten Werten (Entscheidung 3/4).
 * `--grund` traegt normalerweise weiterhin eine Vollfarbe — nur wenn die
 * Buehne (modules/themes) tatsaechlich zeichnet, macht `.geruest--stilwelt`
 * den Grund durchsichtig, damit die Animation an seine Stelle tritt
 * (Entscheidung 6). Ohne WebGL bleibt es bei dieser Vollfarbe, die Palette
 * traegt das Theme dann allein (Entscheidung 7).
 *
 * Entscheidung 9 — Signal schlaegt Stimmung: Die Ampel bleibt in jedem
 * Theme rot/gelb/gruen, nur in Helligkeit angepasst. Kollidiert der
 * Themeton mit einem Ampelton, weicht stattdessen der Akzent aus.
 */
:root[data-theme='dragon'] {
  color-scheme: dark;

  --grund: #1c0f0d;
  --flaeche: #271513;
  --flaeche-still: #2e1917;
  --leiste: #271513;
  --wochenende: #2c1614;
  --flaeche-schwebend: rgba(255, 150, 90, 0.08);

  --text: #f6e8e0;
  --text-leise: #dcb7a9;
  --text-still: #a9827a;

  --linie: #3d211d;
  --linie-kraeftig: #593228;
  --kante-licht: rgba(255, 190, 140, 0.07);

  /* Rot ist mit --schlecht belegt — der Akzent weicht nach Goldorange aus. */
  --akzent: #d98a2b;
  --akzent-dunkel: #b26f20;
  --akzent-leise: #3a2712;
  --akzent-text: #f0b25c;
  --akzent-schein: rgba(217, 138, 43, 0.32);

  --licht-warm: rgba(224, 96, 40, 0.16);
  --licht-kuehl: rgba(120, 40, 30, 0.08);

  --gut: #5fc17d;
  --gut-leise: #1c2e1f;
  --mittel: #e0a53f;
  --mittel-leise: #332310;
  --schlecht: #ff8972;
  --schlecht-leise: #3c1a15;

  /* Charakter: harte Kanten, scharfe Schatten (Entscheidung 8) — die gilt
     auch fuer die Knoepfe, die sonst ueberall vollrund sind. */
  --radius: 4px;
  --radius-klein: 3px;
  --knopf-radius: 5px;
  --schatten-farbe-nah: rgba(0, 0, 0, 0.55);
  --schatten-farbe-weit: rgba(0, 0, 0, 0.4);
  --schatten-farbe-tief: rgba(0, 0, 0, 0.72);
}

:root[data-theme='bamboo'] {
  color-scheme: dark;

  --grund: #141d10;
  --flaeche: #1c2716;
  --flaeche-still: #212d19;
  --leiste: #1c2716;
  --wochenende: #202b18;
  --flaeche-schwebend: rgba(200, 220, 120, 0.08);

  --text: #eef2e2;
  --text-leise: #c7d3ae;
  --text-still: #93a17c;

  --linie: #2c3a20;
  --linie-kraeftig: #425430;
  --kante-licht: rgba(230, 240, 180, 0.06);

  /* Gruen ist mit --gut belegt — der Akzent weicht nach Bambusgelb aus. */
  --akzent: #d4b52a;
  --akzent-dunkel: #ad9020;
  --akzent-leise: #3a3213;
  --akzent-text: #e9cf6a;
  --akzent-schein: rgba(212, 181, 42, 0.3);

  --licht-warm: rgba(210, 190, 80, 0.12);
  --licht-kuehl: rgba(70, 130, 90, 0.08);

  --gut: #63c96a;
  --gut-leise: #1b2e1c;
  --mittel: #dcb24a;
  --mittel-leise: #332810;
  --schlecht: #e2685c;
  --schlecht-leise: #3a1a16;

  --radius: 10px;
  --radius-klein: 7px;
  --schatten-farbe-nah: rgba(0, 0, 0, 0.4);
  --schatten-farbe-weit: rgba(0, 0, 0, 0.3);
  --schatten-farbe-tief: rgba(0, 0, 0, 0.55);
}

:root[data-theme='water'] {
  color-scheme: dark;

  --grund: #0c1620;
  --flaeche: #152436;
  --flaeche-still: #1a2b3f;
  --leiste: #152436;
  --wochenende: #182a3c;
  --flaeche-schwebend: rgba(140, 200, 230, 0.08);

  --text: #e7f2f8;
  --text-leise: #b9d3e2;
  --text-still: #84a4b8;

  --linie: #1f3648;
  --linie-kraeftig: #2f4f66;
  --kante-licht: rgba(200, 235, 250, 0.06);

  /* Keine Kollision mit der Ampel — Akzent frei nach Hellblau/Tuerkis. */
  --akzent: #3fb8c9;
  --akzent-dunkel: #2f93a1;
  --akzent-leise: #123038;
  --akzent-text: #7fd6e2;
  --akzent-schein: rgba(63, 184, 201, 0.32);

  --licht-warm: rgba(90, 150, 190, 0.1);
  --licht-kuehl: rgba(50, 110, 150, 0.1);

  --gut: #57c98a;
  --gut-leise: #173226;
  --mittel: #e0b054;
  --mittel-leise: #33280f;
  --schlecht: #ef7468;
  --schlecht-leise: #3a1a15;

  /* Charakter: weiche Rundungen, diffuse Schatten (Entscheidung 8). */
  --radius: 20px;
  --radius-klein: 14px;
  --schatten-farbe-nah: rgba(0, 10, 20, 0.35);
  --schatten-farbe-weit: rgba(0, 10, 20, 0.28);
  --schatten-farbe-tief: rgba(0, 10, 20, 0.5);
}

:root[data-theme='beach'] {
  color-scheme: light;

  --grund: #f3e9d2;
  --flaeche: #fffaf0;
  --flaeche-still: #f8f0dd;
  --leiste: #fffaf0;
  --wochenende: #f2e6c8;
  --flaeche-schwebend: rgba(90, 70, 40, 0.06);

  --text: #3a2f1f;
  --text-leise: #6b5b3f;
  --text-still: #8f8062;

  --linie: #e6d8b8;
  --linie-kraeftig: #d3c095;
  --kante-licht: rgba(255, 255, 255, 0.8);

  /* Keine Kollision — der tiefblaue Meeresakzent traegt den Kontrast. */
  --akzent: #1f5f7a;
  --akzent-dunkel: #164a61;
  --akzent-leise: #dcebef;
  --akzent-text: #0f3c4d;
  --akzent-schein: rgba(31, 95, 122, 0.28);

  --licht-warm: rgba(255, 240, 210, 0.5);
  --licht-kuehl: rgba(140, 190, 210, 0.12);

  --gut: #2f7a4d;
  --gut-leise: #eaf4ee;
  --mittel: #9a6a12;
  --mittel-leise: #fbf3e3;
  --schlecht: #a33a33;
  --schlecht-leise: #faedec;

  --radius: 18px;
  --radius-klein: 12px;
  --schatten-farbe-nah: rgba(90, 70, 30, 0.08);
  --schatten-farbe-weit: rgba(90, 70, 30, 0.1);
  --schatten-farbe-tief: rgba(60, 45, 20, 0.22);
}

:root[data-theme='dungle'] {
  color-scheme: dark;

  --grund: #0e1710;
  --flaeche: #16211a;
  --flaeche-still: #1b271f;
  --leiste: #16211a;
  --wochenende: #192419;
  --flaeche-schwebend: rgba(120, 200, 150, 0.07);

  --text: #e6efe4;
  --text-leise: #bcd0bd;
  --text-still: #84a087;

  --linie: #213124;
  --linie-kraeftig: #324736;
  --kante-licht: rgba(200, 240, 210, 0.05);

  /* Gruen ist ebenfalls mit --gut belegt, dazu Abgrenzung zu bamboo — Tuerkis. */
  --akzent: #2fb0a3;
  --akzent-dunkel: #238a80;
  --akzent-leise: #123028;
  --akzent-text: #6fd8cb;
  --akzent-schein: rgba(47, 176, 163, 0.3);

  --licht-warm: rgba(90, 150, 110, 0.1);
  --licht-kuehl: rgba(40, 90, 80, 0.1);

  --gut: #5fcf7d;
  --gut-leise: #183a22;
  --mittel: #dcb24a;
  --mittel-leise: #332810;
  --schlecht: #e97767;
  --schlecht-leise: #3a1a15;

  --radius: 16px;
  --radius-klein: 11px;
  --schatten-farbe-nah: rgba(0, 15, 5, 0.4);
  --schatten-farbe-weit: rgba(0, 15, 5, 0.32);
  --schatten-farbe-tief: rgba(0, 10, 5, 0.6);
}

/*
 * Vollbild-Grund fuer die Stilwelten-Buehne (modules/themes/ui/buehne.js) —
 * ganz unten im Geruest, unter der Streiflicht-Dekoration (.geruest::before)
 * und allem Inhalt. `hidden` haelt sie bei Hell/Dunkel und ohne WebGL
 * komplett aus dem Bild; `.geruest--stilwelt` schaltet erst dann den Grund
 * durchsichtig, wenn tatsaechlich gezeichnet wird.
 */
.stilwelt-buehne {
  position: fixed;
  inset: 0;
  /* `inset:0` allein reicht bei einem <canvas> nicht — als ersetztes Element
     behaelt es sonst seine intrinsische Groesse (300x150). */
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.stilwelt-buehne[hidden] {
  display: none;
}

.geruest--stilwelt {
  background: transparent;
}

/*
 * Bamboo-Wald als DOM/SVG-Szene statt Shader (Entscheidung 2026-08-30,
 * raw/Planning-KleineFixes-2026-08-30.md Stufe 8) — siehe
 * modules/themes/themen/bambooSzene.js. Zwei verschachtelte Transform-
 * Ebenen je Halm: die aeussere (`.bambus-halm`) dreht fuer den Wind, die
 * innere (`.bambus-halm__wuchs`) skaliert fuer das Wachstum. Beides auf
 * demselben Element wuerde sich ueberschreiben statt sich zu addieren.
 */
.bambus-wald,
.bambus-wald svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Gedaempfte Hintergrund-Ebene mit leichtem Scroll-Parallax (Nutzerwunsch
 * 2026-09-01, Nachtrag zu Stufe 12): der Wald soll erkennbar bleiben, aber
 * nicht mehr vom eigentlichen App-Inhalt ablenken. Nur die echte
 * Vollbild-Buehne (`.stilwelt-buehne`) wird gedaempft — die Vorschaukachel
 * im Profildialog (`.stilwelt-kachel__leinwand.bambus-wald`) bleibt bewusst
 * voll sichtbar, sie soll das Theme beim Auswaehlen klar zeigen.
 * `--bambus-parallax` wird von `bambooSzene.js` beim Scrollen (in jedem
 * beliebigen Scroll-Container der Seite, per Capture-Listener) gesetzt —
 * der Hintergrund verschiebt sich dadurch etwas langsamer als der Inhalt,
 * das erzeugt den Tiefeneindruck "hinter" der App statt "davor".
 */
.stilwelt-buehne.bambus-wald {
  opacity: 0.4;
}

.stilwelt-buehne.bambus-wald svg {
  transform: translateY(var(--bambus-parallax, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .stilwelt-buehne.bambus-wald svg {
    transform: none;
  }
}

.bambus-halm,
.bambus-halm__wuchs {
  transform-box: fill-box;
  transform-origin: bottom center;
}

.bambus-halm {
  animation: bambus-wind var(--wind-dauer) ease-in-out var(--wind-verzoegerung) infinite;
}

.bambus-halm__wuchs {
  animation: bambus-wachsen var(--wachstum-dauer) cubic-bezier(0.22, 0.8, 0.32, 1) var(--wachstum-verzoegerung) both;
}

@keyframes bambus-wachsen {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Selten und leicht statt staendig schwankend ("gelegentlich im Wind", Z.156) —
   der Grossteil jedes Zyklus haelt bei 0deg, nur ein kurzer Ausschlag pro Umlauf. */
@keyframes bambus-wind {
  0%, 80% { transform: rotate(0deg); }
  88% { transform: rotate(var(--wind-winkel)); }
  95% { transform: rotate(calc(var(--wind-winkel) * -0.55)); }
  100% { transform: rotate(0deg); }
}

/* Bevorzugt-ruhig (prefers-reduced-motion) und die kleinen Vorschaukacheln
   im Profildialog: voll gewachsen, ohne Bewegung, statt zu wachsen/wehen. */
.bambus-wald--ruhig .bambus-halm,
.bambus-wald--ruhig .bambus-halm__wuchs {
  animation: none;
  transform: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app-laedt {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-still);
}

/* ----------------------------------------------------------- Grundgeruest */

/*
 * Eine durchgehende Flaeche statt aneinandergestossener Panels
 * (raw/Planning-Heimsteuerung-2026-08-20.md, Sitzung 2): Seitenleiste und
 * Inhalt teilen denselben Grund, Tiefe entsteht ueber weiche Schatten und
 * Licht — nicht ueber 1px-Kanten. Die Marke sitzt oben in der Seitenleiste,
 * die Leiste laeuft deshalb ueber die volle Hoehe.
 */
.geruest {
  display: grid;
  grid-template-columns: var(--sidebar-breite) minmax(0, 1fr);
  grid-template-areas: "seitenleiste inhalt";
  height: 100vh;
  position: relative;
  isolation: isolate;
  background: var(--grund);
}

/*
 * Warmes Streiflicht aus der oberen linken Ecke — gibt der Flaeche Richtung,
 * ohne dass irgendwo eine Kante noetig waere. Rein dekorativ, faengt keine
 * Klicks ab.
 */
.geruest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--licht-warm) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, var(--licht-kuehl) 0%, transparent 65%);
}

/*
 * Vollflaechen-Modus (Opt-in per Seite ueber seitenkopf({ vollflaeche: true }),
 * Entscheidung 2026-08-31): der Inhalt spannt die volle Breite. Kacheln
 * reichen so bis zum selben linken Rand wie oben/rechts statt an einer
 * Navigationsspalte zu enden — z.B. das Dashboard.
 *
 * Seit Entwurf D (2026-09-05) blendet der Modus die Navigation nicht mehr
 * aus: die Schiene ist nur noch 64 px breit, und eine Seite ohne jede
 * Navigation waere eine Sackgasse. Er nimmt der Buehne stattdessen nur die
 * seitliche Polsterung, damit die Kacheln wirklich bis an den Rand reichen.
 */
.geruest--vollflaeche .buehne {
  padding-inline: 20px;
}

/*
 * Vollbild-Knopf. Schwebte von Entscheidung 2026-08-31 bis zum Umbau auf
 * Entwurf D (2026-09-05) frei oben rechts — dort kollidierte er mit den
 * Aktionen des neuen Seitenkopfs. Er steht jetzt als letztes Element in
 * dieser Kopfzeile, also weiterhin oben rechts, aber im Fluss statt darueber.
 *
 * Entscheidung 2026-08-31 (Nachtrag 2, raw/todos Z.178 — bereits
 * einmal so gewuenscht): kein Knopf-Chip (kein Hintergrund, keine
 * Kontur, kein Schatten) — nur das nackte Glyph, wie ein Icon ohne jede
 * Umrandung. `filter: drop-shadow(...)` haelt es trotzdem auf jedem
 * Hintergrund lesbar (heller wie dunkler Buehnengrund, Stilwelten), ohne
 * dafuer eine sichtbare Flaeche zu brauchen.
 */
.vollbild-knopf {
  flex: none;
  align-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text-leise);
  font-size: 22px;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  transition: color 0.16s ease;
}

.vollbild-knopf:hover {
  color: var(--text);
}

/* -------------------------------------------------------------- Markenblock */

/*
 * Sitzt seit Planning-Hauptmenue-Unten-2026-08-24 am linken Ende von
 * `.hauptmenue` statt oben in der Seitenleiste — darum die knappe, seitliche
 * Polsterung statt der frueheren Kopf-Abstaende.
 */
.marke {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  position: relative;
}

/*
 * Uebernimmt seit 2026-08-25 die Rolle des frueheren ⌂-Knopfs im Verlaufsdock
 * (Nutzerentscheidung) — darum ein echter Knopf statt eines reinen Deko-Blocks,
 * mit demselben Hover-Muster wie die uebrigen Leisten-Knoepfe.
 */
.marke__knopf {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 4px 10px 4px 6px;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background-color 0.16s ease;
}

.marke__knopf:hover {
  background: var(--flaeche-schwebend);
}

.marke__zeichen {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--akzent) 0%, var(--akzent-dunkel) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 17px;
  flex: none;
  box-shadow: 0 4px 14px var(--akzent-schein);
}

.marke__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.marke__name {
  font-weight: 620;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marke__zusatz {
  font-size: 11.5px;
  color: var(--text-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Schluessel-Zeichen fuer eine fremde Bearbeitungssperre, siehe setzeSperrAnzeige.
   Der [hidden]-Override ist noetig, weil .knopf display:inline-flex sonst mit
   gleicher Spezifitaet gegen das UA-hidden-display:none gewinnt. */
.marke__sperre {
  margin-left: auto;
  padding: 4px 6px;
  font-size: 15px;
}

.marke__sperre[hidden] {
  display: none;
}

.marke__sperre:disabled {
  cursor: default;
}

/*
 * Seitenkopf (Entwurf D, Entscheidung 2026-09-05): Pfad, Titel und die
 * Aktionen einer Seite stehen wieder auf der Seite selbst — oben links, wo
 * das Lesen anfaengt.
 *
 * Ersetzt das schwebende Dock am unteren Rand (`.fussleiste` mit
 * `.hauptmenue` und `.verlaufsleiste`, Planning-Hauptmenue-Unten-2026-08-24):
 * die Hauptebene zog in die Symbolschiene links (`.seitenleiste`), der
 * Klickverlauf hierher. Damit endet auch das Dauerreservat von 104 px am
 * unteren Bildschirmrand — `--dock-freiraum` ist nur noch der normale
 * Fussabstand einer Buehne.
 *
 * Der Kopf sitzt im `.inhalt`-Raster ueber der Buehne und ueberlebt den
 * Seitenwechsel: der Router ersetzt ausschliesslich `.inhalt__buehne`.
 */
.seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding: 22px 44px 14px;
  min-width: 0;
}

.seitenkopf[hidden] {
  display: none;
}

.seitenkopf__marke {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.seitenkopf__text {
  min-width: 0;
}

.seitenkopf__pfad {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seitenkopf__titel {
  margin: 2px 0 0;
  font-size: 23px;
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.seitenkopf__aktionen {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-left: auto;
}

/*
 * Eigener Klick-Verlauf (Nutzerentscheidung 2026-08-21) — sass bis zum
 * Umbau als eigenes Dock unten rechts, steht jetzt links vor dem Seitentitel.
 * "Heim" fehlt hier bewusst weiter: das uebernimmt die Marke in der Schiene.
 */
.verlauf {
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.verlauf__knopf {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--flaeche-schwebend);
  color: var(--text-leise);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.verlauf__knopf:hover:not(:disabled) {
  background: var(--akzent-leise);
  color: var(--akzent-text);
}

.verlauf__knopf:disabled {
  opacity: 0.3;
  cursor: default;
}

/*
 * Bedienelemente einer Seite ohne eigene Karte (Zeitraum-Filter und ihre
 * Knoepfe) sitzen seit Entscheidung 2026-08-30 in der zweiten Nav-Gruppe der
 * Seitenleiste statt in einem eigenen App-Kopf — `.kopf__aktionen` bleibt der
 * Name der umschliessenden Reihe (seitenbausteine.js#seitenkopf).
 */
.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Knoepfe hier sind einheitlich hoch, auch wenn eine kleine Variante oder ein
 * Stufen-Umschalter (.stufen, z.B. Tabellarisch/Zeitstrahl) dabei ist — gilt
 * genauso im Werkzeugkopf einer Karte (karteWerkzeugkopf() in
 * seitenbausteine.js), dem seit Entscheidung 2026-08-30 haeufigsten Ort fuer
 * genau diese Mischung aus Umschalter, kleinem Filter-Knopf und Hauptknopf.
 */
.kopf__aktionen .knopf,
.karte__kopf--mit-aktion .reihe .knopf {
  height: var(--knopf-hoehe);
}

.kopf__aktionen .knopf--klein:not(.knopf--glyph),
.karte__kopf--mit-aktion .reihe .knopf--klein:not(.knopf--glyph) {
  font-size: 13px;
  padding-inline: 16px;
}

/* Symbolknoepfe bleiben auch hier rund und behalten ihre Breite. */
.kopf__aktionen .knopf--glyph,
.karte__kopf--mit-aktion .reihe .knopf--glyph {
  width: var(--knopf-hoehe);
}

.kopf__aktionen .stufen,
.karte__kopf--mit-aktion .reihe .stufen {
  min-height: var(--knopf-hoehe);
}

/* Bondrucker-Auswahl im Kassenpad (Planning-Bondrucker-2026-08-23, Entscheidung 5). */
.bondrucker-auswahl {
  width: auto;
  max-width: 200px;
}

/* Kassierer-Auswahl im Kassenpad (Feature-Backlog „Automatischer Kassenlogout", 2026-09-04). */
.kassierer-auswahl {
  width: auto;
  max-width: 200px;
}

/* Suchfeld unter den Seiten-Werkzeugen (z.B. Dokumente / Alle Dokumente). */
.kopf-suche {
  width: 220px;
  border: 1px solid var(--linie-kraeftig);
  font: inherit;
  background: var(--flaeche);
  color: var(--text);
}

/* --------------------------------------------------------------- Zeitraum */

.zeitraum {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * Umschalterspur (Tabellarisch/Zeitstrahl, Zeitraumstufen): eine Spur, in der
 * genau eine Stufe steht — vollrund wie die Knoepfe, damit sie sich in
 * dieselbe Zeile fuegt.
 */
.stufen {
  display: inline-flex;
  align-items: center;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--knopf-radius);
  padding: 3px;
  gap: 2px;
}

.stufen button {
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: var(--knopf-radius);
  cursor: pointer;
}

.stufen button:hover:not(:disabled) {
  color: var(--text);
  background: var(--flaeche);
}

.stufen button[aria-pressed="true"] {
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--schatten);
}

.stufen button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

/*
 * Vorschaukacheln der Stilwelten (raw/Planning-Themes-2026-08-23.md,
 * Abschnitt 4): die Buehne einer Kachel laeuft nur bei Hover/Fokus
 * (eigenesProfil.js#stilweltenKacheln), die Idle-Farbe kommt aus
 * `--kachel-farbe` und ueberbrueckt die Ladezeit von three.js.
 */
.stilwelt-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.stilwelt-kachel {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--kachel-farbe);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.stilwelt-kachel:hover,
.stilwelt-kachel:focus-visible {
  border-color: var(--linie-kraeftig);
}

.stilwelt-kachel[aria-pressed="true"] {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}

.stilwelt-kachel__leinwand {
  display: block;
  width: 100%;
  height: 56px;
}

.stilwelt-kachel__name {
  display: block;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--text-leise);
  background: var(--flaeche);
}

.blaettern {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.blaettern__wert {
  min-width: 132px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Benutzer */

.benutzer {
  position: relative;
}

.benutzer__knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: var(--flaeche-schwebend);
  border-radius: 14px;
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 0.16s ease;
}

.benutzer__knopf:hover {
  border-color: var(--linie-kraeftig);
}

.benutzer__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.benutzer__pfeil {
  margin-left: auto;
  flex: none;
  color: var(--text-still);
  font-size: 11px;
  line-height: 1;
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--akzent-leise);
  color: var(--akzent-dunkel);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 650;
  flex: none;
  object-fit: cover;
  overflow: hidden;
}

.avatar--gross {
  width: 56px;
  height: 56px;
  font-size: 19px;
}

.avatar--riesig {
  width: 136px;
  height: 136px;
  font-size: 40px;
}

img.avatar {
  object-fit: cover;
}

/* Auswaehlbares Bild: Klick oder Drag&Drop statt eigenem "auswaehlen"-Knopf. */
.bild-auswahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bild-auswahl__flaeche {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

.bild-auswahl__hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.bild-auswahl__hinweis .knopf-symbol {
  width: 28px;
  height: 28px;
}

.bild-auswahl__flaeche:hover .bild-auswahl__hinweis,
.bild-auswahl__flaeche--ueber .bild-auswahl__hinweis {
  opacity: 1;
}

.bild-auswahl__flaeche--ueber {
  outline: 2px dashed var(--akzent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ Seitenleiste */

/*
 * Symbolschiene (Entwurf D, Entscheidung 2026-09-05): traegt die ganze
 * Navigation — Hauptpunkte als Symbole, darunter die Unterpunkte der aktiven
 * Sektion. Vorher lag die Hauptebene im Dock am unteren Rand und hier standen
 * nur die Unterpunkte (Planning-Hauptmenue-Unten-2026-08-24).
 *
 * Sie oeffnet sich auf Zeigen und zeigt dann die Beschriftungen. Weil eine
 * Navigation, die man nur mit dem Zeiger erreicht, am Tablet unbedienbar
 * waere, laesst sie sich zusaetzlich mit dem Knopf oben dauerhaft
 * feststellen (`data-schiene="fest"` am Geruest, in `localStorage` gemerkt) —
 * dann schiebt sie den Inhalt zur Seite, statt ihn zu ueberdecken.
 */
.seitenleiste {
  grid-area: seitenleiste;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: var(--sidebar-breite);
  z-index: 20;
  transition: width 0.18s ease;
}

/*
 * Geschnitten wird in Kopf und Navigation, nicht an der Schiene selbst: das
 * Benutzermenue im Fuss klappt ueber ihren Rand hinaus auf und wuerde von
 * einem `overflow: hidden` an der Schiene abgeschnitten.
 */
.schiene__kopf {
  overflow: hidden;
}

/* Im schmalen Zustand oeffnet das Benutzermenue nach rechts statt nach links
   ueber den Bildschirmrand hinaus (`.menue` ist sonst rechtsbuendig). */
.schiene__fuss .menue {
  left: 0;
  right: auto;
}

/* Name und Pfeil des Benutzers passen nur in die geoeffnete Schiene. */
.schiene__fuss .benutzer__name,
.schiene__fuss .benutzer__pfeil {
  display: none;
}

.geruest[data-schiene="fest"] .schiene__fuss .benutzer__name,
.geruest[data-schiene="fest"] .schiene__fuss .benutzer__pfeil {
  display: block;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]) .seitenleiste:hover .benutzer__name,
  .geruest:not([data-schiene="fest"]) .seitenleiste:hover .benutzer__pfeil,
  .geruest:not([data-schiene="fest"]) .seitenleiste:focus-within .benutzer__name,
  .geruest:not([data-schiene="fest"]) .seitenleiste:focus-within .benutzer__pfeil {
    display: block;
  }
}

.seitenleiste__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 14px;
  scrollbar-width: thin;
}

/*
 * Geoeffnet: ueberlagert den Inhalt, damit beim Zeigen nichts umbricht.
 * Nur auf Geraeten mit echtem Zeiger — auf dem Tablet oeffnet ausschliesslich
 * der Feststell-Knopf.
 */
@media (hover: hover) {
  .geruest:not([data-schiene="fest"]) .seitenleiste:hover,
  .geruest:not([data-schiene="fest"]) .seitenleiste:focus-within {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-breite-offen);
    box-shadow: var(--schatten-hoch);
  }
}

/* Festgestellt: die Schiene bekommt eine echte Spalte im Raster. */
.geruest[data-schiene="fest"] {
  grid-template-columns: var(--sidebar-breite-offen) minmax(0, 1fr);
}

.geruest[data-schiene="fest"] .seitenleiste {
  width: var(--sidebar-breite-offen);
}

/* Kopf der Schiene: Marke (fuehrt zum Dashboard) und der Feststell-Knopf. */
.schiene__kopf {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 6px;
  min-height: 58px;
}

.schiene__feststellen {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-still);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.schiene__feststellen:hover {
  background: var(--flaeche-schwebend);
  color: var(--text);
}

.geruest[data-schiene="fest"] .schiene__feststellen {
  color: var(--akzent-text);
  background: var(--akzent-leise);
}

/* Fuss der Schiene: Benutzermenue. */
.schiene__fuss {
  flex: none;
  padding: 8px;
  border-top: 1px solid var(--linie);
}

/*
 * Was nur im geoeffneten Zustand Sinn ergibt (Beschriftungen, Unterpunkte,
 * Suchfeld), wird zusammen ein- und ausgeblendet statt einzeln — sonst
 * flackert beim Oeffnen jedes Teil fuer sich.
 */
.schiene__nur-offen {
  opacity: 0;
  transition: opacity 0.14s ease;
}

.geruest[data-schiene="fest"] .schiene__nur-offen {
  opacity: 1;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]) .seitenleiste:hover .schiene__nur-offen,
  .geruest:not([data-schiene="fest"]) .seitenleiste:focus-within .schiene__nur-offen {
    opacity: 1;
  }
}

/* Unterpunkte kosten Hoehe — geschlossen bleiben sie ganz weg. */
.seitenleiste .nav-unter {
  display: none;
}

.geruest[data-schiene="fest"] .seitenleiste .nav-unter {
  display: block;
}

@media (hover: hover) {
  .geruest:not([data-schiene="fest"]) .seitenleiste:hover .nav-unter,
  .geruest:not([data-schiene="fest"]) .seitenleiste:focus-within .nav-unter {
    display: block;
  }
}

.nav-knopf {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text-leise);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.nav-knopf:hover {
  background: var(--flaeche-schwebend);
  color: var(--text);
}

/*
 * Aktiver Punkt: getoente Pille mit weichem Schein statt harter Fuellung —
 * dasselbe Prinzip wie die leuchtenden Chips im Vorbild.
 */
.nav-knopf[aria-current="page"] {
  background: var(--akzent-leise);
  color: var(--akzent-text);
  font-weight: 600;
  box-shadow: 0 2px 12px var(--akzent-schein);
}

.nav-knopf[aria-current="page"] .nav-symbol {
  color: var(--akzent);
  opacity: 1;
}

.nav-unter {
  display: block;
  margin: 1px 0 4px;
  padding-left: 27px;
}

.nav-unter .nav-knopf {
  font-size: 13px;
  padding: 5px 9px;
}

.nav-symbol {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  opacity: 0.92;
  transition: color 0.16s ease;
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/*
 * Zwei Zeilen: der Seitenkopf steht fest, darunter scrollt die Buehne. Der
 * Router ersetzt nur `.inhalt__buehne` — der Kopf ueberlebt den Seitenwechsel
 * und wird von `setzeSeitenkopf()` neu beschriftet.
 */
.inhalt {
  grid-area: inhalt;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

/* Hinweisleiste unter dem Seitenkopf (setzeSeitenHinweis): leer = keine Hoehe. */
.inhalt__hinweis {
  padding: 0 44px;
  min-width: 0;
}

.inhalt__hinweis > * {
  margin: 0 0 12px;
}

.inhalt__buehne {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

/*
 * Die einzige Zeile ist der Scrollbereich, egal was drinsteht: Die meisten
 * Seiten packen ihre Buehne zum Neuzeichnen in ein eigenes <div>. Dieses div
 * ist dann das Rasterfeld — und `.buehne` darin waechst mit dem Inhalt ueber
 * dessen Hoehe hinaus, statt zu scrollen. Ohne diese Regel schneidet das
 * `overflow: hidden` oben alles ab, was nicht auf den Bildschirm passt.
 * `min-height: 0` hebt die Vorgabe `min-height: auto` fuer Rasterfelder auf,
 * die sonst jedes Schrumpfen unter die Inhaltshoehe verhindert.
 */
.inhalt__buehne > :last-child {
  min-height: 0;
  overflow: auto;
}

/*
 * Oben knapper als frueher (32 px): der Seitenkopf darueber traegt den
 * Abstand zum Fensterrand jetzt selbst.
 */
.buehne {
  overflow: auto;
  padding: 4px 44px var(--dock-freiraum);
  min-width: 0;
}

/*
 * Buehnenvariante fuer Seiten mit eigenem Innenscroll (Schichtplan, Kasse,
 * Designer, 3D-Salon): denselben Randabstand wie jede andere Seite, aber
 * `overflow: hidden` plus `height: 100%` statt `overflow: auto` — gescrollt
 * wird in einer inneren Spalte/Tabelle, nicht in der Buehne selbst. Unten
 * sitzt die schmale Fussleiste fest.
 */
.buehne--plan {
  padding: 4px 44px var(--dock-freiraum);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.buehne__breite {
  max-width: 1240px;
}

/* ---------------------------------------------------------------- Karten */

/*
 * Karten sind schwebende Objekte auf dem Grund: weicher, weit gestreuter
 * Schatten plus eine haarfeine Lichtkante oben. Der frueher tragende
 * 1px-Rahmen ist nur noch eine Andeutung — Tiefe kommt aus dem Licht.
 */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten), inset 0 1px 0 var(--kante-licht);
}

.karte + .karte {
  margin-top: 16px;
}

.karte__kopf {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 10px;
}

.karte__titel {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
}

.karte__hinweis {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-still);
}

.karte__koerper {
  padding: 16px;
}

.raster {
  display: grid;
  gap: 16px;
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --------------------------------------------------------------- Kennzahl */

.kennzahl__bezeichnung {
  font-size: 12px;
  color: var(--text-leise);
  margin: 0 0 3px;
}

.kennzahl__wert {
  font-size: 25px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.kennzahl__zusatz {
  font-size: 12px;
  color: var(--text-still);
  margin: 3px 0 0;
}

/* --------------------------------------------------------------- Tabellen */

.tabelle-rahmen {
  overflow-x: auto;
}

/* Ohne eigenen Scrollbereich — der umgebende Bereich scrollt (Schichtplan). */
.tabelle-rahmen--flach {
  overflow: visible;
}

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

/*
 * Der Kartenrahmen ist gerundet, aber Kopf- und Summenzeile malen ihren
 * eigenen Hintergrund bis an den Rand — ohne diese Regel ueberdeckt er die
 * runde Ecke der Karte mit einer eckigen. Nur wenn `.tabelle-rahmen` die
 * Kante der Karte tatsaechlich beruehrt (kein Kartenkopf davor/danach).
 */
.karte > .tabelle-rahmen:first-child table.tabelle thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:first-child table.tabelle thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:last-child table.tabelle tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
}

.karte > .tabelle-rahmen:last-child table.tabelle tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

.tabelle th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-leise);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  background: var(--flaeche-still);
  position: sticky;
  top: 0;
  z-index: 1;
}

/*
 * Sortierbare Spalte: die ganze Kopfzelle ist der Knopf, damit die Trefferflaeche
 * gross bleibt. Der Pfeil steht immer da (blass, wenn die Spalte nicht sortiert
 * ist) — sonst springt die Beschriftung beim Sortieren um seine Breite.
 */
.tabelle th.th--sortierbar {
  padding: 0;
}

.sortierknopf {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.tabelle th.zahl .sortierknopf {
  justify-content: flex-end;
}

.sortierknopf:hover {
  color: var(--text);
  background: var(--akzent-leise);
}

.sortierknopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}

.sortierknopf__pfeil {
  font-size: 10px;
  line-height: 1;
  opacity: 0.35;
}

th.th--sortiert {
  color: var(--text);
}

th.th--sortiert .sortierknopf__pfeil {
  opacity: 1;
  color: var(--akzent);
}

.tabelle td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.tabelle tbody tr:hover td {
  background: var(--flaeche-still);
}

.tabelle .zahl,
th.zahl,
td.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabelle tr.summe td {
  font-weight: 650;
  border-top: 2px solid var(--linie-kraeftig);
  background: var(--flaeche-still);
}

.tabelle tr.gruppe td {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
  background: var(--flaeche-still);
  padding-top: 8px;
  padding-bottom: 4px;
}

/*
 * Uebersichtstabellen tragen teils ganze Regelsaetze statt Zahlen. Damit die
 * Tabellenbreite unabhaengig von der Zahl der Eintraege konstant bleibt, ist
 * ein Objekt immer eine ZEILE (nie eine Spalte) — solche Zellen duerfen
 * umbrechen und richten sich oben aus.
 */
.tabelle td .liste-schlicht,
.tabelle td > div + .herkunft {
  display: block;
}

.tabelle .liste-schlicht {
  margin: 0;
  padding-left: 16px;
}

.liste-schlicht {
  margin: 0;
  padding-left: 16px;
}

.liste-schlicht li + li {
  margin-top: 4px;
}

.tabelle tbody td:has(.liste-schlicht) {
  vertical-align: top;
  white-space: normal;
  min-width: 240px;
}

/* Schmale Spalte, die nur einen Glyph-Knopf traegt. */
.zelle--knopf {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Schmale Spalte mit der Auswahl-Checkbox einer `auswahlTabelle()` (shared/ui/listenbaustein.js). */
.zelle--auswahl {
  width: 1%;
  white-space: nowrap;
  padding-right: 0;
}

/* Anklickbare Zeile der "Erste Schritte"-Checkliste (bueroStartSeite.js). */
.schalter-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.schalter-zeile:hover {
  background: var(--flaeche-still);
}

/*
 * Knopf, der nur aus einem Zeichen besteht (Anlegen, Bearbeiten, Entfernen).
 * Seit dem Knopf-System „Fingerbreit" eine runde Flaeche mit voller
 * Trefferbreite statt eines schmalen Kaestchens — Zeilenaktionen sind die
 * am haeufigsten danebengegriffenen Ziele.
 */
.knopf--glyph {
  width: var(--knopf-glyph);
  height: var(--knopf-glyph);
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  font-size: 15px;
}

.knopf--glyph.knopf--klein {
  width: calc(var(--knopf-glyph) - 4px);
  height: calc(var(--knopf-glyph) - 4px);
  font-size: 13.5px;
}

/* SVG-Knopfsymbol (z.B. Posteingang) statt Text-Glyph, gleiche Bezugsgröße. */
.knopf-symbol {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.knopf-symbol svg {
  width: 100%;
  height: 100%;
}

/* Schmale Spalte mit dem Ziehgriff fuer Drag & Drop-Sortierung. */
.zelle--griff {
  width: 1%;
  white-space: nowrap;
}

.griff {
  display: inline-block;
  cursor: grab;
  color: var(--text-leise);
  font-size: 15px;
  padding: 2px 4px;
  user-select: none;
}

.griff:active {
  cursor: grabbing;
}

/* Ziehgriff waehrend einer Spaltensortierung — sichtbar, aber ohne Funktion. */
.griff--aus {
  cursor: default;
  color: var(--text-still);
  opacity: 0.4;
}

/*
 * Hinweise zu einer Person stehen in ihrer Zeile, nicht als Stapel ueber der
 * Tabelle (Entscheidung 2026-08-13): sonst schieben ein paar fehlende
 * Stammdaten die Zahlen aus dem Bild und man sucht die Daten.
 */
.tabelle tbody tr.zeile--hinweis td {
  background: var(--mittel-leise);
  vertical-align: top;
}

.tabelle tbody tr.zeile--hinweis:hover td {
  background: var(--mittel-leise);
}

/*
 * Rechtevergabe (Planning-Rechte-2026-08-25): eine Zelle, deren Wert vom
 * aufgeloesten Profil abweicht, bekommt denselben Hinweis-Ton wie eine
 * Personenzeile mit fehlenden Stammdaten — hier je Zelle statt je Zeile.
 */
.rechte-matrix td.rechte-matrix__abweichung {
  background: var(--mittel-leise);
}

.rechte-matrix__mitte {
  text-align: center;
}

.tabelle td.zelle--person {
  vertical-align: top;
  white-space: normal;
  max-width: 340px;
}

.zeilenhinweis {
  display: flex;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #6b4a0c;
}

.zeilenhinweis__zeichen {
  flex: none;
}

/* Link innerhalb eines Hinweis- oder Meldungstexts, der direkt zur Fundstelle fuehrt. */
.text-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}

.text-link:hover {
  color: var(--akzent);
}

/* Zeile, ueber der gerade eine gezogene Zeile schwebt. */
.tabelle tbody tr.zeile--ziehziel td {
  background: var(--akzent-leise);
  box-shadow: inset 0 2px 0 var(--akzent);
}

/*
 * Kartenkopf mit einer Aktion rechts (z.B. „+" zum Anlegen). Bewusst als
 * eigene Klasse: `.karte__kopf` legt Titel und Hinweis sonst untereinander,
 * und das gilt fuer alle anderen Karten weiterhin.
 */
.karte__kopf--mit-aktion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Anker fuer ein `.menue`-Popover, das rechtsbuendig unter einem Knopf aufklappt. */
.spalten-auswahl {
  position: relative;
}

/* Der Name in der Tabelle oeffnet die Akte — schlichter Reset statt Knopf-Optik. */
.tabelle-name-knopf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tabelle-name-knopf:hover span:first-of-type {
  text-decoration: underline;
}

/* Tabelle mit Eingabefeldern in den Zellen (Staffelstufen im Dialog). */
.tabelle--eingabe td {
  padding: 5px 6px;
}

.tabelle--eingabe th.th--sortierbar .sortierknopf {
  padding: 5px 6px;
}

.tabelle--eingabe input[type='text'],
.tabelle--eingabe input[type='number'] {
  width: 100%;
  min-width: 70px;
}

.tabelle--eingabe td:first-child input {
  min-width: 160px;
}

.dialog--breit {
  max-width: min(900px, 94vw);
  width: 900px;
}

/* ---------------------------------------------------------------- Bedienung */

/*
 * Knopf-System „Fingerbreit" (Entscheidung 2026-09-05, aus vier vorgelegten
 * Systemen gewaehlt). Vier Rollen mit klar getrennter Form, damit man sie
 * ohne Lesen auseinanderhaelt — vorher unterschied sich ein Umschalter von
 * einer Hauptaktion nur durch die Fuellfarbe:
 *
 *   .knopf              Nebenaktion — getoente Flaeche, haarfeine Kante
 *   .knopf--haupt       Hauptaktion — gefuellt mit Akzentschein, EINE je Ansicht
 *   .knopf--still       Beilaeufig — nur Text
 *   .knopf--gefahr      Loeschen — nur Text in Rot, im Dialogfuss ganz links
 *   [aria-pressed]      Filter/Umschalter — Pille mit Punkt, aendert nur die Ansicht
 *   .knopf--glyph       Zeilenaktion — runde Symbolflaeche
 *
 * Die Kante der Nebenaktion ist eine Abweichung vom vorgelegten Entwurf: der
 * Dialogfuss liegt selbst auf `--flaeche-still`, ohne sie verschwaende dort
 * jedes „Abbrechen" im Untergrund.
 */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--knopf-hoehe);
  padding: 0 18px;
  border: 1px solid var(--linie);
  background: var(--flaeche-still);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  border-radius: var(--knopf-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.knopf:hover:not(:disabled) {
  background: var(--akzent-leise);
  border-color: transparent;
  color: var(--akzent-text);
}

.knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knopf--haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--akzent-schein);
}

.knopf--haupt:hover:not(:disabled) {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
  color: #fff;
  box-shadow: 0 6px 18px var(--akzent-schein);
}

.knopf--still {
  border-color: transparent;
  background: transparent;
  color: var(--text-leise);
}

.knopf--still:hover:not(:disabled) {
  background: var(--flaeche-still);
  color: var(--text);
}

.knopf--gefahr {
  border-color: transparent;
  background: transparent;
  color: var(--schlecht);
}

.knopf--gefahr:hover:not(:disabled) {
  background: var(--schlecht-leise);
  border-color: transparent;
  color: var(--schlecht);
}

.knopf--klein {
  height: var(--knopf-hoehe-klein);
  padding: 0 14px;
  font-size: 12.5px;
}

/*
 * Filter und Umschalter aendern die Ansicht, nie die Daten — deshalb eine
 * eigene Form: durchsichtige Pille mit Rand, aktiv mit Punkt und Akzentton.
 * `--haupt` und `--glyph` sind ausgenommen: ein gedrueckter Symbolknopf
 * (Freigabe im Schichtplan, Raumwahl im Salon) bleibt eine Flaeche.
 */
.knopf[aria-pressed]:not(.knopf--haupt):not(.knopf--glyph) {
  height: var(--knopf-hoehe-filter);
  padding: 0 16px;
  background: transparent;
  border-color: var(--linie-kraeftig);
  color: var(--text-leise);
}

.knopf[aria-pressed]:not(.knopf--haupt):not(.knopf--glyph):hover:not(:disabled) {
  background: var(--flaeche-still);
  border-color: var(--text-still);
  color: var(--text);
}

.knopf[aria-pressed="true"]:not(.knopf--haupt):not(.knopf--glyph) {
  background: var(--akzent-leise);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

.knopf[aria-pressed="true"]:not(.knopf--haupt):not(.knopf--glyph)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
}

/* Loeschen steht im Dialogfuss ganz links, weit weg von „Speichern". */
.dialog__fuss .knopf--gefahr {
  margin-right: auto;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  padding: 6px 9px;
  width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--flaeche-still);
  color: var(--text-still);
}

/*
 * Bedienelemente einer Werkzeugzeile (Suchfelder, Auswahllisten) tragen
 * dieselbe Hoehe und dieselbe runde Form wie die Knoepfe daneben — sonst
 * steht die Zeile auf drei verschiedenen Grundlinien. Eingabefelder in
 * Formularen und Dialogen bleiben bewusst eckig (`--radius-klein`): dort
 * steht laengerer Text, den eine Pille schlecht fasst.
 *
 * Muss NACH den `input[type=…]`-Regeln oben stehen: die sind gleich
 * spezifisch und wuerden Hoehe und Rundung sonst wieder einkassieren.
 */
.kopf__aktionen input,
.kopf__aktionen select,
.karte__kopf--mit-aktion .reihe input,
.karte__kopf--mit-aktion .reihe select,
input.kopf-suche,
input.werkzeug-feld,
select.werkzeug-feld,
select.bondrucker-auswahl,
select.kassierer-auswahl {
  height: var(--knopf-hoehe);
  padding: 0 16px;
  border-radius: var(--knopf-radius);
  /* Ohne das erben sie `width: 100%` von der Feldregel oben und sprengen die
     Werkzeugzeile in eine Spalte statt in eine Reihe. */
  width: auto;
  max-width: 260px;
}

/* Kontrollkaestchen und Schalter behalten ihre Form. */
.kopf__aktionen input[type="checkbox"],
.kopf__aktionen input[type="radio"],
.karte__kopf--mit-aktion .reihe input[type="checkbox"],
.karte__kopf--mit-aktion .reihe input[type="radio"] {
  height: auto;
  padding: 0;
  border-radius: 0;
}

input.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.feld {
  display: block;
  margin-bottom: 12px;
}

.feld__name {
  display: block;
  font-size: 12px;
  color: var(--text-leise);
  margin-bottom: 4px;
  font-weight: 550;
}

.feld__hinweis {
  font-size: 11.5px;
  color: var(--text-still);
  margin-top: 3px;
}

/* Drag&Drop-Feld für den Dateiupload im Dokumentdialog. */
.datei-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 16px;
  border: 1.5px dashed var(--linie-kraeftig);
  border-radius: var(--radius);
  background: var(--flaeche-still);
  text-align: center;
  cursor: pointer;
}

.datei-zone:hover {
  border-color: var(--text-still);
}

.datei-zone--ueber {
  border-color: var(--akzent);
  background: var(--akzent-leise);
}

.datei-zone--gefuellt {
  border-style: solid;
}

.datei-zone__eingabe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.datei-zone__text {
  font-size: 12.5px;
  color: var(--text-leise);
}

.datei-zone__dateiname {
  font-size: 13px;
  font-weight: 550;
  word-break: break-all;
}

.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 14px;
}

/*
 * Kontierungsstempel ueber der Beleg-Vorschau (Planning-Bankimport-2026-08-24,
 * F14b): sieht aus wie ein Stempel, ruehrt die Datei selbst nicht an —
 * deshalb ein reines Overlay statt einer Aenderung an der Datei.
 */
.beleg-stempel {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid;
  font-size: 11.5px;
  line-height: 1.4;
  transform: rotate(-4deg);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  box-shadow: var(--schatten);
}

.beleg-stempel strong {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.beleg-stempel--gut { border-color: var(--gut); color: var(--gut); }
.beleg-stempel--mittel { border-color: var(--mittel); color: var(--mittel); }
.beleg-stempel--schlecht { border-color: var(--schlecht); color: var(--schlecht); }

.feld--schmal {
  max-width: 200px;
}

/* Wochentagswahl einer Wiederholung: sieben Kaestchen nebeneinander. */
.wochentagwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wochentagwahl__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 12.5px;
  cursor: pointer;
}

.wochentagwahl__tag input {
  width: auto;
  margin: 0;
}

/* Oeffnungszeiten je Wochentag (Filialen-Stammdaten): eine schmale Zeile statt der Feldraster-Karten. */
.oeffnungszeiten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oeffnungszeiten__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oeffnungszeiten__zeile input {
  width: auto;
  margin: 0;
}

.oeffnungszeiten__tag {
  width: 28px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-leise);
  font-weight: 550;
}

.oeffnungszeiten__bis {
  color: var(--text-still);
}

/* Bestehende Eintraege im gewaehlten Zeitraum (Dialog „Zeiten eintragen"). */
.eintragsliste {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-still);
}

.eintragsliste__titel {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.eintragsliste__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
}

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

.eintragsliste__text {
  flex: 1;
  min-width: 0;
}

.dialog__unterzeile {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-leise);
}

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13.5px;
}

.schalter input {
  width: auto;
  margin: 0;
}

.suche {
  max-width: 300px;
}

.werkzeug-feld {
  width: auto;
  min-width: 150px;
}

/* -------------------------------------------------------------- Merkzeichen */

.marke-zeichen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.marke-zeichen--gut {
  background: var(--gut-leise);
  color: var(--gut);
}

.marke-zeichen--mittel {
  background: var(--mittel-leise);
  color: var(--mittel);
}

.marke-zeichen--schlecht {
  background: var(--schlecht-leise);
  color: var(--schlecht);
}

.marke-zeichen--still {
  background: var(--flaeche-still);
  color: var(--text-leise);
  border-color: var(--linie);
}

.marke-zeichen--akzent {
  background: var(--akzent-leise);
  color: var(--akzent-dunkel);
}

/* Kassen-Feier beim Stufensprung (Planning-Gamification-2026-08-23, F18):
   Tannenbaum mit Geschenken statt reinem Text (Forgejo-Issue "Tannenbaum-
   Visualisierung mit Geschenken"). Farben ausschliesslich aus den
   CSS-Variablen oben, wie bei jedem anderen Inline-SVG in dieser Datei. */
.stufenmeldung {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 26px 14px 18px;
  background: var(--flaeche);
  border: 1px solid var(--gut);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.stufenmeldung--sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.stufenmeldung__text-block {
  display: flex;
  flex-direction: column;
}

.stufenmeldung__stufe {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gut);
}

.stufenmeldung__text {
  font-weight: 600;
}

.stufenmeldung__baum {
  flex: none;
  line-height: 0;
}

.stufenmeldung__stamm {
  fill: var(--linie-kraeftig);
}

.stufenmeldung__krone {
  fill: var(--gut);
}

.stufenmeldung__stern {
  fill: var(--akzent-text);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 70px 25px;
}

.stufenmeldung--sichtbar .stufenmeldung__stern {
  animation: stufenmeldung-stern-ein 0.5s ease 0.15s forwards;
}

/* Geschenk, noch nicht erreicht: verpackte Silhouette ohne Schleife, keine Zahl, kein Hinweis auf die Hoehe der Stufe. */
.stufenmeldung__geschenk-box {
  fill: var(--flaeche);
  stroke: var(--linie-kraeftig);
  stroke-width: 1.4;
  stroke-dasharray: 2.4 2.2;
}

.stufenmeldung__geschenk.ist-erreicht .stufenmeldung__geschenk-box {
  fill: var(--akzent);
  stroke: var(--akzent-dunkel);
  stroke-dasharray: none;
}

.stufenmeldung__geschenk-band {
  fill: var(--akzent-text);
}

.stufenmeldung__funkel {
  fill: var(--akzent-text);
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  transform-origin: center;
}

/* Die soeben erreichte Stufe: das Geschenk poppt auf, der Funkel folgt kurz danach. */
.stufenmeldung__geschenk.ist-neu {
  opacity: 0;
  transform: scale(0);
}

.stufenmeldung--sichtbar .stufenmeldung__geschenk.ist-neu {
  animation: stufenmeldung-geschenk-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.stufenmeldung--sichtbar .stufenmeldung__geschenk.ist-neu .stufenmeldung__funkel {
  animation: stufenmeldung-funkel 0.7s ease 0.55s forwards;
}

@keyframes stufenmeldung-geschenk-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes stufenmeldung-funkel {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(20deg); }
}

@keyframes stufenmeldung-stern-ein {
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stufenmeldung__stern,
  .stufenmeldung__geschenk.ist-neu,
  .stufenmeldung__funkel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ------------------------------------------------------ Einstellungssuche */

.einstellungssuche-feld {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: 15px;
  background: var(--flaeche);
  color: var(--text);
  box-sizing: border-box;
}

.tag-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tag-pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--akzent-text);
  background: var(--akzent-leise);
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  transition: box-shadow 0.16s ease;
}

.tag-pille:hover {
  box-shadow: 0 2px 12px var(--akzent-schein);
}

.tag-pille--klein {
  font-size: 11.5px;
  padding: 2px 10px;
}

.tag-pille__anzahl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-still);
}

/* Suchfeld im Menue unter "Einstellungen" (siehe app/geruest.js#gruppenKopf).
   Gleicher Kasten wie .nav-knopf daneben: volle Breite, keine Seitenraender —
   der Einzug kommt bereits von .nav-unter { padding-left: 27px }. */
.nav-such {
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 2px 0 6px;
  padding: 4px 9px;
  border: 1px solid var(--linie-kraeftig);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  background: var(--flaeche);
  color: var(--text);
  box-sizing: border-box;
}

/* Kurzes Aufleuchten des Feldes, auf das die Suche per Tiefenlink springt. */
.einstellung--hervorgehoben {
  animation: einstellung-hervorheben 2.2s ease;
}

@keyframes einstellung-hervorheben {
  0%, 100% { box-shadow: none; background-color: transparent; }
  15%, 60% { box-shadow: 0 0 0 3px var(--akzent-schein); background-color: var(--akzent-leise); }
}

/* ------------------------------------------------------------------ Balken */

.balken {
  height: 7px;
  background: var(--linie);
  border-radius: 99px;
  overflow: hidden;
  min-width: 90px;
}

.balken__fuellung {
  height: 100%;
  border-radius: 99px;
  background: var(--akzent);
}

.balken__fuellung--gut {
  background: var(--gut);
}

.balken__fuellung--mittel {
  background: var(--mittel);
}

.balken__fuellung--schlecht {
  background: var(--schlecht);
}

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

/*
 * Ohne diese Zeile schlaegt `display: flex` das [hidden]-Attribut: der Sandbox-Banner
 * (sandboxBanner.js) blieb dadurch auch in echten Salons sichtbar, obwohl er dort
 * versteckt sein soll (beim Pruefen des Einrichtungsassistenten im Browser gefunden).
 */
.meldung[hidden] {
  display: none;
}

.meldung {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--flaeche-still);
  font-size: 13px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.meldung__zeichen {
  flex: none;
  font-size: 14px;
  line-height: 1.4;
}

.meldung__text {
  flex: 1;
  min-width: 0;
}

.meldung__titel {
  font-weight: 650;
  margin: 0 0 2px;
}

.meldung p {
  margin: 0;
}

.meldung--warnung {
  background: var(--mittel-leise);
  border-color: #ecd9b0;
  color: #6b4a0c;
}

/* Befristeter Supportzugang (Planning-Salonika-Zugriffssicherung-2026-09-04,
   Z4): schwebt ueber allem, damit er waehrend der ganzen Freigabe sichtbar
   bleibt, egal welche Seite gerade offen ist. */
.support-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Probezugang (B12): Text links, Kaufknopf rechts; auf schmalen Bildschirmen darf der Knopf umbrechen. */
.probe-banner {
  align-items: center;
  flex-wrap: wrap;
}

.probe-banner__knopf {
  margin-left: auto;
  text-decoration: none;
}

/* Zahlungsausfall (B20): wie der Probe-Streifen, Text links, Link zur Rechnung rechts. */
.zahlung-banner {
  align-items: center;
  flex-wrap: wrap;
}

.zahlung-banner__knopf {
  margin-left: auto;
  text-decoration: none;
}

.meldung--fehler {
  background: var(--schlecht-leise);
  border-color: #eec8c4;
  color: #7d2c26;
}

.meldung--gut {
  background: var(--gut-leise);
  border-color: #c3e0ce;
  color: #1f5636;
}

.leer {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-still);
}

.leer__titel {
  font-weight: 600;
  color: var(--text-leise);
  margin: 0 0 4px;
}

.leer p {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------- Rechenweg */

.rechenweg {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche-still);
  margin: 6px 0 2px;
  font-size: 12.5px;
}

.rechenweg__zeile {
  display: flex;
  gap: 12px;
  padding: 4px 12px;
  align-items: baseline;
}

.rechenweg__zeile + .rechenweg__zeile {
  border-top: 1px solid #edeceb;
}

.rechenweg__bezeichnung {
  flex: 1;
  color: var(--text-leise);
}

.rechenweg__wert {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 550;
}

.rechenweg__zeile--ergebnis {
  background: var(--flaeche);
  font-weight: 650;
}

.rechenweg__zeile--ergebnis .rechenweg__bezeichnung {
  color: var(--text);
}

.aufklapp {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.aufklapp__pfeil {
  color: var(--text-still);
  font-size: 9px;
  transition: transform 0.14s ease;
}

.aufklapp[aria-expanded="true"] .aufklapp__pfeil {
  transform: rotate(90deg);
}

.herkunft {
  display: block;
  font-size: 11px;
  color: var(--text-still);
  font-weight: 400;
}

/* --------------------------------------------------------------- Dialoge */

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--schatten-hoch);
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
  color: var(--text);
  background: var(--flaeche);
}

dialog::backdrop {
  background: rgba(24, 26, 30, 0.36);
}

.dialog__kopf {
  padding: 15px 18px;
  border-bottom: 1px solid var(--linie);
}

.dialog__titel {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.dialog__koerper {
  padding: 18px;
  max-height: min(66vh, 620px);
  overflow: auto;
}

.dialog__fuss {
  padding: 12px 18px;
  border-top: 1px solid var(--linie);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--flaeche-still);
  border-radius: 0 0 var(--radius) var(--radius);
}

/*
 * Gesperrter Übergabemodus (Planning-Unterschriftsfunktion-2026-09-04, Z10):
 * bewusst kein `.dialog__kopf/-koerper/-fuss` — das Kundengerät soll aussehen
 * wie eine eigene Kiosk-Seite, nicht wie ein Dialog über der App darunter.
 */
.uebergabemodus {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

.uebergabemodus__inhalt {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.uebergabemodus__titel {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.uebergabemodus__text {
  overflow: auto;
  flex: 0 1 auto;
  max-height: 32vh;
  line-height: 1.5;
}

.uebergabemodus__leinwand {
  flex: 1 1 auto;
  min-height: 160px;
  width: 100%;
  border: 2px dashed var(--linie);
  border-radius: var(--radius);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/*
 * T-Konto-Eingabe im Buchung-erfassen-Dialog (raw/todos Z.136):
 * Soll und Haben stehen als eigene Spalten nebeneinander, die Saldozeile
 * bleibt beim Scrollen sichtbar, damit der Ausgleich immer erkennbar ist.
 */
.t-konto__saldo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  font-size: 13px;
  font-weight: 600;
}

.t-konto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  overflow: hidden;
}

.t-konto__seite {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.t-konto__seite--soll {
  border-right: 2px solid var(--linie-kraeftig);
}

.t-konto__seite-titel {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linie);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-leise);
}

.t-konto__zeile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--linie);
}

.t-konto__zeile:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .t-konto {
    grid-template-columns: 1fr;
  }

  .t-konto__seite--soll {
    border-right: 0;
    border-bottom: 2px solid var(--linie-kraeftig);
  }
}

/* ------------------------------------------------------------- Menue */

.menue {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  min-width: 232px;
  padding: 5px;
  z-index: 40;
}

/*
 * Aus der Hauptmenue-Leiste unten heraus klappt das Benutzermenue nach oben
 * auf — unten ist kein Platz mehr. Muss nach `.menue` stehen, sonst gewinnt
 * deren `top`. Rechtsbuendig wie die Grundform, damit es am rechten
 * Bildschirmrand nicht ueberlappt.
 */
.menue--hoch {
  top: auto;
  bottom: calc(100% + 5px);
}

.menue__kopf {
  padding: 10px 10px 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 5px;
}

.menue__name {
  font-weight: 600;
}

.menue__rolle {
  font-size: 12px;
  color: var(--text-still);
}

.menue__eintrag {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-align: left;
}

.menue__eintrag:hover {
  background: var(--flaeche-still);
}

.menue__trenner {
  height: 1px;
  background: var(--linie);
  margin: 5px 0;
}

/* ---------------------------------------------------------- Anmeldeseite */

/*
 * Feste Salonika-Markenoptik (dunkler Markengrund, Rostorange) fuer alle Seiten
 * ohne Sitzung — unabhaengig vom gewaehlten Stil, damit der Einstieg in jedem
 * Salon an Salonika erinnert. Die Werte ersetzen die Token nur hier, alle
 * Bausteine (Karte, Feld, Knopf, Meldung) ziehen sie sich von selbst.
 */
.anmeldung {
  color-scheme: dark;
  --grund: #141312;
  --flaeche: #1e1c1a;
  --flaeche-still: #242220;
  --text: #f0efec;
  --text-leise: #c3c2b7;
  --text-still: #8f8d84;
  --linie: #302d2a;
  --linie-kraeftig: #4a453f;
  --akzent: #c6613f;
  --akzent-dunkel: #d47a58;
  --akzent-leise: #2e2420;
  --akzent-text: #e8916e;
  --akzent-schein: rgba(198, 97, 63, 0.3);
  --schlecht: #e0685c;
  --schlecht-leise: #3a1f1c;
  --gut: #4fae74;
  --gut-leise: #1c3226;
  --mittel: #d9a13c;
  --mittel-leise: #3a2c14;
  --schatten-farbe-nah: rgba(0, 0, 0, 0.42);
  --schatten-farbe-weit: rgba(0, 0, 0, 0.34);
  --schatten-farbe-tief: rgba(0, 0, 0, 0.6);

  position: relative;
  min-height: 100vh;
  /* dvh = sichtbarer Bereich: auf dem Handy zaehlt die Adressleiste bei vh nicht ab. */
  min-height: 100dvh;
  display: grid;
  /* minmax(0, …): die Spalte darf unter die Kartenbreite schrumpfen (Handy). */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 20px 64px;
  background: var(--grund);
  color: var(--text);
}

/*
 * iPhone quer: ohne `viewport-fit=cover` haelt Safari den Inhalt selbst aus dem
 * Notch-Bereich heraus (env(safe-area-inset-*) waere hier 0). Die Streifen neben
 * der Notch zeigen aber den Grund von html/body — im hellen Stil waeren sie hell
 * neben der dunklen Anmeldung. Darum Grund nur auf diesen Seiten dunkel setzen;
 * die uebrige App bleibt unveraendert (kein app-weites `viewport-fit=cover`).
 */
html:has(.anmeldung),
body:has(.anmeldung) {
  background: #141312;
}

/*
 * iOS blaeht Text im Querformat von sich aus auf (Schriftgroessen-Anpassung);
 * dadurch brechen Titel und Hinweise um und die Karte wird hoeher als berechnet.
 */
html:has(.anmeldung) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.anmeldung__karte {
  width: 100%;
  max-width: 366px;
}

/*
 * iOS-Safari zoomt beim Fokussieren jedes Feldes unter 16px in die Seite hinein;
 * im Querformat mit Tastatur wirkt das wie abgeschnittener, ueberlappender Inhalt
 * (und der Zoom bleibt nach dem Schliessen der Tastatur stehen). 16px nur bei
 * Touch-Bedienung, damit die Desktop-Optik unveraendert bleibt.
 */
@media (pointer: coarse) {
  .anmeldung input,
  .anmeldung select,
  .anmeldung textarea {
    font-size: 16px;
  }
}

/* Der Knopf traegt dunkle Schrift auf Rostorange (besserer Kontrast als Weiss). */
.anmeldung .knopf--haupt,
.anmeldung .knopf--haupt:hover:not(:disabled) {
  color: #141312;
  font-weight: 700;
}

.anmeldung__marke {
  text-align: center;
  margin-bottom: 20px;
}

/* Ersatz, wenn der Salon kein Logo hinterlegt hat: Initiale des Salons. */
.anmeldung__zeichen {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--akzent);
  color: #141312;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 19px;
  margin: 0 auto 11px;
}

/* Salon-Logo: bewusst groesser als das Zeichen, denn der Salon ist hier das Wichtige. */
.anmeldung__logo {
  display: block;
  max-width: 200px;
  max-height: 84px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.anmeldung__salon {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-still);
}

/* Salonika-Marke links oben im Rand — S-Zeichen und Wortmarke wie auf salonika.de. */
.anmeldung__plattform {
  position: absolute;
  top: 18px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
}

.anmeldung__plattform img {
  display: block;
  width: 28px;
  height: 28px;
}

.anmeldung__wortmarke {
  font: 900 15px/1 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.anmeldung__wortmarke b {
  color: #c6613f;
  font-weight: 900;
}

.anmeldung__plattform:hover .anmeldung__wortmarke {
  text-decoration: underline;
}

.anmeldung__plattform:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

.anmeldung__leitsatz {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: 16px;
  text-align: center;
  font: 11.5px ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-still);
}

/*
 * Niedrige Ansicht (Handy quer, Tastatur offen): Marke und Leitsatz liegen sonst
 * ueber der Karte. Dann stapeln sie sich im Seitenfluss statt am Rand zu haengen.
 */
@media (max-height: 640px) {
  .anmeldung {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
  }

  .anmeldung__plattform,
  .anmeldung__leitsatz {
    position: static;
  }

  .anmeldung__plattform {
    align-self: flex-start;
  }

  .anmeldung__karte {
    margin-block: auto;
  }

  /* Kopf der Karte enger, damit das erste Feld auch bei offener Tastatur im Bild bleibt. */
  .anmeldung__marke {
    margin-bottom: 10px;
  }

  .anmeldung__logo {
    max-height: 48px;
    margin-bottom: 6px;
  }

  .anmeldung__zeichen {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-bottom: 6px;
  }

  .anmeldung .stapel > * + * {
    margin-top: 10px;
  }
}

/* Sehr niedrig (Handy quer mit Tastatur): nur noch, was zum Anmelden noetig ist. */
@media (max-height: 420px) {
  .anmeldung {
    gap: 8px;
    padding-block: 10px;
  }

  .anmeldung__leitsatz,
  .anmeldung__zusatz {
    display: none;
  }

  .anmeldung__logo {
    max-height: 36px;
  }

  .anmeldung__zeichen {
    display: none;
  }
}

.anmeldung__titel {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.anmeldung__zusatz {
  margin: 3px 0 0;
  color: var(--text-still);
  font-size: 13px;
}

/* -------------------------------------------------------------- Schichtplan */

.plan {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12.5px;
}

.plan th,
.plan td {
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 0;
}

/* Kopfzeile bleibt beim Scrollen stehen — der Plan fuellt die ganze Flaeche. */
.plan thead th {
  background: var(--flaeche-still);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-leise);
  padding: 6px 7px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.plan thead th.wochenende,
.plan td.wochenende {
  background: var(--wochenende);
}

.plan th.person {
  text-align: left;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  min-width: 158px;
  background: var(--flaeche-still);
}

/* Nur die Personenspalte laesst sich sortieren — die uebrigen Spalten sind Tage. */
.plan th.person.th--sortierbar {
  padding: 0;
}

.plan th.person .sortierknopf {
  padding: 6px 9px;
}

.plan td.person {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--flaeche);
  padding: 6px 9px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.person__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan__zelle {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  padding: 5px 3px;
  display: block;
  text-align: center;
  color: var(--text);
}

.plan__zelle:hover {
  background: var(--akzent-leise);
}

/*
 * Herkunft bleibt sichtbar (Rotationsplan, Abschnitt 7): gerechnete Tage ruhig,
 * von Hand gesetzte mit einer Marke am oberen Rand, ungeplante blass. Sonst ist
 * bei einem gerechneten Plan nicht mehr erkennbar, was Absicht war.
 */
.plan__zelle--ungeplant {
  color: var(--linie-kraeftig);
}

.plan__zelle--regelfrei {
  color: var(--linie-kraeftig);
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--flaeche-still) 5px, var(--flaeche-still) 10px);
}

.plan__zelle--ausnahme {
  box-shadow: inset 0 2px 0 var(--akzent);
}

.plan__zelle--schliesstag {
  background: var(--flaeche-still);
  color: var(--text-leise);
  font-style: italic;
}

/*
 * Arbeit an einem Schliesstag ist der seltene Ausnahmefall und muss auffallen —
 * sie zaehlt als Arbeitszeit, obwohl der Salon zu ist (Entscheidung 2026-08-16).
 */
.plan__zelle--schliesstag-arbeit {
  background: var(--mittel-leise);
  color: var(--mittel);
  font-style: normal;
  box-shadow: inset 0 2px 0 var(--mittel);
}

/* Vor Eintritt und nach Austritt gibt es nichts zu planen. */
.plan__zelle--ausserhalb {
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--linie) 4px, var(--linie) 5px);
  cursor: default;
}

/*
 * Pausen- oder Jugendschutzverstoss (F38–F40): warnt zusaetzlich zur
 * eigentlichen Zellfarbe, statt sie zu ersetzen — Speichern bleibt moeglich,
 * die Verantwortung bleibt beim Inhaber.
 */
.plan__zelle--verstoss {
  box-shadow: inset 0 0 0 2px var(--schlecht);
}

/* Die Auswahl im Raster (Zwei-Klick-Zeitraum) sticht ueber allem anderen hervor. */
.plan__zelle--gewaehlt,
.plan__zelle--gewaehlt:hover {
  background: var(--akzent);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--akzent-dunkel);
}

.plan__zelle--gewaehlt .plan__eintrag,
.plan__zelle--gewaehlt .plan__stunden,
.plan__zelle--gewaehlt .plan__schliesstag {
  background: transparent;
  color: inherit;
}

/* Mehrere Eintraege je Tag (halbe Tage) stehen untereinander in der Zelle. */
.plan__eintrag {
  display: block;
  border-radius: var(--radius-klein);
  padding: 1px 3px;
}

.plan__eintrag + .plan__eintrag {
  margin-top: 2px;
}

.plan__eintrag--urlaub {
  background: var(--mittel-leise);
  color: var(--mittel);
  font-weight: 600;
}

.plan__eintrag--krank {
  background: var(--schlecht-leise);
  color: var(--schlecht);
  font-weight: 600;
}

.plan__eintrag--bildung {
  background: var(--akzent-leise);
  color: var(--akzent-dunkel);
  font-weight: 600;
}

.plan__eintrag--frei {
  background: var(--flaeche-still);
  color: var(--text-still);
  font-weight: 600;
}

/* Abwesenheitsansicht (F24): die Art bleibt Kollegen verborgen, nur „Abwesend" ist zu sehen. */
.plan__eintrag--abwesend {
  background: var(--flaeche-still);
  color: var(--text-leise);
  font-style: italic;
  font-weight: 500;
}

.plan__schliesstag {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan__stunden {
  display: block;
  font-size: 10px;
  color: var(--text-still);
}

/* ------------------------------------------------------ Mitarbeiterleiste */

/*
 * Der Plan nutzt die volle Flaeche innerhalb des Randabstands der Buehne,
 * keine Maximalbreite. Gescrollt wird nur im Hauptbereich (waagerecht wie
 * senkrecht), damit Kopfzeile, Personenspalte, Mitarbeiterleiste und
 * Fussleiste stehen bleiben.
 */
.wochenplan-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.wochenplan-haupt {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/*
 * Alles ausser dem Raster bleibt beim waagerechten Scrollen am linken Rand
 * stehen — nur der Plan selbst faehrt zur Seite.
 */
.wochenplan-hinweise {
  position: sticky;
  left: 0;
  padding: 14px 16px 0;
}

/* --------------------------------------------------- Fussleiste Schichtplan */

.plan-fuss {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 7px 16px;
  border-top: 1px solid var(--linie);
  background: var(--leiste);
  font-size: 11.5px;
  color: var(--text-still);
}

.plan-fuss__hinweis {
  margin-right: auto;
}

.plan-fuss__kuerzel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.plan-fuss__marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 1px 7px 1px 3px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
}

.plan-fuss__zeichen {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--flaeche-still);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
}

/* -------------------------------------------------- Besetzungsuebersicht */

/*
 * Umkehrung des Plans: eine Woche, je Tag eine Spalte, darin ein Zeitbalken
 * je Schicht. Kopf- und Achsenspalte teilen sich mit den sieben Tagesspalten
 * ein zweizeiliges Gitter (8 Spalten × 2 Zeilen, Reihenfolge im Markup
 * entscheidet — kein explizites grid-row/-column noetig). Die Stundenlinien
 * in `.besetzung-tag` muessen zu PX_PRO_STUNDE in
 * besetzungsuebersichtSeite.js passen (56px).
 */
.besetzung-woche {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(128px, 1fr));
  align-items: start;
}

.besetzung-woche__ecke {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--flaeche-still);
  border-bottom: 1px solid var(--linie);
}

.besetzung-woche__kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-leise);
  background: var(--flaeche-still);
  border-bottom: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}

.besetzung-woche__kopf.wochenende {
  background: var(--wochenende);
}

.besetzung-woche__achse {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--flaeche);
}

.besetzung-woche__marke {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-still);
  white-space: nowrap;
}

.besetzung-tag {
  position: relative;
  border-left: 1px solid var(--linie);
  background-color: var(--flaeche);
  background-image: repeating-linear-gradient(to bottom, var(--linie) 0, var(--linie) 1px, transparent 1px, transparent 56px);
  background-position: 0 22px;
}

.besetzung-tag.wochenende {
  background-color: var(--wochenende);
}

/* Ausserhalb der Öffnungszeiten liegende Ränder: gedämpft statt ein
   Deckband über die geöffnete Zeit zu legen, damit deren Gitter sichtbar bleibt. */
.besetzung-tag__geschlossen-band {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--flaeche-still);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--linie) 5px, var(--linie) 6px);
}

.besetzung-tag--geschlossen {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, var(--linie) 6px, var(--linie) 7px);
}

.besetzung-tag__schliesstag {
  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-still);
}

.besetzung-tag__leer {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--linie-kraeftig);
  font-size: 13px;
}

.besetzung-balken {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein);
  background: var(--akzent-leise);
  padding: 2px 5px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.besetzung-balken:hover {
  background: var(--akzent);
}

.besetzung-balken:hover .besetzung-balken__zeit {
  color: #fff;
}

.besetzung-balken__kreis {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -58%);
  z-index: 1;
}

.besetzung-balken__avatar {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
  border: 2px solid var(--flaeche);
  box-shadow: var(--schatten);
}

.besetzung-balken__zeit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: var(--akzent-dunkel);
}

/* ---------------------------------------------------- Terminkalender */

/*
 * Tagesansicht der Termine (Planning-Terminkalender-2026-08-22, F8): dieselbe
 * Machart wie `.besetzung-woche`, nur mit einer variablen Spaltenzahl (je
 * anwesendem Mitarbeiter statt sieben Wochentagen) — darum ueber die
 * Custom Property `--spalten` statt eines festen `repeat(7, ...)`. Achse,
 * Kopf und Zellen selbst teilen sich weiterhin die Besetzungs-Klassen.
 */
.termine-woche {
  display: grid;
  grid-template-columns: 52px repeat(var(--spalten, 1), minmax(128px, 1fr));
  align-items: start;
}

.termine-woche__kopf {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.termine-woche__avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.termine-woche__spalte {
  cursor: pointer;
}

.termine-balken--karenz {
  border-left-color: var(--schlecht);
  background: var(--schlecht-leise);
}

.termine-balken--karenz:hover {
  background: var(--schlecht);
}

/* Trefferliste der Kundensuche im Termindialog (F14). */
.aufklapp-liste {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
}

.aufklapp-liste__eintrag {
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.aufklapp-liste__eintrag:last-child {
  border-bottom: 0;
}

.aufklapp-liste__eintrag:hover {
  background: var(--flaeche-still);
}

.mitarbeiter-leiste {
  position: relative;
  flex: none;
  align-self: stretch;
  margin-left: auto;
  width: 58px;
  background: var(--leiste);
  border-left: 1px solid var(--linie);
  padding: 10px 0;
  transition: width 0.15s ease;
}

.mitarbeiter-leiste[data-offen="true"] {
  width: 232px;
}

.mitarbeiter-leiste__umschalter {
  position: absolute;
  top: 12px;
  left: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--text-leise);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--schatten);
}

.mitarbeiter-leiste__umschalter:hover {
  background: var(--flaeche-still);
  color: var(--text);
}

.mitarbeiter-leiste__liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
  margin-top: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
}

.mitarbeiter-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-klein);
  padding: 5px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  white-space: nowrap;
}

.mitarbeiter-eintrag:hover {
  background: var(--flaeche-still);
}

.mitarbeiter-eintrag--aktiv {
  background: var(--akzent-leise);
  border-color: var(--akzent);
}

.mitarbeiter-eintrag__glyph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--akzent-leise);
  color: var(--akzent-dunkel);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  flex: none;
  object-fit: cover;
  overflow: hidden;
}

.mitarbeiter-eintrag--aktiv .mitarbeiter-eintrag__glyph {
  background: var(--akzent);
  color: #fff;
}

.mitarbeiter-eintrag__name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mitarbeiter-leiste__abschnitt {
  border: 0;
  background: transparent;
  color: var(--text-still);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  padding: 8px 5px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.mitarbeiter-leiste__abschnitt:hover {
  color: var(--text);
}

/* ------------------------------------------------------------- Zeitstrahl */

.zeitstrahl-heute-zeile td {
  padding: 4px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-still);
  background: var(--flaeche-still);
  border-bottom: 1px solid var(--linie);
}

.zeitstrahl-achse {
  padding: 4px 0 8px;
}

.zeitstrahl-achse__kopf {
  position: relative;
  height: 22px;
  margin-bottom: 4px;
}

.zeitstrahl-achse__pfeil {
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--akzent-dunkel);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.zeitstrahl-achse__pfeil--links { left: 0; }
.zeitstrahl-achse__pfeil--rechts { right: 0; }

.zeitstrahl-achse__pfeil:hover {
  background: var(--akzent-leise);
}

.zeitstrahl-achse__monate {
  position: relative;
  top: 3px;
  height: 16px;
}

.zeitstrahl-achse__monat {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--text-still);
  white-space: nowrap;
}

.zeitstrahl-achse__spur,
.zeitstrahl-gesamtzeile__spur {
  position: relative;
  height: 30px;
  margin: 0 30px;
  background: var(--flaeche-still);
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
}

.zeitstrahl-achse__heute {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--akzent);
  opacity: 0.55;
}

.zeitstrahl-achse__punkt {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.zeitstrahl-achse__punkt--gut { background: var(--gut-leise); color: var(--gut); border-color: var(--gut); }
.zeitstrahl-achse__punkt--mittel { background: var(--mittel-leise); color: var(--mittel); border-color: var(--mittel); }
.zeitstrahl-achse__punkt--schlecht { background: var(--schlecht-leise); color: var(--schlecht); border-color: var(--schlecht); }
.zeitstrahl-achse__punkt--still { background: var(--flaeche-still); color: var(--text-leise); border-color: var(--linie-kraeftig); }
.zeitstrahl-achse__punkt--akzent { background: var(--akzent-leise); color: var(--akzent-dunkel); border-color: var(--akzent); }

.zeitstrahl-gesamtzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.zeitstrahl-gesamtzeile__name {
  flex: none;
  width: 140px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeitstrahl-gesamtzeile__spur {
  flex: 1;
  margin: 0;
}

.zeitstrahl-balken {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 99px;
  background: var(--akzent-leise);
  border: 1px solid var(--akzent);
  opacity: 0.6;
}

.anstehend-liste {
  display: flex;
  flex-direction: column;
  padding: 4px 0 12px;
}

.anstehend-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 16px;
  font: inherit;
  color: var(--text);
  text-align: left;
}

.anstehend-zeile:hover {
  background: var(--flaeche-still);
}

.anstehend-zeile__marke {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mittel);
}

.anstehend-zeile__marke--schlecht {
  background: var(--schlecht);
}

.anstehend-zeile__name {
  flex: none;
  width: 150px;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anstehend-zeile__titel {
  flex: 1;
  font-size: 13px;
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anstehend-zeile__datum {
  flex: none;
  font-size: 12.5px;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Werkzeuge */

.reihe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Knopf, der in einer .reihe neben Auswahlfeldern steht: er sitzt auf der
 * Grundlinie der Felder statt mittig neben deren Beschriftung.
 */
.reihe__feldknopf {
  align-self: flex-end;
  margin-bottom: 12px;
}

.reihe--rechts {
  justify-content: flex-end;
  /* Zeilen-Aktionen (Bearbeiten/Löschen) sollen nie umbrechen — sonst stehen
     die Glyphen bei schmaler Spalte untereinander statt nebeneinander. */
  flex-wrap: nowrap;
}

.stapel > * + * {
  margin-top: 16px;
}

.leise {
  color: var(--text-still);
}

.klein {
  font-size: 12px;
}

.zahlenschrift {
  font-variant-numeric: tabular-nums;
}

.trennlinie {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 16px 0;
}

.abschnitt-titel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-still);
  font-weight: 650;
  margin: 0 0 9px;
}

/* ------------------------------------------------------- Mitarbeiter-Akte */

/*
 * Die Mitarbeiter-Akte ersetzt den frueheren Bearbeiten-Dialog durch eine
 * eigene View (Nutzerentscheidung 2026-08-21): eine Ein-Bildschirm-Seite wie
 * der Schichtplan — Kopf, Foto und Reiterleiste stehen fest, gescrollt wird
 * nur innerhalb des aktiven Reiters. Die Reiter sind als Aktenordner-Lasche
 * gezeichnet: aktiv in Akzentfarbe, direkt an die Ablage darunter angesetzt.
 */
.buehne--akte {
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.akte-kopfzeile {
  flex: none;
  /* Gleicher oberer Randabstand wie `.buehne` (32px) statt eines eigenen Werts. */
  padding: 32px 44px 0;
}

.akte-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 18px 44px 40px;
}

.akte-hauptbereich {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Liste neben der Akte (Entwurf D, Entscheidung 2026-09-05): eigene
 * Scrollspalte links, damit ein Klick den Kunden wechselt statt die Seite.
 * Bewusst schmal und nur mit Name und letztem Besuch — die vollstaendige,
 * sortierbare Kartei mit Umsatz und Stammfriseur bleibt die eigene Seite
 * darunter.
 */
.akte-liste {
  flex: none;
  width: 260px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten), inset 0 1px 0 var(--kante-licht);
  overflow: hidden;
}

.akte-liste__kopf {
  flex: none;
  display: grid;
  gap: 7px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--linie);
}

.akte-liste__suche {
  height: var(--knopf-hoehe);
  padding: 0 14px;
  border-radius: var(--knopf-radius);
}

.akte-liste__uebersicht {
  font-size: 11.5px;
}

.akte-liste__eintraege {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 6px;
}

.akte-liste__eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-klein);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.16s ease;
}

.akte-liste__eintrag:hover {
  background: var(--flaeche-schwebend);
}

.akte-liste__eintrag--aktiv,
.akte-liste__eintrag--aktiv:hover {
  background: var(--akzent-leise);
}

.akte-liste__eintrag--aktiv .akte-liste__name {
  color: var(--akzent-text);
  font-weight: 650;
}

.akte-liste__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.akte-liste__name {
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akte-liste__zusatz {
  font-size: 11px;
  color: var(--text-still);
}

.akte-liste__leer {
  margin: 10px;
  font-size: 12px;
  color: var(--text-still);
}

.akte-reiter {
  flex: none;
  display: flex;
  gap: 4px;
  padding-left: 8px;
}

.akte-reiter__knopf {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: var(--flaeche-still);
  color: var(--text-leise);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.akte-reiter__knopf:hover {
  color: var(--text);
}

.akte-reiter__knopf[aria-current="true"] {
  background: linear-gradient(145deg, var(--akzent) 0%, var(--akzent-dunkel) 100%);
  color: #fff;
}

.akte-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 18px;
}

.akte-panel > .karte + .stapel,
.akte-panel > .stapel {
  margin-top: 0;
}

.akte-seitenleiste {
  flex: none;
  width: 250px;
  overflow-y: auto;
  padding: 6px 2px;
}

.akte-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.akte-identitaet {
  margin-top: 16px;
  text-align: center;
}

.akte-name-eingabe {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  padding: 4px 6px;
  border-radius: var(--radius-klein);
}

.akte-name-eingabe:hover {
  background: var(--flaeche-still);
}

.akte-name-eingabe:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  background: var(--flaeche-still);
}

.akte-rolle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-leise);
}

.akte-status {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------- Handy */

/*
 * Menue-Knopf fuer das Handy: zog mit dem Umbau auf Entwurf D (2026-09-05)
 * aus dem entfallenen Dock in den Seitenkopf. Ausserhalb der Handy-
 * Media-Query unsichtbar — am Rechner ist die Schiene ohnehin immer da.
 */
.seitenkopf__umschalter {
  display: none;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font-size: 17px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
}

.seitenkopf__umschalter:hover {
  background: var(--flaeche-schwebend);
  color: var(--text);
}

@media (max-width: 860px) {
  .geruest {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "inhalt";
  }

  /*
   * Auf dem Handy schiebt sich die Leiste ueber den Inhalt — dort braucht sie
   * als einziges wieder einen eigenen Grund, sonst schiene der Inhalt durch.
   */
  .seitenleiste {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-breite);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    background: var(--grund);
    box-shadow: var(--schatten-hoch);
    padding-top: 16px;
  }

  .geruest[data-menue="offen"] .seitenleiste {
    transform: translateX(0);
  }

  .seitenkopf__umschalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .buehne,
  .buehne--plan {
    padding: 4px 14px var(--dock-freiraum);
  }

  /*
   * Auf dem Handy ist die Schiene immer die volle Leiste, die sich ueber den
   * Inhalt schiebt — der Feststell-Knopf ergibt dort keinen Sinn, geoeffnet
   * wird ueber den Menue-Knopf im Seitenkopf.
   */
  .seitenleiste {
    width: var(--sidebar-breite-offen);
  }

  .schiene__feststellen {
    display: none;
  }

  .seitenleiste .nav-unter,
  .schiene__fuss .benutzer__name,
  .schiene__fuss .benutzer__pfeil {
    display: block;
  }

  .schiene__nur-offen {
    opacity: 1;
  }

  /*
   * Zurueck/Vor sind auf dem Handy bereits Systemgesten (Planning-Hauptmenue-
   * Unten-2026-08-24, Entscheidung 2).
   */
  .verlauf {
    display: none;
  }

  .seitenkopf {
    padding: 12px 14px 10px;
  }

  .seitenkopf__titel {
    font-size: 19px;
  }

  .blaettern__wert {
    min-width: 104px;
  }

  .wochenplan-layout {
    flex-direction: column-reverse;
  }

  .akte-layout {
    flex-direction: column;
    overflow-y: auto;
  }

  /* Nebeneinander gibt es auf dem Handy nicht — die Kartei bleibt dort der
     eigene Weg zum naechsten Kunden (Entwurf D). */
  .akte-liste {
    display: none;
  }

  .akte-hauptbereich {
    min-height: auto;
  }

  .akte-panel {
    flex: none;
    overflow: visible;
  }

  /* Sechs Reiter passen nicht nebeneinander auf ein Handy — statt sie zu
     stauchen, bleibt die Reihe in ihrer eigenen Breite und laesst sich
     seitlich wischen. */
  .akte-reiter {
    overflow-x: auto;
  }

  .akte-reiter__knopf {
    flex: none;
  }

  .akte-seitenleiste {
    width: 100%;
    order: -1;
  }

  .akte-foto {
    flex-direction: row;
  }

  .akte-identitaet {
    margin-top: 0;
    text-align: left;
  }

  .akte-name-eingabe,
  .akte-rolle {
    text-align: left;
  }

  .akte-status {
    justify-content: flex-start;
  }

  .mitarbeiter-leiste {
    width: 100%;
    margin-left: 0;
    padding: 8px 20px 8px 8px;
  }

  .mitarbeiter-leiste[data-offen="true"] {
    width: 100%;
  }

  .mitarbeiter-leiste__liste {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0;
    max-height: none;
    overflow: visible;
  }

  .mitarbeiter-leiste__umschalter {
    top: -12px;
    left: auto;
    right: 12px;
  }
}

/* --------------------------------------------------------------- Drucken */

@media print {
  .seitenleiste,
  .knopf,
  .seitenkopf__aktionen,
  .verlauf,
  .mitarbeiter-leiste,
  .vollbild-knopf {
    display: none !important;
  }

  .geruest {
    display: block;
    height: auto;
  }

  .buehne {
    overflow: visible;
    padding: 0;
  }

  .buehne--plan {
    padding: 0;
  }

  /* Auf Papier gibt es keinen Scrollbereich — alles untereinander ausgeben. */
  .buehne--plan,
  .wochenplan-layout,
  .wochenplan-haupt,
  .buehne--akte,
  .akte-layout,
  .akte-hauptbereich,
  .akte-panel,
  .inhalt {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .karte {
    box-shadow: none;
    break-inside: avoid;
  }

  .druckseite {
    break-after: page;
  }
}

/* ------------------------------------------------------------ Dokumente */

.dokument-anhaenge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.entwurf-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.entwurf-vorschau {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--linie-kraeftig);
  border-radius: 6px;
  background: #fff;
}

@media (max-width: 960px) {
  .entwurf-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------- Briefkopf-Designer */

/*
 * Sitzt in `.buehne--plan` (Entscheidung: derselbe Randabstand wie jede
 * andere Seite) — die Hoehe kommt darum vom Flex-Elternteil, nicht mehr aus
 * einer eigenen 100vh-Formel.
 */
.designer {
  display: grid;
  grid-template-columns: 210px 1fr 300px;
  gap: 16px;
  align-items: start;
  flex: 1;
  min-height: 0;
}

.designer__palette,
.designer__eigenschaften {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 12px;
  height: 100%;
  overflow-y: auto;
}

.designer__mitte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-width: 0;
}

.designer-palette__knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.designer-palette__knopf:hover:not(:disabled) {
  background: var(--flaeche-still);
  border-color: var(--linie);
}

.designer-palette__knopf:disabled {
  color: var(--text-still);
  cursor: not-allowed;
}

.designer-palette__glyph {
  width: 18px;
  text-align: center;
  color: var(--text-leise);
}

.designer__reiter,
.seiten-reiter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.reiter-knopf {
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-leise);
}

.reiter-knopf[aria-current="true"] {
  background: var(--akzent-leise);
  border-color: var(--akzent);
  color: var(--akzent-dunkel);
  font-weight: 600;
}

.designer__hinweise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.designer__hinweis {
  padding: 4px 8px;
  border: 1px solid var(--mittel);
  border-radius: 999px;
  background: var(--mittel-leise);
  color: var(--mittel);
  font-size: 12px;
  cursor: pointer;
}

.designer__blattrahmen {
  flex: 1;
  overflow: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
}

.designer__blatt {
  position: relative;
  width: 100%;
  background: #fff;
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}

.designer__textbereich {
  position: absolute;
  border: 1px dashed var(--linie-kraeftig);
  background: rgba(74, 93, 120, 0.03);
}

.designer__textbereich-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  color: var(--text-still);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.designer__element {
  position: absolute;
  border: 1px solid transparent;
  overflow: visible;
  cursor: move;
  min-height: 8px;
}

.designer__element:hover {
  border-color: var(--linie-kraeftig);
}

.designer__element--ausgewaehlt {
  border: 1px solid var(--akzent) !important;
  box-shadow: 0 0 0 1px var(--akzent);
  z-index: 5;
}

.designer__element--faltmarken {
  cursor: move;
}

.designer__faltmarke2 {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid #999;
}

.designer__marke {
  display: inline-block;
  padding: 2px 5px;
  border: 1px dashed var(--linie-kraeftig);
  border-radius: 4px;
  color: var(--text-still);
  font-size: 10px;
  white-space: nowrap;
}

.designer__griff {
  position: absolute;
  background: var(--akzent);
  opacity: 0;
}

.designer__element--ausgewaehlt .designer__griff,
.designer__textbereich:hover .designer__griff {
  opacity: 1;
}

.designer__griff--ecke {
  width: 9px;
  height: 9px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  cursor: nwse-resize;
}

.designer__griff--rechts {
  width: 6px;
  top: 0;
  bottom: 0;
  right: -3px;
  cursor: ew-resize;
}

.designer__griff--n,
.designer__griff--s {
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
}

.designer__griff--n {
  top: -3px;
}

.designer__griff--s {
  bottom: -3px;
}

.designer__griff--w,
.designer__griff--e {
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
}

.designer__griff--w {
  left: -3px;
}

.designer__griff--e {
  right: -3px;
}

/* ------------------------------------------------------------ Dashboard */

.dashboard-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.dashboard-raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kennzahl-kachel {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

.kennzahl-kachel:hover {
  border-color: var(--linie-kraeftig);
}

.kennzahl-kachel--aktiv {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent);
}

.kennzahl__wert--leer {
  color: var(--text-still);
}

.kennzahl__wert--gut {
  color: var(--gut);
}

.kennzahl__wert--mittel {
  color: var(--mittel);
}

.kennzahl__wert--schlecht {
  color: var(--schlecht);
}

.kennzahl-kachel__spark {
  margin: 6px 0 2px;
  line-height: 0;
}

.kennzahl__vergleich {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-leise);
}

.kennzahl__vergleich--klein {
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-still);
}

.kennzahl__vergleich--gut {
  color: var(--gut);
}

.kennzahl__vergleich--schlecht {
  color: var(--schlecht);
}

.karte--verlauf .karte__koerper {
  overflow-x: auto;
}

.diagramm {
  display: block;
  width: 100%;
}

.diagramm svg {
  display: block;
  width: 100%;
}

.sparkline {
  display: inline-flex;
}

.balkenliste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.balkenliste__name {
  flex: none;
  width: 130px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balkenliste__zeile .balken {
  flex: 1;
}

.balkenliste__wert {
  flex: none;
  width: 44px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Legende zum gestapelten Saeulendiagramm (serienBalken(), diagramme.js) —
   die Farbabstufungen allein reichen bei mehr als zwei Serien nicht zur
   Unterscheidung, die Legende macht die Zuordnung eindeutig. */
.diagramm-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--text-leise);
}

.diagramm-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.diagramm-legende__farbe {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.zu-erledigen-liste {
  display: flex;
  flex-direction: column;
  padding: 4px 0 10px;
}

.zu-erledigen-zeile {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 16px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
}

.zu-erledigen-zeile:hover {
  background: var(--flaeche-still);
}

.zu-erledigen-liste__weitere {
  padding: 4px 16px 2px;
}

.meine-schichten-liste {
  padding: 12px 16px;
}
/* --------------------------------------------------------------------------
 * Salon in 3D (Planning-Salon3D-2026-08-19)
 *
 * Die Seite fuellt den Inhaltsbereich ganz aus und scrollt nicht: gescrollt
 * wird im Raum mit der Kamera, nicht mit der Seite. Deshalb hebt `.salon3d`
 * das `overflow: auto` von `.inhalt > :last-child` wieder auf.
 * ------------------------------------------------------------------------ */

.salon3d {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.salon3d__laedt {
  margin: auto;
  color: var(--text-leise);
  font-size: 13px;
}

/*
 * Die Buehne hat keinen eigenen Grund mehr: Der Zeichner laeuft seit
 * 2026-08-20 mit `alpha`, der Raum steht also unmittelbar auf der Flaeche
 * der App (szene.js).
 */
.salon3d__buehne {
  position: relative;
  flex: 1;
  min-height: 0;
  background: transparent;
}

/*
 * Kein Schleier ueber dem Bild, sondern eine Maske: Die Leinwand selbst wird
 * nach links zum Menue hin durchsichtig und laeuft auch an den uebrigen
 * Raendern weich aus. Dadurch endet der Raum nirgends an einer Kante,
 * sondern loest sich in den Grund auf.
 */
.salon3d__leinwand {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* Wischen dreht die Kamera, statt die Seite zu ziehen */
  cursor: grab;
  mask-image:
    linear-gradient(to right, transparent 0, #000 150px),
    radial-gradient(125% 118% at 52% 46%, #000 58%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 150px),
    radial-gradient(125% 118% at 52% 46%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
}

/* Beschriftung beim Ueberfahren (Entscheidung 11) */
.salon3d__marke {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(28, 29, 31, 0.92);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-klein);
  font-size: 12.5px;
  box-shadow: var(--schatten);
  max-width: 240px;
}

.salon3d__marke .klein {
  color: #d8d2c8;
}

.salon3d__hinweis {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(28, 29, 31, 0.78);
  color: #f2ece2;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  pointer-events: none;
  max-width: calc(100% - 40px);
  text-align: center;
}

/* ------------------------------------------------------------- Einrichten */

.salon3d__einrichten {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  padding: 14px 20px 20px;
}

.salon3d > .stapel:not(:empty) {
  padding: 14px 20px 0;
}

.salon3d__leiste-huelle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.salon3d__leiste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.salon3d__leiste-knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: grab;
  text-align: left;
  touch-action: none;
}

.salon3d__leiste-knopf:hover:not(:disabled) {
  border-color: var(--linie-kraeftig);
  background: var(--flaeche-still);
}

.salon3d__leiste-knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.salon3d__leiste-zeichen {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  flex: none;
}

.salon3d__leiste-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon3d__plan-huelle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.salon3d__plan {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  touch-action: none;
  cursor: crosshair;
}

.salon3d__plan:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.salon3d__werkzeuge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.salon3d__masse-felder {
  display: flex;
  gap: 10px;
}

.salon3d__massfeld {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.salon3d__massfeld input {
  width: 68px;
  padding: 3px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: 12.5px;
}

.salon3d__auswahl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.salon3d__masse {
  display: flex;
  justify-content: flex-end;
}

/* Tablet am Empfang: Leiste wandert nach oben, Knoepfe werden groesser. */
@media (max-width: 860px) {
  .salon3d__einrichten {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 12px;
  }

  .salon3d__leiste {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .salon3d__leiste-knopf {
    padding: 8px 10px;
  }

  .salon3d__leiste-text {
    display: none;
  }
}

/* ------------------------------------------------------ Bewegung sparsam */

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die
 * Uebergaenge der Schale (Navigation, Benutzerkarte, aufklappendes Menue)
 * ohne Animation — die Zustaende selbst bleiben unveraendert.
 */
@media (prefers-reduced-motion: reduce) {
  .nav-knopf,
  .nav-symbol,
  .benutzer__knopf,
  .schiene__nur-offen,
  .seitenleiste {
    transition: none;
  }
}

/* --------------------------------------------------------------- Farbstamm */

/* Kleiner Farbkreis, der den hinterlegten Farbwert eines Tons zeigt (Planning-Kundenverwaltung-2026-08-21, F21). */
.farbchip {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  flex: none;
  vertical-align: middle;
}

/* Verschachtelte Ebenen Hersteller -> Serie im Farbstamm — Einzug statt eigener Karten je Ebene. */
.farbstamm-ebene {
  border-left: 2px solid var(--linie);
  padding-left: 16px;
  margin-left: 4px;
}

/* ------------------------------------------------------------------ Kasse */

/* Drei Spalten ohne Seiten-Scroll (Planning-Kasse-2026-08-21, „Kassenpad"):
   jede Spalte scrollt fuer sich, wie .wochenplan-layout im Schichtplan. */
.kassenpad {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 24px 44px var(--dock-freiraum);
}

.kassenpad__spalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kassenpad__spalte--vorgaenge { flex: 0 0 260px; }
.kassenpad__spalte--positionen { flex: 1 1 auto; }
.kassenpad__spalte--katalog { flex: 0 0 340px; }

.kassenpad__karte {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.kassenpad__liste {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 8px;
}

.kassenpad__summe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  border-top: 1px solid var(--linie);
}

/* Kachel eines geparkten Vorgangs oder einer wartenden Behandlung. */
.vorgang-kachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  padding: 10px 12px;
  text-align: left;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.vorgang-kachel:hover {
  border-color: var(--linie-kraeftig);
}

.vorgang-kachel--aktiv {
  border-color: var(--akzent);
  background: var(--akzent-leise);
}

.vorgang-kachel__titel {
  font-weight: 600;
  font-size: 13px;
}

.vorgang-kachel__untertitel {
  font-size: 12px;
  color: var(--text-leise);
}

/* Katalogkacheln, nach Kategorie gruppiert. */
.kachel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 0 16px 16px;
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 64px;
  padding: 10px;
  text-align: left;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.kachel:hover {
  border-color: var(--akzent);
  box-shadow: var(--schatten);
}

.kachel__kuerzel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-still);
}

.kachel__name {
  font-size: 12.5px;
  line-height: 1.3;
}

/* Bon-Vorschau: Thermobon als Monospace-Text (Entscheidung 23 — PoC statt Druckertreiber). */
.bon-vorschau {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 16px;
  overflow-x: auto;
}

.bon-vorschau__qr {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 48px;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}

/* Bonlayout-Editor: eine Zeile je Kopf-/Fusszeile mit Auf/Ab-Knoepfen (Entscheidung 17). */
.bonzeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  background: var(--flaeche-still);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}

/* Zaehlprotokoll des Tagesabschlusses: ein Feld je Nennwert. */
.stueckelung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

/* Fußkarte (Planning-Podologie-2026-08-30, F9): Umriss links, Markierungsliste
   rechts; auf schmalen Bildschirmen untereinander. Die Zonen-Kreise sind Teil
   des per innerHTML eingesetzten SVG (shared/ui/symbole.js-Muster) und werden
   hier rein visuell behandelt — Klick-Handler haengt fusskarteAbschnitt.js an. */
.fusskarte-layout {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: 24px;
  align-items: start;
}

.fusskarte-bild {
  color: var(--text);
  background: var(--flaeche-still);
  border-radius: var(--radius-klein);
  padding: 12px;
}

.fusskarte-bild svg {
  display: block;
  width: 100%;
  height: auto;
}

.fusskarte-zone {
  cursor: pointer;
  transition: fill 0.15s ease;
}

.fusskarte-zone:hover {
  fill: var(--flaeche-schwebend);
  stroke: var(--akzent);
  stroke-width: 1.5;
}

@media (max-width: 720px) {
  .fusskarte-layout {
    grid-template-columns: 1fr;
  }
}