/* Millions4.earth · Brief design system
   ─────────────────────────────────
   editorial / civic / serif — feels like a permanent letter to politics.
   Design tokens from design_handoff_brief/README.md §3, themes.brief.
*/

@import url("/assets/fonts/_fonts.css");

:root {
    /* colours ─────────────────────────────────────────────────────────── */
    --bg:          #f3ece0;   /* warm cream — between pages */
    --paper:       #faf6ec;   /* main reading surface       */
    --ink:         #1c1812;   /* body text, primary buttons */
    --ink-soft:    #6b5e4a;   /* secondary, captions        */
    --rule:        #d8cdb6;   /* hairlines, dividers        */
    --accent:      #b8541a;   /* clay — primary accent      */
    --accent-2:    #2d5a3d;   /* forest — confirmation only */
    --accent-soft: #ebd7c1;   /* tint of accent             */

    /* typography ──────────────────────────────────────────────────────── */
    --font-head: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* geometry ────────────────────────────────────────────────────────── */
    --radius: 2px;
    --rule-weight: 1px;
    --max-content: 64rem;
    --max-headline: 760px;
    --max-lede: 620px;
}

/* ── Brief · Dark ─────────────────────────────────────────────────────── */
:root[data-mode="dark"],
:root[data-theme="brief"][data-mode="dark"] {
    --bg:          #1a1612;
    --paper:       #221d17;
    --ink:         #f1ead8;
    --ink-soft:    #aa9c83;
    --rule:        #463b2c;
    --accent:      #e07636;
    --accent-2:    #5c9b76;
    --accent-soft: #3a2b1d;
    color-scheme: dark;
}

/* ── Plakat · Light ───────────────────────────────────────────────────── */
:root[data-theme="plakat"] {
    --bg:          #ece7df;
    --paper:       #f7f3eb;
    --ink:         #0a0a08;
    --ink-soft:    #4a4944;
    --rule:        #0a0a08;
    --accent:      #e84a1f;
    --accent-2:    #f5c84e;
    --accent-soft: #fce0d4;
    --font-head: "Archivo", "Archivo Black", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;
    --radius: 0;
    --rule-weight: 2px;
}

/* ── Plakat · Dark ────────────────────────────────────────────────────── */
:root[data-theme="plakat"][data-mode="dark"] {
    --bg:          #0a0a08;
    --paper:       #131311;
    --ink:         #f7f3eb;
    --ink-soft:    #c1bdb2;
    --rule:        #f7f3eb;
    --accent:      #ff6638;
    --accent-2:    #f5c84e;
    --accent-soft: #2a1810;
    color-scheme: dark;
}

/* ── Frisch · Light (third theme) ─────────────────────────────────────
   Grünes Theme aus Frisch.html — sage page, deep forest ink, fresh leaf
   accent. Uses display sans (Bricolage Grotesque) for headings instead of
   serif, with a lime underline accent and rounded card surfaces. */
:root[data-theme="frisch"] {
    --bg:          #eef3e7;
    --paper:       #ffffff;
    --paper-2:     #f7faf3;
    --ink:         #0d2818;
    --ink-soft:    #4a6655;
    --rule:        #cfdcc1;
    --rule-soft:   #e3ead8;
    --accent:      #2d8a52;
    --accent-2:    #b8d432;
    --accent-soft: #d4e8d8;
    --accent-ink:  #0b3a22;
    --accent-warm: #c4541a;
    color-scheme: light;
}

:root[data-theme="frisch"][data-mode="dark"] {
    --bg:          #0d2818;
    --paper:       #15321f;
    --paper-2:     #1b3a25;
    --ink:         #eef3e7;
    --ink-soft:    #9ab39d;
    --rule:        #2d4a37;
    --rule-soft:   #1f3b29;
    --accent:      #4caf6f;
    --accent-2:    #cbeb56;
    --accent-soft: #1d3d28;
    --accent-ink:  #d4e8d8;
    --accent-warm: #e07636;
    color-scheme: dark;
}

