/* Briefing auf der Startseite — Panel, Schublade, Karte, Auslöser
   Plan docs/PLAN_INTRANET_ANSICHT_BRIEFING_2026-10-20.md, Abschnitt 5.2, Paket AP-B6; Logik in /intranet/briefing.js.
   Immer dunkel wie die übrige Startfläche (Plan 5.1 „Darstellung“): alle Farben stehen hier, nichts kommt aus dem Thema der Seite.
   Schrift überall ≥ 12 px, Zeilenhöhe ≥ 1,35, gedämpfter Text mit Deckkraft ≥ .75, Ziele der Knöpfe 32 × 32 px. */

.bf-panel, .bf-schublade, .bf-karte, .bf-ausloeser, .bf-hinweiszeile, .bf-zeigen, .bf-ansage {
  --bf-text: #EEF2F8;
  --bf-dim: rgb(226 232 240 / .78);
  --bf-kupfer: #D39462;
  --bf-akzent: #7DD3FC;
  --bf-warn: #FBBF24;
  --bf-fehler: #F87171;
  --bf-orange: #DC500F;
  --bf-orange-text: #F2793A;      /* CI-Orange aufgehellt für Text: ≥ 4,5 : 1 auch über dem hellsten Hintergrund */
  --bf-flaeche: rgb(14 20 38 / .86);
  --bf-linie: rgb(255 255 255 / .14);
  box-sizing: border-box;
}
.bf-panel *, .bf-karte *, .bf-ausloeser *, .bf-schublade * { box-sizing: border-box; }
.bf-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Hülle des Panels (ab 1460 px): Lage setzt ansicht-dock.js, die Höhe setzt briefing.js ── */
.briefing-platz { z-index: 5; }
.briefing-platz.bf-verborgen { height: 32px !important; min-height: 32px; pointer-events: none; }
.briefing-platz.bf-verborgen > * { pointer-events: auto; }

/* ── Panel (auch in Schublade und aufgeklappter Karte) ── */
.bf-panel {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; width: 100%;
  background: var(--bf-flaeche); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--bf-linie); border-radius: 18px; color: var(--bf-text);
  font: 400 13px/1.35 'Open Sans', system-ui, sans-serif;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .7);
}

/* Kopfzeile: einzeilig; fester Teil (Titel, vier Knöpfe, Abstände 6, Polster 14) höchstens 250 px */
.bf-kopf { display: flex; align-items: center; gap: 6px; flex: none; min-height: 48px; padding: 8px 14px; }
.bf-titel-halter { flex: none; display: flex; align-items: center; }
.bf-titel { margin: 0; font: 700 15px/1.2 'Montserrat', system-ui, sans-serif; color: #fff; white-space: nowrap; }
/* Der Pfeil zählt netto nur 5 px zur Breite (Symbol 12 px, Ränder −2 und −5): so bleibt der feste Teil der Kopfzeile ≤ 250 px */
.bf-titel-knopf {
  display: inline-flex; align-items: center; gap: 0; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.bf-titel-knopf .bf-pfeil { width: 12px; height: 12px; margin: 0 -5px 0 -2px; flex: none; }
.bf-titel-knopf[aria-expanded="false"] .bf-pfeil { rotate: -90deg; }
.bf-stand { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 12px/1.35 'Open Sans', system-ui, sans-serif; color: var(--bf-dim); }
.bf-stand-sicht { display: inline-block; white-space: nowrap; }
.bf-stand[data-art="sperre"], .bf-stand[data-art="fehler"] { color: var(--bf-warn); }
.bf-stand[data-art="zuwachs"] .bf-stand-sicht {
  color: #fff; background: rgb(211 148 98 / .3); border-radius: 6px; padding: 0 5px; margin-left: -5px;
}
.bf-stand-knopf {
  flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; min-height: 32px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .3); background: #006699; color: #fff; font: 600 12px/1.35 'Open Sans', system-ui, sans-serif;
}
.bf-stand-knopf[hidden], .bf-stand[hidden] { display: none; }
.bf-knoepfe { flex: none; display: flex; gap: 6px; margin-left: auto; }
.bf-knopf {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bf-linie); background: rgb(255 255 255 / .07); color: var(--bf-text);
}
.bf-knopf:hover { background: rgb(255 255 255 / .16); }
.bf-knopf[aria-disabled="true"] { cursor: default; color: rgb(238 242 248 / .72); }
.bf-knopf[aria-disabled="true"]:hover { background: rgb(255 255 255 / .07); }
.bf-dreht svg { animation: bf-drehen 1.1s linear infinite; }
@keyframes bf-drehen { to { rotate: 360deg; } }

