/* dandori (vormals Smart Workforce Planning) — das Aussehen der Anwendung, im Mock nachgebaut.
 *
 * Diese Datei ist die Antwort auf eine einzige Frage: Wie sieht das Produkt aus? Die Demo zeigte
 * bis 2026-09-10 einen eigenen Entwurf, danach den Stand von `feat(fe): rebuild the board on area x
 * window`: Icon-Schiene, Tagesleiste, Fenster-Karten im Raster, Abdeckungsring, Prüfbericht.
 *
 * SEIT 2026-10-01 DER STAND VON `feat/dandori-brand` (bcae130). Die Anwendung hat in diesen drei
 * Wochen fast jede Fläche umgebaut, und die Demo zieht nach:
 *   - Sie heisst „dandori", mit eigenem Logo; „Smart Workforce Planning" ist die Unterzeile. Ab dem
 *     Tablet steht die Marke am Kopf der Schiene (ow-styles `.ow-nav-rail`, Icon über Beschriftung).
 *     Die Kopfleiste der Anwendung trägt der Mock nicht (siehe unten).
 *   - Jede Seite nimmt die ganze Breite; `.ow-shell` hat keine Höchstbreite mehr.
 *   - Der Kopf der Planung trägt Name, Zustands-Etikett und das Menü hinter dem Pfeil; darunter EINE
 *     Werkzeugzeile mit Zeitraum, Abdeckungsleiste, Achsenschalter und „Automatisch besetzen".
 *   - Das Board zeichnet jede Bedarfszeile als Aufgaben-Karte über die ganze Breite (der Entwurf vom
 *     2026-09-30); der Abdeckungsring ist entfallen.
 *   - ow-style 3.0.11 statt 3.0.4: M-Schaltflächen sind 40px hoch statt 48px, Abschnittsflächen sind
 *     `.ow-card` statt des app-eigenen `.ow-panel`.
 *
 * DIE FARBWELT. Die Anwendung hat seit 2026-09-22 wieder einen Design-Umschalter und öffnet hell;
 * die Demo nimmt, was der Besucher in der Demo-Leiste gewählt hat (siehe `style/demo-tokens.scss`).
 *
 * QUELLE, NICHT INSPIRATION. Jede Klasse hier trägt den Namen, den sie in
 * `smart-workforce-planning-fe` trägt, und jeder Wert ist der dortige. Wer etwas ändert, ändert es
 * dort zuerst und trägt es hier nach — die Zeile darüber sagt jeweils, aus welcher Komponente sie
 * stammt. Gemessen wurde gegen die laufende Anwendung (`ng serve`, 1440px), nicht gegen die
 * Quelltexte allein: die Angular-Material-Schaltflächen sind 40px hoch und setzen ihre Beschriftung
 * 16px/700, was in keinem Stylesheet der Anwendung steht, sondern aus Material und ow-style kommt.
 *
 * ALLES IST AUF `.swp` GESCHACHTELT, UND DAS IST PFLICHT. Die Demo-Seite ringsherum ist das Portal,
 * mit eigenen `.card`-, `.chip`-, `.day`-Regeln in `app.css`. Die Anwendung benutzt dieselben Wörter
 * für andere Dinge. Ohne den Präfix würde jede zweite Regel hier eine Portal-Regel überschreiben oder
 * von ihr überschrieben. `.swp` ist zugleich der Ort, an dem `ow-tokens.css` die Token-Schicht setzt,
 * die die ANWENDUNG über die Bibliothek legt — ihre Ampel, ihre Typoskala, ihre Bedienhöhen. Ohne
 * die Klasse fehlt hier jeder zweite Wert.
 *
 * IN PIXELN, WO DIE ANWENDUNG REM SCHREIBT. Die Seite verankert ihre Wurzel bei 87.5% (`app.css`),
 * die Anwendung bei 16px; ein `32rem` von dort wäre hier 448px statt 512px.
 *
 * BEWUSSTE ABWEICHUNGEN von der Anwendung (bcae130), je eine Zeile mit ihrer Fix-Gruppe:
 *   - FG12: Die Abdeckungsleiste zählt Bedarfszeilen statt Fenster („offen" = Zeile mit Lücke).
 *   - FG12: Die Leiste nennt vorn ihren Tag („Fr 11 · 2 Zeilen", „Alle Tage · n Zeilen").
 *   - FG12: Die Meldung der Automatik hat „Offene Zeilen ansehen", das den Prüfbericht aufklappt.
 *   - FG12: Das Automatik-Sheet teilt die Handeinsätze in „von Ihnen" und „aus dem Beispielplan".
 *   - FG12: Das Automatik-Sheet nennt den Umfang (ganzer Plan, alle Tage) in der Unterzeile.
 *   - FG12: Der Prüfbericht einer Vorschau sagt „Geprüft: …" statt auf die Automatik zu verweisen.
 *   - FG12: Der Prüfbericht nennt einen Ort ohne doppelte Teile („Intensivstation Spät · Spätschicht").
 *   - FG12: „Nach Aufgabe" sagt „Einsatzzeit(en)" statt „Abdeckungsfenster".
 *   - FG14: Offene Zeilen tragen „Einteilen" als Pille (40px, Telefon 44px) statt des 24px-„+".
 *   - FG14: „Neue Aufgabe" ist umrandet mit Schloss statt gefüllt.
 *   - FG14: Automatisch gesetzte Chips sind getönt und tragen ein Zeichen, nicht nur gestrichelt.
 *   - FG14: Die Personenauswahl zeigt „· n ausgewählt" und eckige Marken bei Mehrfachwahl.
 *   - FG14: Der Hinweis über dem Board nennt „Einteilen" und „Automatisch besetzen".
 *   - FG15: Die Bestätigung „Plan veröffentlichen?" nennt offene Zeilen und fehlende Personen.
 *   - FG15: „Veröffentlicht" hat die Registrierung als gefüllten Knopf statt der Wege zum Teilen.
 *   - FG15: „Teilen" zeigt einen Beispiel-Link und eine Nachrichtenvorschau statt Kopieren/WhatsApp/Kalender.
 *   - Vorschau zeigt nur Mo 14.09. (`cases.*.previewDay`) [FG13] - App: keins, Vorschauen gibt es nur hier.
 *   - Vorschau-Chip öffnet eine Personenkarte (Rolle, Qualifikation, Stufe, Einsätze) [FG13] - App: im
 *     nur lesbaren Plan (veröffentlicht/vergangen/ohne Rechte) dieselbe Karte statt eines toten Chips.
 *   - Klick auf eine Vorschau-Karte zeigt einen Hinweis-Toast [FG13] - App: keins.
 *   - Brückensatz über dem Hinweis bei `?from=krankenhaus|halle` [FG13] - App: keins.
 *   - Veröffentlicht/Automatik-Marken/Ergebnis in `wfmDemo.session.v1` [FG16] - App: keins, hält der Server.
 *   - Achse, Tag, Prüfbericht je Fall in `sessionStorage` [FG16] - App: Board-Sicht (Achse, Tag,
 *     Bericht offen) in URL oder Sitzung halten, damit „Zurück" sie nicht verliert.
 *   - Toast hält an, solange Zeiger oder Fokus darauf sind [FG16] - App: die Snackbar mit
 *     „Rückgängig" beim Hover/Fokus anhalten (WCAG 2.2.1).
 *   - Toast steht oben, solange ein Sheet offen ist [FG16] - App: prüfen, ob die Snackbar Sheet-Knöpfe verdeckt.
 *   - „Demo zurücksetzen" mit „Rückgängig" statt ohne [FG16] - App: keins, dort gibt es kein Zurücksetzen.
 *   - Telefon: Leiste unten mit „Automatisch besetzen" und „Veröffentlichen"/„Teilen" [FG22] - App:
 *     Planungsseite auf dem Telefon mit Aktionsleiste über der Tab-Leiste.
 *   - Telefon: Name, Etikett und Menüpfeil in einer Zeile, Name gekürzt [FG22] - App: derselbe Kopf.
 *   - Telefon: Demo-Leiste ohne „Alle Szenarien", Zurücksetzen als Symbol [FG22] - App: keins (Demo-Chrom).
 *   - Touch: Menüeinträge 44px statt 32px hoch (2026-10-10) - App: Menüs auf dem Telefon prüfen.
 * NACHGEZOGEN (keine Abweichung): Prüfbericht über den ganzen Plan, Gründe offener Zeilen nach
 * „Automatisch besetzen" (FG12), ADR-0015 - Rollen- und Qualifikationszeilen als Anteil (FG23).
 * NACHGEZOGEN statt abgewichen: „Rückgängig" nach Zuteilen, Tauschen, Verschieben, Entfernen und
 * Automatik, wortgleich `feedback.*` [FG16] - die Bestätigung beim Entfernen bleibt, wie dort.
 *
 * Lädt NACH `ow-tokens.css` und NACH `app.css`. */