/* Frisch decorative tweaks — sans-display headings, pill buttons, rounded sage cards */
:root[data-theme="frisch"] {
    --font-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body: "Public Sans", "Inter", system-ui, sans-serif;
}
:root[data-theme="frisch"] h1, :root[data-theme="frisch"] h2, :root[data-theme="frisch"] h3,
:root[data-theme="frisch"] .counter-num, :root[data-theme="frisch"] .dashboard-greeting {
    font-family: var(--font-head); font-weight: 600; font-style: normal;
    letter-spacing: -0.025em;
}
:root[data-theme="frisch"] .lede        { font-style: normal; font-weight: 400; }
:root[data-theme="frisch"] .wordmark    { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
:root[data-theme="frisch"] .wordmark__accent { color: var(--accent); }
:root[data-theme="frisch"] .kicker      { color: var(--accent); }
:root[data-theme="frisch"] .button {
    border-radius: 999px; background: var(--accent); color: #fff;
    border: none; font-weight: 600; text-transform: none; letter-spacing: 0;
    box-shadow: 0 6px 20px rgba(45,138,82,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
:root[data-theme="frisch"] .button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(45,138,82,0.4); }
:root[data-theme="frisch"] .button--outline {
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--ink); box-shadow: none;
}
:root[data-theme="frisch"] .counter-strip {
    background: var(--paper-2);
    border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
}
:root[data-theme="frisch"] .counter-num {
    font-size: clamp(72px, 11vw, 140px); line-height: 0.85; letter-spacing: -0.045em;
}
:root[data-theme="frisch"] .invite-hero,
:root[data-theme="frisch"] .both-and__col,
:root[data-theme="frisch"] .petition-excerpt {
    background: var(--paper-2); border: 1px solid var(--rule-soft);
    border-radius: 18px;
}
/* Frisch macht aus diesen Elementen sichtbare Karten — also brauchen sie
   auch Karten-Padding rundum. Ohne diesen Override erbt .both-and__col nur
   `padding-top:16px` aus dem Base-Stil, dann klebt der Text am unteren und
   rechten/linken Karten-Rand. .petition-excerpt hat im Base gar kein
   Padding. .invite-hero behält sein eigenes clamp-Padding. */
:root[data-theme="frisch"] .both-and__col {
    padding: 28px 24px !important;
    border-top: 1px solid var(--rule-soft);
}
/* petition-excerpt ist KEIN Karten-Element wenn es als `<section class="section petition-excerpt">`
   genutzt wird — die Section liefert das normale Page-Inset. Frank-Feedback
   17.05.2026: der Text soll im gleichen Inset wie der Rest sitzen, der
   Background darf full-bleed bleiben. Background-Override via :where()-Selector
   damit das border-radius nur greift, wenn petition-excerpt NICHT als section
   gerendert wird (sonst sieht der grüne Balken zwischen rule-top/-bottom korrekt
   eckig aus). */
:root[data-theme="frisch"] .section.petition-excerpt {
    border-radius: 0;
    border-left: none;
    border-right: none;
}
@media (min-width: 720px) {
    :root[data-theme="frisch"] .both-and__col { padding: 32px 30px !important; }
}
:root[data-theme="frisch"] .section--bg { background: var(--paper-2); }
:root[data-theme="frisch"] .pill.is-active {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-theme="frisch"] .map-frame {
    background: var(--accent-soft); border-color: var(--rule); border-radius: 18px; padding: 16px;
}
:root[data-theme="frisch"] .map-toggle button {
    border-radius: 999px; padding: 8px 14px; border: 1.5px solid var(--rule);
    background: var(--paper);
}
:root[data-theme="frisch"] .map-toggle button.is-active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
}
:root[data-theme="frisch"] body.page > .footer-strip,
:root[data-theme="frisch"] .footer-strip {
    background: var(--ink); color: #b8c4bc;
}
:root[data-theme="frisch"] .footer-strip a { color: #e0eadd; }
:root[data-theme="frisch"] .footer-strip a:hover { color: var(--accent-2); }

/* Frisch · Hero — radial leaf-soft glow top-right + lime underline on h1 */
:root[data-theme="frisch"] .hero {
    background:
        radial-gradient(ellipse at top right, var(--accent-soft) 0%, transparent 60%),
        var(--paper);
    position: relative; overflow: hidden;
}
:root[data-theme="frisch"] .hero h1 {
    background-image: linear-gradient(
        transparent 78%,
        var(--accent-2) 78%, var(--accent-2) 96%,
        transparent 96%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 4px;
    display: inline; /* gradient hugs the actual text bounds */
}

/* Frisch · Pillars — Roman-numerals als kompakte Karten mit Erklärung */
:root[data-theme="frisch"] .pillars__item {
    border: 1px solid var(--rule-soft); border-radius: 10px;
    padding: 16px 20px;
    background: var(--paper);
    transition: border-color 0.2s, transform 0.2s;
    align-items: center;
}
:root[data-theme="frisch"] .pillars__item:last-child { padding-bottom: 16px; }
:root[data-theme="frisch"] .pillars__item:hover {
    border-color: var(--accent); transform: translateY(-2px);
}
:root[data-theme="frisch"] .pillars__num {
    font-family: var(--font-head); font-weight: 600;
    font-size: 40px; line-height: 0.9; letter-spacing: -0.04em;
    color: var(--accent);
    min-width: 1.4em;
}
:root[data-theme="frisch"] .pillars__label {
    font-family: var(--font-head); font-weight: 600;
    font-size: 17px; letter-spacing: -0.01em; color: var(--ink);
    font-style: normal;
}
:root[data-theme="frisch"] .pillars__desc {
    font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}

/* Frisch · Counter strip — progress bar under the label */
:root[data-theme="frisch"] .counter-strip {
    position: relative;
}
:root[data-theme="frisch"] .counter-strip .counter-label::after {
    content: ""; display: block;
    width: clamp(180px, 22vw, 280px); height: 8px;
    margin-top: 14px;
    background: var(--rule-soft); border-radius: 999px;
    background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
    background-size: 4% 100%; background-repeat: no-repeat;
    background-color: var(--rule-soft);
}

/* Frisch · Stats — featured card in leaf-grün, others in white sage cards */
:root[data-theme="frisch"] .stats-counters > div {
    background: var(--paper); border: 1px solid var(--rule-soft);
    border-radius: 10px; padding: 18px 20px !important;
}
:root[data-theme="frisch"] .stats-counters > div:first-child {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
:root[data-theme="frisch"] .stats-counters > div:first-child .counter-num {
    color: #fff;
}
:root[data-theme="frisch"] .stats-counters > div:first-child .counter-label {
    color: rgba(255,255,255,0.85);
}

/* Frisch · Map anonymity-note as leaf-soft strip */
:root[data-theme="frisch"] .k-anon-note,
:root[data-theme="frisch"] .map-progress {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    color: var(--accent-ink);
}

/* ── Plakat-specific decorative tweaks (apply in both modes) ─────────── */
/* Critique #01: wordmark stays canonical "Millions4.earth" mixed-case in every
   theme — only weight & letter-spacing change between Brief / Plakat /
   Frisch. The mono uppercase variant lives only in technical contexts
   (e.g. footer signature), never as the primary mark. */
:root[data-theme="plakat"] .wordmark        { font-weight: 900; letter-spacing: -0.02em; text-transform: none; }
:root[data-theme="plakat"] .kicker          { font-weight: 700; font-family: var(--font-body); }
/* Plakat headings: heavy weight + tight tracking only — no forced uppercase
   (siehe `feedback-no-uppercase-headings`). Brutalität kommt aus weight, nicht aus caps. */
:root[data-theme="plakat"] h1, h2, h3,
:root[data-theme="plakat"] .counter-num,
:root[data-theme="plakat"] .dashboard-greeting { font-weight: 900; letter-spacing: -0.025em; font-style: normal; }
:root[data-theme="plakat"] .lede            { font-style: normal; font-weight: 500; }
:root[data-theme="plakat"] .pillars__num    { font-weight: 900; }
:root[data-theme="plakat"] .button          { font-weight: 700; letter-spacing: 0.04em; }
:root[data-theme="plakat"] .map-frame svg [data-iso]:not([style]) { stroke-width: 1; }

/* Plakat-Dark: header → page sections need a visible divider, otherwise
   it all reads as one black plane. */
:root[data-theme="plakat"][data-mode="dark"] .site-header { border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
:root[data-theme="plakat"][data-mode="dark"] .lang-suggest { border-bottom: 1px solid var(--ink-soft); }

/* The "Teilen" outline button on the accent-soft invite-hero loses contrast
   in Plakat-Dark; restore by inverting it explicitly. */
:root[data-theme="plakat"][data-mode="dark"] .invite-block--big button[data-share] {
    background: var(--paper); color: var(--ink); border-color: var(--paper);
}
:root[data-theme="plakat"][data-mode="dark"] .invite-block--big button[data-share]:hover {
    background: var(--accent); color: var(--paper); border-color: var(--accent);
}

/* The invite-hero accent-soft contrast in Plakat-Dark is very low against
   the black page; bump the border to ink-soft so the box reads as separate. */
:root[data-theme="plakat"][data-mode="dark"] .invite-hero {
    border-top-color: var(--ink-soft);
    border-bottom-color: var(--ink-soft);
}

/* Default light scheme; the dark variants opt in via [data-mode="dark"]. */
html { color-scheme: light; background: var(--ink); }
body { background: var(--paper); min-height: 100vh; }
/* Schutz gegen 1-2px horizontale Scrollbar wenn invite-hero `width:100vw`
   nutzt (100vw inkludiert die Scrollbar-Breite). Frank-Fix 18.05.2026. */
html, body { overflow-x: hidden; }

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    /* Zweischichtiges Background-Modell (Bug-Fix 18.05.2026 abend):
       - html  = ink: nur fuer Overscroll/Underfooter sichtbar
       - body  = paper + min-height:100vh: die Hauptflaeche, faengt auch
                 kurze Pages bis Viewport-Bottom ab
       - .footer-strip ist eh ink → passt zum overscrolling html
       Vorher hatte body selbst ink-bg. Das funktionierte auf der Home-
       Seite (deren Sections sind full-bleed), aber auf Content-Seiten
       (handeln/stats/map) hat main.section max-width:1180px — links/
       rechts neben der Reading-Column schimmerte der ink-body durch
       und sah aus wie "Footer-Farbe oben am Rand" (Frank-Bericht). */
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* typography defaults ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
h1 {
    font-size: clamp(36px, 6.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: var(--max-headline);
}
h2 {
    font-size: clamp(22px, 3.4vw, 28px);
    line-height: 1.2;
    font-style: italic;
}
h3 {
    font-size: 18px;
    line-height: 1.25;
}
p { margin: 0 0 1em; max-width: var(--max-lede); }
.lede {
    font-family: var(--font-head);
    font-size: clamp(16px, 2.1vw, 19px);
    font-style: italic;
    color: var(--ink);
    max-width: var(--max-lede);
    line-height: 1.5;
    margin: 0 0 22px;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* mono kickers ────────────────────────────────────────────────────────── */
.kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
    font-weight: 400;
    display: inline-block;
}
.kicker--soft { color: var(--ink-soft); }

.mono { font-family: var(--font-mono); }
.italic { font-style: italic; }

/* wordmark — Pulse-Globe Logo System (Design Handoff 17.05.2026) ──────────
   Konstruktion: "Millions" + italic "4" + Globe-SVG (statt Punkt) + "earth"
   Theme-driven: Globe-SVG wird per CSS pro [data-theme][data-mode] gewechselt.
   Italic-4: nur im Brief-Theme markenrechtlich distinktiv, bleibt italic.
   Frank-Bestätigung 17.05.2026: KEINE Großbuchstaben, auch im Plakat-Wordmark
   nicht — Designer-Brief wird hier zugunsten der Memory-Regel übergangen. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    font-size: 24px;
}
.wordmark__text { display: inline; }
.wordmark__four { font-style: normal; font-weight: inherit; }
.wordmark__globe {
    display: inline-block;
    width: 0.95em; height: 0.95em;
    background-image: url('/assets/logo/globe-brief-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 0.04em;
    align-self: center;
    flex-shrink: 0;
}
/* Brief: italic 4, markenrechtlich distinktives Detail */
:root[data-theme="brief"] .wordmark__four,
:root:not([data-theme]) .wordmark__four { font-style: italic; }
/* Per-Theme + per-Mode Globe-SVG */
:root[data-theme="brief"][data-mode="dark"] .wordmark__globe { background-image: url('/assets/logo/globe-brief-dark.svg'); }
:root[data-theme="plakat"] .wordmark__globe { background-image: url('/assets/logo/globe-plakat.svg'); }
:root[data-theme="frisch"][data-mode="light"] .wordmark__globe,
:root[data-theme="frisch"]:not([data-mode]) .wordmark__globe { background-image: url('/assets/logo/globe-frisch-light.svg'); }
:root[data-theme="frisch"][data-mode="dark"] .wordmark__globe { background-image: url('/assets/logo/globe-frisch-dark.svg'); }
:root[data-theme="terminal"][data-mode="light"] .wordmark__globe { background-image: url('/assets/logo/globe-terminal-light.svg'); }
:root[data-theme="terminal"][data-mode="dark"] .wordmark__globe { background-image: url('/assets/logo/globe-terminal-dark.svg'); }
/* Bei prefers-color-scheme:dark als Fallback wenn kein data-mode gesetzt */
@media (prefers-color-scheme: dark) {
    :root[data-theme="brief"]:not([data-mode]) .wordmark__globe { background-image: url('/assets/logo/globe-brief-dark.svg'); }
    :root[data-theme="frisch"]:not([data-mode]) .wordmark__globe { background-image: url('/assets/logo/globe-frisch-dark.svg'); }
    :root[data-theme="terminal"]:not([data-mode]) .wordmark__globe { background-image: url('/assets/logo/globe-terminal-dark.svg'); }
}
/* Legacy: alter wordmark__accent-Span existiert nicht mehr im HTML, aber
   für Rückwärtskompatibilität (falls irgendwo noch zwischengespeichert) */
.wordmark__accent { color: var(--accent); display: none; }

/* layout primitives ──────────────────────────────────────────────────── */
/* .page (= <body class="page">) liefert die Bühne. Background wird in
   body.page weiter unten auf ink gesetzt, damit der Bereich UNTER dem
   Footer (Overscroll, kurze Pages) nicht weiß durchblitzt. Die inhalts-
   tragenden Elemente (.section, .site-header, .dashboard-page) bekommen
   explizit paper, sodass der ink nur am Body-Ende sichtbar wird.
   Frank-Bug 18.05.2026 (auf allen Seiten außer Dashboard war der weiße
   Streifen weiter sichtbar — paper-Override aus .page hatte gewonnen). */
.page { min-height: 100vh; }
.site-header { background: var(--paper); }

/* Share-Icons (Brand-Logos im Share-Sheet + prominenten Buttons).
   Inline-vertical-Alignment + leichter Abstand zum Label. Emoji-Fallback
   (✉, 🔗, 🐦) bekommt gleiche Größe. */
.share-icon {
    display: inline-block;
    vertical-align: -0.2em;
    width: 1.15em;
    height: 1.15em;
    margin-right: 4px;
    line-height: 1;
}
img.share-icon { object-fit: contain; }
.section {
    padding: clamp(28px, 5vw, 56px) clamp(22px, 7vw, 80px);
    background: var(--paper);
}
.section--bg { background: var(--bg); }
/* Stats-Counter-Strip: gleiche Logik wie invite-hero — Background-Band geht
   über die volle Viewport-Breite, Counter-Cards bleiben im Content-Inset.
   !important auf padding-inline weil stats.php ein inline `padding:24px 0`
   am Element hat; das overridet sonst die CSS-Regel. Frank-Feedback 18.05.2026. */
main.section > .stats-counters {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: 24px !important;
    padding-inline: max(
        clamp(22px, 7vw, 80px),
        calc((100vw - 1180px) / 2 + clamp(22px, 7vw, 80px))
    ) !important;
}
.section--ink { background: var(--ink); color: var(--paper); }
.rule-top    { border-top: var(--rule-weight) solid var(--rule); }
.rule-bottom { border-bottom: var(--rule-weight) solid var(--rule); }
.stack > * + * { margin-top: 18px; }

/* header / nav ────────────────────────────────────────────────────────── */
.site-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: clamp(20px, 3vw, 32px) clamp(22px, 7vw, 80px) 0;
}
.primary-nav {
    display: flex; gap: 28px;
    font-family: var(--font-body);
    font-size: 14px;
}
.primary-nav a {
    color: var(--ink-soft);
    text-decoration: none;
}
.primary-nav a:hover,
.primary-nav a.is-active {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

.lang-switch select {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink);
    cursor: pointer;
}

/* ── theme switcher (Brief ⇄ Plakat, ☼ ⇄ ☾) ─────────────────────────── */
.theme-switch {
    display: inline-flex; gap: 4px; align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    margin-left: 8px;
}
.theme-switch button {
    background: transparent; color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    letter-spacing: 0.08em;
    font-family: inherit; font-size: inherit;
}
.theme-switch button:hover { color: var(--ink); border-color: var(--ink); }
.theme-switch button[data-action="theme"] .t-brief,
.theme-switch button[data-action="theme"] .t-plakat,
.theme-switch button[data-action="mode"]  .m-light,
.theme-switch button[data-action="mode"]  .m-dark { display: none; padding: 0 2px; }
.theme-switch button[data-action="theme"][data-active="brief"]  .t-plakat,
.theme-switch button[data-action="theme"][data-active="plakat"] .t-brief,
.theme-switch button[data-action="mode"][data-active="light"]   .m-dark,
.theme-switch button[data-action="mode"][data-active="dark"]    .m-light { display: inline; }

/* hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: 48px; padding-bottom: 16px; }
.hero h1 { margin-top: 14px; margin-bottom: 22px; }

/* counter strip ──────────────────────────────────────────────────────────
   Critique #10: this is the most important number on the page — the
   movement in one word. We give it twice the height (min 200 px), put
   the number at clamp(80–120 px) and weld the CTA to the SAME visual
   block on its right, so the eye-path is "X people are in → join now"
   without a horizontal split. */
.counter-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 32px;
    min-height: 200px;
    padding-block: clamp(28px, 4vw, 44px);
}
.counter-num {
    font-family: var(--font-head);
    font-size: clamp(80px, 12vw, 120px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    position: relative;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
/* Live-pulse — counter-live.js adds .is-pulsing for ~600 ms after every
   incremental update; the small +1 chip rides on the top-right corner. */
.counter-num.is-pulsing { transform: translateY(-2px); }
.counter-pulse {
    position: absolute; top: 6px; right: -56px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px; border-radius: 999px;
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none; white-space: nowrap;
}
.counter-pulse.is-visible { opacity: 1; transform: translateX(0); }
.counter-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin-top: 6px;
}

/* buttons ────────────────────────────────────────────────────────────── */
.button, button.cta, button[type="submit"] {
    appearance: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}
.button:hover,
button.cta:hover,
button[type="submit"]:hover { background: #2a241b; color: var(--paper); }
.button:focus-visible,
button.cta:focus-visible,
button[type="submit"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.button--outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.button--outline:hover { background: var(--ink); color: var(--paper); }
.button--accent {
    background: var(--accent);
    color: var(--paper);
}
.button--forest {
    background: var(--accent-2);
    color: var(--paper);
}
.button:disabled, button:disabled { opacity: 0.35; cursor: not-allowed; }
.button .arrow::after { content: "→"; margin-left: 8px; display: inline-block; }

/* monthly bonus banner (H3) ──────────────────────────────────────────── */
.bonus-banner {
    position: fixed;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 22px));
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 18px 22px;
    z-index: 999;
    display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
    border-radius: var(--radius);
}
.bonus-banner__body { flex: 1; min-width: 240px; }
.bonus-banner__title { font-family: var(--font-head); font-style: italic; font-size: 17px; margin: 6px 0 2px; }
.bonus-banner__sub { font-family: var(--font-head); font-size: 14px; color: var(--ink-soft); margin: 0; }
.bonus-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
    .bonus-banner { left: 11px; right: 11px; transform: none; width: auto; }
}

/* info-i popover (H4) ────────────────────────────────────────────────── */
.info-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    margin-left: 6px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-head);
    font-style: italic;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    vertical-align: baseline;
}
.info-i:hover { color: var(--accent); border-color: var(--accent); }
.info-pop {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    font-family: var(--font-head);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
}
.info-pop[hidden] { display: none; }
.info-pop__more {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.info-pop__more:hover { color: var(--ink); }
.info-pop .source {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

/* share sheet (dialog element) ───────────────────────────────────────── */
dialog.share-sheet {
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    padding: 0;
    width: min(420px, 92vw);
    max-width: 92vw;
}
dialog.share-sheet::backdrop { background: rgba(28,24,18,0.42); }
.share-sheet__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 18px 22px 0;
}
.share-sheet__close {
    background: transparent; border: 0;
    font-size: 22px; color: var(--ink-soft); cursor: pointer;
    padding: 0 4px;
}
.share-sheet__close:hover { color: var(--ink); }
.share-sheet__grid {
    display: grid; gap: 0;
    padding: 14px 0 22px;
}
.share-sheet__opt {
    display: block;
    padding: 14px 22px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-head); font-style: italic; font-size: 16px;
    color: var(--ink); text-decoration: none;
    background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.share-sheet__opt:hover { background: var(--accent-soft); }
.share-sheet__opt.share-sheet__copy { border: 0; border-top: 1px solid var(--rule); font-style: normal; font-family: var(--font-body); font-size: 14px; }

/* mailman / newsletter modal (same dialog) ──────────────────────────── */
dialog.newsletter-sheet { width: min(480px, 92vw); }
.newsletter-sheet__head { padding: 22px 22px 0; }
.newsletter-sheet__list {
    display: grid; gap: 0; padding: 14px 0 22px;
}
.newsletter-sheet__lang {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-head); font-size: 16px;
    text-decoration: none; color: var(--ink);
}
.newsletter-sheet__lang:hover { background: var(--accent-soft); }
.newsletter-sheet__lang code {
    font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); background: transparent;
}

