@import url("./tokens.css");

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Das hidden-Attribut muss immer verstecken – auch wenn eine Klasse (z. B.
   .field .hint-text { display: block }) sonst gewinnen würde. */
[hidden] {
  display: none !important;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 127, 212, 0.35);
}

a:hover {
  border-bottom-color: var(--color-blue);
}

/* font-size MUSS >= 16px bleiben: darunter zoomt iOS Safari beim Fokus
   automatisch ins Feld (unerwuenscht auf dem Smartphone). Nicht verkleinern. */
input,
textarea,
select {
  font-size: 16px;
  font-family: var(--font-sans);
}

/* ── CI-Basis fuer ALLE Formularfelder (verbindlich, zentral) ────────────────
   Jedes Text-/Auswahlfeld traegt automatisch unseren Look (Rahmen, Radius,
   Fokus), egal ob es eine Zusatzklasse hat. So sieht KEIN rohes <input>/<select>
   mehr nativ aus. `:where(...)` = Spezifitaet 0 -> feinere Regeln (.field input,
   .ov-input, .ci-select, Tabellenzellen) gewinnen weiterhin und passen nur noch
   Groessen an. Ausgenommen: checkbox/radio/range/file/color/image (eigene Optik).
   Nicht-Formular-Selects gibt es nicht — daher gilt es fuer jedes <select>. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  textarea,
  select
) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.4;
}
/* WebKit-Suchfeld-Reste (Runde Ecken, innere Buttons) neutralisieren. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; }

/* ── ERZWUNGENE Feld-Uniformitaet (Andreas: „ueberall dieselben Eingabefelder") ─
   Jedes EIGENSTAENDIGE Feld sieht identisch aus — egal welche Alt-Regel es vorher
   hatte. `!important`, weil aeltere Komponenten-Regeln (.field input, .ov-input,
   .opt-value, rohe Suchfelder …) sonst gewinnen. Ausgenommen sind bewusst INLINE-
   Felder, die in einer eigenen umrandeten Huelle sitzen (Chip-Feld, Suchleiste)
   und Tabellenzellen — die haben eine andere, korrekte Rolle. */
/* Ausgenommen: Inline-Felder in eigener Huelle (Chip-Feld) und echte Suchleisten-
   Komponenten mit Icon (searchbar/pub-search/ws-cat-search) — die haben eine andere,
   korrekte Rolle. Standard-Textfelder + rohe Suchfelder (z. B. „Datei suchen") sind
   dabei. Kanon: 15px, Padding 9px 12px (kompakt). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not(.data-cell):not(.chip-field__input):not(.searchbar__input):not(.pub-search__input):not(.ws-cat-search__input):not(.cisel__native),
textarea:not(.data-cell) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  padding: 9px 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  background-color: #fff !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not(.data-cell):not(.chip-field__input):not(.searchbar__input):not(.pub-search__input):not(.ws-cat-search__input):not(.cisel__native) {
  height: auto !important;
  min-height: 0 !important;
}
textarea:not(.data-cell) { min-height: 84px !important; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not(.data-cell):not(.chip-field__input):not(.searchbar__input):not(.pub-search__input):not(.ws-cat-search__input):not(.cisel__native):focus,
textarea:not(.data-cell):focus {
  outline: none !important;
  border-color: var(--color-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 127, 212, 0.15) !important;
}
/* Auswahl-Widget + Fallback-Select auf denselben Kanon. */
.cisel__btn, .ci-select {
  font-size: 15px !important;
  padding: 9px 34px 9px 12px !important;
}
.member-access .cisel__btn, .page-access .cisel__btn,
.member-access .ci-select, .page-access .ci-select { font-size: 13px !important; padding: 6px 26px 6px 10px !important; }
/* Chip-Felder (Tags/Kategorien) tragen als Huelle den Feld-Look — gleiche Randfarbe,
   gleicher Fokus, passende Hoehe. Innen bleibt das Eingabefeld randlos. */
.chip-field {
  border-color: var(--color-border) !important;
  padding: 5px 10px !important;
  min-height: 40px;
  align-content: center;
}
.chip-field .chip-field__input { font-size: 15px; }
:where(textarea) { resize: vertical; min-height: 84px; line-height: 1.5; }
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  textarea,
  select
):focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(30, 127, 212, 0.15);
}
/* Jeder native Select bekommt unseren eigenen Pfeil statt der Browser-Optik
   (Fallback ohne JS; mit JS ersetzt das Custom-Dropdown-Widget die Liste ganz).
   .ci-select bringt den Pfeil ueber seinen Wrapper mit -> hier ausnehmen, sonst
   doppelt. */
:where(select:not(.ci-select):not(.data-cell):not(.js-select-cell)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E7085' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
:where(select:not(.data-cell):not(.js-select-cell))::-ms-expand { display: none; }

/* Datei-Auswahl („Durchsuchen…") — nativen Button in unseren Sekundaer-Button-Look
   bringen, damit auch Datei-Felder wiedererkennbar sind. */
input[type="file"] {
  border: none;
  padding: 0;
  background: none;
  font-size: 14px;
  color: var(--color-text-muted);
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* ── Alle Checkboxen sind Toggles (Andreas: „immer einen Toggle") ─────────────
   Gleiche Optik wie die .switch-Komponente (Benachrichtigungen): 44x26, Knopf 20.
   Gilt fuer JEDE Checkbox ausser denen, die bereits in einer .switch-Huelle
   stecken, Tabellen-Zellen (.data-cell) und Opt-outs ([data-native]). `!important`,
   um aeltere per-Kontext-Checkbox-Regeln sicher zu ueberschreiben. */
input[type="checkbox"]:not(.switch input):not(.data-cell):not([data-native]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  box-sizing: border-box;
  width: 44px !important;
  height: 26px !important;
  flex: 0 0 auto;
  margin: 0 8px 0 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--color-border);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}
input[type="checkbox"]:not(.switch input):not(.data-cell):not([data-native])::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 46, 82, 0.25);
  transition: transform 0.15s ease;
}
input[type="checkbox"]:not(.switch input):not(.data-cell):not([data-native]):checked {
  background: var(--color-blue);
}
input[type="checkbox"]:not(.switch input):not(.data-cell):not([data-native]):checked::after {
  transform: translateX(18px);
}
input[type="checkbox"]:not(.switch input):not(.data-cell):not([data-native]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Buttons (Component-Sheet §03) --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-blue);
  color: #fff;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn:hover {
  background: var(--color-blue-dark);
  border-bottom-color: transparent;
}

.btn-secondary {
  background: #fff;
  color: var(--color-navy);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: #fff;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.btn-bronze {
  background: var(--color-bronze);
  color: #fff;
}

.btn-bronze:hover {
  background: var(--color-bronze);
  filter: brightness(0.94);
}

.btn-ghost {
  background: transparent;
  color: var(--color-navy);
}

.btn-ghost:hover {
  background: transparent;
  color: var(--color-blue);
}

.btn[disabled],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sichtbarer Tastatur-Fokus (nur bei Tastatur-Navigation, nicht bei Maus-Klick).
   Additiv — ueberschreibt keinen bestehenden :focus-Stil, macht die Bedienung
   per Tastatur nachvollziehbar (Barrierefreiheit). */
.btn:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* --- Formulare (Component-Sheet §04) --- */

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
}

.field textarea {
  display: block;
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(30, 127, 212, 0.15);
}

/* hint text under a field always sits on its own line */
.field .hint-text {
  display: block;
  margin-top: 6px;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}

.field-check input {
  margin-top: 3px;
}

.error-text {
  color: var(--color-danger);
  font-size: 14px;
  margin: -8px 0 16px;
}

.hint-text {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-top: 8px;
}

.save-note {
  color: var(--color-success);
  font-size: 14px;
  margin: 0 0 16px;
}

/* Settings: schmale Inhaltsspalte, damit Formulare nicht ueber die volle Breite laufen. */
.settings-panel {
  max-width: 520px;
}
.settings-panel .intro-text {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 20px;
}

/* Konto-Seite: Sektionen als getrennte Blöcke. */
.settings-section {
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
.settings-section:first-child {
  border-top: none;
  padding-top: 0;
}
.settings-section h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 16px;
}
.settings-section--danger h2 {
  color: var(--color-danger);
}

.avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.avatar-row__body {
  flex: 1;
  min-width: 0;
}
.avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
.avatar-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Natives File-Input verstecken; das <label> ist der sichtbare Button. */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.btn-danger:hover {
  background: var(--color-danger);
  filter: brightness(0.92);
  border-bottom-color: transparent;
}

/* Breitere Inhaltsspalte fuer Einstellungs-/Formularseiten (nutzt die Flaeche).
   Doppelte Klasse fuer hoehere Spezifitaet als die spaetere .app-content__inner-Basisregel. */
.app-content__inner.app-content__inner--wide {
  max-width: 1080px;
}
/* Volle Breite (Tabellen/To-do/Liste): nutzt den ganzen verfuegbaren Bildschirm. */
.app-content__inner.app-content__inner--full {
  max-width: none;
  /* volle Hoehe, damit die rechte Leiste von ganz oben bis ganz unten laeuft */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Unter-Navigation (Profil / Rechnungsdaten) — als Links, mobiltauglich. */
.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 24px;
}
.account-tabs a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.account-tabs a:hover {
  color: var(--color-navy);
}
.account-tabs a.is-active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

/* Zwei-Spalten-Anordnung der Einstellungs-Sektionen ab Desktop; mobil gestapelt.
   Kein Card-Look (layout-spec): Sektionen bleiben durch Hairlines getrennt. */
.settings-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 48px;
}
@media (min-width: 1024px) {
  .settings-cols {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
/* Karten-Variante (snori Chat): eigenständige .settings-card statt border-getrennter
   .settings-section -> Spalte als Flex mit vertikalem Abstand zwischen den Karten. */
.settings-cols--cards .settings-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.settings-col > .settings-section:first-child {
  border-top: none;
  padding-top: 0;
}
.settings-full {
  margin-top: 8px;
}

/* Rechnungen-Platzhalter (leerer Zustand). */
.invoice-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}
/* Rechnungsliste (bezahlte Vorgaenge). Horizontal scrollbar auf schmalen Screens. */
.table-scroll {
  overflow-x: auto;
}
.invoice-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.invoice-list th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.invoice-list td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}
.invoice-list tr:last-child td {
  border-bottom: none;
}
.invoice-list .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.invoice-list .right {
  text-align: right;
}
/* Zahlungsart-Liste (hinterlegte Karten/PayPal am Hub). */
.pm-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pm-item__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-item__brand {
  font-weight: 600;
  text-transform: capitalize;
}
.pm-item__last4 {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.pm-item__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}
.pm-add {
  margin-top: 4px;
}
/* Letzte Karte bei aktivem Abo nicht entfernbar — dezenter Hinweis statt Button. */
.pm-item__locked {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
}
/* Affiliate-Guthaben als interner Zahlweg (unter der Zahlungsart). */
.pm-credit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.pm-credit__h {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-navy);
}
.pm-credit__bal {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--color-navy);
}
.pm-credit__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
/* Echtzeit: "Seite wurde geändert – neu laden"-Pill (unten mittig). */
.rt-reload {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 320;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--color-navy);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(11, 46, 82, 0.28);
  font-size: 14px;
  max-width: calc(100vw - 32px);
}
.rt-reload__go {
  background: #fff;
  color: var(--color-navy);
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.rt-reload__go:hover { background: #eef4fb; }
.rt-reload__x {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.rt-reload__x:hover { color: #fff; }

/* Mitgliederliste (Workspace-Einstellungen). */
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.member-list__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}
/* Zusatz-Meta an einer Zeile (z. B. Ablaufdatum einer Einladung). */
.member-list__meta { font-size: 12px; color: var(--color-text-muted); }
/* Aktionen an einer Einladungszeile (Erneut senden / Zurückziehen). */
.invite-actions { display: flex; gap: 6px; }
.member-remove { margin: 0; }
.member-admin { margin: 0; }
/* „Verwalter"-Abzeichen an einem Mitglied. */
.member-list__badge {
  font-size: 11px; font-weight: 700; color: var(--color-blue);
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 1px 8px;
}
/* Geister-Knopf in Gefahrenfarbe: Entfernen/Zurückziehen ohne Vollflächen-Rot. */
.btn-danger-ghost { color: var(--color-danger); }
.btn-danger-ghost:hover { color: var(--color-danger); filter: brightness(0.9); }
/* Protokoll der Rechteänderungen (Einstellungen, Owner-Ansicht). */
.rights-log { list-style: none; margin: 0; padding: 0; }
.rights-log__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 13px;
}
.rights-log__item:first-child { border-top: none; }
.rights-log__main { min-width: 0; }
.rights-log__target { color: var(--color-navy); font-weight: 600; }
.rights-log__detail { color: var(--color-text-muted); }
.rights-log__time { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) { .rights-log__item { flex-direction: column; gap: 2px; } }
.member-list__item:first-child {
  border-top: none;
}
.member-list .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
  background: var(--color-navy);
}
.member-list__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.member-list__role {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}
/* Gast (einzelne Seiten): reine Anzeige, nicht ueber ein Dropdown vergebbar. */
.member-list__role--guest {
  font-weight: 600;
  font-style: italic;
}
/* App-Store (Step 5): Katalog-Kacheln. */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.app-card { display: flex; flex-direction: column; gap: 10px; }
.app-card__head { display: flex; align-items: center; gap: 10px; }
.app-card__icon { font-size: 24px; line-height: 1; }
.app-card__name { margin: 0; font-size: 16px; }
.app-card__desc { color: var(--color-text-muted); font-size: 14px; margin: 0; flex: 1; }
.app-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.app-card__state { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.app-card__state--on { color: #2E7D46; }
.app-card__state--soon { font-style: italic; }
@media (max-width: 640px) { .app-grid { grid-template-columns: 1fr; } }
/* Hinweis-/Zitatbox (gruen, pastell) — z. B. Partnerprogramm-USP. Wiederverwendbar. */
.callout { border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.5; margin: 12px 0; }
.callout--success { background: #E6F4EA; color: #2E7D46; border: 1px solid #C6E5D0; }
.callout--info { background: #EAF1FB; color: #1C4E86; border: 1px solid #C4DBF0; }
.callout--info a, .callout--info .ws-tab-jump { color: #1C74C9; font-weight: 600; background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
/* Zweistufiges Freigabe-Overlay (Step 3A): Aktionszeile im share-modal-Card. */
.share-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* Owner-Steuerung: Basis-Rolle je Mitglied (Lesen/Schreiben) inline. */
.member-access {
  display: flex;
  align-items: center;
  gap: 8px;
}
.member-access .ci-select-wrap { min-width: 150px; }
.member-access .ci-select { font-size: 13px; padding: 6px 28px 6px 10px; }
/* Seiten-Zugriff je Mitglied (rechte Panel-Spalte). */
.page-access {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-access__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-access__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-access__sel { min-width: 140px; }
.page-access .ci-select { font-size: 12px; padding: 6px 26px 6px 9px; }

/* Unter-Blöcke innerhalb einer Sektion (z. B. Einladen/Offene Einladungen im Mitglieder-Block). */
.settings-subblock {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.settings-subblock h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 12px;
}

/* --- Auth-Split: enterprise-vertrauter Login/Register (SAP/Salesforce-Stil) ---
   Split bleibt bewusst erhalten (DEC-058), nur v2-Palette; Mesh-Panel behaelt
   seine Animation. */

.auth-split {
  position: relative;
  min-height: 100dvh;
  display: flex;
}

/* Links: Formularspalte. Auf Mobile volle Breite (Brand-Panel ausgeblendet). */
.auth-split__form {
  flex: 1 1 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--color-bg);
}

.auth-form-wrap {
  width: 100%;
  max-width: 360px;
}

/* Rechts: gebrandetes Panel mit dem Gedaechtnis-Netz-Motiv. */
.auth-split__brand {
  display: none;
  flex: 1 1 54%;
  position: relative;
  overflow: hidden;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .auth-split__brand {
    display: block;
  }
}

.auth-split__brand .fabric {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 440px;
  padding: 72px 64px 0;
}

.auth-brand-copy__headline {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 16px;
}

.auth-brand-copy__subline {
  font-size: 16px;
  color: var(--color-text);
  margin: 0;
}

/* Der Mesh-Hub zentriert auf diesem Anker; Knoten faechern darunter auf. */
.auth-split__brand .hub-anchor {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 380px;
  height: 1px;
  transform: translateX(-50%);
}

/* Logo-Lockup: Mini-Mesh links, Wortmarke, Bronze-Punkt rechts. */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  text-decoration: none;
  border-bottom: none;
}
/* Offizielles horizontales Logo (PNG: Wortmarke ist gerastert). */
.auth-brand__logo {
  height: 38px;
  width: auto;
  display: block;
}

.auth-brand span {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bronze);
  display: inline-block;
}

.auth-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 24px;
}

.auth-form-wrap form {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.auth-footer {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Sprach-Switcher als klarer Segment-Toggle: aktive Sprache = blaue Pille,
   inaktive gedaempft. Deutlich als Umschalter erkennbar. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
}

/* Oben rechts ueber dem Auth-Screen: weisse Box mit Rahmen + weichem Schatten. */
.auth-split > .lang-switch {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  padding: 3px;
  box-shadow: var(--shadow-card);
}

.lang-switch__opt {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: none;
  line-height: 1;
  letter-spacing: 0.02em;
}

.lang-switch__opt:hover {
  color: var(--color-navy);
}

.lang-switch__opt[aria-current="true"] {
  background: var(--color-blue);
  color: #fff;
}

.lang-switch__opt[aria-current="true"]:hover {
  color: #fff;
}

/* Der Slash entfaellt beim Segment-Toggle. */
.lang-switch__sep {
  display: none;
}

/* Sidebar-Variante (App, navy Hintergrund): gleiche Pille, ohne Box-Chrome. */
.lang-switch--sidebar {
  margin-top: 10px;
}

.lang-switch--sidebar .lang-switch__opt {
  color: var(--color-sidebar-fg-muted);
}

.lang-switch--sidebar .lang-switch__opt:hover {
  color: #fff;
}

.lang-switch--sidebar .lang-switch__opt[aria-current="true"] {
  background: var(--color-blue);
  color: #fff;
}

/* --- Passwort-Ampel + Regel-Checkliste (Registrierung) --- */
.pw-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 10px;
}

.pw-meter__track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}

.pw-meter__bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.15s linear;
}

.pw-meter__bar[data-level="weak"] { width: 33%; background: var(--color-danger); }
.pw-meter__bar[data-level="medium"] { width: 66%; background: var(--color-warning); }
.pw-meter__bar[data-level="strong"] { width: 100%; background: var(--color-success); }

.pw-meter__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 48px;
}

.pw-rules {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
}

.pw-rule {
  color: var(--color-text-muted);
  padding: 2px 0 2px 20px;
  position: relative;
}

.pw-rule::before {
  content: "\25CB";
  position: absolute;
  left: 0;
}

.pw-rule[data-ok="true"] {
  color: var(--color-text);
}

.pw-rule[data-ok="true"]::before {
  content: "\25CF";
  color: var(--color-success);
}

.pw-match {
  display: none;
  font-size: 13px;
  margin-top: 6px;
}

.pw-match[data-match="true"] { display: block; }
.pw-match[data-match="false"] { display: block; }
.pw-match[data-match="true"] .pw-match__no,
.pw-match[data-match="false"] .pw-match__ok { display: none; }
.pw-match__ok { color: var(--color-success); }
.pw-match__no { color: var(--color-danger); }

.backup-codes {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  columns: 2;
}

.qr-box img {
  display: block;
  margin: 16px 0;
  border-radius: var(--radius);
}

/* Klartext-TOTP-Schluessel fuer manuelle Eingabe (kein Scan). */
.manual-key {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  word-spacing: 0.15em;
  user-select: all;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 8px 0 16px;
  background: var(--color-panel);
}

/* --- App-Shell: navy Sidebar + Content (animationsfrei) --- */

.app-shell {
  display: flex;
  min-height: 100dvh;
}

.app-sidebar {
  width: var(--app-sidebar-w, 210px);
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-fg);
  padding: 20px 12px;
  display: none;
  flex-direction: column;
  position: relative; /* Anker fuer den Resize-Griff */
}
/* Ziehgriff am rechten Rand (nur Desktop) — verbreitert die Sidebar, Breite im
   Cookie gemerkt (DEC-134). Erscheint beim Hover, Cursor = col-resize. */
.app-sidebar__resize {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; z-index: 5; display: none;
}
@media (min-width: 1280px) { .app-sidebar__resize { display: block; } }
.app-sidebar__resize:hover,
body.sidebar-resizing .app-sidebar__resize { background: var(--pub-accent-blue, #1C74C9); opacity: .55; }
body.sidebar-resizing { cursor: col-resize; user-select: none; }

/* Mobile/Tablet: Sidebar ist ein Overlay-Panel, per Hamburger im Topbar
   geoeffnet (sofort ein/aus, keine Animation - layout-spec App shell). */
.app-backdrop { display: none; }
/* Handy (schmal): Sidebar ist ein Overlay ueber dem Inhalt, mit Backdrop. */
@media (max-width: 599px) {
  body.sidebar-open .app-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 264px;
    z-index: 40;
    overflow-y: auto;
  }
  body.sidebar-open .app-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 46, 82, 0.4);
    z-index: 30;
  }
}
/* Tablet (z. B. iPad): offene Sidebar ist eine feste Spalte (schiebt den Inhalt,
   KEIN Backdrop) -> sie bleibt offen und der Inhalt bleibt sichtbar (Andreas
   2026-07-24, „offen lassen"). Zustand im Cookie (app-shell.js). */
@media (min-width: 600px) and (max-width: 1279px) {
  body.sidebar-open .app-sidebar {
    display: flex;
    width: 264px;
    flex-shrink: 0;
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow: hidden;
  }
}

/* Desktop: dauerhaft sichtbar, sticky ueber volle Hoehe -> das Profil-Element
   bleibt unten am Rand fixiert, egal wie lang der Inhalt scrollt. */
@media (min-width: 1280px) {
  .app-sidebar {
    display: flex;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden; /* nur die Seitenliste (.sidebar-nav) scrollt intern */
  }
}

/* Close-Button im Sidebar-Kopf nur auf Mobile sichtbar. */
.app-sidebar__close {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-sidebar-fg-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
@media (max-width: 1279px) {
  .app-sidebar__close {
    display: inline-block;
  }
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-sidebar-fg);
}

.workspace-switch-wrap {
  position: relative;
  margin-bottom: 6px;
}

.workspace-switch {
  width: 100%;
  border: 1px solid var(--color-sidebar-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: var(--color-sidebar-fg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-align: left; /* Buttons zentrieren Text per Default — Name linksbündig */
}
.workspace-switch__name { flex: 1; min-width: 0; }

.workspace-switch:hover {
  background: var(--color-sidebar-active-bg);
}

/* Workspace-Dropdown: weisse Karte, nach unten aufklappend. */
.workspace-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 4px;
  z-index: 20;
}

.workspace-menu[hidden] {
  display: none;
}

.workspace-menu form {
  margin: 0;
}

.workspace-menu a,
.workspace-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  text-decoration: none;
  border: none;
  border-bottom: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}

.workspace-menu a:hover,
.workspace-menu button:hover {
  background: var(--color-panel);
}

.workspace-menu__item.is-active {
  font-weight: 700;
  color: var(--color-blue);
}