/* Das Icon-Set der Bibliothek. `elements/_icon.scss` deklariert diese Schrift, und diese Datei
   kompiliert die Demo nicht mit — die Datei selbst liegt aber in `fonts/`, weil `sync-ow-style.sh`
   den ganzen Ordner spiegelt. `font-display: block` wie dort: ein Ligatur-Icon, das als sein eigener
   Klartext („event_note") einblendet, ist schlimmer als eines, das kurz fehlt. */
@font-face {
  font-display: block;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* `tools/_symbol-icon.scss`, bis auf die Farbe: die Glyphe erbt sie, wie `<mat-icon>` in der
   Anwendung - in einem Knopf, einem Menüeintrag, dem aktiven Schienen-Eintrag. */
.swp .ow-icon {
  display: inline-block;
  direction: ltr;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: var(--ow-icon-size-m);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  font-variation-settings:
    'FILL' var(--ow-icon-props-axes-fill),
    'wght' var(--ow-icon-props-axes-weight),
    'GRAD' var(--ow-icon-props-axes-grade),
    'opsz' var(--ow-icon-props-axes-optical-size);
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ── Der Rahmen der Anwendung (`app.component.scss`) ───────────────────────── */

/* EINE SEITE, DIE NICHT SCROLLT, DAMIT DIE ANWENDUNG ES KANN.
   `app.css` gibt `body` ein `min-height: 100dvh` und sonst nichts, und eine Mindesthöhe ist keine
   Höhe: ein Flex-Container ohne bestimmte Höhe hat keinen freien Platz zu verteilen, also wächst
   ein `flex: 1`-Kind zu seinem Inhalt statt zum Rest des Fensters. Gemessen, nicht überlegt - auf
   einem 900px-Fenster stand `.swp` 1041px hoch, die Seite scrollte als Ganzes, und der innere
   Scroll-Bereich bekam nie etwas zu tun.
   Eine bestimmte Höhe auf den Board-Seiten löst beides. Das ist auch das, was die Anwendung selbst
   tut (`styles.scss`: `html, body { height: 100% }` und `body { overflow: hidden }`) - sie scrollt in
   ihrem Inhaltsbereich und nicht im Dokument. */
body.swp-page {
  height: 100dvh;
  overflow: hidden;
}

/* `:host` dort: eine Fläche von der Höhe des Fensters, die den Seitengrund malt und selbst nicht
   scrollt. Hier ist es das, was vom Fenster unter der Demo-Leiste übrig bleibt. Eine Zeile aus
   Schiene und Spalte, wie `.ow-layout` der Bibliothek. */
.swp {
  display: flex;
  /* Der Rest des Fensters unter der Demo-Leiste, ausgerechnet statt ausgemessen: `body` ist eine
     Spalte mit bestimmter Höhe (siehe `body.swp-page` oben - ohne die tut dieses `flex` nichts),
     also ist „alles, was übrig bleibt" genau ein `flex: 1`. */
  flex: 1 1 0%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Über der klebenden Demo-Leiste (z-index 20 in `app.css`). Beide überlappen im Ruhezustand
     nicht — die Seite selbst scrollt nicht —, aber ein Sheet ist `position: fixed` und liegt in
     DIESEM Stapelkontext: ohne die Zeile läge sein Schirm unter der Leiste. */
  z-index: 21;
  background: var(--ow-page-ground);
  color: var(--text-color);
  font-family: var(--ow-font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--ow-line-height-base);
  text-align: start;
}

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

.swp :focus-visible {
  outline: var(--ow-focus-width) solid var(--ow-focus-color);
  outline-offset: var(--ow-focus-offset);
}

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

/* `width` und `margin` stehen hier, weil `app.css` ein nacktes `main { width: min(1088px, 100% -
   40px); margin-inline: auto }` für die Portalseiten trägt und das sonst bis hier hinein reicht. */
.swp__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: auto;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.swp .ow-content-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Die Schiene (ow-styles `objects/_nav-rail.scss`, mit dem, was `sidenav.component.scss` dazutut):
   eine 88px-Spalte, jeder Eintrag sein Icon in einem gerundeten Feld mit der Beschriftung darunter.
   Was hier steht und was nicht, sagt der Kommentar über der Schiene in den Seiten. */
.swp .ow-nav-rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--ow-spacing-16);
  width: 88px;
  height: 100%;
  overflow-y: auto;
  padding: var(--ow-spacing-16) var(--ow-spacing-8);
  border-right: 1px solid var(--border-color);
  background: var(--ow-background-base-default);
}

.swp .ow-nav-rail__item {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: var(--ow-spacing-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ow-text-base-default);
  text-decoration: none;
  cursor: pointer;
}

