/* ============================================================================
   Schichtplanung — Oberfläche nach dem Homer Design System (v3.3.1).
   Die Zeichenvorräte (--ins-*) sind wortgleich aus dem Theme übernommen,
   siehe /Volumes/WEBStorage/Themes/Homer Design System/tokens/*.css.
   Merksätze des Systems: 13px Grundschrift, Grün ist die Primärfarbe,
   "Erfolg" ist Blau, Radien sind eng (0.2rem), Karten sind flach und
   von innen nach außen gebaut. Der Rahmen folgt den übrigen twinsmania-
   Werkzeugen: dunkle Symbolleiste, Kontextspalte, Detailspalte.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, damit die PWA offline trägt) ------- */

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('schriften/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('schriften/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben ------------------------------------------------------- */

:root {
  --ins-white: #fff;
  --ins-gray-100: #f6f7fb;
  --ins-gray-200: #eef2f7;
  --ins-gray-300: #e7e9eb;
  --ins-gray-400: #ced4da;
  --ins-gray-500: #a1a9b1;
  --ins-gray-600: #8a969c;
  --ins-gray-700: #6c757d;
  --ins-gray-800: #34495e;
  --ins-gray-900: #313a46;

  --ins-blue: #3498db;
  --ins-purple: #9b59b6;
  --ins-pink: #dd6c92;
  --ins-red: #e74c3c;
  --ins-orange: #e67e22;
  --ins-yellow: #ffb606;
  --ins-green: #62cb31;
  --ins-cyan: #23c6c8;

  /* Rollen der Standardhaut: Primär ist Grün, Erfolg ist Blau. */
  --ins-primary: #62cb31;
  --ins-secondary: #9b59b6;
  --ins-success: #3498db;
  --ins-info: #23c6c8;
  --ins-warning: #ffb606;
  --ins-danger: #e74c3c;
  --ins-light: #eef2f7;
  --ins-dark: #34495e;

  --ins-primary-rgb: 98, 203, 49;
  --ins-secondary-rgb: 155, 89, 182;
  --ins-success-rgb: 52, 152, 219;
  --ins-info-rgb: 35, 198, 200;
  --ins-warning-rgb: 255, 182, 6;
  --ins-danger-rgb: 231, 76, 60;
  --ins-light-rgb: 238, 242, 247;
  --ins-dark-rgb: 52, 73, 94;
  --ins-black-rgb: 0, 0, 0;

  /* Hover- und Aktivfüllung: 15 % abgedunkelt. */
  --ins-primary-text-emphasis: #53ad2a;
  --ins-secondary-text-emphasis: #844c9b;
  --ins-success-text-emphasis: #2c81ba;
  --ins-info-text-emphasis: #1ea8aa;
  --ins-warning-text-emphasis: #d99b05;
  --ins-danger-text-emphasis: #c44133;
  --ins-dark-text-emphasis: #34495e;

  /* Weiche Füllungen: 85 % aufgehellt. */
  --ins-primary-bg-subtle: #e7f7e0;
  --ins-secondary-bg-subtle: #f0e6f4;
  --ins-success-bg-subtle: #e1f0fa;
  --ins-info-bg-subtle: #def6f7;
  --ins-warning-bg-subtle: #fff4da;
  --ins-danger-bg-subtle: #fbe4e2;
  --ins-light-bg-subtle: #fbfbfd;
  --ins-dark-bg-subtle: #ced4da;

  /* Weiche Ränder: 60 % aufgehellt. */
  --ins-primary-border-subtle: #c0eaad;
  --ins-secondary-border-subtle: #d7bde2;
  --ins-success-border-subtle: #aed6f1;
  --ins-info-border-subtle: #a7e8e9;
  --ins-warning-border-subtle: #ffe29b;
  --ins-danger-border-subtle: #f5b7b1;
  --ins-dark-border-subtle: #a1a9b1;

  --ins-chart-primary: #62cb31;
  --ins-chart-secondary: #88d965;
  --ins-chart-gray: #e9eaeb;
  --ins-chart-border-color: #ecf4fc;
}

/* ---------- Flächen und Text --------------------------------------------- */

:root {
  --ins-body-color: #6a6c6f;
  --ins-body-color-rgb: 106, 108, 111;
  --ins-body-bg: #f1f3f6;
  --ins-secondary-color: #9a9ea5;   /* gedämpfter Text */
  --ins-secondary-bg: #fff;         /* Kartenfläche */
  --ins-tertiary-bg: #f6f7fb;       /* Hover-Fläche */
  --ins-emphasis-color: rgba(106, 108, 111, .75);
  --ins-link-color: #62cb31;
  --ins-link-hover-color: #53ad2a;
  --ins-highlight-bg: #fff0cd;
  --ins-border-color: #e7e9eb;
  --ins-border-color-translucent: #eef2f7;
}

/* ---------- Schrift, Maße, Ränder ---------------------------------------- */

:root {
  --ins-font-sans-serif: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ins-body-font-size: .8125rem;   /* 13px */
  --ins-body-line-height: 1.5;

  --ins-font-size-xxs: 11px;
  --ins-font-size-xs: 12px;
  --ins-font-size-sm: 14px;
  --ins-font-size-md: 15px;
  --ins-font-size-lg: 16px;
  --ins-font-size-xl: 18px;

  --ins-h1-font-size: 2.03125rem;   /* 32.5px */
  --ins-h2-font-size: 1.69rem;      /* 27.04px */
  --ins-h3-font-size: 1.39285rem;   /* 22.29px */
  --ins-h4-font-size: 1.015625rem;  /* 16.25px */
  --ins-h5-font-size: .845rem;      /* 13.52px */
  --ins-h6-font-size: .690625rem;   /* 11.05px */

  --ins-spacer-1: .3125rem;   /*  5px */
  --ins-spacer-2: .625rem;    /* 10px */
  --ins-spacer-3: 1.25rem;    /* 20px */
  --ins-spacer-4: 1.875rem;   /* 30px */
  --ins-spacer-5: 3.75rem;    /* 60px */

  --ins-btn-padding-y: .4532rem;
  --ins-btn-padding-x: 1.1rem;
  --ins-btn-padding-y-sm: .3125rem;
  --ins-btn-padding-x-sm: .7rem;
  --ins-input-padding-y: .4532rem;
  --ins-input-padding-x: .77rem;
  --ins-card-spacer-y: .9375rem;
  --ins-card-spacer-x: 1.0625rem;
  --ins-card-cap-padding-y: .703125rem;
  --ins-table-cell-padding-y: .75rem;
  --ins-table-cell-padding-x: .6rem;

  --ins-border-radius: .2rem;       /* 3.2px – die Arbeitsgröße */
  --ins-border-radius-sm: .15rem;
  --ins-border-radius-lg: .4rem;
  --ins-border-radius-pill: 50rem;

  --ins-box-shadow: 0 1px 4px 0 rgba(130, 143, 163, .15);
  --ins-box-shadow-inset: inset 0 1px 2px rgba(var(--ins-body-color-rgb), .075);

  --ins-transition-base: all .25s ease-in-out;
  --ins-transition-btn: color .15s ease-in-out, background-color .15s ease-in-out,
                        border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* ---------- Rahmenmaße ---------------------------------------------------
   Links die dunkle Symbolleiste, daneben die weisse Kontextspalte und – wo
   eine Seite etwas zur Auswahl hat – die graue Detailspalte. */

:root {
  --ins-leiste-width: 80px;
  --ins-kontext-width: 230px;
  --ins-detail-width: 290px;
  --ins-kopfzeile-height: 52px;

  --ins-leiste-bg: #34495e;
  --ins-leiste-item-color: rgba(255, 255, 255, .68);
  --ins-leiste-item-hover-color: #fff;
  --ins-leiste-item-active-bg: rgba(255, 255, 255, .1);

  --ins-sidenav-item-padding-x: 20px;
  --ins-sidenav-item-padding-y: 14px;
  --ins-sidenav-bg: #fff;
  --ins-sidenav-border-color: #e7e9eb;
  --ins-sidenav-item-color: #63666a;
  --ins-sidenav-item-hover-color: #23303c;
  --ins-sidenav-item-active-color: #23303c;
  --ins-sidenav-item-active-bg: #f7f9fa;
  --ins-sidenav-item-border-color: #eef0f2;

  --ins-detail-bg: #f7f9fa;

  /* Oberkante für alles, was im Inhalt haftet: am schmalen Bildschirm liegt die Kopfzeile darüber. */
  --ins-haftkante: 0px;
}

/* ---------- Dunkle Fassung ------------------------------------------------
   Homer führt ein vollständiges Gegenstück unter [data-bs-theme="dark"].
   Wir übernehmen es und schalten zusätzlich automatisch um, solange am
   Dokument nicht ausdrücklich „light" steht. */

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --ins-body-color: #aab8c5;
    --ins-body-color-rgb: 170, 184, 197;
    --ins-body-bg: #17181e;
    --ins-secondary-color: #8391a2;
    --ins-secondary-bg: #1e1f27;
    --ins-tertiary-bg: #272832;
    --ins-emphasis-color: #b0bbc5;
    --ins-link-color: #a1e083;
    --ins-link-hover-color: #afe596;
    --ins-border-color: #293036;
    --ins-border-color-translucent: #242a2f;
    --ins-light: #252630;
    --ins-light-rgb: 37, 38, 48;
    --ins-light-bg-subtle: #23242e;
    --ins-dark: #4b4d5c;
    --ins-dark-rgb: 75, 77, 92;
    --ins-dark-border-subtle: #4b4d5c;
    --ins-gray-200: #2a2b35;
    --ins-gray-300: #293036;
    --ins-gray-400: #3d4450;
    --ins-gray-800: #dfe6ee;
    --ins-box-shadow: 0 0 30px rgba(0, 0, 0, .3);

    --ins-primary-bg-subtle: rgba(98, 203, 49, .2);
    --ins-secondary-bg-subtle: rgba(155, 89, 182, .2);
    --ins-success-bg-subtle: rgba(52, 152, 219, .2);
    --ins-info-bg-subtle: rgba(35, 198, 200, .2);
    --ins-warning-bg-subtle: rgba(255, 182, 6, .2);
    --ins-danger-bg-subtle: rgba(231, 76, 60, .2);

    --ins-primary-text-emphasis: #a1e083;
    --ins-success-text-emphasis: #7fc4ea;
    --ins-info-text-emphasis: #6fdedf;
    --ins-warning-text-emphasis: #ffd166;
    --ins-danger-text-emphasis: #f0938a;

    --ins-leiste-bg: #12131a;
    --ins-sidenav-bg: #1c1d28;
    --ins-sidenav-border-color: #262734;
    --ins-sidenav-item-color: #8391a2;
    --ins-sidenav-item-hover-color: #bccee4;
    --ins-sidenav-item-active-color: #dfe6ee;
    --ins-sidenav-item-active-bg: #22242f;
    --ins-sidenav-item-border-color: #262734;
    --ins-detail-bg: #191a23;
  }

  :root:not([data-bs-theme="light"]) .tagspalte.wochenende { background: #22232d; }
  :root:not([data-bs-theme="light"]) .datumskachel { background: #2a2b35; color: var(--ins-gray-800); }
  :root:not([data-bs-theme="light"]) .knopf.zweit { color: #cbd5e1; border-color: rgba(255, 255, 255, .12); }
}

/* ---------- Grundlage ---------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--ins-font-sans-serif);
  font-size: var(--ins-body-font-size);
  font-weight: 400;
  line-height: var(--ins-body-line-height);
  color: var(--ins-body-color);
  background: var(--ins-body-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.5; }
h1 { font-size: var(--ins-h1-font-size); }
h2 { font-size: var(--ins-h2-font-size); }
h3 { font-size: var(--ins-h3-font-size); }
h4 { font-size: var(--ins-h4-font-size); }
h5 { font-size: var(--ins-h5-font-size); }
h6 { font-size: var(--ins-h6-font-size); }

p { margin: 0 0 .5rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ins-link-color); text-decoration: none; }
a:hover { color: var(--ins-link-hover-color); }

small { font-size: .75em; }
hr { border: 0; border-top: 1px solid var(--ins-border-color); margin: var(--ins-spacer-3) 0; }

::selection { background: var(--ins-highlight-bg); }

.symbol { flex: 0 0 auto; vertical-align: middle; }

/* Sichtbarer Tastaturfokus. Homer schaltet den Fokusring ab; für eine App,
   die Aushilfen am Handy und am Rechner bedienen, ist das zu wenig. */
:focus-visible {
  outline: 2px solid rgba(var(--ins-primary-rgb), .6);
  outline-offset: 1px;
}

/* ============================================================================
   Anwendungsrahmen: Symbolleiste, Kontextspalte, Detailspalte
   Alle drei Spalten stehen fest neben dem Inhalt (sticky, volle Höhe) und
   rollen bei Bedarf in sich; gerollt wird sonst die Seite. Deshalb haftet
   im Inhalt alles mit top: 0.
   ========================================================================== */

.anwendung { display: flex; align-items: flex-start; min-height: 100vh; }

.leiste, .kontextspalte, .detailspalte {
  position: sticky;
  top: 0;
  flex: none;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Symbolleiste -------------------------------------------------------- */

.leiste {
  width: var(--ins-leiste-width);
  display: flex;
  flex-direction: column;
  background: var(--ins-leiste-bg);
  z-index: 1002;
  scrollbar-width: none;
}

.leistenmarke {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 14px auto 16px;
  border-radius: var(--ins-border-radius-lg);
  background: var(--ins-primary);
  color: #fff;
  font-size: var(--ins-font-size-md);
  font-weight: 700;
  letter-spacing: -.02em;
}
.leistenmarke:hover { color: #fff; background: var(--ins-primary-text-emphasis); }
.leistenmarke.klein { width: 30px; height: 30px; margin: 0; font-size: var(--ins-font-size-xs); }

.leistenliste { display: flex; flex-direction: column; gap: 2px; }
.leistenfuss { margin-top: auto; padding: 16px 0 10px; display: flex; flex-direction: column; gap: 2px; }

.leistenpunkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 0 5px;
  padding: 10px 0 9px;
  border: 0;
  border-radius: var(--ins-border-radius-lg);
  background: transparent;
  color: var(--ins-leiste-item-color);
  font: inherit;
  font-size: var(--ins-font-size-xxs);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.leistenpunkt:hover { color: var(--ins-leiste-item-hover-color); }
.leistenpunkt.aktiv { color: #fff; background: var(--ins-leiste-item-active-bg); }
.leistenpunkt > span { max-width: 100%; overflow-wrap: anywhere; }
.leistenfuss .leistenpunkt { padding: 7px 0; }
.leistenfuss .leistenpunkt.person { padding: 9px 0; }

.leistenavatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: var(--ins-font-size-xs);
  font-weight: 600;
}
.leistenpunkt.aktiv .leistenavatar { border-color: var(--ins-primary); }
.nurschublade { display: none; }
.leistenpunkt > .nurschublade { display: none; }

/* --- Kontextspalte ------------------------------------------------------- */

.kontextspalte {
  width: var(--ins-kontext-width);
  background: var(--ins-sidenav-bg);
  border-right: 1px solid var(--ins-sidenav-border-color);
  z-index: 3;
}

.kontextzurueck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px var(--ins-sidenav-item-padding-x);
  border-bottom: 1px solid var(--ins-sidenav-item-border-color);
  font-weight: 500;
}

.kontextkopf { padding: 18px var(--ins-sidenav-item-padding-x) 16px; }
.kontexttitel { font-weight: 600; color: var(--ins-sidenav-item-active-color); line-height: 1.35; }
.kontextunter { margin-top: 2px; font-size: var(--ins-font-size-xs); color: var(--ins-secondary-color); }

/* Der Marktname ist zugleich die Marktwahl: sieht aus wie ein Titel, klappt auf wie eine Liste. */
select.kontextwahl {
  width: 100%;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a9b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") right center / 14px no-repeat;
  font: inherit;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ins-sidenav-item-active-color);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
select.kontextwahl:hover { color: var(--ins-primary-text-emphasis); }

.kontextliste { display: flex; flex-direction: column; border-bottom: 1px solid var(--ins-sidenav-item-border-color); }

.kontextpunkt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--ins-sidenav-item-padding-y) var(--ins-sidenav-item-padding-x);
  border-top: 1px solid var(--ins-sidenav-item-border-color);
  font-size: var(--ins-font-size-xs);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ins-sidenav-item-color);
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.kontextpunkt:hover { color: var(--ins-sidenav-item-hover-color); background: var(--ins-sidenav-item-active-bg); }
.kontextpunkt.aktiv {
  color: var(--ins-sidenav-item-active-color);
  background: var(--ins-sidenav-item-active-bg);
  box-shadow: inset 3px 0 0 var(--ins-primary);
}
.kontextpunkt .zahl { margin-left: auto; font-size: var(--ins-font-size-xxs); color: var(--ins-secondary-color); }

/* Unterpunkte des aktiven Punktes (z. B. die Wochen eines Markts). */
.kontextfach:empty { display: none; }
.kontextfach { padding: 4px 0 8px; border-top: 1px solid var(--ins-sidenav-item-border-color); }
.fachtitel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--ins-sidenav-item-padding-x) 4px 48px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ins-secondary-color);
}
.fachpunkt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px var(--ins-sidenav-item-padding-x) 8px 48px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ins-sidenav-item-color);
  cursor: pointer;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.fachpunkt:hover { color: var(--ins-sidenav-item-hover-color); background: var(--ins-sidenav-item-active-bg); }
