/* ============================================================================
   KOS KLIMA® Intranet – Gestaltungsebene des Redesigns
   ----------------------------------------------------------------------------
   Diese Datei bringt die Oberfläche auf den Entwurf "Intranet Redesign".
   Sie wird NACH css/legacy.css geladen und überschreibt gezielt die Regeln,
   die sich im Erscheinungsbild ändern – der Altbestand bleibt unangetastet.

   Warum nicht direkt in legacy.css ändern?
   Weil dort rund 1.660 Zeilen aus vier Jahren liegen, die auch Verhalten
   (Umbrüche, Scroll-Offsets, Telefon-Ansicht) tragen. Änderungen mitten im
   Bestand wären schwer zu prüfen und nicht rückholbar. Hier steht dagegen an
   einer Stelle, WAS das Redesign anders macht – und lässt sich einzeln
   zurücknehmen.

   Reihenfolge der Abschnitte folgt dem Aufbau der Seite:
   Grundlagen → Kopfzeile → Seitenleiste → Inhaltsflächen → Bedienelemente
   ========================================================================== */

/* ========================================================================== */
/* 1. GRUNDLAGEN                                                              */
/* ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);          /* 15px – war 14.5px */
  line-height: var(--leading-card);        /* 1.55 */
  color: var(--text-body);
  background: var(--surface-page);         /* war var(--gray-50) */
}

/* Überschriften tragen im Entwurf durchgängig die Headline-Schrift (Rubik),
   sind navy und bei H1/H2 in Großbuchstaben gesetzt. Die Anwendung benutzt
   h1–h4 bisher kaum – die meisten Titel sind Klassen (.card-title u.ä.) und
   werden weiter unten einzeln erfasst. */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  letter-spacing: var(--tracking-headline);
}
h1, h2 { text-transform: uppercase; }

/* "Eyebrow" – die kleine Zeile über einer Überschrift. Im Entwurf das
   wiederkehrende Ordnungselement über Dashboard, Beitragsseite und Admin. */
.ds-eyebrow {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
}

/* ========================================================================== */
/* 2. KOPFZEILE                                                               */
/* ========================================================================== */
/* Die Kopfzeile trägt die HAUPTFARBE des Mandanten.

   Sie bezieht sie über --surface-dark aus dem Design-System. --surface-dark
   zeigt auf --blue-dark, und genau diese Variable überschreibt
   applyTenantAppearance() mit der unter "Darstellung -> Farben" gepflegten
   Hauptfarbe. Der Balken folgt ihr damit von selbst. Eine eigene Variable nur
   für die Kopfzeile wäre eine zweite Stelle, an der dieselbe Farbe gepflegt
   werden müsste – und damit die erste, die man zu ändern vergisst.

   ALLES DARIN RECHNET GEGEN --header-fg
   Kein Element in der Kopfzeile darf eine feste Farbe benutzen: Welche
   Schriftfarbe lesbar ist, hängt an einer Farbe, die der Mandant frei wählt.
   Die Abstufungen stehen deshalb einmal hier, und jede Regel darunter greift
   nur noch darauf zu.

   HELLE HAUPTFARBE
   Ist die Hauptfarbe hell, wäre weiße Schrift unlesbar. applyTenantAppearance()
   misst die Helligkeit und setzt in dem Fall body.header-light; der zweite
   Satz unten kehrt die Abstufungen um. Die Entscheidung fällt damit an einer
   Stelle statt in jeder einzelnen Regel.

   Der helle Satz greift bewusst NICHT auf --blue-dark oder --text-heading
   zurück – das ist ja gerade die helle Hauptfarbe, die Schrift stünde auf
   sich selbst. Er benutzt --blue-night und --text, die der Mandant nicht
   überschreiben kann. */

/* Die weiche Stufe ist bewusst eine TRANSPARENZ der Hauptschriftfarbe und
   keine eigene Graustufe. Eine feste zweite Farbe (--text-soft, --text)
   funktioniert nur auf Weiß: Auf einer mitteltonigen Hauptfarbe läge sie
   nahe am Untergrund und verschwände. Eine Transparenz behält dagegen immer
   die Richtung der Hauptschriftfarbe. */