/* Hover und Auswahl sind ein gerundetes Quadrat hinter dem ICON, nicht hinter dem ganzen Eintrag
   (Figma „Icon Button M": 40px um eine 24px-Glyphe). */
.swp .ow-nav-rail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ow-control-height-button-m);
  height: var(--ow-control-height-button-m);
  padding: var(--ow-spacing-8);
  border-radius: var(--ow-radius-8);
  font-size: var(--ow-icon-size-m);
  transition: background-color 120ms ease;
}

.swp .ow-nav-rail__label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--ow-typography-label-small-font-size);
  font-weight: var(--ow-typography-label-small-font-weight);
  line-height: var(--ow-typography-label-small-line-height);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swp .ow-nav-rail__item:hover .ow-nav-rail__icon {
  background: var(--bg-color-hover);
}

/* Der aktive Eintrag behält die Beschriftung in der Textfarbe und färbt nur die Glyphe. */
.swp .ow-nav-rail__item[aria-current='page'] .ow-nav-rail__icon {
  color: var(--ow-icon-nav-active);
  background: var(--bg-color-hover);
}

.swp .ow-nav-rail__item:focus-visible {
  outline: none;
}

.swp .ow-nav-rail__item:focus-visible .ow-nav-rail__icon {
  color: var(--ow-text-action-on-action);
  background: var(--ow-background-action-default);
}

/* Logo und Name am Kopf der Schiene, von den Zielen durch eine Linie getrennt. Wie jedes Logo führt
   es nach Hause: in der Anwendung zu den Planungen, hier zu den Szenarien. */
.swp .rail-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ow-space-hair);
  padding-block-end: var(--space-sm);
  margin-block-end: var(--space-xs);
  border-bottom: 1px solid var(--border-color);
  color: inherit;
  text-decoration: none;
}

.swp .rail-brand:focus-visible {
  border-radius: var(--border-radius-small);
}

/* Ein Hintergrund und kein `<img>`: das Logo ist Schmuck neben dem Namen, für den es steht. */
.swp .rail-brand__mark {
  flex: none;
  width: var(--ow-control-height);
  height: var(--ow-control-height);
  background: url('../../images/dandori-logo.svg') center / contain no-repeat;
}

.swp .rail-brand__name {
  color: var(--text-color);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--ow-line-height-tight);
}

/* KEINE KOPFLEISTE. Die Anwendung trägt über dem Inhalt eine 56px-Leiste, ab dem Tablet leer bis auf
   Design und Abmelden, auf dem Telefon mit der Marke. Im Mock lag sie als leerer grauer Streifen
   direkt unter der Demo-Leiste - zwei Kopfzeilen übereinander, von denen eine nichts trägt. Die
   Marke steht in der Schiene und in der Demo-Leiste, Design und Sprache auch dort; die Leiste
   entfällt deshalb ganz, auf jeder Breite. */

/* Die Fusszeile (`footer.component.scss`). */
.swp .foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-color-surface);
  color: var(--text-color-muted);
  font-size: var(--font-size-xs);
}

.swp .foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

.swp .foot__links a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--ow-touch-target);
  color: var(--text-color-muted);
  white-space: nowrap;
}

.swp .foot__links a:hover,
.swp .foot__links a:focus-visible {
  color: var(--text-color);
}

/* ── Objekte (`styles/objects/`, ow-styles `components/_card.scss`) ────────── */

/* Der Rahmen jeder Seite. Er spannt den ganzen Inhaltsbereich, auf jedem Monitor: ein Board gewinnt
   an der Breite, und Prosa, die nicht lang laufen soll, begrenzt ihr eigenes Mass. */
.swp .ow-shell {
  width: calc(100% - (2 * var(--ow-shell-gutter)));
  margin-inline: auto;
}

/* Die Abschnittsfläche: ow-styles Karte, erhaben und umrandet, mit dem Polster, das die Anwendung
   ihr gibt (`objects/_card.scss`: 24px statt der 12px der Bibliothek). Ersetzt das app-eigene
   `.ow-panel`, das seinen Namen mit dem Inspektor-Panel der Bibliothek teilte. */
.swp .ow-card {
  --ow-card-padding: var(--space-xl);

  display: flex;
  flex-direction: column;
  padding: var(--ow-card-padding);
  background-color: var(--ow-card-surface, var(--ow-background-base-sunken));
  border-radius: var(--ow-card-radius, var(--ow-radius-16));
}

.swp .ow-card--raised {
  --ow-card-surface: var(--ow-background-base-default);
}

.swp .ow-card.ow-card--outlined {
  border: var(--ow-border-width-1) solid var(--ow-card-border-color, var(--ow-border-base-strong));
}

/* ── Angular Material, soweit der Mock es braucht ──────────────────────────── */
/* Drei Schaltflächen-Varianten. Die Werte sind an der laufenden Anwendung gemessen: seit ow-style
   3.0.11 40px hoch, 16px/700 Beschriftung, 8px Ecke, 16px Polsterung. Die Umrandung ist
   `--ow-control-border-color` und nicht die Kartenkante — ein ruhender Umriss ist das Einzige,
   woran die Schaltfläche zu erkennen ist, und WCAG 1.4.11 verlangt dort 3:1. */
.swp .mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--ow-control-height-button-m);
  min-width: 64px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: transparent;
  /* Der Fliesstext und nicht die Aktionsfarbe: ow-style zieht Materials `primary` auf die Fläche
     zurück, gemessen an der laufenden Anwendung. */
  color: var(--text-color);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ow-duration-fast) var(--ow-easing-standard);
}

.swp .mbtn .ow-icon {
  font-size: 18px;
}

.swp .mbtn:hover:not(:disabled) {
  background-color: var(--bg-color-hover);
}

.swp .mbtn--filled {
  background-color: var(--ow-background-action-default);
  color: var(--ow-text-action-on-action);
}

.swp .mbtn--filled:hover:not(:disabled) {
  background-color: var(--ow-background-action-hover);
}

.swp .mbtn--outlined {
  border: 1px solid var(--ow-control-border-color);
  color: var(--text-color);
}

.swp .mbtn:disabled {
  background-color: var(--bg-color-disabled);
  color: var(--text-color-disabled);
  cursor: not-allowed;
}

.swp .mbtn--filled.is-destructive,
.swp .mbtn--filled.is-override {
  background-color: var(--error-color);
  color: var(--on-red-color);
}

/* Jemanden bestätigen, den die Stammdaten der Zeile nicht tragen: auch eine Übersteuerung, eine
   Stufe milder (`assign-sheet.component.scss`). */
.swp .mbtn--filled.is-override-soft {
  background-color: var(--warning-color);
  color: var(--on-warning-color);
}

