/* ============================================================================
   GEOPHORA — Vertikalen-Seiten (Immobilien · Wärmeplanung · Private GeoKI ·
   Nachhaltigkeitsmanagement) · gemeinsame Seitenstile
   Extrahiert am 2026-08-11 aus den bis dahin identischen <style>-Blöcken der
   vier Seiten (Untermarken-Beschluss 2026-08-11). Baut auf den Familien-Tokens
   aus css/geophora-demo.css auf und gehört daher NACH geophora-demo.css
   geladen. Chrome kennt genau EIN Blau (Akzent/-tief/-hell); Teal, Wheat und
   die Ampelfarben sind ausschließlich Datenfarben.
   ========================================================================== */

/* Kreide-Hero (Beschluss B6, 2026-08-12): Das Hero-Band ist Erzählfläche und
   liegt hell auf dem Familien-Grund — exakt nach dem Vorbild des
   Startseiten-.gp-hero (css/geophora-demo.css § 6). Die Werkzeugkarte
   (.wp-tool) rechts bleibt Instrument und behält ihre dunkle Konsolenleiste —
   auf Kreide gewinnt sie sogar Kontrast. */
.wp-hero { position: relative; padding: calc(var(--gp-nav-h) + 64px) 0 72px;
    background: radial-gradient(125% 95% at 50% -10%, #f7f7f4 0%, var(--gp-bg) 52%, var(--gp-surface-alt) 128%);
    color: var(--gp-text); overflow: hidden; }
.wp-hero__grid { position:absolute; inset:0; opacity:.5; background-image:
    linear-gradient(rgba(var(--gp-ink-rgb),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gp-ink-rgb),.05) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%); pointer-events:none; }
.wp-hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
/* Waermeplanung seit 16.08.2026: Tool wohnt im KWP-Block, der Hero traegt nur
   noch Text — eine Spalte, begrenzte Zeilenlaenge. */
.wp-hero__inner--solo { grid-template-columns: 1fr; max-width: 940px; }
.wp-hero .gp-eyebrow { color: var(--gp-akzent-tief); }
.wp-hero h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); color: var(--gp-text); letter-spacing: -.02em; }
.wp-hero h1 em { font-style: normal; color: var(--gp-akzent); }
.wp-hero__lead { font-size: 1.12rem; color: var(--gp-text-soft); max-width: 40em; }
.wp-hero__trust { display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 22px; font-family: var(--gp-mono); font-size:.78rem; letter-spacing:.02em; color: var(--gp-text-faint); }
.wp-hero__trust span { display:inline-flex; align-items:center; gap:8px; }
.wp-hero__trust span::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--gp-akzent); }