/* both-and block ─────────────────────────────────────────────────────── */
.both-and { background: var(--paper); }
.both-and__grid {
    display: grid; gap: 24px;
    margin-top: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 960px) {
    .both-and__grid { grid-template-columns: 1fr 60px 1fr; align-items: start; }
}
.both-and__col {
    border-top: 1px solid var(--rule);
    padding-top: 16px;
}
.both-and__cta {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.15s;
}
.both-and__cta:hover { text-decoration-color: var(--accent); }

/* Counter-Personal-Link: stelle sicher dass der "jetzt einladen"-Link
   im Counter-Strip klickbar ist (war von leerer pointer-events Inheritance
   blockiert). */
[data-counter-personal-rest] a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
[data-counter-personal-rest] a:hover { color: var(--ink); }
.both-and__amp {
    font-family: var(--font-head);
    font-size: 80px;
    color: var(--accent);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    display: none;
}
@media (min-width: 960px) {
    .both-and__amp { display: block; padding-top: 22px; }
}

/* petition excerpt + three pillars ──────────────────────────────────── */
.petition-excerpt {
    display: grid; gap: clamp(20px, 5vw, 64px);
}
@media (min-width: 960px) {
    .petition-excerpt { grid-template-columns: 1fr 260px; }
}
.petition-excerpt p {
    font-family: var(--font-head);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}