/* Ein ow-style-Feld der Grösse M (`.ow-field--m`, `appearance="outline"`): 48px, die versenkte
   Fläche, 8px Ecke. Die Demo hat kein Material, also ist es ein Kasten in derselben Form. */
.swp .ow-field {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 48px;
  padding: 0 var(--space-md);
  border: 1px solid var(--ow-control-border-color);
  border-radius: var(--border-radius-small);
  background-color: var(--bg-color-surface);
  color: var(--text-color);
  font: inherit;
  font-size: 16px;
  text-align: start;
}

.swp .ow-field:focus-within {
  outline: var(--ow-focus-width) solid var(--ow-focus-color);
  outline-offset: -1px;
}

.swp .ow-field-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-color);
  font-size: var(--font-size-md);
}

/* ── Die Planungsseite (`plan-detail.component.scss`) ──────────────────────── */

.swp .detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}

.swp .detail__back {
  align-self: flex-start;
  min-height: var(--ow-touch-target);
  display: inline-flex;
  align-items: center;
  color: var(--text-color-muted);
  font-size: var(--font-size-sm);
}

/* Name, Zustand und Menü links, das Veröffentlichen rechts; auf dem Telefon bricht es darunter um. */
.swp .detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.swp .detail__name {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-width: 0;
}

/* `plan-name-field.component.scss`: Überschrift und Feld in derselben Grösse, damit der Wechsel
   zwischen beiden die Zeile nicht verschiebt. Die Überschrift ist der Knopf. */
.swp .name__title {
  display: flex;
  align-items: center;
  min-height: var(--ow-touch-target);
  margin: 0;
  font-family: var(--ow-font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.swp .name__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  min-height: var(--ow-touch-target);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  cursor: text;
}

.swp .name__button:hover {
  text-decoration: underline dotted var(--text-color-muted);
  text-underline-offset: 0.2em;
}

.swp .name__hint {
  flex: none;
  color: var(--text-color-muted);
  font-size: var(--font-size-md);
  opacity: 0;
}

.swp .name__button:hover .name__hint,
.swp .name__button:focus-visible .name__hint {
  opacity: 1;
}

@media (hover: none) {
  .swp .name__hint {
    opacity: 1;
  }
}

/* Das Zustands-Etikett (`publication-badge.component.scss`): ein kleines gefülltes Etikett, gefärbt
   nach dem Zustand - Violett für den Entwurf (noch nicht übergeben), Grün für veröffentlicht.
   Farbe und Wort, weil Farbe allein kein Zustand ist. */
.swp .badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.swp .badge {
  --ow-swp-badge-ink: var(--text-color-muted);

  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--ow-space-hair) var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  background-color: var(--bg-color-surface-variant);
  color: var(--ow-swp-badge-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.swp .badge::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ow-swp-badge-ink);
}

.swp .badge[data-state='DRAFT'] {
  --ow-swp-badge-ink: var(--ow-text-action-on-action);

  background-color: var(--ow-swp-badge-draft);
}

.swp .badge[data-state='PUBLISHED'] {
  --ow-swp-badge-ink: var(--ow-text-positive-on-positive);

  background-color: var(--ow-background-positive-default);
}

/* „Vorschau" gibt es nur in der Demo; es nimmt die neutrale Fassung, die die Anwendung für
   „Zurückgezogen" und „Vergangen" hat: umrandet, ohne Füllung, ohne Punkt. */
.swp .badge[data-state='PREVIEW'] {
  border-color: var(--border-color);
  background-color: transparent;
}

.swp .badge[data-state='PREVIEW']::before {
  content: none;
}

/* Der Pfeil zum Menü: ein `matIconButton`, 40px. */
.swp .detail__more {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ow-control-height-button-m);
  height: var(--ow-control-height-button-m);
  padding: var(--space-sm);
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: transparent;
  color: var(--text-color);
  cursor: pointer;
}

.swp .detail__more:hover {
  background-color: var(--bg-color-hover);
}

.swp .detail__publish {
  flex: 0 1 auto;
  min-width: 0;
}

.swp .publish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Der Vorschau-Streifen der Demo, auf der Abschnittsfläche der Anwendung. Er gehört zu keiner
   Komponente des Produkts; seine Klassen sind die des alten Veröffentlichungs-Streifens. */
.swp .pub {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.swp .pub__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 20rem;
}

/* Fliesstext in voller Grösse und Tinte (C-FG4): der Satz sagt, wo das Mitmachen geht, und war als
   13px in der leisen Tinte das, was man überliest. `--font-size-md` ist hier 14px, daher das 16px-Token. */
.swp .pub__hint {
  margin: 0;
  font-size: var(--ow-typography-body-large-font-size);
  color: var(--text-color);
}

.swp .pub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-left: auto;
}

/* ── Zustandsschirm (`state-panel.component.scss`) ─────────────────────────── */

.swp .state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  color: var(--text-color-muted);
}

.swp .state__icon {
  font-size: 40px;
  color: var(--text-color-disabled);
}

.swp .state__title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-color);
}

.swp .state__message {
  margin: 0;
  max-width: 42ch;
  font-size: var(--font-size-sm);
}

/* ── Das Board (`planning-board.component.scss`) ───────────────────────────── */

.swp .board {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Zeitraum, Leiste, dann die Bedienelemente an der fernen Kante. Es bricht um, statt zu scrollen:
   auf dem Telefon bekommt die Leiste eine eigene Zeile und die Bedienelemente die nächste. */
.swp .board__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.swp .board__overview {
  flex: 1 1 256px;
  max-width: 448px;
  min-width: min(100%, 256px);
}

.swp .board__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-start: auto;
}

.swp .board__add {
  align-self: flex-start;
}

/* Das Zeitraum-Feld (`plan-period-field.component.scss`): breit genug für zwei Daten und den
   Strich; vorn das Kalender-Icon, wie der Datumswähler der Anwendung es trägt. */
.swp .period {
  width: 272px;
  max-width: 100%;
  cursor: pointer;
}

.swp div.period {
  cursor: default;
}

.swp .period__icon {
  color: var(--text-color-muted);
}

.swp .period__value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Der Achsenschalter. Zwei Schaltflächen in einer Schiene und keine Reiter: darunter liegt EIN
   Bereich, und der wechselt nicht seine Identität, sondern nur seine Gruppierung. */
.swp .seg {
  display: inline-flex;
  padding: var(--ow-space-hair);
  border-radius: var(--border-radius-small);
  background-color: var(--bg-color-surface-variant);
}