.workspace-menu__sep {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.workspace-switch__name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-switch__name::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-bronze);
  display: inline-block;
  flex-shrink: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* nur die Seitenliste scrollt */
}
/* Kopfzeile ueber der Seitenliste: Titel + Alle-auf/zuklappen. */
.sidebar-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
  color: var(--color-sidebar-fg-muted);
}
.sidebar-nav__headtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sidebar-nav__tools {
  display: flex;
  gap: 2px;
}
.sidebar-nav__tool {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--color-sidebar-fg-muted);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}
.sidebar-nav__tool:hover {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg);
}
/* Linker Slot: zeigt normal Emoji ODER farbigen Punkt; der Klapp-Caret liegt
   darueber und erscheint erst beim Hover einer aufklappbaren Zeile — so sind die
   Seiten nicht dauerhaft um eine Caret-Spalte nach rechts eingerueckt. */
.sidebar-nav__mark {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Bei Seiten MIT Unterseiten ist der ganze Punkt-Bereich der Klapp-Auslöser
   (nicht nur der Millimeter-Pfeil). Cursor + Hover-Fläche signalisieren das. */
.sidebar-nav__mark:has(.sidebar-nav__caret) { cursor: pointer; border-radius: 5px; }
.sidebar-nav__row:hover .sidebar-nav__mark:has(.sidebar-nav__caret) { background: rgba(255,255,255,0.10); }
.sidebar-nav__bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  line-height: 1;
}
.sidebar-nav__bullet::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sidebar-dot-muted);
}
.sidebar-nav__bullet.has-emoji::before { content: none; }
.sidebar-nav__bullet[data-color="red"]::before    { background: #E8776F; }
.sidebar-nav__bullet[data-color="orange"]::before  { background: #E0955A; }
.sidebar-nav__bullet[data-color="yellow"]::before  { background: #E7C65B; }
.sidebar-nav__bullet[data-color="green"]::before   { background: #6FC08D; }
.sidebar-nav__bullet[data-color="blue"]::before    { background: #5AA0E0; }
.sidebar-nav__bullet[data-color="purple"]::before  { background: #A98AD1; }
.sidebar-nav__bullet[data-color="gray"]::before    { background: #9DB6D2; }
.sidebar-nav__row.active .sidebar-nav__bullet:not([data-color]):not(.has-emoji)::before { background: var(--color-blue); }
.sidebar-nav__caret {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-sidebar-fg-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  opacity: 0;
  transform: rotate(90deg); /* aufgeklappt: zeigt nach unten */
  transition: transform 0.12s ease, opacity 0.12s ease;
  font-size: 15px;
}
.sidebar-nav__caret.is-collapsed {
  transform: rotate(0deg); /* zugeklappt: zeigt nach rechts */
}
.sidebar-nav__row:hover .sidebar-nav__mark .sidebar-nav__caret { opacity: 1; color: var(--color-sidebar-fg); }
.sidebar-nav__row:hover .sidebar-nav__mark:has(.sidebar-nav__caret) .sidebar-nav__bullet { opacity: 0; }
.sidebar-nav__caret:hover { color: var(--color-sidebar-fg); }
/* Fixierter unterer Block: Hinzufuegen -> Glocke -> Profil (immer sichtbar). */
.app-sidebar__bottom {
  flex-shrink: 0;
  /* keine Trennlinie mehr — die drei unteren Knoepfe (Hinzufuegen/Glocke/Profil)
     sind eine zusammenhaengende Button-Gruppe. */
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  font-size: 13px;
  color: var(--color-sidebar-fg-muted);
  text-decoration: none;
  border-bottom: none;
  border-radius: var(--radius);
}
/* Der Punkt vor dem Seitennamen wird jetzt vom .sidebar-nav__bullet-Slot
   gerendert (Emoji/Farbe), nicht mehr als ::before am Link. */
.sidebar-nav a::before { content: none; }

.sidebar-nav a.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg);
}

/* „+ Seite hinzufügen" — eigener Eintrag ÜBER der Trennlinie, gleiche Schrift/
   Größe wie die Baum-Einträge (steht außerhalb von .sidebar-nav). */
/* Gemeinsames, fest breites Icon-Feld für die drei unteren Buttons (Hinzufügen/
   Glocke/Profil) — sorgt dafür, dass alle Texte in einer Spalte starten. */
.sidebar-btn__icon {
  width: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.sidebar-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-nav__add,
.app-bell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sidebar-fg-muted);
  text-decoration: none;
  border: none; /* globalen Link-Unterstrich (a{border-bottom}) unterdruecken */
  border-radius: var(--radius);
}
.sidebar-nav__add:hover,
.app-bell:hover {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg);
}
.sidebar-nav__add::before {
  content: none !important;
}
.sidebar-nav__add:hover {
  background: var(--color-sidebar-active-bg);
}
/* Baum-Zeile: Seiten-Link (flexibel) + „+"-Unterseite (auf Hover). */
.sidebar-nav__row {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  padding-right: 4px;
}
.sidebar-nav__row:hover,
.sidebar-nav__row.active {
  background: var(--color-sidebar-active-bg);
}
/* Mir freigegebene Seite: hell hinterlegt + blaue Kante, damit auf einen Blick
   erkennbar ist, dass sie jemand anderem gehoert und nur geteilt wurde.
   Der aktive/gehoverte Zustand bleibt sichtbar (staerkerer Hintergrund gewinnt). */
.sidebar-nav__row.is-shared {
  background: rgba(90, 160, 224, 0.18);
  box-shadow: inset 2px 0 0 var(--color-sidebar-shared, #5AA0E0);
}
.sidebar-nav__row.is-shared:hover,
.sidebar-nav__row.is-shared.active {
  background: var(--color-sidebar-active-bg);
}
.sidebar-nav__row[draggable="true"] {
  cursor: grab;
}
.sidebar-nav__row.drop-target {
  outline: 2px solid var(--color-blue);
  outline-offset: -2px;
  background: var(--color-sidebar-active-bg);
}
.sidebar-nav__item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-nav__row:hover .sidebar-nav__item,
.sidebar-nav__row:hover .sidebar-nav__addsub {
  background: transparent;
}
.sidebar-nav__row.active .sidebar-nav__item {
  color: var(--color-sidebar-fg) !important;
}
/* Kleines „+" ganz rechts, erscheint beim Überfahren der Zeile. */
.sidebar-nav__addsub {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  color: var(--color-sidebar-fg-muted) !important;
  border-radius: var(--radius);
  opacity: 0;
}
/* Spezifitaet ueber .sidebar-nav a (sonst bleibt font-size bei 13px). */
.sidebar-nav a.sidebar-nav__addsub {
  font-size: 21px;
}
.sidebar-nav__addsub::before {
  content: none !important;
}
.sidebar-nav__row:hover .sidebar-nav__addsub,
.sidebar-nav__addsub:focus {
  opacity: 1;
}
.sidebar-nav__addsub:hover {
  color: #fff !important;
  background: var(--color-sidebar-border) !important;
}
/* iPad/Touch (hover: none): iOS wendet :hover schon beim ERSTEN Tap an und
   unterdrueckt den Klick, WENN sich dabei etwas sichtbar aendert -> der Nutzer
   muss zweimal tippen (Andreas' iPad-Doppeltipp, 2026-07-24). Loesung: auf Touch
   darf ein Tap KEINE Hover-Aenderung ausloesen. Die interaktiven Elemente werden
   deshalb nicht per Hover enthuellt: der Klapp-Pfeil ist dauerhaft sichtbar (bleibt
   antippbar), das „+" bleibt aus (per Kontextmenue/Kopf-„+"), Zeilen-Hintergrund
   aendert sich nicht. So navigiert der erste Tap sofort. */
@media (hover: none) {
  .sidebar-nav__row:hover { background: transparent; }
  .sidebar-nav__row.active,
  .sidebar-nav__row.active:hover { background: var(--color-sidebar-active-bg); }
  .sidebar-nav__row.is-shared:hover { background: rgba(90, 160, 224, 0.18); }
  .sidebar-nav__row.is-shared.active,
  .sidebar-nav__row.is-shared.active:hover { background: var(--color-sidebar-active-bg); }
  .sidebar-nav__row:hover .sidebar-nav__addsub { opacity: 0; }
  .sidebar-nav__row:hover .sidebar-nav__mark:has(.sidebar-nav__caret) { background: transparent; }
  /* Klapp-Pfeil dauerhaft sichtbar (kein Reveal), der Punkt weicht dahinter. */
  .sidebar-nav__mark .sidebar-nav__caret { opacity: 1; color: var(--color-sidebar-fg); }
  .sidebar-nav__mark:has(.sidebar-nav__caret) .sidebar-nav__bullet { opacity: 0; }
}
.sidebar-nav__empty {
  font-size: 12px;
  color: var(--color-sidebar-fg-muted);
  padding: 6px 8px;
  margin: 0;
  line-height: 1.5;
}

/* Seitentyp-Wahl (page-new). */
.type-choice {
  border: none;
  padding: 0;
  margin: 0 0 8px;
}
.type-choice legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 10px;
  padding: 0;
}
/* Platzierung: Hauptseite / Unterseite von … */
.placement-choice {
  margin-top: 18px;
}
/* Elternseiten-Auswahl erscheint erst bei „Unterseite" (progressive disclosure). */
.placement-parent {
  margin-top: 4px;
}
.placement-parent__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

/* Zentrale, CI-konforme Select-Komponente (kein Browser-Standard-Look). */
.ci-select-wrap {
  position: relative;
}
/* Wenn das Custom-Dropdown-Widget (ci-select.js) den Select uebernommen hat,
   traegt es seinen eigenen Pfeil -> den Wrap-Pfeil ausblenden (sonst doppelt). */
.ci-select-wrap:has(.cisel__btn)::after { content: none; }
.ci-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ci-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
}
.ci-select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12);
}

/* ── CI-Dropdown-Widget (ci-select.js) — ersetzt native <select>-Listen ───────
   Gleiche Optik wie unsere Felder; die Liste ist unser eigenes Panel, keine
   Browser-Chrome. Der native <select> bleibt versteckt fuers Formular. */
.cisel { position: relative; }
.cisel__native { display: none; }
.cisel__btn {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.cisel__btn::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.12s ease;
}
.cisel.is-open .cisel__btn {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(30, 127, 212, 0.15);
}
.cisel.is-open .cisel__btn::after { transform: translateY(-30%) rotate(225deg); }
.cisel__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leeres Label (nichts vorgewählt) darf den Button NICHT in der Höhe kollabieren
   lassen — sonst steht ein Select-Feld kleiner da als die Textfelder daneben, bis
   man es öffnet (Andreas 2026-08-01). Reservierte Zeilenhöhe per NBSP. */
.cisel__label:empty::before { content: "\00a0"; }
.cisel__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cisel__list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Höchstens ~5 Einträge sichtbar, danach scrollt NUR die Liste — sonst sprengt
     ein langes Dropdown (z. B. Feldtyp mit 10 Typen) die Overlay-Karte und diese
     scrollt doppelt (Andreas 2026-08-01). */
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(11, 46, 82, 0.16);
}
.cisel__opt {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  white-space: normal;
}
.cisel__opt:hover,
.cisel__opt.is-hi { background: var(--color-bg-subtle, #eef3f8); }
.cisel__opt.is-sel { font-weight: 600; color: var(--color-navy); }
.cisel__opt[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Kompakte Kontexte behalten ihre Groesse (Mitglieder-/Seiten-Rechte). */
.member-access .cisel__btn,
.page-access .cisel__btn { font-size: 13px; padding: 6px 26px 6px 10px; }
.member-access .cisel__btn::after,
.page-access .cisel__btn::after { right: 10px; }

/* ── Eigenes Rechtsklick-Kontextmenue (no-context.js) — snori-Look statt nativ ─
   In Eingabefeldern/Textbereichen/Tabellen-Zellen: Alles markieren/Ausschneiden/
   Kopieren/Einfuegen. */
.ctxmenu {
  position: fixed;
  z-index: 4000;
  min-width: 184px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(11, 46, 82, 0.18);
}
.ctxmenu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
.ctxmenu__item:hover:not(:disabled) { background: var(--color-bg-subtle, #eef3f8); }
.ctxmenu__item:disabled { opacity: 0.4; cursor: default; }
.ctxmenu__sep { height: 1px; background: var(--color-border); margin: 4px 6px; }
.type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
}
.type-option:has(input:checked) {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 1px var(--color-blue);
}
.type-option input {
  margin-top: 3px;
}
.type-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.type-option__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-navy);
}
.type-option__desc {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Neue Seite: zweispaltig — links Formular, rechts erklärendes Panel + Mesh. */
.page-new-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  max-width: 980px;
}
@media (min-width: 900px) {
  .page-new-split {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.page-new-form {
  min-width: 0;
}

.page-new-explain {
  position: relative;
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px 28px 120px;
  min-height: 340px;
}
.page-new-explain__intro {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}
.explain-block {
  position: relative;
  z-index: 1;
}
.explain-block[hidden] {
  display: none;
}
.explain-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-blue);
  margin-bottom: 14px;
}
.explain-icon svg {
  width: 24px;
  height: 24px;
}
.explain-block h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 10px;
}
.explain-block p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 12px;
}
.explain-block__diff {
  font-size: 13.5px !important;
  color: var(--color-text-muted) !important;
  border-left: 2px solid var(--color-bronze);
  padding-left: 10px;
}

/* Schritt-fuer-Schritt-Anleitung im Erklaer-Panel (v. a. Formulare). */
.explain-howto { margin-top: 14px; }
.explain-howto__title {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--color-text) !important;
  margin: 0 0 6px !important;
}
.explain-howto__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.explain-howto__list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* „Jetzt Seite anlegen"-Knopf in der blauen Erklaer-Box (nicht unten verstecken). */
.page-new-go {
  width: 100%;
  margin-top: 18px;
}
@media (max-width: 860px) {
  /* Auf schmalen Screens die Erklaer-Box direkt unter die Auswahl setzen und den
     Weiter-Knopf am unteren Rand fixieren, damit man ihn nie sucht. */
  .page-new-go {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
}

/* Dezentes, statisches Gedächtnis-Netz unten im Panel (App: keine Animation). */
.page-new-mesh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  fill: none;
  stroke: var(--color-mesh-line);
  stroke-width: 1.2;
}
.page-new-mesh circle {
  fill: var(--color-navy);
  stroke: none;
  opacity: 0.5;
}
.page-new-mesh__hub {
  fill: var(--color-bronze) !important;
  opacity: 1 !important;
}

/* Seiten-Ansicht (page-view). */
.page-head {
  margin-bottom: 20px;
}
.page-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-blue);
  margin-bottom: 6px;
}
.page-placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* BlockNote-Editor-Container. BlockNote bringt eigenes CSS (editor.css) mit. */
.doc-editor {
  min-height: 420px;
  /* Kein negativer Rand mehr: bn-editor hat jetzt padding-inline:0, der Einzug kommt
     zentral aus .page-main. Der Editor-Text sitzt so buendig zum Titel (44px). */
  margin-left: 0;
}
/* Freiraum unter dem Text: klickbar -> Cursor ans Ende (Notion-Verhalten). */
.doc-editor-fill {
  position: relative; /* Bezug fuer den schwebenden Codeblock-Kopierknopf */
  min-height: 60vh;
  cursor: text;
}

/* Meta-Zeile unter dem Titel (Outline-/Notion-Optik): erstellt von … · Kommentieren · gesehen. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -12px 0 20px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.doc-meta__sep {
  color: var(--color-border);
}
.doc-meta__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.doc-meta__link:hover {
  color: var(--color-blue);
}
.doc-meta__icon {
  flex-shrink: 0;
}
/* Hinweis, dass eine KI an dieser Seite mitgearbeitet hat (nur "dass", nicht "was"). */
.doc-meta__ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eaf2fc;
  color: var(--color-blue);
  font-weight: 600;
}

/* Freundlichere Überschriften im Editor (weniger wuchtig als BlockNote-Default).
   #editor (ID) hebt die Spezifitaet ueber BlockNotes eigene editor.css. */
#editor .bn-block-content[data-content-type="heading"][data-level="1"],
#editor .bn-block-content[data-content-type="heading"][data-level="1"] .bn-inline-content {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}
#editor .bn-block-content[data-content-type="heading"][data-level="2"],
#editor .bn-block-content[data-content-type="heading"][data-level="2"] .bn-inline-content {
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--color-navy);
}
#editor .bn-block-content[data-content-type="heading"][data-level="3"],
#editor .bn-block-content[data-content-type="heading"][data-level="3"] .bn-inline-content {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}
/* 0.52-Feinschliff (2026-07-27):
   1) Ueberschriften haben in 0.52 padding-top:18px -> der Text rutscht runter, der
      +/Griff (oben ausgerichtet) steht darueber. Padding neutralisieren; der Abstand
      kommt schon vom Block-Aussenrahmen (margin-top unten).
   2) Der +/Griff ist recht gross -> etwas verkleinern, oben ausgerichtet.
   3) Body buendig mit Titel/Meta: BlockNotes 54px-Innenrand raus, der Griff schwebt
      in den linken Seitenrand (wie Notion), sodass der Text auf der Titel-Kante sitzt. */
#editor .bn-block-content[data-content-type="heading"] { padding-top: 0; }
#editor .bn-side-menu {
  transform: scale(0.8);
  transform-origin: top right;
  /* Der verkleinerte Griff (24px) sitzt sonst top-aligned in der 32px-Zeile -> Mitte
     4px zu hoch. Um genau auf Zeilenmitte zu liegen, 4px nach unten. (Gemessen.) */
  margin-top: 4px;
}
#editor .bn-editor { padding-inline: 0; }

/* ---- Vertikaler Rhythmus (2026-07-26) -----------------------------------
   BlockNote stapelt Bloecke sehr eng, dadurch kleben Ueberschrift und Absatz
   aneinander und der Text wirkt flach. Wir geben Abstand am Block-AUSSENrahmen
   (.bn-block-outer) — nicht am Inhalt, sonst verrutscht das seitliche +/Griff-Menue.
   Absaetze bekommen etwas Luft, Ueberschriften deutlich Abstand nach OBEN, sodass
   Abschnitte sichtbar gruppiert sind. Verschachtelte Listenpunkte bleiben eng. */
#editor .bn-block-outer { margin-top: 0.5em; }
#editor .bn-block-outer:first-child { margin-top: 0; }
#editor .bn-block-outer .bn-block-outer { margin-top: 0.15em; }
/* Ueberschrift: viel Luft davor (neuer Abschnitt) … */
#editor .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="heading"]) {
  margin-top: 1.7em;
}
/* … aber der direkt folgende Absatz gehoert dazu und rueckt eng nach. */
#editor .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="heading"]) + .bn-block-outer {
  margin-top: 0.3em;
}
#editor .bn-block-content[data-content-type="paragraph"] { line-height: 1.65; }

/* ---- Zitat + Trenner (Custom-Blocks, 2026-07-26): im Editor identisch zur
   geteilten Ansicht (.pub-doc__body unten). ------------------------------- */
#editor blockquote.snori-quote {
  margin: 4px 0;
  padding: 12px 16px 12px 18px;
  border: 1px solid #CFE0F2;
  border-left: 4px solid var(--color-blue);
  border-radius: 8px;
  background: #F4F8FD;
  color: var(--color-navy);
  font-style: italic;
}
/* Trenner: der Block-Content ist display:flex -> ohne Breite kollabiert der Divider
   auf 0 und ist unsichtbar. Volle Breite erzwingen; Linie direkt am Div (feste Farbe,
   nicht var(), die im Editor-Scope leer ist). */
/* Divider-Block-Content ist display:flex und quetscht das Kind auf Breite 0 -> auf
   block zwingen, dann fuellt der Divider die volle Zeilenbreite. */
#editor .bn-block-content[data-content-type="divider"] { display: block; width: 100%; }
#editor .snori-divider {
  width: 100%;
  padding: 10px 0;
}
#editor .snori-divider hr {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid #BFD4EA;
  margin: 0;
}

/* Mobil: Einzug kommt jetzt zentral aus .page-main (unten), bn-editor bleibt 0. */

/* ---- Codeblock ----------------------------------------------------------
   BlockNote liefert einen schwarzen Kasten (#161616, weiße Schrift). Wir machen
   daraus einen hellen, ruhigen Kasten im snori-Blau. #editor gewinnt über
   BlockNotes editor.css.
   ACHTUNG: die Syntaxfarben kommen als INLINE-Style vom Highlighter (shiki,
   Theme „github-dark") — sie sind für Dunkel gebaut und auf Hell unlesbar. Das
   Theme ist in BlockNote 0.19 fest verdrahtet, also bilden wir die Palette unten
   auf helle Entsprechungen ab (github-light). Nur mit !important, weil man gegen
   Inline-Styles sonst nicht ankommt. */
#editor .bn-block-content[data-content-type="codeBlock"] {
  background-color: #F2F7FD;
  border: 1px solid #D5E3F2;
  color: #24292E;
  border-radius: 8px;
}
#editor .bn-block-content[data-content-type="codeBlock"] > pre {
  padding: 38px 16px 16px;
  font-size: 13.5px;
}
/* Sprachauswahl oben links: bei BlockNote fast unsichtbar (weiß, opacity 0 →
   0.5 auf Hover). Jetzt: dauerhaft sichtbares, lesbares Steuerelement. */
#editor .bn-block-content[data-content-type="codeBlock"] > div > select {
  opacity: 1;
  top: 7px;
  left: 10px;
  padding: 2px 6px;
  border: 1px solid #D5E3F2;
  border-radius: 6px;
  background-color: #fff;
  color: var(--color-navy);
  font-family: inherit;
  font-size: 12px;
}
#editor .bn-block-content[data-content-type="codeBlock"] > div > select:hover,
#editor .bn-block-content[data-content-type="codeBlock"] > div > select:focus {
  opacity: 1;
  border-color: var(--color-blue);
}
#editor .bn-block-content[data-content-type="codeBlock"] > div > select > option {
  background-color: #fff;
  color: var(--color-navy);
}
/* Kopier-Knopf: schwebt über dem angesteuerten Codeblock (siehe editor.tsx —
   er darf nicht IM Codeblock liegen, sonst dreht sich ProseMirror im Kreis).
   Position setzt das Skript, hier nur das Aussehen. */
#editor .snori-code-copy {
  position: absolute;
  z-index: 3;
  min-width: 78px;
  text-align: center;
  padding: 2px 8px;
  border: 1px solid #D5E3F2;
  border-radius: 6px;
  background-color: #fff;
  color: var(--color-navy);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
#editor .snori-code-copy:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
#editor .snori-code-copy.is-done {
  border-color: #6FC08D;
  color: #2E7D4F;
}
/* Schriftfarbe im Code: der Highlighter (shiki) setzt sie als INLINE-Style, also
   kommt man nur mit !important dagegen an.
   Nachgemessen im echten Editor: es findet gar KEIN Syntax-Highlighting statt —
   BlockNote laedt die Sprachen per dynamischem Import nach, was im IIFE-Bundle
   nicht ankommt. Alle Zeilen erhalten dieselbe Farbe (#6a737d, Grau). Auf dem
   alten schwarzen Grund war das grau auf fast schwarz = kaum lesbar. Eine
   Farbpalette zu mappen waere also toter Code; eine dunkle Grundfarbe genuegt
   und bleibt richtig, egal was der Highlighter liefert. */
#editor .bn-block-content[data-content-type="codeBlock"] code span {
  color: #24292E !important;
}

