/* ============================================================================
   GEOPHORA · Aufklappbare Abschnitte + Erstauskunft im Schnellcheck
   Gemeinsam genutzt von den Vertikal-Seiten:
   private-geoki · immobilien · waermeplanung · nachhaltigkeitsmanagement

   Zwei Bausteine:
   A) .gp-fold  — native <details>-Sektionen (SEO-sicher, tastaturbedienbar)
   B) .gpc-*    — Ergebnis der Erstauskunft unterhalb des Schnellchecks
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Eigene Farbtoken.

   Die globalen Token --gp-text-faint (#7a8699) und --gp-wheat-deep (#a8923c)
   verfehlen auf hellem Grund die WCAG-AA-Schwelle von 4.5:1 deutlich
   (3.47 bzw. 2.73). Statt sie global zu ändern — was jede Seite der Site
   beträfe — gelten hier eigene, nachgerechnete Werte. Der Markenblauton
   bleibt dabei praktisch unverändert; er lag mit 4.49 nur knapp darunter.
   -------------------------------------------------------------------------- */
:root {
    --gpc-accent:      #437c9e;   /* auf Weiß            4.55:1 */
    --gpc-accent-bg:   #3f7797;   /* auf --gp-bg         4.58:1 */
    --gpc-muted:       #67738a;   /* auf Weiß            4.72:1 */
    --gpc-muted-bg:    #646f85;   /* auf --gp-bg         4.70:1 */
    --gpc-warn:        #7e6d2d;   /* auf --gp-surface-alt 4.55:1 */
    --gpc-placeholder: #7c828e;   /* auf --gp-ink-800    4.51:1 */

    /* Lesetext in den Modulkarten. --gp-text-soft (#46546b) besteht mit
       7.66:1 zwar die Norm, ist für lange, dichte Absätze in 15 px aber zu
       schwach — WCAG AA ist eine Untergrenze, kein Lesekomfort. */
    --gpc-body:        #2f3a4b;   /* auf Weiß  11.49:1, auf Alt 10.23:1 */
    --gpc-body-soft:   #556071;   /* auf Weiß   6.37:1 (Portalhinweise) */

    /* Koordinatenraster — führt das Motiv aus dem Hero fort */
    --gpc-grid-light:  rgba(120, 140, 170, .07);
    --gpc-grid-dark:   rgba(159, 176, 198, .10);
    --gpc-grid-step:   40px;
}

/* ============================================================================
   A) AUFKLAPPBARE ABSCHNITTE
   ========================================================================== */

/* Abschnitte, die nur noch Faltungen enthalten, brauchen nicht mehr die
   volle Sektionshoehe — die Klappleisten bilden selbst den Rhythmus. */
.gp-section--folded { padding: 24px 0; }

.gp-fold {
    border-top: 1px solid var(--gp-border-strong);
}
.gp-fold + .gp-fold {
    margin-top: 0;
}
.gp-fold:last-of-type {
    border-bottom: 1px solid var(--gp-border-strong);
}

/* Zusammenfassungszeile — die immer sichtbare Klappleiste.
   Bewusst asymmetrisch: das Eyebrow steht bündig links, Titel und Hinweis
   rücken ein. Der so entstehende Versatz macht die Leiste als Marke lesbar,
   ohne dass eine zusätzliche Linie nötig wäre. */
.gp-fold__sum {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 30px 4px;
    cursor: pointer;
    list-style: none;
    transition: padding-left var(--gp-base);
}
.gp-fold__title,
.gp-fold__hint { padding-left: 26px; }

/* Die Einrückung bekommt einen Ankerstrich, der vom Eyebrow herabläuft */
.gp-fold__label { position: relative; }
.gp-fold__label::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 1.55em;
    bottom: .35em;
    width: 1px;
    background: linear-gradient(180deg, var(--gp-border-strong), transparent);
}

@media (max-width: 640px) {
    .gp-fold__title, .gp-fold__hint { padding-left: 14px; }
    .gp-fold__label::before { left: 3px; }
}
.gp-fold__sum::-webkit-details-marker { display: none; }
.gp-fold__sum::marker { content: ""; }