.swp .seg__btn {
  min-height: var(--ow-touch-target);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: transparent;
  color: var(--text-color-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.swp .seg__btn.is-on {
  background-color: var(--bg-color-surface);
  color: var(--text-color);
  box-shadow: var(--ow-shadow-xs);
}

.swp .days {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  scrollbar-width: thin;
}

.swp .day {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ow-space-hair);
  position: relative;
  min-width: 52px;
  min-height: var(--ow-touch-target);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  background-color: var(--bg-color-surface-variant);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.swp .day.is-on {
  border-color: var(--primary-color);
  background-color: var(--ow-fill-primary);
}

.swp .day__weekday {
  font-size: var(--font-size-xs);
  letter-spacing: var(--ow-tracking-caps);
  text-transform: uppercase;
  color: var(--text-color-muted);
}

.swp .day__number {
  font-size: var(--font-size-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--ow-line-height-tight);
}

/* „Alle Tage" in einer Zeile, im Gewicht des Chips. */
.swp .day__all {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Der Punkt wiederholt das schlechteste Urteil des Tages, damit die Leiste „welcher Tag hat ein
   Problem?" beantwortet, ohne dass jemand jeden Tag öffnen muss. */
.swp .day[data-indicator]::after {
  content: '';
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  width: 6px;
  height: 6px;
  border-radius: var(--ow-border-radius-pill);
}

.swp .day[data-indicator='GREEN']::after {
  background-color: var(--success-color);
}

.swp .day[data-indicator='OPEN']::after {
  background-color: var(--warning-color);
}

.swp .day[data-indicator='AMBER']::after {
  background-color: var(--warning-color);
  outline: 1px solid var(--warning-color);
  outline-offset: 1px;
}

.swp .day[data-indicator='RED']::after {
  background-color: var(--error-color);
}

/* Tippen-und-Ablegen, sichtbar gemacht: was in der Hand liegt, und wie man es wieder hinlegt. */
.swp .holding,
.swp .outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-small);
  background-color: var(--ow-fill-primary);
  font-size: var(--font-size-sm);
}

.swp .holding__text,
.swp .outcome__text {
  flex: 1 1 12rem;
  margin: 0;
}

.swp .holding__cancel,
.swp .outcome__dismiss {
  min-height: var(--ow-touch-target);
  padding-inline: var(--space-sm);
  border: 0;
  border-radius: var(--border-radius-small);
  background-color: transparent;
  color: var(--primary-color);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Bleibt im Blick, während die Planerin zum Ziel scrollt. */
.swp .holding {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
}

.swp .outcome {
  border-color: var(--border-color);
  background-color: var(--bg-color-surface-variant);
}

/* Eine Folge von Karten 8px auseinander unter „Nach Zeit", wie der Entwurf sie zeichnet; die
   Bereiche unter „Nach Aufgabe" behalten Luft zwischen sich. */
.swp .board__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.swp .board__groups.is-by-area {
  gap: var(--space-lg);
}

.swp .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.swp .group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}

.swp .group__title {
  margin: 0;
  font-family: var(--ow-font-family-display);
  font-size: var(--font-size-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swp .group__sub,
.swp .group__count {
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .group__sub {
  margin: 0;
}

.swp .group__count {
  margin-inline-start: auto;
}

/* Der Tag, auf dem eine Folge von „Nach Zeit"-Karten liegt, solange alle Tage zu sehen sind. */
.swp .group__day {
  margin: var(--space-sm) 0 0;
  color: var(--text-color-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--ow-tracking-caps);
  text-transform: uppercase;
}

/* Eine Spalte von Aufgaben-Karten über die ganze Breite, auf jedem Bildschirm, in Zeitfolge. */
.swp .group__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Bedarf und Besetzung (`board-overview.component.scss`) ────────────────── */
/* Die Leiste und ihre Legende und sonst nichts: sie steht in der Werkzeugzeile neben den
   Bedienelementen und wird im Vorbeigehen gelesen. */

.swp .overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Was noch offen ist, ist die Bahn selbst - die Leiste liest sich von links gefüllt. */
.swp .bar {
  display: flex;
  height: 5px;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--bg-color-surface-variant);
  overflow: hidden;
}

.swp .bar__part[data-kind='full'] {
  background-color: var(--success-color);
}

.swp .bar__part[data-kind='open'] {
  background-color: var(--warning-color);
}

.swp .bar__part[data-kind='conflict'] {
  background-color: var(--error-color);
}

.swp .overview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.swp .legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.swp .legend__item::before {
  content: '';
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--ow-border-radius-pill);
}

.swp .legend__item[data-kind='full']::before {
  background-color: var(--success-color);
}

.swp .legend__item[data-kind='open']::before {
  background-color: var(--warning-color);
}

.swp .legend__item[data-kind='conflict']::before {
  background-color: var(--error-color);
}

/* Hohl, weil „offen" die leere Bahn der Leiste ist und keine eigene Farbe. */
.swp .legend__item[data-kind='empty']::before {
  border: 1px solid var(--text-color-disabled);
}

/* ── Die Aufgaben-Karte (`board-window-card.component.scss`) ───────────────── */
/* Der Entwurf vom 2026-09-30: wann links, was und wer in der Mitte, das Urteil oben rechts und die
   Zahl unten rechts. Gemessen gegen den Entwurf in seiner eigenen Rahmenbreite: 84px hohe Karten,
   8px auseinander. Die Masse, für die die Skala kein Wort hat: die 24px-Marken (Urteil, `+`, Chip),
   das runde × des Chips, die Punkte, 6px zwischen Titel und Personen, 12px Ecke. */

.swp .task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'when title status'
    'when people coverage';
  column-gap: var(--space-md);
  row-gap: 6px;
  align-items: start;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--ow-swp-task-surface);
  box-shadow: var(--box-shadow-sm);
}

/* Hierher springt der Fokus, wenn der Prüfbericht die Planerin zu diesem Fenster schickt. */
.swp .task:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.swp .task__when {
  grid-area: when;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.swp .task__start {
  color: var(--text-color);
  font-size: var(--ow-font-size-scale-02);
  font-weight: 700;
  line-height: var(--ow-line-height-tight);
}

.swp .task__duration {
  color: var(--text-color-muted);
  font-size: var(--ow-font-size-scale-01);
  line-height: var(--ow-line-height-tight);
}

.swp .task__title {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
  margin: 0;
  min-width: 0;
  color: var(--text-color);
  font-family: var(--ow-font-family-display);
  font-size: var(--ow-font-size-scale-03);
  font-weight: 500;
  line-height: var(--ow-line-height-tight);
  letter-spacing: -0.01em;
}

.swp .task__line {
  color: var(--text-color-muted);
  font-size: var(--ow-font-size-scale-02);
  font-weight: 400;
}

/* Das Urteil: ein gefüllter Haken, wenn fertig, ein Ring mit Punkt, solange Plätze offen sind, ein
   Ausrufezeichen für eine Übersteuerung (gelb) oder eine Doppelbelegung (rot) - je eine Form, nicht
   nur eine Farbe. */
.swp .task__status {
  grid-area: status;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ow-border-radius-pill);
  color: var(--on-primary-color);
}