.pillars {
    border-top: 1px solid var(--rule);
    padding-top: 18px;
}
@media (min-width: 960px) {
    .pillars { border-top: none; border-left: 1px solid var(--rule); padding: 0 0 0 32px; }
}
.pillars__list { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.pillars__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rule);
}
.pillars__item:last-child { border-bottom: none; padding-bottom: 0; }
.pillars__num {
    font-family: var(--font-head);
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
    flex: 0 0 auto;
    min-width: 1.6em;
}
.pillars__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.pillars__label {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
}
.pillars__desc {
    margin: 0;
    font-family: var(--font-head);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ink footer strip ───────────────────────────────────────────────────── */
.footer-strip {
    background: var(--ink);
    color: var(--paper);
    padding: 18px clamp(22px, 7vw, 80px);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
}
.footer-strip a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); }
.footer-strip__muted { opacity: 0.6; }

/* sign form (editorial) ──────────────────────────────────────────────── */
.sign-form {
    display: grid;
    gap: 22px;
    max-width: 520px;
}
.sign-form label.field { display: grid; gap: 6px; }
.sign-form label.field > .field-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}
.sign-form select, .sign-form input[type="text"] {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 16px;
    padding: 8px 10px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    width: 100%;
    max-width: 320px;
}
.sign-form select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* pill button groups ─────────────────────────────────────────────────── */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
    appearance: none;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    border-radius: 0;
}
.pill--mono { font-family: var(--font-mono); font-size: 12px; }
.pill--tag {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 13px;
    border-radius: 14px;
    padding: 5px 12px;
}
.pill:hover { background: var(--accent-soft); }
.pill.is-active,
input:checked + .pill,
.pill--mono.is-active { background: var(--ink); color: var(--paper); }
.pill--tag.is-active { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* hide-but-keep-form-data radios AND checkboxes driving pills.
   Multi-select tag rows use checkboxes (sign.form `self_tags[]`);
   the click is captured by the surrounding <label> and reflected on
   the .pill via .is-active. */
.pill-group input[type="radio"],
.pill-group input[type="checkbox"] {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.pill-group label.pill { display: inline-flex; align-items: center; line-height: 1; }
.pill-group input[type="radio"]:focus-visible + .pill {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ALTCHA host ────────────────────────────────────────────────────────── */
.altcha-host {
    --altcha-color-base: var(--paper);
    --altcha-color-text: var(--ink);
    --altcha-color-border: var(--rule);
    --altcha-border-radius: 0;
    --altcha-color-primary: var(--accent);
    margin-top: 4px;
}
.altcha-host altcha-widget { max-width: 320px; display: block; }

/* result block (after sign) ──────────────────────────────────────────── */
#sign-result:empty { display: none; }
#sign-result {
    background: var(--bg);
    border-left: 4px solid var(--accent);
    padding: 18px 22px;
    margin-top: 18px;
    font-family: var(--font-head);
}
#sign-result h2 { font-style: italic; margin: 0 0 8px; }
#sign-result p { margin: 0 0 6px; }
#sign-result .sig-no {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1;
    margin: 4px 0 10px;
}
#sign-result .error {
    color: var(--accent);
    font-style: italic;
}