.header {
  --header-fg:      var(--white);
  --header-fg-soft: rgba(255, 255, 255, 0.80);
  --header-fg-08:   rgba(255, 255, 255, 0.08);
  --header-fg-16:   rgba(255, 255, 255, 0.16);
  --header-fg-28:   rgba(255, 255, 255, 0.28);

  height: var(--header-h);                 /* 64px */
  background: var(--surface-dark);         /* = Hauptfarbe des Mandanten */
  color: var(--header-fg);
  border-bottom: 1px solid var(--header-fg-08);
  gap: var(--space-5);
}

body.header-light .header {
  --header-fg:      var(--blue-night);
  --header-fg-soft: rgba(27, 44, 67, 0.76);   /* --blue-night, transparent */
  --header-fg-08:   var(--ink-07);
  --header-fg-16:   var(--ink-15);
  --header-fg-28:   var(--ink-22);
}

/* Das eingebaute Logo (SVG in index.html) setzt den Schriftzug "KOS" auf
   currentColor und erbt damit --header-fg. Mit einem festen Farbwert stünde
   er in der Hauptfarbe auf der Hauptfarbe.

   Ein hochgeladenes Logo kann das nicht – es muss von sich aus zum farbigen
   Balken passen. Genau darauf weist die Vorschau in den
   Unternehmenseinstellungen hin ("Header (dunkler Hintergrund)"). */
.header-logo {
  width: var(--sidebar-w);                 /* 264px */
  border-right: none;                      /* der Entwurf trennt ohne Linie */
}

/* Hebt sich ein hochgeladenes Logo zu wenig von der Kopfzeile ab, bekommt es
   eine abgesetzte Unterlage. Welche Seite dabei die helle ist, hängt an der
   Hauptfarbe – daher zwei Regeln. Gesetzt wird die Klasse in app/shell.js
   (checkHeaderLogoContrast), gemessen statt eingestellt.

   In css/legacy.css steht dafür eine ältere, von nichts gesetzte Regel
   (.logo-light-on-dark). Sie bleibt unangetastet: legacy.css ist der
   wörtliche Auszug des alten Stands und wird nicht bearbeitet. Ihr Name
   sagte zudem das Gegenteil dessen, was sie bewirkt. */
body.logo-needs-plate .header-logo-custom {
  background: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  max-height: 38px;                        /* 38 + 8 Polsterung in 64px Höhe */
}
body.logo-needs-plate.header-light .header-logo-custom {
  background: var(--blue-night);
}

.hamburger { color: var(--header-fg); }
.hamburger:hover { background: var(--header-fg-08); }

/* --------------------------------------------------------------- Suche --
   Eine helle Transparenzfläche auf dem farbigen Balken. Sie hebt sich ab,
   ohne eine zweite Farbe einzuführen, und passt sich jeder Hauptfarbe an. */
.header-search .search-wrap {
  background: var(--header-fg-08);
  border: 1px solid var(--header-fg-16);
  border-radius: var(--radius-sm);
  color: var(--header-fg-soft);
  max-width: 460px;
  padding: 9px 14px;
  transition: background var(--dur-hover) var(--ease-standard),
              border-color var(--dur-hover) var(--ease-standard),
              box-shadow var(--dur-hover) var(--ease-standard);
}
/* Der Fokusring des Design-Systems ist eine blasse Akzent-Alphastufe – auf
   dem farbigen Balken wäre er nicht zu sehen. Hier trägt ihn dieselbe
   Abstufung wie die Fläche selbst. */