.swp .task__status[data-status='GREEN'] {
  background-color: var(--ow-swp-task-done);
}

.swp .task__status[data-status='OPEN'] {
  border: 4px solid var(--ow-swp-task-open);
  background-color: var(--ow-swp-task-surface);
}

.swp .task__status[data-status='OPEN']::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--ow-swp-task-open);
}

.swp .task__status[data-status='AMBER'] {
  background-color: var(--warning-color);
  color: var(--on-warning-color);
}

.swp .task__status[data-status='RED'] {
  background-color: var(--error-color);
  color: var(--on-red-color);
}

.swp .task__status-icon {
  font-size: var(--ow-font-size-scale-03);
  font-weight: 700;
}

.swp .task__status-mark {
  font-size: var(--ow-font-size-scale-02);
  font-weight: 700;
  line-height: 1;
}

.swp .task__people {
  grid-area: people;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.swp .task__hint {
  margin: 0;
  color: var(--text-color-muted);
  font-size: var(--font-size-sm);
}

.swp .task__coverage {
  grid-area: coverage;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--text-color-muted);
  font-size: var(--ow-font-size-scale-01);
  line-height: var(--ow-line-height-tight);
  white-space: nowrap;
}

.swp .dots {
  display: flex;
  gap: var(--space-xs);
}

.swp .dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--ow-swp-task-surface);
}

.swp .dot.is-filled {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

/* Eine Person auf der Zeile: der Name und ein rundes ×. Der Chip selbst öffnet das Menü der Person. */
.swp .chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline-end: var(--ow-space-hair);
  border: 1px solid var(--border-color);
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--ow-background-base-sunken);
  color: var(--text-color);
}

.swp .chip__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 100%;
  padding: 0 var(--space-xs) 0 10px;
  border: 0;
  border-radius: var(--ow-border-radius-pill);
  background-color: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--ow-font-size-scale-01);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

/* Ohne × daneben (die Vorschau): gleiches Polster auf beiden Seiten. Seit C-FG4 öffnet auch dieser
   Chip etwas - die Personenkarte -, also bleibt der Zeiger der eines Knopfes. */
.swp .chip__pick:only-child {
  padding-inline-end: 10px;
}

.swp .chip__name {
  white-space: nowrap;
}

/* Von der Automatik gesetzt: ein neuer Lauf ersetzt es, also ist der Umriss gestrichelt; das Menü
   sagt es in Worten. */
.swp .chip.is-generated {
  border-style: dashed;
}

.swp .chip.is-flagged {
  border-color: var(--warning-color);
  background-color: var(--ow-fill-warning);
}

.swp .chip.is-conflict {
  border-color: var(--error-color);
  background-color: var(--ow-fill-danger);
}

.swp .chip.is-held {
  border-color: var(--primary-color);
  border-style: solid;
  background-color: var(--ow-fill-primary);
}

/* Die eigene Marke des Chips, damit eine markierte Person ohne Farbe zu finden ist. */
.swp .chip__flag {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--warning-color);
  color: var(--on-warning-color);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.swp .chip.is-conflict .chip__flag {
  background-color: var(--error-color);
  color: var(--on-red-color);
}

.swp .chip__remove {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--border-color);
  color: var(--text-color-muted);
  cursor: pointer;
}

.swp .chip__remove:hover {
  color: var(--error-color);
}

.swp .chip__remove-glyph {
  position: relative;
  display: block;
  width: var(--space-sm);
  height: var(--space-sm);
}

.swp .chip__remove-glyph::before,
.swp .chip__remove-glyph::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 0;
  border-top: 1.5px solid currentColor;
}

.swp .chip__remove-glyph::before {
  rotate: 45deg;
}

.swp .chip__remove-glyph::after {
  rotate: -45deg;
}

/* Das `+`: ein gefüllter runder Knopf in der Aktionsfarbe. Liegt ein Einsatz in der Hand, wird es
   zu „hierher verschieben" und sagt das mit einem Pfeil. */
.swp .req__action {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  cursor: pointer;
  transition: background-color var(--ow-duration-fast) var(--ow-easing-standard);
}

.swp .req__action:hover {
  background-color: var(--ow-background-action-hover);
}

.swp .req__action.is-placing {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.swp .req__action-icon {
  font-size: var(--ow-font-size-scale-03);
}

/* ── Die Menüs (`mat-menu`, gemessen an der laufenden Anwendung) ───────────── */
/* Eine Fläche unter dem Auslöser, 8px Ecke, Umriss und Materials Schatten; die Einträge 32px hoch.
   Davor eine unsichtbare Fläche über der ganzen Seite, die ein Klick daneben schliesst - das
   Overlay-Backdrop des CDK. */

.swp .menu-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.swp .menu-layer__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.swp .menu {
  position: fixed;
  min-width: 112px;
  max-width: 280px;
  padding: var(--space-xs);
  border: 1px solid var(--ow-border-base-strong);
  border-radius: var(--border-radius-small);
  background-color: var(--ow-background-base-default);
  color: var(--text-color);
  box-shadow:
    0 3px 1px -2px rgb(0 0 0 / 20%),
    0 2px 2px 0 rgb(0 0 0 / 14%),
    0 1px 5px 0 rgb(0 0 0 / 12%);
}

.swp .menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-md);
  line-height: 1.5;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

/* NUR IN DER DEMO (siehe Kopf): mit dem Finger sind 32px zu knapp. */
@media (pointer: coarse) {
  .swp .menu__item {
    min-height: 44px;
  }
}

.swp .menu__item:hover,
.swp .menu__item:focus-visible {
  background-color: var(--bg-color-hover);
}

.swp .menu__icon {
  flex: none;
  font-size: 24px;
}

/* Der Kopf des Personen-Menüs: wer, wer eingeteilt hat, und was gegen den Einsatz spricht. */
.swp .chip-menu__head {
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-hair);
  max-width: 270px;
  padding: var(--space-sm) var(--space-lg);
}

.swp .chip-menu__name {
  margin: 0;
  font-weight: 600;
}

.swp .chip-menu__origin,
.swp .chip-menu__notice {
  margin: 0;
  color: var(--text-color-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.swp .chip-menu__notice {
  color: var(--warning-color);
}

.swp .chip-menu__notice.is-conflict {
  color: var(--error-color);
}

/* ── Der Prüfbericht (`violation-report.component.scss`) ───────────────────── */

.swp .report {
  gap: var(--space-sm);
}

.swp .report__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--ow-touch-target);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.swp .report__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-hair);
}