/* Sticky-footer pattern: every page is a flex column so the footer sits at
   the bottom of the viewport when content is short, and below the content
   otherwise. `margin-top: auto` on the footer pushes it away when there is
   spare space; when content overflows, the auto margin collapses to 0. */
body.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ink);
}
body.page > .footer-strip {
    margin-top: auto;
    flex-shrink: 0;
}

/* Page content container — every content page (dashboard / map / stats /
   handeln / petitionen / handlung / lokal / export / error / admin) uses
   `<main class="section">`. We give that main element a contained max-width
   so on wide screens the layout stays comfortable to read. home.php is
   exempt because it has its own multi-section landing structure.
   `width: 100%` ensures the inner content fills the available column. */
body.page main.section {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
/* Admin pages got their own narrower constraint via inline style — that
   wins over the global max-width because it's a smaller value. */

/* Home (`<main class="home-page">`) keeps its sections full-bleed so the
   coloured `.section--bg` stripes still reach the viewport edges, but
   the *content* inside each section tops out at the same 1180px reading
   column the other pages use. We expand the horizontal padding above
   the column width via a max() trick — at narrow viewports the original
   clamp() wins, on wider screens the calc() grows the gutters. */
.home-page .section {
    padding-inline: max(clamp(22px, 7vw, 80px), calc((100% - 1180px) / 2));
}

/* dashboard ──────────────────────────────────────────────────────────── */
.dashboard-page {
    background: var(--paper);
    min-height: 100vh;
    /* Same inset rhythm as any .section, but on a contained max-width so the
       layout doesn't dilute on >1440px screens. */
    padding: clamp(28px, 4vw, 48px) clamp(22px, 6vw, 64px);
    max-width: 1180px;
    margin: 0 auto;
}
/* invite-hero: Background-Band geht über die volle VIEWPORT-Breite (full-bleed),
   der TEXT bleibt am normalen Content-Inset (gleich wie Header / Mein Beitrag).
   Frank-Feedback 18.05.2026: voriger Versuch (margin-inline = -padding) reichte
   nur über das Page-Padding hinaus, nicht über die max-width:1180px — der
   gruene Streifen war daher in der Mitte als Insel sichtbar, nicht als Band.
   Trick: width:100vw + margin-inline:calc(50% - 50vw) stretcht auf Viewport.
   Padding-inline mit max() addiert den freien Rand wenn Page max-width erreicht
   (bei kleinen Viewports bleibt's beim normalen Page-Padding). */
.dashboard-page > .invite-hero {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: clamp(22px, 4vw, 36px);
    padding-inline: max(
        clamp(22px, 6vw, 64px),
        calc((100vw - 1180px) / 2 + clamp(22px, 6vw, 64px))
    );
}
/* Frisch-Theme rendert .invite-hero sonst als Card mit border-radius 18px;
   bei full-bleed über die Seite würde das hässlich abgeschnitten oder seltsam
   gerundet aussehen — Border-Radius weg, Background-Card wird zum Band. */
:root[data-theme="frisch"] .dashboard-page > .invite-hero {
    border-radius: 0;
}
/* Visual rules between sections sit flush with the content, not the viewport. */
.dashboard-page > hr.rule {
    margin-inline: 0;
}
.dashboard-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px;
}
.dashboard-week {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 0.1em;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 8px;
    white-space: nowrap;
}
.dashboard-greeting {
    font-family: var(--font-head);
    font-style: italic;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.dashboard-lede {
    font-family: var(--font-head);
    font-style: italic;
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--ink-soft);
    max-width: 480px;
    margin: 0 0 26px;
}
.dashboard-grid {
    display: grid; gap: 24px;
    margin-bottom: 32px;
}
@media (min-width: 720px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.dashboard-col h3 {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 500;
}
.dashboard-col h3 small {
    font-style: italic; font-size: 13px; font-weight: 400; color: var(--ink-soft);
}
.action-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0;
}
/* Kategorie-Trennzeile zwischen Aktion-Gruppen — dezent, kein eigener
   Akkordeon-Toggle, nur visuelle Orientierung. Erstes Element der Spalte
   verzichtet auf den oberen Außenabstand. Frank-Plan 17.05.2026:
   "Mittelweg-UI ohne Filter, ohne Klick-Hierarchie". */
.category-divider {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--ink-soft);
    padding: 10px 0 4px;
    margin-top: 8px;
    border-top: 1px dashed var(--rule);
}
.category-divider:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Post-Sign-Hub: drei Anschluss-Aktionen direkt nach erfolgreichem Sign
   (Wizard / Push / Newsletter). Vertikale Karten, jede mit Indikator-Zahl,
   kompaktem Titel, Lede-Text und Action-Button. Frank-Plan 17.05.2026. */