.bf-panel :is(button, a):focus-visible, .bf-ausloeser:focus-visible, .bf-zeigen:focus-visible, .bf-karte-zeile:focus-visible {
  outline: 2px solid var(--bf-kupfer); outline-offset: 2px;
}

/* Körper: Obergrenze und Kürzungsfolge hält briefing.js; er rollt nie. Alle Kinder behalten ihre Höhe (flex: none), damit nichts
   unbemerkt gestaucht wird (sonst verschwände zum Beispiel die Tageslinie): was nicht passt, fällt nach der Kürzungsfolge weg. */
.bf-koerper { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 0 14px 8px; }
.bf-koerper > * { flex: none; }
.bf-warnzeile { margin: 0; font-size: 12px; line-height: 1.35; color: var(--bf-warn); }
.bf-warn-knopf {
  display: inline; padding: 0; border: 0; background: none; color: var(--bf-akzent); font: 600 12px/1.35 'Open Sans', system-ui, sans-serif; cursor: pointer; text-decoration: underline;
}

/* Datumszeile mit dem Umschalter „Heute | Woche“ */
.bf-kopfblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-tagzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.bf-datum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.35; letter-spacing: .02em; color: var(--bf-dim); }
.bf-umschalter { flex: none; display: inline-flex; padding: 1px; border: 1px solid var(--bf-linie); border-radius: 8px; }
.bf-umschalter button {
  min-height: 24px; padding: 0 12px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--bf-dim); font: 600 12px/1.35 'Open Sans', system-ui, sans-serif;
}
.bf-umschalter button:hover { background: rgb(255 255 255 / .08); }
.bf-umschalter button[aria-pressed="true"] { background: rgb(255 255 255 / .14); color: var(--bf-text); }

/* Kopfsatz (E-4: Montserrat, nicht die Serifenschrift von Cowork) */
.bf-satz {
  margin: 0; font: 600 15px/1.35 'Montserrat', system-ui, sans-serif; color: var(--bf-text); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Heute: zwei Spalten — links der Zeitstrahl senkrecht, rechts „Braucht dich“ und Erledigt. Der Behälter ist die Breite des Körpers:
   schmaler als 340 px (Karte auf dem Handy) steht der Strahl über „Braucht dich“. Die Zeile wächst in die verfügbare Höhe, der Strahl
   verteilt sich darin; wo es nicht passt, kürzt briefing.js in der höheren Spalte. */
.bf-koerper { container-type: inline-size; container-name: bfk; }
/* Strahlspalte wächst mit der Panelbreite (bis 600 px seit 1.9.3): 172 px bei 480, bis 230 px bei 600 — sonst bekäme nur „Braucht dich“ den Platz */
.bf-koerper > .bf-tagraster { flex: 1 1 auto; display: grid; grid-template-columns: clamp(172px, 36%, 230px) minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
.bf-rechts { min-width: 0; align-self: start; display: flex; flex-direction: column; gap: 5px; }
@container bfk (max-width: 339px) {
  .bf-koerper > .bf-tagraster { grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* Zeitstrahl: die Linie links gehört den Fenstern; die Pause dazwischen ist gestrichelt. Kreis: leer = frei, gefüllt = belegt, hellblau = jetzt. */
.bf-strahl { list-style: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.bf-fenster { position: relative; flex: 1 1 auto; margin: 0; padding: 2px 0 4px 12px; border-left: 2px solid rgb(255 255 255 / .3); min-width: 0; }
.bf-f-in { display: grid; gap: 1px; min-width: 0; }
.bf-fenster::before {
  content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: transparent; border: 2px solid var(--bf-dim);
}
.bf-fenster.bf-voll::before { background: var(--bf-text); border-color: var(--bf-text); }
.bf-fenster.bf-jetzt::before { background: var(--bf-akzent); border-color: var(--bf-akzent); }
.bf-fenster.bf-vorbei::before { border-color: rgb(226 232 240 / .5); }
.bf-fenster.bf-vorbei.bf-voll::before { background: rgb(226 232 240 / .5); }
/* Vergangene Fenster gedimmt: leisere Farben statt Deckkraft, damit der Kontrast ≥ 4,5 : 1 bleibt */
.bf-fenster.bf-vorbei .bf-ter, .bf-fenster.bf-vorbei .bf-ter-titel, .bf-fenster.bf-vorbei .bf-fs { color: rgb(226 232 240 / .62); }
.bf-fz { font: 600 12px/1.35 'Montserrat', system-ui, sans-serif; color: var(--bf-kupfer); font-variant-numeric: tabular-nums; }
.bf-jetzt-marke {
  justify-self: start; padding: 0 6px; border-radius: 4px; background: rgb(125 211 252 / .16); color: var(--bf-akzent);
  font: 600 12px/1.35 'Open Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.bf-ter { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; font-size: 12px; line-height: 1.35; color: var(--bf-text); }
.bf-ter-zeit { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-ter-frist .bf-ter-zeit { color: var(--bf-orange-text); }
.bf-ter .bf-schwaerz { flex: 0 1 auto; overflow: hidden; }
.bf-ter-titel { display: block; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.bf-ter a.bf-ter-titel { text-decoration: underline; text-decoration-color: rgb(183 192 207 / .6); text-underline-offset: 2px; }
.bf-ter a.bf-ter-titel:hover { text-decoration-color: var(--bf-akzent); }
.bf-ter.bf-ter-vorbei, .bf-ter.bf-ter-vorbei .bf-ter-titel { color: rgb(226 232 240 / .62); }   /* schon beendeter Termin (Feld `vorbei` der Daten) */
.bf-fmehr { font-size: 12px; line-height: 1.35; color: var(--bf-dim); }
.bf-fs {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; line-height: 1.35; color: var(--bf-dim);
}
.bf-fs-leer { display: block; }
.bf-pause { flex: none; height: 12px; margin: 0; padding: 0; border-left: 2px dashed rgb(255 255 255 / .3); }
/* Knappste Stufe: je Fenster eine Zeile (Beschriftung, jetzt-Marke, Zahl der Termine oder „Nichts geplant.“) */
.bf-strahl-knapp .bf-f-in { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.bf-strahl-knapp .bf-pause { height: 6px; }

/* Abschnitte und Punkte */
.bf-abschnitt { min-width: 0; }
.bf-abschnitt-kopf {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; font: 700 12px/1.35 'Open Sans', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bf-kupfer);
}
.bf-abschnitt-zahl { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--bf-dim); }
.bf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bf-punkt { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; min-width: 0; }
.bf-nr { font-size: 12px; line-height: 1.4; color: var(--bf-dim); font-variant-numeric: tabular-nums; }
.bf-punkt-inhalt { min-width: 0; }
.bf-punkt-titel { margin: 0; font: 600 13px/1.35 'Open Sans', system-ui, sans-serif; white-space: nowrap; min-width: 0; }
.bf-punkt-titel a { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: #fff; text-decoration: none; border-radius: 4px; }
.bf-punkt-titel a:hover .bf-punkt-text { text-decoration: underline; }
.bf-punkt-text { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.bf-ohnelink { color: #fff; }
.bf-pfeil-aus { flex: none; font-size: 12px; color: var(--bf-dim); }
.bf-punkt-satz {
  margin: 0; font-size: 12px; line-height: 1.35; color: var(--bf-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bf-punkt-satz a { color: var(--bf-text); text-decoration: underline; text-decoration-color: rgb(183 192 207 / .6); text-underline-offset: 2px; border-radius: 3px; }
.bf-punkt-satz a:hover { text-decoration-color: var(--bf-akzent); }
.bf-leer { margin: 2px 0 4px; font-size: 12px; line-height: 1.35; color: var(--bf-dim); }
.bf-mehr-zeile { margin: 0 0 0 20px; font-size: 12px; line-height: 1.35; }
.bf-mehr { position: relative; display: inline-block; color: var(--bf-akzent); font-weight: 600; text-decoration: none; }
/* Klickfläche ≥ 24 px, ohne die Zeile zu verlängern */
.bf-mehr::after { content: ''; position: absolute; inset: -4px -6px; }
.bf-mehr:hover { text-decoration: underline; }

/* Eine Zeile „Erledigt“: Name, wichtigster Punkt, Zahl der übrigen */
.bf-erledigt { display: flex; align-items: baseline; gap: 6px; margin: 0; min-width: 0; white-space: nowrap; font-size: 12px; line-height: 1.35; color: var(--bf-dim); }
.bf-erledigt-name { flex: none; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bf-kupfer); }
.bf-erledigt-rest { flex: none; }
.bf-erledigt-meta { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--bf-dim); }
.bf-erledigt .bf-schwaerz-kurz { flex: 0 2 auto; }
.bf-erledigt .bf-schwaerz { flex: 0 1 auto; overflow: hidden; }
.bf-erledigt-titel { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--bf-text); }
/* „Im Team überfällig“ (E-11.2): eine Zeile wie „Erledigt“, je Quelle Zahl und Link */
.bf-team { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--bf-dim); }
.bf-team > * { white-space: nowrap; }   /* bricht zwischen den Quellen um, nie mitten in „RMS 13“ (Controller und Revisor 1.11.0) */
.bf-team-name { flex: none; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bf-kupfer); }
.bf-team-q { flex: none; color: var(--bf-text); font-variant-numeric: tabular-nums; }
.bf-team a.bf-team-q { text-decoration: underline; text-decoration-color: rgb(183 192 207 / .6); text-underline-offset: 2px; }
.bf-team-trenner { flex: none; }
.bf-erledigt a.bf-erledigt-titel { text-decoration: underline; text-decoration-color: rgb(183 192 207 / .6); text-underline-offset: 2px; }

/* Fußzeile: Quellenzustand in einer Zeile */
/* Der Puffer vor der Fußzeile schluckt die Abstände davor und danach (−5 px), damit seine Höhe die wirkliche Reserve ist */
.bf-feder { flex: 1 1 0 !important; min-height: 0; margin: -5px 0; }
.bf-fuss {
  display: flex; align-items: baseline; gap: 6px; margin: 0; padding-top: 4px; border-top: 1px solid var(--bf-linie);
  font-size: 12px; line-height: 1.35; color: var(--bf-dim); white-space: nowrap; overflow: hidden;
}
.bf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.bf-fuss[data-art="warn"] .bf-dot { background: var(--bf-warn); }
.bf-fuss[data-art="warn"] { color: var(--bf-text); }
.bf-fuss-text { min-width: 0; overflow: hidden; }
.bf-z-neu { background: rgb(211 148 98 / .3); color: #fff; border-radius: 4px; box-shadow: 0 0 0 2px rgb(211 148 98 / .3); }

/* Woche: Raster waagerecht — Spalten Mo–Fr, Zeilen die vier Fenster; die Zelle trägt die Belegung, die Fahne eine Frist */
.bf-wraster { display: grid; gap: 3px; --bf-spalten: 5; }
.bf-wzeile { display: grid; grid-template-columns: 72px repeat(var(--bf-spalten), minmax(0, 1fr)); gap: 3px; align-items: center; }
.bf-wkopf { min-width: 0; padding-bottom: 1px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--bf-dim); font-variant-numeric: tabular-nums; }
.bf-wname { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; color: var(--bf-text); }
.bf-wkopf.bf-wheute, .bf-wkopf.bf-wheute .bf-wname { color: var(--bf-akzent); }
.bf-wkopf.bf-wvorbei { color: rgb(226 232 240 / .62); }
.bf-wkopf.bf-wvorbei .bf-wname { color: rgb(238 242 248 / .68); }
.bf-wlabel { font-size: 12px; line-height: 1.35; color: var(--bf-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-wz { position: relative; display: block; height: 22px; min-width: 0; border-radius: 5px; background: rgb(255 255 255 / .06); }
/* Stufe 1 gegen das leere Feld ≥ 3 : 1 (WCAG 1.4.11, Controller 1.9.3: vorher 1,78 : 1); Stufe 2 heller */
.bf-wz.bf-wz-1 { background: rgb(48 116 170); }
.bf-wz.bf-wz-2 { background: rgb(96 170 224); }
.bf-wz.bf-wvorbei { background: rgb(255 255 255 / .03); }
.bf-wz.bf-wvorbei.bf-wz-1, .bf-wz.bf-wvorbei.bf-wz-2 { background: rgb(0 128 201 / .22); }
.bf-wz.bf-wheute { outline: 1px solid rgb(125 211 252 / .55); }
.bf-wfahne { position: absolute; right: 4px; top: 3px; width: 10px; height: 16px; overflow: visible; }
.bf-fahne-linie { stroke: var(--bf-orange); stroke-width: 2; stroke-linecap: round; }
.bf-fahne-tuch { fill: var(--bf-orange); stroke: #0B1220; stroke-width: 1.2; paint-order: stroke; }   /* dunkler Rand: auf den hellen Stufen sichtbar */
.bf-wvorbei-text { display: block; padding: 0 6px; font-size: 12px; line-height: 22px; color: rgb(226 232 240 / .62); }
.bf-frist { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.35; }
.bf-frist + .bf-frist { margin-top: 4px; }
.bf-frist time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bf-kupfer); }
.bf-frist-text { display: flex; align-items: baseline; gap: 5px; min-width: 0; color: var(--bf-dim); white-space: nowrap; }
.bf-frist-text .bf-schwaerz { flex: 0 1 auto; overflow: hidden; }
.bf-frist-titel { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--bf-text); }
.bf-frist-text a.bf-frist-titel { text-decoration: underline; text-decoration-color: rgb(183 192 207 / .6); text-underline-offset: 2px; }
.bf-frist-quelle { flex: none; }

/* Feedback-Bild (D-17, FB-2026-003/005): Fremde Texte fehlen nur in der Kopie des Widgets; dann wird der leere Halter
   selbst zum grauen Balken, und der Hinweis unter dem Panel erscheint (die Marke fehlt ebenfalls nur dort).
   Kein Pseudo-Element: html2canvas liest ::before vom Original, wo der Balken aus ist (Befund Bildprobe 22.10.2026). */
.bf-schwaerz { min-width: 0; }
.bf-schwaerz:not(:has(> [data-html2canvas-ignore])) {
  width: 72%; height: 8px; margin: 6px 0 5px; border-radius: 4px; background: rgb(148 163 184 / .40);
}
.bf-schwaerz-kurz:not(:has(> [data-html2canvas-ignore])) { width: 46%; background: rgb(148 163 184 / .24); }
.bf-bildhinweis { display: none; margin: 0; padding: 4px 14px 8px; font-size: 12px; line-height: 1.35; color: var(--bf-dim); }
.bf-panel:not(:has(> .bf-marke)) .bf-bildhinweis { display: block; }

/* Zustände: Laden, nicht erreichbar, Anmeldung, noch kein Briefing — in Endhöhe, kein Sprung */
.bf-koerper-zustand { justify-content: center; }
.bf-zustand { text-align: center; padding: 8px 4px; }
.bf-zustand-text { margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--bf-text); }
.bf-zustand-knopf {
  min-height: 32px; padding: 0 14px; border-radius: 10px; cursor: pointer; border: 1px solid rgb(255 255 255 / .3);
  background: #006699; color: #fff; font: 600 12px/1.35 'Open Sans', system-ui, sans-serif;
}

/* ── Schublade (1272–1459 px) ── */
.bf-schublade {
  position: fixed; margin: 0; padding: 0; border: 0; background: transparent; width: 400px; max-width: calc(100vw - 16px);
  max-height: none; overflow: visible; color: inherit;
}
.bf-schublade:not([open]) { display: none; }
.bf-schublade::backdrop { background: rgb(4 6 14 / .35); }
.bf-schublade > .bf-panel { height: 100%; }

/* ── Auslöser in der Begrüßungszeile ── */
.start-gruss { position: relative; }
.bf-ausloeser {
  position: absolute; right: 24px; top: 50%; translate: 0 -50%; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; cursor: pointer;
  background: var(--bf-flaeche); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .22); color: var(--bf-text); font: 600 13px/1.2 'Open Sans', system-ui, sans-serif;
  text-shadow: none;
}
.bf-ausloeser:hover { background: rgb(24 32 56 / .92); }
.bf-ausloeser[hidden] { display: none; }
.bf-aus-nur-icon { width: 44px; padding: 0; justify-content: center; }
.bf-aus-nur-icon .bf-aus-text { display: none; }
.bf-aus-icon { flex: none; }

/* ── Karte (unter 1272 px) ── */
.bf-karte { position: relative; width: min(calc(100% - 32px), 1072px); margin: 0 auto 12px; flex: none; }
.bf-karte[hidden] { display: none; }
.bf-karte-zeile {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 0 14px; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--bf-flaeche); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--bf-linie); color: var(--bf-text); font: 600 13px/1.35 'Open Sans', system-ui, sans-serif;
}
.bf-karte-zeile .bf-pfeil { flex: none; width: 14px; height: 14px; }
.bf-karte-zeile[aria-expanded="false"] .bf-pfeil { rotate: -90deg; }
.bf-karte-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-karte-offen > .bf-karte-zeile { display: none; }
.bf-karte > .bf-panel { height: auto; }

/* ── Knopf „Briefing zeigen“ und Hinweiszeile (verborgen) ── */
.bf-zeigen {
  position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px; cursor: pointer;
  background: var(--bf-flaeche); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .22); color: var(--bf-text);
}
.bf-zeigen[hidden] { display: none; }
.bf-hinweiszeile {
  margin: 0; padding: 5px 12px; border-radius: 12px; background: var(--bf-flaeche); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--bf-linie); color: var(--bf-text); font: 600 12px/1.35 'Open Sans', system-ui, sans-serif; pointer-events: none; white-space: nowrap;
}
.bf-hinweiszeile[hidden] { display: none; }
.briefing-platz > .bf-hinweiszeile { position: absolute; top: 2px; left: 40px; }
.start-gruss > .bf-hinweiszeile { position: absolute; right: 80px; top: 50%; translate: 0 -50%; }
.bf-karte > .bf-hinweiszeile { margin-top: 6px; }

.bf-ansage {
  position: fixed; left: 50%; bottom: 56px; translate: -50% 0; z-index: 400; margin: 0; padding: 9px 14px; border-radius: 12px; max-width: min(560px, calc(100vw - 16px));
  background: rgb(10 14 28 / .96); color: var(--bf-text); border: 1px solid rgb(255 255 255 / .18); font: 500 13px/1.35 'Open Sans', system-ui, sans-serif;
}
.bf-ansage[hidden] { display: none; }

/* Im Bearbeitungsmodus gehört der Platz der Ablage und der Bearbeitungsleiste */
html.ansicht-modus .bf-karte, html.ansicht-modus .bf-ausloeser, html.ansicht-modus .bf-hinweiszeile, html.ansicht-modus .bf-zeigen { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bf-dreht svg { animation: none; }
  .bf-panel, .bf-knopf, .bf-ausloeser { transition: none; }
}
@media (forced-colors: active) {
  .bf-panel, .bf-karte-zeile, .bf-ausloeser, .bf-knopf { border: 1px solid CanvasText; }
}