.header-search .search-wrap:focus-within {
  background: var(--header-fg-16);
  border-color: var(--header-fg-28);
  box-shadow: 0 0 0 3px var(--header-fg-16);
}
.header-search .search-wrap svg { stroke: currentColor; }
.header-search input {
  color: var(--header-fg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}
.header-search input::placeholder { color: var(--header-fg-soft); }

/* ------------------------------------------------ Treffer der Suche --
   Die Klappliste hängt an der Suchfläche und erbt deren Breite.

   Sie rechnet bewusst NICHT gegen --header-fg: Sie steht als Karte VOR der
   Seite, nicht auf dem farbigen Balken. Ihre Lesbarkeit darf nicht an der
   Hauptfarbe hängen – sie ist Inhalt, nicht Kopfzeile. */
.search-wrap { position: relative; }

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-menu);
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 10;                             /* innerhalb der Kopfzeile */
  text-align: left;
}
body.search-open .search-results { display: block; }

.search-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
/* Tastatur-Auswahl und Mauszeiger sehen gleich aus: Es ist derselbe
   Zustand, nur anders erreicht. */
.search-hit:hover,
.search-hit.on { background: var(--accent-12); }

.search-hit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--ink-04);
  color: var(--text-heading);
}
.search-hit-icon svg { width: 15px; height: 15px; stroke: currentColor; }