.swp .report__title {
  font-family: var(--ow-font-family-display);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.swp .report__sub {
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

/* Ein gezeichnetes Winkelchen: ein gedrehtes Quadrat, damit ein Auf-/Zuklapper keine
   Icon-Abhängigkeit mitbringt. */
.swp .report__chevron {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--text-color-muted);
  rotate: 45deg;
  transition: rotate var(--ow-duration-fast) var(--ow-easing-standard);
}

.swp .report__head[aria-expanded='true'] .report__chevron {
  rotate: -135deg;
}

.swp .report__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.swp .report__section {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--ow-tracking-caps);
  text-transform: uppercase;
  color: var(--text-color-muted);
}

.swp .report__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
}

.swp .rules,
.swp .gaps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.swp .rule {
  border-left: 2px solid var(--error-color);
  border-radius: var(--border-radius-extra-small);
  background-color: var(--ow-fill-danger);
}

/* Eine Übersteuerung ist auf dem Board gelb und hier auch; rot bleibt die Doppelbelegung. */
.swp .rule[data-severity='notice'] {
  border-left-color: var(--warning-color);
  background-color: var(--ow-fill-warning);
}

/* Die ganze Zeile ist der Weg zu ihrem Fenster: ein echter Knopf, volle Breite, ein Tippziel hoch. */
.swp .rule__go,
.swp .gap__go {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-xs) var(--space-sm);
  width: 100%;
  min-height: var(--ow-touch-target);
  padding: var(--space-sm);
  border: 0;
  border-radius: var(--border-radius-extra-small);
  background-color: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: start;
  cursor: pointer;
}

.swp .gap__go {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.swp .rule__go:hover,
.swp .gap__go:hover {
  background-color: var(--bg-color-hover);
}

.swp .rule__type {
  font-weight: 600;
  color: var(--error-color);
}

.swp .rule[data-severity='notice'] .rule__type {
  color: var(--warning-color);
}

.swp .rule__where,
.swp .gap__where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .rule__where span + span::before,
.swp .gap__where span + span::before {
  content: '·';
  margin-right: var(--space-xs);
}

.swp .gap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-left: 2px solid var(--warning-color);
  border-radius: var(--border-radius-extra-small);
  background-color: var(--bg-color-surface-variant);
}

.swp .gap[data-type='UNFILLED'] {
  border-left-color: var(--error-color);
}

.swp .gap__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

.swp .gap__label {
  font-weight: 600;
}

.swp .gap__count {
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Grund und die Leute, um die es geht, sind ein Block und brechen zusammen um: sie zu nennen ist
   der Punkt, und eine Namensliste, die auf dem Telefon seitwärts scrollt, läse niemand. */
.swp .reason {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
}

.swp .reason__type {
  font-weight: 600;
}

.swp .reason__count {
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .reason__names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  color: var(--text-color-muted);
}

.swp .reason__name + .reason__name::before,
.swp .reason__more::before {
  content: '·';
  margin-right: var(--space-xs);
}

/* ── Das Sheet (`sheet.component.scss`) ────────────────────────────────────── */

.swp .sheet[hidden] {
  display: none;
}

/* Über der Tab-Leiste des Telefons (z-index 30 dort): ein Sheet, das darunter hereinglitt, verlor
   seinen Fuss an sie. Der Schirm nimmt diese Ebene, die Fläche die darüber. */
.swp .sheet__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  padding: 0;
  background-color: var(--bg-color-overlay);
  cursor: pointer;
}

/* Unter dem Tablet-Schritt kriecht das Sheet vom unteren Rand herauf; darüber ist es das, was es
   auf einem Schreibtisch immer war: eine Fläche in der Mitte des Bildschirms, 512px breit. */
.swp .sheet__surface {
  position: fixed;
  z-index: 41;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
  background: var(--ow-surface-panel);
  border-block-start: 1px solid var(--ow-surface-panel-border);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
  box-shadow: var(--ow-shadow-lg);
}

@media (min-width: 768px) {
  .swp .sheet__surface {
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: min(100% - var(--space-xl), 512px);
    border: 1px solid var(--ow-surface-panel-border);
    border-radius: var(--border-radius);
  }
}

.swp .sheet__grab {
  align-self: center;
  width: 36px;
  height: 4px;
  margin-bottom: var(--space-sm);
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--border-color);
}

@media (min-width: 768px) {
  .swp .sheet__grab {
    display: none;
  }
}

.swp .sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.swp .sheet__titles {
  flex: 1;
  min-width: 0;
}

.swp .sheet__title {
  margin: 0;
  font-family: var(--ow-font-family-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.swp .sheet__title:focus {
  outline: none;
}

.swp .sheet__sub {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .sheet__close {
  flex: none;
  width: var(--ow-touch-target);
  height: var(--ow-touch-target);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--ow-border-radius-pill);
  background-color: transparent;
  color: var(--text-color-muted);
  cursor: pointer;
}

.swp .sheet__close:hover {
  background-color: var(--bg-color-hover);
  color: var(--text-color);
}

.swp .sheet__close-glyph {
  position: relative;
  display: block;
  width: var(--space-md);
  height: var(--space-md);
}

.swp .sheet__close-glyph::before,
.swp .sheet__close-glyph::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 0;
  border-top: 1px solid currentColor;
}

.swp .sheet__close-glyph::before {
  rotate: 45deg;
}

.swp .sheet__close-glyph::after {
  rotate: -45deg;
}

.swp .sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.swp .sheet__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

/* Was gleich übergeben wird und was danach kommt (`publication-panel.component.scss`), und dieselbe
   Form für jede Bestätigung. */
.swp .confirm-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.swp .confirm-facts__lead {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swp .confirm-facts__lead--plain {
  font-weight: 400;
}

.swp .confirm-facts__note {
  margin: 0;
  color: var(--text-color-muted);
  font-size: var(--font-size-sm);
}

.swp .confirm-facts__done {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-weight: 600;
}

.swp .confirm-facts__done-icon {
  flex: none;
  color: var(--success-color);
}

/* ── Teilen (`share-links.component.scss`) ─────────────────────────────────── */
/* Der Link als Feld und nicht als Absatz, damit er sich von Hand markieren und kopieren lässt. Die
   Zeile mit „Link kopieren" und die Wege darunter trägt die Demo nicht (siehe Kopf). */
.swp .share {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.swp .share__note,
.swp .share__hint {
  margin: 0;
  max-width: 60ch;
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
}

.swp .share__link {
  flex: 1;
  min-width: 0;
}

/* `matInput` im Kasten des Feldes: randlos, die Breite des Feldes. */
.swp .share__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  outline: none;
}

/* ── Zuteilen (`assign-sheet.component.scss`) ──────────────────────────────── */

.swp .search {
  margin-bottom: var(--space-sm);
}

.swp .search__field {
  padding-inline: var(--space-md);
}

.swp .search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.swp .need {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-color-muted);
}

.swp .picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.swp .pick {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--ow-touch-target);
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.swp .pick.is-picked {
  border-color: var(--primary-color);
  background-color: var(--ow-fill-primary);
}

/* Ein harter Einwand wird als etwas anderes gezeichnet als ein weicher, weil er etwas anderes ist.
   Keiner von beiden nimmt die Zeile weg: der Plan erlaubt beides und sagt das auch. */
.swp .pick.is-hard {
  border-color: var(--error-color);
}

.swp .pick.is-soft {
  border-color: var(--warning-color);
}

.swp .pick:disabled {
  cursor: not-allowed;
  color: var(--text-color-disabled);
}

.swp .pick:hover:not(:disabled) {
  background-color: var(--bg-color-hover);
}

.swp .pick__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--bg-color-surface-variant);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.swp .pick__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-hair);
}