.post-sign-hub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 28px 0 18px;
}
.post-sign-hub__card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid var(--rule);
    background: var(--paper);
    border-radius: 8px;
}
.post-sign-hub__card[hidden] { display: none; }
.post-sign-hub__num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--paper);
    background: var(--accent);
    border-radius: 50%;
    line-height: 1;
}
.post-sign-hub__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.post-sign-hub__title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
}
.post-sign-hub__lede {
    margin: 0 0 4px;
    font-family: var(--font-head);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.post-sign-hub__body .button {
    align-self: flex-start;
    font-size: 14px;
    padding: 9px 16px;
    margin-top: 4px;
}
.post-sign-hub__mnemonic {
    margin: 26px 0 0;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.post-sign-hub__skip {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
}
.post-sign-hub__skip:hover { color: var(--accent); }
@media (max-width: 560px) {
    .post-sign-hub__card { flex-direction: column; gap: 10px; padding: 16px; }
    .post-sign-hub__body .button { align-self: stretch; text-align: center; }
}

/* Community-Tabs: gemeinsamer Switch zwischen /stats und /map unter dem
   "Wir sind viele"-Heading. URLs bleiben erhalten — die Tabs sind echte
   Links, kein clientside-Switch. Frank-Feedback 17.05.2026.

   Spezifitäts-Doppel (.community-tabs .community-tabs__tab), weil der
   Selektor sonst gegen `main a {...}` verliert und die Tabs als normale
   unterstrichene Inline-Links rendern. Plus text-decoration: none
   explizit, damit das Underline des Default-Link-Stils weicht. */
.community-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 22px 0 8px;
    border-bottom: 1px solid var(--rule);
}
.community-tabs .community-tabs__tab {
    display: inline-block;
    padding: 12px 22px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.community-tabs .community-tabs__tab:hover {
    color: var(--ink);
    background: var(--bg);
    border-bottom-color: var(--rule);
    text-decoration: none;
}
.community-tabs .community-tabs__tab.is-active {
    color: var(--accent);
    background: var(--paper);
    border-color: var(--rule);
    border-bottom-color: var(--accent);
    text-decoration: none;
}
.action-row .tick {
    color: var(--accent);
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1.4;
    margin-top: -1px;
}
.action-row .title {
    font-family: var(--font-head);
    font-size: 14px;
    line-height: 1.45;
}
.action-row .sub {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}
.dashboard-cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 8px;
}

.dashboard-next {
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 22px 24px;
    margin-bottom: 24px;
}
.dashboard-next h3 {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 12px;
    border: none; padding: 0;
}
.dashboard-next .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dashboard-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.dashboard-metrics .num {
    font-family: var(--font-head);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dashboard-metrics .cap {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-soft);
}

/* invite-hero — the centre of gravity of the dashboard ───────────────── */
.invite-hero {
    background: var(--accent-soft);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: clamp(22px, 4vw, 36px) clamp(18px, 5vw, 40px);
    margin: 18px 0 0;
}
.invite-hero .kicker {
    color: var(--accent);
    font-size: 12px;
}
.invite-hero__title {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 8px 0 4px;
    color: var(--ink);
}
.invite-hero .lede {
    font-family: var(--font-head);
    font-style: italic;
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--ink);
    max-width: 560px;
    margin: 8px 0 18px;
    line-height: 1.5;
}
/* Generic "kicker + h2" pattern across dashboard sections — gives each
   subsection a real heading instead of using the kicker as the title. */
.dashboard-section__title,
.dashboard-next__title {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 6px 0 2px;
    color: var(--ink);
}
/* In Plakat, headings drop italic via the global override (line 81-83).
   These two classes inherit that, so nothing extra to do. */
.invite-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
}
.invite-metrics .num {
    font-family: var(--font-head);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.invite-metrics .cap {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}
@media (max-width: 480px) {
    .invite-metrics { grid-template-columns: 1fr 1fr; }
    .invite-metrics > :nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 12px; }
}

/* invite link block ──────────────────────────────────────────────────── */
.invite-block {
    display: flex; gap: 0;
    margin: 16px 0 20px;
    max-width: 420px;
    flex-wrap: wrap;
}
.invite-block--big {
    max-width: 640px;
    gap: 0;
}
.invite-block--big input { font-size: 14px; padding: 12px 14px; }
.invite-block--big button { padding: 0 22px; font-size: 15px; }
.invite-block--big button[data-share] {
    background: transparent;
    color: var(--ink);
    border-left: none;
    border-color: var(--ink);
    margin-left: 8px;
}
.invite-block--big button[data-share]:hover { background: var(--ink); color: var(--paper); }
.invite-block input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--ink);
    border-right: none;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
}
.invite-block button {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 0 18px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
    transition: background 200ms ease;
}
.invite-block button.is-copied {
    background: var(--accent-2);
    border-color: var(--accent-2);
}

/* mnemonic backup ─────────────────────────────────────────────────────── */
.mnemonic-block {
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 18px 22px;
}
.mnemonic-block .header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
}
.mnemonic-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px;
}
@media (min-width: 720px) {
    .mnemonic-grid { grid-template-columns: repeat(4, 1fr); }
}
.mnemonic-tile {
    display: flex; gap: 8px; align-items: baseline;
    padding: 6px 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.mnemonic-tile .idx {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-soft);
    min-width: 1.5em;
}
.mnemonic-tile .word {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 17px;
    color: var(--ink);
}
.mnemonic-tile.is-hidden .word { filter: blur(6px); }

/* map page ───────────────────────────────────────────────────────────── */
.map-page { padding: clamp(28px, 4vw, 48px) clamp(22px, 7vw, 80px); }
.map-toggle { display: inline-flex; gap: 6px; margin-bottom: 18px; }
.map-toggle button {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 6px 14px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
}
.map-toggle button.is-active { background: var(--ink); color: var(--paper); }
.map-frame {
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 14px;
}
.map-frame svg { width: 100%; height: auto; max-height: 60vh; display: block; }
.map-frame svg [data-iso] {
    fill: var(--rule);
    stroke: var(--paper);
    stroke-width: 0.7;
    transition: stroke-width 80ms ease, stroke 80ms ease;
    cursor: default;
}
.map-frame svg [data-iso]:hover { stroke-width: 1.6; stroke: var(--ink); }
/* Clickable countries (DE / AT / CH on the world map, all DE subdivisions
   on the DE map) get a pointer cursor + slightly stronger hover outline. */