/* Struktur-Tabelle (To-do / Liste / Tabelle). */
.data-table-wrap {
  max-width: 100%;
}
/* NUR die Tabelle scrollt horizontal — nicht die Toolbar darunter. Sonst saesse
   der Scrollbalken „in" den Buttons „+ Zeile / + Spalte". Deutlicher, gut
   greifbarer Balken + klarer Abstand nach unten vor der Toolbar. */
/* Die Tabelle ist ein EIGENES Scrollfeld in Fensterhoehe: sie scrollt intern in
   beide Richtungen. Sonst liegt bei tausenden Zeilen der waagerechte Balken ganz
   unten (erst nach allen Zeilen erreichbar) und die Buttons darunter ebenso.
   So bleiben Kopfzeile, waagerechter Balken und Toolbar immer im Blick. */
.data-table-scroll {
  max-width: 100%;
  max-height: calc(100dvh - 260px);
  min-height: 220px;
  overflow: auto; /* beide Achsen INNERHALB der Tabelle */
  overscroll-behavior: contain; /* kein Weiterscrollen der Seite am Rand */
  padding-bottom: 0;
  margin-bottom: 16px;
  scrollbar-color: var(--color-blue) #E2E9F2; /* Firefox */
  scrollbar-width: auto;
}
/* Kopfzeile bleibt beim Scrollen stehen. Bei border-collapse verschwinden die
   Rahmen sticky-Zellen -> Linien per inset-Schatten nachziehen. */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-panel);
  box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
.data-table th.data-table__actions {
  /* transparenter Aktions-Header: darf beim Scrollen nicht durchscheinen */
  background: var(--color-bg);
  box-shadow: none;
}
/* Summenzeile bleibt unten stehen (Werte immer im Blick). */
.data-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--color-panel);
  box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
/* BEIDE Maße setzen: `height` gilt nur fuer den waagerechten Balken, der
   senkrechte braucht `width`. Fehlt sie, faellt sie auf 0 -> der senkrechte
   Balken war unsichtbar (Andreas: „sehe den Balken nur ganz rechts"). */
.data-table-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.data-table-scroll::-webkit-scrollbar-track {
  background: #E2E9F2;
  border-radius: 8px;
}
.data-table-scroll::-webkit-scrollbar-thumb {
  background: #9DB6D2;
  border-radius: 8px;
  border: 2px solid #E2E9F2;
}
.data-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue);
}
.data-table {
  border-collapse: collapse;
  /* Feste Spaltenbreiten: nur so sind die per Ziehgriff gesetzten Breiten
     verbindlich (bei table-layout:auto sind <col>-Breiten nur unverbindliche
     Mindestwerte -> Ziehen zeigte keine Wirkung). width:auto + min-width:100%:
     passt sich der Flaeche an, waechst aber ueber den Rand hinaus (-> horizontaler
     Scroll), wenn die Summe der Spaltenbreiten groesser ist. */
  table-layout: fixed;
  /* Gesamtbreite = Summe der Spaltenbreiten (inline gesetzt, siehe Template);
     min-width:100% laesst sie kleine Tabellen die Flaeche fuellen. */
  min-width: 100%;
  font-size: 14px;
}
.data-table__actions-col {
  width: 72px;
}
/* Zeilen-Zaehler unter der Tabelle; bei Blockladung zugleich Lade-Anzeige. */
.table-count {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.table-count.is-loading {
  color: var(--color-blue);
}
.table-count.is-loading::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 2px solid #C3D6EA;
  border-top-color: var(--color-blue);
  border-radius: 50%;
  animation: snori-spin 0.7s linear infinite;
}
@keyframes snori-spin {
  to { transform: rotate(360deg); }
}
.data-table th,
.data-table td {
  border: 1px solid var(--color-border);
  padding: 0;
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  background: var(--color-panel);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}
.data-table td .data-cell {
  width: 100%;
  min-width: 0; /* folgt der festen Spaltenbreite (siehe .data-table) */
  border: none;
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  color: var(--color-text);
}
.data-table td .data-cell:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: -2px;
  background: #fff;
}
.data-table td input[type="checkbox"] {
  margin: 8px 12px;
  width: 16px;
  height: 16px;
}
.data-table__actions {
  width: 72px;
  white-space: nowrap;
  text-align: center;
  border: none !important;
}
/* Der leere Aktions-Header (+/×-Spalte) darf NICHT den blauen Panel-Hintergrund
   der übrigen Kopfzellen erben — sonst wirkt rechts eine „Phantomspalte". */
.data-table th.data-table__actions {
  background: transparent;
}
.data-table__actions form {
  margin: 0;
  display: inline-block;
}
.data-table__del,
.data-table__sub {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 7px;
}
.data-table__sub:hover {
  color: var(--color-blue);
}
.data-table__del:hover {
  color: var(--color-danger);
}
.data-table__toolbar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.data-table__toolbar form {
  margin: 0;
}

/* Datums-Zelle: readonly, wirkt klickbar (oeffnet eigenen Picker). */
.data-table td .data-cell.data-date {
  cursor: pointer;
}

/* ===== Datei-Zellen (Spaltentyp „file") ===== */
.data-filecell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.filecell-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-decoration: none; color: var(--color-navy); border-bottom: none; }
.filecell-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); flex-shrink: 0; }
.filecell-ico { font-size: 18px; flex-shrink: 0; }
.filecell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.filecell-link:hover .filecell-name { text-decoration: underline; }
.filecell-clear { flex-shrink: 0; appearance: none; border: none; background: none; color: var(--color-text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.filecell-clear:hover { color: #B23A3A; background: #FCE8E8; }
.filecell-add { appearance: none; border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 13px; border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.filecell-add:hover { border-color: var(--color-blue); color: var(--color-blue); }
.filecell-add__plus { font-weight: 700; }
.filecell-empty { color: var(--color-text-muted); }
.data-filecell.is-required-empty .filecell-add { border-color: #E0A94E; }

/* Picker-Overlay */
.filecell-ov { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.filecell-ov[hidden] { display: none; }
.filecell-ov__backdrop { position: absolute; inset: 0; background: rgba(11,46,82,0.4); }
.filecell-ov__card { position: relative; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card), 0 18px 50px rgba(11,46,82,0.22); width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.filecell-ov__head { display: flex; align-items: center; justify-content: space-between; }
.filecell-ov__title { font-size: 16px; margin: 0; color: var(--color-navy); }
.filecell-ov__x { appearance: none; border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: 0 4px; }
.filecell-ov__upload { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--color-border); border-radius: 8px; padding: 14px; cursor: pointer; text-align: center; color: var(--color-text); }
.filecell-ov__upload:hover { border-color: var(--color-blue); }
.filecell-ov__uplabel { font-size: 13.5px; font-weight: 600; }
.filecell-ov__status { font-size: 13px; padding: 8px 10px; border-radius: 6px; background: var(--color-panel); }
.filecell-ov__status.is-err { background: #FCE8E8; color: #B23A3A; }
.filecell-ov__status.is-work { background: #EAF1FB; color: #1C74C9; }
.filecell-ov__or { font-size: 12px; color: var(--color-text-muted); text-align: center; }
.filecell-ov__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.filecell-ov__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; appearance: none; border: 1px solid transparent; background: none; font: inherit; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.filecell-ov__item:hover { background: var(--color-panel); border-color: var(--color-border); }
.filecell-ov__thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); flex-shrink: 0; }
.filecell-ov__ico { font-size: 20px; flex-shrink: 0; }
.filecell-ov__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.filecell-ov__empty { font-size: 13px; color: var(--color-text-muted); padding: 8px; }
body.filecell-open { overflow: hidden; }

/* Interner Formulareintrag: Datei als „Dateizeile" (Picker + gewählter Name). */
.lf-entry-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-entry-file__link { font-size: 13px; color: var(--color-blue); text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lf-entry-file__link:hover { text-decoration: underline; }
/* Eigener Datums-Picker (datepicker.js) — kein Browser-Dialog. */
.datepicker {
  position: absolute;
  z-index: 95;
  width: 240px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 8px;
  user-select: none;
}
.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.datepicker__month {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}
.datepicker__nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--color-navy);
}
.datepicker__nav:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.datepicker__weekdays,
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepicker__weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 2px 0;
}
.datepicker__day {
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--color-text);
}
.datepicker__day.is-empty {
  cursor: default;
}
.datepicker__day:not(.is-empty):hover {
  background: var(--color-panel);
}
.datepicker__day.is-today {
  box-shadow: inset 0 0 0 1px var(--color-mesh-line);
}
.datepicker__day.is-selected {
  background: var(--color-blue);
  color: #fff;
}
.datepicker__foot {
  margin-top: 6px;
  text-align: right;
}
.datepicker__clear {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.datepicker__clear:hover {
  color: var(--color-danger);
}

/* Sub-task-Kennzeichnung (deutlicher als nur Einrückung). */
.subtask-marker {
  color: var(--color-blue);
  margin-right: 2px;
  font-size: 15px;
  font-weight: 600;
}
.data-table tr.is-subtask {
  background: var(--color-panel);
}
/* Pfeil sitzt links NEBEN dem Text (nicht darueber): erstes Feld als Flex-Zeile. */
.data-table tr.is-subtask td:first-child {
  display: flex;
  align-items: center;
  border-left: 3px solid var(--color-blue);
}
.data-table tr.is-subtask td:first-child .subtask-marker {
  flex-shrink: 0;
}
.data-table tr.is-subtask td:first-child .data-cell {
  flex: 1;
  padding-left: 3px; /* nur ein kleiner Abstand nach dem Pfeil */
  color: var(--color-text-muted);
  font-size: 0.95em;
}

/* --- Inhalt + rechtes Kontext-Panel (hellblaue Leiste, ein-/ausklappbar) --- */
.page-layout {
  display: flex;
  gap: 0;
  flex: 1; /* fuellt die volle Hoehe des Content-Bereichs */
  align-items: stretch; /* hellblaue Leiste laeuft von ganz oben nach ganz unten */
}
.page-main {
  flex: 1;
  min-width: 0;
  /* Linker Einzug: Titel/Meta UND der Editor-Body (bn-editor padding 0) sitzen buendig
     auf dieser Kante — und der schwebende +/Griff des Editors hat hier im WEISSEN Rand
     Platz, statt in die blaue Sidebar zu ragen (Andreas 2026-07-27). */
  padding-left: 44px;
  padding-right: 32px;
  padding-bottom: 24px;
}
.page-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
/* Rechte Leiste: hellblau, mit deutlichem vertikalen Strich links. */
.page-panel {
  position: relative;
  width: 316px;
  flex-shrink: 0;
  background: #EAF2FC;
  border-left: 1px solid #BFD4EA;
  padding: 46px 22px 28px;
  /* ueber die Innenabstaende des Content-Bereichs hinaus bis an die Kanten
     ziehen -> Leiste laeuft von ganz oben bis ganz unten und bis zum Rand */
  margin: -32px -24px -32px 0;
  transition: width 0.18s ease, padding 0.18s ease;
}
.panel-body {
  display: flex;
  flex-direction: column;
}
/* Ein-/Ausklapp-Symbol oben rechts in der Leiste. */
.panel-rail-toggle {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #BFD4EA;
  background: #fff;
  border-radius: var(--radius);
  color: var(--color-blue);
  cursor: pointer;
}
.panel-rail-toggle:hover {
  border-color: var(--color-blue);
  background: #fff;
}
.panel-rail-icon {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); /* zeigt nach rechts -> einklappen */
  margin-left: -2px;
}
.page-layout.panel-closed .page-panel {
  width: 42px;
  padding: 46px 0 0;
}
.page-layout.panel-closed .panel-body {
  display: none;
}
.page-layout.panel-closed .panel-rail-icon {
  transform: rotate(135deg); /* zeigt nach links -> ausklappen */
  margin-left: 2px;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}
.panel-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 4px;
  font-size: 12.5px;
}
.panel-meta dt {
  color: var(--color-text-muted);
}
.panel-meta dd {
  margin: 0;
  color: var(--color-text);
}
.panel-section {
  border-top: 1px solid #D5E3F2;
  padding-top: 14px;
  margin-top: 14px;
}
.panel-section h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  margin: 0 0 8px;
}
.panel-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-form label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-navy);
}
/* Zartere Eingabefelder auf der hellblauen Leiste. */
.panel-form input,
.comment-input {
  padding: 6px 9px;
  border: 1px solid #CBDCEF;
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
}
.panel-form input:focus,
.comment-input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12);
}
/* Buttons in der Leiste etwas zarter. */
.page-panel .btn-sm {
  padding: 5px 11px;
  font-size: 12px;
}
.panel-meta {
  font-size: 12px;
}
.panel-form .btn {
  align-self: flex-start;
}
.panel-assignees {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Chip-Eingabe (Tags/Kategorien): Komma -> Chip, x zum Entfernen (bei Hover). */
.chip-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #cbdcef;
  border-radius: var(--radius);
  background: #fff;
}
.chip-field:focus-within {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12);
}
.chip-field__chips {
  display: contents;
}
.chip-field .chip-field__input {
  flex: 1;
  min-width: 70px;
  border: none;
  outline: none;
  padding: 2px 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  background: transparent;
  box-shadow: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 4px 2px 9px;
  background: #eaf2fc;
  color: var(--color-blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.chip__x {
  border: none;
  background: none;
  color: var(--color-blue);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  opacity: 0;
  transition: opacity 0.1s;
}
.chip:hover .chip__x {
  opacity: 0.75;
}
.chip__x:hover {
  opacity: 1;
  color: var(--color-danger);
}
.panel-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  margin: 8px 0;
}
/* Checkbox-Zeile auch INNERHALB eines .field korrekt darstellen: die generischen
   .field label (display:block, fett, navy) und .field input (width:100% + Rahmen)
   haben höhere Spezifität und würden sonst die Checkbox als vollbreite Box über
   den fett gesetzten Text stapeln (Freigabe-Link-Bearbeiten, „Unterseiten
   mitfreigeben"). Diese Overrides schlagen sie gezielt. */
.field label.panel-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 0;
}
.field .panel-check input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
}
.panel-soon {
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .page-layout {
    flex-direction: column;
    flex: 0 1 auto;
  }
  .page-main {
    padding-right: 0;
    /* Mobil schmaler einruecken — reicht fuer den schwebenden +/Griff, spart Platz. */
    padding-left: 30px;
  }
  .page-panel {
    /* width:auto statt 100% — sonst ist die Leiste exakt containerbreit UND per
       negativem margin nach links geschoben: links steht sie über, rechts fehlen
       24px. Mit auto dehnen die negativen Margins sie auf die volle Breite. */
    width: auto;
    border-left: none;
    border-top: 1px solid #BFD4EA;
    /* nur horizontal bis zum Rand bluten, vertikal normal */
    margin: 16px -24px -32px -24px;
    padding: 20px 16px;
  }
  /* Auf Mobile immer offen (keine schmale Rail) — die Abschnitte selbst sind
     ein Akkordeon (siehe .panel-section.is-acc unten). */
  .page-layout.panel-closed .page-panel {
    width: auto;
    padding: 20px 16px;
  }
  .page-layout.panel-closed .panel-body {
    display: flex;
  }
  /* Ein-/Ausklappen der ganzen Leiste ist mobil sinnlos (sie ist immer offen). */
  .panel-rail-toggle {
    display: none;
  }
}

/* Dateien mobil (<=900px): das Detail-Panel ist am Desktop eine Seitenleiste, auf dem
   Handy aber ein Bottom-Sheet, das sich BEIM KLICK auf eine Datei öffnet — statt
   dauerhaft (leer) unter der Liste zu stehen. Nur .explorer (Dateien), nicht /pages. */
@media (max-width: 900px) {
  .explorer .page-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; margin: 0; z-index: 80;
    max-height: 85vh; overflow-y: auto;
    border: none; border-top: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    background: var(--color-surface, #fff);
    box-shadow: 0 -10px 40px rgba(11, 46, 82, 0.25);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  }
  body.filesheet-open .explorer .page-panel { transform: translateY(0); }
  /* Ziehgriff oben mittig als Affordance. */
  .explorer .page-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--color-border);
  }
  .filesheet-backdrop {
    position: fixed; inset: 0; z-index: 79;
    background: rgba(11, 46, 82, 0.4);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  body.filesheet-open .filesheet-backdrop { opacity: 1; pointer-events: auto; }
  /* Panel-Rail-Toggle wird zum runden Schließen-Knopf (× oben rechts im Sheet). */
  .explorer .panel-rail-toggle {
    display: flex; position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--color-panel); border: 1px solid var(--color-border); z-index: 2;
  }
  .explorer .panel-rail-toggle .panel-rail-icon { display: none; }
  .explorer .panel-rail-toggle::before,
  .explorer .panel-rail-toggle::after {
    content: ""; position: absolute; width: 15px; height: 2px;
    background: var(--color-text); border-radius: 1px;
  }
  .explorer .panel-rail-toggle::before { transform: rotate(45deg); }
  .explorer .panel-rail-toggle::after { transform: rotate(-45deg); }
}

/* Akkordeon der blauen Seitenleiste — GLOBAL (Desktop wie mobil, Phase 10.4):
   standardmäßig ist alles zu, sonst verschenkt die Leiste sehr viel Platz.
   Der Zustand je Abschnitt kommt aus js/panel-accordion.js. */
/* Akkordeon: nur die Überschrift ist sichtbar, Inhalt kommt auf Klick. */
.panel-section.is-acc > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
}
.panel-section.is-acc > h3::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg);
  margin-right: 4px;
  margin-top: -3px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.panel-section.is-acc.is-open > h3::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.panel-section.is-acc:not(.is-open) > .panel-acc__body {
  display: none;
}
.panel-section.is-acc > .panel-acc__body {
  padding-bottom: 10px;
}

/* Ab Desktop (Suchleiste sichtbar) mit rechtem Panel: 3-Spalten-Logik.
   Linke Sidebar + rechtes Panel haben Breiten-Prioritaet und laufen voll durch;
   die Suchleiste sitzt in der MITTLEREN Spalte, nicht ueber dem Panel.
   Umgesetzt per Grid auf .app-content; content__inner + page-layout werden per
   display:contents durchgereicht, damit page-main und page-panel echte
   Grid-Zellen werden. Collapse steuert die Panel-Spaltenbreite via :has(). */
@media (min-width: 1280px) {
  .app-content.app-content--panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    grid-template-rows: auto 1fr;
    align-content: start;
  }
  .app-content.app-content--panel:has(.page-layout.panel-closed) {
    grid-template-columns: minmax(0, 1fr) 42px;
  }
  .app-content--panel .app-searchbar {
    grid-column: 1;
    grid-row: 1;
  }
  /* Suchleiste in der mittleren Spalte linksbuendig zum Inhalt (nicht zentriert). */
  .app-content--panel .searchbar {
    max-width: none;
    margin: 0;
  }
  .app-content--panel .app-content__inner.app-content__inner--full {
    display: contents;
  }
  .app-content--panel .page-layout {
    display: contents;
  }
  .app-content--panel .page-main {
    grid-column: 1;
    grid-row: 2;
    /* links 44px, damit der schwebende +/Griff des Editors im weissen Rand sitzt und
       Titel/Meta buendig zum Editor-Body liegen (Andreas 2026-07-27). */
    padding: 32px 32px 24px 44px;
  }
  .app-content--panel .page-panel {
    grid-column: 2;
    grid-row: 1 / -1; /* volle Hoehe: von der Suchleiste bis ganz unten */
    width: auto;
    margin: 0;
    /* Bleibt beim Scrollen stehen (in langen Listen sonst weggescrollt) und
       scrollt bei Bedarf selbst. align-self:start, damit sticky greift. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    overflow-y: auto;
  }
}

/* Abrechnung / Billing */
.field-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-size: 14px;
}
.field-row {
  display: flex;
  gap: 14px;
}
.field-col {
  flex: 1;
  display: block;
}
.vat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.vat-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.vat-table td:last-child {
  text-align: right;
  white-space: nowrap;
}
.vat-table .vat-total td {
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: none;
}
.bill-steps {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bill-steps li {
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  color: var(--color-text-muted);
}
.bill-steps li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--color-border);
}
.bill-steps li.is-done {
  color: var(--color-text);
}
.bill-steps li.is-done::before {
  content: "✓";
  color: var(--color-success);
}
.order-box {
  margin-top: 8px;
}
.order-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 2px;
}
.order-vat {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
/* §312j-Bestellbutton bleibt immer sichtbar; bei unvollständigen Daten disabled + Hinweis. */
.btn-lg {
  padding: 13px 28px;
  font-size: 15px;
}
.order-need {
  margin: 0 0 14px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Großer positiver Abo-Status ("Dein Abo ist aktiv"). */
.sub-hero {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #EAF5EE;
  border: 1px solid #BBE0C8;
  border-radius: var(--radius-card);
  padding: 24px 26px;
  margin: 6px 0 18px;
}
.sub-hero--muted {
  background: #F5F6F8;
  border-color: var(--color-border);
}
.sub-hero__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sub-hero--muted .sub-hero__icon {
  background: var(--color-navy);
}
.sub-hero__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 2px 0 6px;
}
.sub-hero__text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.55;
  margin: 0 0 8px;
}
.sub-hero__next {
  font-size: 14px;
  font-weight: 600;
  color: #1E5B33;
  margin: 0;
}
.sub-cancel {
  margin: 0 0 8px;
}

/* Sauberer Abo-/Preis-Block. */
.price-card {
  background: #F4F8FC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin: 4px 0 16px;
}
.price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
}
.price-per {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.price-vat {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 8px 0 0;
}
.price-terms {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* Toast unten rechts mit ablaufendem Balken (Speicher-/Fehler-Feedback). */
.toast-wrap {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  min-width: 260px;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 18px 0;
  overflow: hidden;
  animation: toast-in 0.25s ease;
}
.toast--error {
  border-left-color: var(--color-danger);
}
.toast--out {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast__msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.toast__bar {
  height: 3px;
  background: var(--color-success);
  margin: 12px -18px 0;
  transform-origin: left center;
  animation: toast-bar 3.2s linear forwards;
}
.toast--error .toast__bar {
  background: var(--color-danger);
}
@keyframes toast-bar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast__bar { animation: none; }
  .toast { animation: none; }
}

/* Aktions-/Empfehlungscode-Feld im Abo-Block. */
.coupon-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.coupon-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.coupon-row input {
  flex: 1;
  min-width: 160px;
}

/* Trial-Zahlungshinweis-Overlay (freundlich, session-basiert wegklickbar). */
.trial-reminder {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.trial-reminder[hidden] { display: none; }
.trial-reminder__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 46, 82, 0.55);
}
.trial-reminder__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-login);
  max-width: 440px;
  width: 100%;
  padding: 32px 32px 22px;
  text-align: center;
  animation: tr-in 0.25s ease;
}
.trial-reminder__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.trial-reminder__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-bronze);
  margin-bottom: 12px;
}
.trial-reminder__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 10px;
}
.trial-reminder__body {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 18px;
}
.trial-reminder__countdown {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}
.tr-cd {
  background: #F4F8FC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 4px;
  min-width: 62px;
}
.tr-cd__num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tr-cd__lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: 5px;
}
.trial-reminder__expired {
  color: var(--color-bronze);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 18px;
}
.trial-reminder__later {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.trial-reminder__later:hover { color: var(--color-navy); }
.trial-reminder__note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 14px 0 0;
}
@keyframes tr-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trial-reminder__card { animation: none; }
}

/* Rechtsklick-Kontextmenü (Tabellen: Spalte/Zeile löschen). */
.ctx-menu {
  position: absolute;
  z-index: 90;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
  min-width: 150px;
}
.ctx-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-danger);
  cursor: pointer;
  border-radius: var(--radius);
}
.ctx-menu__item:hover {
  background: var(--color-panel);
}