.gp-fold__sum:hover { padding-left: 10px; }
.gp-fold__sum:focus-visible {
    outline: 2px solid var(--gp-favicon);
    outline-offset: 3px;
    border-radius: var(--gp-r-sm);
}

.gp-fold__label { min-width: 0; }

.gp-fold__eyebrow {
    display: block;
    font-family: var(--gp-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gpc-accent-bg);
    font-weight: 700;
    margin-bottom: .5em;
}

.gp-fold__title {
    display: block;
    font-size: clamp(1.35rem, 1rem + 1.4vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.22;
    color: var(--gp-text);
}

.gp-fold__hint {
    display: block;
    margin-top: .55em;
    font-size: .9rem;
    color: var(--gpc-muted-bg);
}

/* Chevron rechts */
.gp-fold__chev {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--gp-border-strong);
    display: grid;
    place-items: center;
    color: var(--gp-text-soft);
    transition: transform var(--gp-base), border-color var(--gp-fast), background var(--gp-fast), color var(--gp-fast);
}
.gp-fold__chev svg { width: 17px; height: 17px; }
.gp-fold__sum:hover .gp-fold__chev {
    border-color: var(--gp-favicon);
    background: rgba(67, 125, 159, .08);
    color: var(--gp-favicon);
}
.gp-fold[open] > .gp-fold__sum .gp-fold__chev { transform: rotate(180deg); }

/* Aufgeklappter Inhalt */
.gp-fold__body { padding: 4px 0 46px; }
.gp-fold[open] > .gp-fold__body { animation: gpFoldIn 320ms var(--gp-ease) both; }

@keyframes gpFoldIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Der Titel steht bereits in der Klappleiste — im Body bleibt nur der Lead,
   linksbündig statt zentriert, damit er zur Leiste darüber passt. */
.gp-fold__lead {
    max-width: 780px;
    margin: 0 0 40px;
    color: var(--gp-text-soft);
    font-size: 1.08rem;
    line-height: 1.7;
}

/* Zwischenüberschriften innerhalb eines Folds behalten ihre zentrierte Optik */
.gp-fold__body > .gp-section__head:first-child { margin-top: 0; }

/* Auf dunklen Abschnitten */
.gp-section--alt .gp-fold { border-color: var(--gp-border-strong); }

/* Zielsprung-Hervorhebung: kurz markieren, wenn per Anker geöffnet */
.gp-fold--targeted > .gp-fold__sum {
    animation: gpFoldFlash 1.6s var(--gp-ease) both;
    border-radius: var(--gp-r);
}
@keyframes gpFoldFlash {
    0%, 55% { background: rgba(67, 125, 159, .10); }
    100%    { background: transparent; }
}

/* Alle-aufklappen-Schalter */
.gp-foldbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 6px;
}
.gp-foldbar__btn {
    font-family: var(--gp-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-muted-bg);
    background: none;
    border: 0;
    padding: 8px 4px;
    cursor: pointer;
    transition: color var(--gp-fast);
}
.gp-foldbar__btn:hover { color: var(--gp-favicon); }

@media print {
    .gp-fold__body { display: block !important; }
    .gp-fold__chev, .gp-foldbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-fold[open] > .gp-fold__body,
    .gp-fold--targeted > .gp-fold__sum { animation: none; }
    .gp-fold__sum, .gp-fold__chev { transition: none; }
    .gp-fold__sum:hover { padding-left: 4px; }
}


/* ============================================================================
   B) ERSTAUSKUNFT — Ergebnis des Schnellchecks
   Sitzt als volle Breite unter dem .wp-citizen__grid, also auf dunklem Grund.
   ========================================================================== */