.search-hit-main { min-width: 0; }         /* sonst bricht die Kürzung nicht */
.search-hit-title {
  display: block;
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-hit-meta {
  display: block;
  font-size: var(--text-label);
  color: var(--text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Der gefundene Teil. Kein gelber Standard-Marker, sondern die
   Akzentfläche der Palette. */
.search-hit mark {
  background: var(--accent-30);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.search-empty {
  padding: 12px 10px;
  font-size: var(--text-body-md);
  color: var(--text-meta);
}

/* ------------------------------------------------------------- Hotline --
   Kein gefüllter Knopf, sondern eine ruhige Textzeile: Beschriftung
   gedämpft, Rufnummer in voller Deckkraft. Beim Überfahren hellt die ganze
   Zeile auf. Ein Wechsel der Deckkraft ist bei jeder Hauptfarbe sichtbar,
   eine zusätzliche Signalfarbe wäre es nicht zwangsläufig. */
.header-hotline {
  background: transparent;
  padding: 0;
  color: var(--header-fg-soft);
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
}
.header-hotline:hover { background: transparent; color: var(--header-fg); }
.header-hotline svg { stroke: currentColor; }
.header-hotline-label { flex-direction: row; gap: 6px; align-items: center; }

/* Beide Zeilen erben die Farbe des Links; die Rufnummer steht eine Stufe
   kräftiger, damit sie als das Anzuklickende lesbar bleibt. */
.header-hotline-label span:first-child,
.header-hotline-label span:last-child {
  color: inherit;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
}
.header-hotline-label span:last-child { color: var(--header-fg); }

/* ------------------------------------------------- Bearbeiten-Umschalter --
   Auf dem farbigen Balken kann der Knopf nicht mehr mit der Hauptfarbe
   gefüllt sein – er stünde farbgleich auf ihr. Im Ruhezustand deshalb ein
   Umriss, im Bearbeitungsmodus umgekehrt eine volle Fläche: Der Zustand ist
   ohne Text erkennbar, und die Rangfolge (aktiv = auffälliger) bleibt. */
.edit-toggle {
  padding: 10px 16px;
  border: 1.5px solid var(--header-fg-28);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--header-fg);
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  cursor: pointer;
}
.edit-toggle:hover { background: var(--header-fg-16); border-color: var(--header-fg-28); }
body.edit-mode .edit-toggle {
  background: var(--header-fg);
  border-color: var(--header-fg);
  color: var(--surface-dark);              /* Hauptfarbe auf hellem Grund */
}
body.edit-mode .edit-toggle:hover {
  background: var(--header-fg-soft);
  border-color: var(--header-fg-soft);
}

/* --------------------------------------------------------- Nutzerbereich --
   Rollen-Plakette, Name und Kürzel sitzen ausschließlich in der Kopfzeile.
   Die Regeln sind deshalb auf .header eingegrenzt: Die --header-fg-Stufen
   gelten nur dort, außerhalb liefen die Angaben ins Leere. */
.header .role-badge {
  font: var(--weight-bold) 10px / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  background: var(--header-fg-16);
  color: var(--header-fg-soft);
}
/* Lila bleibt die Rollenfarbe "Manager" – sie muss auf einen Blick von der
   Marke unterscheidbar sein. Auf dunklem Grund trägt sie helle Schrift, auf
   hellem die Farbe selbst. */
.header .role-badge.manager { background: rgba(124, 58, 237, 0.34); color: #e6dcff; }
body.header-light .header .role-badge.manager {
  background: rgba(124, 58, 237, 0.14);
  color: var(--manager);
}

.header .user-chip { color: var(--header-fg); }
.header .user-chip:hover { background: var(--header-fg-08); }
.header .user-name {
  color: var(--header-fg-soft);
  font-family: var(--font-headline);
  font-weight: var(--weight-medium);
}
.header .user-avatar {
  background: var(--header-fg-16);
  color: var(--header-fg);
  font-family: var(--font-headline);
  font-weight: var(--weight-bold);
}

/* ========================================================================== */
/* 3. SEITENLEISTE                                                            */
/* ========================================================================== */
/* Sandfarbene Fläche statt Weiß – sie trennt Navigation und Inhalt ohne eine
   harte Linie und ist das ruhigste Element des Entwurfs. */

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sand);
  border-right: 1px solid var(--border-card);
  padding: 22px 14px 28px;
}

/* Abschnittsüberschrift ("NAVIGATION", "ADMINISTRATION") */
.nav-section-label {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-meta);
  padding: 0 10px 12px;
}

/* Navigationseintrag.

   ZUR SCHRIFT: Die Menüeinträge stehen in der FLIESSTEXT-Schrift, nicht in
   der Überschriften-Schrift – sie erben schlicht von body. Nur die
   Abschnittsüberschriften darüber ("NAVIGATION", "ADMINISTRATION") tragen die
   Überschriften-Schrift in Großbuchstaben.

   Hier stand bis hierher das Gegenteil: ein Kommentar, der die erste Ebene in
   Rubik-Großbuchstaben beschrieb. Die Regel dazu gab es nie. Wer in den
   Unternehmenseinstellungen die Schrift wechselt, sollte sich darauf
   verlassen können, dass die Beschreibung stimmt.

   Der ausdrückliche inherit ist keine Zierde: .nav-label sitzt in manchen
   Zeilen neben Elementen mit eigener Schrift (Anzahl-Plaketten), und ohne die
   Angabe hinge seine Schrift davon ab, welche Regel zuletzt zugegriffen hat. */
.nav-label { font-family: inherit; }
.sidebar a, .sidebar .nav-item, .sidebar li > div[onclick] {
  border-radius: var(--radius-sm);
  color: var(--text-body);
  transition: background var(--dur-hover) var(--ease-standard),
              color var(--dur-hover) var(--ease-standard);
}
.sidebar a:hover, .sidebar .nav-item:hover { background: var(--ink-04); color: var(--text-heading); }

/* Aktiver Eintrag: weiße Karte mit Haarlinie, wie im Entwurf */
.sidebar .active, .sidebar a.active, .sidebar .nav-item.active {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  box-shadow: 0 2px 8px rgba(55, 83, 116, 0.06);
  color: var(--text-heading);
}

/* Merkmale am Eintrag: Anzahl, Entwurf, eingeschränkte Sichtbarkeit */
.nav-badge {
  background: var(--red-alert);
  color: var(--white);
  border-radius: var(--radius-pill);
  font: var(--weight-bold) 10px / 1 var(--font-headline);
  padding: 4px 6px;
}
.nav-draft-badge { background: var(--action-primary); }
.nav-vis-badge   { color: var(--text-meta); }

/* ========================================================================== */
/* 4. INHALTSFLÄCHEN                                                          */
/* ========================================================================== */

.main { background: var(--surface-page); }

/* Karten sind im Entwurf deutlich weicher gerundet (18px statt 10px) und
   stehen auf einer Haarlinie statt auf einem grauen Rahmen. */
.card {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  margin-bottom: var(--space-6);
}
.card-header { border-bottom: 1px solid var(--border-card); }
.card-title {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
}

.accordion-header {
  font-family: var(--font-headline);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}
.accordion-item { border-radius: var(--radius-md); border-color: var(--border-card); }

/* ========================================================================== */
/* 5. BEDIENELEMENTE                                                          */
/* ========================================================================== */

/* Knöpfe tragen im Entwurf die Headline-Schrift in Großbuchstaben und sind
   mit 10px gerundet (vorher 6px, Fließtextschrift). */
.btn {
  border-radius: var(--radius-sm);
  font: var(--weight-bold) var(--text-body-sm) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: 12px 20px;
}
.btn-primary  { background: var(--action-primary); color: var(--white); }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-secondary, .btn-ghost {
  background: var(--surface-card);
  color: var(--action-dark);
  border: 1.5px solid var(--hairline-strong);
}
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--border-hover); }
.btn-danger { background: var(--danger); color: var(--white); }