/* Rechtsklick-Menü im Block-Editor (Format + Blocktyp). */
/* Rückfrage beim Entfernen einer Datei aus dem Text (Phase 10.5) */
.ed-dialog__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(19, 41, 63, 0.28);
  z-index: 60;
}
.ed-dialog {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(19, 41, 63, 0.22);
  padding: 22px 24px;
}
.ed-dialog__text {
  margin: 0 0 18px;
  line-height: 1.5;
}
.ed-dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
/* Seiten-Auswahl (interne Verlinkung im Editor). */
.ed-dialog--pick { padding: 16px; }
.ed-pick__input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.ed-pick__input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.15); }
.ed-pick__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ed-pick__empty { color: var(--color-text-muted); font-size: 13.5px; padding: 8px 6px; }
.ed-pick__item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--color-navy);
  cursor: pointer;
}
.ed-pick__item:hover { background: var(--color-panel); }
/* Auto-Inhaltsverzeichnis-Block. */
.toc-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  padding: 14px 18px;
  margin: 4px 0;
}
.toc-block__title { font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.toc-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.toc-block__list a { color: var(--color-blue); text-decoration: none; font-size: 15px; }
.toc-block__list a:hover { text-decoration: underline; }
.toc-block__empty { color: var(--color-text-muted); font-size: 13.5px; }

.editor-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.editor-ctx {
  position: fixed;
  z-index: 91;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
}
.editor-ctx__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}
.editor-ctx__item b,
.editor-ctx__item i,
.editor-ctx__item s {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--color-text-muted);
}
.editor-ctx__item:hover {
  background: var(--color-panel);
}
.editor-ctx__sep {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* Versionierung (DEC-034/035/037): Banner beim Ansehen alter Versionen + Liste. */
.version-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #fff8ec;
  border: 1px solid var(--color-bronze, #b8863b);
  border-radius: var(--radius);
  font-size: 13px;
}
.version-banner__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.version-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.version-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
}
.version-item__meta {
  color: var(--color-text-muted);
}
.version-item__view {
  flex-shrink: 0;
}
.version-item__actions {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.version-item__restore {
  margin: 0;
}
/* Wiederherstellen-Button optisch wie der Ansehen-Link. */
button.version-item__view {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-blue);
  cursor: pointer;
}
button.version-item__view:hover {
  text-decoration: underline;
}
.version-src {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--color-panel);
  color: var(--color-text);
}
.version-src--ai {
  background: #eaf2fc;
  color: var(--color-blue);
}
.version-src--restore {
  background: #fff8ec;
  color: var(--color-bronze, #b8863b);
}

/* Notizen & Kommentare (DEC-035/043) + @mention-Autocomplete. */
.comment-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-item {
  padding: 8px 10px;
  background: var(--color-panel);
  border-radius: var(--radius);
  font-size: 13px;
}
.comment-item__head {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.comment-item__author {
  font-weight: 600;
  color: var(--color-text);
}
.comment-item__body {
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-item__mentions {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mention-chip {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eaf2fc;
  color: var(--color-blue);
}
.comment-input {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid #CBDCEF;
  background: #fff;
  border-radius: var(--radius);
}
.js-comment-form {
  position: relative;
}
.mention-menu {
  position: absolute;
  z-index: 95;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}
.mention-menu__item:hover {
  background: var(--color-panel);
}

/* Sidebar-Kontextmenü (Rechtsklick auf Seite) + Umbenennen/Verschieben-Overlay. */
.sb-menu {
  position: fixed;
  z-index: 100;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
}
.sb-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}
.sb-menu__item:hover {
  background: var(--color-panel);
}
.sb-menu__item.is-danger {
  color: var(--color-danger);
}
.sb-menu__sep {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}
.sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(11, 46, 82, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sb-overlay__card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-login);
  padding: 22px;
}
.sb-overlay__card h2 {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--color-navy);
}
.sb-overlay__input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
}
.sb-overlay__input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12);
}
.sb-overlay__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
/* Bestell-Overlay: Widerruf-/Sofortbeginn-Einwilligung — hervorgehoben, gut lesbar. */
.bc-consent {
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.bc-consent .field-check {
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
/* Prüf-Overlay „In anderen Workspace verschieben" (DEC-131) — Check-Zeilen. */
.mws-body { display: flex; flex-direction: column; gap: 8px; }
.mws-row { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text); padding-left: 20px; position: relative; }
.mws-row::before { content: "•"; position: absolute; left: 4px; color: var(--color-text-muted); }
.mws-row--ok { color: var(--color-navy); }
.mws-row--ok::before { content: "✓"; color: var(--pub-accent-green, #2e9e5b); font-weight: 700; }
.mws-row--warn::before { content: "!"; color: var(--pub-accent-amber, #d98a00); font-weight: 700; }
.mws-row--bad { color: var(--pub-accent-red, #c0392b); }
.mws-row--bad::before { content: "✕"; color: var(--pub-accent-red, #c0392b); font-weight: 700; }

/* Lösch-PIN-Overlay (DEC-036). */
.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 46, 82, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pin-overlay__card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-login);
  padding: 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.pin-overlay__card h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
}
.pin-overlay__card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.pin-overlay__num {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-navy);
  margin: 8px 0 16px;
}
.pin-overlay__input {
  width: 140px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.2em;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.pin-overlay__input:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.15);
}
.pin-overlay__err {
  color: var(--color-danger) !important;
  font-size: 13px;
  margin: 0 0 12px !important;
}
.pin-overlay__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

/* Papierkorb-Liste. */
/* Datei in die Seite ziehen: die Ablagefläche muss sichtbar sein, sonst weiß
   niemand, ob der Editor das Ziehen überhaupt annimmt. */
.doc-editor-fill.is-file-drop {
  outline: 2px dashed var(--color-blue);
  outline-offset: 6px;
  border-radius: var(--radius-card);
  background: rgba(28, 116, 201, 0.04);
}

/* --- Datei-Detail: echte rechte Leiste (nutzt .page-panel wie bei den Seiten) --- */
/* Die Leiste selbst (Hintergrund, Strich, volle Höhe, Ein-/Ausklappen) kommt aus
   .page-panel. Hier nur die datei-spezifischen Inhalte. */
.ex-row.is-selected {
  background: #DCEAF9;
}
/* Der Klick-Bereich ist ein <button> — Standardstil zurücksetzen. */
button.ex-row__main {
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
/* Kleine Vorschau der ausgewählten Datei. */
.file-detail__preview {
  margin-bottom: 10px;
  min-height: 4px;
}
.file-detail__preview img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #BFD4EA;
  background: #fff;
}
.file-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #fff;
  border: 1px solid #BFD4EA;
  border-radius: 8px;
  color: var(--color-text-muted);
}
.file-detail__icon svg { width: 48px; height: 48px; }
.file-detail__view { margin-bottom: 4px; }
.file-detail__name {
  font-size: 16px;
  margin: 0 0 8px;
  word-break: break-word;
}
.file-detail__rename {
  display: flex;
  /* Muss die flex-direction:column aus .panel-form ueberschreiben — sonst gilt
     flex-basis am Input als HOEHE und das Feld wird zur grossen Box statt zur
     einzeiligen Textzeile. */
  flex-direction: row;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.file-detail__rename input {
  flex: 1 1 140px;
  min-width: 0;
}
.file-detail__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Dateibrowser-Schalter je Mitglied (Workspace-Einstellungen). */
.member-filebrowse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.member-filebrowse__label {
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.switch.switch--sm { transform: scale(0.85); transform-origin: left center; }

/* Globaler Block in den KI-Regeln (KI-Zugriff über Workspaces): abgesetzt, mit
   klarem Abstand zum Block „Wie die KI arbeitet" darunter. */
.settings-card--global {
  border-left: 3px solid var(--color-blue);
  background: #F3F8FE;
  margin-bottom: 28px;
}

/* KI-Zugriff-Optionen als Ampel: die AUSGEWÄHLTE Stufe rahmt sich farbig ein —
   grün (nur verbundener Workspace), gelb (alle lesen), rot (lesen + schreiben).
   Rein über :has(input:checked), kein Skript nötig. Mehr Luft je Zeile. */
.ai-scope {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 16px;
}
.ai-scope__opt {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-scope__opt input {
  margin-top: 3px;
  flex-shrink: 0;
}
.ai-scope__opt strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-navy);
}
.ai-scope__opt span span {
  color: var(--color-text-muted);
  font-size: 13px;
}
.ai-scope__opt:has(input:checked)[data-level="green"]  { border-color: #6FBF95; background: #EFFAF4; }
.ai-scope__opt:has(input:checked)[data-level="yellow"] { border-color: #E3BE55; background: #FDFAEF; }
.ai-scope__opt:has(input:checked)[data-level="red"]    { border-color: #DB9494; background: #FDF3F3; }

/* Etwas mehr Zeilenluft für einfache Radio-/Check-Zeilen generell. */
.panel-check {
  line-height: 1.5;
  padding: 3px 0;
}

/* --- Datei-Explorer (Phase 10.5) --- */
/* Ruhige Listenansicht wie ein Datei-Explorer: eine Zeile je Ordner/Datei,
   Symbol links, Name breit, Zusatzangaben rechts und schmal. Bewusst KEINE
   Tabelle mehr — Tabellenkopf und Spaltenlinien machen die Ansicht unruhig,
   und Zeilen lassen sich als Ganzes ziehen. */
.explorer {
  max-width: 100%;
}
.explorer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.explorer__head h1 {
  margin: 0 0 4px;
}
.explorer__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 6px;
}
.explorer__upload {
  display: inline;
}
/* Das echte Dateifeld bleibt im Baum (Formular + Zugänglichkeit), ist aber
   unsichtbar — die Bedienung läuft über unseren eigenen Knopf. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.explorer__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 14px;
}
.crumb {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 8px;
}
.crumb:hover {
  background: var(--color-panel);
  color: var(--color-blue);
}
.crumb[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}
.crumb__sep {
  color: var(--color-text-muted);
}
.explorer__newfolder {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.explorer__newfolder input[name="name"] {
  max-width: 260px;
}
/* Ablagefläche: der ganze Listenbereich nimmt Dateien vom Schreibtisch an. */
.explorer__drop {
  border: 2px dashed transparent;
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 120px;
}
.explorer__drop.is-dropping {
  border-color: var(--color-blue);
  background: var(--color-panel);
}
.explorer__empty {
  color: var(--color-text-muted);
  padding: 28px 16px;
  text-align: center;
}
.explorer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}
.explorer__list:empty {
  display: none;
}
.ex-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.ex-row:last-child {
  border-bottom: 0;
}
.ex-row:hover {
  background: var(--color-panel);
}
.ex-row.is-dragging {
  opacity: 0.45;
}
.ex-row.is-busy {
  opacity: 0.5;
  pointer-events: none;
}
.ex-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
}
.ex-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ex-row__meta {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ex-row__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-right: 10px;
}
.ex-row__actions form {
  margin: 0;
}
.ex-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-panel);
  color: var(--color-text-muted);
}
/* Ordner heben sich farblich ab — der wichtigste Unterschied in der Liste. */
.ex-icon--folder {
  color: var(--color-blue);
  background: #E7F0FA;
}
.ex-icon--pdf { color: #C0392B; background: #FBEAE8; }
.ex-icon--bild { color: #2D8A4E; background: #E6F4EC; }
.ex-icon--tabelle { color: #1E7B54; background: #E6F3EE; }
.ex-icon--archiv { color: #8A6D1F; background: #F6F0DF; }
.ex-icon--up { background: transparent; font-size: 17px; }
/* Ziel beim Ziehen deutlich markieren, sonst rät man, wo man loslässt. */
.is-drop-target {
  outline: 2px solid var(--color-blue);
  outline-offset: -2px;
  background: #E7F0FA !important;
  border-radius: 8px;
}
.explorer__foot {
  margin-top: 12px;
}
/* Speicheranzeige: der Balken ist die Antwort auf „wie voll bin ich?" — Text
   allein wird ueberlesen. */
.quota-bar {
  margin: 0 0 20px;
}
.quota-bar__track {
  height: 8px;
  border-radius: 999px;
  background: #E2E9F2;
  overflow: hidden;
}
.quota-bar__fill {
  height: 100%;
  background: var(--color-blue);
  transition: width 0.2s ease;
}
.quota-bar__fill--warn {
  background: #D9534F;
}
.quota-bar__text {
  margin: 6px 0 2px;
  font-size: 14px;
}
@media (max-width: 720px) {
  /* Auf dem Handy bleiben Symbol, Name und Größe — Datum und Seitenbezug
     würden die Zeile sprengen. */
  .ex-row__meta--wide { display: none; }
  .explorer__actions { width: 100%; }
}

/* Dateiauswahl im Seiten-Panel (Phase 10.5) */
.file-pick__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.file-pick__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13.5px;
  color: inherit;
  cursor: pointer;
}
.file-pick__item:hover {
  background: #fff;
  color: var(--color-blue);
}
.file-pick__item.is-done {
  color: var(--color-blue);
  font-weight: 700;
  cursor: default;
}
.file-pick__empty {
  padding: 7px 9px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.trash-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 640px;
}
.trash-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.trash-list__title {
  flex: 1;
  min-width: 140px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
}
.trash-list__meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
.trash-list__actions {
  display: flex;
  gap: 8px;
}
.trash-list__actions form {
  margin: 0;
}
.app-sidebar__account {
  position: relative;
  padding-top: 8px;
}

/* Profil-Button (Avatar + Name) unten in der Sidebar. */
.app-account {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--color-sidebar-fg-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}

.app-account:hover {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg);
}

.app-account__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account__chev {
  color: var(--color-sidebar-fg-muted);
  font-size: 16px;
}

/* Initialen- bzw. Bild-Avatar (MANIFEST: Kreis, Gewicht 700). */
.avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-sidebar-border);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Konto-Overlay: weisse Karte auf navy Sidebar, sofort ein/aus (kein Fade). */
.account-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% - 4px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 4px;
  z-index: 20;
}

.account-menu[hidden] {
  display: none;
}

.account-menu form {
  margin: 0;
}

.account-menu a,
.account-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  text-decoration: none;
  border: none;
  border-bottom: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}

.account-menu a:hover,
.account-menu button:hover {
  background: var(--color-panel);
}

/* Willkommens-/Empty-State im Content. */
.app-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Hilfe & Anleitung --- */
.help {
  max-width: 900px;
}
.help-chapter {
  max-width: 820px;
}

/* Help hub: chapter cards */
.help-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 0 8px;
}
@media (min-width: 640px) {
  .help-hub {
    grid-template-columns: 1fr 1fr;
  }
}
.help-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.help-card:hover {
  border-color: var(--color-blue);
  transform: translateY(-1px);
}
.help-card__icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}
.help-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.help-card__title {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 15px;
}
.help-card__sum {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Chapter page: breadcrumb + pager */
.help-crumb {
  margin-bottom: 6px;
}
.help-crumb a {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.help-crumb a:hover {
  color: var(--color-blue);
}
.help-body h3 {
  font-size: 15px;
  color: var(--color-navy);
  margin: 26px 0 10px;
}
.help-body h4 {
  font-size: 14px;
  color: var(--color-navy);
  margin: 20px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-border);
}
/* Label-Absatz direkt vor einem Beispiel-Satz enger an diesen koppeln. */
.help-body h4 + p,
.prompt-ex + p {
  margin-top: 10px;
}
.help-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.help-pager__link {
  font-size: 13.5px;
  color: var(--color-navy);
  text-decoration: none;
  max-width: 48%;
}
.help-pager__link:hover {
  color: var(--color-blue);
}
.help-pager__link--next {
  text-align: right;
  margin-left: auto;
}
.help-section {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 20px;
}
.help-section h2 {
  font-size: 20px;
  color: var(--color-navy);
  margin: 0 0 12px;
}
.help-section h3 {
  font-size: 15px;
  color: var(--color-navy);
  margin: 18px 0 8px;
}
.help-section p {
  line-height: 1.65;
  margin: 0 0 12px;
}
.help-section ul {
  line-height: 1.7;
  padding-left: 20px;
  margin: 0 0 12px;
}
.help-section li {
  margin-bottom: 4px;
}
.help-fig {
  margin: 16px 0 6px;
}
/* Hilfebilder als kompakte Vorschau (~halbe Größe); Klick öffnet die Lightbox. */
.help-fig img {
  max-width: 340px;
  width: auto;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: block;
  cursor: zoom-in;
}
.help-fig figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
/* Anwendungstipps: Befehls-Tabelle + Beispiel-Saetze (DEC-083). */
.help-cmds {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 6px;
  font-size: 14px;
}
.help-cmds td {
  border-top: 1px solid var(--color-border);
  padding: 9px 10px;
  vertical-align: top;
}
.help-cmds tr:first-child td {
  border-top: none;
}
.help-cmds td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-navy);
  width: 1%;
}
.prompt-ex {
  border-left: 3px solid var(--color-blue);
  background: var(--color-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 9px 13px;
  margin: 7px 0;
}

/* Step-by-step guide (Workspace Connect): numbered step + crop-sized shot. */
.guide-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}
.guide-step:first-of-type {
  border-top: none;
}
.guide-step__num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-step__body {
  flex: 1;
  min-width: 0;
}
.guide-step__body p {
  margin: 2px 0 8px;
}
/* crop-sized screenshot slot (NOT fullscreen). Bilder werden NUR verkleinert,
   nie hochskaliert (sonst unscharf) — width:auto + max-width begrenzt. */
.guide-shot {
  margin: 8px 0 2px;
  max-width: 340px;
}
.guide-shot img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: block;
  cursor: zoom-in;
}
/* Bild-Overlay (Lightbox) für alle Hilfebilder — Klick auf ein Bild vergrößert
   es über den ganzen Bildschirm, Klick/ESC schließt. JS: public/js/help-copy.js. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 46, 82, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Kopierbares Adress-/Code-Feld mit Ein-Klick-Kopieren (DEC-084). */
.copy-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-navy);
  border-radius: var(--radius);
  padding: 5px 6px 5px 12px;
  max-width: 100%;
  vertical-align: middle;
}
.copy-field code {
  color: #e7f0fa;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}
.copy-field__btn {
  flex: 0 0 auto;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.copy-field__btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.copy-field__btn.is-copied {
  background: var(--color-blue);
}
.guide-shot figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
/* placeholder until the real crop is dropped in — looks intentional, not broken */
.guide-shot--todo {
  max-width: 440px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-panel);
  padding: 14px 16px;
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.guide-shot--todo::before {
  content: "🖼  Ausschnitt: ";
  font-weight: 600;
  color: var(--color-navy);
}

/* Per-app accordion (choose your AI app) */
.connect-app {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  overflow: hidden;
}
.connect-app > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--color-navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.connect-app > summary::-webkit-details-marker {
  display: none;
}
.connect-app > summary::after {
  content: "▾";
  color: var(--color-text-muted);
  font-size: 12px;
}
.connect-app[open] > summary {
  border-bottom: 1px solid var(--color-border);
}
.connect-app[open] > summary::after {
  content: "▴";
}
.connect-app__body {
  padding: 8px 16px 16px;
}
.connect-app__body pre {
  background: var(--color-navy);
  color: #E7F0FA;
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
  font-family: var(--font-mono);
}

.help-foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* --- Dashboard / Workspace-Startseite --- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
  max-width: 1000px;
}
@media (min-width: 760px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.dash-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  background: #fff;
}
.dash-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 14px;
}
.dash-stats {
  display: flex;
  gap: 36px;
}
.dash-stat {
  display: flex;
  flex-direction: column;
}
.dash-stat__num {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}
.dash-stat__label {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 5px;
}
.dash-access {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--color-text);
}
.dash-access__label {
  color: var(--color-text-muted);
}
/* Onboarding / Erste Schritte */
.dash-onboard {
  margin-bottom: 18px;
  max-width: 1000px;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 1px rgba(28, 116, 201, 0.25);
}
.dash-onboard__intro {
  margin: 0 0 14px;
}
.onboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
}
.onboard-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  position: relative;
}
.onboard-item.is-done .onboard-check {
  border-color: var(--color-success);
  background: var(--color-success);
}
.onboard-item.is-done .onboard-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.onboard-item.is-done > a,
.onboard-item.is-done > span:not(.onboard-check) {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.onboard-item__hint {
  color: var(--color-text-muted);
  font-size: 12.5px;
  text-decoration: none !important;
}

/* Workspace Connect */
.dash-ai {
  position: relative;
  overflow: hidden;
}
.dash-ai::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-border);
}
.dash-ai--on::before {
  background: var(--color-success);
}
.dash-ai--other::before {
  background: var(--color-bronze);
}
.dash-ai--api::before {
  background: var(--color-blue);
}
.dash-ai--api .dash-ai__dot {
  background: var(--color-blue);
}
.dash-ai--api .dash-ai__state-tag {
  background: rgba(28, 116, 201, 0.12);
  color: var(--color-blue);
}
.dash-ai--on {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success);
}
.dash-ai__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.dash-ai__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted);
}
.dash-ai--on .dash-ai__dot {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(46, 160, 90, 0.18);
}
.dash-ai--other .dash-ai__dot {
  background: var(--color-bronze);
}
.dash-ai__brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}
.dash-ai__state-tag {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-bg-subtle, #f1f3f6);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dash-ai--on .dash-ai__state-tag {
  background: rgba(46, 160, 90, 0.12);
  color: var(--color-success);
}
.dash-ai--other .dash-ai__state-tag {
  background: rgba(176, 122, 60, 0.14);
  color: var(--color-bronze);
}
.dash-ai__intro {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.dash-ai__status {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--color-text);
  font-weight: 600;
}
/* Anwendungstipps-Karte auf der Startseite (DEC-083). */
.dash-tips__cmds {
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.9;
  margin: 0 0 6px;
}
.dash-tips__exlabel {
  margin: 8px 0 4px;
}
.dash-tips__ex {
  border-left: 3px solid var(--color-blue);
  background: var(--color-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}
.dash-ai__status.is-on {
  color: var(--color-success);
}
.dash-ai__status.is-other {
  color: var(--color-navy);
}
.dash-ai__warn {
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--color-bronze);
  font-weight: 600;
}
.dash-ai__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
/* Zuletzt angelegt */
.dash-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-recent__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}
.dash-recent__item:hover {
  background: var(--color-panel);
}
.dash-recent__title {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
}
.dash-recent__on {
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Hover-Tooltip fuer abgeschnittene Seitentitel: nahtlose Verlaengerung der Zeile
   (gleiche Farbe/Hoehe/Bullet), Schatten NUR nach rechts (kein linker Halo),
   linke Kante eckig -> geht buendig in die blaue Zeile ueber. */
.sidebar-tip {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 70vw;
  padding-left: 0;
  padding-right: 14px;
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 6px 0 12px rgba(11, 46, 82, 0.35);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}

/* Marke oben ist ein Link zur App-Startseite (Dashboard). */
.app-sidebar__brandlink {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border: none;
}
.app-sidebar__brandlink:hover {
  opacity: 0.9;
}
/* Offizielles Logo (reversed, transparent) in der dunklen Sidebar. */
.app-sidebar__logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1280px) {
  .app-topbar {
    display: none;
  }
}
/* Mobil/Tablet: die App-Navigation (Hamburger + Titel + Lupe) bleibt beim
   Scrollen oben stehen — sie ist der einzige Weg zurück in die Seitenleiste. */
@media (max-width: 1279px) {
  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--color-bg);
  }
}