.gpc {
    display: none;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.gpc.is-visible { display: block; animation: gpFoldIn 340ms var(--gp-ease) both; }

/* Koordinatenraster als Grundtextur auf dem dunklen Panel — führt das Motiv
   aus dem Hero (.wp-hero__grid) fort, nur schwächer, damit es unter dem
   Ergebnistext nicht mitliest. */
.wp-citizen { position: relative; }
.wp-citizen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--gpc-grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--gpc-grid-dark) 1px, transparent 1px);
    background-size: var(--gpc-grid-step) var(--gpc-grid-step);
    /* zum Rand hin ausblenden, sonst wirkt es wie ein Kasten im Kasten */
    -webkit-mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 30%, transparent 78%);
}
.wp-citizen > * { position: relative; z-index: 1; }

/* ---------- Gesamtbild ----------
   Asymmetrisch 7:5 — Text links, Höhenlinien-Signatur rechts versetzt. */
.gpc__head {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 30px;
}
.gpc__head-text { max-width: 62ch; }

/* Höhenlinien-Signatur: eine große Geste statt flächiger Dekoration */
.gpc__sig {
    position: relative;
    align-self: stretch;
    min-height: 150px;
    color: var(--gp-blue-sky);
    opacity: .30;
    pointer-events: none;
}
.gpc__sig::before {
    content: "";
    position: absolute;
    inset: -30px -10px -30px 0;
    background: url("../assets/geophora-isolines.svg") no-repeat right center;
    background-size: contain;
    /* nach links auslaufen lassen, damit die Kanten nicht abgeschnitten wirken */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
    mask-image: linear-gradient(90deg, transparent, #000 38%);
}

@media (max-width: 860px) {
    .gpc__head { grid-template-columns: 1fr; }
    .gpc__sig { display: none; }
}

.gpc__badge {
    display: inline-block;
    font-family: var(--gp-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(193, 171, 75, .18);
    color: var(--gp-wheat);
    border: 1px solid rgba(193, 171, 75, .35);
}
.gpc__badge--hoch { background: rgba(193, 171, 75, .2);  color: var(--gp-wheat);   border-color: rgba(193, 171, 75, .4); }
.gpc__badge--mittel { background: rgba(116, 150, 180, .18); color: var(--gp-blue-sky); border-color: rgba(116, 150, 180, .38); }
.gpc__badge--niedrig { background: rgba(255, 255, 255, .08); color: var(--gp-text-inv-soft); border-color: rgba(255, 255, 255, .2); }

.gpc__title {
    color: #fff;
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: .55em 0 .35em;
}
.gpc__lead {
    color: var(--gp-text-inv-soft);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

/* ---------- Modulraster ---------- */
.gpc__mods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.gpc-mod {
    position: relative;
    background: var(--gp-surface);
    color: var(--gp-text);
    border-radius: var(--gp-r-lg);
    padding: 22px 22px 20px;
    box-shadow: var(--gp-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

/* Dieselbe Rastertextur wie auf dem Panel, hier nur angedeutet und auf die
   obere Ecke begrenzt — genug, um die Karte als Teil derselben Familie zu
   lesen, zu wenig, um unter dem Text zu stören. */
.gpc-mod::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--gpc-grid-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--gpc-grid-light) 1px, transparent 1px);
    background-size: var(--gpc-grid-step) var(--gpc-grid-step);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 55% at 100% 0%, #000, transparent 70%);
}
.gpc-mod > * { position: relative; z-index: 1; }

.gpc-mod__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gp-border);
    padding-bottom: 12px;
}
.gpc-mod__titel {
    font-family: var(--gp-mono);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-accent);
    margin: 0;
}
.gpc-mod__badge {
    font-family: var(--gp-mono);
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gp-surface-alt);
    color: var(--gp-text-soft);
    white-space: nowrap;
}

.gpc-mod__kern {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 600;
    color: var(--gp-text);
}
.gpc-mod__kern b, .gpc-mod__kern strong { color: var(--gpc-accent); }

.gpc-mod__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.gpc-mod__list li {
    position: relative;
    padding-left: 18px;
    font-size: .95rem;
    line-height: 1.62;
    color: var(--gpc-body);
}
.gpc-mod__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gp-favicon);
    opacity: .55;
}
.gpc-mod__list b, .gpc-mod__list strong { color: var(--gp-text); font-weight: 650; }
.gpc-mod__irrtum b, .gpc-mod__irrtum strong { color: var(--gp-text); font-weight: 650; }

