/* Cockpit-Stile (aus index.html ausgelagert 06.10.2026, Cockpit-Check Nr. 35). Tokens oben, Dark Mode darunter. */
[hidden] { display: none !important; }
body { margin: 0; }

/* tradidog: Bebas Neue für Rahmen und Titel, Barlow Semi Condensed für Text und Daten, Grün #638565.
   --brand ist die Markenfarbe (Logo, Linien, Balken); --accent ist das dunklere Grün für Knöpfe, Links
   und Fokus, damit weisse Schrift und Links 4.5:1 erreichen. Rot #e30613 bleibt dem Markenzeichen vorbehalten. */
:root {
  --ground: #f7f8f5;
  --surface: #ffffff;
  --surface-2: #eef3ec;
  --ink: #373b41;
  --muted: #61675f;
  --line: #dfe3de;
  --line-strong: #b9bdb9;
  --brand: #638565;
  --accent: #4a674c;
  --accent-ink: #ffffff;
  --mark: #dbe8d6;
  --mark-ink: #2f4a32;
  --ok: #2d7a4a;
  --ok-bg: #e3f2e8;
  --warn: #8a5a0f;
  --warn-bg: #fbf0dc;
  --crit: #b23a2a;
  --crit-bg: #fbe5e1;
  --neutral-bg: #ebeee9;
  --focus: #4a674c;
  --shadow: 0 12px 32px rgba(55, 59, 65, 0.14);
  --backdrop: rgba(36, 40, 37, 0.4);
  --display: "Bebas Neue", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow Semi Condensed", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Barlow Semi Condensed", cursive;
  accent-color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121512;
    --surface: #1a1e1b;
    --surface-2: #212822;
    --ink: #e6e9e4;
    --muted: #a3aba2;
    --line: #2e352f;
    --line-strong: #4a524b;
    --brand: #8fb092;
    --accent: #9cc29f;
    --accent-ink: #121512;
    --mark: #2a3a2c;
    --mark-ink: #cfe3cf;
    --ok: #6cc28e;
    --ok-bg: #173325;
    --warn: #e2b056;
    --warn-bg: #3a2c12;
    --crit: #f08a78;
    --crit-bg: #3d1d18;
    --neutral-bg: #242b25;
    --focus: #9cc29f;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    --backdrop: rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121512;
  --surface: #1a1e1b;
  --surface-2: #212822;
  --ink: #e6e9e4;
  --muted: #a3aba2;
  --line: #2e352f;
  --line-strong: #4a524b;
  --brand: #8fb092;
  --accent: #9cc29f;
  --accent-ink: #121512;
  --mark: #2a3a2c;
  --mark-ink: #cfe3cf;
  --ok: #6cc28e;
  --ok-bg: #173325;
  --warn: #e2b056;
  --warn-bg: #3a2c12;
  --crit: #f08a78;
  --crit-bg: #3d1d18;
  --neutral-bg: #242b25;
  --focus: #9cc29f;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}
::selection { background: var(--mark); color: var(--mark-ink); }
html { scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; }
a { text-underline-offset: 0.18em; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 20px; padding-block: 0 48px; }
a { color: var(--accent); }
button, select { font: inherit; color: inherit; }
/* Barlow ist bis 600 geladen: fett = 600, sonst rechnet der Browser Kunst-Fett */
b, strong, th { font-weight: 600; }
/* Alle Eingaben in der Hausschrift; Komponenten (Zelle, Suche, Formulare) verfeinern nur noch */
input, textarea { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--surface); color: var(--ink);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
/* Zwischentitel: Bebas wie die Seitentitel; Ausnahmen (Funnel-Karten, Markdown) setzen eigene Regeln */
h3 { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 0.04em; line-height: 1.1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }

/* Kopf */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  margin-inline: -20px; padding-inline: 20px; padding-block: 14px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; flex: 1 1 320px; }
.brand h1 { font-weight: 400; margin: 0; display: flex; align-items: flex-end; gap: 10px; line-height: 1; }
/* Skip-Link: nur bei Tastaturfokus sichtbar */
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.heim { display: flex; align-items: flex-end; gap: 10px; color: inherit; text-decoration: none; border-radius: 4px; }
.heim:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.logo { display: inline-block; aspect-ratio: 480 / 117; height: 26px; background: var(--brand); -webkit-mask: url(logo.png) center / contain no-repeat; mask: url(logo.png) center / contain no-repeat; }
.logo-zusatz { font-family: var(--display); font-weight: 400; font-size: 25px; letter-spacing: 0.04em; color: var(--ink); line-height: 0.8; }
.stand { color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.suche { position: relative; display: inline-flex; align-items: center; }
.suche input { font: inherit; font-size: 15px; width: 15rem; border: 1px solid var(--line); border-radius: 8px; padding: 6px 30px 6px 12px; background: var(--surface); color: var(--ink); }
.suche input::placeholder { color: var(--muted); }
.suche input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.suche kbd { position: absolute; right: 8px; font: 600 12px var(--body); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.suche input:focus + kbd, .suche input:not(:placeholder-shown) + kbd { display: none; }
.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
}
.btn:hover { border-color: var(--accent); }
.btn.icon { padding: 7px 9px; }
/* Seiten ohne Reiterleiste (Benutzer): gleicher Abstand wie unter den Reitern */
.tabs[hidden] ~ #view { margin-top: 22px; }
.btn.icon[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Hinweiszeile */
.signals:empty { display: none; }
.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-block: 16px 18px; }
.signal {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; text-align: left; cursor: pointer; display: grid; gap: 2px;
}
button.signal:hover { border-color: var(--accent); }
div.signal { cursor: default; }
.signal b { font-family: var(--display); font-size: 32px; font-weight: 400; letter-spacing: 0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.signal span { font-size: 13px; color: var(--muted); }
.signal.crit b { color: var(--crit); }
.signal.warn b { color: var(--warn); }
.signal.ok b { color: var(--ok); }

/* Reiter */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-block: 18px 16px; overflow-x: auto; }
.tab {
  border: 0; background: none; padding: 10px 14px; cursor: pointer; font-weight: 600;
  color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.tab.gruppe-start { margin-left: 18px; position: relative; }
.tab.gruppe-start::before { content: ""; position: absolute; left: -11px; top: 30%; bottom: 30%; width: 1px; background: var(--line-strong); }
.tab .count { display: inline-block; margin-left: 6px; font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--muted); }

#view:focus { outline: none; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.bar h2 { font-family: var(--display); font-size: 24px; margin: 0; font-weight: 400; letter-spacing: 0.03em; line-height: 1; }
.bar .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
tr.gruppe-start > td { border-top: 2px solid var(--line-strong); }
select { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 6px 10px; }

/* Tabellen */
.tablebox { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.tablebox.hoch { overflow: auto; max-height: calc(100vh - 230px); }
td.muted { color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; color: var(--muted); font-weight: 600; text-align: left; background: var(--surface-2); position: sticky; top: 0; }
th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--surface-2); }
td.name { font-weight: 600; white-space: nowrap; }
tr.click td.name .linkbtn { font: inherit; font-weight: 600; padding: 0; color: var(--ink); text-align: left; }
tr.click:hover td.name .linkbtn { color: var(--accent); text-decoration: underline; }
td .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
th.group { text-align: center; border-left: 1px solid var(--line); }
td.gl, th.gl { border-left: 1px solid var(--line); }
.neg { color: var(--crit); }