.app-topbar__menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-navy);
  padding: 6px 10px;
  /* Ausreichende Tapfläche auf Mobil/Tablet (einziger Weg zurück in die Sidebar). */
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}
.app-topbar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar__search {
  display: inline-flex;
  align-items: center;
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 8px;
  flex-shrink: 0;
}

/* Globale Suche (Phase 4.7): Desktop-Leiste oben, mobil ueber die Lupe. */
.app-searchbar {
  display: none;
  padding: 14px 24px 0;
}
@media (min-width: 1280px) {
  .app-searchbar {
    display: block;
  }
}
.searchbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1080px;
  margin: 0; /* linksbuendig wie der Inhalt — Position bleibt ueberall gleich */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 5px 6px 5px 12px;
}
.searchbar:focus-within {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12);
}
.searchbar__icon {
  display: flex;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.searchbar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  padding: 8px 4px;
  color: var(--color-text);
}
.searchbar__scope {
  border: none;
  background: #f1f3f6;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-navy);
  cursor: pointer;
  flex-shrink: 0;
}
.searchbar__submit {
  border: none;
  border-radius: var(--radius);
  background: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  padding: 8px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.searchbar__submit:hover {
  background: var(--color-blue-dark);
}
.searchbar__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(11, 46, 82, 0.14);
  overflow: hidden;
  z-index: 40;
}
.suggest-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.suggest-item:last-child {
  border-bottom: none;
}
.suggest-item.is-active,
.suggest-item:hover {
  background: #f4f7fb;
}
.suggest-item__title {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
}
.suggest-item__snippet {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* „Hilfe"-Marker an einem Hilfe-Vorschlag im Autocomplete. */
.suggest-item__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #EAF2FC;
  color: var(--color-blue);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
}
/* Emoji vor einem Hilfe-Treffer in der Ergebnisliste. */
.search-result__icon {
  margin-right: 4px;
}
mark {
  background: rgba(28, 116, 201, 0.18);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* Suchergebnis-Seite */
.search-page {
  max-width: 820px;
}
/* Suchfeld direkt auf der Suchseite (v. a. mobil, wo die obere Leiste fehlt).
   Auf dem Desktop übernimmt die obere Suchleiste — dort ausblenden. */
.search-page__form {
  margin: 0 0 18px;
}
@media (min-width: 1280px) {
  .search-page__form {
    display: none;
  }
}
.search-scopes {
  display: flex;
  gap: 8px;
  margin: 4px 0 22px;
  flex-wrap: wrap;
}
.search-scope {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  text-decoration: none;
  font-size: 13.5px;
}
.search-scope.is-active {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.search-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin: 18px 0 12px;
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-result {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  text-decoration: none;
}
.search-result:hover {
  border-color: var(--color-blue);
}
.search-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.search-result__title {
  font-weight: 700;
  color: var(--color-navy);
}
.search-result__type {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.search-result__snippet {
  display: block;
  margin-top: 6px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.55;
}
.search-empty {
  font-weight: 600;
  color: var(--color-navy);
}
.search-hint {
  margin-top: 8px;
}

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

/* Benachrichtigungs-Glocke in der Sidebar (ueber dem Profil). */
/* Glocke: Look wird zentral mit .sidebar-nav__add geteilt (siehe oben). */
.app-bell {
  position: relative;
}
.app-bell__icon {
  flex-shrink: 0;
}
.app-bell__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* snori Chat: roter Punkt (kein Zaehler) bei offenen Chats/Tickets. */
.app-bell__dot {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-danger);
  flex-shrink: 0;
}
/* Noch nicht freigeschalteter Menuepunkt ("coming soon"): ausgegraut, nicht klickbar. */
.app-bell--soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.app-bell__soon {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-sidebar-fg-muted);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 6px;
}
/* Hauchdünne Trennlinie in der Sidebar — grenzt eigenständige Bereiche ab
   (Freigaben | snori Chat/Helpdesk | Benachrichtigungen). */
.sidebar-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 6px 8px;
}

/* Benachrichtigungs-Seite. */
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notif-head form {
  margin: 0;
}
.notif-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Zeile = Link (flexibel) + Löschen-Button. */
.notif-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.notif-item__link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
}
.notif-item__del {
  margin: 0;
  display: flex;
}
.notif-del-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  width: 38px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.notif-del-btn:hover {
  color: #b42318;
  border-color: #b42318;
  background: #fef3f2;
}
.notif-item__link:hover {
  border-color: var(--color-blue);
  background: var(--color-panel);
}
.notif-item.is-unread .notif-item__link {
  border-left: 3px solid var(--color-blue);
  background: #f4f8fc;
}
.notif-item__title {
  display: block;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 14px;
}
.notif-item__body {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
  margin-top: 2px;
}
.notif-item__on {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.app-content__inner {
  max-width: 760px;
  padding: 32px 24px;
}

.app-content h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 24px;
}

.todo-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  font-size: 16px;
}

.todo-item:first-of-type {
  border-top: none;
}

/* ============ iOS-style toggle switch (DEC-031) ============
   The deliberate rounded exception in an otherwise sharp-corner system. Built on
   a hidden checkbox so it posts as a normal form field (name=…, value=on). */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(11, 46, 82, 0.25);
  transition: transform 0.15s ease;
}
.switch input:checked + .switch__track {
  background: var(--color-blue);
}
.switch input:checked + .switch__track::after {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}
.switch input:disabled {
  cursor: not-allowed;
}
.switch input:disabled + .switch__track {
  opacity: 0.5;
}

/* A labelled toggle row: text on the left, switch on the right. */
.rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.rule-row:first-of-type {
  border-top: none;
}
.rule-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rule-row__label strong {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 15px;
}
.rule-row__label span {
  font-size: 13px;
  color: var(--color-text-muted);
}
.rule-row--nested {
  padding-left: 20px;
}

/* Governance sub-groups + the honesty note. */
.gov-group {
  margin-top: 18px;
}
.gov-group > h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 4px;
}
.gov-note {
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-panel);
  border-left: 3px solid var(--color-bronze);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin: 12px 0;
}
.gov-range {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gov-range input[type="range"] {
  flex: 1;
}
.gov-range__end {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Connections / API keys list. */
.conn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.conn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.conn-item:first-of-type {
  border-top: none;
}
.conn-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conn-item__name {
  font-weight: 600;
  color: var(--color-navy);
}
.conn-item__meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
/* Freigaben: Seitentitel als Beisatz hinter dem Link-Namen ("für Bärbel — Titel"). */
.conn-item__sub {
  font-weight: 400;
  color: var(--color-text-muted);
}
/* Freigaben: Zugriffs-Statistik je Link (24 Std. / 7 Tage / 30 Tage). */
.conn-item__stats {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.conn-item__stats b {
  color: var(--color-navy);
  font-weight: 600;
}
/* Mehrere Aktionen rechts in einer conn-item-Zeile (z. B. Freigaben-Übersicht:
   Kopieren / Rechte ändern / Zurückrufen) — eine flexible Gruppe statt einer
   eigenen Listenkomponente, damit alle Zeilen dieselben Abstände haben. */
.conn-item__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.conn-item__actions form {
  margin: 0;
}
/* Mobil: die Zeile bricht um — Titel/Meta oben, Aktionen darunter in voller
   Breite (sonst schieben lange Freigabe-Titel „Rechte ändern" aus dem Bild).
   Gilt fuer alle conn-item-Listen (Freigaben, Verbindungen, KI-Zugaenge). */
@media (max-width: 640px) {
  .conn-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .conn-item__main { min-width: 0; }
  .conn-item__actions { flex-wrap: wrap; }
  .conn-item__actions .btn,
  .conn-item__actions form { flex: 1 1 auto; }
  .conn-item__actions form .btn { width: 100%; }
  /* Einzel-Aktion direkt in der Zeile (z. B. Mitglieder-Freigaben) full-width. */
  .conn-item > .btn { width: 100%; }
}
/* Freigabe-Link-Bearbeiten (share-edit.eta) */
.share-edit__url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}
.share-edit__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.share-edit__foot form { margin: 0; }
.share-edit__revoke { color: var(--color-danger, #b3261e); }
.conn-scope {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-panel);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}
.newkey-box {
  background: var(--color-panel);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.newkey-box code {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin: 8px 0;
}
.newkey-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.newkey-row code {
  flex: 1;
  margin: 8px 0;
}
.newkey-row .btn {
  flex-shrink: 0;
}

/* ===== Settings page: airy card blocks (DEC-063) ===== */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.settings-row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 900px) {
  .settings-row2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
/* Rechnungsdaten-Raster (Andreas 2026-07-22): links Abo, darunter Dateispeicher,
   rechts die Rechnungsdaten über beide Zeilen. Auf schmalen Schirmen zählt
   allein die Reihenfolge im Quelltext — Abo, Dateispeicher, Rechnungsdaten —
   deshalb wird hier NICHT umsortiert, sondern nur ab Desktop ein Raster gelegt. */
.settings-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
/* Mobile: gewünschte Reihenfolge trotz DOM-Folge (Andreas 2026-07-23):
   Abo → Zahlungsart → Dateispeicher → Rechnungsdaten → Rechnungen. */
.settings-split > #abo            { order: 1; }
.settings-split > #zahlungsart    { order: 2; }
.settings-split > #speicher       { order: 3; }
.settings-split > #chat           { order: 4; }
.settings-split > #rechnungsdaten { order: 5; }
.settings-split > #rechnungen     { order: 6; }
@media (min-width: 900px) {
  .settings-split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Desktop: Abo + Zahlungsart links (Zeile 1/2), Rechnungsdaten rechts über
     beide Zeilen; Dateispeicher + Rechnungen voll breit darunter. */
  .settings-split > #abo            { grid-column: 1; grid-row: 1; }
  .settings-split > #zahlungsart    { grid-column: 1; grid-row: 2; }
  .settings-split > #rechnungsdaten { grid-column: 2; grid-row: 1 / span 2; }
  .settings-split > #speicher       { grid-column: 1 / span 2; grid-row: 3; }
  .settings-split > #chat           { grid-column: 1 / span 2; grid-row: 4; }
  .settings-split > #rechnungen     { grid-column: 1 / span 2; grid-row: 5; }
}

.settings-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
}
.settings-card > h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 6px;
}
.settings-card--danger {
  border-color: #EBC9C9;
}
.settings-card--danger > h2 {
  color: var(--color-danger);
}
/* Sprungliste zu anderen Workspaces (snori Chat/Helpdesk „hier nicht aktiv, aber dort"). */
.ws-jumplist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Impressum-Warnung in den Workspace-Einstellungen. */
.imprint-warn { background: #FCF3E3; border: 1px solid #EBD9B0; color: #7A5A12; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 10px; }
/* Öffentlich gerendertes Impressum (geteilte Seite / Formular / Helpdesk). */
.imprint { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.imprint .imp-provider { margin-bottom: 10px; color: var(--color-text); white-space: normal; }
.imprint .imp-tech { margin: 8px 0 0; }
.imprint a { color: inherit; text-decoration: underline; }
.lead-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.lead-foot__links { margin-top: 8px; font-size: 12px; }
.lead-foot__links a { color: var(--color-text-muted); }
/* Kontextueller Speichern-Knopf je Einstellungs-Box (snori Chat): erscheint erst,
   wenn in DIESER Box etwas geaendert wurde. Per JS nach der Box eingefuegt. */
.cfg-cardsave {
  display: none;
  margin: -8px 0 20px;
}
.cfg-cardsave.is-dirty {
  display: block;
}
/* Unterblock innerhalb einer Kachel (z. B. 2FA unter Passwort). */
.settings-card__block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.settings-card__block > h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 12px;
}
.settings-card__intro {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}
/* a form that wraps two cards must not collapse their spacing */
.settings-stack > form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}

/* Positive safeguard note (real, server-enforced guarantee — not a disclaimer). */
.safeguard-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #EAF5EE;
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 20px 0 0;
}
.safeguard-note strong {
  color: #1E5B33;
  font-size: 14px;
}
.safeguard-note span {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.55;
}

/* Per-actor rights matrix (KI | API), DEC-031. Reuses .switch. */
.rule-matrix {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.rule-matrix th {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 6px;
  border-bottom: 2px solid var(--color-border);
  text-align: center;
}
.rule-matrix th.rule-matrix__head-label {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
.rule-matrix td {
  padding: 15px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: center;
}
.rule-matrix tr:last-child td {
  border-bottom: none;
}
/* fixed, comfortable width for the two toggle columns */
.rule-matrix th:not(.rule-matrix__head-label),
.rule-matrix td:not(.rule-matrix__label) {
  width: 76px;
}
/* td+class beats `.rule-matrix td` (both 0,1,1) by order — force left. */
.rule-matrix td.rule-matrix__label {
  text-align: left;
}
.rule-matrix__label strong {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  font-size: 15px;
}
.rule-matrix__label span {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* OAuth consent card (auth layout). */
.consent-card {
  text-align: left;
}
.consent-scope-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}
.consent-scope-opt strong {
  color: var(--color-navy);
}
.consent-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

/* ============ Workspace-Einstellungen: Tabs + Modus (Phase 9) ============ */
.ws-tabs__bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ws-tab {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ws-tab:hover { color: var(--color-navy); }
.ws-tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-blue); }
.ws-tab:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.ws-panel { display: none; }
.ws-panel.is-active { display: block; }

.mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--color-bg);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin: 6px 0;
}
.mode-opt { position: relative; }
.mode-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.mode-opt span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.mode-opt input:checked + span { background: var(--color-panel); color: var(--color-navy); box-shadow: 0 1px 3px rgba(11, 46, 82, 0.15); }
.mode-opt input:focus-visible + span { outline: 2px solid var(--color-blue); }