/* Häufiger Irrtum — der wertvollste Teil, entsprechend hervorgehoben */
.gpc-mod__irrtum {
    background: var(--gp-surface-alt);
    border-left: 3px solid var(--gp-wheat);
    border-radius: 0 var(--gp-r-sm) var(--gp-r-sm) 0;
    padding: 13px 15px;
    font-size: .92rem;
    line-height: 1.62;
    color: var(--gpc-body);
    margin: 0;
}
.gpc-mod__irrtum::before {
    content: attr(data-label);
    display: block;
    font-family: var(--gp-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-warn);
    margin-bottom: .45em;
}

/* Belege — ausführlich, deshalb hinter einer Klappe innerhalb der Karte.
   Frei zugänglich, nur eingeklappt: kein Teaser, keine Sperre. */
.gpc-mod__more { border-top: 1px dashed var(--gp-border-strong); padding-top: 12px; }
.gpc-mod__more > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--gp-mono);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-accent);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    transition: color var(--gp-fast);
}
.gpc-mod__more > summary::-webkit-details-marker { display: none; }
.gpc-mod__more > summary::marker { content: ""; }
.gpc-mod__more > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--gp-base);
}
.gpc-mod__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gpc-mod__more > summary:hover { color: var(--gp-indigo-700); }
.gpc-mod__more > summary span { color: var(--gpc-muted); font-weight: 600; }
.gpc-mod__more > summary:focus-visible { outline: 2px solid var(--gp-favicon); outline-offset: 2px; border-radius: var(--gp-r-sm); }
.gpc-mod__more .gpc-mod__list { margin-top: 12px; }

/* Selbst prüfen — amtliche Portale */
.gpc-mod__selbst {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 4px;
}
.gpc-mod__selbst-h {
    font-family: var(--gp-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-muted);
    margin-bottom: .1em;
}
.gpc-src {
    display: block;
    text-decoration: none;
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-r-sm);
    padding: 9px 11px;
    transition: border-color var(--gp-fast), background var(--gp-fast);
}
.gpc-src:hover { border-color: var(--gp-favicon); background: rgba(67, 125, 159, .05); }
.gpc-src__n { display: block; font-size: .87rem; font-weight: 650; color: var(--gpc-accent); }
.gpc-src__d { display: block; font-size: .82rem; color: var(--gpc-body-soft); margin-top: .18em; line-height: 1.5; }

/* Was GEOPHORA ergänzt */
.gpc-mod__gp {
    margin: 0;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px dashed var(--gp-border-strong);
    font-size: .90rem;
    line-height: 1.6;
    color: var(--gpc-body);
}
.gpc-mod__gp::before {
    content: attr(data-label);
    font-family: var(--gp-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gpc-accent);
    margin-right: .6em;
}

/* ---------- Zahlen, Normen und Fristen ----------
   Wird beim Rendern automatisch ausgezeichnet. Monospace mit leicht
   reduzierter Größe, damit die Ziffernkästen nicht größer wirken als die
   Versalhöhe der Fließschrift. */
.gpc-num {
    font-family: var(--gp-mono);
    font-size: .93em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: inherit;
}
/* Auf hellen Karten bekommen sie eine feine Tönung, auf dunklem Grund nicht —
   dort trägt schon der Helligkeitsunterschied. */
.gpc-mod .gpc-num {
    background: rgba(67, 125, 159, .07);
    border-radius: 3px;
    padding: .05em .3em;
    margin: 0 -.06em;
}
.gpc-mod__kern .gpc-num { background: rgba(67, 125, 159, .11); font-weight: 600; }

/* ---------- Funnel: Kontakt direkt im Ergebnis ----------
   Asymmetrisch 5:7 — die Einordnung links ist kürzer als das Formular rechts,
   ein exakt hälftiger Schnitt ließe links Leere entstehen. */
.gpc__funnel {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--gp-r-lg);
    padding: 26px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 34px;
    align-items: start;
}