.map-frame svg [data-iso].is-clickable { cursor: pointer; }
.map-frame svg [data-iso].is-clickable:hover { stroke-width: 2; stroke: var(--accent); }
.map-aside {
    background: var(--paper);
    padding: 8px 0 0;
}
.map-aside .total-label {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
}
.map-aside .total-num {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.map-aside .legend {
    display: grid; grid-template-columns: 12px auto; gap: 6px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 18px;
}
.map-aside .swatch {
    width: 12px; height: 12px;
    border: 1px solid var(--rule);
}
.map-aside .k-anon-note {
    background: var(--accent-soft);
    padding: 12px 14px;
    margin-top: 18px;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 13px;
    color: var(--ink);
}

/* utilities ──────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0);
}
.flex-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-row--between { justify-content: space-between; }
hr.rule { border: none; border-top: 1px solid var(--rule); margin: 28px 0; }

/* honeypot — keep accessible-hidden but never visible */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Hamburger sits next to the wordmark — desktop hides it, mobile shows. */
.nav-hamburger {
    display: none;
    background: transparent; border: 1px solid var(--rule);
    color: var(--ink); cursor: pointer;
    width: 36px; height: 36px; padding: 0;
    font-size: 22px; line-height: 1;
    border-radius: 6px;
}
.nav-hamburger:hover { border-color: var(--ink); }

/* responsive — mobile (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
    /* Critique #12: row 1 = wordmark + hamburger, row 2 = lang+theme as
       a thin 28-32 px tools bar, primary nav collapsed behind the
       hamburger. Headline becomes visible at the first viewport pixel. */
    .site-header {
        padding: 12px 16px;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }
    .wordmark { font-size: 19px; flex: 1; }
    .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    /* Lang + Theme: compact mini-bar on its own row, but kept in the
       header — that way the user can still switch locale without opening
       the drawer. */
    .lang-switch, .theme-switch { align-self: center; order: 5; }
    .lang-switch select { padding: 3px 6px; font-size: 12px; }
    .theme-switch button { padding: 3px 8px; font-size: 11px; }
    /* Primary nav: hidden by default, shown when the hamburger is open. */
    .primary-nav {
        order: 9;
        width: 100%;
        display: none;
        flex-direction: column; align-items: flex-start; gap: 8px;
        padding: 12px 0;
        border-top: 1px solid var(--rule);
        font-size: 15px;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav a { padding: 6px 0; width: 100%; }

    /* Section padding: consistent 22px on phones, no clamp wobble.
       Frank-Feedback 16.05.2026: die both-and-Box und petition-excerpt
       wirkten am Phone-Viewport zu eng am Rand — die Border-Tops der
       Sub-Spalten erzeugen einen Box-Eindruck, der mehr Atemraum braucht. */
    .section { padding: 24px 22px; }
    .section.hero { padding: 28px 22px 22px; }
    .section.counter-strip { padding: 22px; }
    .section.both-and { padding: 28px 22px; }
    .section.petition-excerpt { padding: 28px 22px; }
    .section#sign { padding: 24px 22px; }
    .dashboard-page { padding: 22px; }
    .dashboard-page > .invite-hero { margin-inline: 0; }

    .counter-num { font-size: 46px; }
    .dashboard-greeting { font-size: 32px; }
    .dashboard-header { display: block; }
    .dashboard-week { display: block; margin-top: 8px; }

    .footer-strip { padding: 14px 18px; flex-direction: column; gap: 10px; }
}

/* browser-language suggestion banner (K4) ────────────────────────────── */
.lang-suggest {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 8px 22px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-head); font-size: 14px; font-style: italic;
}
.lang-suggest__msg { flex: 1; min-width: 200px; }
.lang-suggest__form { display: inline; margin: 0; }
.lang-suggest__go,
.lang-suggest__no {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    background: transparent;
    color: var(--paper); border: 1px solid var(--paper);
    padding: 4px 10px; cursor: pointer;
}
.lang-suggest__go:hover { background: var(--accent); border-color: var(--accent); }
.lang-suggest__no { border-color: transparent; opacity: 0.7; }
.lang-suggest__no:hover { opacity: 1; }
@media (max-width: 480px) {
    .lang-suggest { padding: 8px 14px; font-size: 13px; }
}

/* local groups list (J1) ──────────────────────────────────────────────── */
.local-list {
    list-style: none; padding: 0; margin: 8px 0 0;
}
.local-row {
    border-top: 1px solid var(--rule);
    padding: 10px 0;
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.local-row a {
    font-family: var(--font-head); font-style: italic; font-size: 15px;
    color: var(--ink); text-decoration: none;
}
.local-row a:hover { color: var(--accent); }
.local-row__arrow { color: var(--accent); font-style: normal; }
.local-row__sub {
    font-family: var(--font-head); font-style: italic; font-size: 13px;
    color: var(--ink-soft); flex: 1; min-width: 200px;
}

/* in-app reminder banner (H2) ─────────────────────────────────────────── */
.mp-banner {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 12px 22px;
    background: var(--accent-soft);
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-head);
}
.mp-banner__kicker {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--ink-soft);
}
.mp-banner__body { font-style: italic; font-size: 15px; flex: 1; min-width: 220px; }
.mp-banner__cta {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    color: var(--ink); border-bottom: 1px solid currentColor;
    text-decoration: none; padding-bottom: 2px;
}
.mp-banner__cta:hover { color: var(--accent); }
.mp-banner__push {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    background: transparent; color: var(--ink);
    border: 1px solid var(--ink); padding: 6px 10px; cursor: pointer;
}
.mp-banner__push:hover { background: var(--ink); color: var(--paper); }
.mp-banner__close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--ink-soft);
    padding: 4px 8px;
}
.mp-banner__close:hover { color: var(--ink); }
@media (max-width: 480px) {
    .mp-banner { padding: 10px 14px; }
    .mp-banner__body { font-size: 14px; }
}

/* Petition body — Markdown-rendered prose. Default browser margins on
   blockquote (~40px) make quotes feel pushed into the viewport rim on
   phones; we replace with a calmer accent rule + padded indent that
   scales with the surrounding section padding. Frank-Feedback 16.05.2026. */
.petition-body p { margin: 0 0 12px; }
.petition-body p:last-child { margin-bottom: 0; }
.petition-body h2, .petition-body h3 { margin-top: 28px; }
.petition-body blockquote {
    margin: 22px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--accent);
    background: rgba(0, 0, 0, .03);
    font-family: var(--font-head);
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
.petition-body blockquote p { margin: 0; }
.petition-body ul, .petition-body ol { padding-left: 22px; margin: 12px 0; }
.petition-body li { margin: 4px 0; }
.petition-body a { text-decoration: underline; text-underline-offset: 3px; }

/* Invite-Banner — gezeigt wenn der Visitor über einen `/m/SLUG`-Link
   kommt. Server hat die Sig-Nr des Inviters aufgelöst und als Cookie
   gesetzt. Banner sitzt direkt unter dem Site-Header. */
.invite-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px clamp(22px, 7vw, 80px);
    background: var(--accent-soft, rgba(45,138,82,.10));
    border-bottom: 1px solid var(--accent);
    font-family: var(--font-head, var(--font-body));
}
.invite-banner__icon { font-size: 22px; line-height: 1; }
.invite-banner__text { font-size: 15px; line-height: 1.45; color: var(--ink); }
.invite-banner__text strong { color: var(--accent); margin-right: 6px; }
@media (max-width: 480px) {
    .invite-banner { padding: 12px 18px; gap: 10px; }
    .invite-banner__text { font-size: 14px; }
}

