/* Startseite anpassen — Bearbeitungsmodus, Kachelstufen, Ablage (Plan 5.1, AP-A1).
   Alles hier ist immer dunkel (Startfläche, Leiste, Ablage, Dialoge, Hinweise). Farben aus den vorhandenen Tokens. */

.sr-nur {
  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;
}
.ansicht-leiste[hidden], .ansicht-ablage[hidden], .ansicht-hinweis[hidden],
.ansicht-menue[hidden], .ansicht-meldung[hidden], .kachel-zelle[hidden], .ab-leer[hidden],
.ab-gesperrt[hidden], .ab-gruppe[hidden], .dock-trenner[hidden] { display: none !important; }

/* ── Ladefolge: ohne Vorab-Anzeige bleibt das Raster bis zu 800 ms unsichtbar (kein Springen) ── */
html.ansicht-warte .app-grid, html.ansicht-warte .start-dock { visibility: hidden; }
.dock-icon.ansicht-aus { display: none; }

/* ── Zellen um die Kacheln (nehmen die Werkzeuge im Modus auf) ───────────────────────────────── */
.kachel-zelle { position: relative; display: flex; min-width: 0; container-type: inline-size; }
.kachel-zelle > .app-card { flex: 1 1 auto; min-width: 0; }

/* ── Kachelstufen (E-2): Spalten je Fensterbreite nach Tabelle 5.1 ─────────────────────────────
   Die Breite ist die der Startfläche (ohne die Schublade der Ablage, die die Seite beiseite schiebt) — ohne Schublade
   ist das die Fensterbreite. Darum Container-Abfragen statt Medienabfragen. */
.start-flaeche[data-messung] { container: flaeche / inline-size; }
.start-flaeche[data-messung] .app-grid { --sp: 2; grid-template-columns: repeat(var(--sp), minmax(0, 1fr)); }
.start-flaeche[data-messung][data-stufe="klein"]  .app-grid { --sp: 3; }
.start-flaeche[data-messung][data-stufe="mittel"] .app-grid { --sp: 2; }
.start-flaeche[data-messung][data-stufe="gross"]  .app-grid { --sp: 1; }
@container flaeche (min-width: 1000px) {
  .start-flaeche[data-messung] .app-grid { --sp: 4; }
  .start-flaeche[data-messung][data-stufe="klein"]  .app-grid { --sp: 4; }
  .start-flaeche[data-messung][data-stufe="mittel"] .app-grid { --sp: 4; }
  .start-flaeche[data-messung][data-stufe="gross"]  .app-grid { --sp: 3; }
}
@container flaeche (min-width: 1272px) {
  .start-flaeche[data-messung][data-stufe="klein"]  .app-grid { --sp: 6; }
}

/* klein: Symbol 32 px, Name eine Zeile, Status nur als Punkt (Text bleibt für Hilfstechnik), ohne Version/Beschreibung/FD-Punkte */
.start-flaeche[data-stufe="klein"] .app-grid .app-card { padding: 8px 10px 9px; gap: 4px; }
.start-flaeche[data-stufe="klein"] .app-grid .app-icon,
.start-flaeche[data-stufe="klein"] .app-grid .app-icon-svg { width: 32px; height: 32px; border-radius: 9px; }
.start-flaeche[data-stufe="klein"] .app-grid .app-icon-svg svg { width: 18px; height: 18px; }
.start-flaeche[data-stufe="klein"] .app-grid .app-desc,
.start-flaeche[data-stufe="klein"] .app-grid .app-version,
.start-flaeche[data-stufe="klein"] .app-grid .fd-punkte { display: none; }
.start-flaeche[data-stufe="klein"] .app-grid .app-name {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem;
}
.start-flaeche[data-stufe="klein"] .app-grid .app-status-dot ~ .app-badge:not(.ansicht-neu) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.start-flaeche[data-stufe="klein"] .app-grid .app-status > .app-badge:not(.ansicht-neu),
.start-flaeche[data-stufe="klein"] .app-grid .ansicht-neu-zeile > .app-badge:not(.ansicht-neu),
.start-flaeche[data-stufe="klein"] .app-grid .app-soon-badge {
  display: inline-block; width: 9px; height: 9px; min-width: 9px; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; overflow: hidden; color: transparent; background: #38BDF8; flex-shrink: 0;
}
.start-flaeche[data-stufe="klein"] .app-grid .app-soon-badge { background: rgb(255 255 255 / .55); }
.start-flaeche[data-stufe="klein"] .app-grid .app-status-row { gap: 5px; }