.fachpunkt.aktiv {
  color: var(--ins-sidenav-item-active-color);
  background: var(--ins-sidenav-item-active-bg);
  box-shadow: inset 3px 0 0 var(--ins-primary);
}
.fachpunkt .zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fachpunkt .name { font-weight: 500; }
.fachpunkt.aktiv .name { font-weight: 600; }
.fachpunkt .neben { font-size: var(--ins-font-size-xxs); color: var(--ins-secondary-color); font-variant-numeric: tabular-nums; }
.fachpunkt .balken { height: 3px; }

/* --- Detailspalte: Platzhalter für das Gewählte --------------------------- */

.detailspalte {
  width: var(--ins-detail-width);
  background: var(--ins-detail-bg);
  border-right: 1px solid var(--ins-sidenav-border-color);
  z-index: 2;
}

/* --- Einklappen: kommt rechts eine Spalte dazu, wird die davor schmal ------
   Gesteuert von app.js (kontextLage): .mit-kontext, sobald es eine Kontextspalte
   gibt, .kontext-zu, solange in der Detailspalte etwas gewählt ist. Nur am
   breiten Bildschirm – darunter sind es Schublade und Reiter. */

.kontextschalter { display: none; }

@media (min-width: 992px) {
  .leiste, .kontextspalte { transition: width .2s ease-in-out; }

  /* Symbolleiste neben einer Kontextspalte: nur Symbole, der Name steht im Tooltip. */
  .anwendung.mit-kontext .leiste { width: 60px; }
  .anwendung.mit-kontext .leistenpunkt > span:not(.leistenavatar) { display: none; }
  .anwendung.mit-kontext .leistenpunkt { padding: 11px 0; }
  .anwendung.mit-kontext .leistenfuss .leistenpunkt { padding: 8px 0; }

  /* Der Pfeil oben rechts in der Kontextspalte klappt sie von Hand. */
  .kontextschalter {
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ins-sidenav-item-border-color);
    border-radius: var(--ins-border-radius);
    background: var(--ins-sidenav-bg);
    color: var(--ins-secondary-color);
    cursor: pointer;
  }
  .kontextschalter:hover { color: var(--ins-sidenav-item-hover-color); background: var(--ins-sidenav-item-active-bg); }
  .kontextschalter + .kontextzurueck, .kontextschalter + .kontextkopf { padding-right: 44px; }

  /* Eingeklappt: eine schmale Schiene mit den Symbolen der Seiten. */
  .anwendung.kontext-zu .kontextspalte { width: 56px; }
  .anwendung.kontext-zu .kontextschalter { position: static; display: flex; margin: 10px auto 6px; }
  .anwendung.kontext-zu .kontextzurueck { justify-content: center; padding: 12px 0; }
  .anwendung.kontext-zu .kontextzurueck > span,
  .anwendung.kontext-zu .kontextkopf,
  .anwendung.kontext-zu .kontextfach,
  .anwendung.kontext-zu .kontextpunkt > span { display: none; }
  .anwendung.kontext-zu .kontextpunkt { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* --- Inhaltsspalte ------------------------------------------------------- */

.inhaltsseite { flex: 1 1 auto; min-width: 0; min-height: 100vh; padding: 0 20px; }
@media (min-width: 1600px) { .inhaltsseite { padding: 0 30px; } }

#inhalt { padding-bottom: var(--ins-spacer-3); }

.kopfzeile, .navschatten { display: none; }

/* --- Schmale Geräte: Kopfzeile, Leiste als Schublade ---------------------- */

@media (max-width: 991.98px) {
  :root { --ins-haftkante: var(--ins-kopfzeile-height); }
  .kopfzeile {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--ins-kopfzeile-height);
    padding: 0 12px 0 6px;
    background: var(--ins-leiste-bg);
    color: #fff;
  }
  .kopfzeile .navschalter {
    display: inline-flex;
    padding: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .kopfzeile .kopftitel { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kopfzeile .leistenavatar:hover { color: #fff; border-color: #fff; }

  .anwendung { display: block; min-height: 0; }
  .leiste {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    height: auto;
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
    box-shadow: var(--ins-box-shadow);
  }
  body.nav-offen .leiste { transform: none; }
  body.nav-offen .navschatten {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(var(--ins-body-color-rgb), .5);
    z-index: 1001;
  }
  .leiste .leistenmarke { margin: 14px 20px 14px; }
  .leistenpunkt {
    flex-direction: row;
    gap: 14px;
    margin: 0 10px;
    padding: 11px 12px;
    font-size: var(--ins-font-size-sm);
    text-align: left;
  }
  .leistenfuss .leistenpunkt, .leistenfuss .leistenpunkt.person { padding: 9px 12px; }
  .leistenpunkt .leistenavatar { width: 26px; height: 26px; font-size: var(--ins-font-size-xxs); }
  .nurschublade, .leistenpunkt > .nurschublade { display: inline; }
  .leistenpunkt > .nurleiste { display: none; }

  /* Die Kontextspalte wird zur Reiterleiste über dem Inhalt. */
  .kontextspalte, .detailspalte {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--ins-sidenav-border-color);
  }
  .kontextzurueck { padding: 10px 12px; }
  .kontextkopf { padding: 10px 12px 8px; }
  .kontextliste { flex-direction: row; flex-wrap: wrap; border-bottom: 0; }
  .kontextpunkt {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 8px;
    border-top: 1px solid var(--ins-sidenav-item-border-color);
    font-size: var(--ins-font-size-xxs);
  }
  .kontextpunkt .symbol { display: none; }
  .kontextpunkt.aktiv { box-shadow: inset 0 -3px 0 var(--ins-primary); }
  .kontextfach { flex: 0 0 100%; order: 2; display: flex; overflow-x: auto; padding: 0; }
  .kontextfach .fachtitel { display: none; }
  .fachpunkt { flex: 0 0 auto; width: auto; min-width: 9rem; padding: 8px 12px; border-right: 1px solid var(--ins-sidenav-item-border-color); }
  .fachpunkt.aktiv { box-shadow: inset 0 -3px 0 var(--ins-primary); }

  .detailspalte .platzhalter { display: none; }
  .detailspalte:has(> .platzhalter:only-child) { display: none; }

  .inhaltsseite { min-height: 0; padding: 0 10px; }
}

/* ============================================================================
   Seitenkopf
   ========================================================================== */

.seitenkopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ins-spacer-3);
  min-height: 40px;
  margin: var(--ins-spacer-3) 0;
  padding: var(--ins-spacer-3);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}
.seitenkopf .titel h1 {
  margin: 0;
  font-size: var(--ins-font-size-xl);
  font-weight: 500;
  color: var(--ins-gray-800);
}
.seitenkopf .titel p { margin: 2px 0 0; font-size: var(--ins-font-size-xs); color: var(--ins-secondary-color); }
.seitenkopf .aktionen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seitenkopf .aktionen > .knopf { padding: var(--ins-btn-padding-y-sm) var(--ins-btn-padding-x-sm); font-size: var(--ins-font-size-xs); }
.seitenkopf .aktionen > select { width: auto; padding-top: var(--ins-btn-padding-y-sm); padding-bottom: var(--ins-btn-padding-y-sm); font-size: var(--ins-font-size-xs); }

.brotkrume { margin-left: auto; color: var(--ins-secondary-color); }
.brotkrume span + span::before { content: '›'; margin: 0 8px; }

/* ============================================================================
   Karten — flach, der Rahmen gehört der ganzen Karte: Kopf (Überschrift,
   Bemerkung, Aktionen), Körper und Fuss liegen alle innerhalb von Rand,
   Fläche und Radius. Der Kopf ist durch eine Linie vom Körper getrennt,
   der Fuss setzt sich auf hellem Grund ab. Kein Schatten.
   ========================================================================== */

.karte {
  margin-bottom: var(--ins-spacer-3);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}

/* Die Kinder tragen die Rundung der Ecken selbst (Rahmen 1px → innen ein Pixel weniger). */
.karte > :first-child {
  border-top-left-radius: calc(var(--ins-border-radius) - 1px);
  border-top-right-radius: calc(var(--ins-border-radius) - 1px);
}
.karte > :last-child {
  border-bottom-left-radius: calc(var(--ins-border-radius) - 1px);
  border-bottom-right-radius: calc(var(--ins-border-radius) - 1px);
}

/* Überschrift und Bemerkung stehen links übereinander, die Aktionen rechts. */
.karte > .kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ins-spacer-3);
  padding: var(--ins-card-cap-padding-y) var(--ins-card-spacer-x);
  border-bottom: 1px solid var(--ins-border-color);
}
.karte > .kopf h2,
.karte > .kopf h3 {
  grid-column: 1;
  margin: 0;
  font-size: var(--ins-h5-font-size);
  font-weight: 600;
  color: var(--ins-gray-800);
}
.karte > .kopf p {
  grid-column: 1;
  margin: 2px 0 0;
  color: var(--ins-secondary-color);
}
.karte > .kopf .aktionen {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ins-spacer-2);
}

.karte > .koerper { padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x); }
.karte > .koerper.blank { padding: 0; overflow: hidden; }