/* Eingabefelder */
.form-group label {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-meta);
}
.form-group input, .form-group select, .form-group textarea,
.field-input {
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  color: var(--text-heading);
  background: var(--surface-card);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.field-input:focus {
  border-color: var(--border-hover);
  box-shadow: var(--focus-ring);
}

.chip {
  border-radius: var(--radius-pill);
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: 0.04em;
  padding: 5px 9px;
}

/* Dialoge */
.modal { border-radius: var(--radius-md); box-shadow: var(--shadow-menu); }

/* ========================================================================== */
/* 6. SEITENKOPF                                                              */
/* ========================================================================== */

.page-header { margin-bottom: var(--space-9); }

/* Die kleine Zeile über der Überschrift (beim Dashboard das Datum). */
.page-eyebrow {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  margin-bottom: var(--space-4);
}
.page-header h1 {
  margin: 0 0 var(--space-2);
  font: var(--weight-bold) clamp(30px, 2.6vw, 42px) / var(--leading-tight) var(--font-headline);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  color: var(--text-heading);
}
.page-header p {
  margin: 0;
  font-size: 16px;
  color: var(--text-body);
}
.breadcrumb { font-size: var(--text-body-sm); color: var(--text-meta); }
.breadcrumb span { color: var(--text-heading); }

/* ========================================================================== */
/* 7. DASHBOARD                                                               */
/* ========================================================================== */
/* Das Dashboard stapelte seine Kacheln bisher über die volle Breite. Der
   Entwurf stellt sie in ein 12-Spalten-Raster, damit Arbeitsanweisungen und
   Hotline nebeneinander stehen und der Blick nicht senkrecht durchrutscht. */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: start;
  margin-bottom: var(--space-8);
}
.dash-cell    { min-width: 0; }   /* verhindert, dass lange Wörter das Raster sprengen */
/* Alle Breiten des Rasters. Früher genügten drei, weil die Aufteilung fest im
   Code stand. Seit sie in den Unternehmenseinstellungen gepflegt wird, kann
   jede Breite vorkommen – und eine gewachsene Zelle (renderDashboardGrid
   füllt die Lücke am Zeilenende) kann auf jeden Wert dazwischen kommen. */
.dash-cell-1  { grid-column: span 1; }
.dash-cell-2  { grid-column: span 2; }
.dash-cell-3  { grid-column: span 3; }
.dash-cell-4  { grid-column: span 4; }
.dash-cell-5  { grid-column: span 5; }
.dash-cell-6  { grid-column: span 6; }
.dash-cell-7  { grid-column: span 7; }
.dash-cell-8  { grid-column: span 8; }
.dash-cell-9  { grid-column: span 9; }
.dash-cell-10 { grid-column: span 10; }
.dash-cell-11 { grid-column: span 11; }
.dash-cell-12 { grid-column: span 12; }

