/* KAVENTA Portal — EINE Datei, gegliedert nach BEREICHEN (ADR 0024 D4):
     Grundlagen · Hülle · Anmeldung · Konto & Verwaltung · Beiträge · Freigaben ·
     Startseite · Veröffentlichung & Verbindungen.
   Nicht nach Bausteinen: tests/test_portal_contrast.py liest :root und body.dark
   hier als Wahrheitsquelle; eine zweite Datei würde diese Wahrheit spalten.
   Markenwerte kommen je Anfrage als --brand-* inline aus brand.color_roles. */

/* ---- Grundlagen: Farben, Typografie, Grundformen ---- */
:root {
  --accent: var(--brand-accent, #16a34a);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  /* Contrast-safe accent for text/links, computed server-side (WCAG AA); falls back
     to a mix if no brand value is present. */
  --accent-ink: var(--brand-accent-ink, color-mix(in srgb, var(--accent) 72%, #000));
  /* Accent for button backgrounds that carry white text (darkened server-side). */
  --accent-btn: var(--brand-accent-btn, var(--accent));
  --bg: #f6f7f9; --card: #fff; --ink: #1b2430; --soft: #636c79; --line: #e6e9ee;
  /* Die drei Zustandstoene sind so weit abgedunkelt, dass sie nicht nur auf Karte und
     Seitenflaeche AA halten, sondern auch auf IHRER EIGENEN Chip-Flaeche (12 % desselben
     Tons deckend ueber --card) — dort ist der Abstand am kleinsten (M3 Etappe 5). */
  --danger: #b14a39; --warn: #8e6310;
  /* --info carries the "geplant" state (M3): a fourth status colour that is neither
     success (accent), warning nor error. Chosen to pass AA on card AND page bg. */
  --info: #3f6098;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --r: 14px;

  /* ---- Oberflächen-Bauteile Social Media (ADR 0037 §4) ----
     Marken aus docs/portal/mockup-social-media-v08.html (:root). Drei Töne sind
     gegenüber der Vorlage NACHGESCHÄRFT, damit ihr Text WCAG AA hält (der Mockup ist
     der Plan, AA geht vor): --bernstein 3,94→5,04 · --ink-3 2,93→4,70 · --gold
     2,42→3,53 (AA-large; trägt nur Logo + Sterne, keinen Fließtext). Der Technik-Check
     tests/test_social_design.py hält diese Kontraste fest. */
  --sm-ink: #16211E; --sm-ink-2: #55615A; --sm-ink-3: #66716A;
  --sm-paper: #F7F6F2; --sm-card: #FFFFFF; --sm-line: #E5E2DA; --sm-line-2: #EFEDE7;
  --sm-gruen: #0F7A4A;      --sm-gruen-w: #E7F1EB;
  --sm-bernstein: #925B08;  --sm-bernstein-w: #FBF1DF;
  --sm-blau: #3B6EA5;       --sm-blau-w: #E9F0F7;
  --sm-grau: #5A665F;       --sm-grau-w: #EEEDE8;
  --sm-rost: #B4472F;       --sm-rost-w: #FAEBE7;
  --sm-gold: #A98316;
  /* Plattform-Punkte (kleine dekorative Marker, kein Text) — damit migrierte Templates
     hierüber gehen statt über Inline-Hex (§9.3). */
  --sm-net-instagram: #C13584; --sm-net-facebook: #1877F2; --sm-net-google: #4285F4;
  --sm-disp: "Bricolage Grotesque", var(--serif);
}
body.dark {
  --bg: #12161c; --card: #1a2028; --ink: #e8ecf1; --soft: #9aa6b2; --line: #2a323d;
  /* Status colours brightened for the dark surface so text/badges keep WCAG AA. */
  --danger: #ef8a77; --warn: #e0aa46; --info: #8fb0e0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Inter", system-ui, sans-serif; background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* Buttons inherit the themed text colour by default (browsers would otherwise force a
   fixed default, e.g. the account button going dark-on-dark in dark mode). */
button { font-family: inherit; color: inherit; }
input { font-family: inherit; }
a { color: inherit; }
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* ---- Hülle: Seitenleiste ---- */
.side { background: var(--card); border-right: 1px solid var(--line); display: flex;
  flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 0 0; }
.tenant { display: flex; align-items: center; gap: 11px; padding: 0 18px 16px; border-bottom: 1px solid var(--line); }
.t-logo { width: 40px; height: 40px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.t-logo { background: #fff; }
.t-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tenant h1 { font-size: 14px; font-weight: 600; line-height: 1.2; }
.tenant small { font-size: 11px; color: var(--soft); }
.nav { flex: 1; padding: 12px; overflow-y: auto; }
.nav-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; color: var(--soft);
  text-transform: uppercase; padding: 14px 10px 6px; }
.nav a, .nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; background: transparent; color: var(--soft); font-size: 13.5px; font-weight: 500;
  border-radius: 9px; text-align: left; text-decoration: none; cursor: pointer; transition: .12s; }
.nav a:hover, .nav button:hover { background: var(--accent-soft); color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav .ico { width: 18px; text-align: center; }
.sub { display: none; margin: 2px 0 4px; }
.sub.open { display: block; }
.sub a { padding-left: 38px; font-size: 12.8px; }
.parent-on { color: var(--ink); font-weight: 600; }
.pinned { border-top: 1px solid var(--line); padding: 10px 12px 8px; }
.acct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0;
  background: transparent; border-radius: 10px; text-align: left; cursor: pointer; }
.acct:hover { background: var(--accent-soft); }
.acct .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; overflow: hidden; }
.acct b { font-size: 13px; font-weight: 600; display: block; line-height: 1.2; }
.acct small { font-size: 10.5px; color: var(--soft); }
.acct .gear { margin-left: auto; color: var(--soft); }
.powered { font-size: 10px; color: var(--soft); text-align: center; padding: 8px 0 10px; }
.powered b { letter-spacing: 1px; }

/* ---- Hülle: Kopfzeile und Inhaltsfläche ---- */
.main { display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; align-items: center; gap: 14px; padding: 13px 28px; background: var(--card);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--soft);
  text-transform: uppercase; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* Brotkrumen sind Navigationsziele, keine Verweise im Fliesstext — sie brauchen eine
   Trefferflaeche. Grundmass 24 px (WCAG 2.5.8 AA), auf dem Telefon 44 px (siehe unten).
   Gemessen waren es 42x16 px; die Leiste bricht um, statt hinauszuragen. */
.crumb a { text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; min-height: 24px; min-width: 24px; }
.crumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumb .cur { color: var(--ink); }
.top .sp { flex: 1; }
.logo-wide { height: 28px; width: auto; max-width: 220px; object-fit: contain; }
.theme-toggle { border: 1px solid var(--line); background: var(--bg); padding: 6px 13px; border-radius: 30px;
  font-size: 12px; font-weight: 500; color: var(--soft); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.banner { background: #141a22; color: #dfe4ea; padding: 9px 28px; font-size: 12.5px; display: flex; gap: 10px; align-items: center; }
.banner .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.5px; color: #fff;
  background: rgba(255,255,255,.14); padding: 3px 9px; border-radius: 4px; text-transform: uppercase; }

/* Links-bündig (margin:0 statt auto) + breiter, damit der Platz rechts der Sidebar genutzt
   wird und nicht als Lücke links liegen bleibt (Nutzer-Feedback Mediathek, gilt für alle Views). */
.view { padding: 30px 28px 60px; max-width: 1400px; width: 100%; margin: 0; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px; color: var(--accent-ink);
  text-transform: uppercase; margin-bottom: 5px; }
.view h2 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; }
.view p.lead { color: var(--soft); margin-top: 6px; max-width: 580px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-top: 18px; }
.card h3 { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.sw .box { width: 74px; height: 46px; border-radius: 9px; border: 1px solid var(--line); margin-bottom: 6px; }
.sw .role { font-size: 11.5px; font-weight: 600; }
.sw .hex { font-family: var(--mono); font-size: 10px; color: var(--soft); }
.stub { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 46px 28px; text-align: center; margin-top: 20px; }
.stub .big { font-family: var(--serif); font-size: 22px; }
.stub p { color: var(--soft); max-width: 460px; margin: 8px auto 0; }
/* Vorschau-Zustand: was kommt, woran es haengt, wohin man stattdessen geht. Bewusst eine
   normale Karte und kein gestricheltes Nichts — die Auskunft ist echter Inhalt. */
.vorschau { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; margin-top: 20px; max-width: 640px; }
.vorschau .chip { display: inline-block; margin-bottom: 14px; }
.vs-block { margin-bottom: 14px; }
.vs-block:last-child { margin-bottom: 0; }
.vs-block h4 { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--soft); margin-bottom: 4px; }
.vs-block p { font-size: 13.5px; }
/* Chip ohne c-Klasse = Auszeichnung ("Empfohlen", "Primär", ein Zähler).
   Chip MIT c-Klasse = Zustand (die fünf Klassen direkt darunter).
   So wird kein Zustand in zwei Schreibweisen geschrieben (ADR 0024 Etappe 3). */
.chip { font-family: var(--mono); font-size: 10px; padding: 3px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); }

/* Die vier Zustaende des Portals — eine Klasse je Zustand, gueltig in JEDER Ansicht
   (Beitrag, Fassung, Publikation, Kanalverbindung):
     c-live  laeuft / veroeffentlicht / verbunden / freigegeben
     c-appr  wartet auf eine Entscheidung
     c-plan  geplant, beide Tore durch, Auslieferung steht aus
     c-soon  in Arbeit / noch nicht verfuegbar
     c-stop  abgelehnt / fehlgeschlagen / getrennt
   Textfarben sind --accent-ink / --warn / --info / --soft / --danger — nie --accent
   (ADR 0024 D5); alle fuenf sind in tests/test_portal_contrast.py erfasst. */
.chip.c-live { background: var(--accent-soft); color: var(--accent-ink); }
/* Deckend ueber --card, nicht halbtransparent: ein Chip soll seine Farbe nicht danach
   aendern, worauf er liegt — und der Kontrast ist so mit EINER Flaeche pruefbar. */
.chip.c-appr { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); }
.chip.c-plan { background: color-mix(in srgb, var(--info) 12%, var(--card)); color: var(--info); }
.chip.c-soon { background: color-mix(in srgb, var(--soft) 12%, var(--card)); color: var(--soft); }
.chip.c-stop { background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger); }

/* ---- Kanäle (Ausgang, ADR 0031 E1) ---- */
.chan-list { margin-top: 8px; }
.chan-card { margin-top: 12px; }
.chan-head { margin-bottom: 8px; }
.chan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.chan-row + .chan-row { border-top: 1px solid var(--line); }
.chan-avail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- Anmeldung (Login, Passwort zurücksetzen) ---- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 34px 30px; width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(20,26,34,.08); }
.auth-card .brand { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.auth-card .brand b { color: var(--accent-ink); }
.auth-card h1 { font-size: 18px; margin: 16px 0 4px; }
.auth-card p.sub { color: var(--soft); font-size: 13px; margin-bottom: 18px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); margin-bottom: 5px; }
.field input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; font-size: 14px; color: var(--ink); }
.btn { border: 1px solid var(--line); background: var(--card); padding: 11px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; width: 100%; }
.btn.primary { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.btn.primary:hover { filter: brightness(.95); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* Nur fuer Vorlesesoftware: die Ansage-Flaeche der Huelle. Nicht display:none — was
   verborgen ist, wird auch nicht vorgelesen. */
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; }
.auth-links a { color: var(--accent-ink); text-decoration: none; }
.msg { padding: 10px 13px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; }
.msg.err { background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger); }
.msg.ok { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- Telefon: Schublade statt gestapelter Seitenleiste (ADR 0024 D3) ---- */
/* Der freigegebene Entwurf v0.4 kannte nur "Seitenleiste unter den Inhalt stapeln".
   Auf dem Telefon standen dadurch fuenfzehn Navigationseintraege VOR jeder Seite.
   Variante A loest das mit EINER Navigation: dasselbe <aside>, unter 980 px als
   Schublade ueber einem Overlay. Kein zweites, verkuerztes Navigationsmodell. */
.burger, .drawer-close { display: none; }
.nav-scrim { display: none; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; width: 264px; max-width: 84vw;
    height: 100dvh; z-index: 60; transform: translateX(-100%); transition: transform .18s ease;
  }
  body.nav-open .side { transform: none; box-shadow: 0 0 40px rgba(20, 26, 34, .28); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20, 26, 34, .45); }
  body.nav-open { overflow: hidden; }

  .burger { display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
    font-size: 15px; cursor: pointer; }
  /* flex:none, sonst quetscht die Kopfzeile der Schublade den Knopf auf 33 px zusammen
     (gemessen: docs/portal/messung-2026-08-05.md). */
  .drawer-close { display: grid; place-items: center; margin-left: auto; flex: none;
    width: 44px; height: 44px; border: 0; background: transparent; color: var(--soft);
    font-size: 15px; cursor: pointer; }

  /* Beruehrungsziele: mindestens 44 px in JEDER Richtung, sonst trifft der Daumen daneben.
     Die Liste stammt aus der Messung, nicht aus der Vermutung — sie hat vier Ziele
     gefunden, die vorher nicht erfasst waren: die Brotkrumen, den Support-Verweis in der
     Schublade, die Fassungszeile der Beitragsliste und die Formularfelder. Kreuz- und
     Auswahlfelder bleiben ausgenommen; ihr Ziel ist die zugehoerige Beschriftung. */
  .nav a, .nav button, .acct, .pinned a, .pinned .btn, .burger, .drawer-close,
  .theme-toggle, .set-tabs a, .btn, .unit-change > summary, .wissen-filter a,
  .crumb a, .unit-row, .post-row, .l-card, .rule a, details.edit > summary,
  select, textarea, input:not([type=checkbox]):not([type=radio]),
  /* Nachgetragen aus der Messung vom 06.09.2026: drei Muster aus den neueren Modulen
     waren von keiner Regel erfasst und massen 19 px — weniger als die Haelfte der
     Vorgabe und unter dem WCAG-Mindestwert von 24 px. In 18 von 42 Ansichten. */
  .smv2 .grp-h a.r, .smv2 details > summary, .smv2 .zeile > a, .smv2 .mini a {
    min-height: 44px;
  }
  /* Damit die Hoehe auch wirkt: ein Verweis ist von Haus aus `inline`, und dort bleibt
     `min-height` folgenlos. */
  .smv2 .grp-h a.r, .smv2 .zeile > a, .smv2 .mini a {
    display: inline-flex; align-items: center;
  }
  .btn, .theme-toggle, .set-tabs a, .wissen-filter a, .crumb a { display: inline-flex;
    align-items: center; justify-content: center; }
  .crumb a { min-width: 44px; }
  .nav a, .nav button { padding: 10px; }

  .top { padding: 10px 16px; }
  .view { padding: 20px 16px 48px; }

  /* ── Eine Kopfzeile, eine Hoehe (Messung 06.09.2026) ─────────────────────────
     Die Brotkrume durfte umbrechen, und jeder ihrer Verweise ist 44 px hoch — bei
     einem langen Pfad wurde der Kopf dreistoeckig. Gemessen wurden FUENF verschiedene
     Kopfhoehen (65 · 88 · 116 · 139 · 154 px); beim Navigieren sprang der Inhalt
     darunter um bis zu 89 px.

     Jetzt eine Zeile: die vorderen Stufen schrumpfen und kuerzen sich mit Auslassung,
     die AKTUELLE Stufe bleibt ganz und wird lesbar gross. Sie ist die Antwort auf
     „wo bin ich?" — dafuer sind 10 px gesperrte Schreibmaschinenschrift zu wenig. */
  .crumb { flex-wrap: nowrap; min-width: 0; overflow: hidden; gap: 6px;
    font-size: 12px; letter-spacing: 0; text-transform: none; }
  /* „Portal" fuehrt dorthin, wohin auch die Schublade fuehrt — und die sitzt als Knopf
     direkt daneben. In einer Zeile, die um jedes Pixel ringt, ist die Stufe entbehrlich. */
  .crumb > a:first-child, .crumb > a:first-child + span { display: none; }
  /* `min-width: 44px` BLEIBT: die Kuerzung besorgt die Auslassung, nicht das
     Zusammenquetschen. Ohne diese Zeile schrumpften die Verweise auf 1 px — beim ersten
     Anlauf gemessen, und damit war die Kopfzeile zwar einzeilig, aber untreffbar. */
  .crumb > a { flex: 0 1 auto; min-width: 44px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .crumb > span { flex: none; }
  .crumb .cur { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--ink);
    letter-spacing: -.01em; }
  /* Die Wortmarke steht schon in der Schublade. In einer 375-px-Kopfzeile nimmt sie
     bis zu 220 px und draengt genau die Angabe weg, um die es hier geht. */
  .top .logo-wide { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Konto & Verwaltung ---- */
/* minmax(0, 1fr) statt 1fr: ein Rastertrack hat implizit min-width:auto und waechst
   mit seinem Inhalt — ein Eingabefeld sprengt damit die Seite, statt zu schrumpfen
   (gemessen: docs/portal/messung-2026-08-05.md). */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.muted-sm { color: var(--soft); font-size: 12px; }
.mono-xs { font-family: var(--mono); font-size: 9px; }
.link { color: var(--accent-ink); text-decoration: none; }
.link:hover { text-decoration: underline; }
/* Audit NIEDRIG: unter .smv2 der Marken-Grünton der Gestaltungsgrundlage statt --accent-ink. */
.smv2 .link { color: var(--sm-gruen); }
.set-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 30px; padding: 5px; width: max-content; max-width: 100%; }
.set-tabs a { border-radius: 24px; padding: 7px 15px; font-size: 12.5px; font-weight: 500; color: var(--soft); text-decoration: none; }
.set-tabs a.active { background: var(--ink); color: var(--bg); }
.card h4 { font-size: 13px; margin: 4px 0 8px; }
.card h4.grp { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--soft); }
select, .field input, .rule-edit input, .rule-add input, .loc-grid input { width: 100%; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 13.5px; color: var(--ink); }
.btn.xs { padding: 6px 11px; font-size: 12px; font-weight: 500; width: auto; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.file { display: inline-block; margin: 6px 0; font-size: 12px; }

/* Standorte */
.loc-row, .add-row { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.loc-grid { display: grid; gap: 8px; margin-bottom: 8px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr); }
/* Der Bruch lag bei 760 px — auf dem Tablet (768) standen die vier Spalten also noch
   nebeneinander und ragten hinaus. Jetzt zwei Spalten ab 980, eine ab 640. */
@media (max-width: 980px) { .loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .loc-grid { grid-template-columns: minmax(0, 1fr); } }
.loc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Markenregeln */
.wissen-filter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.wissen-filter a { border: 1px solid var(--line); background: var(--card); padding: 5px 13px; border-radius: 20px;
  font-size: 12px; color: var(--soft); text-decoration: none; }
.wissen-filter a.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rule-add { display: grid; gap: 8px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
@media (max-width: 760px) { .rule-add { grid-template-columns: minmax(0, 1fr); } }
.rule { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; background: var(--card); }
.rule.proposed { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.rule-text { flex: 1; font-size: 13px; }
.rule-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dot { font-size: 12px; }
.dot.warn { color: var(--warn); }
.dot.ok { color: var(--accent-ink); }
.cat { font-family: var(--mono); font-size: 8.5px; color: var(--accent-ink); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.src { font-family: var(--mono); font-size: 8.5px; color: var(--soft); border: 1px dashed var(--line);
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
details.edit { display: inline; }
details.edit > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); background: var(--card);
  padding: 6px 11px; border-radius: 9px; font-size: 12px; display: inline-block; }
details.edit > summary::-webkit-details-marker { display: none; }
.rule-edit { display: flex; gap: 8px; margin-top: 8px; }

/* Wissensquellen */
.src-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 10px 0; }
.src-label { flex: 1; font-size: 13px; }

/* Logos */
.logo-edit { display: flex; gap: 24px; flex-wrap: wrap; }
.logo-box { border: 1px solid var(--line); border-radius: 11px; background: #fff; display: grid; place-items: center;
  margin-bottom: 8px; overflow: hidden; color: var(--soft); }
.logo-box.square { width: 92px; height: 92px; }
/* `max-width` neben der Wunschbreite: in einer Spalte, die schmaler ist als 210 px,
   zog das Feld sonst die ganze Seite mit (gemessen: +230 px unter Marke & DNA). */
.logo-box.wide { width: 210px; max-width: 100%; height: 66px; }
.logo-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Farben und Darstellung */
.collbl { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; align-items: center; }
.collbl input[type=color] { width: 74px; height: 42px; border: 1px solid var(--line); border-radius: 9px; background: none; padding: 2px; cursor: pointer; }
.theme-choice { display: flex; gap: 10px; margin-top: 8px; }
.theme-btn { width: auto; }
.accent-demo { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; color: var(--soft); }
.dot-accent { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-btn); flex: none; margin-top: 1px; }

/* ---- Beiträge: Liste, Motivkarte, Detail ---- */
.posts-list { margin-top: 16px; }
.post-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 16px; margin-bottom: 9px; text-decoration: none; color: inherit; transition: .12s; }
.post-row:hover { border-color: var(--accent-ink); }
.post-row.awaiting { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--card)); }
.post-main { min-width: 0; }
.post-main b { font-size: 14px; }
.preview { color: var(--soft); font-size: 12.5px; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.post-chan { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.post-status { display: flex; gap: 8px; align-items: center; flex: 0 1 auto; min-width: 0;
  flex-wrap: wrap; justify-content: flex-end; }

/* Motivkarte: eine Karte je generation_id, die Freigabeeinheiten darunter. */
.motiv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 16px; margin-bottom: 9px; transition: .12s; }
.motiv-card.awaiting { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--card)); }
/* Aus dem Chat angesprungenes Motiv (ADR 0032 §3.3): kurz hervorheben. */
.motiv-card.focus { box-shadow: 0 0 0 2px var(--accent-ink); }
/* „Wann?"-Auswahl beim Freigeben (ADR 0032 §3.4). */
.unit-when { margin: 6px 0; }
.unit-when label { display: block; font-size: 13px; margin: 3px 0; }
.unit-when input[type="datetime-local"] { margin-left: 6px; }

/* Dashboard v1 (ADR 0033 §1). */
.dash-row-title { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin: 22px 0 10px; }
.dash-tiles, .dash-kpis { display: flex; flex-wrap: wrap; gap: 12px; }
.dash-tile { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.dash-tile.todo { border-color: var(--warn); }
.dash-tile.problem { border-color: var(--danger); }
.dash-kpi { flex: 1; min-width: 130px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.dash-num { font-family: var(--serif); font-size: 26px; font-weight: 600; display: block; }
.dash-label { font-size: 13px; color: var(--soft); }
.dash-next { list-style: none; margin-top: 6px; }
.dash-next li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.dash-next li:first-child { border-top: none; }
.also-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }

/* Inbox „Kommentare & Bewertungen" (ADR 0034 §5). */
.inbox-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.inbox-filters .seg { font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; text-decoration: none; color: var(--ink); }
.inbox-filters .seg.active { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.inbox-cols { display: flex; gap: 16px; align-items: flex-start; }
.inbox-list { flex: 0 0 260px; max-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.inbox-detail { flex: 1; min-width: 0; }
.inbox-item { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.inbox-item.active { border-color: var(--accent-ink); }
.inbox-item-head { display: flex; align-items: center; gap: 8px; }
.dot-open { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); margin-left: auto; }
.inbox-replies { margin-top: 10px; }
.inbox-secondary { display: flex; gap: 8px; margin-top: 8px; }
.kw-check { display: block; font-size: 13px; margin: 4px 0; }
.notify-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 720px) { .inbox-cols { flex-direction: column; } .inbox-list { flex-basis: auto; max-width: none; width: 100%; } }
.motiv-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.motiv-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.motiv-title { min-width: 0; flex: 1; display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.motiv-title b { font-size: 14px; }
.motiv-units { margin-top: 10px; border-top: 1px solid var(--line); }
.unit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: .12s; }
.unit-row:last-child { border-bottom: none; }
.unit-row:hover { background: color-mix(in srgb, var(--accent-ink) 5%, transparent); }
.unit-row.awaiting { border-left: 2px solid var(--warn); padding-left: 8px; }
.unit-label { flex: none; width: 12ch; font-size: 12.5px; font-weight: 600; }
.unit-row .preview { flex: 1; margin: 0; }
/* flex:none hielt die Chipleiste starr; auf 375 px ragte sie bis 544 px hinaus
   (gemessen). Sie darf schrumpfen und umbrechen. */
.unit-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 0 1 auto;
  min-width: 0; justify-content: flex-end; }

/* Anlegen: Einstieg in der Listenkopfzeile + eigener Anlege-Bereich. */
.beitraege-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.new-post-btn, .back-btn { flex: none; align-self: center; text-decoration: none; }
/* KI = Regelweg: the primary card is visually the lead; the chip marks it recommended. */
.create-primary { border-color: var(--accent-ink); }
.create-primary .chip { display: inline-block; margin-bottom: 8px; }
/* Manual = Ausnahmeweg: a de-emphasised disclosure, opened only when needed. */
.create-manual { margin-top: 14px; }
.create-manual > summary { cursor: pointer; color: var(--soft); font-size: 13px; padding: 8px 2px; list-style: revert; }
.create-manual > summary:hover { color: var(--ink); }
.create-manual[open] > summary { margin-bottom: 6px; }

/* Google-Business-Knopf in der Netzwerk-Aufschlüsselung (Sichtbarkeit des Einfrierens). */
.np-cta-button { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.np-cta-button .muted-sm { word-break: break-all; }

.media-placeholder { border: 1.5px dashed var(--line); border-radius: 10px; padding: 26px; text-align: center;
  color: var(--soft); font-size: 12.5px; background: color-mix(in srgb, var(--soft) 5%, var(--card)); margin-bottom: 12px; }
/* ---- Veröffentlichung und Verbindungen ---- */
.msg.dry { background: rgba(181,152,78,.14); color: var(--ink); border: 1px solid rgba(181,152,78,.4); }
.conn-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Trockenlauf ist kein Zustand des Beitrags, sondern eine Betriebsart des Systems —
   deshalb ein eigener Marker und keine der vier Zustandsfarben. */
.chip.dry { background: rgba(181,152,78,.16); color: var(--ink); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.conn-add { display: grid; gap: 10px; max-width: 100%; width: 420px; }
.pub-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.would-send { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 6px; }
.would-send h4 { margin: 0 0 8px; font-size: 13px; color: var(--soft); }
.ws-row { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.ws-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ws-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; margin-bottom: 6px; }

.media-block { margin-bottom: 12px; }
.media-preview { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 10px; }
.check-reasons { margin: 6px 0 0; padding-left: 18px; }
.check-reasons li { margin: 3px 0; }
.media-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.media-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.media-upload input[type=file] { font-size: 12.5px; color: var(--soft); }
.media-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.media-generate { display: flex; gap: 8px; align-items: center; }
.media-generate select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font-size: 13px; color: var(--ink); }
.overlay-line { font-size: 13px; margin-bottom: 6px; }
.post-caption { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }

.post-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; color: var(--ink); font-family: inherit; resize: vertical; }
.chan-choice { display: flex; gap: 14px; flex-wrap: wrap; }
.chan { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.gate-form .field { max-width: 520px; }
.gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-actions .btn { width: auto; }

.hist-row { padding: 8px 0; border-top: 1px solid var(--line); }
.hist-row:first-of-type { border-top: 0; }
.hist-comment { margin-top: 4px; font-size: 13px; font-style: italic; color: var(--ink); }

/* ---- Startseite: Aktionszeile und Leistungskacheln ---- */

/* Aktionszeile — only rendered when something actually waits on this role's gate. */
.hub-action { display: flex; align-items: center; gap: 16px; background: var(--card);
  border: 1px solid var(--accent-ink); border-radius: var(--r); padding: 16px 18px;
  margin-bottom: 22px; flex-wrap: wrap; }
.hub-action .pin { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.hub-action h4 { font-size: 14.5px; font-weight: 600; }
.hub-action p { font-size: 12.5px; color: var(--soft); }
.hub-action .btn { margin-left: auto; width: auto; }

.leist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.l-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 9px; text-align: left;
  text-decoration: none; color: inherit; transition: .13s; }
.l-card:hover { border-color: var(--accent-ink); transform: translateY(-2px); }
.l-card.off { opacity: .85; }
.l-card.off:hover { transform: none; }
.l-card .li { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft);
  color: var(--accent-ink); display: grid; place-items: center; font-size: 17px; }
/* Deckend ueber --card: die Kachel liegt in einer Karte, und halbtransparent faellt das
   Symbol auf der Seitenflaeche unter AA (4.25). */
.l-card.off .li { background: color-mix(in srgb, var(--soft) 12%, var(--card)); color: var(--soft); }
.l-card h4 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.l-card p { font-size: 12.5px; color: var(--soft); flex: 1; margin: 0; }
.l-card .foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); flex-wrap: wrap; }
.l-card .foot .go { margin-left: auto; color: var(--accent-ink); font-weight: 600; }

@media (max-width: 980px) { .leist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .leist { grid-template-columns: 1fr; } }

/* ---- Freigaben: Motivkarte, Torleiter, Entscheidungszeile ---- */
/* Zaehl-Abzeichen an "Freigaben" in der Navigation. Immer im DOM (stabiles Ziel fuer den
   Out-of-band-Tausch), aber unsichtbar, solange es leer ist. */
.badge { margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn);
  padding: 2px 7px; border-radius: 10px; }
.badge:empty { display: none; }

.motiv-sub { font-size: 12.5px; color: var(--soft); margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap; }
.motiv-open { white-space: nowrap; }

/* Torleiter: drei Schritte mit Punkt, Beschriftung und Verbindungslinie. EIN Markup fuer
   Freigabenliste und Detailansicht (portal/social/_gates.html). */
.gates { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--soft); flex-wrap: wrap; }
.gates .gate { display: flex; align-items: center; gap: 7px; }
.gates .g-dot { width: 21px; height: 21px; border-radius: 50%; display: grid;
  place-items: center; font-size: 10.5px; font-weight: 700; flex: none; }
.gates .g-pass { color: var(--accent-ink); }
.gates .g-pass .g-dot { background: var(--accent-soft); color: var(--accent-ink); }
.gates .g-open { color: var(--warn); font-weight: 600; }
.gates .g-open .g-dot { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); }
.gates .g-wait .g-dot { background: color-mix(in srgb, var(--soft) 12%, var(--card)); color: var(--soft); }
.gates .g-line { width: 26px; height: 1.5px; background: var(--line); margin: 0 4px; flex: none; }

.motiv-units .unit { display: flex; align-items: flex-start; gap: 14px; padding: 12px 2px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.motiv-units .unit:last-child { border-bottom: 0; }
.motiv-units .unit.open { border-left: 2px solid var(--warn); padding-left: 10px; }
.u-name { width: 15ch; flex: none; }
.u-name b { font-size: 13px; display: block; }
.u-name small { font-size: 11.5px; color: var(--soft); }
.u-mid { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.u-preview { color: var(--soft); font-size: 12.5px; }
.u-mid > .link { display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 24px; }
/* Die Telefon-Vorgabe steht hier und nicht oben im Telefon-Block: gleiche
   Spezifitaet, und die Grundregel darueber wuerde sie sonst ueberschreiben. */
@media (max-width: 980px) { .u-mid > .link { min-height: 44px; } }
.u-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.u-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.unit-form .btn { width: auto; }

/* "Aenderung wuenschen" ist eine Aufklappung, weil der Server einen Kommentar verlangt —
   ein blosser Knopf waere ein Fehlklick mit Fehlermeldung. */
.unit-change > summary { list-style: none; cursor: pointer; border: 1px solid var(--line);
  background: var(--card); padding: 8px 16px; border-radius: 9px; font-size: 13px;
  font-weight: 600; display: inline-block; }
.unit-change > summary::-webkit-details-marker { display: none; }
.unit-change > summary:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.unit-change[open] > summary { margin-bottom: 8px; }
.unit-change input { width: 100%; max-width: 340px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  font-size: 13px; color: var(--ink); margin: 4px 0 8px; }

/* Mediathek (M2/M3, ADR 0025 D6) — Raster, Filter, Ton-Kachel, Upload. */
.media-head h2 { margin: 0 0 2px; }
.media-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.media-filter { border: 1px solid var(--line); background: var(--card); color: var(--soft);
  padding: 7px 14px; border-radius: 30px; font-size: 13px; text-decoration: none; }
.media-filter:hover { color: var(--ink); }
.media-filter.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
  border-color: transparent; }
.media-filter .cnt { color: var(--soft); font-size: 12px; }
.media-filter.on .cnt { color: var(--accent-ink); }
.media-filter.is-soon { color: var(--soft); opacity: .6; cursor: default; }
.media-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); justify-content: start;
  gap: 16px; }
.media-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; }
.media-th { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--bg); }
.media-th img { width: 100%; height: 100%; object-fit: cover; }
/* Logos NICHT formatfüllend zuschneiden/zoomen, sondern klein mit Rand einpassen (Mockup). */
.media-th.is-logo { background: #fff; }
.media-th.is-logo img { object-fit: contain; padding: 16px; }
.media-audio { display: grid; place-items: center; gap: 8px; padding: 12px; width: 100%; }
.media-audio-ico { font-size: 26px; color: var(--soft); }
.media-audio audio { width: 100%; }
.media-primary { position: absolute; top: 8px; left: 8px; }
.media-meta { padding: 10px 12px; }
.media-title { display: block; }
.media-desc { margin: 6px 0 0; }
.media-empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 40px 24px; text-align: center; }
.media-upload { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.media-upload-label { font-weight: 600; }
@media (max-width: 640px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mediathek: Karten-Aktionen + Auswahl-Picker im Beitrag (M3-Reststück, ADR 0025 D6). */
.media-card-actions { padding: 0 12px 12px; }
.media-picker { margin-top: 10px; }
.media-picker summary { cursor: pointer; font-size: 13px; color: var(--soft); }
.media-picker-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.media-picker-item { padding: 0; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--card); cursor: pointer; aspect-ratio: 1; }
.media-picker-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-picker-item:hover { border-color: var(--accent); }

/* Mediathek: Suchfeld + Detail-Schublade (M3 Vollausbau, ADR 0025 D6). */
.media-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.media-search input[type="search"] { flex: 1 1 260px; min-width: 200px; border: 1px solid var(--line);
  background: var(--card); border-radius: 30px; padding: 8px 16px; color: var(--ink); }
.media-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(20,26,34,.12);
  z-index: 60; overflow-y: auto; padding: 20px; }
.media-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px; }
.media-drawer-close { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--soft); }
.media-drawer-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.media-drawer-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-drawer-preview.is-logo { background: #fff; }
.media-drawer-preview.is-logo img { object-fit: contain; padding: 18px; }
.media-drawer-preview audio { width: 100%; }
.media-drawer-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.media-drawer-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soft); }
.media-drawer-form input[type="text"], .media-drawer-form textarea, .media-drawer-form select {
  border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.media-drawer-toggle { flex-direction: row !important; align-items: center; gap: 8px; color: var(--ink) !important; }
.media-drawer-actions { margin-top: 4px; }
.media-drawer-facts { display: grid; gap: 8px; margin: 0 0 16px; border-top: 1px solid var(--line);
  padding-top: 14px; font-size: 13px; }
.media-drawer-facts div { display: flex; justify-content: space-between; gap: 12px; }
.media-drawer-facts dt { color: var(--soft); }
.media-drawer-facts dd { margin: 0; text-align: right; }

/* Mediathek: Upload-Bereich (Bild-Drop-Zone + Audio), M3 Vollausbau II. */
.media-uploads { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; }
.media-uploads .media-upload { flex: 1 1 260px; margin-top: 0; }
.media-drop { border-style: dashed; border-color: #cfd6de; transition: border-color .13s, background .13s; }
.media-drop.over { border-color: var(--accent); background: var(--accent-soft); }

/* Karussell (ADR 0029-Nachtrag): Baukasten (Foto-Grid + geordnete Slide-Leiste) + Detail-Streifen. */
.new-post-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.carousel-form { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.carousel-form textarea { width: 100%; }
.cslide-head { display: flex; align-items: baseline; gap: 10px; }
.cslide-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cslide-pick { padding: 0; border: 2px solid transparent; border-radius: 9px; background: none;
  cursor: pointer; overflow: hidden; line-height: 0; }
.cslide-pick img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.cslide-pick.is-picked { border-color: var(--accent); }
.cslide-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cslide-strip:empty::after { content: "Noch keine Slides gewählt."; color: var(--soft); font-size: 13px; }
.cslide { position: relative; width: 120px; }
.cslide img { width: 120px; aspect-ratio: 1/1; object-fit: cover; border-radius: 9px; display: block; }
.cslide-num { position: absolute; top: 4px; left: 4px; z-index: 1; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px;
  line-height: 20px; text-align: center; }
.cslide-ctrls { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.cslide-btn { border: 1px solid #cfd6de; background: var(--card); border-radius: 7px; cursor: pointer;
  width: 26px; height: 24px; font-size: 13px; line-height: 1; }
.cslide-strip.readonly .cslide-num { background: rgba(0,0,0,.7); }
.ki-caption { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ki-caption input { flex: 1 1 240px; }
.media-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* ================================================================================
   Oberflächen-Bauteile Social Media — B1–B9 (ADR 0037 §5), mobil zuerst.
   Alles unter .smv2 gekapselt, damit die generischen Namen (.li/.card/.seg/.chip/
   .msg/.badge) NICHT mit den bestehenden Portal-Klassen kollidieren: ein noch nicht
   umgebautes Template trägt kein .smv2 und bleibt unberührt (§8 „Schritt 1 ist
   ungefährlich"). Farben ausschließlich über --sm-* aus dem :root (§4).
   Ein Template wird umgestellt, indem sein Wurzelknoten die Klasse .smv2 bekommt.
   ================================================================================ */
.smv2 { font-family: var(--sm-body, "Inter", system-ui, sans-serif); color: var(--sm-ink);
  background: var(--sm-paper); -webkit-font-smoothing: antialiased; }
.smv2 * { box-sizing: border-box; }

/* Anzeigeschrift + Grundtypografie (§4.2) */
.smv2 .disp { font-family: var(--sm-disp); font-weight: 600; letter-spacing: -.4px; }
.smv2 .titel { padding: 2px 18px 12px; }
.smv2 .titel h1 { font-family: var(--sm-disp); font-size: 31px; font-weight: 600;
  letter-spacing: -.8px; line-height: 1.1; }
.smv2 .titel p { font-size: 13.5px; color: var(--sm-ink-3); margin-top: 3px; line-height: 1.45; }
.smv2 .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--sm-ink-3); }
.smv2 .hinweis { font-size: 13px; color: var(--sm-ink-3); line-height: 1.55; padding: 12px 22px 0; }

/* B3 — Abschnittsüberschrift (trägt die Sortierung, §B3) */
.smv2 .grp-h { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--sm-ink-3); padding: 20px 22px 7px; }
.smv2 .grp-h .r { float: right; text-transform: none; letter-spacing: 0; font-size: 12.5px;
  color: var(--sm-gruen); }

/* B2 — Gruppierte Liste (ersetzt jede <table>) */
.smv2 .list { background: var(--sm-card); border-radius: 16px; margin: 0 14px; overflow: hidden;
  border: 1px solid var(--sm-line-2); }
.smv2 .li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; position: relative;
  width: 100%; min-height: 56px; background: none; border: 0; text-align: left; color: inherit; }
.smv2 .li + .li::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px;
  background: var(--sm-line-2); }
.smv2 .li .th { width: 50px; height: 50px; border-radius: 11px; flex: none; position: relative;
  overflow: hidden; }
.smv2 .li .tx { flex: 1; min-width: 0; }
.smv2 .li .tx b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smv2 .li .tx .sub { font-size: 12.5px; color: var(--sm-ink-3); margin-top: 2px; font-weight: 400;
  line-height: 1.4; }
/* Rang-Gründe (Blog-Themen, ADR 0040 Punkt 3): die Sätze, WARUM ein Thema oben steht. */
.smv2 .warum { display: block; font-size: 12px; color: var(--sm-gruen); margin-top: 3px; font-weight: 500; line-height: 1.4; }
.smv2 .li .chev { color: #C3C8C3; font-size: 17px; flex: none; font-weight: 600; margin-left: auto; }
.smv2 .li .rechts { margin-left: auto; text-align: right; flex: none; }

/* B1 — Statusmarke: Farbe UND Wort UND Punkt (§B1); in Graustufen über Punkt+Wort lesbar */
.smv2 .st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 9px 3px 7px; border-radius: 20px; line-height: 1.35; white-space: nowrap; }
.smv2 .st .p { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.smv2 .st-wartet { background: var(--sm-bernstein-w); color: var(--sm-bernstein); }
.smv2 .st-wartet .p { background: var(--sm-bernstein); }
.smv2 .st-frei { background: var(--sm-gruen-w); color: var(--sm-gruen); }
.smv2 .st-frei .p { background: var(--sm-gruen); }
.smv2 .st-arbeit { background: var(--sm-blau-w); color: var(--sm-blau); }
.smv2 .st-arbeit .p { background: var(--sm-blau); }
.smv2 .st-live { background: var(--sm-grau-w); color: var(--sm-grau); }
.smv2 .st-live .p { background: var(--sm-grau); }
.smv2 .st-problem { background: var(--sm-rost-w); color: var(--sm-rost); }
.smv2 .st-problem .p { background: var(--sm-rost); }
.smv2 .st-reihe { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.smv2 .st-reihe .zeit { font-size: 12.5px; color: var(--sm-ink-2); font-weight: 500; }

/* Aufruf-Block (Startseite) */
.smv2 .ruf { background: var(--sm-ink); color: #fff; border-radius: 20px; padding: 20px;
  margin: 6px 14px 4px; display: block; width: calc(100% - 28px); position: relative; overflow: hidden; }
.smv2 .ruf .n { font-family: var(--sm-disp); font-size: 56px; font-weight: 600; line-height: .9;
  letter-spacing: -2px; }
.smv2 .ruf .lbl { font-size: 15px; margin-top: 7px; color: #D3DBD6; max-width: 210px; line-height: 1.35; }
.smv2 .ruf .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; background: #fff;
  color: var(--sm-ink); font-weight: 600; font-size: 14.5px; padding: 11px 17px; border-radius: 12px; }

/* B4 — Segmentwähler */
.smv2 .seg { display: flex; gap: 2px; background: #E4E2DB; border-radius: 11px; padding: 2px;
  margin: 4px 14px 12px; overflow-x: auto; scrollbar-width: none; }
.smv2 .seg::-webkit-scrollbar { display: none; }
.smv2 .seg button { flex: 1; text-align: center; padding: 7px 10px; border-radius: 9px; font-size: 13px;
  font-weight: 500; color: var(--sm-ink-2); white-space: nowrap; background: none; border: 0; }
.smv2 .seg button.on { background: #fff; color: var(--sm-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(22,33,30,.1); }

/* B5 — Kennzahlkachel (höchstens vier je Ansicht, §B5) */
.smv2 .zgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px; }
.smv2 .z { background: var(--sm-card); border: 1px solid var(--sm-line-2); border-radius: 16px; padding: 14px; }
.smv2 .z .n { font-family: var(--sm-disp); font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.smv2 .z .l { font-size: 12.5px; color: var(--sm-ink-3); margin-top: 5px; line-height: 1.35; }
.smv2 .z .tr { font-size: 12px; font-weight: 600; margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; }
.smv2 .z .tr.up { color: var(--sm-gruen); }
.smv2 .z .tr.dn { color: var(--sm-rost); }
.smv2 .z .tr.eq { color: var(--sm-ink-3); }

/* B6 — Freigabekarte (Reiter + Bild + Text + Faktenkarte + Prüfsatz) */
.smv2 .reiter { display: flex; gap: 2px; background: #E4E2DB; border-radius: 11px; padding: 2px;
  margin: 2px 14px 12px; }
.smv2 .reiter button { flex: 1; text-align: center; padding: 7px 3px; border-radius: 9px; font-size: 13px;
  font-weight: 500; color: var(--sm-ink-2); background: none; border: 0; min-height: 36px; }
.smv2 .reiter button.on { background: #fff; color: var(--sm-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,33,30,.1); }
.smv2 .pips { display: flex; gap: 4px; }
.smv2 .pips i { width: 20px; height: 3px; border-radius: 3px; background: #D6D3CB; display: block; }
.smv2 .pips i.on { background: var(--sm-ink); }
.smv2 .werk { padding: 0 14px; }
.smv2 .bild { width: 100%; aspect-ratio: 4/5; border-radius: 18px; position: relative; overflow: hidden;
  border: 1px solid rgba(22,33,30,.06); }
.smv2 .bild.story { aspect-ratio: 9/16; }
.smv2 .bild .band { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 20px 20px;
  background: linear-gradient(transparent, rgba(11,19,16,.82) 55%); }
.smv2 .bild .ov { font-family: var(--sm-disp); font-size: 23px; font-weight: 600; color: #fff;
  line-height: 1.16; letter-spacing: -.3px; }
.smv2 .bild .lg { position: absolute; top: 13px; left: 13px; background: rgba(255,255,255,.95);
  border-radius: 9px; padding: 5px 9px; font-family: var(--sm-disp); font-size: 12px; font-weight: 700;
  color: var(--sm-gold); letter-spacing: .4px; }
.smv2 .txt { padding: 15px 3px 0; font-size: 15px; line-height: 1.6; }
.smv2 .txt .mehr { color: var(--sm-gruen); font-weight: 600; }
.smv2 .tags { font-size: 13.5px; color: var(--sm-gruen); margin-top: 9px; font-weight: 500; }
.smv2 .karte { background: var(--sm-card); border-radius: 16px; border: 1px solid var(--sm-line-2);
  margin-top: 15px; overflow: hidden; }
.smv2 .kz { display: flex; align-items: center; gap: 11px; padding: 12px 14px; position: relative; font-size: 14px; }
.smv2 .kz + .kz::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sm-line-2); }
.smv2 .kz .k { color: var(--sm-ink-3); font-size: 13.5px; flex: none; width: 66px; }
.smv2 .kz .v { font-weight: 600; }
.smv2 .kanal { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; margin-right: 11px; }
.smv2 .kanal .p { width: 8px; height: 8px; border-radius: 50%; }
.smv2 .ok { display: flex; align-items: flex-start; gap: 9px; background: var(--sm-gruen-w); border-radius: 14px;
  padding: 12px 14px; margin-top: 12px; font-size: 13.5px; color: #0B5637; line-height: 1.45; font-weight: 500; }
.smv2 .ok .h { font-size: 14px; flex: none; line-height: 1.35; }

/* B7 — Daumenleiste (links zurückhaltend, rechts Hauptsache, §B7) */
.smv2 .daumen { padding: 11px 14px 26px; background: rgba(247,246,242,.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--sm-line); display: flex; gap: 9px; }

/* Ändern: Chips + Rückmeldung */
/* Ändern-Grund-Pillen (nicht die Status-„chip"; der Name bleibt den Zustands-Chips
   vorbehalten, daher hier .grund/.gruende). */
.smv2 .gruende { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 0; }
.smv2 .grund { padding: 10px 15px; border-radius: 22px; border: 1px solid var(--sm-line); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--sm-ink-2); min-height: 44px; display: flex; align-items: center; }
.smv2 .grund.on { background: var(--sm-rost-w); border-color: var(--sm-rost); color: var(--sm-rost); font-weight: 600; }
.smv2 .grund.on::before { content: "✓ "; font-weight: 700; margin-right: 4px; }
.smv2 .rueck { margin: 0 14px; background: var(--sm-card); border: 1px solid var(--sm-line-2); border-radius: 16px; padding: 15px; }
.smv2 .rueck ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 11px; }
.smv2 .rueck li { font-size: 14.5px; font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.smv2 .rueck li .b { color: var(--sm-rost); font-weight: 700; flex: none; }
.smv2 .rueck .leer { font-size: 14px; color: var(--sm-ink-3); font-style: italic; }
.smv2 .feld { width: 100%; border: 0; border-top: 1px solid var(--sm-line-2); padding: 12px 0 0; font-size: 15px;
  resize: none; min-height: 76px; line-height: 1.5; font-family: inherit; color: var(--sm-ink); background: transparent; }

/* Mitte-Block (leere/erledigte Zustände als Einladung, §6.1) */
.smv2 .mitte-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 34px; text-align: center; }
.smv2 .ring { width: 74px; height: 74px; border-radius: 50%; background: var(--sm-gruen-w); display: grid;
  place-items: center; font-size: 31px; color: var(--sm-gruen); margin-bottom: 19px; }
.smv2 .mitte-block h3 { font-family: var(--sm-disp); font-size: 26px; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; }
.smv2 .mitte-block p { color: var(--sm-ink-2); margin-top: 9px; font-size: 15px; line-height: 1.55; }

/* Mediathek-Raster — B14 (ADR 0041 §F3): quadratische Einheitskacheln, Mindestbreite 104px
   (am Telefon so ~drei Spalten statt zwei), object-fit cover. */
.smv2 .mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 0 14px; }
/* B14 Medienkachel: die ganze Kachel öffnet die Detail-Schublade (Aktionen dort). */
.smv2 .mk { border-radius: 11px; overflow: hidden; background: #fff; border: 1px solid var(--sm-line-2);
  width: 100%; padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; display: block; }
.smv2 .mk .th { aspect-ratio: 1; position: relative; display: grid; place-items: center; background: var(--sm-paper); overflow: hidden; }
.smv2 .mk .th img, .smv2 .mk .th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.smv2 .mk .mkr { position: absolute; top: 5px; left: 5px; font-size: 9.5px; font-weight: 600;
  background: rgba(22,33,30,.72); color: #fff; padding: 2px 6px; border-radius: 5px; }
.smv2 .mk .c { padding: 6px 8px 8px; font-size: 12px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smv2 .mk .c small { display: block; font-size: 10.5px; color: var(--sm-ink-3); font-weight: 400; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smv2 .mk-add { border: 1.5px dashed #CCC9C0; border-radius: 11px; display: grid; place-items: center; gap: 2px;
  aspect-ratio: 1; color: var(--sm-ink-3); text-align: center; padding: 8px; background: #fff; font-size: 11.5px; }
/* Alt-Kachel .m bleibt für ältere Ansichten; Mediathek nutzt jetzt .mk. */
.smv2 .m { border-radius: 15px; overflow: hidden; background: #fff; border: 1px solid var(--sm-line-2); width: 100%; }
.smv2 .m .th { aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.smv2 .m .mk { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 600;
  background: rgba(22,33,30,.72); color: #fff; padding: 3px 8px; border-radius: 6px; }
.smv2 .m .c { padding: 10px 12px 12px; font-size: 13.5px; font-weight: 600; }
.smv2 .m .c small { display: block; font-size: 11.5px; color: var(--sm-ink-3); font-weight: 400; margin-top: 2px; }
.smv2 .m-add { border: 1.5px dashed #CCC9C0; border-radius: 15px; display: grid; place-items: center; gap: 5px;
  aspect-ratio: 1; color: var(--sm-ink-3); text-align: center; padding: 14px; background: #fff; }

/* B9 — Schalterzeile (Unterzeile sagt, was passiert, §B9) */
.smv2 .schalter { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; position: relative; }
.smv2 .schalter + .schalter::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sm-line-2); }
.smv2 .schalter .tx b { display: block; font-size: 14.5px; font-weight: 600; }
.smv2 .schalter .tx small { display: block; font-size: 12.5px; color: var(--sm-ink-3); margin-top: 3px; line-height: 1.45; }
.smv2 .sw { width: 50px; height: 30px; border-radius: 16px; background: #D3D0C8; position: relative; flex: none;
  margin-left: auto; transition: .16s; margin-top: 2px; }
/* `.sw-inline` war nie definiert: der Schalter sass in einem 0 px breiten Etikett und
   ragte um seine ganzen 50 px hinaus, in der Automatik-Liste abgeschnitten
   (gemessen 06.09.2026). Ein Etikett, das seinen Schalter traegt, muss ihn auch
   messen. */
.smv2 .sw-inline { display: inline-flex; align-items: center; flex: none; }
.smv2 .sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .16s; }
.smv2 .sw.an { background: var(--sm-gruen); }
.smv2 .sw.an i { left: 23px; }

/* Rundzeichen / Avatar */
.smv2 .av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  flex: none; background: var(--sm-paper); border: 1px solid var(--sm-line-2); }
.smv2 .kr { width: 40px; height: 40px; border-radius: 50%; background: var(--sm-paper); border: 1px solid var(--sm-line-2);
  display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--sm-ink-2); flex: none; }

/* Nachrichtenliste (Kommentare & Bewertungen) */
.smv2 .msg { display: flex; gap: 11px; padding: 13px 14px; position: relative; align-items: flex-start; width: 100%; }
.smv2 .msg + .msg::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sm-line-2); }
.smv2 .msg .tx { flex: 1; min-width: 0; }
.smv2 .msg .tx .kopf { display: flex; align-items: baseline; gap: 8px; }
.smv2 .msg .tx b { font-size: 14.5px; font-weight: 600; }
/* `flex: none` hielt den Quellenhinweis starr — mit einem echten Standortnamen
   („Tamedes Koerperwerkstatt - Podologie & Fusspflege & Kosmetikstudio") sind das
   372 px, die die Liste abgeschnitten hat: der Name war weder lesbar noch
   erreichbar (gemessen 06.09.2026). Er darf jetzt schrumpfen und in die naechste
   Zeile rutschen — deshalb `flex-wrap` an der Kopfzeile. */
.smv2 .msg .tx .kopf { flex-wrap: wrap; row-gap: 2px; }
.smv2 .msg .tx .q { font-size: 11.5px; color: var(--sm-ink-3); margin-left: auto;
  flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.smv2 .msg .tx p { font-size: 14px; color: var(--sm-ink-2); margin-top: 3px; line-height: 1.45; }
.smv2 .msg .tx .fu { font-size: 12.5px; margin-top: 7px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.smv2 .sterne { color: var(--sm-gold); font-size: 14px; letter-spacing: 1px; margin-top: 2px; }
.smv2 .sterne .leer2 { color: #D8D5CD; }
.smv2 .antwort { background: var(--sm-paper); border-radius: 11px; padding: 10px 12px; margin-top: 9px; font-size: 13.5px;
  color: var(--sm-ink-2); line-height: 1.45; border-left: 3px solid var(--sm-gruen); }
.smv2 .antwort .h { font-size: 11.5px; font-weight: 600; color: var(--sm-gruen); display: block; margin-bottom: 3px; }
.smv2 .mini { display: flex; gap: 7px; margin-top: 10px; }
.smv2 .mini button { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--sm-line);
  background: #fff; color: var(--sm-ink-2); }
.smv2 .mini button.g { background: var(--sm-gruen); border-color: var(--sm-gruen); color: #fff; }

/* B8 — Blatt (Formular mit mehr als drei Eingaben, eine Zeile je Angabe, §B8) */
.smv2 .blatt { position: fixed; inset: 0; background: rgba(22,33,30,.4); z-index: 80; display: none; align-items: flex-end; }
.smv2 .blatt.on { display: flex; }
.smv2 .blatt .inner { background: var(--sm-paper); width: 100%; max-height: 88%; border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; overflow: hidden; }
.smv2 .blatt .bk { padding: 14px 18px; display: flex; align-items: center; border-bottom: 1px solid var(--sm-line); background: var(--sm-paper); }
.smv2 .blatt .bk b { font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
.smv2 .blatt .bk .l, .smv2 .blatt .bk .r { font-size: 14.5px; color: var(--sm-gruen); font-weight: 600; width: 64px;
  background: none; border: 0; cursor: pointer; min-height: 44px; }
.smv2 .blatt .bk .r { text-align: right; }
.smv2 .blatt .bd { overflow-y: auto; padding-bottom: 20px; }
.smv2 .zeile { display: flex; align-items: center; gap: 11px; padding: 13px 14px; position: relative; min-height: 52px; }
.smv2 .zeile + .zeile::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sm-line-2); }
/* Nur der BESCHRIFTUNGS-span traegt die feste Spaltenbreite. Frueher stand hier
   `.zeile .k`, und weil `k` im Knopf-System dieselbe Klasse ist, bekam jeder Knopf
   in einer Zeile 118 px und durfte nicht schrumpfen — bei 375 px stand er ueber den
   Rand hinaus (gemessen 06.09.2026: +131 px unter Bewertungen -> Einstellungen).
   Sieben Knoepfe und Verweise im Portal waren betroffen. */
.smv2 .zeile > span.k { font-size: 14.5px; flex: none; width: 118px; color: var(--sm-ink-2); }
.smv2 .zeile input[type=text], .smv2 .zeile select { flex: 1; border: 0; background: transparent; font-size: 15px;
  font-family: inherit; color: var(--sm-ink); text-align: right; font-weight: 500; appearance: none; -webkit-appearance: none; }
.smv2 .zeile .pfeil { color: #C3C8C3; font-size: 15px; font-weight: 600; }
/* Stepper — KEIN neues Bauteil, nur Anordnung vorhandener Teile: B12-Zeile + zwei B10-
   .k-klein-Knöpfe (−/+) um einen mittigen Wert (Blog-Takt/Verhältnis, ADR 0040). */
.smv2 .stepper { display: inline-flex; align-items: center; gap: 8px; }
/* 44 statt 40: das Portal gibt sich unter 980 px 44 px vor, und „−"/„+" sind die
   kleinsten Ziele im ganzen Blogmodul (gemessen 06.09.2026). */
.smv2 .stepper .k { min-width: 44px; padding: 0; }
.smv2 .stepper output { min-width: 2ch; text-align: center; font-size: 15px; font-weight: 600; color: var(--sm-ink); }
.smv2 .tarea { width: 100%; border: 0; background: transparent; font-size: 15px; font-family: inherit; line-height: 1.55;
  padding: 13px 14px; resize: none; min-height: 88px; color: var(--sm-ink); }

/* Untere Reiter (Telefon-Navigation, §7.1) */
.smv2 .tabs { display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--sm-line); padding: 8px 4px 26px; }
.smv2 .tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px;
  color: var(--sm-ink-3); font-weight: 500; padding: 4px 0; position: relative; background: none; border: 0; }
.smv2 .tabs button .i { font-size: 19px; line-height: 1; }
.smv2 .tabs button.on { color: var(--sm-ink); font-weight: 600; }
.smv2 .tabs .badge { position: absolute; top: -1px; right: 50%; margin-right: -19px; background: var(--sm-rost); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }

/* Platzhalter-Farbflächen (Motiv-Vorschau ohne Bild) + Logo-Attrappe */
.smv2 .f1 { background: linear-gradient(155deg, #C4D2C5, #3C5847); }
.smv2 .f2 { background: linear-gradient(155deg, #DBCAAE, #786142); }
.smv2 .f3 { background: linear-gradient(155deg, #C1C9D5, #41505E); }
.smv2 .f4 { background: linear-gradient(155deg, #D6C1BF, #6A4947); }
.smv2 .f5 { background: linear-gradient(155deg, #CAD7CD, #496051); }
.smv2 .f6 { background: linear-gradient(155deg, #D3CBBB, #635846); }

/* Plattform-Punkt: Farbe über Marke (§9.3), z. B. <span class="p net-instagram"> */
.smv2 .net-instagram { background: var(--sm-net-instagram); }
.smv2 .net-facebook { background: var(--sm-net-facebook); }
.smv2 .net-google { background: var(--sm-net-google); }

/* Freigaben Schritt 2 — Motivkarte, Fassungspanel, inline-Aktionsleiste (ADR 0037 §8/2).
   Die Freigaben-Liste stapelt mehrere B6-Karten; die Daumenleiste ist deshalb hier inline
   je Karte (B7-Prinzip bleibt: links „Ändern", rechts „Alle freigeben"). */
.smv2 .werk-liste { display: flex; flex-direction: column; gap: 16px; padding: 4px 14px 24px; }
.smv2 .karte-motiv { background: var(--sm-card); border: 1px solid var(--sm-line-2); border-radius: 16px; overflow: hidden; }
/* Freigaben-Cover flacher + gedeckelt, damit mehr Beiträge auf eine Seite passen
   (Nutzerwunsch: Bild war zu groß). 16/9 statt 3/2, Höhe max. 190px. */
.smv2 .karte-motiv > .bild { aspect-ratio: 16/9; max-height: 190px; border-radius: 0; border: 0; border-bottom: 1px solid var(--sm-line-2); }
.smv2 .karte-kopf { padding: 12px 14px 0; }
.smv2 .karte-kopf b { font-family: var(--sm-disp); font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.smv2 .karte-sub { font-size: 12.5px; color: var(--sm-ink-3); margin-top: 2px; }
.smv2 .karte-motiv .reiter { margin: 10px 14px 4px; }
.smv2 .karte-motiv .werk { padding: 0 14px; }
.smv2 .fassung { padding: 4px 0 0; }
.smv2 .fassung .txt p { margin-top: 4px; }
.smv2 .fassung-form { display: none; }
.smv2 .unit-when { margin: 8px 14px 0; font-size: 13.5px; color: var(--sm-ink-2); }
.smv2 .unit-when summary { cursor: pointer; padding: 8px 0; list-style: none; }
.smv2 .unit-when label { display: flex; align-items: center; gap: 7px; padding: 6px 0; min-height: 44px; }
.smv2 .karte-motiv .rueck { margin: 10px 14px 0; }
.smv2 .daumen-inline { display: flex; gap: 9px; padding: 12px 14px 16px; }
.smv2 .daumen-inline > button { flex: 1; min-height: 44px; }

/* Beiträge Schritt 3 — Segment-Links (Phasenfilter) + Kopf-Aktionszeile (ADR 0037 §8/3). */
.smv2 .seg a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 9px; font-size: 13px;
  font-weight: 500; color: var(--sm-ink-2); white-space: nowrap; text-decoration: none; min-height: 44px;
  display: flex; align-items: center; justify-content: center; }
.smv2 .seg a.on { background: #fff; color: var(--sm-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,33,30,.1); }
.smv2 .kopf-akt { display: flex; gap: 9px; padding: 10px 14px 0; }
.smv2 .kopf-akt a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; }

/* ── ADR 0037 Vereinfachung — Proportionen angleichen (rein darstellend) ───────
   (1) Freigabe-Cover füllt die Fläche statt als 44px-Briefmarke zu kleben;
   (2) Detail-Alt-Blöcke (.card/.media-preview) tragen die sm-Tokens/-Ränder, damit
       die Seite nicht zwischen zwei Formensprachen springt;
   (3) Mediathek-Kachelknöpfe sind keine B7-Hauptknöpfe — kleiner dimensioniert. */

/* (1) Freigaben: Motivbild füllt die B6-Coverfläche (überschreibt die 44px der
   alten Motiv-Liste, sobald das Bild in der Karte steckt). */
.smv2 .karte-motiv .bild .motiv-thumb { position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; border: 0; }

/* (2) Detail: Alt-Karten + Bildvorschau an die Bauteil-Maße (gleicher Rand-Gutter,
   16px-Radius, volle Bildbreite statt 320px-Deckel). */
.smv2 .card { background: var(--sm-card); border: 1px solid var(--sm-line-2); border-radius: 16px;
  padding: 16px; margin: 15px 14px 0; }
.smv2 .card h3 { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--sm-ink-3); margin-bottom: 11px; }
.smv2 .card h4 { color: var(--sm-ink-3); }
.smv2 .media-preview { max-width: 100%; border-radius: 16px; }
.smv2 .media-placeholder { border-radius: 16px; }
.smv2 .post-caption { font-size: 15px; line-height: 1.6; color: var(--sm-ink); }

/* (4) Aufklapp-Zeilen (details/summary): der rohe Browser-Pfeil ▶ passt nicht zur
   Bauteil-Optik — der Summary-Text trägt die Affordance selbst (wie die Mockup-Vorlage).
   Betrifft „Verwalten"/„Termin ändern"/„Selbst antworten" u. a. sowie den grünen
   Einladen-Knopf in Team (dort saß der Pfeil neben dem Button). */
.smv2 details > summary { list-style: none; cursor: pointer; }
.smv2 details > summary::-webkit-details-marker { display: none; }


/* ══ ADR 0041 — Gestaltungsgrundlage: neue Bauteile B10–B16 ═══════════════════
   Maße/Radien aus docs/portal/gestaltungsgrundlage-v01.html (:root + Bauteil-
   klassen), als px aufgelöst (--s2=8, --s3=12, --s4=16, --s5=20, --s6=24,
   --s8=32; --r-knopf=14, --r-karte=16, --tap=44). Farben über die
   AA-korrigierten --sm-*-Tokens (drei Töne weichen bewusst von der Vorlage ab
   und werden von tests/test_portal_contrast.py bewacht). Schritt 1: nur
   Stylesheet, KEIN Template ändert sich — die Bauteile werden erst in den
   Folgeschritten benutzt.
   • B11 (Schalter .sw/.schalter) ist bereits gebaut (ADR 0037) und bleibt.
   • B14 (Medienkachel .mgrid/.mk) folgt in Schritt 3 zusammen mit dem
     Mediathek-Template, weil es dieselben Klassennamen wie die Live-Mediathek
     teilt — es hier zu ändern würde die bestehende Mediathek umbauen. */

/* B10 — Knöpfe (sechs Formen, feste Höhen). Basis nur auf Knopf/Link, damit die
   bestehenden Feldlabel <span class="k"> (in .zeile/.kz) unberührt bleiben. */
.smv2 a.k, .smv2 button.k { display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 14px; font-weight: 600; transition: .12s; min-height: 44px; padding: 0 20px;
  font-size: 15px; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer;
  text-decoration: none; }
.smv2 .k-haupt { background: var(--sm-gruen); color: #fff; box-shadow: 0 3px 0 #0A5A36; }
.smv2 .k-haupt:active { transform: translateY(2px); box-shadow: 0 1px 0 #0A5A36; }
.smv2 .k-warn { background: var(--sm-rost); color: #fff; box-shadow: 0 3px 0 #8C3624; }
.smv2 .k-warn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8C3624; }
.smv2 .k-neben { background: #fff; border: 1px solid var(--sm-line); color: var(--sm-ink-2); }
.smv2 .k-neben:hover { border-color: var(--sm-ink-3); color: var(--sm-ink); }
.smv2 .k-still { color: var(--sm-gruen); padding: 0 8px; background: none; }
.smv2 .k-still:hover { text-decoration: underline; }
.smv2 a.k[disabled], .smv2 button.k[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.smv2 .k-klein { min-height: 36px; font-size: 13px; padding: 0 16px; border-radius: 10px; box-shadow: none; }
.smv2 .k-klein:active { transform: none; }
.smv2 .k-voll { width: 100%; }
.smv2 .k-rund { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: #fff;
  border: 1px solid var(--sm-line); color: var(--sm-ink-2); font-size: 17px; }

/* B12 — Eingabezeile (eine Angabe je Zeile). Label = .k2 (Vorlage), nicht .k,
   damit es nicht mit dem Knopf kollidiert. */
.smv2 .feldzeile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; min-height: 52px; }
.smv2 .feldzeile + .feldzeile::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--sm-line-2); }
.smv2 .feldzeile .k2 { font-size: 14.5px; color: var(--sm-ink-2); flex: none; width: 118px; }
.smv2 .feldzeile input, .smv2 .feldzeile select { flex: 1; border: 0; background: transparent; font-size: 15px;
  color: var(--sm-ink); text-align: right; font-weight: 500; appearance: none; -webkit-appearance: none;
  min-height: 36px; font-family: inherit; }
.smv2 .feldzeile input::placeholder { color: var(--sm-ink-3); font-weight: 400; }
.smv2 .feldzeile .pf { color: #C3C8C3; font-size: 15px; font-weight: 600; }

/* B13 — Kopfreiter (Modulebene). Der Guard hält die gleichnamige, ältere
   Nachrichten-Kopfzeile .msg .tx .kopf unverändert. */
.smv2 .kopf { border-bottom: 1px solid var(--sm-line); background: var(--sm-paper); }
.smv2 .msg .tx .kopf { border-bottom: 0; background: none; }
.smv2 .kopf .zeile { display: flex; gap: 20px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; min-height: 0; }
.smv2 .kopf .zeile::-webkit-scrollbar { display: none; }

/* ── Eine Leiste, die zur Seite laeuft, zeigt es (gemessen 06.09.2026) ─────────
   Die Kopfreiter und der Segmentwaehler scrollen waagerecht — technisch richtig, aber
   ohne jeden Hinweis darauf. Bei 375 px lagen bis zu 366 px Reiter ausserhalb des
   Bildes, mehr als der Bildschirm breit ist; wer nicht zufaellig wischt, findet
   „Marke" nie.

   Die Blende ist eine MASKE auf der Leiste selbst, kein zusaetzliches Element: ein
   `::after` in einem scrollenden Kasten wandert mit dem Inhalt und stuende nach dem
   ersten Wischen mitten drin. Die Maske haengt am Kasten und bleibt an der Kante.

   Die Klassen setzt `shell.html` je nach Scrollstand. Bleiben sie aus (kein
   JavaScript), sieht es aus wie bisher — nicht schlechter. */
.smv2 .mehr-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
.smv2 .mehr-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
.smv2 .mehr-l.mehr-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
.smv2 .kopf a { padding: 12px 2px; font-size: 14px; font-weight: 500; color: var(--sm-ink-3); white-space: nowrap;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; min-height: 44px; display: flex; align-items: center;
  text-decoration: none; }
.smv2 .kopf a.on { color: var(--sm-ink); font-weight: 600; border-bottom-color: var(--sm-ink); }

/* B15 — Monatskalender. */
.smv2 .kal { background: #fff; border: 1px solid var(--sm-line-2); border-radius: 16px; overflow: hidden; }
.smv2 .kal .kopfz { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sm-line-2); }
.smv2 .kal .kopfz b { font-family: var(--sm-disp); font-size: 17px; font-weight: 600; flex: 1; }
.smv2 .kal .wt { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--sm-line-2); }
.smv2 .kal .wt span { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--sm-ink-3); padding: 8px 0; text-transform: uppercase; }
.smv2 .kal .tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.smv2 .kal .tag { aspect-ratio: 1; border-right: 1px solid var(--sm-line-2); border-bottom: 1px solid var(--sm-line-2);
  padding: 5px; display: flex; flex-direction: column; gap: 3px; position: relative; min-height: 46px; }
.smv2 .kal .tag:nth-child(7n) { border-right: 0; }
.smv2 .kal .tag .d { font-size: 11.5px; color: var(--sm-ink-3); font-weight: 500; line-height: 1; }
.smv2 .kal .tag.heute .d { background: var(--sm-ink); color: #fff; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; }
.smv2 .kal .tag.fremd { background: var(--sm-paper); }
.smv2 .kal .tag.fremd .d { opacity: .4; }
.smv2 .kal .pkt { display: flex; gap: 2px; flex-wrap: wrap; margin-top: auto; }
.smv2 .kal .pkt i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.smv2 .p-wartet { background: var(--sm-bernstein); }
.smv2 .p-frei { background: var(--sm-gruen); }
.smv2 .p-arbeit { background: var(--sm-blau); }
.smv2 .p-live { background: var(--sm-grau); }
.smv2 .kal .kampagne { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sm-gold); }
/* Klickbare Kalenderzellen (Blog-Planer, ADR 0040): dieselbe .tag-Optik, aber als <button>
   bedienbar — Reset der Browser-Chrome, Gitterlinien wie bei den div-Zellen. */
.smv2 .kal .tage button.tag { -webkit-appearance: none; appearance: none; font: inherit;
  color: inherit; text-align: left; cursor: pointer; background: #fff;
  border: 0; border-right: 1px solid var(--sm-line-2); border-bottom: 1px solid var(--sm-line-2); }
.smv2 .kal .tage button.tag:nth-child(7n) { border-right: 0; }
.smv2 .kal .tage button.tag:hover { background: var(--sm-paper); }
.smv2 .kal .tag.frei .plus { margin-top: auto; font-size: 16px; line-height: 1; color: var(--sm-ink-3); font-weight: 600; }
.smv2 .kal .tage button.tag.frei:hover .plus { color: var(--sm-gruen); }

/* B16 — Leerzustand. Der Guard hält den gleichnamigen, älteren Rückmeldungs-
   Leertext .rueck .leer (Fließtext) unverändert. */
.smv2 .leer { text-align: center; padding: 32px 24px; }
.smv2 .rueck .leer { text-align: left; padding: 0; }
.smv2 .leer .zeichen { width: 56px; height: 56px; border-radius: 50%; background: var(--sm-paper);
  border: 1px solid var(--sm-line-2); display: grid; place-items: center; font-size: 23px; color: var(--sm-ink-3); margin: 0 auto 16px; }
.smv2 .leer h4 { font-family: var(--sm-disp); font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.smv2 .leer p { color: var(--sm-ink-2); font-size: 14px; margin-top: 6px; max-width: 330px; margin-left: auto; margin-right: auto; line-height: 1.55; }
.smv2 .leer .k { margin-top: 16px; }


/* ══ ADR 0041 §F (Schritt 1b) — Konto & Verwaltung unter .smv2 ═══════════════
   Die settings-Templates trugen ein älteres, ungeordnetes Formularlayout
   (Beschriftung + Feld liefen inline). Unter .smv2 strukturieren wir die
   bestehenden Alt-Klassen zu „eine Angabe je Zeile": Label über dem vollbreiten
   Feld (für die vielen Textareas passender als die rechtsbündige Eingabezeile).
   Stammdaten nutzt die echte B12-Eingabezeile (.feldzeile) direkt im Markup. */
.smv2 #settings-main h3 { font-family: var(--sm-disp); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.smv2 #settings-main h4 { font-size: 12px; font-weight: 600; color: var(--sm-ink-3); margin: 14px 0 6px;
  text-transform: uppercase; letter-spacing: .4px; }
.smv2 .grid2 { display: grid; gap: 12px; }
.smv2 .field, .smv2 .dna-form label, .smv2 .rule-add, .smv2 .loc-grid {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13.5px;
  font-weight: 500; color: var(--sm-ink-2); }
.smv2 .field input, .smv2 .field select, .smv2 .field textarea,
.smv2 .dna-form input, .smv2 .dna-form select, .smv2 .dna-form textarea,
.smv2 .rule-add input, .smv2 .rule-add select, .smv2 .loc-grid input {
  width: 100%; border: 1px solid var(--sm-line); border-radius: 10px; padding: 10px 12px;
  font-size: 15px; font-family: inherit; color: var(--sm-ink); background: #fff; }
.smv2 #settings-main textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.smv2 #settings-main .muted-sm { font-size: 12.5px; color: var(--sm-ink-3); line-height: 1.45; }
.smv2 .rule, .smv2 .src-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--sm-line-2); }
.smv2 .rule-text, .smv2 .src-label { flex: 1; font-size: 14px; }
.smv2 .rule-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.smv2 .add-row { border-top: 1px solid var(--sm-line-2); margin-top: 12px; padding-top: 10px; }
.smv2 .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.smv2 .collbl { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--sm-ink-2); }
.smv2 .voice-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.smv2 .wissen-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.smv2 .wissen-filter a { font-size: 13px; padding: 6px 11px; border: 1px solid var(--sm-line);
  border-radius: 20px; color: var(--sm-ink-2); text-decoration: none; }
.smv2 .wissen-filter a.active { background: var(--sm-ink); color: #fff; border-color: var(--sm-ink); }
.smv2 details.edit > summary { color: var(--sm-gruen); font-weight: 600; font-size: 13px; padding: 4px 0; }
/* Regel-Bearbeiten INLINE (kein Aufklapp-Frame): der Text links wird direkt beschreibbar.
   .rule-view weicht dem Textfeld, sobald die Zeile .editing trägt (per Knopf umgeschaltet). */
.rule .rule-edit-inline { display: none; width: 100%; }
.rule.editing .rule-edit-inline { display: block; margin-top: 4px; }
.rule.editing .rule-view { display: none; }
.rule .rule-edit-inline textarea { width: 100%; resize: vertical; min-height: 52px; font-family: inherit; }
.rule-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
/* `minmax(0, 1fr)` statt `1fr`: ein blosses `1fr` ist `minmax(auto, 1fr)` und laesst
   sich von einem breiten Kind aufdruecken — genau so zog das Logofeld die Seite mit
   (gemessen 06.09.2026). Dieselbe Schreibweise wie bei .leist und .media-grid. */
.smv2 .logo-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.smv2 .logo-box { border: 1px solid var(--sm-line-2); border-radius: 11px; background: var(--sm-paper);
  display: grid; place-items: center; min-height: 64px; overflow: hidden; margin-bottom: 6px; }
.smv2 .logo-box img { max-width: 100%; max-height: 80px; }
.smv2 .cat, .smv2 .chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; background: var(--sm-gruen-w); color: var(--sm-gruen); }
/* Statuschips unter .smv2 (Audit HOCH): die generische .smv2 .chip-Regel steht SPÄTER als
   die .chip.c-*-Farbregeln (Zeile ~161) und bei gleicher Spezifität würde sie alle Chips grün
   färben — Status ginge verloren. Diese .smv2-scoped Varianten (drei Klassen = höhere
   Spezifität) stellen Farbe je Zustand wieder her, auf der sm-Palette (Farbe + Wort). */
.smv2 .chip.c-live { background: var(--sm-gruen-w); color: var(--sm-gruen); }
.smv2 .chip.c-appr { background: var(--sm-bernstein-w); color: var(--sm-bernstein); }
.smv2 .chip.c-plan { background: var(--sm-blau-w); color: var(--sm-blau); }
.smv2 .chip.c-soon { background: var(--sm-grau-w); color: var(--sm-grau); }
.smv2 .chip.c-stop { background: var(--sm-rost-w); color: var(--sm-rost); }
.smv2 .chip.dry { background: var(--sm-bernstein-w); color: var(--sm-bernstein); }

/* ══ Tablet- und Handy-Stufe — ganz am Ende, mit Absicht ══════════════════════
   Zwei Bloecke, der engere zuletzt. Sie stehen hier, weil eine Media Query die
   Spezifitaet NICHT erhoeht: weiter oben ueberschriebe sie jede spaeter notierte Regel
   gleicher Spezifitaet. Genau daran ist zweimal etwas gescheitert — die Einspaltigkeit
   des Logofelds und die Hoehe der Eingabefelder in der Feldzeile. */
@media (max-width: 980px) {
  /* `.smv2 .feldzeile input { min-height: 36px }` steht weiter oben, aber SPAETER als die
     44-px-Liste — und gewann damit. Das Portal gibt sich unter 980 px 44 px vor. */
  .smv2 .feldzeile input, .smv2 .feldzeile select { min-height: 44px; }

  /* Kurze Reiter („Team", „Marke") sind nur so breit wie ihr Wort — 40 px. Die Vorgabe
     gilt ab 980 px abwaerts, nicht erst ab 640. */
  .smv2 .kopf .zeile > * { min-width: 44px; }
  /* Der Segmentwaehler kam auf 43 px — und zwar in der BREITE: sechs Eintraege teilen
     sich die Leiste, ein kurzer („Alle") wird schmal. Beide Kanten zaehlen. */
  .smv2 .seg > * { min-height: 44px; min-width: 44px; }
}

/* ══ Handy-Stufe — ganz am Ende, mit Absicht ═══════════════════════════════════
   Eine Media Query erhoeht die Spezifitaet NICHT. Stand dieser Block weiter oben,
   ueberschrieb ihn jede spaeter notierte Regel gleicher Spezifitaet — genau das ist
   beim ersten Anlauf passiert: `.smv2 .logo-edit` weiter unten gewann, und die
   Einspaltigkeit auf dem Telefon griff nie. Am Dateiende kann das nicht mehr
   passieren; alles Neue kommt davor. */
@media (max-width: 640px) {
  .smv2 .feldzeile .k2 { width: 92px; }

  /* ── Handy-Stufe (gemessen 06.09.2026) ──────────────────────────────────────
     Bis hierher gab es unterhalb von 640 px genau eine Regel; jedes Telefon sah das
     Tablet-Layout von 980 px. Eine Zeile ist „Beschriftung + Bedienelement" und war
     starr einzeilig — passte beides nicht nebeneinander, stand es ueber den Rand
     hinaus und die Seite liess sich seitlich schieben.

     `flex-wrap` bricht NUR UM, WENN es noetig ist: eine Zeile, die passt, bleibt
     einzeilig. `min-width: 0` hebt die Voreinstellung `min-width: auto` von
     Flex-Kindern auf — ohne sie weigert sich ein Eingabefeld zu schrumpfen, auch
     wenn `flex: 1` es erlaubt. */
  .smv2 .zeile, .smv2 .feldzeile { flex-wrap: wrap; row-gap: 8px; }
  .smv2 .zeile > *, .smv2 .feldzeile > * { min-width: 0; }
  /* Die Kopfreiter sind KEINE Formularzeile — sie laufen zur Seite und duerfen weder
     umbrechen noch schrumpfen. Ohne die zweite Zeile stauchte `min-width: 0` von oben
     jeden Reiter unter seine Beschriftung: „Schluesselwoerter" stand mit 80 statt 110 px
     da und war abgeschnitten, die Leiste scrollte gar nicht mehr. */
  .smv2 .kopf .zeile { flex-wrap: nowrap; row-gap: 0; }
  /* `flex: none` verhindert das Stauchen — ohne das druckte `min-width: 0` von oben
     jeden Reiter unter seine Beschriftung. Die Trefferbreite setzt die 980er-Stufe. */
  .smv2 .kopf .zeile > * { flex: none; }

  /* Rutscht ein Feld in die zweite Zeile, nimmt es sie ganz — rechtsbuendiger Text in
     einem vollbreiten Feld liest sich falsch, also links. */
  .smv2 .zeile input[type=text], .smv2 .feldzeile input,
  .smv2 .feldzeile select { flex: 1 1 55%; }
  /* Ein Auswahlfeld nimmt die Zeile ganz. Teilt es sie mit einem Schalter, waechst es
     ueber die Breite und schiebt den Schalter hinaus (gemessen: Automatik, +33 px). */
  .smv2 .zeile select { flex: 1 1 100%; }
  .smv2 .feldzeile input:last-child, .smv2 .feldzeile select:last-child { text-align: right; }

  /* Zwei Logovorschauen nebeneinander sind auf dem Telefon zwei zu wenig sichtbare. */
  .smv2 .logo-edit { grid-template-columns: minmax(0, 1fr); }

  /* Der Kicker ueber der Ueberschrift sagt woertlich, was zwei Zeilen darueber schon in
     der Brotkrume steht („Google Bewertungen"). Auf dem Telefon kostet diese Wiederholung
     Bildschirm, den die Ansicht braucht: bis zur Ueberschrift vergingen im Mittel 150 px
     von 667, im Bewertungsmodul 239 (gemessen 06.09.2026). */
  .smv2 .titel .kicker { display: none; }
  .smv2 .titel { padding-top: 14px; }

  /* Aktionsknoepfe unter einer Nachricht: drei nebeneinander passen nicht auf 375 px,
     und die Liste schneidet ab statt zu scrollen — „Weiterleiten" war nicht antippbar
     (gemessen 06.09.2026). Sie brechen jetzt um. */
  .smv2 .mini { flex-wrap: wrap; row-gap: 7px; }

  /* Eine Statusmarke mit langem Satz („Zurueck im Portal — der Kanal wird jetzt
     uebernommen") ist keine Marke mehr, sondern ein Satz: er darf umbrechen. */
  .smv2 .st { white-space: normal; }
}