.karte > .fuss {
  padding: var(--ins-card-cap-padding-y) var(--ins-card-spacer-x);
  background: var(--ins-light-bg-subtle);
  border-top: 1px solid var(--ins-border-color);
  color: var(--ins-secondary-color);
  text-align: center;
}
.karte > .fuss.links { text-align: left; }

/* Farbig angeschnittene Karte (Homer: .card-bordered) */
.karte.angeschnitten { border-left: 3px solid var(--ins-primary); }
.karte.angeschnitten.warnung { border-left-color: var(--ins-warning); }
.karte.angeschnitten.gefahr { border-left-color: var(--ins-danger); }

/* ============================================================================
   Kennzahlen — große dünne Ziffer über winziger Versalzeile
   ========================================================================== */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--ins-spacer-3);
  padding: 6px 0;
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}

/* Ein Band statt einzelner Karten: Versalzeile, dünne Ziffer, gedämpfte Zeile darunter. */
.kennzahl { display: flex; flex-direction: column; min-width: 0; }
.kennzahl > .koerper { padding: 12px 20px 2px; flex: 1 1 auto; }
.kennzahl > .fuss { padding: 0 20px 12px; color: var(--ins-secondary-color); font-size: var(--ins-font-size-xs); }
.kennzahl > .koerper:last-child { padding-bottom: 12px; }
.kennzahl .titel {
  margin-bottom: 4px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ins-secondary-color);
}
.kennzahl .wert {
  font-size: var(--ins-h3-font-size);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
}
.kennzahl .zusatz { font-size: var(--ins-font-size-xs); }
.kennzahl .zusatz { margin-top: 2px; color: var(--ins-secondary-color); }
.kennzahl .zusatz.hoch { color: var(--ins-success); }
.kennzahl .zusatz.runter { color: var(--ins-warning); }

/* ============================================================================
   Gitter
   ========================================================================== */

.gitter { display: grid; gap: var(--ins-spacer-3); grid-template-columns: minmax(0, 1fr); }
/* Profilseite: immer höchstens zwei Spalten; `breit` nimmt die ganze Zeile. */
@media (min-width: 900px) { .gitter.profil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gitter.profil > .breit { grid-column: 1 / -1; }
.gitter.profil > .breit > .dokumentbereich { margin-bottom: 0; }
/* Feste Stufen statt auto-fit: sonst stehen auf einem grossen Schirm sechs
   Formularkarten nebeneinander und keine ist mehr lesbar breit. */
@media (min-width: 900px) { .gitter.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .gitter.zwei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .gitter.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gitter.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reihe { display: flex; flex-wrap: wrap; gap: var(--ins-spacer-2); align-items: center; }
.reihe.eng { gap: var(--ins-spacer-1); }
.reihe.unten { align-items: flex-end; }
/* Beginn – Ende einer Ist-Zeit: nebeneinander, solange Platz ist; am Handy untereinander. */
@media (min-width: 768px) { .reihe.zeitspanne { flex-wrap: nowrap; } }
.reihe .rechts { margin-left: auto; }

/* ============================================================================
   Knöpfe
   ========================================================================== */

.knopf, button.knopf, a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ins-btn-padding-y) var(--ins-btn-padding-x);
  font-family: inherit;
  font-size: var(--ins-body-font-size);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--ins-border-radius);
  background: transparent;
  color: var(--ins-body-color);
  cursor: pointer;
  transition: var(--ins-transition-btn);
  user-select: none;
}
.knopf:disabled, .knopf[disabled] { opacity: .65; cursor: not-allowed; }
.knopf:active:not(:disabled) { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }

.knopf.primaer { background: var(--ins-primary); border-color: var(--ins-primary); color: #fff; }
.knopf.primaer:hover:not(:disabled) { background: var(--ins-primary-text-emphasis); border-color: var(--ins-primary-text-emphasis); }

.knopf.zweit, .knopf.standard {
  color: var(--ins-dark);
  border-color: rgba(var(--ins-dark-rgb), .1);
  background: var(--ins-secondary-bg);
}
.knopf.zweit:hover:not(:disabled), .knopf.standard:hover:not(:disabled) {
  border-color: rgba(var(--ins-dark-rgb), .3);
  background: rgba(var(--ins-dark-rgb), .02);
}

.knopf.gefahr { background: var(--ins-danger); border-color: var(--ins-danger); color: #fff; }
.knopf.gefahr:hover:not(:disabled) { background: var(--ins-danger-text-emphasis); border-color: var(--ins-danger-text-emphasis); }

.knopf.dunkel { background: var(--ins-dark); border-color: var(--ins-dark); color: #fff; }
.knopf.dunkel:hover:not(:disabled) { background: #2b3c4e; border-color: #2b3c4e; }

/* Weiche Knöpfe: zarte Füllung, beim Überfahren volle Farbe. */
.knopf.weich { background: var(--ins-primary-bg-subtle); color: var(--ins-primary); }
.knopf.weich:hover:not(:disabled) { background: var(--ins-primary); color: #fff; }
.knopf.weich.erfolg { background: var(--ins-success-bg-subtle); color: var(--ins-success); }
.knopf.weich.erfolg:hover:not(:disabled) { background: var(--ins-success); color: #fff; }
.knopf.weich.warnung { background: var(--ins-warning-bg-subtle); color: var(--ins-warning); }
.knopf.weich.warnung:hover:not(:disabled) { background: var(--ins-warning); color: #fff; }
.knopf.weich.gefahr { background: var(--ins-danger-bg-subtle); color: var(--ins-danger); }
.knopf.weich.gefahr:hover:not(:disabled) { background: var(--ins-danger); color: #fff; }

.knopf.geist { color: var(--ins-body-color); }
.knopf.geist:hover:not(:disabled) { background: var(--ins-tertiary-bg); }

.knopf.klein { padding: var(--ins-btn-padding-y-sm) var(--ins-btn-padding-x-sm); }
.knopf.voll { width: 100%; }

.knopf.symbolknopf {
  padding: 0;
  width: calc(var(--ins-btn-padding-y) * 2 + 1.5em + 2px);
  height: calc(var(--ins-btn-padding-y) * 2 + 1.5em + 2px);
}
.knopf.symbolknopf.klein {
  width: calc(var(--ins-btn-padding-y-sm) * 2 + 1.5em + 2px);
  height: calc(var(--ins-btn-padding-y-sm) * 2 + 1.5em + 2px);
}

.knopfgruppe { display: inline-flex; }
.knopfgruppe .knopf { border-radius: 0; margin-left: -1px; }
.knopfgruppe .knopf:first-child { border-radius: var(--ins-border-radius) 0 0 var(--ins-border-radius); margin-left: 0; }
.knopfgruppe .knopf:last-child { border-radius: 0 var(--ins-border-radius) var(--ins-border-radius) 0; }
.knopfgruppe .knopf.aktiv { background: var(--ins-primary); border-color: var(--ins-primary); color: #fff; z-index: 1; }

/* ============================================================================
   Abzeichen
   ========================================================================== */

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .25em .4em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--ins-border-radius);
  background: var(--ins-light);
  color: var(--ins-gray-800);
  white-space: nowrap;
}
.abzeichen.primaer { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }
.abzeichen.erfolg  { background: var(--ins-success-bg-subtle); color: var(--ins-success); }
.abzeichen.info    { background: var(--ins-info-bg-subtle); color: var(--ins-info-text-emphasis); }
.abzeichen.warnung { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }
.abzeichen.gefahr  { background: var(--ins-danger-bg-subtle); color: var(--ins-danger); }
.abzeichen.dunkel  { background: var(--ins-dark); color: #fff; }
.abzeichen.rund    { border-radius: var(--ins-border-radius-pill); padding: .25em .6em; }

.punkt {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ins-gray-400);
  flex: 0 0 auto;
}
.punkt.erfolg { background: var(--ins-success); }
.punkt.warnung { background: var(--ins-warning); }
.punkt.gefahr { background: var(--ins-danger); }
.punkt.primaer { background: var(--ins-primary); }

/* ============================================================================
   Tabellen
   ========================================================================== */

.tabellenrahmen { overflow-x: auto; }

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ins-body-font-size);
}
table.tabelle th {
  padding: var(--ins-table-cell-padding-y) var(--ins-table-cell-padding-x);
  text-align: left;
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ins-secondary-color);
  border-bottom: 1px solid var(--ins-border-color-translucent);
  white-space: nowrap;
}
table.tabelle td {
  padding: var(--ins-table-cell-padding-y) var(--ins-table-cell-padding-x);
  border-bottom: 1px solid var(--ins-border-color-translucent);
  vertical-align: middle;
}
table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover { background: var(--ins-tertiary-bg); }
table.tabelle .stark { font-weight: 600; color: var(--ins-gray-800); }
table.tabelle .rechts { text-align: right; }
table.tabelle .schmal { width: 1%; white-space: nowrap; }
table.tabelle tr.gedaempft td { color: var(--ins-secondary-color); }
table.tabelle input, table.tabelle select { max-width: 140px; }

/* ============================================================================
   Formulare
   ========================================================================== */

[hidden] { display: none !important; }
.feld { display: block; margin-bottom: var(--ins-spacer-3); }
.feld > span {
  display: block;
  margin-bottom: 6px;
  font-size: var(--ins-body-font-size);
  font-weight: 500;
  color: var(--ins-gray-800);
}
.feld > small { display: block; margin-top: 4px; color: var(--ins-secondary-color); }

/* Alles, was Text aufnimmt – auch <input> ohne type-Angabe. Genau daran lag
   es, dass Name, Lohnsteuerklasse & Co. in der Systemgrösse dastanden. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]),
select, textarea {
  display: block;
  width: 100%;
  padding: var(--ins-input-padding-y) var(--ins-input-padding-x);
  font-family: inherit;
  font-size: var(--ins-body-font-size);
  line-height: 1.5;
  color: var(--ins-body-color);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  transition: border-color .15s ease-in-out;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ins-dark-border-subtle);
  outline: 0;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(var(--ins-primary-rgb), .6);
  outline-offset: 1px;
}
input:disabled, select:disabled, textarea:disabled { background: var(--ins-light); opacity: .8; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ins-body-color);
  -webkit-box-shadow: 0 0 0 40px var(--ins-secondary-bg) inset;
  caret-color: var(--ins-body-color);
}
input[type=file] { padding: 6px var(--ins-input-padding-x); }
input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 4px 10px;
  font: inherit;
  font-weight: 500;
  color: var(--ins-dark);
  background: var(--ins-secondary-bg);
  border: 1px solid rgba(var(--ins-dark-rgb), .1);
  border-radius: var(--ins-border-radius);
  cursor: pointer;
}
textarea { min-height: 90px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ea5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 14px;
  padding-right: 2rem;
}

.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--ins-spacer-3); }
.feldreihe.zwei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.hakenfeld, .schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--ins-spacer-2);
  font-weight: 400;
}
.hakenfeld input[type=checkbox], .hakenfeld input[type=radio] {
  width: 16px; height: 16px;
  accent-color: var(--ins-primary);
  margin: 0;
  flex: 0 0 auto;
}
.hakenfeld > span { font-weight: 400; }

/* ============================================================================
   Meldungen, leere Zustände, Ladeband
   ========================================================================== */

.meldung {
  padding: .8rem 1rem;
  margin-bottom: var(--ins-spacer-3);
  border: 1px solid transparent;
  border-radius: var(--ins-border-radius);
  background: var(--ins-light);
  color: var(--ins-body-color);
}
.meldung ul { margin: 6px 0 0; padding-left: 18px; }
.meldung.info    { background: var(--ins-info-bg-subtle); border-color: var(--ins-info-border-subtle); color: var(--ins-info-text-emphasis); }
.meldung.erfolg  { background: var(--ins-success-bg-subtle); border-color: var(--ins-success-border-subtle); color: var(--ins-success-text-emphasis); }
.meldung.warnung { background: var(--ins-warning-bg-subtle); border-color: var(--ins-warning-border-subtle); color: var(--ins-warning-text-emphasis); }
.meldung.fehler  { background: var(--ins-danger-bg-subtle); border-color: var(--ins-danger-border-subtle); color: var(--ins-danger-text-emphasis); }

.leer {
  padding: var(--ins-spacer-4) var(--ins-spacer-3);
  text-align: center;
  color: var(--ins-secondary-color);
}
.leer .symbol { color: var(--ins-gray-400); margin-bottom: var(--ins-spacer-2); }

.ladebalken { height: 2px; background: var(--ins-gray-200); overflow: hidden; border-radius: var(--ins-border-radius-pill); }
.ladebalken span { display: block; height: 100%; width: 40%; background: var(--ins-primary); animation: laden 1.1s ease-in-out infinite; }
@keyframes laden { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

#app.laedt { padding-top: 40vh; }

/* Neuladen über stehendem Inhalt: der Balken liegt fest am oberen Rand (am
   Handy unter der Kopfzeile) und schiebt nichts zur Seite – die Rollposition
   bleibt, wo sie war. */
.ladebalken.oben {
  position: fixed;
  top: var(--ins-haftkante);
  left: 0;
  right: 0;
  z-index: 1003;
  border-radius: 0;
  background: transparent;
}

/* Fortschrittsbalken mit der typischen Kante am Ende der Füllung. */
.balken { height: 8px; background: var(--ins-gray-200); border-radius: var(--ins-border-radius); box-shadow: var(--ins-box-shadow-inset); overflow: hidden; }
.balken > span {
  display: block;
  height: 100%;
  background: var(--ins-primary);
  /* Die typische Kante am Ende der Füllung – bei 0 % bleibt sie unsichtbar. */
  box-shadow: inset -5px 0 0 rgba(0, 0, 0, .2);
}
.balken.warnung > span { background: var(--ins-warning); }
.balken.gefahr > span { background: var(--ins-danger); }
.balken.erfolg > span { background: var(--ins-success); }

/* ============================================================================
   Listen im Karteninneren
   ========================================================================== */

.liste { display: flex; flex-direction: column; }
.liste > * {
  display: flex;
  align-items: center;
  gap: var(--ins-spacer-2);
  padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x);
  border-bottom: 1px solid var(--ins-border-color-translucent);
  color: inherit;
}
.liste > *:last-child { border-bottom: 0; }
.liste > a:hover, .liste > button:hover { background: var(--ins-tertiary-bg); }
.liste .wachsen { flex: 1 1 auto; min-width: 0; }

/* Einsatzzeile mit Datumskachel (Homer: Aktivitätsliste) */
.einsatz {
  display: flex;
  align-items: center;
  gap: var(--ins-spacer-2);
  padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x);
  border-bottom: 1px solid var(--ins-border-color-translucent);
}
.einsatz:last-child { border-bottom: 0; }
.einsatz:hover { background: var(--ins-tertiary-bg); }
.einsatz .wachsen { flex: 1 1 auto; min-width: 0; }
.einsatz .reihe { flex: 0 0 auto; }
/* Schmal: Abzeichen und Knopf rutschen unter den Text, statt ihn zusammenzudrücken. */
@media (max-width: 600px) {
  .einsatz { flex-wrap: wrap; align-items: flex-start; }
  .einsatz .wachsen { flex: 1 1 calc(100% - 64px); }
  .einsatz .reihe { flex: 1 1 100%; padding-left: 50px; }
}

.datumskachel {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: var(--ins-border-radius);
  background: var(--ins-light);
  color: var(--ins-gray-800);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.datumskachel b { font-size: var(--ins-font-size-lg); font-weight: 600; }
.datumskachel span { font-size: 10px; text-transform: uppercase; color: var(--ins-secondary-color); }
.datumskachel.wochenende { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }
.datumskachel.wochenende span { color: var(--ins-primary-text-emphasis); }

/* Schlüsselhinweis unter einem Tag */
.schluesselzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--ins-card-spacer-x);
  background: var(--ins-info-bg-subtle);
  color: var(--ins-info-text-emphasis);
  border-bottom: 1px solid var(--ins-border-color-translucent);
  font-weight: 500;
}

/* Tagestrenner in Tabellen */
table.tabelle tr.tagtrenner td {
  background: var(--ins-light-bg-subtle);
  border-top: 1px solid var(--ins-border-color);
}
table.tabelle tr.tagtrenner:hover td { background: var(--ins-light-bg-subtle); }

/* Merkmale (Kürzel-Chips) */
.marke-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 600;
  border-radius: var(--ins-border-radius);
  background: var(--ins-light);
  color: var(--ins-gray-700);
}
.marke-chip.primaer { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }
.marke-chip.erfolg { background: var(--ins-success-bg-subtle); color: var(--ins-success); }
.marke-chip.warnung { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }
.marke-chip.gefahr { background: var(--ins-danger-bg-subtle); color: var(--ins-danger); }
.marke-chip.info { background: var(--ins-info-bg-subtle); color: var(--ins-info-text-emphasis); }

/* ============================================================================
   Sinnbilder für Personen
   ========================================================================== */

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ins-primary-bg-subtle);
  color: var(--ins-primary-text-emphasis);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ins-font-size-xs);
  font-weight: 600;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.avatar.klein { width: 24px; height: 24px; font-size: 10px; }