.swp .pick__name {
  font-size: var(--font-size-md);
}

.swp .pick__load {
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
  font-variant-numeric: tabular-nums;
}

.swp .pick__note {
  font-size: var(--font-size-xs);
  line-height: var(--ow-line-height-snug);
}

.swp .pick__note--hard {
  color: var(--error-color);
}

.swp .pick__note--soft {
  color: var(--warning-color);
}

.swp .pick__note--blocked {
  color: var(--text-color-disabled);
}

.swp .pick__tick {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ow-control-border-color);
  border-radius: var(--ow-border-radius-pill);
}

.swp .pick.is-picked .pick__tick {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

.swp .assign__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.swp .assign__foot-note {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--ow-line-height-snug);
}

.swp .assign__foot-note--hard {
  color: var(--error-color);
}

.swp .assign__foot-note--soft {
  color: var(--warning-color);
}

.swp .assign__foot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  width: 100%;
}

/* ── Automatisch besetzen (`generate-sheet.component.scss`) ───────────────── */

.swp .generate__lede {
  margin: 0 0 var(--space-xs);
  line-height: var(--ow-line-height-base);
  color: var(--text-color-muted);
}

.swp .generate__scope {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
}

.swp .counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.swp .count {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-hair);
  padding: var(--space-sm);
  border-radius: var(--border-radius-small);
  background-color: var(--bg-color-surface-variant);
}

/* Mit „von vorn" an ist die Kachel der Handeinsätze der Verlust. */
.swp .count.is-destructive {
  outline: 1px solid var(--error-color);
  background-color: var(--ow-fill-danger);
}

.swp .count__value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--ow-line-height-tight);
}

.swp .count__label {
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
}

.swp .count__names {
  overflow-wrap: anywhere;
  font-size: var(--font-size-xs);
  color: var(--text-color);
}

.swp .switch {
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-hair);
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
}

/* Den Schalter umzulegen ist der Moment, in dem der Lauf aufhört, harmlos zu sein — die Zeile sagt
   das, bevor die Schaltfläche die Farbe wechselt. */
.swp .switch.is-on {
  border-color: var(--error-color);
  background-color: var(--ow-fill-danger);
}

.swp .switch__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-color-muted);
}

/* `mat-slide-toggle` in ow-styles Fassung: eine 36x20-Bahn mit rundem Griff, die Beschriftung
   daneben. Aus heisst Umriss und ein grauer Griff mit Strich, an heisst Aktionsfarbe. */
.swp .slide-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: var(--font-size-md);
  text-align: start;
  cursor: pointer;
}

.swp .slide-toggle__track {
  position: relative;
  flex: none;
  width: 36px;
  height: 22px;
  border: 1px solid var(--ow-control-border-color);
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--bg-color-surface-variant);
  transition: background-color var(--ow-duration-fast) var(--ow-easing-standard);
}

.swp .slide-toggle__handle {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--ow-border-radius-pill);
  background-color: var(--text-color-muted);
  transition: translate var(--ow-duration-fast) var(--ow-easing-standard);
}

.swp .slide-toggle.is-checked .slide-toggle__track {
  border-color: var(--ow-background-action-default);
  background-color: var(--ow-background-action-default);
}

.swp .slide-toggle.is-checked .slide-toggle__handle {
  background-color: var(--ow-text-action-on-action);
  translate: 14px 0;
}

.swp .slide-toggle__label {
  padding-inline-start: var(--space-xs);
}

/* ── Das Telefon ───────────────────────────────────────────────────────────── */
/* Unter dem Tablet-Schritt verlässt die Schiene der Anwendung die Seite und legt sich als Leiste an
   den unteren Rand; mit einem einzigen Eintrag wäre das keine Leiste, also entfällt sie hier - die
   Marke trägt auf dem Telefon die Demo-Leiste. Die Fusszeile bricht um, wie in der Anwendung. */
@media (max-width: 767px) {
  .swp .ow-nav-rail {
    display: none;
  }

  .swp .foot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Auf dem Telefon beendet die Fusszeile die Seite und scrollt mit ihr weg; festgesteckt nahm sie
     jedem Bildschirm einen Streifen. Die Anwendung hat dafür zwei Fusszeilen und zeigt je nach Breite
     eine; der Mock hat eine, also scrollt hier die ganze Spalte. */
  .swp__container {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .swp__main,
  .swp .ow-content-scroll {
    flex: none;
    overflow: visible;
  }

  /* Ein Finger braucht das volle Ziel, auch wenn die gezeichneten Kreise 24px sind: jedes kleine
     Bedienelement bekommt eine unsichtbare Trefferfläche in Tippziel-Grösse, ohne ein Pixel zu
     verschieben. */
  .swp .req__action::before,
  .swp .chip__remove::before,
  .swp .chip__pick::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: max(100%, var(--ow-touch-target));
    height: var(--ow-touch-target);
    translate: -50% -50%;
  }

  .swp .task {
    grid-template-areas:
      'when title status'
      'people people people'
      'coverage coverage coverage';
  }

  .swp .task__coverage {
    justify-self: start;
  }
}

/* NUR IN DER DEMO (C-FG6). Auf dem Telefon stehen Name, Etikett und Menüpfeil in einer Zeile, der Name
   notfalls gekürzt; „Veröffentlichen" und „Automatisch besetzen" trägt dort die Leiste am unteren Rand
   (`.demo-actionbar` in app.css), ihre Plätze hier fallen weg. */
@media (max-width: 767px) {
  .swp .detail__name {
    flex-wrap: nowrap;
  }

  .swp .detail__name > .name__title {
    flex: 0 1 auto;
    min-width: 0;
  }

  .swp .detail__name > .badges {
    flex: none;
  }

  .swp .name__button {
    min-width: 0;
  }

  .swp .name__button > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .swp .detail__publish,
  .swp .board__generate {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swp *,
  .swp *::before,
  .swp *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}