/* Seiteninhalte des Dashboards stehen in einer Rasterzelle neben der Hotline.
   Dort MUSS das 60-Spalten-Raster von #blocks-host aufgegeben werden:
   Es hat 18px Abstand zwischen den Spalten, also allein 59 × 18px = 1062px
   Zwischenraum. In einer 667px breiten Zelle ist das mehr als die ganze
   Breite – die Spalten fallen auf 0px zusammen und der Inhalt läuft über die
   Zelle hinaus.

   Innerhalb der Zelle stapeln die Blöcke deshalb einspaltig, genau wie es die
   Telefonansicht ohnehin tut. Für das Dashboard ist das richtig: Dort steht in
   aller Regel ein einzelner Block (die Betriebsinfos). Wer auf dem Dashboard
   mehrere Blöcke nebeneinander stellen will, hat dafür jetzt keinen Platz mehr
   – das ist der Preis dafür, dass Betriebsinfos und Hotline nebeneinander
   stehen. Auf allen anderen Seiten bleibt das 60-Spalten-Raster unberührt. */
.dash-cell #blocks-host {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.dash-cell #blocks-host .block { grid-column: auto; }

/* Kacheln im Raster tragen ihren Abstand über gap, nicht über margin. */
.dash-cell > .card,
.dash-cell > .quick-access-section { margin-bottom: 0; }
/* Nebeneinanderstehende Kacheln auf gleiche Höhe bringen. */
.dash-cell > .card { height: 100%; }

/* Unterhalb der Tablet-Breite bricht das Raster auf eine Spalte um – zwei
   Kacheln nebeneinander wären dort schmaler als ihr Inhalt. */
@media (max-width: 1100px) {
  .dash-cell-1, .dash-cell-2, .dash-cell-3,  .dash-cell-4,
  .dash-cell-5, .dash-cell-6, .dash-cell-7,  .dash-cell-8,
  .dash-cell-9, .dash-cell-10, .dash-cell-11 { grid-column: span 12; }
}

/* ------------------------------------------------------- Arbeitsanweisungen --*/
.wi-widget-item {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-card);
  cursor: pointer;
}
.wi-widget-item-title {
  font: var(--weight-medium) 15px / 1.3 var(--font-headline);
  color: var(--text-heading);
}
.wi-widget-item-meta { font-size: var(--text-body-sm); color: var(--text-meta); margin-top: 2px; }
.wi-widget-intro     { font-size: var(--text-body-sm); color: var(--text-meta); }
.wi-widget-foot      { border-top: 1px solid var(--border-card); padding-top: var(--space-4); }

/* --------------------------------------------------------------- Hotline --
   Die einzige dunkle Fläche des Dashboards. */
.hotline-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: var(--card-padding);
  border-radius: var(--radius-md);
  background: var(--gradient-dark);
  color: var(--white);
  box-shadow: var(--shadow-card-dark);
}
.hotline-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.hotline-card-eyebrow {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.hotline-card-badge {
  font: var(--weight-bold) 10px / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: var(--on-dark);
}
.hotline-card-claim {
  font: var(--weight-bold) 22px / 1.2 var(--font-headline);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
}
.hotline-card-number {
  display: block;
  margin-top: var(--space-5);
  font: var(--weight-bold) clamp(22px, 2vw, 30px) / 1.1 var(--font-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--white);
  text-decoration: none;
}
.hotline-card-number:hover { color: var(--text-accent); }
.hotline-card-text {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  color: var(--on-dark);
  /* Der Text ist gepflegt und darf Zeilenumbrüche enthalten. pre-line
     übernimmt sie, faltet aber mehrfache Leerzeichen zusammen – so muss der
     Text kein HTML mitbringen, und es gibt nichts zu prüfen, was jemand
     einschleusen könnte. */
  white-space: pre-line;
}
/* Der Knopf sitzt am unteren Rand, damit die Kachel neben der
   Arbeitsanweisungs-Liste sauber abschließt. */
.hotline-card-btn {
  margin-top: auto;
  align-self: flex-start;
  background: var(--white);
  color: var(--action-dark);
  border: none;
}
.hotline-card-btn:hover { background: var(--accent-30); color: var(--action-dark); }

/* Stift im Bearbeitungsmodus. Zurückhaltend gesetzt: Er gehört zum Werkzeug,
   nicht zur Kachel, und darf den Anrufknopf daneben nicht überstrahlen –
   dieser ist im Ernstfall der wichtigere von beiden. */
.hotline-card-edit {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.hotline-card-edit:hover { background: rgba(255, 255, 255, 0.24); }
.hotline-card-edit svg { width: 14px; height: 14px; }
/* Der Stift liegt absolut – die Kachel muss ihn tragen können. */
.hotline-card { position: relative; }
/* Damit die Plakette nicht unter dem Stift verschwindet. */
body.edit-mode .hotline-card-head { padding-right: 150px; }

/* -------------------------------------------------------- Schnellzugriff --*/
.quick-access-title {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
}
.quick-access-header { margin-bottom: var(--space-6); }
.quick-access-empty  { font-size: var(--text-body-sm); color: var(--text-meta); }
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-6);
}
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-reveal),
              box-shadow var(--dur-hover) var(--ease-standard),
              border-color var(--dur-hover) var(--ease-standard);
}
.tile:hover {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent-55);
}
.tile-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-circle);
  background: var(--accent-12);
  color: var(--action-dark);
  display: grid; place-items: center;
}
.tile h3 {
  margin: 0;
  font: var(--weight-medium) 15px / 1.3 var(--font-headline);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
}
.tile p { margin: 2px 0 0; font-size: 12px; color: var(--text-meta); }