.avatar.gross { width: 48px; height: 48px; font-size: var(--ins-font-size-md); }
.avatar.dunkel { background: var(--ins-dark); color: #fff; }

/* ============================================================================
   Reiter (Nav-Pills)
   ========================================================================== */

.reiter { display: flex; flex-wrap: wrap; gap: var(--ins-spacer-1); margin-bottom: var(--ins-spacer-3); }
.reiter > a, .reiter > button {
  padding: 6px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--ins-body-color);
  border-radius: var(--ins-border-radius);
  cursor: pointer;
}
.reiter > a:hover, .reiter > button:hover { background: var(--ins-tertiary-bg); }
.reiter > .aktiv { background: var(--ins-primary); color: #fff; }

/* ============================================================================
   Dialoge
   ========================================================================== */

dialog {
  border: 0;
  border-radius: var(--ins-border-radius-lg);
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  color: var(--ins-body-color);
  background: var(--ins-secondary-bg);
  box-shadow: var(--ins-box-shadow);
}
dialog::backdrop { background: rgba(var(--ins-body-color-rgb), .7); }
dialog .dkopf {
  padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x);
  border-bottom: 1px solid var(--ins-border-color);
  font-size: var(--ins-font-size-lg);
  font-weight: 500;
  color: var(--ins-gray-800);
}
dialog .dinhalt { padding: var(--ins-card-spacer-x); max-height: 70vh; overflow-y: auto; }
dialog .dfuss {
  padding: var(--ins-card-spacer-y) var(--ins-card-spacer-x);
  border-top: 1px solid var(--ins-border-color);
  background: var(--ins-light-bg-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--ins-spacer-2);
}
dialog .feld:last-child { margin-bottom: 0; }

/* ============================================================================
   Kurzmeldungen
   ========================================================================== */

#toaster {
  position: fixed;
  right: var(--ins-spacer-3);
  bottom: var(--ins-spacer-3);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--ins-spacer-2);
  max-width: min(360px, calc(100vw - 40px));
}
.toast {
  padding: .8rem 1rem;
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  background: var(--ins-secondary-bg);
  backdrop-filter: blur(2px);
  box-shadow: var(--ins-box-shadow);
}
.toast.fehler { border-color: var(--ins-danger-border-subtle); background: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis); }
.toast.erfolg { border-color: var(--ins-success-border-subtle); background: var(--ins-success-bg-subtle); color: var(--ins-success-text-emphasis); }
.toast.warnung { border-color: var(--ins-warning-border-subtle); background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }

/* ============================================================================
   Anmeldung und Einladung — mittige Karte auf gemustertem Grund
   ========================================================================== */

.anmeldeseite {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ins-spacer-3);
  background: var(--ins-body-bg);
  background-image: radial-gradient(rgba(var(--ins-dark-rgb), .06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.anmeldekarte { width: min(420px, 100%); }
.anmeldekarte .marke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--ins-spacer-3);
  color: var(--ins-gray-800);
}
.anmeldekarte .marke .zeichen {
  width: 34px; height: 34px;
  border-radius: var(--ins-border-radius);
  background: var(--ins-gray-800);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.anmeldekarte .marke .wortmarke { font-size: var(--ins-font-size-xl); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.anmeldekarte .koerper {
  padding: var(--ins-spacer-4);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}
.anmeldekarte h1 { font-size: var(--ins-h4-font-size); margin-bottom: 4px; color: var(--ins-gray-800); }
.anmeldekarte .lead { color: var(--ins-secondary-color); margin-bottom: var(--ins-spacer-3); }
.anmeldekarte .fuss { margin-top: var(--ins-spacer-3); text-align: center; color: var(--ins-secondary-color); }

/* „Passwort vergessen?" sitzt in der Beschriftung des Passwortfeldes – dort
   sucht man es, und es drängt sich nicht neben den Anmeldeknopf. */
.feld > span.mit-hilfe { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ins-spacer-2); }
.textknopf {
  padding: 0;
  font: inherit;
  font-size: var(--ins-font-size-xs);
  font-weight: 400;
  color: var(--ins-primary-text-emphasis);
  background: none;
  border: 0;
  cursor: pointer;
}
.textknopf:hover { text-decoration: underline; }

/* Abschnittsüberschrift zwischen Karten */
h2.abschnitt {
  margin: var(--ins-spacer-4) 0 var(--ins-spacer-2);
  font-size: var(--ins-h4-font-size);
  font-weight: 500;
  color: var(--ins-gray-800);
}
h2.abschnitt:first-child { margin-top: 0; }

/* Abschnitte im Dialog */
.dialogabschnitt {
  margin: var(--ins-spacer-3) 0 var(--ins-spacer-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ins-border-color);
  font-size: var(--ins-h5-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ins-secondary-color);
}
.dialogabschnitt:first-child { margin-top: 0; }
.liste.satzliste > * { padding: 8px 0; }

/* Eine Karte je Schicht im Markttag-Dialog: Kopf mit Nummer und Papierkorb,
   darunter wann – wie viele – was. */
.schichtkarte {
  padding: var(--ins-spacer-2) var(--ins-spacer-3) 0;
  margin-bottom: var(--ins-spacer-2);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  background: var(--ins-light-bg-subtle);
}
.schichtkarte .schichtkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ins-spacer-2);
  margin-bottom: 6px;
}
.schichtkarte .feld { margin-bottom: var(--ins-spacer-2); }
.feldreihe.drei { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

.knopf.breit { width: 100%; justify-content: center; }

/* Der Dialog braucht Platz für drei Felder nebeneinander. */
dialog.tagdialog { width: min(680px, calc(100vw - 24px)); }
/* Zerstörendes links, Bestätigen rechts – dazwischen Luft. */
dialog .dfuss .knopf.gefahr { margin-right: auto; }

/* Kandidatenliste in der Vertretungstabelle */
.kandidatenliste { display: flex; flex-direction: column; gap: 4px; }

/* Mein Dienstplan: Monatskalender mit den eigenen Schichten */
.dpkal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--ins-border-color-translucent);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  overflow: hidden;
}
.dpkal-kopf {
  padding: 6px 4px;
  background: var(--ins-light-bg-subtle);
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--ins-secondary-color);
}
.dpkal-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  padding: 4px;
  background: var(--ins-secondary-bg);
}
.dpkal-tag.we { background: var(--ins-light-bg-subtle); }
.dpkal-tag.aus { background: var(--ins-light-bg-subtle); }
.dpkal-tag .nr {
  align-self: flex-start;
  font-size: var(--ins-font-size-xs);
  font-weight: 600;
  color: var(--ins-gray-800);
}
.dpkal-tag.aus .nr { font-weight: 400; color: var(--ins-secondary-color); }
.dpkal-tag.heute .nr {
  min-width: 20px;
  padding: 0 5px;
  border-radius: var(--ins-border-radius-pill);
  background: var(--ins-primary);
  color: #fff;
  text-align: center;
}
.dpkal-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 2px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: var(--ins-primary-text-emphasis);
  background: var(--ins-primary-bg-subtle);
  border: 0;
  border-left: 3px solid var(--ins-primary);
  border-radius: 2px;
  cursor: pointer;
}
.dpkal-chip.pruefung {
  color: var(--ins-warning-text-emphasis);
  background: var(--ins-warning-bg-subtle);
  border-left-color: var(--ins-warning);
}
.dpkal-chip:hover { filter: brightness(.97); }
.dpkal-chip:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: 1px; }
.dpkal-monat { min-width: 9.5rem; text-align: center; font-weight: 600; color: var(--ins-gray-800); }
@media (min-width: 700px) {
  .dpkal-tag { min-height: 84px; }
  .dpkal-chip { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: 12px; }
  .dpkal-chip .bis::before { content: '–'; margin-right: 4px; }
}
/* Schmal: die Blätter-Knöpfe stehen unter Überschrift und Bemerkung, nicht daneben. */
@media (max-width: 600px) {
  .dpkal-karte > .kopf { grid-template-columns: minmax(0, 1fr); }
  .dpkal-karte > .kopf .aktionen { grid-column: 1; grid-row: auto; margin: var(--ins-spacer-2) 0 0; justify-content: space-between; }
}
.dpkal-legende {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: var(--ins-spacer-2);
  border-radius: 2px;
}
.dpkal-legende.fest { background: var(--ins-primary-bg-subtle); border-left: 3px solid var(--ins-primary); }
.dpkal-legende.pruefung { background: var(--ins-warning-bg-subtle); border-left: 3px solid var(--ins-warning); }

.einsatzdetail {
  display: flex;
  justify-content: space-between;
  gap: var(--ins-spacer-3);
  padding: 8px 0;
  border-bottom: 1px dashed var(--ins-border-color);
}
.einsatzdetail > .stark { text-align: right; overflow-wrap: anywhere; }

.kalenderwahl { display: flex; flex-direction: column; gap: var(--ins-spacer-2); margin: var(--ins-spacer-3) 0 var(--ins-spacer-2); }
.kalenderwahl .knopf { justify-content: center; }