/* groß: Symbol 56 px, Name 1,05 rem, Beschreibung zwei Zeilen (unter 741 px Höhe eine), Version */
.start-flaeche[data-stufe="gross"] .app-grid .app-icon,
.start-flaeche[data-stufe="gross"] .app-grid .app-icon-svg { width: 56px; height: 56px; border-radius: 15px; }
.start-flaeche[data-stufe="gross"] .app-grid .app-name { font-size: 1.05rem; }
.start-flaeche[data-stufe="gross"] .app-grid .app-desc { -webkit-line-clamp: 2; font-size: .8rem; }
@media (max-height: 740px) {
  .start-flaeche[data-stufe="gross"] .app-grid .app-desc { -webkit-line-clamp: 1; }
}

/* verdichtet: Abstand 8 px und die Maße, die bisher bei niedrigen Fenstern galten (jetzt Sache der Messregel) */
.start-flaeche[data-messung][data-dicht] { padding-top: 8px; padding-bottom: 8px; }
.start-flaeche[data-messung][data-dicht] .start-gruss { margin-bottom: 6px; }
.start-flaeche[data-messung][data-dicht] .gruss-zeile { font-size: 1.2rem; }
.start-flaeche[data-messung][data-dicht] .section-header { margin-bottom: 8px; }
.start-flaeche[data-messung][data-dicht] .app-grid { gap: 8px; }
.start-flaeche[data-messung][data-dicht] .app-grid .app-card { padding: 10px 13px 10px; gap: 4px; }
.start-flaeche[data-messung][data-dicht] .app-grid .app-desc { -webkit-line-clamp: 1; }
.start-flaeche[data-messung][data-stufe="klein"][data-dicht] .app-grid .app-card { padding: 6px 9px 7px; gap: 3px; }

/* ── Messabbild: unsichtbar, gleiche Regeln wie die Seite ─────────────────────────────────────── */
.ansicht-abbild {
  position: fixed; inset: 0 0 0 var(--osl-b, 0px); z-index: -5; visibility: hidden; pointer-events: none;
  display: flex; flex-direction: column;
}
.ansicht-abbild .abbild-kopf, .ansicht-abbild .abbild-fuss { flex: none; }

/* ── Platz des Briefings (Teil B): Spalte 1 ab 1460 px; im Modus gehört der Platz der Ablage ────
   Lage und Breite nach Plan 5.2 („Panel-Budget“) berechnet ansicht-dock.js (--briefing-x, --briefing-b): x = Spalte 1 + 24 px,
   bei gewählter Stelle „senkrecht links“ rechter Rand der Leiste + 12 px; Breite = min(Spalte 1 − x − 24, 600), mindestens 360 (600 seit FB-2026-007).
   Oberkante y 76 (12 px unter dem Kopf); die Höhe setzt später briefing.js (Oberkante Dock − 8 − 76). */
.briefing-platz[hidden] { display: none; }
@media (min-width: 1460px) {
  .briefing-platz { grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: start; margin: 12px 0 0 24px; }
  html[data-dock-wirkt] .briefing-platz {
    position: absolute; top: 12px; left: var(--briefing-x, 24px); width: var(--briefing-b, 448px);
    grid-column: auto; grid-row: auto; margin: 0; box-sizing: border-box;
  }
}
html.ansicht-modus .briefing-platz { display: none !important; }

/* ── Zahnrad „Startseite anpassen“ (seit 1.13.0 unten in der Seitenleiste, Punkt der Verwaltung; Klassen osl-item) ───────── */
#ansicht-zahnrad.ist-gesperrt { opacity: .6; cursor: default; }
#ansicht-zahnrad.ist-gesperrt:hover { background: transparent; }
#ansicht-zahnrad.ist-aktiv { background: var(--osl-aktiv-bg, #0070B0); color: var(--osl-aktiv-text, #fff); font-weight: 600; }