/* ------------------------------------------------ Letzte Aktualisierungen --*/
.news-box-item {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-card);
}
.news-box-title { font-size: 14px; color: var(--text-heading); }
/* "Mehr anzeigen" – blendet die nächsten fünf Einträge ein. Über die volle
   Breite unter der Liste, damit er nicht mit einem Eintrag verwechselt wird. */
.news-box-more {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: 10px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--action-dark);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.news-box-more:hover { border-color: var(--border-hover); background: var(--accent-08); }
.news-box-meta  { font-size: var(--text-body-sm); color: var(--text-meta); white-space: nowrap; }
.news-box-empty { font-size: var(--text-body-sm); color: var(--text-meta); }

/* ---------------------------------------------------------- Neuigkeiten --
   Bildkachel: Foto, dunkler Verlauf, Text unten drauf. */
.news-hero {
  position: relative;
  height: 100%; min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.news-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
/* Der Verlauf ist kein Schmuck: Ohne ihn stünde weiße Schrift auf einem Foto
   mit unbekannter Helligkeit und wäre je nach Bildausschnitt unlesbar. */
.news-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,35,55,0.10) 0%, rgba(0,0,0,0.75) 100%);
}
.news-hero-text { position: absolute; left: 28px; right: 28px; bottom: 24px; color: var(--white); }
.news-hero-eyebrow {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-3);
}
.news-hero-title {
  font: var(--weight-bold) 18px / 1.25 var(--font-headline);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
}

/* ========================================================================== */
/* 8. TELEFONANSICHT                                                          */
/* ========================================================================== */
/* Die App-Oberfläche für Telefone (body.mapp) hat ihr eigenes Markup in
   app/mobile.js. Farben und Schriften kommen über die Brücke in
   app/app-tokens.css bereits aus dem Design-System; hier stehen die Stellen,
   an denen der Entwurf für das Telefon etwas anderes vorsieht. */

/* Der Kopf der Startseite war dunkelblau. Im Entwurf ist er – wie die
   Kopfzeile am Desktop – weiß; die Marke trägt allein das Logo.

   Das ist hier nicht nur Geschmack: Das Logo im Ablageplatz "logo" ist seit
   dem Redesign die FARBIGE Fassung für helle Flächen. Auf dem dunkelblauen
   Kopf war es praktisch unsichtbar. Beide Ansichten benutzen denselben
   Ablageplatz, also müssen sie auch denselben Untergrund haben.

   Alles, was vorher auf Weiß gesetzt war, wird deshalb mit umgestellt. */
.mhead-start {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-card);
  border-radius: 0;
}
.mhead-start .mhead-icon {
  background: var(--ink-04);
  border: 1px solid var(--border-card);
  color: var(--text-heading);
}
.mhead-start .mhead-hi { color: var(--text-heading); }
.mhead-start .mhead-date { color: var(--text-meta); }