/* Geocoding tool card */
.wp-tool { background: var(--gp-surface); color: var(--gp-text); border:1px solid var(--gp-border); border-radius: var(--gp-r-lg); box-shadow: var(--gp-shadow-lg); overflow:hidden; }
.wp-tool__bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background: var(--gp-ink-800); color: var(--gp-text-inv); font-family: var(--gp-mono); font-size:.78rem; }
.wp-tool__dots { display:inline-flex; gap:5px; }
.wp-tool__dots i { width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.3); }
.wp-tool__body { padding: 18px; }
.wp-tool label { display:block; font-family: var(--gp-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--gp-text-faint); margin-bottom:8px; }
.wp-tool__field { width:100%; border:1.5px solid var(--gp-border-strong); border-radius: var(--gp-r); padding: 12px 14px; font: inherit; font-size: 1rem; resize: vertical; min-height: 78px; background: var(--gp-bg); color: var(--gp-text); }
.wp-tool__field:focus { outline:none; border-color: var(--gp-favicon); box-shadow: 0 0 0 4px rgba(var(--gp-akzent-rgb),.16); }
.wp-tool__row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-top:12px; }
.wp-tool__hint { font-family: var(--gp-mono); font-size:.74rem; color: var(--gp-text-faint); }
.wp-examples { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wp-ex { border:1px solid var(--gp-border); background: var(--gp-surface-alt); color: var(--gp-text-soft); border-radius:999px; padding:6px 12px; font-size:.82rem; cursor:pointer; transition: all var(--gp-fast); }
.wp-ex:hover { border-color: var(--gp-favicon); color: var(--gp-favicon); }

.wp-result { margin-top:16px; border-top:1px dashed var(--gp-border-strong); padding-top:16px; display:none; }
.wp-result.is-visible { display:block; }
.wp-map { height: 210px; border-radius: var(--gp-r); overflow:hidden; border:1px solid var(--gp-border); margin-top:14px; background: var(--gp-surface-alt); }
.wp-mapwrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; background: var(--gp-surface-alt); border:1px dashed var(--gp-border-strong); border-radius: var(--gp-r); }
.wp-mapwrap .wp-tool__hint { margin:0; }
.wp-facts { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.wp-fact { background: var(--gp-surface-alt); border:1px solid var(--gp-border); border-radius: var(--gp-r-sm); padding:10px 12px; }
.wp-fact__k { font-family: var(--gp-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color: var(--gp-text-faint); }
.wp-fact__v { font-weight:700; font-size:.98rem; }
.wp-fact__v small { font-weight:500; color: var(--gp-text-soft); }
.wp-status { font-family: var(--gp-mono); font-size:.8rem; margin-top:10px; }

/* generic feature grids reuse gp-card */
/* #daten Kopf — größer, zentriert, heller geometrischer Hintergrund (ruhig) */
#daten .gp-section__head { position: relative; max-width: 840px; padding: 50px 24px 8px; margin-bottom: 44px; }
#daten .gp-section__head::before { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
    width: min(1120px, 122%); height: 100%; z-index:0; pointer-events:none;
    background:
        radial-gradient(58% 66% at 50% 26%, rgba(var(--gp-akzent-rgb),.10), transparent 70%),
        radial-gradient(circle, rgba(var(--gp-akzent-rgb),.16) 1.3px, transparent 1.4px);
    background-size: auto, 24px 24px; background-position: center, center;
    -webkit-mask-image: radial-gradient(66% 80% at 50% 32%, #000 32%, transparent 78%);
    mask-image: radial-gradient(66% 80% at 50% 32%, #000 32%, transparent 78%); }
#daten .gp-section__head > * { position: relative; z-index: 1; }
#daten .gp-section__title { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.05rem); letter-spacing:-.015em; margin-bottom:.35em; }
#daten .gp-section__lead { font-size: 1.14rem; }

.wp-cardgrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.wp-datacard { background: var(--gp-surface); border:1px solid var(--gp-border); border-radius:3px; padding: 20px 22px; display:flex; flex-direction:column; gap:10px; transition: border-color var(--gp-base); }
/* Aufklappbare Paket-Kaesten (nur wo die Karte ein <details> ist — die
   <article>-Karten der anderen Vertikalen bleiben unberuehrt) */
details.wp-datacard > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
details.wp-datacard > summary::-webkit-details-marker { display: none; }
details.wp-datacard > summary::after { content: "+"; font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--gp-akzent-tief); flex: 0 0 auto; }
details.wp-datacard[open] > summary::after { content: "\2212"; }
details.wp-datacard > summary h3 { margin: 0; }
.wp-datacard:hover { border-color: var(--gp-border-strong); }
.wp-datacard h3 { font-size: 1rem; font-weight:700; margin:0; padding-bottom:11px; border-bottom:1px solid var(--gp-border); letter-spacing:-.005em; }
.wp-datacard p { color: var(--gp-text-soft); font-size:.92rem; line-height:1.55; margin:0; }
.wp-datacard__src { margin-top:auto; padding-top:12px; font-family: var(--gp-mono); font-size:.72rem; color: var(--gp-text-faint); }
.wp-datacard__src a { display:inline-flex; align-items:center; gap:5px; }

/* citizen hook */
.wp-citizen { background: linear-gradient(180deg, var(--gp-ink-800), var(--gp-ink-900)); color: var(--gp-text-inv); border-radius: var(--gp-r-xl); padding: 40px; position:relative; overflow:hidden; }
.wp-citizen__grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
.wp-citizen h2 { color: var(--gp-text-inv); }
.wp-citizen p { color: var(--gp-text-inv-soft); }
.wp-qs { display:flex; flex-direction:column; gap:12px; margin: 20px 0 0; }
.wp-q { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: var(--gp-r); padding:14px 16px; }
.wp-q b { color: var(--gp-akzent-hell); }

.wp-check { background: var(--gp-surface); color: var(--gp-text); border-radius: var(--gp-r-lg); padding: 22px; box-shadow: var(--gp-shadow-lg); }
.wp-check h3 { font-size: 1.05rem; }
.wp-check__opts { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.wp-copt { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1.5px solid var(--gp-border); border-radius: var(--gp-r); cursor:pointer; transition: all var(--gp-fast); }
.wp-copt:hover { border-color: var(--gp-favicon); }
.wp-copt input { margin-top:3px; }
.wp-check__out { display:none; margin-top:14px; border-top:1px dashed var(--gp-border-strong); padding-top:14px; }
.wp-check__out.is-visible { display:block; }
.wp-badge { display:inline-block; font-family: var(--gp-mono); font-size:.72rem; padding:4px 10px; border-radius:999px; font-weight:700; }
/* Ergebnis-Badges: Datenfarben (Ampel-Klassifikation) — bewusst nicht Teil des Chrome-Farbsystems */
.wp-badge--net { background: rgba(31,157,87,.14); color:#157a42; }
.wp-badge--check { background: rgba(193,138,43,.16); color:#8a5e12; }
.wp-badge--dez { background: rgba(var(--gp-akzent-rgb),.14); color: var(--gp-blue-deep); }

/* question library */
.wp-lib { display:flex; flex-wrap:wrap; gap:10px; }
.wp-libq { background: var(--gp-surface); border:1px solid var(--gp-border); border-radius: var(--gp-r); padding:12px 15px; font-size:.92rem; color: var(--gp-text-soft); flex:1 1 320px; display:flex; gap:10px; align-items:flex-start; }
.wp-libq span { color: var(--gp-favicon); font-family: var(--gp-mono); font-size:.8rem; }

/* Fragen je Zielgruppe bzw. Lebenslage — eigene visuelle Hooks passend zu den Geo-Glyphen */
.wp-zg { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.wp-zgcol { display:flex; flex-direction:column; gap:14px; background: var(--gp-surface); border:1px solid var(--gp-border); border-radius: var(--gp-r-lg); padding:22px 20px; box-shadow: var(--gp-shadow-sm); transition: border-color var(--gp-base), transform var(--gp-base), box-shadow var(--gp-base); }
.wp-zgcol:hover { border-color: var(--gp-border-strong); transform: translateY(-3px); box-shadow: var(--gp-shadow); }
.wp-zgcol:hover .wp-glyph { border-color: var(--gp-favicon); }
.wp-zgcol__head { display:flex; align-items:center; gap:14px; }
.wp-zgcol__head .wp-glyph { margin-bottom:0; flex:0 0 auto; }
.wp-zgcol__label { font-family: var(--gp-mono); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--gp-favicon); }
.wp-zgcol__sub { display:block; font-family: var(--gp-mono); font-size:.64rem; letter-spacing:.03em; text-transform:none; color: var(--gp-text-faint); margin-top:3px; }
.wp-zgq { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.wp-zgq li { position:relative; padding:10px 12px 10px 14px; background: var(--gp-surface-alt); border:1px solid var(--gp-border); border-left:3px solid var(--gp-akzent); border-radius: var(--gp-r-sm); font-size:.9rem; line-height:1.5; color: var(--gp-text-soft); }

/* process steps reuse gp-steps but add a citizen lane */
.wp-flow { display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 10px; }
.wp-flowstep { position:relative; overflow:hidden; background: var(--gp-surface); border:1px solid var(--gp-border); border-radius: var(--gp-r-lg); padding: 24px 20px; box-shadow: var(--gp-shadow-sm); min-height:236px; transition: border-color var(--gp-base), box-shadow var(--gp-base), transform var(--gp-base); }
.wp-flowstep::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--gp-akzent), var(--gp-akzent-tief)); }
.wp-flowstep:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow); border-color: var(--gp-border-strong); }
.wp-flowstep > *:not(.wp-flowstep__wm) { position:relative; z-index:1; }
.wp-flowstep__n { font-family: var(--gp-mono); font-size:.82rem; letter-spacing:.08em; color: var(--gp-favicon); font-weight:700; }
.wp-flowstep h3 { font-size:1.04rem; margin:.55em 0 .35em; letter-spacing:-.01em; }
.wp-flowstep p { font-size:.9rem; color: var(--gp-text-soft); margin:0; line-height:1.55; max-width:25ch; }
.wp-flowstep__wm { position:absolute; z-index:0; top:-14px; right:-12px; width:130px; height:130px; opacity:.09; color: var(--gp-favicon); pointer-events:none; transition: opacity var(--gp-base), transform var(--gp-base); transform-origin: top right; }
.wp-flowstep__wm svg { width:100%; height:100%; display:block; }
.wp-flowstep:hover .wp-flowstep__wm { opacity:.15; transform: scale(1.07) rotate(-2deg); }

/* sources */
.wp-sources { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.wp-source { display:flex; gap:12px; align-items:flex-start; background: var(--gp-surface); border:1px solid var(--gp-border); border-radius: var(--gp-r); padding:14px 16px; }
.wp-source__ico { font-size:1.2rem; }
.wp-source__t { font-weight:600; font-size:.95rem; }
.wp-source__d { color: var(--gp-text-soft); font-size:.85rem; }

.wp-note { font-family: var(--gp-mono); font-size:.78rem; color: var(--gp-text-faint); background: var(--gp-surface-alt); border:1px dashed var(--gp-border-strong); border-radius: var(--gp-r); padding: 12px 14px; }

/* GEOPHORAs Rolle — Servicelayer in the middle */
.wp-role { display:grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items:start; }
.wp-role__lead { font-size:1.16rem; line-height:1.5; color: var(--gp-text); font-weight:700; max-width: 46ch; margin:0 0 4px; }
.wp-role__lead b { color: var(--gp-favicon); }
.wp-role__prose p { color: var(--gp-text-soft); font-size:.97rem; line-height:1.62; margin:.9em 0 0; }
.wp-role__prose p strong { color: var(--gp-text); }
.wp-role__prose .wp-role__kicker { color: var(--gp-blue-deep); font-weight:800; }

/* dark premium panel with highlighted terms — Glühen einfarbig im Akzent (ein Blau im Chrome) */
.wp-role__panel { position:relative; overflow:hidden; border-radius: var(--gp-r-lg);
    background:
        radial-gradient(420px 220px at 88% -10%, rgba(var(--gp-akzent-rgb),.22), transparent 60%),
        radial-gradient(360px 260px at -5% 108%, rgba(var(--gp-akzent-rgb),.12), transparent 60%),
        linear-gradient(180deg, var(--gp-ink-800), var(--gp-ink-900));
    color: var(--gp-text-inv); padding: 24px 22px; box-shadow: var(--gp-shadow-lg);
    border:1px solid rgba(159,176,198,.16); display:flex; flex-direction:column; gap:16px; }
.wp-role__panel::before { content:""; position:absolute; inset:0;
    background-image: linear-gradient(rgba(120,140,170,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,140,170,.06) 1px, transparent 1px);
    background-size: 30px 30px; mask-image: radial-gradient(80% 70% at 80% 0%, #000 30%, transparent 100%); pointer-events:none; }
.wp-role__eyebrow { position:relative; font-family: var(--gp-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gp-akzent-hell); }
.wp-role__terms { position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.wp-role__term { display:block; }
.wp-role__term b { display:block; color: var(--gp-text-inv); font-size:.94rem; font-weight:700; letter-spacing:.005em; }
.wp-role__term b::before { content:"▸"; color: var(--gp-akzent-hell); font-size:.82em; margin-right:9px; }
.wp-role__term span { display:block; color: var(--gp-text-inv-soft); font-size:.8rem; line-height:1.45; margin-top:2px; padding-left:18px; }
.wp-role__div { position:relative; height:1px; background:linear-gradient(90deg, transparent, rgba(159,176,198,.28), transparent); margin:4px 0 2px; }
.wp-role__gtitle { position:relative; font-family: var(--gp-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gp-text-inv-soft); }
.wp-role__groups { position:relative; display:flex; flex-wrap:wrap; gap:8px; }
.wp-role__grp { font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px; letter-spacing:.005em;
    color: var(--gp-text-inv); background: rgba(255,255,255,.06); border:1px solid rgba(159,176,198,.24); transition: border-color var(--gp-fast), background var(--gp-fast); }
.wp-role__grp:hover { border-color: rgba(var(--gp-akzent-rgb),.6); background: rgba(var(--gp-akzent-rgb),.12); }

/* Abstrakte Geo-Glyphen — ersetzen die Emoji-Icons der #niwap-Karten */
.wp-glyph { width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px;
    background: radial-gradient(130% 130% at 28% 18%, rgba(var(--gp-akzent-rgb),.16), rgba(var(--gp-akzent-rgb),.08) 60%, transparent);
    border:1px solid var(--gp-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--gp-shadow-sm); }
.wp-glyph svg { width:32px; height:32px; display:block; }
/* Glyphen-Striche: zwei Tonstufen desselben Akzentblaus statt Teal-Zweitfarbe */
.wp-glyph .g-stroke { stroke: var(--gp-favicon); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.wp-glyph .g-accent { stroke: var(--gp-akzent-tief); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.wp-glyph .g-grid { stroke: var(--gp-blue-deep); stroke-width:1.4; stroke-linecap:round; opacity:.42; fill:none; }
.wp-glyph .g-mid { stroke: var(--gp-akzent-tief); stroke-width:2.2; fill: rgba(var(--gp-akzent-rgb),.16); }
.wp-glyph .g-dot { fill: var(--gp-favicon); }
.wp-glyph .g-dot--accent { fill: var(--gp-akzent-tief); }
.gp-card:hover .wp-glyph { border-color: var(--gp-favicon); }

/* Großes, transparentes Symbol oben rechts als Deko-Watermark */
#niwap .gp-card { position: relative; overflow: hidden; }
#niwap .gp-card > *:not(.wp-cardwm) { position: relative; z-index: 1; }
.wp-cardwm { position:absolute; top:-22px; right:-18px; width:168px; height:168px; opacity:.09;
    color: var(--gp-favicon); pointer-events:none; z-index:0; transition: opacity var(--gp-base), transform var(--gp-base); transform-origin: top right; }
.wp-cardwm svg { width:100%; height:100%; display:block; }
#niwap .gp-card:hover .wp-cardwm { opacity:.14; transform: scale(1.06) rotate(-2deg); }

/* Zielgruppen-Stufen über der Bürger-Box — heller geometrischer Hintergrund, zentriert, ruhig */
.wp-tiers { position:relative; overflow:hidden; margin-bottom:34px; border:1px solid var(--gp-border); border-radius: var(--gp-r-lg); background: var(--gp-surface); box-shadow: var(--gp-shadow-sm); }
.wp-tiers::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(58% 130% at 50% 22%, rgba(var(--gp-akzent-rgb),.10), transparent 68%),
        radial-gradient(circle, rgba(var(--gp-akzent-rgb),.15) 1.3px, transparent 1.4px);
    background-size: auto, 22px 22px; background-position: center, center;
    -webkit-mask-image: radial-gradient(92% 120% at 50% 42%, #000 45%, transparent 85%);
    mask-image: radial-gradient(92% 120% at 50% 42%, #000 45%, transparent 85%); }
.wp-tiers > * { position:relative; z-index:1; }
.wp-tiers__eyebrow { display:block; text-align:center; padding:20px 24px 4px; font-family: var(--gp-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gp-favicon); font-weight:700; }
.wp-tiers__grid { display:grid; grid-template-columns: repeat(3, 1fr); padding-bottom:6px; }
.wp-tier { padding:16px 26px 22px; border-left:1px solid var(--gp-border); text-align:center; }
.wp-tier:first-child { border-left:none; }
.wp-tier__k { font-size:.9rem; font-weight:700; color: var(--gp-favicon); }
.wp-tier__v { font-size:1.05rem; font-weight:600; color: var(--gp-text); margin:6px 0 0; }

/* Flächenhafte Datengrundlage — filigrane, technische Kartenschau (Demo-Outputs) */
.wp-flaeche { margin:0 0 40px; }
.wp-flaeche__head { margin:0 0 18px; max-width: 62ch; }
.wp-flaeche__eyebrow { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gp-favicon); font-weight:700; }
.wp-flaeche__lead { margin:8px 0 0; font-size:1.02rem; line-height:1.55; color: var(--gp-text-soft); }
.wp-flaeche__lead::first-line { color: var(--gp-text); }
.wp-flaeche__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
/* #e9edf2 = Basemap-Grundton der SVG-Kartenmockups (Datendarstellung, kein Chrome) */
.wp-flaeche__panel { position:relative; border:1px solid var(--gp-border-strong); border-radius:4px; overflow:hidden;
    background:#e9edf2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), var(--gp-shadow-sm); }
.wp-flaeche__svg { display:block; width:100%; aspect-ratio: 4 / 3; }
.wp-flaeche__tag { position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px;
    padding:3px 9px 3px 6px; font-size:.68rem; letter-spacing:.02em; color: var(--gp-text);
    background: rgba(255,255,255,.86); border:1px solid var(--gp-border); border-radius:3px; backdrop-filter: blur(2px); }
.wp-flaeche__tag b { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:2px;
    background: var(--gp-favicon); color: var(--gp-text-inv); font-size:.64rem; font-weight:700; }
.wp-flaeche__src { display:block; margin-top:12px; font-size:.68rem; letter-spacing:.03em; color: var(--gp-text-soft); opacity:.85; text-align:right; }

/* Anwendungen mit Hebel — kommerzialisierbare, skalierbare Wedges */
.wp-wedges { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:16px; }
.wp-wedge { position:relative; display:flex; flex-direction:column; gap:9px; padding:22px 24px;
    background: var(--gp-surface); border:1px solid var(--gp-border); border-radius:6px; box-shadow: var(--gp-shadow-sm);
    transition: border-color var(--gp-base), transform var(--gp-base), box-shadow var(--gp-base); }
.wp-wedge:hover { border-color: var(--gp-favicon); transform: translateY(-2px); box-shadow: var(--gp-shadow); }
.wp-wedge__who { align-self:flex-start; font-family: var(--gp-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    color: var(--gp-favicon); background: rgba(var(--gp-akzent-rgb),.08); border:1px solid var(--gp-border); border-radius:999px; padding:3px 11px; }
.wp-wedge h3 { font-size:1.05rem; margin:3px 0 0; line-height:1.3; }
.wp-wedge p { color: var(--gp-text-soft); font-size:.92rem; line-height:1.55; margin:0; }
.wp-wedge__scale { margin-top:auto; padding-top:11px; border-top:1px solid var(--gp-border); font-size:.79rem; color: var(--gp-text); }
.wp-wedge__scale b { color: var(--gp-favicon); font-weight:700; }

@media (max-width: 760px) {
    .wp-flaeche__grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    /* minmax(0,1fr): Spalteninhalt darf schmaler als sein Mindestmaß werden,
       sonst sprengen lange Wörter den Viewport auf schmalen Geräten. */
    .wp-hero__inner, .wp-citizen__grid, .wp-role, .wp-tiers__grid { grid-template-columns: minmax(0, 1fr); }
    .wp-tier { border-left:none; border-top:1px solid var(--gp-border); }
    .wp-tier:first-child { border-top:none; }
    .wp-cardgrid, .wp-sources, .wp-zg { grid-template-columns: minmax(0, 1fr); }
    .wp-flow { grid-template-columns: 1fr 1fr; }
}
.wp-check, .wp-copt span { overflow-wrap: break-word; }
.wp-zgcol__sub, .wp-zgcol__label { overflow-wrap: break-word; }
@media (max-width: 560px) {
    .wp-facts { grid-template-columns: 1fr; }
    .wp-flow { grid-template-columns: 1fr; }
    .wp-citizen { padding: 28px 16px; }
}

/* ============================================================================
   Karten-Controls an die Familie angepasst (Beschluss 3.2, 2026-08-12):
   Leaflet-Chrome in Kreide/Tinte mit Akzent-Hover — betrifft nur Zoom-Knöpfe,
   Attribution und Control-Rahmen. Karteninhalte bleiben unberührt.
   ========================================================================== */
.leaflet-control-zoom a { background: var(--gp-surface); color: var(--gp-text); border-color: var(--gp-border); }
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus { background: var(--gp-surface); color: var(--gp-akzent-tief); border-color: var(--gp-akzent); }
.leaflet-control-attribution { background: rgba(248,248,245,.85); color: var(--gp-text-faint); font-size: .66rem; }
.leaflet-control-attribution a { color: var(--gp-akzent-tief); }
.leaflet-bar { box-shadow: var(--gp-shadow-sm); border-radius: var(--gp-r-sm); }
.leaflet-bar a:first-child { border-top-left-radius: var(--gp-r-sm); border-top-right-radius: var(--gp-r-sm); }
.leaflet-bar a:last-child { border-bottom-left-radius: var(--gp-r-sm); border-bottom-right-radius: var(--gp-r-sm); }