/* Demonstrator-Hinweis — rahmt alles darunter ein */
.gpc__demo {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(193, 171, 75, .09);
    border: 1px solid rgba(193, 171, 75, .28);
    border-radius: var(--gp-r-sm);
    padding: 13px 15px;
    margin-bottom: 4px;
}
.gpc__demo-tag {
    flex: none;
    font-family: var(--gp-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gp-wheat);
    border: 1px solid rgba(193, 171, 75, .45);
    border-radius: 999px;
    padding: 3px 9px;
    margin-top: 1px;
}
.gpc__demo-txt {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--gp-text-inv-soft);
}
.gpc__demo-txt strong { color: var(--gp-text-inv); font-weight: 600; }

.gpc__funnel-h {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 .5em;
}
.gpc__funnel-p {
    color: var(--gp-text-inv-soft);
    font-size: .94rem;
    line-height: 1.65;
    margin: 0 0 1em;
}
.gpc__funnel-alt {
    font-size: .86rem;
    color: var(--gp-text-inv-soft);
    margin: 0;
    line-height: 1.6;
}
.gpc__funnel-alt a { color: var(--gp-wheat); font-weight: 600; }

/* Zusammenfassung dessen, was mitgeschickt wird */
.gpc__ctx {
    margin: 0 0 1em;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .22);
    border-radius: var(--gp-r-sm);
    font-family: var(--gp-mono);
    font-size: .75rem;
    line-height: 1.7;
    color: var(--gp-text-inv-soft);
}
.gpc__ctx b { color: var(--gp-wheat); font-weight: 600; }

/* Formular */
.gpc-form { display: flex; flex-direction: column; gap: 11px; }
.gpc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.gpc-form label {
    display: block;
    font-family: var(--gp-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gp-text-inv-soft);
    margin-bottom: .45em;
}
.gpc-form input[type="text"],
.gpc-form input[type="email"],
.gpc-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--gp-r-sm);
    padding: 11px 13px;
    color: #fff;
    font-family: var(--gp-font);
    font-size: 1rem;
    transition: border-color var(--gp-fast), background var(--gp-fast);
}
.gpc-form textarea { resize: vertical; min-height: 74px; line-height: 1.55; }
.gpc-form input::placeholder, .gpc-form textarea::placeholder { color: var(--gpc-placeholder); }
.gpc-form input:focus, .gpc-form textarea:focus {
    outline: none;
    border-color: var(--gp-wheat);
    background: rgba(255, 255, 255, .1);
}
.gpc-form input[aria-invalid="true"], .gpc-form textarea[aria-invalid="true"] {
    border-color: #e08b7a;
}

/* Honeypot — für Menschen unsichtbar, für Bots auffindbar */
.gpc-form__hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gpc-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--gp-font);
    font-size: .82rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--gp-text-inv-soft);
    margin: 2px 0;
    cursor: pointer;
}
.gpc-form__consent input { margin-top: 3px; flex: none; }
.gpc-form__consent a { color: var(--gp-wheat); }

.gpc-form__err {
    font-size: .82rem;
    color: #f0a898;
    margin: 0;
    min-height: 0;
}
.gpc-form__ok {
    background: rgba(31, 157, 87, .16);
    border: 1px solid rgba(31, 157, 87, .4);
    border-radius: var(--gp-r-sm);
    padding: 14px 16px;
    color: #b9e8ce;
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}

/* Fußnote unter dem Ergebnis */
.gpc__note {
    margin: 20px 0 0;
    font-family: var(--gp-mono);
    font-size: .73rem;
    line-height: 1.7;
    color: rgba(159, 176, 198, .78);
}

@media (max-width: 900px) {
    .gpc__funnel { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
    .gpc__demo { flex-direction: column; gap: 9px; }
}
@media (max-width: 560px) {
    .gpc__mods { grid-template-columns: 1fr; }
    .gpc-form__row { grid-template-columns: 1fr; }
    .gpc-mod { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .gpc.is-visible { animation: none; }
}