/* Begrüßung: Datum als Eyebrow, Anrede als Überschrift in Versalien. */
.mhead-date {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
}
/* Die Anrede selbst steht in .mhead-hi; .mhead-greet ist nur die Hülle. */
.mhead-hi {
  font: var(--weight-bold) 24px / var(--leading-tight) var(--font-headline);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
}

/* Kartenüberschrift ("Zu erledigen", "Mein Schnellzugriff" …) */
.mcard-cap, .mlbl {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
}
.mcard { border-radius: var(--radius-md); border: 1px solid var(--border-card); }
.mrow-t { font-family: var(--font-headline); font-weight: var(--weight-medium); color: var(--text-heading); }
.mrow-m { color: var(--text-meta); }
.mbadge { background: var(--red-alert); color: var(--white); border-radius: var(--radius-pill); }

/* --------------------------------------------------------------- Hotline --
   Die einzige dunkle Fläche der Telefon-Startseite. */
.mhot {
  margin: var(--space-6) 0;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  color: var(--white);
  box-shadow: var(--shadow-card-dark);
}
.mhot-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.mhot-cap {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.mhot-badge {
  font: var(--weight-bold) 10px / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  color: var(--on-dark);
}
/* Der Anrufknopf nimmt die volle Breite – auf einem Telefon ist er das
   wichtigste Ziel der Seite und muss mit dem Daumen sicher zu treffen sein. */
.mhot-call {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--action-dark);
  font: var(--weight-bold) var(--text-body-sm) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
}
.mhot-call svg { width: 16px; height: 16px; }

/* Untere Reiterleiste */
.mtab { font-family: var(--font-headline); }
.mtab-badge { background: var(--red-alert); color: var(--white); }

/* ========================================================================== */
/* 9. VERWALTUNGSSEITEN                                                       */
/* ========================================================================== */

/* Kennzahlen über der Tabelle. auto-fit statt fester Spaltenzahl, damit die
   Reihe auch mit zwei oder vier Karten trägt. */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.admin-stat {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  background: var(--surface-card);
}
.admin-stat-value {
  font: var(--weight-bold) 32px / 1 var(--font-headline);
  color: var(--text-heading);
}
.admin-stat-label { font-size: var(--text-body-sm); color: var(--text-meta); margin-top: var(--space-3); }

/* Verwaltungstabellen: sandfarbene Kopfzeile in Versalien, Haarlinien
   statt Rahmen. */
.user-table { width: 100%; border-collapse: collapse; }
.user-table thead th {
  background: var(--bg-sand);
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  text-align: left;
  padding: var(--space-4) var(--space-6);
  white-space: nowrap;
}
.user-table tbody td {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-card);
  font-size: 14px;
  vertical-align: middle;
}
.user-table tbody tr:hover { background: var(--ink-04); }
.user-table tbody td strong { font-family: var(--font-headline); font-weight: var(--weight-medium); color: var(--text-heading); }

/* Fortschritt der Kenntnisnahme */
.wi-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-07);
  overflow: hidden;
  margin-top: var(--space-2);
}
.wi-progress-bar { height: 100%; background: var(--action-primary); border-radius: 2px; }
/* Vollständig bestätigt: Navy statt Akzent – "fertig" soll sich von
   "läuft noch" unterscheiden, ohne dass man die Zahlen lesen muss. */
.wi-ack-cell .chip-green + .wi-progress .wi-progress-bar { background: var(--action-dark); }

/* Laufband ("Aktuell"). Die Akzent-Variante trug noch einen Verlauf aus der
   alten Palette (#1a6e88 → #2691b4) – der einzige Ort, an dem eine alte
   Markenfarbe fest im CSS stand statt über eine Variable zu laufen. */
.banner-ticker {
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}
.banner-ticker.variant-accent {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-card-dark);
}
.banner-ticker .ticker-label,
.banner-ticker .banner-ticker-label {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}