/* Dokumente im Profil: schmale Ablage links, breite Liste rechts */
.dokumentbereich { display: grid; gap: var(--ins-spacer-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dokumentbereich { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Schreibgeschützte Angaben (Profil: „Beschäftigung und Steuer") */
.werteliste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.werteliste dt, .werteliste dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--ins-border-color); }
.werteliste dt { padding-right: var(--ins-spacer-3); color: var(--ins-secondary-color); }
.werteliste dd { font-weight: 600; color: var(--ins-gray-800); overflow-wrap: anywhere; }
.werteliste dd.leer { font-weight: 400; color: var(--ins-secondary-color); }
.werteliste + .dialogabschnitt { margin-top: var(--ins-spacer-4); }

/* Kopfband des Profils */
.profilband {
  display: flex;
  align-items: center;
  gap: var(--ins-spacer-3);
  padding: var(--ins-spacer-3);
  margin-bottom: var(--ins-spacer-3);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}
.profilband h2 { margin: 0; font-size: var(--ins-h4-font-size); color: var(--ins-gray-800); }
.profilband .wachsen { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   Werkzeugleiste über Tabellen (Filter, Suche)
   ========================================================================== */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ins-spacer-2);
  margin-bottom: var(--ins-spacer-3);
}
.filterleiste .feld { margin-bottom: 0; min-width: 150px; }
.filterleiste .rechts { margin-left: auto; }

/* ============================================================================
   Schichtgerüst — der Markt als Monatskalender
   ========================================================================== */

.monate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ins-spacer-4);
}

.monatskopf {
  font-size: var(--ins-h5-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ins-secondary-color);
  margin-bottom: var(--ins-spacer-2);
}

.monatsraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--ins-border-color-translucent);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  overflow: hidden;
}

.wochentagkopf {
  padding: 6px 4px;
  background: var(--ins-light-bg-subtle);
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--ins-secondary-color);
}

.tagkachel {
  position: relative;
  min-height: 74px;
  background: var(--ins-secondary-bg);
  font: inherit;
  color: inherit;
  text-align: left;
  border: 0;
  padding: 0;
}
.tagkachel.ausserhalb { background: var(--ins-light-bg-subtle); }
.tagkachel.wochenende { background: var(--ins-light-bg-subtle); }

/* Die Lage des Markttages steht in der Fläche, nicht in einem Punkt: rot heisst
   „die Zusagen reichen nicht", gelb „nur mit Abruf", blau „besetzbar", grün
   „alle Plätze sind besetzt". Ein 8px-Punkt sieht man im Monatsraster nicht. */
.tagkachel.lage-nicht { background: var(--ins-danger-bg-subtle); }
.tagkachel.lage-abruf { background: var(--ins-warning-bg-subtle); }
.tagkachel.lage-kann { background: var(--ins-success-bg-subtle); }
.tagkachel.lage-voll { background: var(--ins-primary-bg-subtle); }
.tagkachel.lage-nicht .nr { color: var(--ins-danger-text-emphasis); }
.tagkachel.lage-abruf .nr { color: var(--ins-warning-text-emphasis); }
.tagkachel.lage-kann .nr { color: var(--ins-success-text-emphasis); }
.tagkachel.lage-voll .nr { color: var(--ins-primary-text-emphasis); }

.rasterlegende i.lage-nicht { background: var(--ins-danger-bg-subtle); border-color: var(--ins-danger-border-subtle); }
.rasterlegende i.lage-abruf { background: var(--ins-warning-bg-subtle); border-color: var(--ins-warning); }
.rasterlegende i.lage-kann { background: var(--ins-success-bg-subtle); border-color: var(--ins-success); }
.rasterlegende i.lage-voll { background: var(--ins-primary-bg-subtle); border-color: var(--ins-primary); }
.tagkachel .nr { font-size: var(--ins-font-size-xs); font-weight: 600; color: var(--ins-gray-800); }

/* Leerer Tag: nur die Zahl, beim Überfahren das Pluszeichen. */
.tagkachel.leerer-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.tagkachel.leerer-tag .nr { color: var(--ins-secondary-color); font-weight: 400; }
.tagkachel.leerer-tag .plus { opacity: 0; color: var(--ins-primary); transition: opacity .15s ease-in-out; }
.tagkachel.leerer-tag:hover { background: var(--ins-primary-bg-subtle); }
.tagkachel.leerer-tag:hover .plus,
.tagkachel.leerer-tag:focus-visible .plus { opacity: 1; }

/* Markttag: Fläche zum Öffnen, kleiner Knopf zum Kopieren.
   Nur im Schichtgerüst-Raster: im Verfügbarkeitskalender hat jede Kachel einen
   eigenen Rahmen, und diese Regel hat die höhere Spezifität – sie überschrieb
   dort den linken Rahmen mit 3px transparent, der Rahmen fehlte also links. */
.monatsraster:not(.mit-kw) .tagkachel.markttag { border-left: 3px solid transparent; }
.monatsraster:not(.mit-kw) .tagkachel.markttag.heute { border-left-color: var(--ins-primary); }
.kachelflaeche {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.kachelflaeche:hover { background: rgba(0, 0, 0, .04); }
.kachelflaeche .kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.kachelflaeche .zahlen {
  margin-top: 4px;
  font-size: var(--ins-font-size-xxs);
  line-height: 1.35;
  color: var(--ins-body-color);
}
.kachelflaeche .zahlen .soll { display: block; color: var(--ins-secondary-color); }
.kachelflaeche .notiz {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ins-primary-text-emphasis);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kachelknopf {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--ins-border-radius);
  background: transparent;
  color: var(--ins-secondary-color);
  cursor: pointer;
  opacity: 0;
  transition: var(--ins-transition-btn), opacity .15s ease-in-out;
}
.tagkachel.markttag:hover .kachelknopf,
.kachelknopf:focus-visible { opacity: 1; }
.kachelknopf:hover { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }

/* --- Verfügbarkeit: Variante B, grosse Tageszahl und senkrechter Balken ----
   Anders als im Schichtgerüst steht hier jeder Tag als eigene Karte im Raster:
   4px Luft dazwischen statt der 1px-Tabellenfugen, damit der Balken am rechten
   Kachelrand nicht mit dem Nachbartag verschwimmt. */

/* Überschrift mit Merkmal daneben (Zeitraum, Zahl der Markttage). */
.karte > .kopf h2.mit-merkmal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ins-spacer-2);
}

/* Schmal: die Legende rückt unter Überschrift und Erklärung, sonst drückt sie
   die erste Spalte auf null. */
@media (max-width: 767.98px) {
  .vfkal-karte > .kopf { grid-template-columns: minmax(0, 1fr); }
  .vfkal-karte > .kopf .aktionen {
    grid-column: 1;
    grid-row: auto;
    margin: var(--ins-spacer-2) 0 0;
  }
}

/* Zwei Monate nebeneinander wie im Entwurf – auto-fit legte sonst eine dritte,
   leere Spur an und schob die Monate auseinander. */
.vfkal-karte .monate { grid-template-columns: minmax(0, 1fr); gap: var(--ins-spacer-3); }
@media (min-width: 1100px) {
  .vfkal-karte .monate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ins-spacer-4); }
}

.monatskopf { display: flex; align-items: center; gap: var(--ins-spacer-2); flex-wrap: wrap; }
.monatskopf h5 {
  margin: 0;
  font-size: var(--ins-h5-font-size);
  font-weight: 500;
  color: var(--ins-gray-800);
}

.monatsraster.mit-kw {
  grid-template-columns: 40px repeat(7, minmax(0, 1fr));
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.monatsraster.mit-kw .wochentagkopf {
  padding: 0 0 4px 9px;
  background: transparent;
  text-align: left;
}
.monatsraster.mit-kw .wochentagkopf.kw { padding-left: 0; text-align: center; }

.kwzelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 9px;
  background: transparent;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.kwnummer { font-size: var(--ins-font-size-xxs); font-weight: 600; color: var(--ins-secondary-color); }
.kwzelle .kachelknopf {
  position: static;
  width: 26px;
  height: 26px;
  opacity: .6;
  border: 1px solid transparent;
}
.kwzelle:hover .kachelknopf, .kwzelle .kachelknopf:focus-visible { opacity: 1; }
.kwzelle .kachelknopf:hover {
  border-color: var(--ins-border-color);
  background: var(--ins-sidenav-item-active-bg);
  color: var(--ins-gray-800);
}

/* Die Kachel: links die Tageszahl, rechts der Balken. */
.stundenkachel, .monatsraster.mit-kw .tagkachel {
  height: 76px;
  min-height: 0;
  box-sizing: border-box;
  border-radius: var(--ins-border-radius);
  background: var(--ins-secondary-bg);
}
.tagkachel.stundenkachel {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 4px 4px 9px;
  text-align: left;
  border: 1px solid var(--ins-border-color);
}
.tagkachel.stundenkachel.antippbar { cursor: pointer; transition: var(--ins-transition-btn); }
.tagkachel.stundenkachel.antippbar:hover { border-color: var(--ins-gray-400); background: var(--ins-secondary-bg); }
.tagkachel.stundenkachel.heute { border-color: var(--ins-primary); }

.stundenkachel .txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.monatsraster.mit-kw .big {
  font-size: var(--ins-font-size-xxl);
  font-weight: 300;
  line-height: 1;
  color: var(--ins-body-color);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.stundenkachel .hint {
  padding-bottom: 1px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ins-body-color);
}

/* Tage ausserhalb des Markts: nur die Zahl, blass, ohne Rahmen und ohne Balken. */
.monatsraster.mit-kw .tagkachel.kein-markt,
.monatsraster.mit-kw .tagkachel.ausserhalb {
  padding: 4px 4px 4px 9px;
  background: transparent;
  border: 1px solid transparent;
}
.monatsraster.mit-kw .tagkachel.kein-markt .big { color: var(--ins-gray-400); }

/* Der Balken: oben Beginn, unten Ende der Einsatzzeit. */
.vbar {
  flex: none;
  width: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vbar.leer {
  box-sizing: border-box;
  border: 1px dashed var(--ins-gray-400);
  border-radius: 2px;
}
.seg { display: block; min-height: 0; border-radius: 2px; }
.s-v { background: var(--ins-primary); }
.s-a { background: var(--ins-warning); }
.s-e { background: var(--ins-success); }
.s-x { background: var(--stunde-leer); }   /* dieselbe Grauwerte wie die Stundenleiste im Tagesfenster */

/* Legende in der Form des Balkens. */
.legende { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ins-spacer-2); }
.legende .lg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ins-font-size-xs);
  color: var(--ins-body-color);
  white-space: nowrap;
}
.legende .lg.getrennt {
  padding-left: var(--ins-spacer-2);
  border-left: 1px solid var(--ins-border-color-translucent);
  color: var(--ins-secondary-color);
}
.lgstreifen { width: 6px; height: 14px; border-radius: 2px; flex: none; }
.lgstreifen.s-offen {
  width: 4px;
  box-sizing: content-box;
  border: 1px dashed var(--ins-gray-400);
  background: var(--ins-secondary-bg);
}

/* Am Handy wird alles eine Spur kleiner, der Balken bleibt lesbar. */
@media (max-width: 767.98px) {
  .monatsraster.mit-kw { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 2px; }
  .monatsraster.mit-kw .wochentagkopf { padding-left: 4px; }
  .stundenkachel, .monatsraster.mit-kw .tagkachel { height: 58px; }
  .stundenkachel,
  .monatsraster.mit-kw .tagkachel.kein-markt,
  .monatsraster.mit-kw .tagkachel.ausserhalb { padding: 3px 3px 3px 5px; }
  .monatsraster.mit-kw .big { font-size: var(--ins-font-size-sm); padding-top: 1px; }
  .stundenkachel .hint { font-size: 9px; letter-spacing: .02em; }
  .vbar { width: 10px; }
  .kwzelle { padding-top: 5px; }
  .kwzelle .kachelknopf { width: 22px; height: 22px; }
}

/* Schichten im Tagesdialog */
.tagesschicht {
  padding: var(--ins-spacer-2) 0;
  border-bottom: 1px solid var(--ins-border-color-translucent);
}
.tagesschicht:last-child { border-bottom: 0; }
.tagesschicht .knopfgruppe { margin-top: 6px; }
.tagesschicht .knopfgruppe .knopf { min-width: 5.5rem; }
.tagesschicht .rechts { margin-left: auto; }

/* ============================================================================
   Verfügbarkeit im Stundenraster
   Kachel = Farbband des Tages, Tagesfenster = Stundenleiste zum Anstreichen.
   ========================================================================== */

:root { --stunde-leer: var(--ins-gray-300); --stunde-hoehe: 32px; }

/* Reste der früheren Bandkachel (border-left: 0, Schildchen für die Zahl,
   hat-offene, hat-band) sind mit dem Umbau auf den senkrechten Balken
   weggefallen – die Kachel steht jetzt weiter oben unter „Variante B“.
   Das border-left: 0 war es, das den linken Rahmen verschluckt hat. */

/* Nur zum Ansehen (Team-Übersicht): gleiche Kachel, nur ohne Zeiger und Hover.
   Der Aufbau bleibt flex – sonst fällt der Balken auf null zusammen. */
.tagkachel.stundenkachel.nur-lesen { cursor: default; }