/* Sticky-CTA — persistente Bottom-Bar auf Landing-Seiten mit Counter +
   Sign-Button. Wird via [data-signed-here] ausgeblendet (siehe weiter unten). */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: var(--ink); color: var(--paper);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.15);
    font-family: var(--font-body, system-ui);
    transform: translateY(100%);
    animation: stickyCtaIn 0.4s ease 0.6s forwards;
}
@keyframes stickyCtaIn { to { transform: translateY(0); } }
.sticky-cta__count {
    display: flex; align-items: baseline; gap: 6px;
    font-family: var(--font-mono); font-size: 12px;
    color: rgba(255,255,255,0.72);
}
.sticky-cta__count strong {
    font-family: var(--font-display, var(--font-head));
    font-size: 18px; color: var(--paper); font-weight: 700;
}
.sticky-cta__btn {
    background: var(--accent); color: #fff;
    padding: 10px 18px; border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: 14px;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sticky-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
@media (max-width: 480px) {
    .sticky-cta { padding: 10px 14px; }
    .sticky-cta__btn { padding: 8px 14px; font-size: 13px; }
}
body:has(.sticky-cta) { padding-bottom: 56px; }
@media (max-width: 480px) {
    body:has(.sticky-cta) { padding-bottom: 64px; }
}

/* Sign-state visibility — driven by sign-init.js (synchronous, runs before
   the body renders). When `<html data-signed-here>` is set:
     - the sign form (#sign + the hero CTA pointing to #sign) is hidden
     - the "you're already in" stub (#sign-done) becomes visible
   This eliminates the brief flash of the sign form on returning visitors
   that earlier relied on a DOMContentLoaded toggle in sign.js. */
:root[data-signed-here] #sign { display: none !important; }
:root[data-signed-here] #sign-done { display: flex !important; }
:root[data-signed-here] [data-hide-when-signed] { display: none !important; }

/* Push UI — "soon" / pending state.
   push.js setzt .is-push-pending am Container, .is-pending an den Buttons
   wenn der Browser Push kann, das Backend aber noch nicht aktiviert ist.
   Der Reminder-Block bleibt sichtbar (Frank-Wunsch: prominentere Anzeige). */
.push-block.is-push-pending .push-block__pending { display: block !important; }
.push-block.is-push-pending .push-block__pending[hidden] { display: block !important; }
.push-block__pending {
    font-size: 14px; color: var(--ink-soft); font-style: italic;
    background: var(--bg-soft, rgba(0,0,0,.04)); padding: 10px 14px;
    border-radius: 8px; margin-top: 6px;
}
[data-push-enable].is-pending {
    background: transparent; color: var(--ink-soft); border: 1px dashed var(--rule);
    cursor: help;
}
[data-push-enable].is-pending:hover { color: var(--ink); border-color: var(--ink); }

/* Mitmach-Wizard — Schritt-für-Schritt-Durchgang durch alle Actions.
   Frank-Feedback 16.05.2026 / Phase „Wizard". Nutzt die share-sheet-
   Dialog-Basis (CSS oben), ergänzt um Karten-Layout + Visual-Stand-in. */
dialog.wizard { width: min(520px, 94vw); }
.wizard-head { padding: 18px 22px 0; align-items: baseline; }
.wizard-progress {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.wizard-progress__cat { color: var(--accent); margin-left: 6px; }
.wizard-card {
    padding: 18px 24px 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.wizard-visual {
    align-self: center;
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    font-size: 56px; line-height: 1;
    background: var(--accent-soft, rgba(45,138,82,.10));
    border-radius: 50%;
    margin: 8px 0 4px;
}
.wizard-visual--summary { background: var(--accent); color: var(--paper); font-size: 48px; }
.wizard-title {
    margin: 0; font-family: var(--font-head);
    font-size: clamp(22px, 3vw, 28px); line-height: 1.15;
    text-align: center; color: var(--ink);
}
.wizard-desc {
    margin: 0; font-family: var(--font-head); font-style: italic;
    font-size: 15px; line-height: 1.55; color: var(--ink);
    text-align: center; max-width: 42em; align-self: center;
}
.wizard-details {
    align-self: stretch; margin-top: 4px;
    font-size: 14px; line-height: 1.55; color: var(--ink-soft);
    border-top: 1px solid var(--rule); padding-top: 10px;
}
.wizard-details > summary {
    cursor: pointer; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.06em; color: var(--accent); list-style: none;
}
.wizard-details > summary::-webkit-details-marker { display: none; }
.wizard-details > summary::before { content: "▸ "; }
.wizard-details[open] > summary::before { content: "▾ "; }
.wizard-long { margin-top: 10px; color: var(--ink); }
.wizard-long h2, .wizard-long h3 { font-family: var(--font-head); margin: 12px 0 6px; }
.wizard-long ul, .wizard-long ol { padding-left: 22px; margin: 8px 0; }
.wizard-long p { margin: 8px 0; }
.wizard-points {
    margin: 6px 0 0; text-align: center; color: var(--accent);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
}
.wizard-choices {
    display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
}
.wizard-choice { justify-content: center; padding: 12px 18px; }
/* Default: alle drei Buttons sind outline (kein Pre-Select).
   Erst wenn der User vorher schon eine Wahl getroffen hat, hebt sich der
   entsprechende Button optisch ab — solid accent + Häkchen-Indikator. */
.wizard-choice.is-active {
    background: var(--accent) !important;
    color: var(--paper) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,.08);
    outline: none;
}
.wizard-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px 18px; border-top: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
}
.wizard-nav button {
    background: transparent; border: 0; color: var(--ink-soft); cursor: pointer;
    padding: 6px 8px;
}
.wizard-nav button:hover:not([disabled]) { color: var(--ink); }
.wizard-nav button[disabled] { opacity: 0.35; cursor: not-allowed; }
.wizard-summary-list {
    list-style: none; padding: 0; margin: 4px 0 14px;
    font-family: var(--font-head); font-style: italic; font-size: 16px;
    color: var(--ink); text-align: center; line-height: 1.6;
}
.wizard-card--summary { align-items: center; text-align: center; }

/* Vormerk-Status (intent) auf Action-Pills im Dashboard-Grid */
.action-row.is-intent .tick { opacity: 0.65; color: var(--accent); }
.action-row.is-intent .title { color: var(--ink); }
.intent-badge {
    display: inline-block; margin-left: 8px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
    color: var(--accent); padding: 2px 6px;
    border: 1px solid var(--accent); border-radius: 999px;
    background: var(--accent-soft, rgba(45,138,82,.08));
    vertical-align: middle;
}

/* Wizard-Hinweis nach abgeschlossenem Durchgang */
.dashboard-next__hint {
    margin-top: 14px; font-family: var(--font-head); font-style: italic;
    font-size: 13px; color: var(--ink-soft);
}

/* Personal counter + share block — Frank-Feedback 16.05.2026 Phase 2. */
.my-contribution {
    background: linear-gradient(135deg, var(--bg-soft, rgba(0,0,0,.04)) 0%, transparent 60%);
    border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px;
    margin: 20px 0;
}
.my-contribution__row { display: flex; flex-wrap: wrap; gap: 28px; align-items: baseline; }
.my-contribution__col { min-width: 140px; }
.my-contribution__col--lede { flex: 1; min-width: 220px; }
.my-contribution__num { font-family: var(--font-display, var(--font-sans));
    font-size: clamp(40px, 7vw, 64px); font-weight: 800; line-height: 1; color: var(--accent, var(--ink));
    margin-top: 6px; }
.my-contribution__sub  { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.my-contribution__total { font-size: 13px; color: var(--ink-soft); }
.my-contribution__share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.my-contribution__share button {
    font-size: 13px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.my-contribution__share button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Newsletter Tabs (Anmelden / Abmelden) — Frank-Feedback 16.05.2026. */
.newsletter-tabs {
    display: flex; gap: 4px;
    padding: 6px 22px 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
}
.newsletter-tab {
    background: transparent; border: 0; cursor: pointer;
    padding: 10px 14px; margin-bottom: -1px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
}
.newsletter-tab:hover { color: var(--ink); }
.newsletter-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Newsletter inline form — Phase 2.3 (Mailman-Proxy). */
.newsletter-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.newsletter-form label { font-size: 13px; color: var(--ink-soft); }
.newsletter-form input[type="email"],
.newsletter-form select {
    padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px;
    background: var(--paper); color: var(--ink); font-size: 15px;
}
.newsletter-form__note { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.newsletter-form__result {
    font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-top: 6px;
}
.newsletter-form__result--ok { background: rgba(46,160,67,.10); color: #1f7a32; }
.newsletter-form__result--err { background: rgba(207,34,46,.10); color: #b1232e; }