/* Pillen */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--neutral-bg); color: var(--muted); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.crit { background: var(--crit-bg); color: var(--crit); }
/* Kohorten: Wiederkauf farblich abgestuft (Markengrün) */
dl.glossar { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 6px 18px; max-width: 60rem; }
dl.glossar dt { font-weight: 600; }
dl.glossar dd { margin: 0; }
.issue .zustaendig { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.issue .zustaendig .pill.muted { color: var(--muted); }
table.kohorten td.k1 { background: color-mix(in srgb, var(--brand) 12%, transparent); }
table.kohorten td.k2 { background: color-mix(in srgb, var(--brand) 24%, transparent); }
table.kohorten td.k3 { background: color-mix(in srgb, var(--brand) 40%, transparent); }
table.kohorten td.k4 { background: color-mix(in srgb, var(--brand) 60%, transparent); }
.pill.mark { background: var(--mark); color: var(--mark-ink); }

/* Prüfliste */
.issues { display: grid; gap: 8px; }
.issue {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px;
}
.issue.crit { border-color: color-mix(in srgb, var(--crit) 35%, var(--line)); }
.issue .what { font-weight: 600; }
.issue .why { font-size: 13px; color: var(--muted); }
.issue-produkte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.issue button { white-space: nowrap; }
.empty { padding: 28px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; }
.empty.gut { font-family: var(--hand); font-size: 28px; color: var(--brand); border-style: solid; }

/* Meldungen */
.notice { margin-top: 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.notice.crit { border-color: var(--crit); background: var(--crit-bg); }
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice.ok { border-color: var(--ok); background: var(--ok-bg); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 40; background: var(--ok-bg); color: var(--ink); border: 1px solid var(--ok); border-radius: 10px; padding: 10px 16px; box-shadow: var(--shadow); display: grid; gap: 2px; max-width: min(520px, calc(100% - 32px)); font-size: 14px; }
.toast strong { color: var(--ok); }
.notice strong { display: block; margin-bottom: 2px; }
.skeleton { height: 220px; border-radius: 10px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Detailblatt */
/* Rahmen aller Fenster: natives <dialog> über die ganze Fläche, das Blatt darin bleibt wie gehabt */
dialog.fenster-rahmen { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; color: inherit; }
dialog.fenster-rahmen::backdrop { background: rgba(36, 40, 37, 0.45); }
dialog.fenster-rahmen.neu .sheet { animation: fenster-auf 180ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fenster-auf { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.fenster-rahmen.neu .sheet { animation: none; } }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); z-index: 21;
  background: var(--ground); box-shadow: var(--shadow); overflow-y: auto;
  padding-inline: 24px; padding-block: calc(env(safe-area-inset-top, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 32px);
}
/* Reiter Deklarationen: Fenster in der Mitte, Kopf bleibt stehen */
.sheet.fenster {
  top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: min(1100px, calc(100% - 32px)); max-height: calc(100dvh - 48px); border-radius: 14px;
  padding-top: 0; overscroll-behavior: contain;
}
.fenster .fenster-kopf {
  position: sticky; top: 0; z-index: 2; margin: 0 -24px 4px; padding: 18px 24px 12px;
  background: var(--ground); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px 20px; align-items: center;
}
.fenster .fenster-titel { min-width: 0; }
.fenster .fenster-stand { display: grid; gap: 2px; justify-items: end; }
.fenster .sprachen { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; }
/* Bereich tradiCHAT (chat.js): eine Lesespalte, Fragen rechts als Blase, Antworten als Text, Eingabe bleibt unten */
.chat-seite { max-width: 780px; margin-inline: auto; display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100dvh - 210px); }
.chat-kopf { margin-bottom: 4px; }
.chat-pruef { font-size: 13px; }
.chat-verlauf { display: grid; gap: 22px; align-content: start; padding-block: 18px 28px; }
.chat-frage { justify-self: end; max-width: min(82%, 60ch); background: var(--surface-2); color: var(--ink); border-radius: 14px 14px 4px 14px; padding: 9px 14px; scroll-margin-top: 16px; }
.chat-frage p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-antwort.md-text { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.chat-antwort.md-text > :first-child { margin-top: 0; }
.chat-sucht { font-size: 14px; }
.chat-sucht .laeuft { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.chat-sucht .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: puls 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chat-sucht .punkt { animation: none; } }
.chat-start { align-self: center; justify-self: center; text-align: center; max-width: 56ch; padding-block: 6vh 2vh; }
.chat-start h3 { font-size: 30px; letter-spacing: 0.03em; margin: 0 0 8px; }
.chat-start p { margin: 0 0 22px; text-wrap: pretty; }
.chat-vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chat-vorschlag { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 7px 14px; font-size: 14px; cursor: pointer; text-align: left; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.chat-vorschlag:hover { border-color: var(--accent); background: var(--surface-2); }
.chat-form { position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--ground); }
.chat-eingabe { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); padding: 10px 12px 8px; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; box-shadow: 0 2px 10px rgba(36, 40, 37, 0.06); }
.chat-eingabe:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus), 0 2px 10px rgba(36, 40, 37, 0.06); }
.chat-eingabe textarea { display: block; width: 100%; border: 0; padding: 2px 2px 6px; background: none; resize: none; max-height: 40vh; overflow-y: auto; line-height: 1.45; }
.chat-eingabe textarea:focus-visible { outline: none; }
.chat-eingabe textarea::placeholder { color: var(--muted); }
.chat-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-gruendlich { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.chat-gruendlich input { accent-color: var(--accent); }
.chat-tasten { flex: 1; font-size: 12px; text-align: right; }
.chat-meldung { margin: 6px 4px 0; font-size: 13px; color: var(--muted); }
.chat-meldung:empty { display: none; }
.chat-meldung.fehler { color: var(--crit); font-weight: 600; }
@media (max-width: 640px) {
  .chat-seite { min-height: calc(100dvh - 240px); }
  .chat-tasten { display: none; }
  .chat-leiste .btn.primary { margin-left: auto; }
  .chat-frage { max-width: 90%; }
  .chat-start { text-align: left; justify-self: stretch; }
  .chat-vorschlaege { justify-content: flex-start; }
}
.sprachen button { display: inline-flex; align-items: center; gap: 6px; }
.sprachen .zaehler { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.sprachen .zaehler.ok { background: var(--ok-bg); color: var(--ok); }
.sprachen button[aria-pressed="true"] .zaehler { background: rgba(255, 255, 255, 0.2); color: inherit; }
.btn.klein { padding: 4px 10px; font-size: 13px; border-radius: 7px; }
.btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sheet h3 .klein { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; }
.sheet h3 .spacer { flex: 1; }
.fenster h3 .btn { font-family: var(--body); text-transform: none; letter-spacing: 0; color: var(--ink); }
.fortschritt { display: inline-flex; align-items: center; gap: 8px; }
.fortschritt .zahl { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; min-width: 3.2em; text-align: right; }
.fortschritt .balken { width: 72px; height: 6px; border-radius: 3px; background: var(--neutral-bg); overflow: hidden; }
.fortschritt .balken > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
/* Fortschritt pro Produkt im Produktblatt (produkt_neu.js, fortschritt.js) */
.produkt-fortschritt { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.produkt-fortschritt li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.produkt-fortschritt li.ok { color: var(--muted); }
.fortschritt-fertig { margin-top: 8px; }
.fortschritt-fertig summary { cursor: pointer; font-size: 14px; color: var(--muted); font-weight: 600; }
.fortschritt-fertig[open] summary { margin-bottom: 6px; }
.btn.link { background: none; border: none; padding: 0 4px; text-decoration: underline; cursor: pointer; color: inherit; }
.werte { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.werte div.fehlt { background: var(--crit-bg); }
.werte div.fehlt b { color: var(--crit); font-weight: 600; }
.symbole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.symbole small { margin-right: 4px; }
.gruppe { font-size: 13px; font-weight: 600; margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; }
.gruppe:first-of-type { margin-top: 4px; }
.text-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.text-kachel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.text-kachel.leer { border-style: dashed; background: var(--ground); }
.text-kachel.breit { grid-column: 1 / -1; }
.kachel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 14px; }
.kachel-kopf .spacer { flex: 1; }
.kachel-kopf .tag { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.kachel-text { font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.text-liste.fertig .text-kachel:not(.breit) .kachel-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.dekl-tabelle td.status { white-space: nowrap; }
.uebersetzen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0 10px; font-size: 13px; }
.uebersetzen .spacer { flex: 1; }
.uebersetzen .hint { margin: 0; }
.uebersetzen .ok-text { color: var(--ok); font-weight: 600; }
.uebersetzen .laeuft { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.uebersetzen .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uebersetzen .punkt { animation: none; } }
.warnung { border: 1px solid var(--warn); background: var(--warn-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.warnung p { margin: 0 0 8px; }
.btn.primary.gefahr { background: var(--crit); border-color: var(--crit); }
.dekl-tabelle td.dekl-text { max-width: none; width: 40%; }
.dekl-tabelle td.dekl-text .kurz { -webkit-line-clamp: 4; }
.dekl-tabelle td.name .linkbtn { font-size: inherit; font-weight: 600; padding: 0; color: var(--ink); text-align: left; }
.dekl-tabelle tr.click:hover td.name .linkbtn { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) {
  .sheet.fenster { width: 100%; max-height: 100dvh; top: 0; left: 0; transform: none; border-radius: 0; bottom: 0; }
  .fenster .fenster-kopf { grid-template-columns: 1fr auto; }
  .fenster .fenster-stand { grid-row: 2; grid-column: 1; justify-items: start; }
  .fenster .fenster-kopf { margin-inline: -16px; padding-inline: 16px; }
  .fenster .sprachen { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .sprachen button { justify-content: center; }
  .sheet h3 .klein { display: none; }
}
.sheet header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sheet h2 { font-family: var(--display); font-size: 34px; font-weight: 400; letter-spacing: 0.02em; line-height: 1; margin: 0; text-wrap: balance; }
.sheet .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 13px; }
.sheet .close { margin-left: auto; }
.sheet section { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.sheet h3 { font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 10px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sheet h3 a { margin-left: auto; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.calc { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 14px; }
.calc .total { font-weight: 600; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.sheet table { font-size: 13px; }
.sheet th, .sheet td { padding: 7px 10px; }
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.cmp div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.cmp small { display: block; color: var(--muted); font-size: 12px; }
.cmp b { font-variant-numeric: tabular-nums; }
.text-block { font-size: 14px; line-height: 1.55; max-width: 68ch; }
.text-block + .text-block { margin-top: 12px; }
.text-block .label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.hint { font-size: 13px; color: var(--warn); margin-top: 4px; }

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  /* Handy: Kopf scrollt mit, Suche über die volle Breite, zwei Kacheln je Zeile */
  .top { margin-inline: -16px; padding-inline: 16px; position: static; }
  .logo { height: 22px; } .logo-zusatz { font-size: 21px; }
  .actions { width: 100%; }
  .actions .stand { display: none; }
  .suche { order: -1; flex: 1 1 100%; } .suche input { width: 100%; }
  .signals { grid-template-columns: 1fr 1fr; gap: 8px; }
  .signal { padding: 10px 12px; }
  .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scrollbar-width: none; }
  .actions .btn { padding: 6px 11px; }
  .nur-breit { display: none; }
  nav.bereiche { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  nav .bereich { padding: 6px 12px; white-space: nowrap; flex: none; }
  .issue > .pill { justify-self: start; }
  .issue { grid-template-columns: 1fr; }
  .sheet { padding-inline: 16px; }
}

/* Kalkulator */
.kalk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; align-items: start; }
.kalk-karte, .kalk-liste { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 12px; }
.kalk-liste { margin-top: 14px; }
.kalk-karte h3, .kalk-liste h3 { font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: 0.04em; margin: 0; color: var(--muted); }
.kalk-regler { display: grid; gap: 10px; }
.regler { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.regler.geaendert { background: var(--mark); }
.regler label { font-weight: 600; font-size: 14px; }
.regler label .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.regler-eingabe { display: flex; align-items: center; gap: 6px; }
.regler input[type="number"] { width: 96px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--surface); color: var(--ink); }
.regler input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.einheit { color: var(--muted); font-size: 13px; min-width: 2.2em; }
.linkbtn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 600; padding: 2px 4px; }
.produkt-tabelle { font-size: 13px; }
.produkt-tabelle th, .produkt-tabelle td { padding: 6px 5px; }
.produkt-tabelle th { white-space: normal; line-height: 1.2; }
.produkt-tabelle th:first-child, .produkt-tabelle td:first-child { padding-left: 10px; }
.produkt-tabelle td.name { white-space: normal; min-width: 9.5em; }
.produkt-tabelle td .sub.rezeptur { color: var(--accent); font-weight: 600; }
.produkt-tabelle .pill { padding: 2px 7px; }
.produkt-tabelle td.name .linkbtn { font-size: inherit; font-weight: 600; padding: 0; color: var(--ink); text-align: left; }
.produkt-tabelle td.name .linkbtn:hover { color: var(--accent); text-decoration: underline; }
/* Eine Zelleneingabe für alle Tabellen (Produkte, Verkauf, Margenziele); gelb = geändert, noch nicht gespeichert */
input.zelle, .sheet input.grund { font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); padding: 3px 4px; }
input.zelle { width: 4.4em; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.produkt-tabelle input.zelle { width: 4.6em; }
input.zelle::-webkit-outer-spin-button, input.zelle::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.zelle::placeholder { color: var(--muted); opacity: 0.6; }
input.zelle:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
input.zelle.geaendert { background: var(--warn-bg); border-color: var(--warn); }
/* Reiter Rohstoffe: Übersicht, Klick öffnet das Rohstoffblatt */
.rohstoff-tabelle td.num { font-variant-numeric: tabular-nums; }
.rohstoff-tabelle td.leer { color: var(--muted); }
.rohstoff-tabelle td.name .pill { margin-left: 8px; }
.rohstoff-tabelle tr.klickbar { cursor: pointer; }
.rohstoff-tabelle tr.klickbar:hover > td { background: var(--surface-2); }
.rohstoff-tabelle tr.klickbar:hover td.name .linkbtn { color: var(--accent); }
.rohstoff-blatt .blatt-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rohstoff-blatt .cmp { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.rohstoff-blatt .cmp div.warn { background: var(--warn-bg); }
.rohstoff-blatt .cmp div.warn b { color: var(--warn); }
.rohstoff-blatt .wn-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.rohstoff-blatt .wn-gruppe h4 { font-size: 13px; margin: 0 0 4px; }
.rohstoff-blatt .wn-gruppe table { width: 100%; }
.rohstoff-blatt .wn-gruppe td { padding: 3px 0; border-bottom: 1px solid var(--line); }
.rohstoff-blatt .wn-gruppe td.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 12px; }
.rohstoff-blatt .angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.zuechter-blatt .blatt-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.zuechter-blatt .zuechter-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.zuechter-blatt .zuechter-angaben dt { color: var(--muted); }
.zuechter-blatt .zuechter-angaben dd { margin: 0; overflow-wrap: anywhere; }
.zuechter-tabelle td.name .muted { font-size: 13px; }
.zuechter-abschnitt + .zuechter-abschnitt { margin-top: 28px; }
.zuechter-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; margin: 8px 0; }
.zuechter-felder label { display: flex; flex-direction: column; gap: 4px; }
.zuechter-blatt label.check { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.zuechter-abschnitt .tablebox .bar { flex-wrap: wrap; }
.produkt-tabelle td.total { font-weight: 600; }
td.unter-ziel { color: var(--warn); font-weight: 600; }
/* Zeichen zusätzlich zur Farbe: kleines Dreieck vor dem Wert */
td.unter-ziel::before { content: ""; display: inline-block; width: 7px; height: 6px; margin-right: 4px; vertical-align: 1px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
td.nicht-im-kanal { color: var(--muted); opacity: 0.55; font-style: italic; }
details.verkauf { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
details.verkauf summary { cursor: pointer; font-size: 13px; }
details.verkauf .tablebox { margin-top: 10px; border: 0; }
.verkauf-tabelle { font-size: 13px; }
.verkauf-tabelle th, .verkauf-tabelle td { padding: 5px 8px; }
.verkauf-tabelle tr.standard td { background: var(--surface-2); }
.verkauf-tabelle td.zelle-kanal { white-space: nowrap; }
.verkauf-tabelle td.zelle-kanal input[type=checkbox] { margin-right: 6px; vertical-align: middle; }
.verkauf-tabelle td.aus input.zelle, .verkauf-tabelle input.zelle:disabled { opacity: 0.35; }
.verkauf-tabelle td.geaendert { box-shadow: inset 0 0 0 2px var(--warn); border-radius: 6px; }
.sheet input.grund { width: 100%; min-width: 12em; }
.margenziele { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.margenziele .ziel { display: inline-flex; align-items: center; gap: 6px; }
.kalk-speichern { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.kalk-speichern input { flex: 1 1 180px; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--ink); }
.kalk-tabelle tr.gruppe td { background: var(--surface-2); font-size: 13px; color: var(--muted); font-weight: 600; }
.kalk-tabelle tr.anders td:first-child { font-weight: 600; }
.plus { color: var(--ok); }
.geaendert-liste { font-size: 13px; color: var(--muted); min-width: 200px; }

/* Bearbeiten */
.edit-leiste { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 10px; font-size: 13px; }
.edit-leiste .linkbtn { font-size: 13px; padding: 2px 0; }
.form-platz:empty { display: none; }
.preis-form { margin-top: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 10px; }
.preis-form .form-titel { display: grid; gap: 2px; font-size: 14px; }
.preis-form .form-titel .muted { font-size: 13px; }
.form-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 14px; }
.form-felder label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.form-felder { align-items: start; }
.form-felder label { align-content: start; }
.form-felder fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0; }
.form-felder fieldset legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.form-felder fieldset.wl-einsatz { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.form-felder fieldset.wl-einsatz label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.form-eingabe { display: flex; align-items: center; gap: 6px; }
.preis-form input { font: inherit; font-weight: 400; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.preis-form input[type="number"] { text-align: right; }
.preis-form input[type="checkbox"] { width: auto; }
.form-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-meldung { font-size: 13px; color: var(--warn); }
.preis-form p { margin: 0; font-size: 12px; }
tr.formzeile > td { padding: 0 12px; border-bottom: 0; }
tr.formzeile > td:has(form) { padding-block: 4px 12px; border-bottom: 1px solid var(--line); }

/* Rezepturen */
.versionen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.versionen button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); }
.versionen button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.versionen .sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.linkbtn.neg { color: var(--crit); }
.preis-form > input[type="text"] { max-width: 100%; }
.preis-form td .form-eingabe { justify-content: flex-end; }
.preis-form td input[type="number"] { width: 90px; }
.preis-form tfoot td { font-weight: 600; border-top: 1px solid var(--line); }

/* Datenblatt */
.form-felder label.breit { grid-column: 1 / -1; }
.dekl-text { font-size: 13px; min-width: 200px; max-width: 320px; }
.dekl-text .kurz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dekl-text .pill { margin-bottom: 3px; }
.form-felder div.breit { grid-column: 1 / -1; display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.wn-zeilen { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.wn-zeile { display: grid; grid-template-columns: 1.3fr 1.3fr 0.7fr auto; gap: 6px; align-items: center; }
.preis-form select, .preis-form textarea { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

body.ohne-nocodb a[href^="https://nocodb"] { display: none; }
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-inline: 20px; }
.login-karte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; max-width: 420px; width: 100%; display: grid; gap: 14px; box-shadow: var(--shadow); }
.login-karte h1 { font-weight: 400; margin: 0 0 4px; display: flex; align-items: flex-end; gap: 12px; line-height: 1; }
.login-karte .logo { height: 38px; }
.login-karte .logo-zusatz { font-size: 36px; }
.login-karte p { margin: 0; color: var(--muted); }
.login-karte .btn { justify-content: center; padding: 11px 16px; font-size: 15px; }
.ms { width: 18px; height: 18px; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ms i { display: block; }
.login-meldung { color: var(--warn); font-size: 14px; min-height: 1em; }
.persona-grid { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 1.5rem; align-items: start; }
.funnel-start { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) auto; grid-template-rows: auto auto auto; gap: .25rem 1rem; margin-bottom: 1.5rem; }
/* Beschriftung, Feld und Hinweis je in einer eigenen Zeile: alle Felder und der Knopf stehen gleich hoch. */
.funnel-start label, .funnel-aktion { display: grid; grid-template-rows: subgrid; grid-row: span 3; font-weight: 600; }
.funnel-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.funnel-unten > * + * { margin-top: 2rem; }
/* Gesperrt heisst hier «nicht erlaubt», nicht «lädt»; nur während des Absendens die Sanduhr. */
.funnel-start .btn[disabled], .funnel-karte .btn[disabled] { cursor: not-allowed; }
.funnel-start .btn[aria-busy="true"] { cursor: progress; }
.funnel-karten { align-items: start; }
/* Kartentitel sind Werbe-Headlines, nicht die Grossbuchstaben-Labels von .kalk-karte h3. */
.funnel-karte h3 { margin: 0; font-family: var(--body); font-weight: 600; font-size: 17px; text-transform: none; letter-spacing: normal; color: var(--ink); }
.funnel-karte details[open] .vorschau, .funnel-karte details:not([open]) .zu { display: none; }
.funnel-fehler { display: grid; gap: .15rem; max-width: 42ch; }
.funnel-fehler > span { font-weight: 600; }
.funnel-fehler > small { font-size: 13px; color: var(--ink); }
.funnel-fehler details { margin-top: .15rem; }
.funnel-fehler code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.funnel-fehlerzeile { display: none; }
/* Handy: «Wer» und «Was tun» ausblenden, der Fehler steht als eigene Zeile unter dem Auftrag, am linken Rand festgehalten. */
@media (max-width: 640px) {
  .funnel-tabelle th:nth-child(2), .funnel-tabelle td:nth-child(2), .funnel-tabelle th:nth-child(6), .funnel-tabelle tr:not(.funnel-fehlerzeile) > td:nth-child(6) { display: none; }
  .funnel-fehlerzeile { display: table-row; }
  .funnel-fehlerzeile .funnel-fehler { position: sticky; left: 12px; max-width: calc(100vw - 72px); }
}
@media (max-width: 800px) { .funnel-start { grid-template-columns: 1fr; grid-template-rows: none; } .funnel-aktion > span:first-child { display: none; } }
.persona-liste { display: flex; flex-direction: column; gap: .35rem; }
.persona-liste .btn { text-align: left; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; }
.persona-liste .btn.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface-2); }
.persona-feld { margin-bottom: 1rem; }
.persona-feld h3 { margin: 0 0 4px; font-size: 17px; }
.persona-zitat { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.persona-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
@media (max-width: 800px) {
  .persona-grid, .persona-zitat { grid-template-columns: 1fr; }
  /* Handy: Personas und Wochen als Zeile zum Wischen, damit der Inhalt gleich darunter steht */
  .persona-liste { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .persona-liste .btn { flex: none; white-space: nowrap; flex-wrap: nowrap; }
}
.bereiche { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.bereich { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.bereich:hover { color: var(--ink); }
.bereich[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bereich:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; align-items: start; }
.fin-kpi th.quartal, .fin-kpi td.quartal { background: var(--surface-2); }
.fin-kpi th.jahr, .fin-kpi td.jahr { background: var(--surface-2); font-weight: 600; }
.fin-kpi td.fehlt { color: var(--muted); }
.fin-kanaele tr.grau td { color: var(--muted); }
.fin-kpi td.nachgetragen { font-style: italic; }
.fin-kpi td:first-child { position: sticky; left: 0; background: var(--surface); white-space: nowrap; }
.zelle { font: inherit; background: none; border: 0; border-bottom: 1px dashed var(--line); padding: 0; color: inherit; cursor: pointer; min-width: 2ch; }
.zelle:hover, .zelle:focus-visible { border-bottom-color: var(--accent); outline: none; }
.fin-nachtrag { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.bar .btn.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface-2); }
@media (max-width: 900px) { .fin-kopf { grid-template-columns: 1fr; } }
.fin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; margin-block: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fin-form h3, .fin-form .bar, .fin-form p { grid-column: 1 / -1; margin: 0; }
.fin-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.fin-form label.check { display: flex; align-items: center; gap: 6px; }
tr.verworfen td { text-decoration: line-through; color: var(--muted); }
.fin-kpi input[type="number"] { width: 90px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--surface); color: var(--ink); }
.fin-szenarien { margin-top: 16px; }
.fin-szenarien ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.fin-grafik { margin: 12px 0; }
.fin-linie { width: 100%; height: 160px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.fin-linie polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fin-linie .umsatz { stroke: var(--accent); }
.fin-linie .spend { stroke: var(--warn); }
.leg { display: inline-block; width: 14px; height: 3px; vertical-align: middle; }
.leg.umsatz { background: var(--accent); } .leg.spend { background: var(--warn); }
.fin-kpi td.einheit { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fin-kpi th, .fin-kpi td { white-space: nowrap; }
.fin-aus td { opacity: .5; }
.fin-monat-kacheln { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.fin-monat-kacheln .signal b { font-size: 20px; }
/* Bereich Berichte */
.systemwarnung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.systemwarnung strong { display: inline; margin: 0; }
.systemwarnung .btn { margin-left: auto; }
.bericht { display: grid; gap: 12px; }
.bericht .notice { margin-top: 0; }
.bericht-kacheln { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 12px; }
.bericht-kacheln div { background: var(--surface); border: 1px solid var(--line); }
.bericht-abschnitt { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.bericht-abschnitt h3, .kz-teil h3 { font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 8px; color: var(--muted); }
.bericht-abschnitt ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.bericht-abschnitt .tablebox { border: 0; }
.bericht-abschnitt td { vertical-align: top; overflow-wrap: anywhere; min-width: 8ch; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; }
.md-text { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 20px 14px; line-height: 1.55; overflow-wrap: anywhere; }
.md-text > * { max-width: 78ch; }
.md-text h3, .md-text h4, .md-text h5, .md-text h6 { font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; margin: 20px 0 6px; }
.md-text h3 { font-size: 25px; } .md-text h4 { font-size: 20px; } .md-text h5, .md-text h6 { font-size: 17px; }
.md-text p, .md-text ul, .md-text ol { margin: 6px 0; }
.md-text li + li { margin-top: 3px; }
.md-text hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md-text pre { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; font-size: 13px; }
.md-text code { background: var(--surface-2); border-radius: 4px; padding: 0 4px; font-size: 13px; }
.md-text .tablebox { margin: 8px 0; max-width: none; }
/* Konkurrenz (berichte.js): links Auswahl, rechts eine Ansicht in Lesebreite; Punkte zeigen den Titel, der Rest klappt auf */
.kz-ansicht { display: grid; gap: 14px; max-width: 54rem; min-width: 0; }
.kz-kopf h2 { font-family: var(--display); font-size: 30px; font-weight: 400; letter-spacing: 0.03em; line-height: 1; margin: 2px 0 6px; }
.kz-kopf p { margin: 0; font-size: 14px; }
.kz-teil, .kz-gruppe { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px 6px; }
.kz-teil h3 { margin-bottom: 2px; }
.kz-gruppe-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.kz-gruppe-kopf h3 { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; }
.kz-gruppe-kopf .linkbtn { font-size: 13px; padding: 2px 0; margin-left: auto; }
.kz-punkte { list-style: none; margin: 0; padding: 0; }
.kz-punkt + .kz-punkt { border-top: 1px solid var(--line); }
.kz-titel { margin: 0; padding: 10px 0 10px 24px; position: relative; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
summary.kz-titel { cursor: pointer; list-style: none; border-radius: 4px; }
summary.kz-titel::-webkit-details-marker { display: none; }
summary.kz-titel::before { content: ""; position: absolute; left: 5px; top: 16px; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
details[open] > summary.kz-titel::before { transform: rotate(45deg); top: 14px; }
summary.kz-titel:hover { color: var(--accent); }
summary.kz-titel:hover::before { border-color: var(--accent); }
.kz-text { padding: 0 0 14px 24px; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.kz-text p { margin: 0; }
.kz-text p + p { margin-top: 8px; }
.kz-text b { font-weight: 600; }
.kz-vertiefung { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 12px; }
.persona-liste.kz-liste .btn:first-child { margin-bottom: 6px; }
.sheet.fenster.kz-fenster { width: min(880px, calc(100% - 32px)); }
.kz-fenster .md-text { border: 0; padding: 4px 0 0; background: none; }
@media (prefers-reduced-motion: reduce) { summary.kz-titel::before { transition: none; } }
@media (max-width: 640px) { .kz-teil, .kz-gruppe { padding-inline: 14px; } .persona-liste.kz-liste .btn:first-child { margin-bottom: 0; } }
.persona-liste .btn b + .muted { font-weight: 400; font-size: 12px; }
@media (max-width: 640px) { .angaben { grid-template-columns: 1fr; } .md-text { padding-inline: 12px; } }
.dosierung-schema { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0 0 12px; }
.dosierung-schema.ohne-zweite .zweite { display: none; }
.dosierung-vorschau { white-space: pre-wrap; font: inherit; background: var(--mark); color: var(--mark-ink); padding: 10px 12px; border-radius: 6px; min-height: 1.5em; }
.form-fehler { color: var(--crit); margin: 0 0 8px; padding-left: 18px; }
.wissen-thema { margin: 20px 0 6px; }
.wissen-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .wissen-editor { grid-template-columns: 1fr; } }
.wissen-text { width: 100%; min-height: 360px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.wissen-vorschau { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; max-height: 520px; overflow: auto; }
.wissen-diff { white-space: pre-wrap; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.diff-neu { background: var(--ok-bg); color: var(--ok); }
.diff-weg { background: var(--crit-bg); color: var(--crit); text-decoration: line-through; }
.wissen-produkt { list-style: none; padding: 0; display: grid; gap: 6px; }
.mb-saeulen span { display: inline-block; width: 1.2em; text-align: center; }
.wl-abschnitt { margin: 18px 0; }
.wl-kopf { display: flex; align-items: center; gap: 10px; }
.wl-eintrag { font: inherit; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; color: inherit; cursor: pointer; }
.wl-eintrag:hover, .wl-eintrag:focus-visible { border-color: var(--line); }
.wl-vorschlag { border: 1px dashed var(--warn); }
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chip { background: var(--ok-bg); border-radius: 999px; }
.wl-chip.nein { background: var(--neutral-bg); text-decoration: line-through; text-decoration-color: var(--warn); }
.wl-farben, .wl-schriften { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wl-farbe, .wl-schrift { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.wl-feld { height: 72px; border-radius: 8px; display: flex; align-items: flex-end; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.wl-probe { font-size: 26px; line-height: 1.1; }
.wl-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.wl-achsen { display: grid; gap: 4px; }
.wl-achse { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px; width: 100%; }
.wl-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; width: 100%; }
.wl-paar small { grid-column: 1 / -1; }
.wl-istnicht { color: var(--muted); }
.wl-ersetzen { display: grid; gap: 4px; }
.wl-nicht { text-decoration: line-through; color: var(--muted); }
.wl-liste { list-style: none; padding: 0; display: grid; gap: 2px; }
@media (max-width: 700px) { .wl-achse, .wl-paar { grid-template-columns: 1fr; } }
/* Mitbewerber-Fenster (mitbewerber.js) */
.mb-steck .mb-zeilen { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 4px; }
.mb-steck dt { color: var(--muted); } .mb-steck dd { margin: 0; }
.mb-gruppe { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 10px; }
.mb-gruppe h4 { margin: 0 0 8px; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.mb-kaertchen { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-kaertchen-1 { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; min-width: 120px; display: grid; }
.mb-kaertchen-1 small { color: var(--muted); font-size: 12px; }
.mb-an { color: var(--ok); font-weight: 600; }
.mb-bearbeiten > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; }
.mb-formular .mb-gruppe:first-child { border-top: 0; margin-top: 0; }
.mb-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.mb-feld { display: grid; gap: 4px; align-content: start; }
.mb-feld > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.mb-feld.breit { grid-column: 1 / -1; }
.mb-formular input[type=text], .mb-formular select, .mb-formular textarea { width: 100%; }
.mb-saeulen-wahl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.mb-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; justify-self: start; }
.mb-seg label { position: relative; }
.mb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mb-seg span { display: block; padding: 4px 12px; font-size: 14px; border-right: 1px solid var(--line); background: var(--surface); }
.mb-seg label:last-child span { border-right: 0; }
.mb-seg input:checked + span { background: var(--mark); color: var(--mark-ink); font-weight: 600; }
.mb-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.mb-schalter-zeile { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.mb-schalter-zeile .mb-feld { margin-left: auto; min-width: 220px; }
.mb-schalter { appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s ease-out; }
.mb-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease-out; }
.mb-schalter:checked { background: var(--accent); }
.mb-schalter:checked::after { transform: translateX(16px); }
.mb-schalter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 700px) { .mb-raster { grid-template-columns: 1fr; } .mb-steck .mb-zeilen { grid-template-columns: 1fr; } .mb-schalter-zeile .mb-feld { margin-left: 0; width: 100%; } }

/* BrandBrain Produkte: Leiste + Steckbrief */
.bb-produktleiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bb-produktwahl { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 4px 11px; cursor: pointer; }
.bb-produktwahl:hover { border-color: var(--accent); }
.bb-produktwahl[aria-pressed="true"] { background: var(--mark); border-color: var(--accent); color: var(--mark-ink); font-weight: 600; }
.bb-steckbrief { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.bb-steck-bild p { margin: 8px 0 0; }
.bb-packshot-leer { width: 200px; height: 198px; border: 1px dashed var(--line-strong); border-radius: 8px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.bb-steck-name { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0 0 6px; letter-spacing: 0.02em; }
.bb-steck-text > p { max-width: 72ch; margin: 0 0 8px; }
.bb-steck-teil { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.bb-steck-teil h4 { margin: 0 0 6px; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.bb-steck-teil ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }
.bb-steck-teil p { margin: 0; max-width: 72ch; }
.bb-steck-links { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-chip { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 2px 11px; color: var(--accent); cursor: pointer; }
.bb-chip:hover { border-color: var(--accent); }
.bb-warnung { background: var(--warn-bg); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; font-size: 14px; max-width: 72ch; }
.bb-warnung ul { margin: 4px 0 0; padding-left: 1.2em; }
.bb-pruefen { margin-left: 8px; }
.bb-steck-kopf { display: flex; align-items: baseline; gap: 12px; }
.bb-steck-kopf h4 { margin: 0 0 6px; }
.bb-aktion { font-size: 13px; padding: 0; margin-left: auto; color: var(--accent); }
.bb-fehlt { color: var(--muted); margin: 0; }
.bb-fehlt > span { display: inline-block; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.bb-farbknopf { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 4px 10px; cursor: pointer; color: var(--ink); margin-top: 6px; }
.bb-farbknopf:hover { border-color: var(--accent); }
.bb-packshot-leer { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; padding: 10px; }
.bb-packshot-leer small { font-size: 12px; }
.bb-noch-offen { margin-top: 14px; background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
@media (max-width: 700px) { .bb-steckbrief { grid-template-columns: 1fr; } }

/* Seiten in Abschnitten (abschnitte.js) */
.abs { display: grid; gap: 10px; }
.abs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.abs-chips button { font: inherit; font-size: 13px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 2px 11px; color: var(--ink); cursor: pointer; }
.abs-chips button:hover { border-color: var(--accent); color: var(--accent); }
.abs-block { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; scroll-margin-top: 90px; }
.abs-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.abs-kopf .spacer { flex: 1; }
.abs-kopf h4 { margin: 0; font-family: var(--body); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.abs-kopf h4.muted { color: var(--muted); font-weight: 500; }
.abs-text { background: none; border: 0; padding: 0; max-width: 76ch; }
.abs-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); display: inline-block; }
.abs-fuss { display: flex; gap: 14px; align-items: center; }
.abs-fenster { max-width: 1100px; }
.abs-feld { display: grid; gap: 4px; margin: 10px 0; }
.abs-feld span { font-size: 13px; color: var(--muted); }
.abs-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.abs-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.abs-eingabe { width: 100%; min-height: 320px; font: inherit; font-size: 15px; line-height: 1.5; padding: 10px 12px; resize: vertical; }
.abs-vorschau { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--ground); overflow: auto; max-height: 60vh; }
.abs-diff { line-height: 1.6; white-space: pre-wrap; margin: 6px 0 0; }
.abs-weg { background: var(--crit-bg); color: var(--crit); text-decoration: line-through; }
.abs-neu { background: var(--ok-bg); color: var(--ink); text-decoration: none; }
@media (max-width: 700px) { .abs-raster { grid-template-columns: 1fr; } .abs-eingabe { min-height: 200px; } }

/* BrandBrain nach Themen (brandbrain.js) */
.bb-brain { margin-top: 22px; max-width: 860px; } .bb-brain .btn { white-space: nowrap; }
.bb { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: start; }
.bb-leiste { position: sticky; top: 80px; border-right: 1px solid var(--line); padding-right: 12px; }
.bb-liste { display: grid; gap: 1px; }
.bb-gruppe { font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 4px; padding-left: 10px; }
.bb-thema { font: inherit; font-size: 15px; text-align: left; border: 0; background: none; color: var(--ink); padding: 6px 10px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.bb-thema:hover { background: var(--neutral-bg); }
.bb-thema[aria-current="true"] { background: var(--mark); color: var(--accent); font-weight: 600; }
.bb-zahl { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--warn); font-variant-numeric: tabular-nums; }
.bb-wahl { display: none; width: 100%; }
.bb-inhalt { min-width: 0; }
.bb-kopf h2 { margin: 0; }
.bb-kopf p { margin: 2px 0 0; }
.bb-reiter { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 16px; }
.bb-reiter button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--muted); padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.bb-reiter button:hover { color: var(--ink); }
.bb-reiter button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.bb-seite { margin-bottom: 18px; }
.bb-seite .bar h3 { margin: 0; }
.bb-seite .md-text { max-width: 76ch; }
.bb-seiten { list-style: none; padding: 0; margin: 0 0 12px; }
.bb-seiten li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bb-seiten .linkbtn, .bb-treffer-titel { font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; padding: 0; }
.bb-links { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 6px; font-size: 16px; }
.bb-suche { display: grid; gap: 4px; margin-bottom: 14px; }
.bb-suche input { font-size: 16px; padding: 9px 12px; max-width: 640px; }
.bb-blick { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; margin: 0 0 14px; max-width: 860px; }
.bb-blick dt, .bb-blick dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.bb-blick dt .linkbtn { padding: 0; color: var(--muted); }
.bb-blick dd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bb-farben { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bb-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.bb-offen-hinweis { margin-top: 8px; }
.bb-treffer { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.bb-treffer li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.bb-ampel { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; justify-self: start; white-space: nowrap; }
.bb-verboten { background: var(--crit-bg); color: var(--crit); }
.bb-beleg { background: var(--warn-bg); color: var(--warn); }
.bb-erlaubt { background: var(--ok-bg); color: var(--ok); }
.bb-offen { background: var(--neutral-bg); color: var(--muted); }
.bb-produkt-kopf { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.bb-packshot { width: 200px; height: auto; }
.bb-produkt .bb-blick { flex: 1; min-width: 260px; }
.bb-packshots { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.bb-packshots figure { margin: 0; width: 140px; font-size: 13px; }
.bb-packshots img { width: 140px; height: auto; }
.bb-logos { margin-bottom: 14px; }
.bb-logo-gross { height: 56px; }
.bb-zitate { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; max-width: 76ch; }
@media (max-width: 900px) {
  .bb { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bb-leiste { position: static; border-right: 0; padding-right: 0; }
  .bb-liste { display: none; }
  .bb-wahl { display: block; }
  .bb-blick { grid-template-columns: 1fr; }
  .bb-blick dd { border-top: 0; padding-top: 0; }
  .bb-treffer li { grid-template-columns: 1fr; }
}