/* Tagesfenster: quer braucht Breite, hochkant bleibt es schmal. */
dialog.stundendialog { width: min(560px, calc(100vw - 24px)); }
@media (min-width: 600px) { dialog.stundendialog { width: min(860px, calc(100vw - 32px)); } }
/* Kopf und Knöpfe bleiben immer sichtbar, gerollt wird nur der Inhalt – auch am quer gehaltenen Handy. */
dialog.stundendialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 16px); }
dialog.stundendialog .dinhalt { max-height: none; flex: 1 1 auto; min-height: 0; }
@media (max-height: 500px) {
  dialog.stundendialog .dkopf, dialog.stundendialog .dfuss { padding-top: 8px; padding-bottom: 8px; }
  .stundenleiste.quer .stundenfeld { height: 40px; }
}
.stundendialog-inhalt { display: flex; flex-direction: column; gap: var(--ins-spacer-2); }
.stundendialog-inhalt > p { margin: 0; }
.pinsel { display: flex; }
.pinsel .knopf { flex: 1; justify-content: center; gap: 6px; }
.pinsel .knopf.aktiv .punkt { box-shadow: 0 0 0 2px #fff; }

.stundenleiste { user-select: none; -webkit-user-select: none; }
.stundenfeld {
  background: var(--stunde-leer);
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;          /* Wischen malt, statt den Dialog zu rollen */
  transition: background-color .06s;
}
.stundenfeld.s-v { background: var(--ins-primary); }
.stundenfeld.s-a { background: var(--ins-warning); }
.stundenfeld.s-e { background: var(--ins-success); cursor: not-allowed; }

.stundenbalken {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  color: var(--ins-secondary-color);
  border: 1px dashed var(--ins-border-color);
  background: var(--ins-secondary-bg);
}
.stundenbalken.d-ja { background: var(--ins-primary-bg-subtle); border: 1px solid var(--ins-primary); color: var(--ins-primary-text-emphasis); }
.stundenbalken.d-abruf { background: var(--ins-warning-bg-subtle); border: 1px solid var(--ins-warning); color: var(--ins-warning-text-emphasis); }
.stundenbalken.d-eing { background: var(--ins-success-bg-subtle); border: 1px solid var(--ins-success); color: var(--ins-success); }
.stundenbalken.d-teil { border-color: var(--ins-secondary-color); }

/* hochkant: eine Zeile je Stunde, Schichten als Balken rechts daneben */
.stundenleiste.hoch .stundenflaeche {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-auto-columns: 24px;
  gap: 2px 4px;
}
.stundenleiste.hoch .stundenuhr {
  grid-column: 1;
  align-self: center;
  text-align: right;
  font-size: var(--ins-font-size-xs);
  color: var(--ins-secondary-color);
  font-variant-numeric: tabular-nums;
}
.stundenleiste.hoch .stundenbalken { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 0; }

/* quer: Uhrzeiten, Felder, darunter die Schichten */
.stundenleiste.quer { display: flex; flex-direction: column; gap: 3px; }
.stundenleiste.quer .stundenuhr,
.stundenleiste.quer .stundenflaeche,
.stundenleiste.quer .stundenbalkenreihe { display: grid; gap: 2px; }
.stundenleiste.quer .stundenuhr span { font-size: var(--ins-font-size-xxs); color: var(--ins-secondary-color); font-variant-numeric: tabular-nums; }
.stundenleiste.quer .stundenfeld { height: 56px; }
.stundenleiste.quer .stundenbalkenreihe { margin-top: 3px; }
.stundenleiste.quer .stundenbalken { height: 22px; padding: 0 6px; justify-content: flex-start; }

.stundenergebnis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ins-spacer-2) 12px;
  border-radius: var(--ins-border-radius);
  background: var(--ins-light-bg-subtle);
  border: 1px solid var(--ins-border-color-translucent);
}
.stundenergebnis .rechts { margin-left: auto; }
.uebertragen { display: flex; flex-direction: column; gap: 4px; padding-top: var(--ins-spacer-2); border-top: 1px solid var(--ins-border-color); }

/* Zuteilung: wer nur einen Teil der Schicht abdeckt */
.teilweise-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.teilweise-zeile .wachsen { flex: 1 1 auto; min-width: 0; }
.teilweise-zeile .knopf { flex: 0 0 auto; }
/* „Ohne Zusage einteilen“: zugeklappt, die Überschrift ist der Griff. */
details.weitere > summary { cursor: pointer; }
details.weitere[open] > summary { margin-bottom: 4px; }
.ministunden { display: grid; grid-auto-flow: column; grid-auto-columns: 10px; gap: 1px; height: 10px; }
.ministunden i { background: var(--stunde-leer); border-radius: 2px; }
.ministunden i.v { background: var(--ins-primary); }
.ministunden i.a { background: var(--ins-warning); }

/* ============================================================================
   Zuteilung — die Woche als Zeitraster
   ========================================================================== */

/* Links das Raster, rechts die Mitarbeiter. Die gewählte Schicht steht nicht
   mehr darüber, sondern in der Detailspalte – so bleibt die Mitarbeiterliste
   an ihrem Platz, egal was gewählt ist. Unter 1200px stapelt beides. */
.planflaeche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ins-spacer-3); align-items: start; }
.planhaupt { min-width: 0; }
@media (min-width: 1200px) {
  .planflaeche { grid-template-columns: minmax(0, 1fr) 230px; }
  /* Die Liste haftet oben und rollt in sich, wenn sie länger ist als der Schirm. */
  .planseite { position: sticky; top: calc(var(--ins-haftkante) + 10px); }
  .planseite > .karte { margin-bottom: 0; }
  .planseite .teamliste { max-height: calc(100vh - 150px); overflow-y: auto; }
}

/* --- Wochen in der Kontextspalte (Zuteilung) ------------------------------ */

.fachpunkt .phase.warnung { color: var(--ins-warning-text-emphasis); font-weight: 600; }
.fachpunkt .phase.erfolg { color: var(--ins-success); font-weight: 600; }

/* --- Filterleiste -------------------------------------------------------- */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ins-spacer-2);
  margin-bottom: var(--ins-spacer-2);
}
.segmente {
  display: flex;
  overflow: hidden;
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
}
.segment {
  padding: 5px 12px;
  font: inherit;
  font-size: var(--ins-font-size-xs);
  font-weight: 500;
  color: var(--ins-body-color);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.segment:hover { background: var(--ins-tertiary-bg); }
.segment.aktiv { background: var(--ins-primary); color: #fff; }

.personenchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--ins-border-radius);
  background: var(--ins-success-bg-subtle);
  color: var(--ins-success);
  font-size: var(--ins-font-size-xs);
  font-weight: 600;
}
.personenchip .zu { display: flex; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
/* Wünsche der Mitarbeiter: eigene Farbe, damit man sie nicht mit einer
   gesetzlichen Grenze verwechselt. */
.wunsch { color: var(--ins-info-text-emphasis); }
/* Mehrere Wunsch-Meldungen in einer Zeile: das Sinnbild bleibt vorn, der Text bricht daneben um. */
.reihe.wunsch { flex-wrap: nowrap; align-items: flex-start; }
.reihe.wunsch > svg { flex: none; margin-top: .2em; }

.p-kann-text { color: var(--ins-primary-text-emphasis); font-weight: 600; }
.p-eingeteilt-text { color: var(--ins-success-text-emphasis); font-weight: 600; }
.p-abruf-text { color: var(--ins-warning-text-emphasis); font-weight: 600; }

.rasterlegende {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: var(--ins-font-size-xxs);
  color: var(--ins-secondary-color);
}
.rasterlegende span { display: flex; align-items: center; gap: 5px; }
.rasterlegende i { width: 18px; height: 11px; border: 1px solid transparent; border-radius: 2px; box-sizing: border-box; }
.rasterlegende span svg { color: var(--ins-info-text-emphasis); }

/* --- Der Überblick: Zeile je Markttag, Stunden waagerecht ------------------
   Senkrecht gestapelte Stunden kosten je Woche über 700px Höhe. Gedreht passt
   der ganze Advent untereinander, ohne dass die Uhrzeit verloren geht. */

/* Die Stundenachse liegt in Prozent: der Überblick füllt damit die Karte,
   statt auf einer festen Pixelbreite stehen zu bleiben. Erst unter
   32px je Stunde rollt er waagerecht. */
/* Das Raster läuft mit der Seite: alle Markttage stehen untereinander, gerollt
   wird die Seite, und die Stundenachse haftet unter der Kopfleiste. Dafür darf
   kein Vorfahr ein Rollbereich sein – ein Element haftet immer nur in seinem
   eigenen; der Kartenkörper schneidet deshalb mit clip statt hidden ab.
   Passt das Raster nicht in die Breite, rollt es waagerecht in der Karte
   (.waagerecht, gesetzt in zuteilung.js); dann steht die Achse oben im Raster. */
.karte > .koerper.rasterkoerper { overflow: clip; }
.rasterrolle.waagerecht { overflow-x: auto; }
.ueberblick { min-width: min-content; }

.ueberblickkopf {
  position: sticky;
  top: var(--ins-haftkante);
  z-index: 3;
  display: flex;
  background: var(--ins-secondary-bg);
  border-bottom: 1px solid var(--ins-border-color);
}
.tagspalte-kopf {
  flex: none;
  width: 8.5rem;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ins-secondary-bg);
  border-right: 1px solid var(--ins-border-color);
}
.rasterrolle.waagerecht .ueberblickkopf { top: 0; }
.stundenkopf {
  position: relative;
  flex: 1 1 auto;
  min-width: calc(var(--stundenzahl) * 32px);
  height: 26px;
}
.stundenkopf .stundenmarke {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ins-secondary-color);
  font-variant-numeric: tabular-nums;
}
.stundenkopf .stundenmarke.anfang { transform: none; }
.stundenkopf .stundenmarke.ende { transform: translateX(-100%); }

.tagzeile { display: flex; border-bottom: 1px solid var(--ins-border-color-translucent); }
.tagzeile:last-child { border-bottom: 0; }
.tagzeile.wochenende { background: var(--ins-light-bg-subtle); }
.tagzeile:hover { background: var(--ins-tertiary-bg); }
/* Vier Wochen Advent untereinander verschwimmen ohne Wochengrenze. */
.tagzeile.wochenstart { border-top: 1px solid var(--ins-border-color); }
.tagzeile.wochenstart:first-child { border-top: 0; }
.tagzeile.heute { background: var(--ins-primary-bg-subtle); }
.tagzeile.heute .tagzeile-kopf .dat { color: var(--ins-primary); }
/* Der Tageskopf haftet links und deckt damit die Zeilenfläche ab – er muss
   dieselbe Farbe tragen wie die Zeile, sonst entsteht eine Stufe. */
.tagzeile.wochenende .tagzeile-kopf { background: var(--ins-light-bg-subtle); }
.tagzeile.heute .tagzeile-kopf { background: var(--ins-primary-bg-subtle); }
.tagzeile:hover .tagzeile-kopf { background: var(--ins-tertiary-bg); }