/* ── Hinweisfeld, Menü, Meldung ──────────────────────────────────────────────────────────────── */
.ansicht-hinweis, .ansicht-menue, .ansicht-meldung {
  position: fixed; z-index: 300;
  background: rgb(10 14 28 / .96); color: #EEF2F8;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 12px;
  box-shadow: 0 14px 36px -10px rgb(0 0 0 / .7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 .82rem/1.4 'Open Sans', system-ui, sans-serif;
}
.ansicht-hinweis { padding: 9px 13px; width: max-content; max-width: 300px; }
.ansicht-menue { padding: 6px; min-width: 240px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 2px; }
.ansicht-menue .am-punkt {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 8px 10px; min-height: 36px; border: 0; border-radius: 8px; background: transparent;
  color: #EEF2F8; font: inherit; cursor: pointer;
}
.ansicht-menue .am-punkt:hover, .ansicht-menue .am-punkt:focus-visible { background: rgb(255 255 255 / .1); outline: none; }
.ansicht-menue .am-punkt:focus-visible { box-shadow: inset 0 0 0 2px #D39462; }
.ansicht-menue .am-punkt[aria-disabled="true"] { color: rgb(238 242 248 / .78); cursor: default; }
.ansicht-meldung {
  left: 50%; transform: translateX(-50%); padding: 9px 14px; max-width: min(560px, calc(100vw - 16px)); width: max-content;
}
.am-knopf, .al-knopf, .al-segknopf, .al-erneut {
  font: 600 .8rem/1 'Open Sans', system-ui, sans-serif; color: #EEF2F8; cursor: pointer;
}
.am-knopf {
  margin-left: 6px; min-height: 28px; padding: 0 10px; border-radius: 8px; background: #006699; border: 1px solid rgb(255 255 255 / .25);
}

/* ── Bearbeitungsleiste ─────────────────────────────────────────────────────────────────────────── */
.ansicht-leiste { display: none; }
html.ansicht-modus .ansicht-leiste {
  display: block; position: sticky; top: var(--ansicht-kopf-h, 64px); z-index: 90; margin-bottom: 10px; outline: none;
}
html.ansicht-modus .start-gruss { display: none !important; }
@media (min-width: 1460px) {
  html.ansicht-modus .ansicht-leiste { grid-column: 2; grid-row: 1; }
}
.al-karte {
  display: flex; flex-direction: column; gap: 0; padding: 1px 8px; border-radius: 12px;
  background: rgb(10 14 28 / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13), 0 10px 28px -14px rgb(0 0 0 / .7);
  color: #EEF2F8; font-family: 'Open Sans', system-ui, sans-serif;
}
.al-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; flex-wrap: nowrap; }
.al-ansicht { font: 600 .8rem/1 'Open Sans', system-ui, sans-serif; color: #D39462; white-space: nowrap; }
.al-label { font: 500 .8rem/1 'Open Sans', system-ui, sans-serif; color: rgb(238 242 248 / .86); white-space: nowrap; }
.al-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgb(255 255 255 / .07); flex: none; }
.al-segknopf {
  height: 28px; min-width: 52px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent;
}
.al-segknopf[aria-pressed="true"] { background: #1A78B8; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }   /* gegen den Nachbarn ≥ 3 : 1, Weiß darauf 4,75 : 1 */
.al-segknopf:hover { background: rgb(255 255 255 / .1); }
.al-segknopf[aria-pressed="true"]:hover { background: #1A78B8; }
.al-select {
  height: 28px; min-width: 0; padding: 0 24px 0 8px; border-radius: 8px; color-scheme: dark;
  background-color: rgb(255 255 255 / .08); color: #EEF2F8; border: 1px solid rgb(255 255 255 / .2);
  font: 500 .78rem/1 'Open Sans', system-ui, sans-serif; -webkit-appearance: none; appearance: none; text-overflow: clip;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23EEF2F8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.al-select option { background: #0E1426; color: #EEF2F8; }
.al-knopf {
  height: 28px; padding: 0 11px; border-radius: 8px; flex: none; white-space: nowrap;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.al-knopf:hover { background: rgb(255 255 255 / .15); }
.al-knopf[aria-disabled="true"] { color: rgb(238 242 248 / .78); border-style: dashed; cursor: default; }
.al-fertig { background: #006699; border-color: rgb(255 255 255 / .3); color: #fff; }
.al-fertig:hover { background: #0077b3; }
.al-reset-icon { display: none; }
.al-speicher { flex: none; font: 500 .78rem/1.2 'Open Sans', system-ui, sans-serif; color: rgb(238 242 248 / .86); white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-speicher.al-fehler { color: #FBBF24; }
.al-erneut { background: transparent; border: 0; padding: 4px 2px; color: #FBBF24; text-decoration: underline; min-height: 24px; }
.al-rueckfall { flex: 1 1 0; min-width: 0; text-align: right; font: 500 .75rem/1.2 'Open Sans', system-ui, sans-serif; color: #FBBF24; }
.al-rueckfall:empty { display: none; }
.al-select:focus-visible, .al-knopf:focus-visible, .al-segknopf:focus-visible, .al-erneut:focus-visible,
.ab-zurueck:focus-visible, .ab-zu:focus-visible, .ad-abbruch:focus-visible, .ad-ok:focus-visible, .am-knopf:focus-visible {
  outline: 2px solid #D39462; outline-offset: 2px;
}
.ansicht-leiste:focus-visible .al-karte { box-shadow: inset 0 0 0 2px #D39462; }

/* breit (ab 600 px Breite und 500 px Höhe) oder kompakt */
.al-kompakt { display: none; }
html.ansicht-kompakt .al-breit { display: none !important; }
html.ansicht-kompakt .al-kompakt { display: block; }
html.ansicht-kompakt .al-ansicht { display: none; }
html.ansicht-kompakt .al-reset-text { display: none; }
html.ansicht-kompakt .al-reset-icon { display: block; }
html.ansicht-kompakt .al-reset { width: 32px; padding: 0; flex: none; }
html.ansicht-kompakt .al-karte { padding: 1px 8px; }
html.ansicht-kompakt .al-zeile { height: 34px; gap: 6px; }
html.ansicht-kompakt .al-zeile-1 .al-select:first-of-type { flex: 2 1 0; }
html.ansicht-kompakt .al-zeile-1 .al-select { flex: 3 1 0; }
html.ansicht-kompakt .al-zeile-1 #al-groesse-k { flex: 2 1 0; }
html.ansicht-kompakt .al-zeile-2 { justify-content: flex-start; }
html.ansicht-kompakt .al-zeile-2 .al-speicher { margin-left: auto; }
html.ansicht-kompakt .al-zeile-2 .al-knopf { padding: 0 9px; }
/* einzeilig (Fenster niedriger als 500 px, z. B. Handy quer): beide Zeilen in einer Reihe, höchstens 40 px */
html.ansicht-einzeilig .al-karte { flex-direction: row; align-items: center; gap: 6px; height: 38px; padding: 1px 8px; }
html.ansicht-einzeilig .al-zeile { height: 34px; flex: 0 1 auto; min-width: 0; }
html.ansicht-einzeilig .al-zeile-1 { flex: 1 1 0; }
html.ansicht-einzeilig .al-zeile-1 .al-select { flex: 1 1 0; }
html.ansicht-einzeilig .al-zeile-2 .al-speicher { margin-left: 0; }
html.ansicht-einzeilig .al-zeile-2 { flex: 0 0 auto; }

/* ── Werkzeuge an den Kacheln (× ‹ ›, je 24 × 24 mit 4 px Abstand) ───────────────────────────── */
.kachel-ctl { display: none; }
html.ansicht-modus .kachel-ctl {
  display: flex; position: absolute; top: 7px; right: 7px; gap: 4px; z-index: 4;
}
.kachel-ctl button {
  width: 24px; height: 24px; padding: 0; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; font: 700 15px/1 'Open Sans', system-ui, sans-serif; color: #fff;
  background: rgb(8 11 24 / .92); border: 1px solid rgb(255 255 255 / .38);
}
.kachel-ctl button:hover { background: #006699; }
.kachel-ctl .k-weg:hover { background: #B91C1C; }
.kachel-ctl button:focus-visible { outline: 2px solid #D39462; outline-offset: 2px; }
html.ansicht-modus .kachel-zelle .app-status { visibility: hidden; }
html.ansicht-modus .kachel-zelle > .app-card { cursor: grab; }
html.ansicht-modus .kachel-zelle > .app-card:hover { transform: none; }
html.ansicht-modus .kachel-zelle { outline: 1px dashed rgb(255 255 255 / .22); outline-offset: 2px; border-radius: 18px; }
@container (max-width: 135px) {
  html.ansicht-modus .start-flaeche[data-stufe="klein"] .kachel-zelle > .app-card { padding-bottom: 36px !important; }
  html.ansicht-modus .start-flaeche[data-stufe="klein"] .kachel-ctl { top: auto; bottom: 6px; right: 50%; transform: translateX(50%); }
}
html.ansicht-zieht, html.ansicht-zieht * { cursor: grabbing !important; }
.ziehen-geist { opacity: .35; }
.ziehen-zug { box-shadow: 0 20px 44px -12px rgb(0 0 0 / .7); }

/* ── Ablage „Ausgeblendet“ ───────────────────────────────────────────────────────────────────── */
.ansicht-ablage {
  position: fixed; z-index: 85; display: flex; flex-direction: column; min-height: 0;
  background: rgb(12 17 33 / .94); color: #EEF2F8; font-family: 'Open Sans', system-ui, sans-serif;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .75);
}
.ansicht-ablage[data-form="spalte"] { border-radius: 16px; }
.ansicht-ablage[data-form="schublade"] { border-radius: 0 16px 16px 0; border-left: 0; }
.ansicht-ablage[data-form="blatt"] { border-radius: 16px 16px 0 0; border-bottom: 0; }
.ab-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px 14px; flex: none; }
.ab-titel { font: 700 .95rem/1.2 'Montserrat', sans-serif; color: #fff; outline: none; }
.ab-zu {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: #EEF2F8;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 9px; background: transparent;
}
html[data-ablage="spalte"] .ab-zu { display: none; }
.ab-rumpf { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 12px 12px; }
.ab-leer, .ab-gesperrt { font-size: .82rem; line-height: 1.45; color: rgb(238 242 248 / .84); padding: 6px 2px; }
.ab-gesperrt { color: #FBBF24; }
.ab-gruppentitel { font: 600 .78rem/1.2 'Open Sans', sans-serif; color: #D39462; margin: 8px 2px 6px; letter-spacing: .02em; text-transform: none; }
.ab-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.ab-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); cursor: grab;
}
.ab-icon { width: 32px; height: 32px; flex: none; border-radius: 9px; object-fit: contain; display: grid; place-items: center; }
.ab-icon svg { width: 18px; height: 18px; }
.ab-name { flex: 1 1 auto; min-width: 0; font: 600 .82rem/1.25 'Open Sans', sans-serif; color: #fff; }
.ab-zurueck {
  flex: none; min-width: 24px; min-height: 28px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  font: 600 .78rem/1 'Open Sans', sans-serif; color: #EEF2F8; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
}
.ab-zurueck:hover { background: #006699; }
/* Schublade und Blatt: Seite rückt beiseite, nichts verdeckt ein fokussiertes Element (WCAG 2.4.11) */
html.ansicht-ablage-offen[data-ablage="schublade"] .start-flaeche { padding-left: var(--ansicht-ablage-w, 0px); }
html.ansicht-ablage-offen[data-ablage="schublade"].ansicht-modus .ansicht-leiste {
  max-width: none; width: calc(100% + var(--ansicht-ablage-w, 0px)); margin-left: calc(-1 * var(--ansicht-ablage-w, 0px));
  padding-left: 16px; padding-right: 16px;
}
html.ansicht-ablage-offen[data-ablage="blatt"] body { padding-bottom: var(--ansicht-blatt-h, 0px); }
html.ansicht-modus {
  scroll-padding-top: calc(var(--ansicht-kopf-h, 64px) + var(--ansicht-leiste-h, 0px) + 10px);
  scroll-padding-bottom: calc(var(--ansicht-blatt-h, 0px) + 10px);
}

/* Im Modus nichts über den Fensterrand hinaus (Tooltips und Dock dürfen die Seite nicht verbreitern) */
html.ansicht-modus .start-flaeche { overflow-x: clip; }

/* ── Dialog Zurücksetzen ─────────────────────────────────────────────────────────────────────── */
.ansicht-dialog {
  margin: auto; padding: 18px 20px 16px; width: min(460px, calc(100vw - 24px));
  border: 1px solid rgb(255 255 255 / .16); border-radius: 18px; color: #EEF2F8; color-scheme: dark;
  background: rgb(12 17 33 / .96); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
  font-family: 'Open Sans', system-ui, sans-serif;
}
.ansicht-dialog::backdrop { background: rgb(4 6 14 / .6); }
.ad-text { font-size: .9rem; line-height: 1.5; margin-bottom: 16px; }
.ad-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.ad-ok { background: #B91C1C; border-color: rgb(255 255 255 / .3); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .kachel-zelle, .ab-item { transition: none; }
}

/* ══ Schnellzugriff (Dock), AP-A2 — Plan 5.1 ═══════════════════════════════════════════════════════
   Maß, Raster und Lage setzt ansicht-dock.js als Attribut `data-dock-wirkt` und als Variablen an <html>:
   links (links unter dem Briefing) · mitte (unten mittig) · rechts-unter · rechts-ueber · senkrecht · unter · ueber.
   Ohne das Skript gilt die einfache Leiste aus index.html. */
.start-dock[hidden] { display: none !important; }
.dock-ueberlage, .dock-werkzeuge { display: none; }
html[data-dock-wirkt] .start-flaeche { position: relative; }
html[data-dock-wirkt] .start-dock { display: block; }
html[data-dock-wirkt] .dock-rahmen { display: block; position: relative; width: max-content; max-width: 100%; }
html[data-dock-wirkt] .dock-karte { display: block; position: relative; }
html[data-dock-wirkt] .dock-leiste {
  display: grid; grid-template-columns: var(--dock-spalten, repeat(3, var(--dock-m, 56px)) 1px repeat(3, var(--dock-m, 56px))); grid-template-rows: var(--dock-zeilen, var(--dock-m, 56px));
  gap: var(--dock-zeilenabstand, 10px) 10px; align-items: center; justify-items: center; justify-content: start; align-content: start;
  width: max-content; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10), 0 18px 40px -18px rgb(0 0 0 / .7);
}
html[data-dock-wirkt] .dock-icon { grid-column: var(--c, auto); grid-row: var(--r, auto); }
html[data-dock-wirkt] .dock-trenner {
  grid-column: var(--c, auto); grid-row: var(--r, auto); width: 1px; height: auto; margin: 6px 0; align-self: stretch; justify-self: center;
}
html[data-dock-wirkt] .dock-trenner.dock-trenner-quer { width: auto; height: 1px; margin: 0 6px; align-self: center; justify-self: stretch; }

/* Lage 1: an den Fuß gebunden (Unterkante 12 px über dem Fuß) — links unter dem Briefing, unten mittig; senkrecht am linken Rand */
html[data-dock-wirkt="links"] .start-dock,
html[data-dock-wirkt="mitte"] .start-dock,
html[data-dock-wirkt="senkrecht"] .start-dock {
  position: absolute; z-index: 6; margin: 0; padding: 0; width: max-content; max-width: none; grid-column: auto; grid-row: auto;
}
html[data-dock-wirkt="links"] .start-dock { left: var(--dock-x, 24px); bottom: 12px; }
/* „mitte“: --dock-x ist eine Fensterkoordinate (Mitte des Rasters), die Startfläche beginnt rechts der Seitenleiste (--osl-b) */
html[data-dock-wirkt="mitte"] .start-dock { left: calc(var(--dock-x, 50%) - var(--osl-b, 0px)); bottom: 12px; transform: translateX(-50%); }
html[data-dock-wirkt="senkrecht"] .start-dock { left: var(--dock-x, 12px); top: 12px; }
/* Unter dem Raster in der Spalte der Kacheln: die Startfläche reserviert den Platz, die Messregel rechnet damit */
html[data-dock-wirkt="mitte"] .start-flaeche[data-messung] { padding-bottom: var(--dock-res, 12px); }

/* Lage 2: im Fluss der Spalte — unter / über den Kacheln (Handy, unter 1272 px) und rechts unter / über den Kacheln */
html[data-dock-wirkt="unter"] .start-dock, html[data-dock-wirkt="ueber"] .start-dock,
html[data-dock-wirkt="rechts-unter"] .start-dock, html[data-dock-wirkt="rechts-ueber"] .start-dock {
  width: 100%; max-width: 1120px; margin: 18px auto 0; padding: 0 24px; box-sizing: border-box;
}
html[data-dock-wirkt="ueber"] .start-dock, html[data-dock-wirkt="rechts-ueber"] .start-dock { margin: 0 auto 12px; order: 1; }
html[data-dock-wirkt="ueber"] .start-flaeche > main, html[data-dock-wirkt="rechts-ueber"] .start-flaeche > main { order: 2; }
html[data-dock-wirkt="rechts-unter"] .dock-rahmen, html[data-dock-wirkt="rechts-ueber"] .dock-rahmen { margin-left: auto; }
@media (min-width: 1460px) {
  /* Spalte 2 hat vier Zeilen: Begrüßung/Leiste, Dock über den Kacheln, Kacheln, Dock unter den Kacheln */
  html[data-dock-wirkt] .start-flaeche[data-messung] { grid-template-rows: auto auto auto auto; }
  html[data-dock-wirkt] .start-flaeche > .start-gruss { grid-row: 1; }
  html[data-dock-wirkt] .start-flaeche > main { grid-row: 3; }
  html[data-dock-wirkt="rechts-ueber"] .start-dock { grid-column: 2; grid-row: 2; max-width: none; margin: 0 0 12px; padding: 0; }
  html[data-dock-wirkt="rechts-unter"] .start-dock { grid-column: 2; grid-row: 4; max-width: none; margin: 18px 0 0; padding: 0; }
}

/* Tooltips: nach rechts, wenn die Leiste senkrecht steht */
html[data-dock-wirkt="senkrecht"] .dock-tip { left: calc(100% + 12px); bottom: auto; top: 50%; translate: 4px -50%; align-items: flex-start; }
html[data-dock-wirkt="senkrecht"] .dock-icon:hover .dock-tip, html[data-dock-wirkt="senkrecht"] .dock-icon:focus-visible .dock-tip { translate: 0 -50%; }
html[data-dock-wirkt="senkrecht"] .dock-tip::after { top: 50%; left: auto; right: 100%; margin: -6px 0 0; border-top-color: transparent; border-right-color: rgb(10 14 28 / .92); }

/* ── im Bearbeitungsmodus: acht Plätze, × am Symbol, Werkzeugzeile ───────────────────────────────── */
html.ansicht-modus .dock-icon { outline: 1px dashed rgb(255 255 255 / .3); outline-offset: 2px; cursor: pointer; }
html.ansicht-modus .dock-icon:hover, html.ansicht-modus .dock-icon:focus-visible { transform: none; }
html.ansicht-modus .dock-icon:focus-visible { outline: 2px solid #D39462; outline-offset: 3px; }
html.ansicht-modus .dock-icon[data-gewaehlt] { box-shadow: 0 0 0 3px #006699, 0 0 0 5px rgb(255 255 255 / .45); }
html.ansicht-modus .dock-tip { display: none; }
html.ansicht-modus .dock-ueberlage {
  display: grid; position: absolute; inset: 0; z-index: 2; box-sizing: border-box; padding: 10px 12px; pointer-events: none;
  grid-template-columns: var(--dock-spalten); grid-template-rows: var(--dock-zeilen, auto); gap: var(--dock-zeilenabstand, 10px) 10px; justify-content: start; align-content: start;
}
.dock-x {
  /* × sitzt oben rechts, 6 px über der Oberkante des Symbols: die Mitte des Symbols bleibt bei jedem Maß frei (Klick wählt, blendet nicht aus),
     und zum Symbol darüber bleiben 4 px (am Handy im Modus 8 px, dort ist der Zeilenabstand 14 px); der Innenabstand der Leiste (10 px) nimmt es
     in der oberen Zeile auf (B-2 aus AP-A3: vorher 8 px über der Kante und nur 2 px Lücke, für Touch zu eng) */
  pointer-events: auto; justify-self: end; align-self: start; margin-top: -6px; width: 24px; height: 24px; padding: 0; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; font: 700 15px/1 'Open Sans', system-ui, sans-serif; color: #fff;
  background: rgb(8 11 24 / .92); border: 1px solid rgb(255 255 255 / .38);
}
.dock-x:hover { background: #B91C1C; }
.dock-x:focus-visible, .dock-griff:focus-visible, .dock-vor:focus-visible, .dock-zurueck:focus-visible, .dock-ziel:focus-visible { outline: 2px solid #D39462; outline-offset: 2px; }
.dock-platz { border: 1.5px dashed rgb(255 255 255 / .42); border-radius: 14px; background: rgb(255 255 255 / .05); }
html.ansicht-modus .dock-werkzeuge { display: flex; align-items: center; gap: 4px; margin-top: 6px; height: 24px; }
html.ansicht-modus .dock-werkzeuge [hidden] { display: none; }
.dock-griff, .dock-vor, .dock-zurueck {
  height: 24px; padding: 0; border-radius: 7px; cursor: pointer; display: grid; place-items: center; flex: none;
  font: 700 17px/1 'Open Sans', system-ui, sans-serif; color: #fff; background: rgb(8 11 24 / .92); border: 1px solid rgb(255 255 255 / .38);
}
.dock-griff { width: 36px; cursor: grab; touch-action: none; }
.dock-vor, .dock-zurueck { width: 24px; }
.dock-griff:hover, .dock-vor:hover, .dock-zurueck:hover { background: #006699; }
.dock-vor[aria-disabled="true"], .dock-zurueck[aria-disabled="true"] { color: rgb(238 242 248 / .55); }
/* senkrechte Leiste: Werkzeuge in einer Spalte neben der Leiste, ‹ › zeigen dann nach oben und unten */
html.ansicht-modus[data-dock-wirkt="senkrecht"] .dock-werkzeuge {
  position: absolute; left: calc(100% + 6px); top: 0; margin: 0; height: auto; width: 36px; flex-direction: column; align-items: center; z-index: 7;
}
html[data-dock-wirkt="senkrecht"] .dock-vor, html[data-dock-wirkt="senkrecht"] .dock-zurueck { transform: rotate(90deg); }
/* 1272–1459 px: die Werkzeugspalte neben der senkrechten Leiste braucht Platz, Begrüßung, Leiste und Raster rücken im Modus 40 px nach rechts
   (nur verschoben, nicht schmaler: die Spaltenzahl der Kacheln ändert sich dadurch nicht) */
@media (min-width: 1272px) and (max-width: 1459.98px) {
  html.ansicht-modus[data-dock-wirkt="senkrecht"] .start-flaeche > main,
  html.ansicht-modus[data-dock-wirkt="senkrecht"] .start-flaeche > .ansicht-leiste { translate: 40px 0; }
}

/* ── Stellenauswahl: beschriftete Ziele mit Vorschau ──────────────────────────────────────────── */
.dock-ziele {
  position: fixed; z-index: 310; width: min(360px, calc(100vw - 16px)); overflow: auto; padding: 10px; border-radius: 14px;
  background: rgb(10 14 28 / .97); color: #EEF2F8; border: 1px solid rgb(255 255 255 / .18); box-shadow: 0 14px 36px -10px rgb(0 0 0 / .7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-family: 'Open Sans', system-ui, sans-serif;
}
.dock-ziele[hidden] { display: none; }
.dz-titel { margin: 0 2px 8px; font: 600 .8rem/1.3 'Open Sans', system-ui, sans-serif; color: #D39462; }
.dock-ziel-liste { display: flex; flex-direction: column; gap: 4px; }
.dock-ziel {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; min-height: 48px; text-align: left; cursor: pointer;
  border-radius: 10px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .05); color: inherit; font: inherit;
}
.dock-ziel:hover, .dock-ziel-ueber { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4); }
.dock-ziel[aria-checked="true"] { background: #006699; border-color: rgb(255 255 255 / .4); }
.dz-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dz-name { font: 600 .82rem/1.25 'Open Sans', system-ui, sans-serif; }
.dz-hinweis { font: 500 .75rem/1.25 'Open Sans', system-ui, sans-serif; color: rgb(238 242 248 / .86); }
.dz-vorschau { position: relative; flex: none; width: 64px; height: 40px; border-radius: 6px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.dz-vorschau i { position: absolute; display: block; border-radius: 2px; }
.dz-vorschau .vk { background: rgb(255 255 255 / .28); }
.dz-vorschau .vb { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.dz-vorschau .vd { background: #D39462; }

/* Hinweis unter 1460 und 1272 px in der Leiste (Zeile 2); kompakt steht er im Namen und in der Beschreibung der Auswahl */
.al-dock-hinweis {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 .75rem/1.2 'Open Sans', system-ui, sans-serif; color: rgb(238 242 248 / .86);
}
.al-dock-hinweis[hidden], html.ansicht-kompakt .al-dock-hinweis { display: none; }

/* Ablage in Spalte 1 (ab 1460 px): rückt hinter die senkrechte Leiste und endet über dem Fuß, wenn das Dock nicht darunter steht */
html[data-dock-wirkt] .ansicht-ablage[data-form="spalte"] { left: calc(var(--dock-ab-x, 24px) + var(--osl-b, 0px)) !important; }
html[data-dock-wirkt="senkrecht"] .ansicht-ablage[data-form="spalte"] { width: var(--dock-ab-w, 448px) !important; }
html[data-dock-wirkt]:not([data-dock-wirkt="links"]) .ansicht-ablage[data-form="spalte"] { height: var(--dock-ab-h, 160px) !important; }

@media (prefers-reduced-motion: reduce) {
  .dock-ziel, .dock-x { transition: none; }
}