.manuscript-group {
  margin: 24px 0 8px;
  font-size: 15px;
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.tone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.tone-axis { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 560px) { .tone-grid { grid-template-columns: 1fr; } }

/* Phase 9 Feinschliff: Abstand nach den Ton-Reglern + Select-Höhe */
.tone-grid { margin: 6px 0 18px; }
.tone-axis select { padding: 8px 10px; }
@media (max-width: 560px) { .tone-grid { gap: 12px; } }

.dash-brand-tip { margin: -8px 0 22px; }

/* Phase 9 Revision: Tabs ohne Scroll (gleich breit) + Slider + 2-Spalten-Grid */
.ws-tabs__bar { overflow-x: visible; }
.ws-tab { flex: 1 1 0; text-align: center; padding: 10px 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.field--tight { margin: 0; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; gap: 14px; } }

/* Mobil: gleich-breite Tabs sprengen den schmalen Screen (lange Labels wie
   „KI-Regeln"). Stattdessen natuerliche Breite, zentriert, etwas kleiner —
   passt so in eine Zeile ohne Scroll, mit Rest-Scroll als Sicherheitsnetz. */
@media (max-width: 560px) {
  .ws-tabs__bar { justify-content: center; gap: 2px; overflow-x: auto; }
  .ws-tab { flex: 0 0 auto; padding: 9px 9px; font-size: 13px; }
}
.slider-list { display: flex; flex-direction: column; gap: 18px; margin: 10px 0 20px; }
.slider-row { display: flex; flex-direction: column; gap: 5px; }
.slider-row__ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.tone-slider { width: 100%; accent-color: var(--color-blue); height: 6px; cursor: pointer; }
.tone-slider:disabled { opacity: 0.5; cursor: default; }

/* Phase 9: aktiver Modus deutlich blau (statt gräulich) */
.mode-opt input:checked + span { background: var(--color-blue); color: #fff; box-shadow: 0 1px 4px rgba(30, 127, 212, 0.4); }

/* ===== Schlaue Tabelle: Spalten-Editor, Pflichtfeld, Auswahl-Farben (Phase 1) ===== */

/* Kopfzelle mit Name + Edit-Stift (Stift dezent, bei Hover/Fokus sichtbar).
   Flex NUR auf den inneren Wrapper — ein flex-<th> faellt aus dem Tabellen-
   Layout und die Kopfzeile bricht sonst um. */
.data-table th .th-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.th-name { overflow: hidden; text-overflow: ellipsis; }
/* Spaltenname als Sortier-Schalter (Link, damit es auch ohne JS geht). */
a.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  cursor: pointer;
}
a.th-sort:hover { color: var(--color-blue); }
.th-sort__arrow {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0.35;
}
a.th-sort:hover .th-sort__arrow { opacity: 0.75; }
a.th-sort.is-sorted { color: var(--color-blue); }
a.th-sort.is-sorted .th-sort__arrow { opacity: 1; }
/* Ziehgriff zum Verbreitern der Spalte: schmaler Streifen an der rechten Kante
   der Kopfzelle. Dezent, bei Hover/Ziehen deutlich. th braucht dafuer relative. */
.data-table th { position: relative; }
.col-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.col-resize::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 3px;
  width: 2px;
  height: 60%;
  border-radius: 2px;
  background: transparent;
  transition: background .12s;
}
.data-table th:hover .col-resize::after,
.col-resize.is-dragging::after { background: var(--color-blue); }
body.col-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
.th-edit {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
.data-table th:hover .th-edit,
.th-edit:focus-visible { opacity: 1; }
.th-edit:hover { color: var(--color-blue); background: rgba(28,116,201,0.10); }
@media (hover: none) { .th-edit { opacity: .55; } }

/* Pflichtfeld leer: dezenter Pastell-Rot-Rand (nur Anzeige, kein Blockieren). */
.data-table td .data-cell.is-required-empty {
  box-shadow: inset 0 0 0 1.6px #E9A8A8;
  background: #FDF3F3;
  border-radius: var(--radius);
}

/* Auswahl-Zelle: Pastell-Hintergrund je gewähltem Wert. Selektor muss
   .data-table td .data-cell{background:transparent} (Spezifitaet 0,2,1)
   ueberbieten -> deshalb mit .data-table td davor (0,3,1). */
.data-table td .data-cell.data-select { cursor: pointer; }
.data-table td .data-select[data-color="gray"]   { background: #EEF1F5; color: #4A5A6E; }
.data-table td .data-select[data-color="red"]    { background: #FCE8E8; color: #B23A3A; }
.data-table td .data-select[data-color="orange"] { background: #FBEBDA; color: #A85B1B; }
.data-table td .data-select[data-color="yellow"] { background: #FAF3D6; color: #856A00; }
.data-table td .data-select[data-color="green"]  { background: #E6F4EA; color: #2E7D46; }
.data-table td .data-select[data-color="blue"]   { background: #E4EEF9; color: #1C74C9; }
.data-table td .data-select[data-color="purple"] { background: #EFE8F8; color: #6B4BA3; }
.data-table td .data-select[data-color="none"]   { background: transparent; color: var(--color-text); }

/* Editor-Overlay */
.col-editor {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.col-editor[hidden] { display: none; }
.col-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 46, 82, 0.32);
}
.col-editor__card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), 0 18px 50px rgba(11,46,82,0.22);
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 22px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.col-editor__title { font-size: 17px; margin: 0; color: var(--color-navy); }
.col-editor__card .field { margin: 0; }

/* Breite Variante (Formular-Konfiguration): auf dem Desktop zweispaltig — links
   die Einstellungen, rechts Link/Einbettung/Aktionen. */
.col-editor__card--wide { max-width: 900px; }
.lf-config__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.lf-config__main, .lf-config__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lf-config__side .col-editor__actions { margin-top: auto; }

/* Mobil: JEDES col-editor-Overlay wird Vollbild und die GANZE Karte scrollt
   (kein doppelter Scroll in Teil-Listen). */
@media (max-width: 760px) {
  .col-editor { padding: 0; align-items: stretch; }
  .col-editor__card, .col-editor__card--wide {
    max-width: none; width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .lf-config__grid { grid-template-columns: 1fr; gap: 16px; }
}
.col-editor__req {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}
.col-editor__options { display: flex; flex-direction: column; gap: 8px; }
.col-editor__options .hint-text { margin: 0; }
.col-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* Auswahl-Werte-Liste im Editor */
.opt-list { display: flex; flex-direction: column; gap: 8px; }
/* Lange Listen (viele Auswahl-Werte / Farbregeln) nicht die ganze Overlay-Karte
   aufblähen lassen -> ~5 Zeilen sichtbar, danach scrollt NUR die Liste (kein
   doppelter Scroll der Karte; „Speichern" bleibt sichtbar). */
.opt-list, .rule-list {
  max-height: 232px; overflow-y: auto;
  /* Platz für die Scrollleiste, damit sie die Felder nicht überlappt. */
  padding-right: 2px;
}
.rule-list { max-height: 260px; }
.opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.opt-value {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
}
.opt-value:focus { outline: 2px solid var(--color-blue); outline-offset: -1px; }
.opt-swatches { display: inline-flex; gap: 5px; }
.opt-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.opt-swatch.is-active { border-color: var(--color-navy); box-shadow: 0 0 0 1px #fff inset; }
.opt-swatch--gray   { background: #C3CDDA; }
.opt-swatch--red    { background: #E88B8B; }
.opt-swatch--orange { background: #E6A768; }
.opt-swatch--yellow { background: #E6CF63; }
.opt-swatch--green  { background: #7BC095; }
.opt-swatch--blue   { background: #6FA8DE; }
.opt-swatch--purple { background: #A98AD1; }
.opt-remove {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.opt-remove:hover { color: var(--color-danger); }
body.has-col-editor { overflow: hidden; }

/* ===== Bedingte Formatierung: Zell-Tint + Regel-Editor (Phase 2) ===== */
/* Tint-Klassen brauchen .data-table td davor, um das transparente Basis-
   .data-cell (Spezifitaet 0,2,1) zu ueberbieten (0,3,1). */
.data-table td .data-cell.cell-tint--gray   { background: #EEF1F5; color: #4A5A6E; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--red    { background: #FCE8E8; color: #B23A3A; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--orange { background: #FBEBDA; color: #A85B1B; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--yellow { background: #FAF3D6; color: #856A00; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--green  { background: #E6F4EA; color: #2E7D46; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--blue   { background: #E4EEF9; color: #1C74C9; border-radius: var(--radius); }
.data-table td .data-cell.cell-tint--purple { background: #EFE8F8; color: #6B4BA3; border-radius: var(--radius); }

/* Regel-Editor im Spalten-Editor */
.col-editor__rules { display: flex; flex-direction: column; gap: 8px; }
.col-editor__rules .hint-text { margin: 0; }
.rule-list { display: flex; flex-direction: column; gap: 8px; }
/* Scoped: gilt nur fuer die Regel-Zeilen des Spalten-Editors, NICHT fuer die
   gleichnamige Toggle-Zeile in den Einstellungen (.rule-row bei :5111). */
.rule-list .rule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-op {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 7px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.rule-value {
  flex: 1 1 110px;
  min-width: 90px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
}
.rule-value:focus, .rule-op:focus { outline: 2px solid var(--color-blue); outline-offset: -1px; }

/* ===== Formel-Spalte + Summen-Fußzeile + Formel-Editor (Phase 3) ===== */
/* Formel-Zelle: berechnete Anzeige (nicht editierbar). */
.data-table td .data-cell.data-formula {
  display: block;
  width: 100%;
  padding: 8px 10px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.data-table td .data-cell.data-formula:empty::before { content: "–"; color: var(--color-text-muted); }

/* Summen-Fußzeile */
.data-table__foot td {
  background: var(--color-panel);
  border-top: 2px solid var(--color-border);
  padding: 8px 10px;
  font-weight: 700;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
/* Aktionsspalte (+/×) auch in der Summenzeile leer/transparent — sonst steht rechts
   neben der letzten Spalte ein „Phantom"-Kasten mit Summen-Hintergrund. */
.data-table__foot td.data-table__actions {
  background: transparent;
  border-top: none;
}
.data-table__foot .foot-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }

/* Formel-Editor im Spalten-Editor */
.col-editor__formula { display: flex; flex-direction: column; gap: 8px; }
.col-editor__formula .hint-text { margin: 0; }
.formula-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  resize: vertical;
}
.formula-input:focus { outline: 2px solid var(--color-blue); outline-offset: -1px; }
.formula-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.formula-col-chip {
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-navy);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.formula-col-chip:hover { background: #E4EEF9; border-color: var(--color-blue); }

/* ===== Vorlagen-Galerie bei „neue Seite" (Phase 4) ===== */
.tmpl-gallery { margin-top: 22px; }
.tmpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.tmpl-card { position: relative; display: block; cursor: pointer; }
.tmpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tmpl-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.tmpl-card:hover .tmpl-card__body { border-color: var(--color-blue); }
.tmpl-card input:checked + .tmpl-card__body {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 1px var(--color-blue), var(--shadow-card);
  background: #F5FAFF;
}
.tmpl-card input:focus-visible + .tmpl-card__body { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.tmpl-card__icon { font-size: 22px; line-height: 1; }
.tmpl-card__title { font-weight: 700; color: var(--color-navy); font-size: 14px; }
.tmpl-card__desc { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.35; }

/* ===== Seite anpassen: Emoji-Schnellwahl + Punkt-Farbe (Seitenleiste) ===== */
.sb-overlay__label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin: 12px 0 6px; }
.sb-emoji-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; max-height: 176px; overflow-y: auto; padding-right: 2px; }
.sb-emoji {
  width: 32px; height: 32px;
  border: 1px solid var(--color-border);
  background: #fff; border-radius: var(--radius);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sb-emoji:hover { border-color: var(--color-blue); }
.sb-emoji.is-active { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); background: #F5FAFF; }
.sb-icon-input { max-width: 130px; }
.sb-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sb-color-swatch.is-active { border-color: var(--color-navy); box-shadow: 0 0 0 1px #fff inset; }
.sb-color-swatch--none { background: #fff; border: 1px dashed var(--color-border); position: relative; }
.sb-color-swatch--none::after { content: "\2205"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 13px; }
.sb-color-swatch--red { background: #E8776F; }
.sb-color-swatch--orange { background: #E0955A; }
.sb-color-swatch--yellow { background: #E7C65B; }
.sb-color-swatch--green { background: #6FC08D; }
.sb-color-swatch--blue { background: #5AA0E0; }
.sb-color-swatch--purple { background: #A98AD1; }
.sb-color-swatch--gray { background: #9DB6D2; }

/* Erklaerkasten-Icon als Emoji (Vorlagen) statt SVG. */
.explain-icon--emoji { font-size: 26px; line-height: 1; }
.explain-block [data-tpl-structure] { font-weight: 600; }

/* ===== Batch B: farbige Tags, Workspace-Punkt, Panel „Seite anpassen" ===== */
/* Tag-Chips in Tag-Farbe (auf hellem Panel). */
.chip.chip--red    { background: #FCE8E8; color: #B23A3A; }
.chip.chip--orange { background: #FBEBDA; color: #A85B1B; }
.chip.chip--yellow { background: #FAF3D6; color: #856A00; }
.chip.chip--green  { background: #E6F4EA; color: #2E7D46; }
.chip.chip--blue   { background: #E4EEF9; color: #1C74C9; }
.chip.chip--purple { background: #EFE8F8; color: #6B4BA3; }
.chip.chip--gray   { background: #EEF1F5; color: #4A5A6E; }

/* Workspace-Punkt (oben) einfaerbbar — Farben passend zur dunklen Sidebar. */
.workspace-switch__name[data-color="red"]::before    { background: #E8776F; }
.workspace-switch__name[data-color="orange"]::before  { background: #E0955A; }
.workspace-switch__name[data-color="yellow"]::before  { background: #E7C65B; }
.workspace-switch__name[data-color="green"]::before   { background: #6FC08D; }
.workspace-switch__name[data-color="blue"]::before    { background: #5AA0E0; }
.workspace-switch__name[data-color="purple"]::before  { background: #A98AD1; }
.workspace-switch__name[data-color="gray"]::before    { background: #9DB6D2; }

/* „Seite anpassen" im rechten Panel: Labels + kompaktere Emoji-Box. */
.panel-form__label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin: 10px 0 5px; }
.panel-appearance .sb-emoji-quick { max-height: 132px; }
.panel-appearance .sb-emoji { width: 28px; height: 28px; font-size: 15px; }
.tag-color-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }

/* ===== Suchbarer Emoji-Picker (Panel + Overlay) ===== */
.emoji-picker { display: flex; flex-direction: column; gap: 6px; }
.emoji-picker__search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
}
.emoji-picker__search:focus { outline: 2px solid var(--color-blue); outline-offset: -1px; }
.emoji-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 184px;
  overflow-y: auto;
  padding: 2px;
  align-content: flex-start;
}
.emoji-cell {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-cell:hover { background: var(--color-panel); border-color: var(--color-border); }
.emoji-cell.is-active { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); background: #F5FAFF; }
.emoji-cell--clear { color: var(--color-text-muted); font-size: 15px; }
.emoji-picker__none { color: var(--color-text-muted); font-size: 12px; padding: 6px 2px; }
.pn-icon-current { font-size: 16px; margin-left: 4px; }
.panel-appearance__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pn-saved { color: var(--color-success); font-size: 12px; font-weight: 600; }

/* ===== Startseite: Abstand, Typ-Statistik, Kategorien/Tags-Chips ===== */
/* Kein Gruss mehr — schlanke Ueberschrift, danach direkt der KI-Status. */
.dash-h1 { margin: 0 0 18px; }
.dash-lead { margin-bottom: 22px; }
.dash-typerow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dash-typechip { font-size: 12.5px; color: var(--color-text-muted); background: var(--color-panel); border-radius: 999px; padding: 3px 11px; }
.dash-typechip strong { color: var(--color-navy); }

.dash-taxo__group { margin-top: 12px; }
.dash-taxo__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.dash-taxo__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.taxo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--color-navy);
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 4px 11px; text-decoration: none;
  transition: border-color .12s, background .12s;
}
.taxo-chip:hover { border-color: var(--color-blue); }
.taxo-chip__n { font-size: 11px; color: var(--color-text-muted); background: #fff; border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.taxo-chip--lg { font-size: 15px; padding: 6px 14px; }
.taxo-chip--red    { background: #FCE8E8; color: #B23A3A; border-color: #F3C9C9; }
.taxo-chip--orange { background: #FBEBDA; color: #A85B1B; border-color: #EFD3B4; }
.taxo-chip--yellow { background: #FAF3D6; color: #856A00; border-color: #EDE0AC; }
.taxo-chip--green  { background: #E6F4EA; color: #2E7D46; border-color: #C6E5D0; }
.taxo-chip--blue   { background: #E4EEF9; color: #1C74C9; border-color: #C4DBF0; }
.taxo-chip--purple { background: #EFE8F8; color: #6B4BA3; border-color: #DBCBEF; }
.taxo-chip--gray   { background: #EEF1F5; color: #4A5A6E; border-color: #DCE3EC; }

/* Suchseite: Tag-/Kategorie-Filteransicht */
.search-filter-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-filter-kicker { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.search-filter-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 18px; }
.search-filter-count { font-weight: 600; color: var(--color-navy); }
.search-sort { display: inline-flex; align-items: center; gap: 8px; }
.search-sort__label { font-size: 12px; color: var(--color-text-muted); }
.search-sort__opt { font-size: 13px; color: var(--color-text-muted); text-decoration: none; padding: 2px 8px; border-radius: var(--radius); }
.search-sort__opt.is-active { color: #fff; background: var(--color-blue); }
.search-sort__opt:hover:not(.is-active) { background: var(--color-panel); }
.search-filter-clear { margin-left: auto; font-size: 13px; color: var(--color-blue); text-decoration: none; }
.search-filter-clear:hover { text-decoration: underline; }

/* ===== Startseite: Statistik-Kacheln + Schnellaktionen ===== */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
.dash-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-card);
}
.dash-tile__num { font-size: 28px; font-weight: 800; color: var(--color-navy); line-height: 1.1; }
.dash-tile__label { font-size: 12.5px; color: var(--color-text-muted); }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

/* ===== Startseite: Onboarding-Ausblenden + Wörter-Kachel ===== */
.dash-onboard { position: relative; }
.dash-onboard__x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--color-text-muted); font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: var(--radius);
}
.dash-onboard__x:hover { background: var(--color-panel); color: var(--color-text); }
.dash-wordstat {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #F5FAFF, #FDF6EE);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 16px; margin-bottom: 22px;
  color: var(--color-navy); font-size: 14px;
}
.dash-wordstat__icon { font-size: 18px; }
.dash-wordstat__text { font-weight: 500; }

/* Klickbare Kachel (z. B. Mitglieder -> Einladen) */
.dash-tile--link { text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.dash-tile--link:hover { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue), var(--shadow-card); }
.dash-tile__go { color: var(--color-blue); font-weight: 700; }

/* Umsortieren: Linie oben an der Zeile = "davor einfügen" */
.sidebar-nav__row.drop-before { box-shadow: inset 0 2px 0 0 var(--color-blue); border-radius: 0; }

/* Tipp-Box auf der Startseite */
.dash-tips__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-tips__list li { font-size: 13.5px; line-height: 1.4; padding-left: 18px; position: relative; color: var(--color-text); }
.dash-tips__list li::before { content: "→"; position: absolute; left: 0; color: var(--color-blue); }
.dash-tips__list a { color: var(--color-blue); text-decoration: none; }
.dash-tips__list a:hover { text-decoration: underline; }

/* ===== Workspace Connect: Sichtbarkeit des aktiven Zustands ===== */
@keyframes snori-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,185,104,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(63,185,104,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,104,0); }
}
.workspace-switch__name.is-ai-active::before {
  background: #3FB968 !important;
  animation: snori-pulse 1.9s ease-in-out infinite;
}
/* Statusleiste zwischen Workspace-Dropdown und „SEITEN" */
.ws-aistatus {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 6px 10px;
  border-radius: var(--radius);
  text-decoration: none; font-size: 12px; font-weight: 600;
  color: var(--color-sidebar-fg-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-sidebar-border);
}
.ws-aistatus:hover { background: var(--color-sidebar-active-bg); }
.ws-aistatus__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sidebar-dot-muted); flex-shrink: 0; }
/* Zwei-Zeilen-Variante (Sammelmodus): aktiver Workspace oben, andere darunter. */
.ws-aistatus--two { align-items: flex-start; }
.ws-aistatus--two .ws-aistatus__dot { margin-top: 4px; }
.ws-aistatus__text { min-width: 0; }
.ws-aistatus--two .ws-aistatus__text { display: flex; flex-direction: column; gap: 1px; }
.ws-aistatus__line1 { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-aistatus__line2 { font-weight: 500; font-size: 11px; opacity: 0.85; }
.ws-aistatus.is-on { color: #8FE3AB; }
.ws-aistatus.is-on .ws-aistatus__dot { background: #3FB968; animation: snori-pulse 1.9s ease-in-out infinite; }

/* ===== Startseite v2: Banner, Schnellstart, Statistik-Box, Spalten ===== */
.ki-banner {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 20px;
  border: 1px solid var(--color-border);
}
.ki-banner__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ki-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ki-banner__body strong { color: var(--color-navy); font-size: 15px; }
.ki-banner__sub { font-size: 13px; color: var(--color-text-muted); }
.ki-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Kurzlabel ist nur die mobile Pillen-Beschriftung — auf Desktop unsichtbar. */
.ki-banner__short { display: none; }
/* Mobil: Text darf nicht Wort für Wort umbrechen, weil die Buttons die Breite
   fressen -> Punkt+Text oben, Buttons darunter über die volle Breite. */
@media (max-width: 640px) {
  .ki-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    padding: 14px 16px;
    align-items: start;
  }
  .ki-banner__dot { margin-top: 5px; }
  /* Buttons unter den Text, volle Breite (Formulare sind hier nur Huellen). */
  .ki-banner__actions { grid-column: 2; flex-direction: column; align-items: stretch; margin-top: 4px; }
  .ki-banner__actions form { display: flex; }
  .ki-banner__actions .btn { flex: 1; text-align: center; }

  /* Verbundener Zustand ist der Dauerzustand -> mobil auf eine kompakte, einzeilige
     Pille schrumpfen: nur Punkt + Kurzlabel, kein erklaerender Text, keine grossen
     Knoepfe. Der „Trennen"-Ghost bleibt klein rechts erreichbar; der Anleitungs-
     Knopf entfaellt mobil (steht auch in der Hilfe). */
  .ki-banner--on {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 14px; margin-bottom: 14px;
  }
  .ki-banner--on .ki-banner__dot { margin-top: 0; }
  .ki-banner--on .ki-banner__long,
  .ki-banner--on .ki-banner__sub { display: none; }
  .ki-banner--on .ki-banner__short { display: block; font-size: 13.5px; white-space: nowrap; }
  .ki-banner--on .ki-banner__body { flex-direction: row; align-items: center; }
  .ki-banner--on .ki-banner__actions {
    grid-column: auto; flex-direction: row; align-items: center; margin-top: 0; flex-shrink: 0;
  }
  .ki-banner--on .ki-banner__actions .btn-secondary { display: none; }
  .ki-banner--on .ki-banner__actions .btn { flex: 0 0 auto; padding: 5px 12px; font-size: 12.5px; }
}
.ki-banner--on { background: #EAF7EF; border-color: #C6E5D0; }
.ki-banner--on .ki-banner__dot { background: #3FB968; animation: snori-pulse 1.9s ease-in-out infinite; }
.ki-banner--off { background: #FDF6EC; border-color: #EFD9B8; }
.ki-banner--off .ki-banner__dot { background: #C99A4E; }

/* „Was kann der Chat / Hilfebereich" — werblicher Block im nicht-aktivierten Zustand.
   Zentrale Komponente, von snori-chat.eta UND snori-helpdesk.eta genutzt (kein Copy-Paste). */
.svc-promo { margin: 0 0 22px; }
.svc-promo__lead { background: linear-gradient(135deg, var(--color-navy), #123f6e); color: #fff; border-radius: var(--radius-card); padding: 26px 28px; margin-bottom: 16px; }
.svc-promo__title { font-size: 22px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
.svc-promo__sub { font-size: 15px; line-height: 1.6; margin: 0; color: rgba(255,255,255,0.9); max-width: 62ch; }
.svc-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.svc-feat { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-card); }
.svc-feat__icon { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.svc-feat__title { font-weight: 700; color: var(--color-navy); font-size: 14.5px; margin: 0 0 4px; }
.svc-feat__text { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; counter-reset: svcstep; }
.svc-step { position: relative; background: var(--color-panel); border-radius: var(--radius-card); padding: 14px 16px 14px 46px; font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
.svc-step::before { counter-increment: svcstep; content: counter(svcstep); position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-blue); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.svc-combo { display: flex; gap: 12px; align-items: flex-start; background: #EAF7EF; border: 1px solid #C6E5D0; border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 16px; }
.svc-combo__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.svc-combo__title { font-weight: 700; color: var(--color-navy); font-size: 14.5px; margin: 0 0 4px; }
.svc-combo__text { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
/* Zwei Spalten unter dem Werbeblock: links buchen (Preis), rechts schon-aktiv.
   Genug Platz vorhanden; auf schmalem Schirm untereinander. */
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.svc-cols > .settings-card { margin: 0; }
@media (max-width: 760px) { .svc-cols { grid-template-columns: 1fr; } }
.svc-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; }
.svc-price__amount { font-size: 28px; font-weight: 700; color: var(--color-navy); }
.svc-price__per { font-size: 14px; color: var(--color-text-muted); }

.dash-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.quick-card {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 16px 18px; text-decoration: none; box-shadow: var(--shadow-card);
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.quick-card:hover { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue), var(--shadow-card); }
.quick-card__icon { font-size: 22px; line-height: 1; }
.quick-card__title { font-weight: 700; color: var(--color-navy); font-size: 15px; }
.quick-card__sub { font-size: 12.5px; color: var(--color-text-muted); }

.dash-statbox { margin-bottom: 20px; }
.dash-statbox .dash-tiles { margin: 0; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dash-statbox .dash-tile { box-shadow: none; background: var(--color-panel); border-color: transparent; }
.dash-statbox__word {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border);
  font-size: 13.5px; color: var(--color-navy);
}

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } }

/* ===== Freigabe-Aufrufe (Klick-Statistik-Box) ===== */
.dash-shares__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dash-shares__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.dash-shares__num { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; background: var(--color-panel); border-radius: 10px; }
.dash-shares__n { font-size: 22px; font-weight: 700; color: var(--color-navy); line-height: 1.1; }
.dash-shares__lbl { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }
.dash-shares__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-shares__item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.dash-shares__item:first-child { border-top: none; }
.dash-shares__name { font-size: 13.5px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dash-shares__stat { font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.dash-shares__stat strong { color: var(--color-navy); }
.dash-shares__last { color: var(--color-text-muted); }
.dash-shares__foot { margin-top: 12px; }
.dash-shares__foot a { color: var(--color-blue); text-decoration: none; font-size: 13px; }
.dash-shares__foot a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .dash-shares__nums { gap: 6px; }
  .dash-shares__num { padding: 8px 8px; }
  .dash-shares__n { font-size: 18px; }
  .dash-shares__lbl { font-size: 10.5px; }
}

/* ===== Steuerung — abgesetzte Sektion unter dem Arbeitsbereich ===== */
.dash-ctrl { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.dash-ctrl__title { font-size: 15px; font-weight: 700; color: var(--color-navy); margin: 0; letter-spacing: .01em; }
.dash-ctrl__sub { font-size: 13px; color: var(--color-text-muted); margin: 3px 0 16px; }
.dash-ctrl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }

/* ===== Neue Seite: geführter 2-Schritt-Flow ===== */
.wiz-q { font-size: 17px; color: var(--color-navy); margin: 0 0 14px; }
.wiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .wiz-choices { grid-template-columns: 1fr; } }
.wiz-choice {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.wiz-choice:hover { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue), var(--shadow-card); }
.wiz-choice__icon { font-size: 26px; line-height: 1; }
.wiz-choice__title { font-weight: 700; color: var(--color-navy); font-size: 15px; }
.wiz-choice__sub { font-size: 12.5px; color: var(--color-text-muted); }
.wiz-back {
  border: none; background: transparent; color: var(--color-blue); cursor: pointer;
  font-size: 13px; padding: 0 0 12px; font-weight: 600;
}
.wiz-back:hover { text-decoration: underline; }
.wiz-group-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin: 16px 0 8px; }
.wiz-group-label:first-of-type { margin-top: 6px; }
.wiz-picked { font-weight: 600; color: var(--color-navy); margin: 0 0 14px; }

/* Statusleiste als Button (OFF-Zustand -> verbindet die KI) */
.ws-aistatus-form { margin: 0 0 10px; }
button.ws-aistatus { width: 100%; margin: 0; font-family: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }

/* ── Oeffentlich geteilte Seite (Phase 10.3) ─────────────────────────────────
   Eigene, schlichte Leseansicht OHNE App-Rahmen: Marke oben, Inhalt in
   angenehmer Lesebreite, Registrierungs-Hinweis unten. */
.pub-body {
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
}
/* Bei begrenzter Breite (boxed) zentriert die Shell die GANZE Seite — Kopf,
   Inhalt, Footer und die Trennlinie. Bei voller Breite bleibt alles links. */
.pub-shell--w1200 { max-width: 1200px; margin: 0 auto; }
.pub-shell--w1000 { max-width: 1000px; margin: 0 auto; }
.pub-shell--w800  { max-width: 800px;  margin: 0 auto; }
.pub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--color-border);
  /* Kopfzeile bleibt beim Scrollen oben stehen (Andreas 2026-07-28). Eigener
     Hintergrund, damit der Inhalt nicht durchscheint. */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
}
.pub-head__brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.pub-head__actions { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Hamburger IN der Kopfzeile: normale Fluss-Position (nicht schwebend), rechts
   neben dem CTA. Als Pille mit vorangestelltem Wort „Menü" (nur Desktop, s.u.),
   damit der Knopf eindeutig ist. */
/* Spezifitaet .pub-burger.pub-burger--inline, damit die Zeilen-Ausrichtung die
   spaeter im Quelltext stehende Basis .pub-burger{flex-direction:column} schlaegt. */
.pub-burger.pub-burger--inline {
  position: static; margin-left: 0;
  width: auto; flex-direction: row; gap: 8px; padding: 0 14px;
}
.pub-burger__lines { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pub-burger__word { font-size: 14px; font-weight: 600; color: var(--color-navy); line-height: 1; }
.pub-brand { display: inline-flex; align-items: center; border: none; }
.pub-brand__logo { height: 26px; width: auto; display: block; }
/* Inhalt der Freigabe: standardmaessig VOLLE Breite, links ausgerichtet — kein
   kuenstlicher Schmal-Cap (Andreas wiederkehrend: „wir haben Platz"). Der Kunde
   kann die Seite optional in eine Box zwingen (1200/1000/800), dann ebenfalls
   links buendig (wie im Editor), nicht zentriert. */
/* Breite/Zentrierung macht jetzt .pub-shell; hier nur die Innenraender, buendig
   mit Kopf und Footer (je 32px horizontal). */
/* E-Book-Leseansicht (2026-07-28): ruhigere, groessere Typografie, klarer Hero,
   Zitate als Info-Karten, gerahmte Bilder — damit sich eine geteilte Seite wie ein
   hochwertiges Dokument liest und nicht wie eine Textwand. */
.pub-main { margin: 0; padding: 52px 32px 8px; }
.pub-doc__title {
  font-size: 40px; line-height: 1.13; font-weight: 800; color: var(--color-navy);
  letter-spacing: -0.015em; margin: 0 0 22px;
}
.pub-doc__icon { margin-right: 8px; }
.pub-doc__meta { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 24px; }

/* „Eine Ebene hoeher"-Link ueber der Ueberschrift. */
.pub-up {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  font-size: 14px; font-weight: 600; color: var(--color-text-muted); text-decoration: none;
}
.pub-up:hover { color: var(--pub-accent); }
.pub-up svg { flex: 0 0 auto; }

/* E-Book-Pager am Seitenende: vorige Seite links, naechste rechts. */
.pub-pager {
  display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap;
  margin: 48px 0 8px; padding-top: 24px; border-top: 1px solid var(--color-border);
}
.pub-pager__spacer { flex: 1 1 0; }
.pub-pager__link {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 10px;
  text-decoration: none; background: #fff; transition: border-color .12s ease, background .12s ease;
}
.pub-pager__link:hover { border-color: var(--pub-accent); background: color-mix(in srgb, var(--pub-accent) 5%, #fff); }
.pub-pager__next { text-align: right; align-items: flex-end; }
.pub-pager__dir { font-size: 12.5px; color: var(--color-text-muted); }
.pub-pager__title {
  font-size: 15.5px; font-weight: 600; color: var(--color-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.pub-doc__body { font-size: 18px; line-height: 1.75; color: #22303f; }
.pub-doc__body h2 {
  font-size: 1.7rem; line-height: 1.24; font-weight: 700; color: var(--color-navy);
  letter-spacing: -0.01em; margin: 48px 0 14px;
}
.pub-doc__body h3 { font-size: 1.26rem; line-height: 1.3; font-weight: 700; color: var(--color-navy); margin: 34px 0 10px; }
.pub-doc__body h4 { font-size: 1.06rem; font-weight: 700; color: var(--color-navy); margin: 24px 0 6px; }
.pub-doc__body p { margin: 0 0 18px; }
.pub-doc__body ul, .pub-doc__body ol { margin: 0 0 18px; padding-left: 24px; }
.pub-doc__body li { margin: 0 0 9px; }
.pub-doc__body li::marker { color: var(--pub-accent); }
.pub-doc__body li.pub-check { list-style: none; margin-left: -24px; }
.pub-doc__body li.pub-check.is-done { color: var(--color-text-muted); text-decoration: line-through; }
.pub-doc__body a { font-weight: 500; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pub-doc__body blockquote {
  margin: 24px 0; padding: 18px 22px;
  border: 1px solid var(--color-border); border-left: 4px solid var(--pub-accent);
  border-radius: 12px; background: #F7FAFD;
  color: var(--color-navy); font-style: normal; font-size: 17px; line-height: 1.62;
  box-shadow: 0 2px 12px rgba(11, 46, 82, 0.05);
}
.pub-doc__body blockquote > :last-child { margin-bottom: 0; }
.pub-doc__body blockquote strong { color: var(--color-navy); }
.pub-doc__body hr.pub-hr, .pub-hr {
  border: none; border-top: 1px solid var(--color-border); margin: 42px 0;
}
/* Mehrspalten auf geteilten Seiten — Editor rendert es via BlockNote-CSS gleich. */
.pub-doc__body .pub-columns { display: flex; gap: 22px; margin: 0 0 18px; align-items: flex-start; }
.pub-doc__body .pub-column { flex: 1 1 0; min-width: 0; }
.pub-doc__body .pub-column > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .pub-doc__body .pub-columns { flex-direction: column; gap: 6px; } }
.pub-doc__body img { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 8px 28px rgba(11, 46, 82, 0.07); }
.pub-doc__body figure { margin: 30px 0; text-align: center; }
.pub-doc__body figcaption { font-size: 13px; color: var(--color-text-muted); margin-top: 10px; text-align: center; }
.pub-code {
  background: #F2F7FD; border: 1px solid #D5E3F2; border-radius: 8px;
  padding: 14px 16px; font-size: 13.5px; margin: 0 0 16px;
  /* Lange Zeilen am Rand umbrechen statt rechts rauslaufen zu lassen; echte
     Zeilenumbrüche bleiben erhalten (pre-wrap). Der Kopier-Text bleibt unveraendert. */
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.pub-code code { white-space: inherit; }
/* Kopier-Knopf oben rechts über dem Code-Block (pub-code-copy.js legt den
   Wrapper an; der Knopf sitzt darauf, nicht im scrollenden <pre>). */
.pub-code-wrap { position: relative; }
.pub-code-wrap .pub-code { margin: 0 0 16px; }
.pub-code__copy {
  position: absolute; top: 8px; right: 8px;
  appearance: none; border: 1px solid #C3D6EC; border-radius: 6px;
  background: rgba(255, 255, 255, 0.92); color: var(--color-navy);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.pub-code-wrap:hover .pub-code__copy,
.pub-code__copy:focus-visible { opacity: 1; }
.pub-code__copy:hover { background: #fff; border-color: var(--color-blue); }
.pub-code__copy.is-copied { color: #2E7D46; border-color: #C6E5D0; background: #EAF7EF; opacity: 1; }
/* Touch-Geräte haben kein Hover -> Knopf dauerhaft sichtbar. */
@media (hover: none) { .pub-code__copy { opacity: 1; } }
.pub-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.pub-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pub-table th, .pub-table td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; }
.pub-table th { background: var(--color-panel); font-weight: 700; color: var(--color-navy); }
.pub-sub { margin-top: 32px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.pub-sub__title { font-size: 13px; font-weight: 700; color: var(--color-navy); margin: 0 0 8px; }
.pub-sub__list { list-style: none; margin: 0; padding: 0; }
.pub-sub__list li { margin: 0 0 6px; }
.pub-foot {
  margin: 40px 0 0; padding: 24px 32px;
  border-top: 1px solid var(--color-border); text-align: left;
}
/* „Zuletzt geaendert" steht jetzt hier unten, ueber dem Claim (Andreas 2026-07-23). */
.pub-foot__meta { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 12px; }
.pub-foot__pitch { font-size: 14px; color: var(--color-text-muted); margin: 0 0 14px; }
.pub-foot__legal { font-size: 12.5px; color: var(--color-text-muted); margin-top: 16px; }
/* Fußzeilen-Links einheitlich OHNE Unterstrich (Andreas): Datenschutz war als <a>
   standardmäßig unterstrichen, Impressum/Problem melden (Labels) nicht. */
/* Datenschutz-Link generell OHNE Unterstrich (Andreas, wiederkehrend). Der Unterstrich
   war KEIN text-decoration, sondern der GLOBALE `a{border-bottom:1px solid …}` — der
   muss hier explizit zurueckgesetzt werden. Impressum/Problem melden sind Labels. */
.pub-foot__legal a { text-decoration: none; border-bottom: none; color: var(--pub-accent); cursor: pointer; }
.pub-foot__legal a:hover { text-decoration: none; border-bottom: none; }

/* Öffentliche Freigabe-Seite mobil (Andreas: „nicht mobilfähig"): der Inhalt selbst
   ist schon responsive (Bilder max-width, Tabellen/Code in Scroll-Containern), aber
   Kopf/Inhalt/Fuß hatten feste 32px-Seitenränder und lange URLs/Wörter konnten die
   Seite horizontal aufreißen. Hier die Ränder auf schmalen Schirmen verkleinern und
   Umbruch erzwingen, damit nie horizontal gescrollt wird. */
.pub-body { overflow-x: clip; }
.pub-doc__body { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pub-head { padding: 12px 16px; gap: 10px; }
  .pub-main { padding: 30px 18px 8px; }
  .pub-foot { padding: 20px 16px; margin-top: 28px; }
  .pub-burgerbar { padding: 0 16px; top: 12px; }
  .pub-doc__title { font-size: 28px; margin-bottom: 16px; }
  .pub-doc__meta { margin-bottom: 18px; }
  .pub-doc__body { font-size: 16.5px; line-height: 1.7; }
  .pub-doc__body h2 { font-size: 1.42rem; margin: 34px 0 12px; }
  .pub-doc__body h3 { font-size: 1.16rem; margin: 26px 0 8px; }
  .pub-head__cta { font-size: 13px; padding: 6px 10px; }
  .pub-brand__logo { height: 22px; }
  /* Mobil reicht der reine Hamburger — Wort weg, Knopf wieder kompakt-rund. */
  .pub-burger__word { display: none; }
  .pub-burger.pub-burger--inline { flex-direction: column; width: 42px; padding: 0; gap: 4px; }
  /* Ohne Kopfzeile schwebt der Burger oben — dem ersten Inhalt etwas Luft geben. */
  .pub-shell > .pub-main:first-child { padding-top: 30px; }
}

/* Akzentfarbe der Freigabe-Seite: faerbt Inhalts-Links + Buttons. Standard blau. */
.pub-body { --pub-accent: var(--pub-accent-blue); }
.pub-accent--blue   { --pub-accent: var(--pub-accent-blue); }
.pub-accent--red    { --pub-accent: var(--pub-accent-red); }
.pub-accent--green  { --pub-accent: var(--pub-accent-green); }
.pub-accent--amber  { --pub-accent: var(--pub-accent-amber); }
.pub-accent--violet { --pub-accent: var(--pub-accent-violet); }
.pub-accent--slate  { --pub-accent: var(--pub-accent-slate); }
.pub-doc__body a { color: var(--pub-accent); }
.pub-sub__list a { color: var(--pub-accent); }
.pub-body .btn { background: var(--pub-accent); border-color: var(--pub-accent); color: #fff; }
.pub-body .btn:hover { filter: brightness(0.94); }

/* ── Öffentliche Seite: Hamburger-Menü (Drawer rechts) + Melde-Overlay ──────────
   Ganz ohne JavaScript (CSP): versteckte Checkboxen als Schalter (:checked),
   Labels als Auslöser. Alle Toggle-Ziele sind Geschwister der Checkboxen. */
.pub-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
/* Hamburger fest oben, aber bündig mit dem RECHTEN Rand der Inhaltsspalte (nicht
   am Viewport-Rand). Die Leiste trägt dieselbe Breiten-/Zentrier-Klasse wie die
   Shell (pub-shell--wXXX) + denselben Innenrand (32px) wie Kopf/Inhalt/Footer;
   der Knopf wird per margin-left:auto ans rechte Ende geschoben. So sitzt sein
   rechtes Ende auf einer Linie mit Kopfzeile und Trennlinie — auch geboxt. */
.pub-burgerbar {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 40;
  padding: 0 32px; display: flex; pointer-events: none;
}
.pub-burger {
  margin-left: auto; pointer-events: auto;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
}
.pub-burger__bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-navy); }
.pub-drawer__backdrop, .pub-report__backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(11, 46, 82, 0.35); display: none;
}
#pubNav:checked ~ .pub-drawer__backdrop,
#pubReport:checked ~ .pub-report__backdrop { display: block; }
.pub-drawer {
  position: fixed; top: 0; right: 0; z-index: 51; height: 100%; width: min(340px, 86vw);
  background: #fff; border-left: 1px solid var(--color-border); box-shadow: -8px 0 24px rgba(11,46,82,0.10);
  transform: translateX(100%); transition: transform 0.22s ease; overflow-y: auto;
  padding: 16px 18px; display: flex; flex-direction: column;
}
#pubNav:checked ~ .pub-drawer { transform: translateX(0); }
.pub-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pub-drawer__title { font-size: 14px; font-weight: 700; color: var(--color-navy); }
.pub-drawer__close { font-size: 24px; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 4px; }
.pub-drawer__links { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pub-drawer__links a { font-size: 13px; color: var(--pub-accent); text-decoration: none; border-bottom: none; }
.pub-drawer__links a:hover { text-decoration: none; border-bottom: none; }
.pub-drawer__report { font-size: 13px; color: var(--color-text-muted); cursor: pointer; margin-left: auto; }
.pub-drawer__report:hover { color: var(--color-navy); text-decoration: underline; }
/* Suche im Freigabe-Umfang: Feld im Drawer + größeres Feld auf der Ergebnisseite. */
/* Klassische Lupe in der Kopfzeile (zwischen „kostenlos testen" und Hamburger) —
   fuehrt auf die Suchseite der Freigabe. Im Hamburger-Menue selbst keine Lupe. */
.pub-head__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
  color: var(--color-text); background: color-mix(in srgb, var(--pub-accent) 8%, #fff);
  border: 1px solid var(--color-border);
}
.pub-head__search:hover { border-color: var(--pub-accent); color: var(--pub-accent); }
/* Im schwebenden Burgerbar (ohne Kopfzeile): Lupe + Hamburger rechts gruppieren. */
.pub-burgerbar .pub-head__search { pointer-events: auto; margin-left: auto; margin-right: 8px; }
.pub-search { display: flex; gap: 6px; margin: 4px 0 12px; }
.pub-search__input {
  flex: 1 1 auto; min-width: 0; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: 8px; background: #fff; color: var(--color-text);
}
.pub-search__input:focus { outline: none; border-color: var(--pub-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pub-accent) 18%, transparent); }
.pub-search__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; border: 1px solid var(--pub-accent); border-radius: 8px;
  background: var(--pub-accent); color: #fff; cursor: pointer;
}
.pub-search__btn:hover { filter: brightness(0.94); }
.pub-search--page { max-width: 560px; margin: 8px 0 22px; }
.pub-search--page .pub-search__input { font-size: 16px; padding: 11px 14px; }
.pub-search--page .pub-search__btn { width: 46px; }
.pub-search__count { font-size: 13px; color: var(--color-text-muted); margin: 0 0 14px; }
.pub-search__list { list-style: none; margin: 0; padding: 0; }
.pub-search__item { padding: 14px 0; border-top: 1px solid var(--color-border); }
.pub-search__item:first-child { border-top: none; }
.pub-search__link { font-size: 16px; font-weight: 600; color: var(--pub-accent); text-decoration: none; }
.pub-search__link:hover { text-decoration: underline; }
.pub-search__icon { margin-right: 6px; }
.pub-search__snippet { font-size: 14px; color: var(--color-text-muted); margin: 4px 0 0; line-height: 1.5; }
.pub-search__snippet mark { background: color-mix(in srgb, var(--pub-accent) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.pub-search__empty { font-size: 15px; color: var(--color-text-muted); margin: 8px 0; }

/* Navigationsbaum (alle Ebenen). Leichter Einzug pro Ebene; Zweige aufklappbar. */
.pub-nav__list, .pub-nav__sub { list-style: none; margin: 0; padding: 0; }
.pub-nav__sub { padding-left: 12px; border-left: 1px solid var(--color-border); margin-left: 4px; }
.pub-nav__item { margin: 1px 0; }
.pub-nav__link { display: block; padding: 5px 6px; border-radius: 5px; color: var(--color-text); text-decoration: none; font-size: 14px; }
.pub-nav__link:hover { background: #F1F6FC; }
.pub-nav__link--active { background: #EAF2FB; font-weight: 600; color: var(--color-navy); }
.pub-nav__sum { list-style: none; display: flex; align-items: center; gap: 2px; cursor: default; }
.pub-nav__sum::-webkit-details-marker { display: none; }
/* Klar klickbarer Pfeil: klappt NUR die Unterseiten auf/zu (navigiert nicht). */
.pub-nav__caret {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 24px; font-size: 12px; line-height: 1; color: var(--color-text-muted);
  border-radius: 5px; cursor: pointer; transition: transform 0.15s ease;
}
.pub-nav__caret:hover { background: #F1F6FC; color: var(--pub-accent); }
.pub-nav__item--branch > details[open] > .pub-nav__sum .pub-nav__caret { transform: rotate(90deg); }
.pub-nav__sum .pub-nav__link { flex: 1 1 auto; }

/* Melde-Overlay (zentriert) */
.pub-report { position: fixed; inset: 0; z-index: 52; display: none; align-items: center; justify-content: center; padding: 20px; }
#pubReport:checked ~ .pub-report { display: flex; }
.pub-report__card {
  position: relative; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 24px 26px;
}
.pub-report__x { position: absolute; top: 10px; right: 14px; font-size: 24px; line-height: 1; color: var(--color-text-muted); cursor: pointer; }
.pub-report__title { font-size: 18px; font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.pub-report__intro { font-size: 14px; color: var(--color-text-muted); margin: 0 0 16px; }
.pub-report__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lead-Formulare (öffentliches Ausfüllen, Phase 1b). Fokussierte Eingabekarte,
   zentriert — eine Ausnahme von „nicht kappen": ein Formular ist bewusst schmal. */
.lead-body { --pub-accent: var(--pub-accent-blue); background: var(--color-bg); min-height: 100vh; }
.lead-shell { max-width: 560px; margin: 0 auto; padding: 32px 20px 48px; }
.lead-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px 26px;
}
.lead-title { font-size: 22px; font-weight: 800; color: var(--color-navy); margin: 0 0 18px; }
.lead-form .field { margin-bottom: 16px; }
.lead-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lead-check input { margin-top: 3px; }
.field--error input, .field--error select { border-color: var(--pub-accent-red, #c0392b); }
.lead-field-err { margin: 4px 0 0; font-size: 13px; }
.lead-error-summary { margin: 0 0 16px; }
/* Formular-Block (Editor „+") — Karte im Editor (Phase 5). Ruhig, contentEditable=false. */
.lf-embed-edit {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface-muted, #f7f8fa); padding: 14px 16px; margin: 6px 0;
}
.lf-embed-edit__icon { font-size: 20px; line-height: 1.4; }
.lf-embed-edit__body { flex: 1 1 auto; min-width: 0; }
.lf-embed-edit__body strong { display: block; color: var(--color-navy); margin-bottom: 6px; }
.lf-embed-edit__input, .lf-embed-edit__select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; background: #fff;
}
.lf-embed-edit__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-muted); }
/* Breiten-Auswahl im Editor-Block. */
.lf-embed-edit__widths { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.lf-embed-edit__wlabel { font-size: 12px; color: var(--color-text-muted); }
.lf-embed-edit__wbtn {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--color-border);
  border-radius: 999px; background: #fff; color: var(--color-navy); cursor: pointer;
}
.lf-embed-edit__wbtn.is-active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.lf-embed-edit__color { width: 32px; height: 26px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; cursor: pointer; }
.lf-embed-edit__done { margin-top: 12px; align-self: flex-start; }
/* Formular-Anzeige im Editor mit Zahnrad-Umschalter (Hover, oben rechts). */
.lf-embed-wrap { position: relative; }
.lf-embed__gear {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--color-border);
  background: #fff; color: var(--color-navy); font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s ease; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.lf-embed-wrap:hover .lf-embed__gear, .lf-embed__gear:focus-visible { opacity: 1; }
/* Eingebettetes Formular (Lese-Ansicht + geteilte Seite). Breite begrenzt (nicht
   ultrabreit — Andreas), als Karte abgesetzt. Breite über Modifier einstellbar. */
.lf-embed {
  border: 1px solid var(--color-border); border-radius: 14px;
  padding: 20px 22px; margin: 22px 0; background: var(--color-surface, #fff);
  width: 100%; box-sizing: border-box;
}
.lf-embed--narrow { max-width: 420px; }
.lf-embed--medium { max-width: 620px; }
.lf-embed--wide   { max-width: 100%; }
/* Fremd-Host (go.snori.de): Formular ersetzt durch Knopf zur geschuetzten Seite. */
.lf-linkthrough { text-align: center; }
.lf-linkthrough .btn { background: var(--pub-accent); border-color: var(--pub-accent); color: #fff; }
.lf-linkthrough .hint-text { margin-top: 10px; }
.lf-embed .lead-title { font-size: 19px; margin-bottom: 14px; }
.lf-embed .lead-form .field { margin-bottom: 14px; }
.lf-embed__done { margin: 0; font-weight: 600; color: var(--color-navy); }
.lf-embed--gone { color: var(--color-text-muted); font-style: italic; }
.lead-result { text-align: center; padding: 8px 0 4px; }
.lead-result .lead-title { margin-bottom: 10px; }
.lead-foot {
  text-align: center; margin-top: 18px; font-size: 13px; color: var(--color-text-muted);
}
.lead-foot a { color: var(--pub-accent); text-decoration: none; }
.pub-report-note { padding: 10px 14px; border-radius: var(--radius-card); font-size: 14px; margin: 0 0 18px; }
.pub-report-note--ok { background: #E9F7EF; color: #1B7A43; }
.pub-report-note--err { background: #FCECEC; color: #B3261E; }

/* Impressum-&-Haftung-Overlay: gleiches Modal wie „Problem melden" (Karte via
   .pub-report__card), eigener Schalter #pubLegal. */
.pub-legal { position: fixed; inset: 0; z-index: 52; display: none; align-items: center; justify-content: center; padding: 20px; }
#pubLegal:checked ~ .pub-legal { display: flex; }
.pub-legal__backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(11,46,82,0.35); display: none; }
#pubLegal:checked ~ .pub-legal__backdrop { display: block; }
/* „Problem melden" IM Impressum-Overlay: öffnet das Melde-Overlay und blendet das
   Impressum aus, damit sich beide nicht stapeln (reines CSS, kein JS). Schließt man
   das Melden ohne Absenden, ist das Impressum wieder da. */
#pubReport:checked ~ .pub-legal,
#pubReport:checked ~ .pub-legal__backdrop { display: none; }
.pub-legal__h { font-size: 14px; font-weight: 700; color: var(--color-navy); margin: 4px 0 6px; }
.pub-legal__text { font-size: 13.5px; color: var(--color-text); line-height: 1.55; margin: 0 0 12px; }

/* Impressum/Melden als anklickbare Labels (Footer + Drawer) im Link-Look. */
.pub-foot__link { cursor: pointer; color: var(--pub-accent); }
.pub-foot__link:hover { text-decoration: underline; }
.pub-drawer__legal { font-size: 13px; color: var(--pub-accent); cursor: pointer; }
.pub-drawer__legal:hover { text-decoration: underline; }

/* Passwort-Gate / ungueltiger Link */
.pub-gate { max-width: 420px; margin: 48px auto; text-align: center; }
.pub-gate__title { font-size: 22px; font-weight: 700; color: var(--color-navy); margin: 0 0 8px; }
.pub-gate__hint { color: var(--color-text-muted); margin: 0 0 18px; }
.pub-gate__err { color: var(--color-danger); margin: 0 0 12px; }
.pub-gate__form { display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* Freigabe-Links im Seiten-Panel */
.share-link-new { margin-bottom: 12px; }
.share-link-new__label { font-size: 12px; font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.share-link-list { list-style: none; margin: 6px 0 0; padding: 0; }
.share-link-list__item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #D5E3F2;
}
.share-link-list__main { flex: 1 1 auto; min-width: 0; }
.share-link-list__meta { font-size: 12px; color: var(--color-text-muted); display: block; }
.share-link-list__name { font-size: 13px; font-weight: 600; color: var(--color-navy); display: block; margin-bottom: 1px; }
.share-link-list__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Overlay direkt nach „Link erzeugen": URL + Rechte + Kopieren. */
/* =========================================================================
   KANONISCHES OVERLAY — VERBINDLICHER STANDARD (2026-07-29).
   ALLE Dialog-Overlays der App nutzen ausschliesslich diese Klassen. Kein neues
   Overlay bekommt eigene Backdrop-/Card-/Button-Stile. Referenz-Look: Loesch-PIN.
     .ov-backdrop            fixierter, zentrierter, abgedunkelter Hintergrund
     .ov-backdrop.ov-toggle  vorgerendert versteckt -> per JS .is-open sichtbar
     .ov-card                weisse Karte (max 420px); --narrow (360, zentriert) / --wide (560)
     .ov-title / .ov-text / .ov-label / .ov-input / .ov-actions (--center)
   ========================================================================= */
.ov-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 46, 82, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ov-backdrop.ov-toggle { display: none; }
.ov-backdrop.ov-toggle.is-open { display: flex; }
.ov-card {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: var(--radius-card);
  box-shadow: var(--shadow-login); padding: 24px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.ov-card--narrow { max-width: 360px; text-align: center; }
.ov-card--wide { max-width: 560px; }

/* Versions-Overlay (page-view Metadaten): CSS-only via versteckte Checkbox. Panel
   zeigt nur die letzten 3, „Alle anzeigen" oeffnet die volle Liste im Overlay. */
.version-toggle-cb { display: none; }
.version-more { margin-top: 8px; }
#versionsToggle:checked ~ #versionsOverlay.ov-toggle { display: flex; }
.version-ov__hit { position: absolute; inset: 0; cursor: default; }
.version-list--scroll { max-height: 60vh; overflow-y: auto; margin: 4px 0 0; }

/* Löschschutz-Bestaetigungsseite + Status. */
.page-narrow { max-width: 520px; margin: 0 auto; padding: 8px 0; }
.save-note--error { color: var(--pub-accent-red, #c0392b); }
.hint-text--locked { color: var(--pub-accent-green, #2e9e5b); font-weight: 600; }
.ov-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--color-navy); }
.ov-text { margin: 0 0 12px; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
.ov-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin: 12px 0 6px; }
.ov-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-family: var(--font-sans); font-size: 16px;
  color: var(--color-text); background: #fff; box-sizing: border-box;
}
.ov-input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(28, 116, 201, 0.12); }
.ov-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.ov-actions--center { justify-content: center; }
/* Felder in Overlays bekommen einheitlich Abstand nach unten (Dropdown/Eingabe ->
   folgender Text/Inhalt). Overlay-Dropdowns nutzen die EIGENE Select-Komponente
   (.ci-select-wrap + .ci-select mit CSS-Pfeil), nie den nativen Browser-Select. */
.ov-card .ov-input, .ov-card .ci-select-wrap { margin-bottom: 12px; }

.share-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.share-modal.is-open { display: block; }
.share-modal__backdrop { position: absolute; inset: 0; background: rgba(11,46,82,0.45); }
.share-modal__card {
  position: relative; z-index: 1; width: min(92vw, 460px);
  margin: 12vh auto 0; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-login); padding: 22px 22px 20px;
}
.share-modal__title { font-size: 17px; font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.share-modal__rights { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 14px; }
.share-modal__field { display: flex; align-items: stretch; gap: 0; margin: 0 0 8px; }
.share-modal__url {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 12.5px;
  padding: 9px 10px; border: 1px solid var(--color-border); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--color-panel); color: var(--color-text);
}
.share-modal__field .copy-field__btn {
  flex-shrink: 0; padding: 0 14px; border: 1px solid var(--color-blue);
  background: var(--color-blue); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.share-modal__ok { margin-top: 14px; }
/* Rechte-Uebersicht in der Mitgliederliste (Phase 10.1). */
.member-list__shares { font-size: 12px; color: var(--color-text-muted); }
/* Sammelmodus der KI (Phase 10.2): GELB statt gruen — die KI greift dann nicht
   nur auf den einen verbundenen Workspace zu. Bewusst auffaellig. */
.ws-aistatus.is-all { color: #F2C14E; }
.ws-aistatus.is-all .ws-aistatus__dot {
  background: #F2C14E;
  animation: snori-pulse 1.9s ease-in-out infinite;
}
/* Warnhinweis beim KI-Sammelmodus (Phase 10.2). */
.ai-scope-warn { color: #9A6B12; margin-top: 10px; }
/* Rechte-Legende: alle Stufen dauerhaft erklaert (nicht erst nach Auswahl). */
.access-legend {
  list-style: none; margin: 8px 0 0; padding: 10px 12px;
  background: var(--color-panel); border-radius: var(--radius);
  font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5;
}
.access-legend li { margin: 0 0 4px; }
.access-legend li:last-child { margin-bottom: 0; }
.access-legend strong { color: var(--color-navy); }

/* --- Phase B/D: Verweise, Export, Aktivitaet, Druck --- */
.panel-links { list-style: none; margin: 2px 0 8px; padding: 0; }
.panel-links li { margin: 2px 0; font-size: 13px; }
.panel-links a { color: var(--color-blue); }
.panel-links__label { font-size: 11.5px; color: var(--color-text-muted); margin: 6px 0 2px; }
.panel-export { display: flex; gap: 8px; flex-wrap: wrap; }

.activity-list { list-style: none; margin: 16px 0 0; padding: 0; }
.activity-list__item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.activity-list__who { font-weight: 600; min-width: 90px; color: var(--color-navy); }
.activity-list__title { color: var(--color-blue); flex: 1 1 auto; min-width: 0; }
.activity-list__label { font-size: 12px; color: var(--color-text-muted); }
.activity-list__on { font-size: 12.5px; color: var(--color-text-muted); }

/* Drucken / „Als PDF speichern": nur den Seiteninhalt, ohne App-Rahmen. */
@media print {
  .app-sidebar, .app-topbar, .app-searchbar, .app-backdrop, .page-panel,
  .panel-rail-toggle, .app-account, .app-bell, .editor-toolbar, .bn-toolbar { display: none !important; }
  .app-content, .app-content__inner, .app-content__inner--full, .page-layout, .page-main {
    display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important;
  }
  body { background: #fff !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* Phase E: Branding geteilter Seiten */
.branding-preview { margin: 8px 0; }
.branding-preview img { max-height: 60px; max-width: 240px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 6px; }
/* Akzentfarben-Wähler (Branding). Radios versteckt, farbiger Punkt als Ziel. */
/* Speicher je Workspace (DEC-115): eine abgesetzte Kachel pro eigenem Workspace. */
.storage-ws { padding: 12px 0; border-top: 1px solid var(--color-border); }
.storage-ws:first-of-type { border-top: none; padding-top: 4px; }
.storage-ws__name { font-size: 14px; font-weight: 700; color: var(--color-navy); margin: 0 0 4px; }

/* Zubuch-Zeile: Workspace wählen, Verbrauch, dazubuchen — nebeneinander (DEC-128). */
.storage-book {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  margin: 4px 0 8px;
}
.storage-book__pick { margin: 0; min-width: 220px; }
.storage-book__usage { margin: 0 0 8px; flex: 1 1 180px; }
.storage-book__go { flex: 0 0 auto; margin-left: auto; }
.storage-subs__heading {
  font-size: 13px; font-weight: 700; color: var(--color-navy);
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border);
}
/* Runter-/Hochzähler der gebuchten Pakete. */
.storage-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.storage-step__btn { min-width: 34px; font-weight: 700; }
.storage-step__count {
  min-width: 24px; text-align: center; font-weight: 700; color: var(--color-navy);
}

.accent-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.accent-swatch { cursor: pointer; line-height: 0; }
.accent-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.accent-swatch__dot {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--color-border); box-shadow: 0 0 0 2px transparent;
}
.accent-swatch.is-active .accent-swatch__dot { border-color: var(--color-navy); box-shadow: 0 0 0 2px var(--color-navy); }
.accent-swatch--blue   .accent-swatch__dot { background: var(--pub-accent-blue); }
.accent-swatch--red    .accent-swatch__dot { background: var(--pub-accent-red); }
.accent-swatch--green  .accent-swatch__dot { background: var(--pub-accent-green); }
.accent-swatch--amber  .accent-swatch__dot { background: var(--pub-accent-amber); }
.accent-swatch--violet .accent-swatch__dot { background: var(--pub-accent-violet); }
.accent-swatch--slate  .accent-swatch__dot { background: var(--pub-accent-slate); }
.pub-brand--own .pub-brand__logo { max-height: 40px; }
.pub-brand--snori-second { opacity: 0.7; }
.pub-head { display: flex; align-items: center; gap: 16px; }
.pub-head__cta { margin-left: auto; }

/* Panel-Umbau (Andreas 2026-07-23): wenige Übersichtspunkte (Akkordeon), darin
   Untergruppen. Zugeklappt kompakter — weniger Abstand zwischen den Punkten. */
.page-panel .panel-section { margin-top: 8px; padding-top: 8px; }
.page-panel .panel-section.is-acc > h3 { padding: 8px 0; }
/* Untergruppe innerhalb eines Übersichtspunkts (kein eigener Akkordeon-Toggle). */
.panel-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E1EAF4; }
.panel-sub:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.panel-sub__h {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); margin: 0 0 8px;
}
.panel-sub .panel-meta { margin-top: 0; }

/* KI-Upload-Link (/u/:token): grosse Drop-Flaeche. */
.uplink-form { max-width: 560px; }
.uplink-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 160px; padding: 24px;
  border: 2px dashed #BFD4EA; border-radius: 14px; background: #F3F8FE;
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.uplink-drop.is-over, .uplink-drop.has-file { border-color: var(--color-blue); background: #EAF2FC; }
.uplink-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uplink-drop__text { color: var(--color-text-muted); }
.uplink-drop__name { font-weight: 700; color: var(--color-navy); }
.uplink-form .btn { margin-top: 16px; }
.uplink-busy { margin-left: 12px; color: var(--color-text-muted); }

/* ── snori Chat Steuerungsseite (pages/snori-chat.eta) ──────────────────────
   Layout-Kleber + Widget-Vorschau; alles Sichtbare nutzt sonst App-Klassen. */
.cfg-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cfg-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-border); cursor: pointer; }
.cfg-swatch.is-sel { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.cfg-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 640px) { .cfg-modes { grid-template-columns: 1fr; } }
.cfg-mode { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 12px; cursor: pointer; background: var(--color-bg); }
.cfg-mode.is-sel { border-color: var(--color-blue); box-shadow: 0 0 0 2px rgba(28, 116, 201, 0.15); }
.cfg-mode h4 { margin: 0 0 4px; font-size: 14px; color: var(--color-navy); }
.cfg-mode p { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.cfg-rule-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
/* Wiederhol-Zeilen-Inputs stehen ausserhalb von .field -> die .field-input-Regel spiegeln. */
.cfg-rule-row input { flex: 1; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); font-family: inherit; font-size: 15px; }
.cfg-rule-row input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(30, 127, 212, 0.15); }
.cfg-table-wrap { overflow-x: auto; }
table.cfg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cfg-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
table.cfg-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
table.cfg-table tbody tr { cursor: pointer; }
table.cfg-table tbody tr:hover td { background: var(--color-panel); }
.cfg-outcome { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Aufklappbare Gespräche + Tickets (KIC-023): je Eintrag ein <details>. */
.chat-log { display: flex; flex-direction: column; gap: 8px; }
.chat-conv { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface, #fff); overflow: hidden; }
.chat-conv[open] { border-color: var(--color-blue); }
.chat-conv__sum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.chat-conv__sum::-webkit-details-marker { display: none; }
.chat-conv__sum::before { content: "›"; font-size: 18px; line-height: 1; color: var(--color-text-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.chat-conv[open] .chat-conv__sum::before { transform: rotate(90deg); }
.chat-conv__when { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.chat-conv__peek { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.chat-conv__body { padding: 4px 14px 14px; border-top: 1px solid var(--color-border); }
.chat-msg { margin: 8px 0; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--user { background: var(--color-blue); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.chat-msg--bot { background: var(--color-panel); color: var(--color-text); margin-right: auto; border-bottom-left-radius: 3px; }
.ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; margin: 10px 0 0; }
.ticket-meta div { display: flex; flex-direction: column; gap: 1px; }
.ticket-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.ticket-meta dd { margin: 0; font-size: 14px; color: var(--color-text); }
.cfg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cfg-preview { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-panel); min-height: 230px; position: relative; overflow: hidden; }
.cfg-bubble { position: absolute; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; background: var(--color-blue); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 20px rgba(28, 116, 201, 0.45); }
/* Vorschau des Wackel-Auslösers (T6) — identische Bewegung wie im echten Widget
   (seitliches Schütteln + Kippen; reines Rotieren ist an einem Kreis unsichtbar). */
@keyframes cfg-wiggle { 0%, 66%, 100% { transform: translateX(0) rotate(0); } 70% { transform: translateX(-4px) rotate(-15deg); } 74% { transform: translateX(4px) rotate(13deg); } 78% { transform: translateX(-3px) rotate(-9deg); } 82% { transform: translateX(3px) rotate(7deg); } 86% { transform: translateX(-1px) rotate(-3deg); } }
.cfg-bubble.wiggle { animation: cfg-wiggle 3s ease-in-out infinite; }
.cfg-teaser { position: absolute; right: 78px; bottom: 26px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow-card); }
.cfg-safe { display: flex; gap: 10px; align-items: flex-start; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 12px 14px; }
.cfg-empty { padding: 22px 14px; color: var(--color-text-muted); font-size: 14px; text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-card); }
/* snori Chat — Wissen & Sprache: Seitenbaum-Zuordnung (DE/EN/Beide/Aus + Kaskade). */
.klang-list { display: flex; flex-direction: column; margin-top: 4px; }
.klang-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.klang-row__title { flex: 1 1 160px; min-width: 0; font-size: 14px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klang-row__sel { flex: 0 0 auto; width: 128px; }
.klang-row__cascade { display: flex; gap: 4px; flex: 0 0 auto; }
/* Lead-Formular: Konfig-/Eintrag-Overlay (nutzt .col-editor, mobilfähig). */
.lf-cols { display: flex; flex-direction: column; margin: 10px 0 4px; }
.lf-col { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--color-border); }
/* 6-Punkte-Griff: per Finger UND Maus ziehbar (touch-action:none unterbindet Scroll). */
.lf-col__grip { display: flex; align-items: center; justify-content: center; width: 28px; height: 34px; color: var(--color-text-muted); cursor: grab; touch-action: none; border-radius: 6px; flex: 0 0 auto; }
.lf-col__grip:hover { color: var(--color-blue); background: var(--color-panel); }
.lf-col__grip:active { cursor: grabbing; }
.lf-col.is-dragging { opacity: .6; background: var(--color-panel); }
.lf-col.is-dragover { box-shadow: inset 0 2px 0 0 var(--color-blue); }
.lf-col__field { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; cursor: pointer; }
.lf-col__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-col__type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); background: var(--color-panel); border-radius: 4px; padding: 1px 6px; flex: 0 0 auto; }
.lf-col__req { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.lf-notify { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; cursor: pointer; }
/* Einheitliche Typografie im Formular-Konfig-Overlay (eine Größe für Labels,
   Spaltennamen, Pflicht — kein Größen-Wirrwarr). */
#formConfig .field label,
#formConfig .lf-col__name,
#formConfig .lf-col__req span,
#formConfig .lf-notify span { font-size: 14px; font-weight: 600; color: var(--color-navy); text-transform: none; letter-spacing: 0; }
#formConfig .lf-col__req span { font-weight: 500; color: var(--color-text-muted); }
.lf-linkrow { display: flex; gap: 8px; align-items: center; }
.lf-link { flex: 1; min-width: 0; font-size: 13px; }
.lf-snippet { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); color: var(--color-text); }
.lf-spacer { flex: 1; }
.lf-del { margin-right: auto; }
.cfg-hide { display: none; }
/* Melde-Formular unter einem öffentlichen Formular. */
.lead-report { margin-top: 12px; font-size: 13px; }
.lead-report summary { cursor: pointer; color: var(--color-text-muted); }
/* Footer wie geteilte Seiten: „Erstellt mit snori" + aufklappbares Impressum. */
.lead-foot--made { text-align: center; }
.lead-foot__made { margin: 0; }
.lead-legal { display: inline; }
.lead-legal > summary { display: inline; cursor: pointer; color: var(--color-text-muted); }
.lead-legal__body { margin-top: 8px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; text-align: left; }
/* Footer-Legal EINHEITLICH dezent: Impressum/Datenschutz/Problem/„Erstellt mit snori"
   alle gleich grau, KEIN Unterstrich. Sonst färbt das globale a{color:blau;
   border-bottom} + die Accent-Regel sie uneinheitlich (Datenschutz blau+unterstrichen).
   `!important`, um beide Alt-Regeln sicher zu überstimmen. Nur INNERHALB des Body-Links. */
.lead-foot a:not(.btn),
.lead-foot summary {
  color: var(--color-text-muted) !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
.lead-legal__body a { color: var(--color-blue) !important; text-decoration: underline !important; }
.lead-foot a:not(.btn):hover { color: var(--color-blue) !important; }
/* Fette blaue CTA wie auf geteilten Seiten. */
.lead-foot__cta { text-align: center; margin: 4px 0 14px; }
.lead-foot__cta .btn { border-bottom: none !important; }
.lead-foot .pub-foot__pitch { text-align: center; font-size: 13px; color: var(--color-text-muted); margin: 0 0 12px; }
.lead-consent { align-items: flex-start; gap: 8px; }
.lead-consent a { text-decoration: underline; }
.lead-report__form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lead-report__form input, .lead-report__form textarea { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font-size: 14px; }

/* Workspace-Vorlagensystem (Assistent / Katalog). Nutzt bestehende wiz-choice/
   tmpl-card-Komponenten; hier nur die Ergaenzungen: Links als Karten, 3-Spalten-
   Auswahl, Empfehlungs-Markierung. */
a.wiz-choice, a.tmpl-card { text-decoration: none; color: inherit; cursor: pointer; }
.ws-new-choices { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .ws-new-choices { grid-template-columns: 1fr; } }
.ws-assistant .wiz-choices { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .ws-assistant .wiz-choices { grid-template-columns: 1fr; } }
.ws-chip { flex-direction: row; }
.ws-use-forwhom { color: var(--color-text); margin: 0 0 18px; }
.ws-use-h { font-size: 18px; margin: 24px 0 8px; color: var(--color-navy); }
.ws-use-areas { margin: 6px 0 18px; padding-left: 18px; color: var(--color-text); }
.ws-use-areas li { margin: 4px 0; }
.ws-use-form { margin-top: 22px; }
.ws-use-form .btn { margin: 6px 10px 0 0; }
.ws-use-tips { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.ws-use-tips li { position: relative; padding-left: 22px; font-size: 14px; color: var(--color-text); }
.ws-use-tips li::before { content: "→"; position: absolute; left: 0; color: var(--color-blue); font-weight: 700; }
.tmpl-card--best { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue), var(--shadow-card); }
/* Katalog als klickbare svc-feat-Karten */
a.svc-feat { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.svc-feat:hover { border-color: var(--color-blue); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.ws-cat-card__cta { margin-top: auto; padding-top: 12px; color: var(--color-blue); font-weight: 700; font-size: 14px; }
/* Katalog-Filtersuche (ersetzt die Kopf-Suche auf dieser Seite) */
.ws-cat-search { margin: 0 0 18px; }
.ws-cat-search__input { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; color: var(--color-text); font-family: inherit; font-size: 16px; }
.ws-cat-search__input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(28, 116, 201, .15); }
.ws-cat-none { margin-top: 4px; }
.ws-cat-group { margin-bottom: 22px; }
.ws-cat-group__title { font-size: 15px; font-weight: 700; color: var(--color-navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
/* Empfehlungs-Banner auf der Vorschauseite */
.ws-rec-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--color-panel); border: 1px solid var(--color-border); border-left: 3px solid var(--color-blue); border-radius: var(--radius-card); padding: 12px 14px; margin-bottom: 18px; color: var(--color-text); font-size: 14px; }
.ws-rec-banner__icon { font-size: 18px; line-height: 1.2; }
/* Branchensuche im Assistenten (Vorschläge erst beim Tippen) */
.ws-branch-search { position: relative; max-width: 560px; }
.ws-branch-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; color: var(--color-text); font-family: inherit; font-size: 16px; }
.ws-branch-input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(28,116,201,.15); }
.ws-branch-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.ws-branch-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 14px; font-family: inherit; font-size: 15px; color: var(--color-text); cursor: pointer; }
.ws-branch-opt:hover { background: var(--color-panel); color: var(--color-navy); }
.ws-assistant .ws-next { margin-top: 24px; }
/* Workspace-Wizard: Kacheln, Aktionen, Seitenauswahl, Einladen */
.ws-actions { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.ws-alt { color: var(--color-text-muted); font-size: 14px; text-decoration: none; }
.ws-alt:hover { color: var(--color-blue); }
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; max-width: 720px; }
.ws-tile { text-align: left; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-navy); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ws-tile:hover { border-color: var(--color-blue); }
.ws-tile.is-sel { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); background: var(--color-panel); }
.ws-multi { position: relative; padding-right: 40px; }
.ws-multichoice .ws-multi.sel { border-color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); background: var(--color-panel); }
.ws-multi.sel::after { content: "✓"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--color-success); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ws-pagelist { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.ws-page-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; font-size: 15px; cursor: pointer; }
.ws-page-row input { width: 18px; height: 18px; flex-shrink: 0; }
.ws-invite-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; max-width: 620px; }
.ws-invite-row .ws-inv-email { flex: 1 1 auto; min-width: 160px; }
/* Rechte-Dropdown darf NICHT die ganze Zeile fressen (ci-select hat width:100%) */
.ws-invite-row .ws-inv-access { flex: 0 0 auto; width: auto; min-width: 210px; }
/* Liste-vs-Profil-Weiche im Setup */
.ws-entity-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
.ws-entity-opt { display: block; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.ws-entity-opt:hover { border-color: var(--color-blue); }
.ws-entity-opt:has(input:checked) { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(28,116,201,.12); }
.ws-entity-opt input { margin-right: 8px; }
.ws-entity-opt__t { font-weight: 600; color: var(--color-text); }
.ws-entity-opt__d { display: block; margin-top: 6px; font-size: 13px; color: var(--color-text-muted); line-height: 1.45; }
@media (max-width: 560px) { .ws-entity-choice { grid-template-columns: 1fr; } }

.ws-rights-legend { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 4px; }
.ws-rights-legend li { font-size: 13px; color: var(--color-text-muted); line-height: 1.4; }
.ws-rights-legend strong { color: var(--color-text); font-weight: 600; }
.ws-inv-del { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 6px; }
.ws-inv-del:hover { color: var(--color-danger); }
button.svc-feat { text-align: left; font-family: inherit; cursor: pointer; width: 100%; display: flex; flex-direction: column; }
button.svc-feat:hover { border-color: var(--color-blue); box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* Detail-Ansicht: klare Abstände zwischen Hero, Karten-Grid und Info-Karten */
#wsDetail .svc-promo { margin-bottom: 18px; }
#wsDetail .svc-feats { margin-bottom: 18px; }
#wsDetail .settings-card { margin-bottom: 18px; }
#wsDetail .settings-card:last-child { margin-bottom: 0; }
#wsDetail .ws-use-areas { color: var(--color-text-muted); font-size: 15px; }
/* Generell: jede eingerahmte Karte im Wizard hat Abstand nach unten (Detail + Setup). */
.ws-wizard .settings-card { margin-bottom: 18px; }
.ws-wizard .settings-card:last-of-type { margin-bottom: 0; }
/* Ziel-Schritt: eine Spalte (Header bleibt voll breit). Arbeitsform: drei in einer Zeile. */
.wiz-choices.ws-multichoice { grid-template-columns: 1fr; max-width: 600px; }
.wiz-choices.ws-workform { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .wiz-choices.ws-workform { grid-template-columns: 1fr; } }
.ws-workform .wiz-choice.sel { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); background: var(--color-panel); }
/* Vorschau-Zweispalter volle Breite nutzen: Inhalt breiter, Tipps schmaler */
.ws-split { max-width: none; }
@media (min-width: 900px) { .ws-split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }

/* snori Helpdesk — zweispaltige Steuerung (links alles, rechts Wissen & Sprache). */
.hd-set-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hd-set-col { min-width: 0; }
.hd-set-grid .klang-list { max-height: 72vh; overflow-y: auto; }
@media (max-width: 900px) { .hd-set-grid { grid-template-columns: 1fr; } }

/* Seiten-Freigabe-Uebersicht je Mitglied/Gast (2026-07-28). Eigene Seite unter
   /workspace/members/:id/pages, erreichbar ueber "verwalten" in der Mitgliederliste. */
.member-list__manage { margin-left: 4px; }
.member-pages { max-width: 760px; }
.member-pages .settings-card { margin-top: 20px; }
.member-pages__guest-note {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--color-panel); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 13px;
}
.member-pages__list { list-style: none; margin: 0; padding: 0; }
.member-pages__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.member-pages__item:last-child { border-bottom: none; }
.member-pages__title { flex: 1 1 auto; min-width: 0; color: var(--color-text); }
.member-pages__row-form { display: flex; align-items: center; gap: 8px; }
.member-pages__add { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.member-pages__add .field { width: 100%; max-width: 420px; }
.member-pages__subpages { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-size: 14px; }

/* Workspace-Freigabe-Links (ganzer Workspace per /w-Link) */
.ws-share-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-share-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--color-border); }
.ws-share-item .lf-link { flex: 1 1 260px; min-width: 0; }
.ws-share-item__meta { font-size: 12.5px; color: var(--color-text-muted); }
.ws-share-create { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }