/* ============================================================
   mp-brand.css — Marktplatz im Designsystem «Editorial Brand»
   avguide.ch · Marktplatz II · ab Etappe 2 (Modul v1.18)

   DIES IST DIE AKTIVE STYLESHEET-DATEI DES MODULS. Jede neue oder neu
   gebaute Ansicht wird ausschliesslich hier gestylt. Die Schwesterdatei
   mp-legacy.css enthaelt nur noch das retokenisierte Alt-Design der noch
   nicht neu gebauten Views (Auth, Migration, Wizard, Konto, Nachrichten,
   Zahlungen, Profil, Legal) — sie darf ausschliesslich schrumpfen, nie
   wachsen, und verschwindet mit Etappe 4.

   Ladefolge (BaseHandler.preHandler): brand.css → mp-brand.css → optional
   mp-legacy.css. mp-brand.css laedt auf ALLEN Marktplatz-Seiten (es traegt
   Tokens, Basis und Formularfelder), mp-legacy.css nur fuer die Handler in
   variables.legacyCssHandlers.

   --- Zwei Regeln, aus Live-Fehlern gelernt (27.7.2026) ---

   1. KLASSENNAMEN IMMER MIT mp-PRAEFIX. brand.css ist site-weit mitgeladen
      und fuehrt eine eigene Komponentenbibliothek. Unpraefixierte
      Prototyp-Namen kollidieren dort. Realer Schaden: brand.css .btn-ghost
      setzt margin-top:16px; die gleichnamige Modulklasse deklarierte kein
      margin, also blieb der Wert aktiv und streckte den Nachbarbutton in
      der Flex-Zeile mit.
      Ausnahme: bewusst geteilte Brand-Komponenten ohne eigene Definition
      hier — .wrap · .kicker · .pic · .meta · .dots · .breadcrumb ·
      .badge-trust · .sec-head/.sec-label/.sec-more · .btn-brand.

   2. KEINE ELEMENT-SELEKTOREN UNTER .mp-wrap. Die geloeschte Regel
      ".mp-wrap a { color: inherit }" hatte Spezifitaet 0,1,1 und schlug
      damit jede Klassenregel (0,1,0) — konkret bekam der Primaerbutton
      <a class="mp-btn-ink"> schwarze statt weisser Schrift. Basis-Resets
      gehoeren brand.css; hier wird ausschliesslich ueber Klassen gestylt.

   Token-Regel: die semantischen Tokens (--bg, --surface, --surface-2, --ink,
   --ink-2, --ink-3, --line, --brand, --brand-deep, --backdrop, --font-*)
   kommen aus brand.css :root und werden hier NIE redefiniert. Rohe Farbwerte
   nur im Sentinel-Block unten (Review-Check: tests/specs/unit/css/NoRawHexTest.cfc).
   ============================================================ */

/* TOKENS:BEGIN — einziger Ort für Rohwerte (NoRawHexTest) */
.mp-wrap, .mp-home {
    /* Rundungen: Brand-Regel «keine Rundungen» — nur Kreise/Pills bleiben rund */
    --mp-radius: 0;
    --mp-radius-lg: 0;
    --mp-radius-full: 999px;
    --msg-split-height: 600px;
    /* Status-Farben (das Brand-Vokabular kennt bewusst keine Semantikfarben;
       mp braucht sie für Formular-/Zahlungs-Feedback — Modul-Tokens, gescoped).
       Waermer abgestimmt 28.7.2026 (User-Entscheid): das kuehle Salbeigruen/
       Pink-Rot der v1.17-Palette stach gegen die warme Creme-Basis (--bg
       #FBFBF9, --surface #F4F2ED) heraus — jetzt Moosgruen/Terrakotta mit
       Gelbanteil, Warn-Toene passten bereits und bleiben. */
    --mp-ok-ink:   #48511D;
    --mp-ok-bg:    #EFF0E2;
    --mp-ok-line:  #D3D6B4;
    /* Fehler-Rot nachgeschaerft 11.9.2026 (Betreiber, Endkontrolle Inserat-
       Formular): das Terrakotta #8E3B2C ging neben den Hinweistexten unter.
       Neu ein warmes Zinnober mit Gelbanteil — bleibt im Creme/Gelb-Raum der
       Brand, ist aber gesaettigter; Kontrast auf --bg ~6:1. Teller und Linie
       ziehen mit, damit .mp-flash.err nicht auseinanderfaellt. */
    --mp-err-ink:  #B3311D;
    --mp-err-bg:   #F8E9E3;
    --mp-err-line: #E4B29F;
    --mp-warn-ink: #633806;
    --mp-warn-bg:  #FAEEDA;
    /* Übergangs-Tokens (Abbau der Schatten/Ringe in den Komponenten-Phasen) */
    --mp-shadow-color: rgba(0,0,0,.12);
    --mp-focus-ring:   rgba(27,28,30,.15);
}
/* TOKENS:END */

/* ============================================================
   KANONISCHE FORMULARFELDER — einzige Definitionsstelle im Modul.
   Referenz: Inserat-Formular (Ansicht C, Prototyp v8), festgeschrieben in
   docs/martkplatz_branddesign-integration/prompt_form_inputs.md.
   Ausserhalb dieses Blocks darf keine Regel mehr padding/border/font-size/
   focus auf input/textarea/select setzen (Review-Grep, siehe CHANGELOG).

   Auth (Login/Registrieren/Passwort-Reset) und der Konto-/OTP-Schritt des
   Migration-Claim-Flows nutzen diesen Block seit Etappe 4b (Modul v1.19,
   Tailwind komplett entfernt). Bewusst NICHT umgestellt: der Inserat-Wizard
   nutzt bereits denselben Standard — offen bleibt nur die Legacy-Kartenauswahl
   in migration/claim.cfm (.mp-card/.mp-grid, geteilt mit profiles/show.cfm,
   siehe Codestyle-Guide).
   ============================================================ */
.mp-field {
    display: block; width: 100%;
    background: var(--bg); border: 1px solid var(--line); border-radius: 0;
    padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-field::placeholder { color: var(--ink-3); }
.mp-field.mono { font-family: var(--font-mono); }
.mp-field:focus { outline: none; border-color: var(--ink-3); box-shadow: inset 0 -2px 0 var(--brand-deep); }
/* JS-gesetzter Fehlerzustand (Auth-Formulare validieren clientseitig vor dem
   Submit) + Unterdrueckung des braunen UA-Rahmens fuer type=email/tel, den
   Firefox/Chrome vor jedem Fokus zeigen. */
.mp-field.has-error { border-color: var(--ink); }
.mp-field:invalid, .mp-field:-moz-ui-invalid { box-shadow: none; }
textarea.mp-field { resize: vertical; line-height: 1.55; }
select.mp-field {
    appearance: none; cursor: pointer; padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
        linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
}
.mp-field-lbl { display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 8px; }
.mp-field-hint { font-size: 12.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; }
/* Feldfehler: inline unter dem Feld, Brand-Punkt statt roter Flaeche
   (Umsetzungskonzept §5 — das Brand-Vokabular kennt bewusst kein Semantik-Rot).
   Loest .mp-field-hint.err und .mp-form-error aus mp-legacy.css ab. */
/* Gleicher Wechsel wie .mp-nf .err (siehe dort): gedämpftes Rot statt --ink,
   sonst im Fliesstext kaum zu finden. Betrifft Profil/Sicherheit/Registrieren
   und alle weiteren Konsumenten von .mp-field-err.
   11.9.2026: der vorangestellte Brand-Punkt ist weg — ein einzelner Fehlersatz
   ist keine Aufzaehlung (Betreiber, Endkontrolle); Gewicht 500 statt Glyphe. */
.mp-field-err { font-size: 12.5px; font-weight: 500; color: var(--mp-err-ink); margin-top: 7px; line-height: 1.55; }
/* Haarlinien-Fussnote im Formular (Fachhaendler-Hinweis unter dem Zustand).
   Ruhiger als .mp-field-hint: Mono, kleiner, abgesetzt — sie gehoert nicht
   zum Feld, sondern kommentiert es. Optik wie .ins-note/.v-note. */
.mp-form-note {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    line-height: 1.7;
}
.mp-wrap .mp-form-note a { color: var(--ink-2); text-decoration: none; }
.mp-wrap .mp-form-note a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }


/* === Base === */
.mp-wrap *, .mp-wrap *::before, .mp-wrap *::after { box-sizing: border-box; }
.mp-wrap {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

.mp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* =========================================================================
   «EDITORIAL BRAND» — Marktplatz-Band, Grid und Inseratseite (Etappe 2, v1.18)
   Markup-Anatomie 1:1 aus avguide-mpII-prototyp-grid-inserat-v8.html
   (Ansichten A · B · I sowie Verifikations-, Kontakt- und Legacy-Dialog).

   Wiederverwendet aus resources/brand/brand.css statt neu definiert:
   .wrap · .kicker · .pic · .meta · .dots · .sec-head/.sec-label/.sec-more
   · .btn-brand. Hier stehen nur die mp-eigenen Bausteine.
   ========================================================================= */

/* ---------- Marktplatz-Band (auf allen mp-Seiten) ---------- */
.mp-band { background: var(--surface); border-bottom: 1px solid var(--line); }
.mp-band .inner {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px 24px; flex-wrap: wrap; padding: 10px 0;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
}
/* Linker Slot seit 29.7.2026 nur noch kontextabhaengige Zurueck-Navigation
   (kein «MARKTPLATZ»-Wortmarker, kein Claim mehr — siehe Kopfkommentar in
   partials/mpBand.cfm). Brand-Unterstreichung im Hover wie bei den uebrigen
   Mono-Links des Systems (.sec-more, .goto, .mk-trust a), bewusst kraeftiger
   als der schlichte Farbwechsel der rechten Utilities. */
.mp-band .back { font-weight: 500; color: var(--ink-2); }
.mp-band .back:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-band .utils { display: flex; gap: 8px 18px; align-items: baseline; flex-wrap: wrap; color: var(--ink-3); }
.mp-band .utils a:hover { color: var(--ink); }
.mp-band .lang a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.mp-band .lang a.on { color: var(--ink); border-bottom-color: var(--brand); }
/* Kein .avatar mehr: das Band zeigt seit 28.7.2026 «Konto» statt Avatar und
   Benutzername (siehe Kommentar in views/partials/mpBand.cfm). */

/* ---------- Gemeinsame Bausteine ---------- */
/* Zwei Regeln, aus einem Live-Fehler gelernt (27.7.2026):

   1. UNscoped (kein .mp-wrap-Präfix), weil die drei Dialoge (.mp-dialog) als
      Geschwister NACH </div><!-- /mp-wrap --> im DOM rendern, nicht als
      Nachfahren — ein .mp-wrap-Präfix hätte sie nie erreicht.
   2. Deshalb zwingend mp-PRÄFIX im Klassennamen. brand.css ist site-weit und
      auf /marktplatz/* mitgeladen; unpräfixierte Prototyp-Namen kollidieren
      dort mit einer gleichnamigen, anderen Komponente. Konkreter Schaden:
      brand.css .btn-ghost (Z. 801) setzt margin-top:16px; unsere .btn-ghost
      deklarierte kein margin, also blieb es aktiv, blähte die Flex-Zeile
      .dlg-actions auf und streckte den danebenstehenden Sende-Button mit.
      Neue Bausteine deshalb immer .mp-*, nie den nackten Prototyp-Namen.

   Bewusst NICHT umbenannt und ohne eigene Definition: .wrap · .kicker · .pic ·
   .meta · .dots · .breadcrumb · .badge-trust — das sind geteilte
   Brand-Komponenten, die aus brand.css kommen sollen. */

/* Einzige Ausnahme von Punkt 2: .kicker ist eine geteilte Brand-Komponente,
   deren <b>-Auszeichnung der Prototyp abweichend faerbt (brand.css: --ink-2/500).
   Statt die Basisklasse umzubenennen, ist nur der Override auf die
   Modul-Wurzeln gescoped — er kann so nicht ins Editorial-Layout lecken. */
.mp-wrap .kicker b, .mp-band .kicker b, .mp-dialog .kicker b { color: var(--brand-deep); font-weight: 400; }

.vflag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-3); white-space: nowrap; }
.vflag::before { content: "\2713\00a0"; color: var(--brand-deep); }
.pic.contain img { object-fit: contain; }
.pic.noimg { display: flex; align-items: center; justify-content: center; }
.pic.noimg span {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
}
/* 1:1 aus der Vorlage: Ruhe anthrazit --ink-2, Hover schwarz --ink, Schrift in
   beiden Zustaenden weiss. margin:0 ist der einzige Zusatz und schliesst aus,
   dass eine gleichnamige Fremdregel je wieder einen Aussenabstand durchreicht. */
/* line-height: 1.6 explizit auf beiden Klassen (statt vom Body geerbt): beide
   Klassen werden je nach Aufrufstelle als <a> ODER <button> gerendert
   (Formular-Submits, z.B. Merken-Toggle) — <button> erbt line-height im
   Browser-Default NICHT (faellt auf "normal" zurueck), <a> schon. Ohne die
   explizite Angabe weichen zwei nebeneinanderstehende Buttons in der Hoehe
   ab, sobald der eine ein <a> und der andere ein <button> ist (User-Fund
   29.7.2026, CTA-Paar Kontaktieren/Merken). */
.mp-btn-ink {
    background: var(--ink-2); color: var(--bg); font-weight: 500; font-size: 14px;
    line-height: 1.6; margin: 0; padding: 12px 24px; display: inline-block;
    text-align: center; border: 0; cursor: pointer; font-family: var(--font-sans);
}
.mp-btn-ink:hover, .mp-btn-ink:focus { background: var(--ink); color: var(--bg); }
/* Gesperrter Zustand sichtbar machen (Fund A4-6, 11.9.2026): der Loesch-Knopf
   im Konto-Dialog sah gesperrt exakt aus wie aktiv, mit Hover und Zeiger —
   «Klick, keine Reaktion». Gilt fuer alle .mp-btn-ink mit disabled. */
.mp-btn-ink:disabled, .mp-btn-ink:disabled:hover, .mp-btn-ink:disabled:focus {
    background: var(--surface-2); color: var(--ink-3); cursor: not-allowed;
}
.mp-btn-ghost {
    /* padding 11.4px statt 11px: gleicht die Hoehe zusaetzlich an .mp-btn-ink
       an — dessen 0 Border + 14px Schrift vs. hier 1px Border + 13.5px
       Schrift ergaeben bei gleichem 11px/12px-Padding sonst ~1px Differenz. */
    border: 1px solid var(--line); background: none; color: var(--ink-2);
    font-weight: 500; font-size: 13.5px; line-height: 1.6; margin: 0;
    padding: 11.4px 20px; display: inline-block; text-align: center;
    cursor: pointer; font-family: var(--font-sans);
}
.mp-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.mp-btn-wide { width: 100%; }
.cicon {
    width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
/* 16px statt der 13px des Prototyps (User-Feinschliff 28.7.2026): als
   alleinstehende Klickziele (Icon-only desktop) brauchen die Aktions-Icons
   mehr Sichtbarkeit; Strichstaerke bleibt 1.6. */
.aicon {
    width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}

/* ---------- A · Grid: Kopf und Werkzeugzeile ---------- */
.mk-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; flex-wrap: wrap; padding: 40px 0 0;
}
.mk-head h1 { font-family: var(--font-serif); font-size: clamp(44px, 6vw, 64px); font-weight: 500; line-height: 1.02; }
.mk-head .claim { font-size: 16px; color: var(--ink-2); margin-top: 10px; max-width: 560px; }
.mk-head .count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; display: block; }
.mk-toolbar { display: flex; gap: 14px; align-items: stretch; margin-top: 32px; flex-wrap: wrap; }
.mk-search {
    flex: 1 1 380px; display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); background: var(--bg); padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-search:focus-within { border-color: var(--ink-3); box-shadow: inset 0 -2px 0 var(--brand-deep); }
.mk-search svg { width: 17px; height: 17px; stroke: var(--ink-3); stroke-width: 1.6; fill: none; stroke-linecap: round; flex: 0 0 auto; }
.mk-search input {
    flex: 1; border: 0; background: none; font-family: var(--font-sans);
    font-size: 15px; color: var(--ink); padding: 12px 0; min-width: 0;
}
.mk-search input:focus { outline: none; }
.mk-search input::placeholder { color: var(--ink-3); }
.mk-search button {
    border: 0; background: none; font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
    cursor: pointer; padding: 4px 0;
}
.mk-search button:hover { color: var(--ink); }
.mk-sort {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
    padding: 0 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
.mk-sort:focus-within { border-color: var(--ink-3); }
.mk-sort select {
    border: 0; background: none; font-family: var(--font-mono); font-size: 12px;
    color: var(--ink); padding: 12px 0; cursor: pointer;
}
.mk-sort select:focus { outline: none; }

/* ---------- A · Kategorien und Unterkategorien ---------- */
.mk-cats {
    display: flex; gap: 4px 26px; flex-wrap: wrap; margin-top: 22px;
    padding-bottom: 14px; border-bottom: 1px solid var(--line); align-items: center;
}
.mk-cats a {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ink-3); padding: 6px 0 8px; border-bottom: 2px solid transparent;
}
.mk-cats a:hover { color: var(--ink); }
.mk-cats a.active { color: var(--ink); border-bottom-color: var(--brand); }
/* Die Kategorie-Icons liefen bis 31.7.2026 als Tabler-Webfont-Glyphen (<i class="ti">)
   und brauchten hier eine eigene Grösse, weil sie sonst die 12px der Zeile erbten.
   Seit dem Ladezeit-Fix rendert partials/mkCatIcon Inline-SVGs, die wie alle
   übrigen Icons der Seite über .cicon (18x18) laufen — die Sonderregel entfiel
   damit ersatzlos. Der Admin-Bereich nutzt die Webfont weiter (eigenes Layout,
   eigenes admin.css); auf der öffentlichen Seite lud sie 825 KB für acht Icons. */
.mk-subcats {
    display: flex; gap: 8px 24px; flex-wrap: wrap; padding: 12px 0 14px 14px;
    border-left: 3px solid var(--brand); border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); align-items: baseline;
}
.mk-subcats a::before { content: "\25CB\00a0"; }
.mk-subcats a.on::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mk-subcats a:hover, .mk-subcats a.on { color: var(--ink); }

/* ---------- A · Kartenraster ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; padding: 36px 0 0; }
.mk-card { display: flex; flex-direction: column; }
.mk-card .pic { aspect-ratio: 4 / 3; margin-bottom: 16px; }
.mk-card .krow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mk-card .name { font-family: var(--font-serif); font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.mk-card:hover .name { box-shadow: inset 0 -2px 0 var(--brand); display: inline; align-self: start; }
.mk-card .price { font-family: var(--font-mono); font-size: 19px; margin-top: auto; padding-top: 16px; color: var(--ink); }
.mk-card .price s { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 8px; }
.mk-card .meta { margin-top: 4px; font-size: 11px; }
.mk-empty { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); padding: 56px 0; }

/* ---------- A · Nachladen und Vertrauensleiste ---------- */
.mk-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 0 8px; }
.mk-more .stat { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.mk-trust {
    border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 0 8px;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
    display: flex; gap: 8px 24px; flex-wrap: wrap;
}
.mk-trust span::before { content: "\25CF\00a0"; color: var(--brand-deep); font-size: 9px; vertical-align: 1px; }
/* Vierter Chip «Sind Sie Fachhändler?» ist ein Link: Brand-Ton wie der Punkt davor,
   Hover im Idiom der Mono-Links (Brand-Unterlinie). */
.mp-wrap .mk-trust a { color: var(--brand-deep); text-decoration: none; }
.mp-wrap .mk-trust a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- B · Inseratseite: Raster ---------- */
.ins-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; padding: 36px 0 0; }
.ins-gallery .pic.main { aspect-ratio: 3 / 2; }
.ins-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.ins-thumbs .pic { aspect-ratio: 3 / 2; cursor: pointer; padding: 0; background: var(--surface-2); }
.ins-thumbs .pic.sel, .ins-thumbs .pic:hover { border-color: var(--ink); }

/* ---------- B · Beschreibung und Faktentabelle ---------- */
.ins-desc { margin-top: 40px; }
.ins-desc h2 {
    font-family: var(--font-serif); font-size: 24px; font-weight: 500;
    margin: 0 0 14px; padding-top: 16px; position: relative;
}
.ins-desc h2::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; background: var(--brand); }
.ins-desc p { margin-bottom: 16px; color: var(--ink-2); }
table.facts { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; margin: 30px 0 0; }
table.facts th, table.facts td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.facts th { color: var(--ink-3); font-weight: 400; width: 42%; }
/* Seit dem Melde-Dialog ein <a> statt eines Submit-Buttons: der Auslöser
   braucht ein echtes href-Ziel (?melden=1 bzw. die Anmeldung), damit er ohne
   JS funktioniert. text-decoration explizit aus — die Auszeichnung traegt
   erst der Hover, wie bei den uebrigen Mono-Links. */
.ins-report {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
    display: inline-block; margin-top: 26px; background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: none;
}
.ins-report:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- B · Panel ---------- */
.ins-panel { position: sticky; top: 52px; }
.ins-panel .kicker { display: block; margin-bottom: 12px; }
.ins-panel h1 { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 40px); font-weight: 500; line-height: 1.1; }
.ins-panel .price { font-family: var(--font-mono); font-size: 30px; margin-top: 20px; }
.ins-panel .price small { font-size: 13px; color: var(--ink-3); margin-left: 10px; }
.ins-panel .meta-line { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.ins-cta { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 24px; }
.ins-cta.single { grid-template-columns: 1fr; }
/* Merken-Toggle: der Ghost-Button steht in einem POST-Formular — das
   Formular ist das Rasterfeld der .ins-cta, der Button fuellt es (.mp-btn-wide). */
.mp-fav-form { display: block; }
/* «Gemerkt» ist ein Zustand, kein zweiter Button: Linie und Schrift ziehen
   auf --ink an, das eigentliche Signal traegt das Herz (♡ → ♥). */
.mp-btn-ghost.mp-on { border-color: var(--ink); color: var(--ink); }
.ins-status {
    background: var(--surface); padding: 14px 18px; margin-top: 20px;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}

/* ---------- B · Verkaeufer-Block ---------- */
.ins-seller { border: 1px solid var(--line); padding: 20px 22px; margin-top: 28px; }
.ins-seller .who { font-weight: 600; font-size: 15px; display: block; }
.ins-seller .since { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: block; margin-top: 3px; }
.ins-seller .all { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); display: inline-block; margin-top: 10px; }
.ins-seller .all:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.ins-seller .vblock {
    display: flex; flex-direction: column; gap: 5px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.ins-seller .vblock .badge-trust::before { content: "\2713\00a0"; color: var(--brand-deep); }
.ins-seller .vblock .badge-trust.none { color: var(--ink-3); }
.ins-seller .vblock .badge-trust.none::before { content: "\25CB\00a0"; color: var(--ink-3); }
.ins-seller .vblock .help {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 5px;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left; align-self: flex-start;
}
.ins-seller .vblock .help:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- B · Redaktions-Kaskade ---------- */
.ins-testbox { background: var(--surface); padding: 20px 22px; margin-top: 16px; }
.ins-testbox .lbl, .ins-edline .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 10px;
}
.ins-testbox .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ins-testbox .dots i { width: 9px; height: 9px; }
.ins-testbox .dots i.on { background: var(--brand-deep); }
.ins-testbox .score { font-family: var(--font-mono); font-size: 14px; }
.ins-testbox a.go { font-size: 13.5px; font-weight: 500; }
.ins-testbox a.go:hover { box-shadow: inset 0 -2px 0 var(--brand); }
.ins-edline { background: var(--surface); padding: 16px 22px; margin-top: 16px; }
.ins-edline a { font-size: 13.5px; font-weight: 500; }
.ins-edline a:hover { box-shadow: inset 0 -2px 0 var(--brand); }
.ins-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 16px; line-height: 1.7; }

/* ---------- B · Vorschaustufe («Pruefen & publizieren») ---------- */
.ins-preview { background: var(--surface); padding: 20px 24px; margin-top: 26px; }
.ins-preview .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.ins-preview .line { font-family: var(--font-serif); font-size: 17.5px; font-weight: 500; }
.ins-preview .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- I · Legacy-Hinweis ---------- */
.legacy-note { background: var(--surface); padding: 18px 22px; margin-top: 24px; }
.legacy-note .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.legacy-note p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.legacy-note a.claim {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
    display: inline-block; margin-top: 10px; font-weight: 500;
}
.legacy-note a.claim:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- A · Hinweis «Was ist neu?» (Startphase des neuen Marktplatzes) ----------
   Fuer Nutzer des bisherigen Marktplatzes, zwischen Band und Seitenkopf der
   Uebersicht (partials/mkWhatsNew.cfm). Anatomie wie .legacy-note: getoente
   Flaeche, Mono-Label, zwei Saetze in Sans, Mono-Link mit Brand-Unterlinie im Hover.
   Schalter: settings.whatsNewBanner (ModuleConfig.cfc) — nach der Startphase
   aus; die Regeln bleiben, weil die Seite /marktplatz/was-ist-neu bleibt. */
.mp-newnote {
    background: var(--surface); padding: 18px 22px; margin-top: 28px;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px 32px; flex-wrap: wrap;
}
.mp-newnote .txt { flex: 1 1 420px; min-width: 0; }
.mp-newnote .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.mp-newnote p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 640px; }
.mp-newnote p + p { margin-top: 8px; }
.mp-newnote .acts { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.mp-newnote .more { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.mp-newnote .more.sec { color: var(--ink-2); font-weight: 400; }
.mp-newnote .more:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- B · Aehnliche Inserate ---------- */
/* Unten 0: die Claim-Leiste .mk-trust bringt ihre 64px Abstand selbst mit
   (seit 4.9.2026 Abschluss der Inseratseite, vorher der Modul-Footer). */
.ins-similar { padding: 72px 0 0; }
.ins-similar .mk-grid { padding-top: 0; }

/* ---------- Dialoge (natives <dialog>, zentriert) ---------- */
dialog.mp-dialog {
    /* Eigene Basis-Typografie statt Vererbung von <body> (16px/1.6 aus
       brand.css, gehört dem Editorial-Rahmenlayout): die Dialoge liegen
       ausserhalb von .mp-wrap im DOM und würden sonst dessen falschen Wert
       erben. Werte 1:1 aus der Vorlage übernommen (deren body-Regel, Zeile
       39) statt selbst erfunden — vorherige Annäherung an .mp-wrap (15px/
       1.5) war NICHT die Vorlage und Ursache mehrerer Fehlversuche bei der
       Button-Höhe (27.7.2026). */
    font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    max-width: 560px; width: calc(100% - 48px); padding: 0;
    position: fixed; inset: 0; margin: auto; height: fit-content;
    max-height: min(86vh, 720px); overflow: auto;
}
dialog.mp-dialog::backdrop { background: var(--backdrop); }
.mp-dialog .v-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px 0; }
.mp-dialog h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 500; }
.mp-dialog .v-close {
    font-family: var(--font-mono); font-size: 13px; background: none; border: 0;
    cursor: pointer; color: var(--ink-3); padding: 4px;
}
.mp-dialog .v-close:hover { color: var(--ink); }
.mp-dialog .v-body { padding: 18px 26px 26px; }
.mp-dialog .v-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.mp-dialog .v-item:last-of-type { border-bottom: 0; }
.mp-dialog .v-item .badge-trust { display: block; margin-bottom: 6px; color: var(--ink); }
.mp-dialog .v-item .badge-trust::before { content: "\2713\00a0"; color: var(--brand-deep); }
.mp-dialog .v-item .badge-trust.none { color: var(--ink-3); }
.mp-dialog .v-item .badge-trust.none::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-dialog .v-item p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.mp-dialog .v-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.7; }

/* Kontakt-/Legacy-Dialog */
.mp-dialog .c-ctx { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.mp-dialog .c-ctx .pic { width: 76px; aspect-ratio: 4 / 3; flex: 0 0 auto; }
.mp-dialog .c-ctx .cn { font-family: var(--font-serif); font-size: 16.5px; font-weight: 500; display: block; line-height: 1.3; }
.mp-dialog .c-ctx .cp { font-family: var(--font-mono); font-size: 12.5px; margin-top: 3px; display: block; }
.mp-dialog .c-ctx .cs { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 3px; display: block; }
/* Feldstile kommen aus dem kanonischen .mp-field-Block (Dateianfang) — hier
   nur die im Prompt erlaubten kontextuellen Ausnahmen: Label-Rhythmus
   zwischen gestapelten Feldern, kleinere Textarea (Dialog statt Wizard). */
.mp-dialog .mp-field-lbl { margin-top: 18px; }
.mp-dialog .mp-field-lbl.first { margin-top: 0; }
.mp-dialog textarea.mp-field { min-height: 120px; }
.mp-dialog .hint2 { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; }
.mp-dialog .send-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.7; }
.mp-dialog .dlg-actions { display: flex; gap: 12px; margin-top: 20px; }
.mp-dialog .dlg-actions .mp-btn-ink { flex: 1; }
.mp-dialog .dlg-err {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--mp-err-ink);
    margin-top: 12px; line-height: 1.6;
}
.mp-dialog .dlg-err::before { content: "\25CF\00a0"; color: var(--brand-deep); }
/* Rahmen um das Turnstile-Widget — 1:1 aus dem Prototyp (dort statischer
   Platzhaltertext; hier das echte Cloudflare-Widget im selben Rahmen, damit
   es sich einfügt statt lose im Formular zu stehen). */
.mp-dialog .turnstile {
    display: flex; align-items: baseline; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 12px 14px; font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-2); margin-top: 16px;
}
.mp-dialog .turnstile b { color: var(--brand-deep); font-weight: 400; }
/* Flex-Items sind ohne grow standardmässig nur so breit wie ihr Inhalt —
   erst das erlaubt size="flexible" des Widgets, sich auf die volle
   Dialogbreite auszudehnen statt auf die eigene Minimalgrösse zu schrumpfen. */
.mp-dialog .turnstile .cf-turnstile { flex: 1; width: 100%; }

/* Melde-Dialog. Die Einfachwahl selbst kommt aus dem gemeinsamen
   .radios-Block (Abschnitt Formularsprache); hier nur die Abweichungen:
   die fuenf Meldegruende sind ganze Saetze und keine kurzen Datenwerte wie
   im Wizard — nebeneinander wuerden sie unlesbar umbrechen, deshalb eine
   Spalte und eine Spur mehr Schriftgroesse. */
.mp-dialog .radios { flex-direction: column; flex-wrap: nowrap; gap: 10px; font-size: 13px; margin-top: 2px; }
.mp-dialog .radios label { padding: 0; }
.mp-dialog .req { color: var(--brand-deep); }
/* Bestaetigungszustand: dieselbe Mono-Zeile mit Brand-Punkt wie .mp-flash —
   sie steht hier aber im Dialog statt am Seitenkopf, damit die Rueckmeldung
   dort erscheint, wo geklickt wurde (Live-Fund 18.8.2026: am Seitenkopf
   wurde sie schlicht uebersehen). */
.mp-dialog .r-done { font-family: var(--font-mono); font-size: 13px; color: var(--ink); line-height: 1.6; }
.mp-dialog .r-done::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mp-dialog .r-done + .hint2 { margin-top: 10px; }

/* ---------- Flash-Meldungen (getoenter Teller, Glyphe traegt die Aussage) ---------- */
/* Historie in zwei Schritten. 28.7.2026: seit die farbigen .mp-alert-Kaesten
   durch .mp-flash ersetzt waren, sahen Erfolg und Fehlschlag als stille
   Mono-Zeile identisch aus — ein abgelehnter Passwortwechsel wurde ueberlesen.
   Der Fehlschlag bekam einen getoenten Teller (--mp-err-*), der Erfolg blieb
   die stille Zeile mit Brand-Punkt.
   11.9.2026 (Fund A4-3 der Endkontrolle, Entscheid des Betreibers): auch die
   Bestaetigung wurde ueberlesen — sie steht oben in der Kontospalte, weit weg
   vom Knopf, der sie ausgeloest hat. Darum tragen jetzt beide Zustaende
   denselben Teller mit Haarlinie (Anatomie wie .mp-result-tip): Erfolg aus
   --mp-ok-*, Fehlschlag aus --mp-err-*. Die Glyphe (Haken bzw. Kreuz)
   unterscheidet sie auch ohne Farbe.

   Das ist eine bewusste, vom Nutzer angeforderte Ausnahme von der Regel
   «keine Semantikflaeche» (Konzept §5): sie gilt weiterhin fuer FELD-Fehler
   (.mp-field-err, Brand-Punkt inline) — die seitenweite Meldung steht
   dagegen weit weg von der ausloesenden Eingabe und braucht Signalwirkung.
   Einzige stille Variante bleibt .mp-fav-note: die Merken-Bestaetigung sitzt
   direkt am Button (Abnahme 2.9.2026) und braucht keine Flaeche. */
.mp-flash {
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--mp-ok-ink);
    background: var(--mp-ok-bg); border: 1px solid var(--mp-ok-line);
    padding: 12px 16px; margin: 18px 0 0;
}
.mp-flash::before { content: "\2713\00a0"; color: var(--mp-ok-ink); }
.mp-flash.err { color: var(--mp-err-ink); background: var(--mp-err-bg); border-color: var(--mp-err-line); }
.mp-flash.err::before { content: "\2715\00a0"; color: var(--mp-err-ink); }
.mp-flash.mp-fav-note {
    font-size: 12px; color: var(--ink-2);
    background: none; border: 0; padding: 0; margin-top: 8px;
}
.mp-flash.mp-fav-note::before { content: "\25CF\00a0"; color: var(--brand-deep); }

/* =========================================================================
   KONTO-INNENLAYOUT und FORMULARSPRACHE (Etappe 4a)
   Werte 1:1 aus avguide-mpII-prototyp-grid-inserat-v8.html (Z. 206–271,
   Ansicht C «Inserat aufgeben» und das Konto-Raster der Ansichten D/E/F).

   Die Wurzeln tragen mp-Praefix, die Kinder behalten die Prototyp-Namen und
   sind darunter gescoped (Muster wie .mp-dialog .v-head) — so bleibt das
   Markup vergleichbar, ohne site-weite Klassen zu belegen.
   ========================================================================= */

/* ---------- C/D · Konto-Seitenkopf ---------- */
/* Werte 1:1 aus der Vorlage (Ansicht D, Z. 275–277). .btn-brand ist die
   geteilte, site-weite Klasse aus brand.css — die einzige gelbe Flaeche
   site-weit — daher keine eigene mp-Definition, siehe Kollisionsregel oben. */
.mp-acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 40px 0 0; }
.mp-acct-head h1 { font-family: var(--font-serif); font-size: clamp(34px, 4.4vw, 46px); font-weight: 500; line-height: 1.05; }
.mp-acct-head .sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; display: block; }

/* ---------- D · Kennzahlen-Kacheln ---------- */
.mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.mp-stat { border: 1px solid var(--line); padding: 18px 20px; }
.mp-stat .n { font-family: var(--font-mono); font-size: 32px; line-height: 1.1; display: block; }
.mp-stat .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; display: block; }

/* ---------- D · Inserate-Tabelle («Meine Inserate», Archiv) ---------- */
.mp-acct-sec { margin-top: 48px; }
.mp-acct-sec .sec-head { display: flex; justify-content: space-between; align-items: baseline; }
.mp-acct-sec .more { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.mp-acct-sec .more:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
/* Tabellen-Feinschliff 28.7.2026 (Prototyp v8, Z. 286–306): Aktionen desktop
   Icon-only mit Editorial-Tooltip (data-tip), mobil Icon+Label; Ablaufdatum
   mobil als Status-Suffix .stx statt ausgeblendeter Spalte. Icon-only ist NUR
   im Konto-Bereich zulässig — öffentliche Ansichten nie ohne Label.
   Abweichung zum Prototyp: die Selektoren adressieren a UND button — unsere
   Aktionen stecken teils in POST-Formularen (display:contents), der Prototyp
   kennt nur <a>. */
/* Fixspalten auf ihr inhaltliches Minimum (User-Feinschliff 28.7.2026) — der
   gesamte Gewinn fliesst in die Inserat-Spalte (1fr).

   Aktionsspalte 190px (korrigiert 31.7.2026): Sie war mit 140px auf GENAU vier
   Icons berechnet (4 x 32px + 3 x 4px Gap). Der Verlaengern-Knopf aus v1.24
   macht daraus fuenf — 5 x 32 + 4 x 4 = 176px passen dort nicht hinein, und weil
   .act rechtsbuendig ausrichtet, lief der Ueberschuss nach LINKS in die
   Ablauf-Spalte. Sichtbar nur auf Zeilen im Verlaengerungs-Fenster, deshalb im
   Alltag leicht zu uebersehen.
   190 = 176 fuer die fuenf Icons + 14 Luft; zusammen mit dem Spalten-Gap bleiben
   damit 28px zwischen «noch N Tage» und dem ersten Icon. Fuenf ist das Maximum
   der Aktionsmatrix (aktiv im Fenster: Bearbeiten, Verkauft, Pausieren,
   Verlaengern, Archivieren) — wer eine sechste Aktion ergaenzt, muss hier mit. */
.mp-lhead, .mp-lrow {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 95px 80px 90px 190px;
    gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.mp-ltable { margin-top: 18px; border-top: 1px solid var(--line); }
.mp-lhead {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); padding: 10px 0;
}
.mp-lrow .pic { width: 64px; aspect-ratio: 4 / 3; }
.mp-lrow .pic.noimg span { font-size: 9px; letter-spacing: 0.08em; }
.mp-lrow .t .nm { font-family: var(--font-serif); font-size: 16.5px; font-weight: 500; line-height: 1.3; display: block; }
.mp-lrow .t .sc { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; display: block; }
.mp-lrow .pr { font-family: var(--font-mono); font-size: 14px; }
.mp-lrow .st { font-family: var(--font-mono); font-size: 11.5px; }
.mp-lrow .st::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mp-lrow .st.draft { color: var(--ink-3); }
.mp-lrow .st.draft::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-lrow .exp { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
/* Restlaufzeit unter dem Ablaufdatum (v1.24) — begruendet den Verlaengern-Knopf.
   Eigene Zeile, damit die schmale Spalte nicht umbricht. */
.mp-lrow .exp .expd { display: block; font-size: 10.5px; color: var(--ink-3); }
.mp-lrow .st .stx { display: none; color: var(--ink-3); }
.mp-lrow .act {
    display: flex; gap: 4px; justify-content: flex-end;
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
/* Ein <form> um jeden Aktions-Button darf den Flex-Fluss der Icon-Reihe nicht
   stoeren — display:contents laesst nur das Kind (button) teilnehmen. */
.mp-lrow .act .act-form { display: contents; }
/* Kopfzeilen-Label der Aktionsspalte rechtsbuendig, passend zur Body-Zelle oben. */
.mp-lhead .actlbl { text-align: right; }
/* Entwurfstitel gedimmt, Pendant zu .mp-lrow .st.draft. */
.mp-lrow .t .nm.draft { color: var(--ink-3); }
.mp-lrow .act a, .mp-lrow .act button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; min-width: 32px; min-height: 32px; padding: 6px;
    background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.mp-lrow .act a:hover, .mp-lrow .act button:hover,
.mp-lrow .act a:focus-visible, .mp-lrow .act button:focus-visible { color: var(--ink); }
.mp-lrow .act .danger:hover, .mp-lrow .act .danger:focus-visible { color: var(--mp-err-ink); }
.mp-lrow .act .albl { display: none; }
/* Editorial-Tooltip: attr-basiert statt natives title, Mono auf Kontrastband,
   erscheint auch bei Tastatur-Fokus (:focus-visible) */
.mp-lrow .act a::after, .mp-lrow .act button::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%); background: var(--contrast-bg); color: var(--contrast-ink);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; padding: 4px 9px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5;
}
.mp-lrow .act a:hover::after, .mp-lrow .act button:hover::after,
.mp-lrow .act a:focus-visible::after, .mp-lrow .act button:focus-visible::after { opacity: 1; }

/* ---------- C · Konto-Raster ---------- */
.mp-acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
.mp-acct-nav { position: sticky; top: 52px; display: flex; flex-direction: column; margin-top: 40px; }
.mp-acct-nav .grp {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); padding: 0 0 8px 14px; margin-top: 28px;
}
.mp-acct-nav .grp:first-child { margin-top: 0; }
.mp-acct-nav a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-3);
    padding: 10px 4px 10px 14px; border-left: 3px solid transparent;
    border-bottom: 1px solid var(--line);
}
.mp-acct-nav .grp + a { border-top: 1px solid var(--line); }
.mp-acct-nav a:hover { color: var(--ink); }
.mp-acct-nav a.active { color: var(--ink); border-left-color: var(--brand); }
.mp-acct-nav a span { font-size: 11px; color: var(--ink-3); }
/* Admin-Absprung (nur ROLE_ADMIN): abgesetzt vom Konto-Menue, weil er in einen
   anderen Bereich mit eigenem Layout fuehrt und kein Konto-Punkt ist. */
.mp-acct-nav a.adm {
    margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 0;
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px;
}
.mp-acct-nav a.adm:hover { color: var(--ink); border-left-color: var(--brand); }
.mp-acct-content { min-width: 0; }

/* ---------- C · Inserat-Formular ---------- */
.mp-nf { max-width: 680px; padding: 40px 0 0; }
.mp-nf h1 { font-family: var(--font-serif); font-size: clamp(34px, 4.4vw, 46px); font-weight: 500; line-height: 1.05; }
.mp-nf .intro { font-size: 15px; color: var(--ink-2); margin-top: 12px; max-width: 560px; }
.mp-nf form { margin-top: 38px; }
.mp-nf .field { margin-bottom: 32px; }
/* Feldstile selbst kommen aus dem kanonischen .mp-field-Block am Dateianfang —
   hier nur die Rhythmus- und Auszeichnungsteile, die es dort nicht gibt. */
.mp-nf .opt {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
    color: var(--ink-3); margin-left: 8px; font-weight: 400;
}
.mp-nf .req { color: var(--brand-deep); }
.mp-nf .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mp-nf textarea.mp-field { min-height: 150px; }
/* Beide Firmenfeld-Labels im aufklappbaren Block brauchen etwas mehr Abstand
   nach oben — identisch, ein Modifier statt zweifach inline. */
.mp-nf .mp-field-lbl.mt { margin-top: 18px; }

/* Einfachwahl ○/● und Mehrfachwahl □/■ — native Inputs bleiben im DOM und
   fokussierbar, sind aber visuell durch das Label-::before ersetzt.
   Der Melde-Dialog nutzt dieselbe Einfachwahl (.mp-dialog .radios) — deshalb
   Selektoren erweitert statt Regeln dupliziert; seine Abweichungen (Spalte
   statt Reihe) stehen gesammelt im Zusatzblock darunter. */
.mp-nf .radios, .mp-nf .checks, .mp-dialog .radios {
    display: flex; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2); padding: 4px 0;
}
.mp-nf .radios { gap: 8px 24px; }
.mp-nf .checks { gap: 9px 24px; }
.mp-nf .checks.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.mp-nf .radios input, .mp-nf .checks input, .mp-dialog .radios input { position: absolute; opacity: 0; width: 0; }
.mp-nf .radios label, .mp-nf .checks label, .mp-dialog .radios label { cursor: pointer; padding: 3px 0; }
/* Glyphe deutlich groesser als die Mono-Beschriftung (19px vs. 12px), gleiche
   Groesse wie die AGB-Zustimmung im Registrieren-Formular: das □/○ des
   Mono-Fonts sitzt klein in der Gevierthoehe und war als einziges Klickziel
   vor allem mobil zu zierlich (User-Fund 28.7.2026). vertical-align statt
   line-height, damit die Zeile nicht aufreisst. Die :checked-Regeln unten
   setzen nur content und color — die Groesse gilt fuer beide Zustaende. */
.mp-nf .radios label::before, .mp-nf .checks label::before, .mp-dialog .radios label::before {
    font-family: var(--font-mono); font-size: 19px; line-height: 1; vertical-align: -2px;
}
.mp-nf .radios label::before, .mp-dialog .radios label::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-nf .checks label::before { content: "\25A1\00a0"; color: var(--ink-3); }
.mp-nf .radios label:hover, .mp-nf .checks label:hover, .mp-dialog .radios label:hover { color: var(--ink); }
.mp-nf .radios input:checked + label, .mp-nf .checks input:checked + label,
.mp-dialog .radios input:checked + label { color: var(--ink); }
.mp-nf .radios input:checked + label::before,
.mp-dialog .radios input:checked + label::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mp-nf .checks input:checked + label::before { content: "\25A0\00a0"; color: var(--brand-deep); }
.mp-nf .radios input:focus-visible + label,
.mp-nf .checks input:focus-visible + label,
.mp-dialog .radios input:focus-visible + label { box-shadow: inset 0 -2px 0 var(--brand); }

/* Angebotsart bei Privatkonten: fixer Second-Hand-Hinweis statt Auswahl
   (Graumarkt-Abwehr) — kein Eingabefeld, daher eigener, schlichter Stil statt
   .mp-field. */
.mp-nf .offer-fixed-value {
    font-family: var(--font-mono); font-size: 12px; color: var(--ink);
    padding: 4px 0;
}

/* Bilder: Ablagezone und Teller-Raster der bereits hochgeladenen Bilder */
.mp-nf .dropzone {
    border: 1px solid var(--line); background: var(--surface-2); padding: 36px 20px;
    text-align: center; font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-2); cursor: pointer;
}
.mp-nf .dropzone:hover { border-color: var(--ink); }
.mp-nf .dropzone b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.mp-nf .upl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.mp-nf .upl figure { display: flex; flex-direction: column; }
.mp-nf .upl .pic {
    aspect-ratio: 3 / 2; cursor: grab; touch-action: none;
    -webkit-user-drag: none; user-select: none;
}
.mp-nf .upl figure.dragging { opacity: .4; }
.mp-nf .upl figcaption {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); margin-top: 5px;
    display: flex; justify-content: space-between; gap: 8px;
}
.mp-nf .upl figcaption .acts { display: flex; gap: 8px; }
.mp-nf .upl figcaption a:hover { color: var(--ink); }
.mp-nf .upl .first { color: var(--ink-2); }

/* Lancierungs-Box beim Preis und Gebuehren-Fussnote (Konzept 5: Mono-Fussnote
   statt farbiger Box — es gibt keine Semantikflaeche im Brand-Vokabular).
   Seit 14.9.2026 auch im Gebuehrenabschnitt der Anleitungsseite
   (.mp-legal-page, views/legal/howitworks_*.cfm) — Selektorenliste erweitert,
   nicht dupliziert. */
.mp-nf .promo, .mp-checkout .promo, .ins-preview .promo, .mp-legal-page .promo { background: var(--surface); padding: 18px 22px; margin-top: 16px; }
.mp-nf .promo { margin-bottom: -12px; }
.mp-legal-page .promo { margin-bottom: 18px; }
/* .ins-preview traegt selbst schon --surface — der Coupon-Banner braucht hier
   eine sichtbare Trennlinie statt nur Abstand, sonst verschwimmt er in der
   gleichfarbigen Flaeche (User-Fund 29.7.2026: Buttons und Banner klebten
   ohne jede Grenze aneinander). */
.ins-preview .promo { border-top: 1px solid var(--line); }
.mp-nf .promo .lbl, .mp-checkout .promo .lbl, .ins-preview .promo .lbl, .mp-legal-page .promo .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.mp-nf .promo .line, .mp-checkout .promo .line, .mp-legal-page .promo .line { font-family: var(--font-serif); font-size: 17.5px; font-weight: 500; color: var(--ink); margin: 0; }
.mp-nf .promo .calc, .mp-checkout .promo .calc, .ins-preview .promo .calc, .mp-legal-page .promo .calc { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
.mp-legal-page .promo .calc { margin-bottom: 0; }
.mp-nf .fee-hint { font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin-top: 20px; line-height: 1.7; }
.mp-nf .fee-hint #feePreview { font-weight: 600; }

/* Preismodell-Modal (partials/feeModal.cfm) — 1:1 aus mp-legacy.css uebernommen,
   da MyListings (Etappe 4a, Brand-only) mp-legacy.css nicht mehr laedt; die
   Legacy-Kopie bleibt bis Payments/checkout.cfm auf Brand umgestellt ist
   (dann dort loeschen, nicht migrieren — siehe Codestyle-Guide). */
.mp-feemodal { display: none; position: fixed; inset: 0; z-index: 1000; }
.mp-feemodal.open { display: block; }
.mp-feemodal-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.mp-feemodal-dialog {
    position: relative; max-width: 440px; margin: 8vh auto; background: var(--bg);
    border-radius: var(--mp-radius-lg); padding: 24px 24px 20px;
    box-shadow: 0 20px 60px var(--mp-shadow-color); font-family: var(--font-sans);
}
.mp-feemodal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.mp-feemodal-x:hover { color: var(--ink-2); }
.mp-feemodal-title { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding-right: 20px; }
.mp-feemodal-lead { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
.mp-feemodal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-feemodal-table th { text-align: left; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px 6px; }
.mp-feemodal-table th:last-child, .mp-feemodal-table td:last-child { text-align: right; }
.mp-feemodal-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.mp-feemodal-table tr:last-child td { border-bottom: 0; }
.mp-feemodal-note { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Verlaengerungs-Dialog (partials/extendDialog.cfm) teilt sich die Modal-Huelle,
   braucht aber eine Gebuehrenzeile und eine Aktionsleiste (Etappe 4c — loest die
   Inline-Styles mit Legacy-Token-Fallbacks ab). Betrag mono = transaktional. */
.mp-feemodal .xfee {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 14px; padding: 11px 13px; background: var(--surface); font-size: 13px;
}
.mp-feemodal .xfee strong { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.mp-feemodal .xacts { display: flex; gap: 10px; margin-top: 18px; }
.mp-feemodal .xacts .mp-btn-ink { flex: 1; }

/* FilePond-Skin auf Tokens (Konzept 5: FilePond bleibt als FUNKTIONS-Bibliothek,
   die Vanilla-Regel betrifft eigenes CSS/JS). Die Ablagezone bekommt dieselbe
   Anatomie wie .dropzone im Prototyp — getoenter Teller mit Haarlinie, radius 0,
   Mono-Beschriftung. */
.mp-nf .filepond--root { margin-bottom: 0; font-family: var(--font-mono); }
.mp-nf .filepond--panel-root {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 0;
}
.mp-nf .filepond--drop-label { color: var(--ink-2); min-height: 96px; }
.mp-nf .filepond--drop-label label { font-size: 12px; letter-spacing: 0.02em; }
.mp-nf .filepond--root:hover .filepond--panel-root { border-color: var(--ink); }
.mp-nf .filepond--item-panel { background: var(--ink-2); border-radius: 0; }
.mp-nf .filepond--file { color: var(--contrast-ink); font-size: 11px; }
.mp-nf .filepond--file-status-main,
.mp-nf .filepond--file-info-main { font-family: var(--font-mono); font-size: 11px; }
.mp-nf .filepond--file-action-button { background: var(--contrast-bg); }
.mp-nf .filepond--panel-root, .mp-nf .filepond--item-panel { box-shadow: none; }

/* Feldfehler: inline unter dem Feld. Ursprünglich Brand-Punkt + --ink (Konzept
   5, «keine Rot-Fläche») — auf Wunsch des Users am 29.7.2026 in gedämpftes Rot
   umgezogen, Text war neben den umliegenden Hinweistexten kaum auffindbar.
   Dieselbe Ausnahme wie bei .mp-flash.err: gilt für Fehlertext, nicht für
   Flächen — kein roter Hintergrund, nur Text.
   11.9.2026 (Betreiber, Endkontrolle «Bitte geben Sie einen Titel ein»):
   Punkt weg (keine Aufzaehlung), Schrift 12.5px statt 11.5px, Gewicht 500,
   und das Feld selbst traegt die Fehlerlinie in --mp-err-ink statt --ink. */
.mp-nf .err {
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--mp-err-ink);
    margin-top: 7px; line-height: 1.6;
}
.mp-nf .field.has-err .mp-field { border-color: var(--mp-err-ink); }

.mp-nf .nf-actions {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
/* Konzept 11.5: Primaerbutton in Formularen volle Breite — hier teilen sich
   Entwurf und Weiter die Zeile, der Primaerbutton nimmt den Rest. */
.mp-nf .nf-actions .mp-btn-ink { flex: 1; min-width: 240px; }

/* =========================================================================
   AUTH + MIGRATION — Formularsprache (Etappe 4b, Modul v1.19)
   Anmelden/Registrieren/Passwort-Reset/E-Mail- und Telefonverifikation sowie
   der Konto-/OTP-Schritt des Legacy-Claim-Flows teilen sich diese Bausteine.
   Anatomie 1:1 aus avguide-mpII-prototyp-grid-inserat-v8.html (Ansicht H,
   Z. 1516-1603: schmale zentrierte Seite, Mono-Tabs mit Brand-Unterstreichung),
   mp-praefigiert; Feldstile kommen aus dem kanonischen .mp-field-Block am
   Dateianfang statt einer eigenen Definition (Umsetzungskonzept §5).

   Bewusst NICHT hier gestylt: die Legacy-Kartenauswahl in migration/claim.cfm
   (.mp-card/.mp-grid/.bdg-*) — die bleibt mit views/profiles/show.cfm geteilt
   und wandert erst mit dessen Neubau hierher (siehe Codestyle-Guide §Offene
   Punkte). claim.cfm uebernimmt aus diesem Block nur Kopf, Schritt-Anzeige
   und Aktions-Buttons.
   ========================================================================= */
.mp-auth { max-width: 430px; margin: 0 auto; padding: 48px 0 72px; }
.mp-auth.center { text-align: center; }
.mp-hp { display: none; }

.mp-auth-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.mp-auth-tabs a {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3); padding: 0 2px 12px;
    border-bottom: 2px solid transparent;
}
.mp-auth-tabs a:hover { color: var(--ink); }
.mp-auth-tabs a.active { color: var(--ink); border-bottom-color: var(--brand); }

.mp-auth h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 500; line-height: 1.15; }
.mp-auth .sub { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
/* Wertversprechen (Registrieren-Pane, Prototyp Z. 1562): Mono statt Sans,
   Brand-Punkt-Praefix — bewusst andere Rolle als .sub (Fliesstext). */
.mp-auth .value { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.7; }
.mp-auth .value::before { content: "\25CF\00a0"; color: var(--brand-deep); }
/* Meldungen im Auth-Kontext etwas luftiger als im Kontobereich: sie stehen
   direkt unter .sub/.value und haengen sonst fast am Text. */
.mp-auth .mp-flash { margin-top: 20px; }
.mp-auth form { margin-top: 28px; }
.mp-auth .field { margin-bottom: 22px; }
.mp-auth .field.pw-wrap { position: relative; }
.mp-auth .field.pw-wrap .mp-field { padding-right: 76px; }
/* Label bleibt oben (wie jedes .field), nur die Zeile aus Eingabe + Badge ist
   ein Flex-Row. Einziger Konsument: migration/account.cfm (bestaetigte E-Mail). */
.mp-auth .field-static .row { display: flex; align-items: center; gap: 10px; }
.mp-auth .field-static .row .mp-field { flex: 1; background: var(--surface); color: var(--ink-2); }
.mp-auth-badge-ok {
    white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--mp-ok-ink);
    background: var(--mp-ok-bg); padding: 4px 10px; border-radius: var(--mp-radius-full);
}
.mp-auth .lblrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mp-auth .lblrow .mp-field-lbl { margin-bottom: 0; }
.mp-auth .lblrow a { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.mp-auth .lblrow a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-auth .tel-row { display: flex; gap: 12px; }
/* 96px liess die letzte Ziffer (+41/+423) hinter dem Pfeil-Padding des
   kanonischen select.mp-field verschwinden (14px links + 36px rechts fuer
   den Pfeil lassen bei 96px nur 46px fuer Flagge+Text) — Live-Fund 28.7.2026. */
.mp-auth .tel-row select.mp-field { width: 118px; flex: 0 0 auto; }
.mp-auth .tel-row input.mp-field { flex: 1; }
.mp-auth .pw-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
    cursor: pointer; padding: 4px 6px;
}
.mp-auth .pw-toggle:hover { color: var(--ink); }

/* Feldfehler: inline, Brand-Punkt statt Rot-Flaeche (Konzept 5) — eigene
   Klasse statt des geteilten .mp-form-error (mp-legacy.css), das noch von
   Payments/Account/Listings-Wizard mit anderer Optik (Rot-Text) gebraucht wird. */
/* Gleicher Wechsel wie .mp-field-err/.mp-nf .err (siehe dort). */
.mp-auth .field-err { font-size: 12px; font-weight: 500; color: var(--mp-err-ink); margin-top: 6px; line-height: 1.5; }
/* Brand-Punkt entfernt 11.9.2026 (keine Aufzaehlung, gleich wie .mp-nf .err). */
/* Bis 11.9. kam ein Punkt aus ::before; die Live-Pruefung in register.cfm/
   login.cfm raeumt den Fehler mit textContent = '' weg und laesst das <p>
   stehen — dann blieb der Punkt unter dem korrigierten Feld zurueck
   (Endkontrolle 10.9.2026, Fund A2-1). Der Punkt ist weg, die Regel bleibt:
   sie nimmt auch den margin-top des leeren Absatzes. */
.mp-auth .field-err:empty { display: none; }

/* AGB-Zustimmung: Mehrfachwahl-Optik □/■ wie im Wizard (.mp-nf .checks),
   hier fuer eine einzelne Pflichtzustimmung statt einer Auswahl-Reihe. */
/* Einzelne Pflichtzustimmung statt einer Mehrfachwahl-Reihe (wie .mp-nf
   .checks) — braucht deshalb eine besser lesbare Grösse: Sans statt Mono
   (Fliesstext + eingebetteter Link, kein Datenwert) und grosszuegiger
   Klickbereich. Live-Fund 28.7.2026: 12px Mono war v.a. mobil zu klein. */
/* Etappe 4c: derselbe Baustein traegt die Bestaetigungs-Checkbox im
   Konto-loeschen-Dialog — gleiche Rolle (einzelne Pflichtzustimmung),
   deshalb Selektoren erweitert statt Regeln dupliziert. */
.mp-auth .checks, .mp-dialog .checks { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--ink); padding: 4px 0; }
.mp-auth .checks input, .mp-dialog .checks input { position: absolute; opacity: 0; width: 0; }
.mp-auth .checks label, .mp-dialog .checks label { cursor: pointer; }
/* Kaestchen-Glyphe deutlich groesser als der Fliesstext (19px vs. 13.5px) —
   das □ des Mono-Fonts ist optisch klein in der Gevierthoehe; als einziges
   Pflicht-Klickziel braucht es Praesenz. vertical-align statt line-height,
   damit die erste Textzeile nicht aufreisst. */
.mp-auth .checks label::before, .mp-dialog .checks label::before { content: "\25A1\00a0"; color: var(--ink-3); font-family: var(--font-mono); font-size: 19px; line-height: 1; vertical-align: -2px; }
.mp-auth .checks label:hover, .mp-dialog .checks label:hover { color: var(--ink); }
.mp-auth .checks input:checked + label::before, .mp-dialog .checks input:checked + label::before { content: "\25A0\00a0"; color: var(--brand-deep); }
.mp-auth .checks input:focus-visible + label, .mp-dialog .checks input:focus-visible + label { box-shadow: inset 0 -2px 0 var(--brand); }
.mp-auth .privacy-note { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; }
@media (max-width: 620px) {
    .mp-auth .checks { font-size: 14.5px; }
}

.mp-auth .turnstile {
    display: flex; align-items: baseline; gap: 8px; background: var(--surface-2);
    border: 1px solid var(--line); padding: 12px 14px; font-family: var(--font-mono);
    font-size: 11px; color: var(--ink-2); margin-bottom: 22px;
}
.mp-auth .turnstile b { color: var(--brand-deep); font-weight: 400; }
.mp-auth .turnstile .cf-turnstile { flex: 1; width: 100%; }

.mp-auth .switch { font-size: 13px; color: var(--ink-2); text-align: center; margin-top: 24px; }
.mp-auth .switch a { font-weight: 600; color: var(--ink); }
.mp-auth .switch a:hover { box-shadow: inset 0 -2px 0 var(--brand); }
.mp-auth .postnote { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.7; text-align: center; }
.mp-auth .resend { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 18px; }
.mp-auth .resend a, .mp-auth .resend button {
    color: var(--ink-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.mp-auth .resend a:hover, .mp-auth .resend button:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-auth .resend button:disabled { color: var(--ink-3); cursor: default; box-shadow: none; }
.mp-auth .back { text-align: center; margin-top: 16px; }
.mp-auth .back a { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.mp-auth .back a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* Ergebnis-Seiten: Verify-E-Mail, Passwort-Reset erledigt (schmal, .mp-auth),
   Migration-Claim ungueltig/abgeschlossen (breiter, eigener Rahmen). */
.mp-result { max-width: 560px; margin: 0 auto; padding: 64px 0 72px; text-align: center; }
.mp-result.wide { max-width: 700px; }
.mp-result h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; }
.mp-result p.lead { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* Reduziert den Browser-Default-Abstand, wenn direkt eine .mp-result-tip folgt
   (die selbst bereits margin-top mitbringt) — sonst doppelter Abstand. */
.mp-result p.lead.tight { margin-bottom: 0; }
.mp-result-tip { background: var(--surface); padding: 16px 18px; margin: 24px 0; text-align: left; }
.mp-result-tip .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-3); display: block; margin-bottom: 8px;
}
.mp-result-tip p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.mp-result-list { text-align: left; border-top: 1px solid var(--line); margin-top: 8px; }
.mp-result-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mp-result-row .nm { font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
.mp-result-row .pr { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* Label/Wert-Variante (Zahlungs-Abschluss, Etappe 4c): Wert mono = transaktional */
.mp-result-row .lbl { font-size: 13px; color: var(--ink-2); }
.mp-result-row .val { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.mp-result-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.7; margin-top: 18px; }

.mp-auth .acts, .mp-result .acts { display: flex; gap: 12px; margin-top: 26px; justify-content: center; }
.mp-auth .acts .mp-btn-ink, .mp-auth .acts .mp-btn-ghost,
.mp-result .acts .mp-btn-ink, .mp-result .acts .mp-btn-ghost { flex: 1; }

/* Icon-Kreis: Kreise sind von der «keine Rundungen»-Regel ausdrueckliche
   Ausnahme (TOKENS-Kommentar oben). Ein Baustein fuer alle Zustaende
   (Schloss/Schluessel/Brief/Smartphone/Haken/Kreuz), Farbvarianten per Modifier. */
.mp-auth-icon, .mp-result .mp-auth-icon {
    width: 56px; height: 56px; border-radius: 50%; background: var(--surface);
    color: var(--ink); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.mp-auth-icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mp-auth-icon.ok  { background: var(--mp-ok-bg);  color: var(--mp-ok-ink); }
.mp-auth-icon.err { background: var(--mp-err-bg); color: var(--mp-err-ink); }
.mp-auth-infobox { background: var(--surface); padding: 16px 18px; font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0 0 22px; }
.mp-auth-infobox strong { color: var(--ink); }
/* Faktenhafter Inhalt (Entwicklungs-OTP) — Mono statt Sans, siehe Konzept §5. */
.mp-auth-infobox.mono { font-family: var(--font-mono); font-size: 12px; }
/* Formulare und Infoboxen innerhalb .mp-auth.center: der Kopf ist zentriert,
   Formularfelder und laengere Hinweistexte bleiben aus Lesbarkeitsgruenden
   linksbuendig (verifyOtp.cfm bleibt bewusst zentriert — die Ziffernfelder
   gehoeren mittig). */
.mp-auth-left { text-align: left; }
/* Ein <form> mitten im Fliesstext (Code-erneut-senden-Saetze) — darf den
   Textfluss nicht als Block unterbrechen. Vier identische Stellen. */
.mp-form-inline { display: inline; }

/* ---------- Claim-Seite: Container/Kopf/Fussnote (Legacy-Migration, Schritt 1) ----------
   Dritte Wrapper-Tier neben .mp-auth (430px) und .mp-result (560px): das
   Kartenraster braucht eine breitere Spalte. */
.mp-claim { max-width: 900px; margin: 0 auto; padding: 32px 0 64px; }
.mp-claim h1 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 38px); font-weight: 500; margin: 0 0 10px; }
.mp-claim .intro { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 28px; max-width: 640px; }
.mp-claim .hint { font-size: 13px; color: var(--ink-2); margin: 22px 0; }
.mp-claim .optout { text-align: center; margin-top: 20px; }
.mp-claim .optout button { border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); cursor: pointer; }
.mp-claim .optout button:hover { color: var(--ink); }

/* ---------- Claim-Kartenauswahl (Legacy-Migration, Schritt 1) ----------
   Auswahlkarten nach dem .typesel-Muster der Profilseite: native Checkbox
   versteckt aber fokussierbar, der Zustand sitzt auf dem Rahmen (Brand-
   Oberlinie) und zusaetzlich als Mono-Glyphe im Textblock.
   Zwei Regeln des Designsystems, gegen die die Alt-Karte verstiess und die
   der Neubau einhaelt: nichts liegt auf dem Bild (Zustands-Badge und Haekchen
   lagen als Overlays darauf) und keine Schatten/Rundungen. */
.mp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.mp-picks input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Das Auswahlfeld steht ALS EIGENE ZEILE UEBER der Karte, nicht im Inseratstext
   (User-Fund 29.7.2026: als Mono-Zeile im Textblock war es zu klein und wurde
   schlicht nicht gefunden). Grosse Glyphe, Klartext-Label, getoenter Teller —
   das ist hier die Hauptaktion der Seite und muss danach aussehen.
   Die Karte darunter bleibt zusaetzlich klickbar: zwei <label for> auf dasselbe
   Feld sind zulaessig, so trifft man die Auswahl auch mit dem Klick aufs Bild. */
.mp-picktoggle {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 11px 14px; border: 1px solid var(--line); border-bottom: 0;
    background: var(--surface); color: var(--ink-2);
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
}
.mp-picktoggle::before {
    content: "\25A1"; font-family: var(--font-mono); font-size: 21px; line-height: 1;
    color: var(--ink-3); flex: 0 0 auto;
}
.mp-picktoggle:hover { color: var(--ink); }
.mp-picktoggle:hover::before { color: var(--ink); }
.mp-picks input:checked + .mp-picktoggle { color: var(--ink); }
.mp-picks input:checked + .mp-picktoggle::before { content: "\25A0"; color: var(--brand-deep); }
.mp-picks input:focus-visible + .mp-picktoggle { box-shadow: inset 0 -2px 0 var(--brand-deep); }

.mp-pick { display: block; cursor: pointer; border: 1px solid var(--line); background: var(--bg); }
.mp-pick:hover { border-color: var(--ink-3); }
/* Nicht gewaehlt: die Vorschau tritt zurueck, damit die Auswahl ablesbar bleibt. */
.mp-picks input:not(:checked) + .mp-picktoggle + .mp-pick { opacity: 0.55; }
.mp-picks input:checked + .mp-picktoggle + .mp-pick { border-color: var(--ink); }
.mp-picks input:checked + .mp-picktoggle { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--brand); }
.mp-pick .body { padding: 12px 14px 14px; }
.mp-pick .kick {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
    color: var(--ink-3); display: block; margin-bottom: 6px;
}
.mp-pick .nm {
    font-family: var(--font-serif); font-size: 16.5px; font-weight: 500;
    line-height: 1.25; color: var(--ink); display: block;
}
.mp-pick .pr { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); display: block; margin-top: 8px; }
.mp-pick .loc { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: block; margin-top: 4px; }

/* ---------- Legal-Inhaltsseiten (Sicherheitshinweise) ----------
   Lange Fliesstexte: Serif-Titel, Sans-Lauftext auf Lesebreite, Mono nur fuer
   das Kleingedruckte. Ersetzt den .mp-legal-page-Block aus mp-legacy (Etappe
   4e); die Klassennamen bleiben, die Regeln sind neu. */
.mp-legal-page { padding: 44px 0 72px; }
.mp-legal-page .mp-container { max-width: 720px; }
.mp-legal-page h1 {
    font-family: var(--font-serif); font-size: clamp(32px, 4.2vw, 44px);
    font-weight: 500; line-height: 1.08; margin: 0 0 20px;
}
.mp-legal-page .lead { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 40px; }
.mp-legal-page .lead strong { color: var(--ink); }
.mp-legal-page section { margin-bottom: 40px; }
.mp-legal-page h2 {
    font-family: var(--font-serif); font-size: 23px; font-weight: 500;
    line-height: 1.25; margin: 0 0 14px; padding-top: 18px;
    border-top: 1px solid var(--line);
}
.mp-legal-page p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
.mp-legal-page strong { color: var(--ink); font-weight: 600; }
.mp-legal-page ul, .mp-legal-page ol { margin: 0 0 16px; padding-left: 20px; }
.mp-legal-page li { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-bottom: 10px; }
/* Zitiertes Betrugsmuster — als Beleg abgesetzt, nicht als Schmuck. */
.mp-legal-page blockquote {
    margin: 0 0 16px; padding: 14px 18px; background: var(--surface);
    border-left: 3px solid var(--brand); font-size: 14.5px; line-height: 1.65;
    color: var(--ink-2); font-style: italic;
}
.mp-legal-page .disclaimer {
    font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
    color: var(--ink-3); margin-top: 44px; padding-top: 20px;
    border-top: 1px solid var(--line);
}
.mp-legal-page .disclaimer em { font-style: normal; }
/* Seite «Was ist neu?» (14.9.2026): Abschnittsnummer in Mono, Vergleichs-
   tabellen im Faktentabellen-Idiom (Mono-Kopf, Haarlinien), Merkkaesten auf
   getoenter Flaeche mit Brand-Kante. Textlinks laufen ueber das bestehende
   .mp-wrap a.mp-link (Ink, Unterlinie). */
.mp-legal-page .kicker { display: block; margin-bottom: 14px; }
.mp-legal-page .mp-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-right: 12px; }
.mp-legal-page .mp-cmp-wrap { overflow-x: auto; margin: 4px 0 18px; }
.mp-legal-page .mp-cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.mp-legal-page .mp-cmp th, .mp-legal-page .mp-cmp td {
    text-align: left; vertical-align: top; padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.mp-legal-page .mp-cmp th {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 400;
    border-bottom-color: var(--ink); padding-bottom: 7px;
}
.mp-legal-page .mp-cmp td:first-child, .mp-legal-page .mp-cmp th:first-child { width: 40%; padding-right: 20px; }
.mp-legal-page .mp-cmp tr:last-child td { border-bottom: 0; }
.mp-legal-page .mp-cmp .was { color: var(--ink-3); }
.mp-legal-page .mp-cmp .mono { font-family: var(--font-mono); color: var(--ink); }
.mp-legal-page .mp-callout { background: var(--surface); border-left: 3px solid var(--brand); padding: 16px 18px; margin: 18px 0 20px; }
.mp-legal-page .mp-callout .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.mp-legal-page .mp-callout p { font-size: 14.5px; }
.mp-legal-page .mp-callout p:last-child { margin-bottom: 0; }

/* ---------- Seite «Fuer Fachhaendler» (Fachhandel-Light) ----------
   B2B-Inhaltsseite mit Antragsformular. Erbt die Lesebreite und den
   Typo-Rhythmus der Legal-Seiten, setzt aber zwei eigene Akzente: die
   Nutzenliste als zweispaltiges Raster und den Lancierungs-Kasten auf
   getoenter Flaeche. Kein gelber Button — Brand bleibt «Inserat aufgeben»
   vorbehalten, der Antrag laeuft ueber .mp-btn-ink. */
.mp-dealers { padding: 44px 0 72px; }
.mp-dealers .mp-container { max-width: 720px; }
.mp-dl-head { margin-bottom: 44px; }
.mp-dl-head h1 {
    font-family: var(--font-serif); font-size: clamp(32px, 4.2vw, 44px);
    font-weight: 500; line-height: 1.08; margin: 8px 0 18px;
}
.mp-dl-lead {
    font-family: var(--font-serif); font-size: 21px; line-height: 1.4;
    color: var(--ink); margin: 0 0 18px;
}
.mp-dl-intro { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.mp-dl-sec { margin-bottom: 44px; }
.mp-dl-sec h2 {
    font-family: var(--font-serif); font-size: 23px; font-weight: 500;
    line-height: 1.25; margin: 0 0 18px; padding-top: 18px;
    border-top: 1px solid var(--line);
}
.mp-dl-sec p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
.mp-dl-sec strong { color: var(--ink); font-weight: 600; }
.mp-dl-sec ul { margin: 0 0 16px; padding-left: 20px; }
.mp-dl-sec li { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-bottom: 10px; }
.mp-dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 34px; }
.mp-dl-item h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.mp-dl-item p { font-size: 14px; line-height: 1.65; margin: 0; }
/* Lancierungspartner: getoente Flaeche als einziger Kasten der Seite —
   das Angebot ist der Punkt, an dem der Haendler haengen bleiben soll. */
.mp-dl-launch { background: var(--surface); padding: 26px 28px 10px; }
.mp-dl-launch h2 { border-top: 0; padding-top: 0; }
/* Schritte: Mono-Ziffer als Marke, kein Listenpunkt. */
.mp-dl-steps { list-style: none; margin: 0; padding: 0; }
.mp-dl-steps li {
    position: relative; padding-left: 40px; margin-bottom: 18px;
    font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.mp-dl-num {
    position: absolute; left: 0; top: 1px;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
    border-top: 3px solid var(--brand); padding-top: 6px; min-width: 22px;
}
.mp-dl-formlead { font-size: 14px; color: var(--ink-2); margin-bottom: 22px; }
.mp-dl-contact {
    font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
    color: var(--ink-3); margin-top: 36px; padding-top: 18px;
    border-top: 1px solid var(--line);
}
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein einladendes Feld.
   Muster identisch zu .mp-hp in der Registrierung. */
.mp-dealers .mp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline-Textlink in Fliesstext und Hinweisen (AGB, Datenschutz, Mailto).
   Ersetzt .mp-link-blue aus mp-legacy: kein Blau, sondern Ink mit
   Haarlinien-Unterstreichung, im Hover die Brand-Unterlinie wie bei den
   Mono-Links. Die Unterstreichung bleibt sichtbar — im Fliesstext muss ein
   Link auch ohne Farbunterschied erkennbar sein.
   Spezifitaet 0,2,1: das globale style.css faerbt a:visited mit 0,1,1. */
.mp-wrap a.mp-link {
    color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--line); text-underline-offset: 3px;
}
.mp-wrap a.mp-link:hover { text-decoration-color: var(--brand-deep); }

/* OTP-Eingang: Feldwerte mit Faktencharakter -> Mono statt Sans-Fettschrift (Konzept 5) */
.mp-auth-otp-group { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
.mp-auth-otp-input {
    width: 46px; height: 56px; text-align: center; font-family: var(--font-mono);
    font-size: 22px; font-weight: 500; border: 1px solid var(--line); border-radius: 0;
    background: var(--bg); color: var(--ink); outline: none; -moz-appearance: textfield;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-auth-otp-input::-webkit-outer-spin-button,
.mp-auth-otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mp-auth-otp-input:focus { border-color: var(--ink-3); box-shadow: inset 0 -2px 0 var(--brand-deep); }
.mp-auth-otp-input.has-error { border-color: var(--mp-err-ink); }
/* Abstand zum Submit-Button, der auf beiden OTP-Formularen (Auth + Migration)
   direkt der Ziffernreihe folgt — ein Regel statt zweifach inline. */
.mp-auth-otp-group + .mp-btn-ink { margin-top: 20px; }

/* Migration-Wizard: nummerierte Mono-Schrittzeile + Brand-Punkt statt
   Fortschrittsbalken (Umsetzungskonzept §5, ersetzt den frueheren 4px-Balken). */
.mp-steps {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 28px;
}
.mp-steps::before { content: "\25CF\00a0"; color: var(--brand-deep); font-size: 9px; }

/* =========================================================================
   ETAPPE 4c — Nachrichten · Zahlungen · Profil
   Markup-Anatomie aus avguide-mpII-prototyp-grid-inserat-v8.html:
   Ansicht E (Nachrichten, Z. 313–340), F (Profil, Z. 342–369),
   G (Inserenten-Profil, Z. 371–385). Fuer den Zahlungsflow gibt es KEINE
   Prototyp-Ansicht — er ist aus vorhandenen Primitiven komponiert
   (.mp-steps, Haarlinienbox, Mono-Faktenzeilen, .mp-result).
   ========================================================================= */

/* ---------- Geteilt: Leerzustand ---------- */
/* Loest .mp-empty-state (mp-legacy) ab: Haarlinienrahmen statt getoenter
   Flaeche, Mono-Sprache, keine Illustration. */
.mp-blank { border: 1px solid var(--line); padding: 56px 24px; text-align: center; margin-top: 32px; }
.mp-blank .t { font-family: var(--font-serif); font-size: 21px; font-weight: 500; display: block; }
.mp-blank p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); line-height: 1.7; margin-top: 10px; }
.mp-blank .acts { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

/* ---------- Merkliste ---------- */
/* Keine Prototyp-Ansicht — aus .mk-card und .mp-blank komponiert (wie der
   Zahlungsflow). Zweispaltig statt .mk-grid: die Konto-Inhaltsspalte ist um
   Navigation und Rinne schmaler, drei Karten waeren dort zu eng. */
.mp-favgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; padding: 28px 0 0; }
.mp-favitem { display: flex; flex-direction: column; }
.mp-favitem .rm {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
    color: var(--ink-3); background: none; border: 0; padding: 10px 0 0;
    cursor: pointer; align-self: flex-start;
}
.mp-favitem .rm:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- D · Nachrichten-Vorschau auf dem Dashboard ---------- */
/* Prototyp Ansicht D, Z. 307–311 (.msg-list/.mrow) */
.mp-msglist { margin-top: 18px; border-top: 1px solid var(--line); }
.mp-msglist .mrow {
    display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mp-msglist .mrow > span:first-child { min-width: 0; }
.mp-msglist .mt { font-weight: 600; font-size: 14.5px; display: block; }
.mp-msglist .mrow.unread .mt::before { content: "\25CF\00a0"; color: var(--brand-deep); font-size: 9px; }
.mp-msglist .ms {
    font-size: 13.5px; color: var(--ink-2); margin-top: 2px; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-msglist .md { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.mp-msglist .mrow:hover .mt { box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- G · Inserenten-Profilseite (oeffentlich) ---------- */
/* Prototyp Z. 371–384. Kartenraster kommt aus .mk-grid/.mk-card (Ansicht A) —
   hier nur Kopf, Verifikationszeile und Kategorien-Schnellfilter. */
.mp-seller .seller-head { display: flex; gap: 22px; padding: 44px 0 0; align-items: flex-start; }
.mp-seller .seller-head > div { min-width: 0; }
.mp-avatar-xl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--line); font-family: var(--font-mono); font-size: 17px;
    color: var(--ink-2); flex: 0 0 auto; margin-top: 6px;
}
.mp-seller .seller-head h1 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 42px); font-weight: 500; line-height: 1.08; }
.mp-seller .sh-badges {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-2);
    margin-top: 10px; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline;
}
.mp-seller .sh-badges .vflag { color: var(--ink-2); }
.mp-seller .sh-badges a.help { color: var(--ink-3); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.mp-seller .sh-badges a.help:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-seller .sh-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 6px; display: block; }
.mp-seller .sh-desc { color: var(--ink-2); font-size: 15px; margin-top: 16px; max-width: 640px; white-space: pre-line; }
.mp-seller .selcats {
    display: flex; gap: 8px 26px; flex-wrap: wrap; margin-top: 36px; padding: 14px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); align-items: baseline;
}
.mp-seller .selcats a::before { content: "\25CB\00a0"; }
.mp-seller .selcats a.on::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mp-seller .selcats a:hover, .mp-seller .selcats a.on { color: var(--ink); }

/* Mono-Blaetterzeile (Grid und Konto arbeiten mit Nachladen bzw. ohne Paging) */
.mp-pager {
    display: flex; justify-content: center; align-items: baseline; gap: 24px;
    padding: 44px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
.mp-pager a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-pager .pos { color: var(--ink-3); }

/* ---------- F · Konto-Profil ---------- */
/* Prototyp Z. 342–369. Feldstile kommen aus dem kanonischen .mp-field-Block —
   hier nur Raster, Auszeichnung und die beiden Seitenkaesten. */
.mp-profgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.mp-profgrid .prof-main { min-width: 0; }
.mp-profgrid .prof-user {
    display: flex; align-items: center; gap: 14px; margin-top: 30px;
    padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
/* Kreise sind die ausdrueckliche Ausnahme von «keine Rundungen» (TOKENS-Kommentar) */
.mp-avatar-lg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px;
    color: var(--ink-2); flex: 0 0 auto;
}
.mp-profgrid .prof-user .un { font-weight: 600; font-size: 16px; display: block; }
.mp-profgrid .prof-user .us { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; display: block; }
.mp-profgrid .prof-sec { margin-top: 36px; }
.mp-profgrid .prof-sec .sec-label { display: block; margin-bottom: 24px; }
.mp-profgrid .field { margin-bottom: 32px; }
.mp-profgrid .opt {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
    color: var(--ink-3); margin-left: 8px; font-weight: 400;
}
.mp-profgrid .phone-row { display: flex; gap: 12px; align-items: flex-start; }
.mp-profgrid .phone-row .mp-field { flex: 1; min-width: 0; }
.mp-profgrid .phone-row .mp-btn-ghost { flex: 0 0 auto; }
/* Konto-Typ als Auswahlkarten: native Radios bleiben fokussierbar, die Auswahl
   zeigt eine Brand-Oberlinie (Prototyp Z. 358) — kein JS noetig. */
.mp-profgrid .typesel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mp-profgrid .typesel input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-profgrid .typesel label { border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; display: block; }
.mp-profgrid .typesel label:hover { border-color: var(--ink); }
.mp-profgrid .typesel label b { display: block; font-size: 14px; font-weight: 600; }
.mp-profgrid .typesel label span { font-size: 12px; color: var(--ink-2); line-height: 1.45; display: block; margin-top: 2px; }
.mp-profgrid .typesel input:checked + label { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--brand); }
.mp-profgrid .typesel input:focus-visible + label { border-color: var(--ink); }
.mp-profgrid .nf-actions { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
/* Seitenspalte: Verifikationsteller + Loeschkasten. Ernst ueber Text und Position
   statt ueber Rot (Prototyp-Fussnote Z. 1834). */
.mp-profgrid .vpanel { background: var(--surface); padding: 20px 22px; margin-top: 30px; }
.mp-profgrid .danger { border: 1px solid var(--line); padding: 20px 22px; margin-top: 16px; }
.mp-profgrid .vpanel .lbl, .mp-profgrid .danger .lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px;
}
.mp-profgrid .danger .lbl { margin-bottom: 8px; }
.mp-profgrid .vpanel .vrow { padding: 11px 0; border-bottom: 1px solid var(--line); }
.mp-profgrid .vpanel .vrow:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.mp-profgrid .vpanel .badge-trust { color: var(--ink); display: block; }
.mp-profgrid .vpanel .badge-trust::before { content: "\2713\00a0"; color: var(--brand-deep); }
.mp-profgrid .vpanel .badge-trust.none { color: var(--ink-2); }
.mp-profgrid .vpanel .badge-trust.none::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-profgrid .vpanel .vsub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; display: block; }
.mp-profgrid .vpanel .vrow .mp-btn-ghost { width: 100%; margin-top: 10px; }
.mp-profgrid .danger p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }

/* ---------- Sicherheit (Passwort, Telefon, später 2FA) ---------- */
/* Eigene Seite statt zweier Formulare auf «Profil». Nutzt die
   .prof-sec-Abschnittsanatomie mit; hier nur Spaltenbreite und die
   Statuszeile mit Ghost-Aktion. */
.mp-secpage { max-width: 560px; }
.mp-secpage .prof-sec { margin-top: 36px; }
.mp-secpage .prof-sec .sec-label { display: block; margin-bottom: 24px; }
.mp-secpage .field { margin-bottom: 32px; }
.mp-secpage .mp-secrow {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.mp-secpage .mp-secrow .badge-trust { color: var(--ink); display: block; }
.mp-secpage .mp-secrow .badge-trust::before { content: "\2713\00a0"; color: var(--brand-deep); }
.mp-secpage .mp-secrow .badge-trust.none { color: var(--ink-2); }
.mp-secpage .mp-secrow .badge-trust.none::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-secpage .mp-secrow .vsub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; display: block; }
/* Abstand zwischen Statuszeile und dem Formular fuer die neue Nummer — sass
   direkt an der Haarlinie, User-Fund 29.7.2026. */
.mp-secpage .mp-secrow + form { margin-top: 24px; }

/* ---------- Checkout (Payrexx) ---------- */
/* Ohne Prototyp-Vorlage: schmale Spalte wie .mp-auth, Zusammenfassung als
   Haarlinienbox mit Mono-Faktenzeilen (Konzept §5: Gebuehrenrechnung als
   kleine Techniktabelle), Schrittzeile ueber das vorhandene .mp-steps.
   Coupon-Rueckmeldung ohne Gruen/Rot — Brand-Punkt und Text tragen die Aussage. */
.mp-checkout { max-width: 520px; margin: 0 auto; padding: 40px 0 72px; }
.mp-checkout .sum { border: 1px solid var(--line); padding: 20px 22px; }
.mp-checkout .sum-lbl {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 16px;
}
.mp-checkout .srow { display: flex; gap: 14px; align-items: flex-start; }
.mp-checkout .srow .pic { width: 84px; flex: 0 0 auto; aspect-ratio: 4 / 3; }
.mp-checkout .sname { font-family: var(--font-serif); font-size: 18px; font-weight: 500; line-height: 1.25; display: block; }
.mp-checkout .scat { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; display: block; }
.mp-checkout .frow {
    display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
    padding: 9px 0; border-top: 1px solid var(--line);
}
.mp-checkout .frow:first-of-type { margin-top: 18px; }
.mp-checkout .frow.total { font-size: 14.5px; color: var(--ink); }
.mp-checkout .fee-link {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
    background: none; border: 0; padding: 6px 0 0; cursor: pointer;
}
.mp-checkout .fee-link:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-checkout .coupon-box { margin-top: 18px; }
/* stretch statt flex-start: Feld und Button hatten unterschiedliche Hoehe
   (.mp-field/.mp-btn-ghost bringen eigenes Padding mit) — User-Fund 29.7.2026. */
.mp-checkout .coupon-input { display: flex; gap: 10px; align-items: stretch; }
.mp-checkout .coupon-input .mp-field { text-transform: uppercase; }
.mp-checkout .coupon-input .mp-btn-ghost { flex: 0 0 auto; }
/* margin-bottom statt margin-top: .coupon-msg ist das letzte Kind in
   .coupon-box, ein margin-top wirkt nur zwischen Feld/Button und der Meldung.
   Der Abstand zur naechsten Zeile darunter (Rabatt-Zeile ODER — im
   Fehlerfall, wenn discountRow display:none bleibt — direkt die
   Total-Zeile) kollabiert sonst auf 0, weil eine unsichtbare Zwischenzeile
   keinen Raum einnimmt (User-Fund 29.7.2026: Abstand fehlte nur im
   Fehlerfall, weil die vorherige Regel auf .coupon-box + .frow zielte). */
.mp-checkout .coupon-msg { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin: 8px 0 12px; }
.mp-checkout .coupon-msg:not(:empty)::before { content: "\25CF\00a0"; color: var(--brand-deep); }
/* Fehlerfaelle (ungueltig/abgelaufen/aufgebraucht/… sowie der generische
   Netzwerkfehler «Fehler bei der Coupon-Pruefung») immer im gedaempften Rot,
   nicht nur der Text — auch die Glyphe wechselt von Punkt auf Kreuz, damit
   die Aussage nicht allein an der Farbe haengt (User-Fund 29.7.2026). */
.mp-checkout .coupon-msg.err { color: var(--mp-err-ink); }
.mp-checkout .coupon-msg.err::before { content: "\2715\00a0"; color: var(--mp-err-ink); }
.mp-checkout .note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.7; margin-top: 14px; }
.mp-checkout .note.center { text-align: center; }
.mp-checkout form { margin-top: 26px; }
.mp-checkout .agb { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); line-height: 1.7; margin-top: 14px; text-align: center; }
.mp-checkout .agb a { color: var(--ink-2); }
.mp-checkout .agb a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- Zahlungen · Konto-Verlauf ---------- */
/* Ohne Prototyp-Vorlage: gleiches Haarlinien-Zeilenraster wie .mp-lhead/.mp-lrow
   («Meine Inserate»), eigene Spaltenbreiten. Betrag und Datum mono
   (Konzept §2.2: Mono = transaktional), Status als Brand-Punkt wie in der
   Inserate-Tabelle — kein Pill, keine Statusfarbe. */
.mp-phead, .mp-prow {
    display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px 110px;
    gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.mp-ptable { margin-top: 18px; border-top: 1px solid var(--line); }
.mp-phead {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); padding: 10px 0;
}
.mp-prow .ttl { display: block; min-width: 0; }
.mp-prow .nm { font-family: var(--font-serif); font-size: 16.5px; font-weight: 500; line-height: 1.3; }
.mp-prow a.nm:hover { box-shadow: inset 0 -2px 0 var(--brand); }
/* Vorgangsart (v1.25) — ohne sie sehen Aufschaltung und Verlaengerung
   desselben Inserats identisch aus. Mono, weil transaktional. */
.mp-prow .ty {
    display: block; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.mp-prow .amt { font-family: var(--font-mono); font-size: 14px; }
.mp-prow .st { font-family: var(--font-mono); font-size: 11.5px; }
.mp-prow .st::before { content: "\25CF\00a0"; color: var(--brand-deep); }
.mp-prow .st.off { color: var(--ink-3); }
.mp-prow .st.off::before { content: "\25CB\00a0"; color: var(--ink-3); }
.mp-prow .dt { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------- E · Nachrichten-Zweispalter ---------- */
/* Prototyp Z. 313–340. Abweichungen zur Vorlage, beide funktional begruendet:
   1. Feste Hoehe ueber --msg-split-height + eigene Scrollbereiche — der
      Prototyp hat fuenf Dummy-Nachrichten, echte Verlaeufe brauchen Scrolling.
   2. Composer mit <textarea class="mp-field"> statt <input> — Mehrzeiler bleibt
      erhalten, Feldstil kommt aus dem kanonischen Block (prompt_form_inputs). */
.mp-msgpane {
    display: grid; grid-template-columns: 300px minmax(0, 1fr);
    border: 1px solid var(--line); margin-top: 32px;
    height: var(--msg-split-height); align-items: stretch;
}
.mp-msgpane .threads { border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
/* Reiter «Aktiv | Archiv» ueber der Thread-Liste (Nachrichten-Archiv pro
   Benutzer, 8.9.2026). Gleiche Sprache wie .mp-auth-tabs, nur kompakter,
   und sticky, damit der Reiter beim Scrollen der Liste stehen bleibt. */
.mp-msgpane .tl-tabs {
    display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--line);
    background: var(--bg); position: sticky; top: 0; z-index: 1; flex: 0 0 auto;
}
.mp-msgpane .tl-tabs a {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-2); padding: 12px 2px 10px;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.mp-msgpane .tl-tabs a:hover { color: var(--ink); }
.mp-msgpane .tl-tabs a.active { color: var(--ink); border-bottom-color: var(--brand); }
.mp-msgpane .tl-empty { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 22px 16px; }
/* Archivieren im Chat-Kopf: Formular-Button in .goto-Optik */
.mp-msgpane .convo-head .acts { display: flex; gap: 18px; align-items: baseline; }
.mp-msgpane .convo-head form { display: inline; margin: 0; }
.mp-msgpane .convo-head button.goto {
    background: none; border: 0; padding: 0; cursor: pointer; line-height: inherit;
}
/* Archiv-Status im geoeffneten Thread (Fund A4-1, 11.9.2026): der Reiter
   allein sagte nicht, dass man im Archiv steht, und «Wiederherstellen» ging
   als Textlink im Kopf unter. Statuszeile in Surface mit Haarlinie, der
   Rueckweg als Ghost-Button daneben. */
.mp-msgpane .convo-note {
    display: flex; justify-content: space-between; align-items: center; gap: 12px 20px;
    flex-wrap: wrap; margin: 0; padding: 12px 20px; background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2);
}
.mp-msgpane .convo-note form { margin: 0; }
.mp-msgpane .thr {
    display: block; padding: 14px 16px; border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
}
.mp-msgpane .thr:hover { background: var(--surface); }
.mp-msgpane .thr.active { border-left-color: var(--brand); background: var(--surface); }
.mp-msgpane .thr .tt {
    font-weight: 600; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px;
}
.mp-msgpane .thr .tt .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-msgpane .thr .tt .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.mp-msgpane .thr .sn { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-msgpane .thr .fr { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; display: block; }
.mp-msgpane .thr.unread .tt .nm::before { content: "\25CF\00a0"; color: var(--brand-deep); font-size: 9px; }
.mp-msgpane .convo { display: flex; flex-direction: column; min-width: 0; }
.mp-msgpane .convo-head {
    display: flex; justify-content: space-between; gap: 12px 20px; padding: 16px 20px;
    border-bottom: 1px solid var(--line); align-items: baseline; flex-wrap: wrap;
}
.mp-msgpane .convo-head > span { min-width: 0; }
.mp-msgpane .ct { font-family: var(--font-serif); font-size: 18.5px; font-weight: 500; display: block; }
.mp-msgpane .cs { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 3px; }
.mp-msgpane .goto { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.mp-msgpane .goto:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.mp-msgpane .convo-body { padding: 22px 20px 10px; display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
/* Eckige Haarlinienbloecke statt runder Bubbles (Prototyp-Fussnote Z. 1829) */
.mp-msgpane .bubble { max-width: 76%; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.mp-msgpane .bubble.in { background: var(--surface); align-self: flex-start; }
.mp-msgpane .bubble.out { background: var(--contrast-bg); color: var(--contrast-ink); align-self: flex-end; }
.mp-msgpane .bmeta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin: 4px 0 14px; align-self: flex-start; }
.mp-msgpane .bmeta.out { align-self: flex-end; }
.mp-msgpane .convo-empty { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 22px 20px; }
.mp-msgpane .composer { display: flex; gap: 12px; padding: 16px 20px 8px; border-top: 1px solid var(--line); align-items: flex-start; }
.mp-msgpane .composer textarea.mp-field { flex: 1; min-width: 0; min-height: 46px; height: 46px; }
.mp-msgpane .composer .mp-btn-ink { flex: 0 0 auto; }
.mp-msgpane .mod-note { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 0 20px 14px; line-height: 1.6; }

/* ---------- Umbrueche ---------- */
@media (max-width: 960px) {
    .mk-grid { grid-template-columns: 1fr 1fr; }
    .ins-layout { grid-template-columns: 1fr; gap: 36px; }
    .ins-panel { position: static; }
    .mp-acct-layout { grid-template-columns: 1fr; gap: 0; }
    .mp-acct-nav {
        position: static; flex-direction: row; flex-wrap: wrap; gap: 0 22px;
        margin-top: 32px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
    }
    .mp-acct-nav .grp { display: none; }
    .mp-acct-nav a, .mp-acct-nav .grp + a,
    .mp-acct-nav a.adm { border: 0; margin: 0; padding: 6px 0 8px; border-bottom: 2px solid transparent; }
    .mp-acct-nav a.active { border-bottom-color: var(--brand); }
    .mp-nf .upl { grid-template-columns: repeat(3, 1fr); }
    .mp-stats { grid-template-columns: 1fr; }
    .mp-lhead { display: none; }
    .mp-lrow { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .mp-lrow .exp { display: none; }
    /* Ablaufdatum wandert in den Status («● Aktiv · bis {Datum}»), der ab
       Spalte 2 einzeilig unter dem Titel steht — nicht in der Thumbnail-Spalte */
    .mp-lrow .st .stx { display: inline; }
    .mp-lrow .st { grid-column: 2 / -1; }
    /* Aktionen als eigene volle Zeile: Icon+Label sichtbar, Tooltip aus */
    .mp-lrow .act { grid-column: 1 / -1; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-start; }
    .mp-lrow .act .albl { display: inline; }
    .mp-lrow .act a, .mp-lrow .act button { min-width: 0; min-height: 0; padding: 4px 0; }
    .mp-lrow .act a::after, .mp-lrow .act button::after { display: none; }
    .mp-lrow .act a:hover, .mp-lrow .act button:hover { box-shadow: inset 0 -2px 0 var(--brand); }
    /* Nachrichten: Threadliste stapelt ueber die Konversation, Hoehen werden
       einzeln begrenzt statt ueber die feste Panel-Hoehe */
    .mp-msgpane { grid-template-columns: 1fr; height: auto; }
    .mp-msgpane .threads { border-right: 0; border-bottom: 1px solid var(--line); max-height: 240px; }
    .mp-msgpane .convo-body { max-height: 50vh; }
    /* Zahlungen: Kopfzeile aus, Zeile stapelt (Titel voll, Fakten als Mono-Zeile) */
    .mp-phead { display: none; }
    .mp-prow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
    .mp-prow .ttl { grid-column: 1 / -1; }
    .mp-prow .amt { grid-column: 1; }
    .mp-prow .dt { grid-column: 2; text-align: right; }
    .mp-prow .st { grid-column: 1 / -1; }
    .mp-profgrid { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 620px) {
    .mp-dl-grid { grid-template-columns: 1fr; gap: 24px; }
    .mp-dl-launch { padding: 22px 20px 8px; }
    .mk-grid { grid-template-columns: 1fr; }
    .mp-favgrid { grid-template-columns: 1fr; }
    .mk-cats { gap: 4px 20px; }
    .ins-cta { grid-template-columns: 1fr; }
    .ins-thumbs { grid-template-columns: repeat(3, 1fr); }
    .mp-nf .row2 { grid-template-columns: 1fr; }
    .mp-nf .checks.grid2 { grid-template-columns: 1fr; }
    .mp-nf .upl { grid-template-columns: repeat(2, 1fr); }
    .mp-nf .nf-actions .mp-btn-ink { min-width: 0; width: 100%; }
    .mp-nf .nf-actions .mp-btn-ghost { width: 100%; }
    .mp-auth-otp-input { width: 40px; height: 50px; font-size: 19px; }
    .mp-auth .acts, .mp-result .acts { flex-direction: column; }
    .mp-profgrid .typesel { grid-template-columns: 1fr; }
    /* Auswahl-Zeilen mobil grosszuegiger: lesbarere Beschriftung und mehr
       Abstand zwischen den Klickzielen (analog .mp-auth .checks). */
    .mp-nf .radios, .mp-nf .checks { font-size: 13px; }
    .mp-nf .radios { gap: 10px 24px; }
    .mp-nf .checks { gap: 12px 24px; }
    .mp-nf .radios label, .mp-nf .checks label { padding: 5px 0; }
}