.tagzeile-kopf {
  flex: none;
  width: 8.5rem;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ins-body-bg);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-right: 1px solid var(--ins-border-color);
}
.tagzeile-kopf .dat { font-weight: 600; color: var(--ins-gray-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tagzeile-kopf .schluesselmarke { display: inline-flex; color: var(--ins-success); }
.tagzeile-kopf .stand { margin-left: auto; font-size: var(--ins-font-size-xxs); white-space: nowrap; }

/* Die Stundenlinien sind ein Verlauf, keine 400 Knoten: eine Linie je Stunde,
   gekachelt über die Breite der Bahn. */
.tagbahn {
  position: relative;
  flex: 1 1 auto;
  min-width: calc(var(--stundenzahl) * 32px);
  background-image: linear-gradient(to right, var(--ins-gray-200) 1px, transparent 1px);
  background-size: calc(100% / var(--stundenzahl)) 100%;
}

/* Grenze zwischen der fortlaufenden Standbesetzung und den Schichten, die
   daneben herlaufen (Logistik, Sondertätigkeiten). */
.spurtrenner {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px dashed var(--ins-border-color);
}

/* Senkrechter Strich an der aktuellen Uhrzeit in der Zeile von heute. */
.jetztlinie {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px solid var(--ins-primary);
  z-index: 1;
}

/* Ein Block liegt an seiner Uhrzeit; die Hülle trägt Platz und Grösse,
   der Knopf darin das Aussehen. Die seitliche Luft der Hülle ist die Lücke
   zwischen zwei Schichten, die aneinander anschliessen. */
.blockhuelle { position: absolute; box-sizing: border-box; height: 18px; padding: 0 3px; }
/* Parallelschicht: flacher und kleiner gesetzt, damit die Zeile schmal bleibt. */
.blockhuelle.nebenspur .schichtblock { font-size: 10px; gap: 5px; padding: 0 7px; }
.schichtblock {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 10px;
  font: inherit;
  font-size: var(--ins-font-size-xxs);
  text-align: left;
  color: var(--ins-body-color);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.schichtblock:hover { border-color: var(--ins-gray-500); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.schichtblock .zeit {
  font-weight: 600;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schichtblock .rolle {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ins-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schichtblock .zahl { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* Drei Stufen nach gemessener Breite: ganze Spanne mit Rolle, nur die
   Anfangszeit, oder bei ganz kurzen Schichten allein die Besetzungszahl –
   die Einzelheiten stehen weiter im Tooltip. */
.blockhuelle.kurz .rolle,
.blockhuelle.winzig .rolle { display: none; }
.blockhuelle.kurz .zeit .bis { display: none; }
.blockhuelle.winzig .zeit { display: none; }
.blockhuelle.winzig .artsinn { display: none; }
.blockhuelle.winzig .schichtblock { justify-content: center; gap: 0; padding: 0 4px; }
.blockhuelle.winzig .zahl { margin-left: 0; }

/* Ohne Personenfilter zeigt die Farbe die Besetzung: wo noch niemand steht,
   ist der Block gestrichelt und leer; voll besetzt ist blau (Erfolg im Theme). */
.schichtblock.st-offen,
.rasterlegende i.st-offen {
  border-color: var(--ins-danger-border-subtle);
  border-style: dashed;
  background: var(--ins-body-bg);
}
.schichtblock.st-offen .zahl { color: var(--ins-danger-text-emphasis); }
.schichtblock.st-teil,
.rasterlegende i.st-teil {
  border-color: var(--ins-warning);
  background: var(--ins-warning-bg-subtle);
}
.schichtblock.st-teil .zahl { color: var(--ins-warning-text-emphasis); }
.schichtblock.st-voll,
.rasterlegende i.st-voll {
  border-color: var(--ins-success);
  background: var(--ins-success-bg-subtle);
}
.schichtblock.st-voll .zahl { color: var(--ins-success-text-emphasis); }

/* Parallelschichten tragen ihr Sinnbild; die Farbe bleibt für die Besetzung
   reserviert, sonst stritten zwei Aussagen um denselben Block. */
.schichtblock .artsinn { flex: none; display: flex; color: var(--ins-info-text-emphasis); }

/* Eigene Grundfarbe: die Parallelspur soll sich schon aus dem Augenwinkel von
   der Standbesetzung unterscheiden. Die Besetzung bleibt trotzdem ablesbar –
   sie steckt im Rahmen und in der Zahl. Im Personenfilter gewinnt die
   Personenfarbe (dieselbe Spezifität, aber später in der Datei). */
.schichtblock.art-logistik,
.schichtblock.art-sonder {
  border-left-width: 3px;
  border-left-color: var(--ins-info);
  background: var(--ins-info-bg-subtle);
}

.artmarke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 600;
  color: var(--ins-info-text-emphasis);
  background: var(--ins-info-bg-subtle);
  border-radius: var(--ins-border-radius);
  white-space: nowrap;
}

/* Mit Personenfilter erzählt dieselbe Fläche, wie diese Person zu der Schicht
   steht – vier Zustände, in der Legende erklärt. */
.schichtblock.p-kann,
.rasterlegende i.p-kann {
  border-color: var(--ins-primary);
  background: var(--ins-primary-bg-subtle);
}
.schichtblock.p-kann .zeit, .schichtblock.p-kann .zahl { color: var(--ins-primary-text-emphasis); }
.schichtblock.p-eingeteilt,
.rasterlegende i.p-eingeteilt {
  border-color: var(--ins-success-text-emphasis);
  background: var(--ins-success-text-emphasis);
}
.schichtblock.p-eingeteilt .zeit,
.schichtblock.p-eingeteilt .rolle,
.schichtblock.p-eingeteilt .zahl,
.schichtblock.p-eingeteilt .artsinn { color: #fff; }
.schichtblock.p-abruf,
.rasterlegende i.p-abruf {
  border-color: var(--ins-warning-text-emphasis);
  border-style: dashed;
  background: var(--ins-warning-bg-subtle);
}
.schichtblock.p-abruf .zeit, .schichtblock.p-abruf .zahl { color: var(--ins-warning-text-emphasis); }
.schichtblock.p-nein,
.rasterlegende i.p-nein {
  border-color: var(--ins-danger-border-subtle);
  background: var(--ins-danger-bg-subtle);
}
.schichtblock.p-nein { opacity: .45; }

/* „Geht nicht" ist etwas anderes als „nicht gemeldet": die Person hat zugesagt,
   aber eine harte Regel steht davor. Schraffur statt blasser Fläche, damit das
   nicht mit einem leeren Tag verwechselt wird. Der Grund steht im Tooltip. */
.schichtblock.p-gesperrt,
.rasterlegende i.p-gesperrt {
  border-color: var(--ins-danger);
  color: var(--ins-danger-text-emphasis);
  background-color: var(--ins-danger-bg-subtle);
  background-image: repeating-linear-gradient(135deg,
    rgba(var(--ins-danger-rgb), .18) 0 3px, transparent 3px 7px);
}
.schichtblock.p-gesperrt .zeit, .schichtblock.p-gesperrt .zahl { color: var(--ins-danger-text-emphasis); }
.p-gesperrt-text { color: var(--ins-danger-text-emphasis); font-weight: 600; }
.standmarke.p-gesperrt { background: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis); }

/* Die gewählte Schicht bekommt einen Ring, keine eigene Farbe – die Farbe
   gehört der Besetzung oder der Person. */
.schichtblock.gewaehlt { border-color: var(--ins-gray-700); box-shadow: 0 0 0 2px var(--ins-gray-700); }
.blockhuelle:has(.gewaehlt) { z-index: 2; }

/* --- Der Wochenplan: je Woche sieben Tagesspalten mit Schichtkarten -------
   Die zweite Ansicht der Zuteilung, umgeschaltet über der Fläche. Jede Schicht
   ist eine Karte mit den Namen der Eingeteilten; freie Plätze stehen als eigene
   Zeile darin, damit eine Schicht so hoch ist wie ihr Soll. */

.segment.mit-sinnbild { display: inline-flex; align-items: center; gap: 5px; }

.wochenkarte.zu > .koerper { display: none; }
.wochenkarte.zu > .kopf { border-bottom: 0; }

/* Sieben gleich breite Spalten. Wird ein Tag schmaler als 6rem, rollt die
   Woche in ihrer Karte waagerecht. 6rem ist das, was am 1280er Schirm neben
   der Arbeitsspalte bleibt – darunter wird ohnehin gestapelt. */
.wochenrolle { overflow-x: auto; }
.wochenspalten {
  display: grid;
  grid-template-columns: repeat(7, minmax(6rem, 1fr));
  min-width: min-content;
}
.tagspalte {
  min-width: 0;
  padding: 0 3px 6px;
  border-right: 1px solid var(--ins-border-color-translucent);
}
.tagspalte:last-child { border-right: 0; }
.tagspalte.wochenende { background: var(--ins-light-bg-subtle); }
.tagspalte.heute { background: var(--ins-primary-bg-subtle); }

.tagkopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 2px 7px;
  margin-bottom: 5px;
  text-align: center;
  border-bottom: 1px solid var(--ins-border-color);
}
.tagkopf .dat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
}
.tagspalte.heute .tagkopf .dat { color: var(--ins-primary); }
.tagspalte.ohne .tagkopf .dat { font-weight: 500; color: var(--ins-secondary-color); }
.tagkopf .schluesselmarke { display: inline-flex; color: var(--ins-success); }
.tagkopf .einsatzzeit {
  font-size: var(--ins-font-size-xxs);
  color: var(--ins-secondary-color);
  font-variant-numeric: tabular-nums;
}
.tagkopf .tagstand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 600;
  white-space: nowrap;
}
.tagstand.offen { color: var(--ins-danger); }
.tagstand.voll { color: var(--ins-success); }

.tagschichten { display: flex; flex-direction: column; gap: 5px; }

.wochenschicht {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--ins-body-color);
  background: var(--ins-secondary-bg);
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.wochenschicht:hover { border-color: var(--ins-gray-500); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

/* Kopf: Uhrzeit und Plätze in einer Zeile, die Bezeichnung darunter. Wird die
   Spalte zu schmal, rücken die Plätze von selbst unter die Uhrzeit. */
.wochenschicht > .kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  row-gap: 1px;
  padding: 4px 5px;
  background: var(--ins-light);
  border-bottom: 1px solid var(--ins-border-color-translucent);
}
.wochenschicht .zeit {
  font-size: var(--ins-font-size-xxs);
  font-weight: 600;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wochenschicht .artsinn { display: inline-flex; margin-right: 4px; vertical-align: -2px; color: var(--ins-info-text-emphasis); }
.wochenschicht .plaetze { margin-left: auto; display: inline-flex; align-items: center; }
.wochenschicht .plaetze > span { display: flex; }
.wochenschicht .plaetze .belegt { color: var(--ins-success); }
.wochenschicht .plaetze .belegt svg { fill: currentColor; }
.wochenschicht .plaetze .frei { color: var(--ins-gray-500); }
.wochenschicht .plaetze .zahl {
  margin-right: 2px;
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
}
.wochenschicht .rolle {
  flex: 1 0 100%;
  min-width: 0;
  font-size: var(--ins-font-size-xxs);
  color: var(--ins-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Eine Zeile je Platz, belegt oder frei – beide gleich hoch, damit die Karte
   nicht springt, wenn jemand eingeteilt wird. */
.wochenschicht .namen { display: flex; flex-direction: column; padding: 3px 5px 4px; }
.wochenschicht .name {
  font-size: var(--ins-font-size-xs);
  line-height: 19px;
  color: var(--ins-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wochenschicht .name.person { font-weight: 700; color: var(--ins-success-text-emphasis); }
.wochenschicht .name .vermerk { margin-left: 4px; vertical-align: -1px; color: var(--ins-warning); }
.wochenschicht .name.frei { font-size: var(--ins-font-size-xxs); color: var(--ins-danger-text-emphasis); }
/* Der freie Platz als gestrichelter Kreis – wie im Schichtpanel daneben. */
.wochenschicht .name.frei::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

/* Ohne Personenfilter sagt der Rahmen, wie die Schicht steht – dieselben drei
   Stufen wie auf der Zeitachse. */
.wochenschicht.st-offen { border-color: var(--ins-danger-border-subtle); border-style: dashed; }
.wochenschicht.st-teil { border-color: var(--ins-warning); }
.wochenschicht.st-voll { border-color: var(--ins-success-border-subtle); }

/* Was daneben herläuft, trägt sein Sinnbild und die Kopffarbe der Zeitachse. */
.wochenschicht.art-logistik > .kopf,
.wochenschicht.art-sonder > .kopf {
  background: var(--ins-info-bg-subtle);
  box-shadow: inset 3px 0 0 var(--ins-info);
}

/* Mit Personenfilter gehört die Farbe der Person – wie auf der Zeitachse.
   Dieselbe Spezifität wie die Schichtart, aber später: die Person gewinnt. */
.wochenschicht.p-kann { border-color: var(--ins-primary); }
.wochenschicht.p-kann > .kopf { background: var(--ins-primary-bg-subtle); box-shadow: none; }
.wochenschicht.p-eingeteilt { border-color: var(--ins-success-text-emphasis); }
.wochenschicht.p-eingeteilt > .kopf { background: var(--ins-success-text-emphasis); box-shadow: none; }
.wochenschicht.p-eingeteilt > .kopf .zeit,
.wochenschicht.p-eingeteilt > .kopf .rolle,
.wochenschicht.p-eingeteilt > .kopf .artsinn,
.wochenschicht.p-eingeteilt > .kopf .plaetze > span { color: #fff; }
.wochenschicht.p-abruf { border-color: var(--ins-warning-text-emphasis); border-style: dashed; }
.wochenschicht.p-abruf > .kopf { background: var(--ins-warning-bg-subtle); box-shadow: none; }
.wochenschicht.p-gesperrt { border-color: var(--ins-danger); }
.wochenschicht.p-gesperrt > .kopf {
  box-shadow: none;
  background-color: var(--ins-danger-bg-subtle);
  background-image: repeating-linear-gradient(135deg,
    rgba(var(--ins-danger-rgb), .18) 0 3px, transparent 3px 7px);
}
.wochenschicht.p-nein { opacity: .45; }

.wochenschicht.gewaehlt { border-color: var(--ins-gray-700); box-shadow: 0 0 0 2px var(--ins-gray-700); }

/* Am Handy passen sieben Spalten nicht nebeneinander, und Wischen durch Tage
   ohne Markt hilft niemandem. Dort wird aus der Woche eine Liste ihrer
   Markttage, die Schichten eines Tages stehen als Kacheln nebeneinander. */
@media (max-width: 767.98px) {
  .wochenspalten { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .tagspalte { padding: 0 10px 10px; border-right: 0; border-bottom: 1px solid var(--ins-border-color); }
  .tagspalte:last-child { border-bottom: 0; }
  .tagspalte.ohne { display: none; }
  .tagkopf {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    text-align: left;
  }
  .tagkopf .tagstand { margin-top: 0; margin-left: auto; }
  .tagschichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 6px; }
}

/* Seitenleiste „Offene Schichten": Sprungliste in den Wochenplan. */
.offenliste { display: flex; flex-direction: column; }
.offenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 6px var(--ins-card-spacer-x);
  font: inherit;
  text-align: left;
  color: var(--ins-body-color);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ins-border-color-translucent);
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.offenzeile:last-child { border-bottom: 0; }
.offenzeile:hover { background: var(--ins-tertiary-bg); }
.offenzeile.aktiv { background: var(--ins-primary-bg-subtle); }
.offenzeile .wann { display: flex; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offenzeile .dat { font-weight: 600; color: var(--ins-gray-800); }
.offenzeile .rolle {
  grid-column: 1;
  font-size: var(--ins-font-size-xxs);
  color: var(--ins-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offenzeile .rolle:empty { display: none; }
.offenzeile .fehlt {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  color: var(--ins-danger-text-emphasis);
  white-space: nowrap;
}

/* --- Detailspalte: die gewählte Schicht ------------------------------------ */

.detailkopf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--ins-card-spacer-x) 14px;
  border-bottom: 1px solid var(--ins-sidenav-item-border-color);
}
.detailkopf .reihe { flex-wrap: nowrap; }
.detailkopf .micro { line-height: 30px; }
.detailkopf .wachsen { flex: 1 1 auto; }
.detailtitel { font-weight: 600; color: var(--ins-sidenav-item-active-color); }
.panelzeit {
  font-size: var(--ins-h3-font-size);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ins-gray-800);
  font-variant-numeric: tabular-nums;
}
.panelabschnitt {
  padding: var(--ins-spacer-2) var(--ins-card-spacer-x);
  border-bottom: 1px solid var(--ins-sidenav-item-border-color);
}
.panelabschnitt .micro { margin-bottom: 6px; }
.detailspalte .kandidat { background: var(--ins-secondary-bg); }
.detailspalte .leer { padding: var(--ins-spacer-4) var(--ins-card-spacer-x); }
.detailblaettern { display: flex; flex-direction: column; gap: 8px; padding: var(--ins-spacer-3) var(--ins-card-spacer-x); }
.detailblaettern .knopf { justify-content: center; background: var(--ins-secondary-bg); }
/* Die gewählte Person und diese Schicht – ganz oben, weil das die Frage ist. */
.panelabschnitt.fokus { display: flex; flex-direction: column; gap: 8px; background: var(--ins-secondary-bg); }
.panelabschnitt.fokus p { margin: 0; }
.standmarke {
  padding: 3px 8px;
  border-radius: var(--ins-border-radius);
  font-size: var(--ins-font-size-xxs);
  font-weight: 700;
  white-space: nowrap;
}
.standmarke.p-kann { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }
.standmarke.p-eingeteilt { background: var(--ins-success-text-emphasis); color: #fff; }
.standmarke.p-abruf { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }
.standmarke.p-nein { background: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis); }

.platzzeile { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.platzzeile .wachsen { flex: 1 1 auto; min-width: 0; }
/* Die Polsterung steht ausdrücklich da: „offen" lag früher auf der
   allgemeinen Klasse „leer", und deren Polsterung machte aus dem Kreis ein Ei. */
.platzpunkt {
  flex: none;
  box-sizing: border-box;
  padding: 0;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  background: var(--ins-primary-bg-subtle);
  color: var(--ins-primary-text-emphasis);
}
.platzpunkt.offen { background: transparent; border: 1px dashed var(--ins-gray-400); }

/* --- Team ---------------------------------------------------------------- */

/* Ohne eigenen Rollbereich: alle Mitarbeiter stehen untereinander, gerollt wird die Seite. */
.teamliste { display: flex; flex-direction: column; }
.teamzeile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 7px var(--ins-card-spacer-x);
  font: inherit;
  text-align: left;
  color: var(--ins-body-color);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ins-border-color-translucent);
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.teamzeile:last-child { border-bottom: 0; }
.teamzeile:hover { background: var(--ins-tertiary-bg); }
.teamzeile.aktiv { background: var(--ins-primary-bg-subtle); }
.teamzeile .zeile { display: flex; justify-content: space-between; gap: 8px; }
.teamzeile .name { font-weight: 500; color: var(--ins-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teamzeile .std { font-size: var(--ins-font-size-xxs); font-variant-numeric: tabular-nums; color: var(--ins-secondary-color); }
.teamzeile .balken { height: 3px; }

/* Zeilen, die auch andere Ansichten benutzen (Vertretungen, Ist-Zeiten, Team). */
.ma-zeile {
  display: flex;
  width: 100%;
  gap: 8px;
  padding: 10px var(--ins-card-spacer-x);
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ins-border-color-translucent);
  cursor: pointer;
  transition: var(--ins-transition-btn);
}
.ma-zeile:last-child { border-bottom: 0; }
.ma-zeile:hover { background: var(--ins-tertiary-bg); }
.ma-zeile.aktiv { background: var(--ins-primary-bg-subtle); }
.ma-zeile .wachsen { flex: 1 1 auto; min-width: 0; }
.ma-zeile .name {
  font-weight: 500;
  color: var(--ins-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-zeile .balken { margin: 4px 0; }
.ma-zeile .unter { font-size: var(--ins-font-size-xxs); color: var(--ins-secondary-color); }

.zugeordnet, .kandidat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  background: var(--ins-light-bg-subtle);
}
.zugeordnet .wachsen, .kandidat .wachsen { flex: 1 1 auto; min-width: 0; }
.kandidat.blockiert { opacity: .6; }
.kandidat .knopf { flex: 0 0 auto; }

/* Der Name führt zur Person: auswählen filtert das Raster und zeigt ihre
   Auslastung in der Mitarbeiterliste. */
.namensknopf {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ins-gray-800);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.namensknopf:hover { color: var(--ins-primary); text-decoration: underline; }

/* Marktzeile (Übersicht) */
.marktzeile { display: flex; align-items: center; gap: var(--ins-spacer-2); }
/* ============================================================================
   Hilfsklassen
   ========================================================================== */

.gedaempft { color: var(--ins-secondary-color); }
.stark { font-weight: 600; color: var(--ins-gray-800); }
.micro { font-size: var(--ins-font-size-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ins-secondary-color); }
.klein { font-size: var(--ins-font-size-xs); }
.rechts { text-align: right; }
.mittig { text-align: center; }
.nowrap { white-space: nowrap; }
.abstand-oben { margin-top: var(--ins-spacer-3); }
.abstand-unten { margin-bottom: var(--ins-spacer-3); }
.kein-abstand { margin: 0; }
.ok { color: var(--ins-success); }
.warn { color: var(--ins-warning); }
.schlecht { color: var(--ins-danger); }
.gut { color: var(--ins-primary); }

@media print {
  .leiste, .kopfzeile, .kontextspalte, .detailspalte, .seitenkopf .aktionen, .knopf { display: none !important; }
  .inhaltsseite { margin: 0; padding: 0; }
  .karte { border: 0; }
  body { background: #fff; }
}

/* ============================================================================
   Mitarbeiter-Übersicht und „Als Mitarbeiter ansehen"
   ========================================================================== */

.vorschauleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--ins-spacer-2);
  padding: 8px var(--ins-spacer-3);
  background: var(--ins-warning-bg-subtle);
  border-bottom: 1px solid var(--ins-warning);
  color: var(--ins-warning-text-emphasis);
  font-size: var(--ins-font-size-sm);
}
.vorschauleiste .wachsen { flex: 1 1 auto; min-width: 0; }
.vorschauleiste .knopf { background: var(--ins-warning); border-color: var(--ins-warning); color: #fff; white-space: nowrap; }

table.stammdaten th { width: 1%; white-space: nowrap; font-weight: 500; }
table.stammdaten td, table.stammdaten th { vertical-align: middle; }
.ma-zeile a.name { color: inherit; font-weight: 600; text-decoration: none; }
.ma-zeile a.name:hover { color: var(--ins-primary-text-emphasis); text-decoration: underline; }

/* Einstellungen: langer Text (Einladungsmail) */
textarea.langtext { width: 100%; min-height: 24rem; font: inherit; line-height: 1.5; resize: vertical; }
.feldspalte { display: flex; flex-direction: column; gap: var(--ins-spacer-2); }
.feldspalte .feld { width: 100%; }

/* ============================================================================
   Personalfragebogen: Schrittleiste, Meldungen am Feld, Jobs, Unterschrift
   ========================================================================== */

/* Neun Schritte in einer Leiste; auf dem Handy brechen sie um, Titel nur beim aktuellen. */
.schrittleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--ins-spacer-3);
  padding: 0;
  list-style: none;
}
.schrittleiste .schritt button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--ins-border-color);
  border-radius: 999px;
  background: var(--ins-secondary-bg);
  color: var(--ins-body-color);
  font: inherit;
  font-size: var(--ins-font-size-sm);
  cursor: pointer;
}
.schrittleiste .nummer {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ins-light);
  color: var(--ins-gray-800);
  font-size: 12px;
  font-weight: 600;
}
.schrittleiste .schritt.aktiv button { border-color: var(--ins-primary); font-weight: 600; }
.schrittleiste .schritt.aktiv .nummer { background: var(--ins-primary); color: #fff; }
.schrittleiste .schritt.ok .nummer { background: var(--ins-primary-bg-subtle); color: var(--ins-primary-text-emphasis); }
.schrittleiste .schritt.gelb .nummer { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }
.schrittleiste .schritt.rot .nummer { background: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis); }
@media (max-width: 899px) {
  .schrittleiste .schritt:not(.aktiv) .titel { display: none; }
  .schrittleiste .schritt:not(.aktiv) button { padding-right: 4px; }
}

.fbkarte > .fuss { padding-top: var(--ins-spacer-2); padding-bottom: var(--ins-spacer-2); }
.fbnavi { display: flex; align-items: center; gap: var(--ins-spacer-2); }
.fbnavi > span:nth-child(2) { flex: 1 1 auto; text-align: center; }
.fbschritt > p { margin: 0 0 var(--ins-spacer-2); }
.fbliste-punkte { margin: 0 0 var(--ins-spacer-2); padding-left: 1.2rem; }

/* Auswahl als Liste von Kreisen; die Frage steht darüber. */
fieldset.wahlfeld { border: 0; margin: 0 0 var(--ins-spacer-3); padding: 0; min-width: 0; }
fieldset.wahlfeld > legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 500;
  color: var(--ins-gray-800);
}
.wahl { display: flex; flex-wrap: wrap; gap: 0 var(--ins-spacer-3); }
.wahl .hakenfeld { margin-bottom: 6px; }
fieldset.wahlfeld > small { display: block; margin-top: 2px; color: var(--ins-secondary-color); }
.feld > .hakenfeld { margin-bottom: 0; }
.feld > .hakenfeld + small { margin-top: 4px; }

/* Meldungen direkt am Feld: rot = kann nicht stimmen, gelb = bitte bestätigen. */
.fbmeldung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--ins-spacer-2);
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--ins-border-radius);
  font-size: var(--ins-font-size-sm);
  font-weight: 400;
}
.fbmeldung.rot { background: var(--ins-danger-bg-subtle); color: var(--ins-danger-text-emphasis); }
.fbmeldung.gelb { background: var(--ins-warning-bg-subtle); color: var(--ins-warning-text-emphasis); }
.fbmeldung > span { flex: 1 1 16rem; }
.fbmeldung .hakenfeld.stimmt, .fbhinweisliste .hakenfeld.stimmt { margin: 0; font-weight: 600; white-space: nowrap; }
/* Zustand am Feld schlägt die allgemeine Eingaberegel (deren :not()-Kette wiegt schwerer). */
.feld.fehler input:not([type=checkbox]):not([type=radio]), .feld.fehler select { border-color: var(--ins-danger) !important; }
.feld.hinweis input:not([type=checkbox]):not([type=radio]), .feld.hinweis select { border-color: var(--ins-warning) !important; }
.fbhinweisliste li { margin-bottom: var(--ins-spacer-2); }
.fbhinweisliste .reihe { margin-top: 2px; }

/* Weitere Jobs */
.jobbereich { margin: var(--ins-spacer-2) 0 var(--ins-spacer-3); }
.jobliste { display: flex; flex-direction: column; gap: var(--ins-spacer-2); margin-bottom: var(--ins-spacer-2); }
.jobkarte {
  padding: var(--ins-spacer-2) var(--ins-spacer-3) 0;
  border: 1px solid var(--ins-border-color);
  border-radius: var(--ins-border-radius);
  background: var(--ins-tertiary-bg);
}
.jobkarte > .reihe { margin-bottom: var(--ins-spacer-2); }
.fbrechnung { margin-top: var(--ins-spacer-3); }
.fberklaerung p { margin: 0 0 var(--ins-spacer-2); }
.fbantrag p { margin: 6px 0 0; }

.fbdatenschutz, .fbdetails { border-top: 1px dashed var(--ins-border-color); padding-top: var(--ins-spacer-2); }
.fbdatenschutz summary, .fbdetails summary { cursor: pointer; font-weight: 600; color: var(--ins-gray-800); }
.fbdatenschutz p { margin: var(--ins-spacer-2) 0 0; color: var(--ins-secondary-color); }
.fbdetails { margin-top: var(--ins-spacer-3); }
.fbliste { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

/* Unterschrift: weisse Fläche, beim Zeichnen rollt die Seite nicht mit. */
.unterschriftfeld { max-width: 640px; }
canvas.unterschrift {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  border: 1px dashed var(--ins-gray-500, #adb5bd);
  border-radius: var(--ins-border-radius);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.unterschriftfeld > .reihe { margin-top: 6px; }
img.unterschriftbild { display: block; max-width: 100%; background: #fff; border: 1px solid var(--ins-border-color); border-radius: var(--ins-border-radius); }
table.tabelle tr.aktiv td { background: var(--ins-primary-bg-subtle); }
.fbpruefgitter { display: grid; gap: var(--ins-spacer-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fbpruefgitter { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
/* Am grossen Bildschirm bleibt das Formular lesbar schmal, statt über die ganze Breite zu laufen. */
.schrittleiste, .fbkarte, .fbstand { max-width: 900px; }
.fbfeld { margin-bottom: var(--ins-spacer-3); }
.fbfeld > .feld { margin-bottom: 0; }

/* Schlüsselplan: Tage, an denen es ohne Extrafahrt nicht aufgeht, sind hinterlegt. */
tr.zeile-problem > td { background: var(--ins-danger-bg-subtle); }
.fehlertext { color: var(--ins-danger-text-emphasis, var(--ins-danger)); }
.warntext { color: var(--ins-warning-text-emphasis); }