/* /groups/ (SOLO Groups), seit 29.09.2026 nach Entwurf groups-1 "Gruppen-Verzeichnis",
 * dazu die Coinbase-Grafik aus Entwurf groups-2 (Auszahlungsplan als Baender).
 * Baut auf style.css auf (Tokens, .panel, .fig, .meter, .field, .copy-ic, .conn, .alert-row,
 * .hc-tip, .hc-table, .rank-*). Eigene Klassen: gv- (Seite), cb- (Grafik), ex- (Erklaerung).
 * Farben nur ueber Tokens; die zwei Diagrammfarben (Mitglied, Fee) stehen unten als eigene
 * Tokens mit Hell- und Dunkelwert. Kein Rahmen (Kopf, Fuss, Leisten) wird hier umgestaltet.
 * Aufbau: 1 Tokens, 2 Kopf, 3 Auszahlungsplan, 4 Verzeichnis, 5 Karten, 6 Schublade,
 * 7 Baukasten, 8 Erklaerung, 9 Dunkel, 10 Tablet und Handy. */

/* ============ 1 Tokens der Grafik ============ */
:root {
    --cb-member: var(--bar);       /* Mitglieder: Markenfarbe wie alle Balken der Seite */
    --cb-fee: #8a8a96;             /* Fee: neutrales Grau, bewusst zurueckgenommen (Kontrast >= 3:1 auf Weiss) */
    --cb-s0: 0.20; --cb-s1: 0.46;  /* Band-Verlauf von der Quelle zum Ausgang */
    --cb-rest: 0.5;                /* Grunddeckkraft der Baender (mal Verlauf) */
    --cb-dim: 0.18;                /* nicht markierte Baender beim Zeigen */
}
:root[data-theme="dark"] {
    --cb-fee: #a3a3ad;
    --cb-s0: 0.28; --cb-s1: 0.62;
    --cb-dim: 0.2;
}

/* ============ 2 Kopf ============ */
.gv-hero { padding: 44px 0 48px; background: radial-gradient(52rem 24rem at 92% -12%, var(--brand-100), transparent 62%), var(--bg); }
.gv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 48px; align-items: center; }
.gv-hero-copy { min-width: 0; }
.gv-hero h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.gv-lead { margin-top: 16px; max-width: 36rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }

/* Aufbau des Workernamens: drei Teile, der Tag hervorgehoben */
.gv-anatomy { margin: 22px 0 0; }
.gv-anat-line { display: inline-flex; align-items: stretch; max-width: 100%; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.gv-anat-seg { display: grid; gap: 3px; padding: 10px 16px 9px; min-width: 0; }
.gv-anat-seg + .gv-anat-seg { border-left: 1px dashed var(--line-strong); }
.gv-anat-seg code { background: none; padding: 0; border-radius: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow-wrap: normal; }
.gv-anat-seg small { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }
.gv-anat-seg.is-tag { background: var(--brand-50); }
.gv-anat-seg.is-tag code { color: var(--brand-strong); font-weight: 800; }
.gv-anat-seg.is-tag small { color: var(--brand-strong); }
.gv-anatomy figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.gv-facts { margin: 18px 0 0; }
.gv-hero-cta { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-top: 24px; }

/* Kennzahlen rechts */
.gv-kpis { padding: 20px 22px 18px; box-shadow: var(--shadow-pop); }
.gv-kpis .panel-head { margin-bottom: 4px; }
.gv-kpis .fig-value { font-size: 1.5rem; }
.gv-kpi-share { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.gv-kpi-share p { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; color: var(--text); }
.gv-kpi-share p #k-share { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gv-kpi-share .meter { margin-top: 8px; }
.gv-kpis .panel-foot { margin-top: 10px; }
/* Ohne Daten (erstes Laden gescheitert) leuchtet nichts gruen */
.gv-kpis.is-off .live-pill { background: var(--sunken); color: var(--muted); border-color: var(--line); }
.gv-kpis.is-off .dot-live { background: var(--faint); box-shadow: none; }

/* ============ 3 Auszahlungsplan (Coinbase-Grafik in der Schublade) ============ */
.cb-body { display: grid; gap: 12px; margin-top: 14px; }
.cb-num { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1; }
.cb-src { position: relative; padding: 10px 12px 10px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--sunken); box-shadow: inset 4px 0 0 var(--cb-member); }
.cb-src-k { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
/* Die Summe bleibt immer eine Zeile: Albert Sans hat keine Tabellenziffern, die Breite schwankt mit dem Live-Wert */
.cb-src-v { margin-top: 4px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-src-s { margin-top: 2px; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cb-src-s span { white-space: nowrap; }
.cb-src-r { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.cb-plot { position: relative; min-width: 0; min-height: 240px; -webkit-tap-highlight-color: transparent; }
.cb-svg { display: block; width: 100%; overflow: visible; }
.cb-svg text { font-family: 'Albert Sans', Arial, sans-serif; }
.cb-h { font-size: 12px; font-weight: 600; fill: var(--muted); }
.cb-badge circle { fill: var(--brand); }
.cb-badge text { fill: #fff; font-size: 11px; font-weight: 800; }
.cb-rule { stroke: var(--line-soft); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.cb-h, .cb-badge { pointer-events: none; }
.cb-rule-fee { stroke: var(--line); }
.cb-s0 { stop-color: var(--cb-member); stop-opacity: var(--cb-s0); }
.cb-s1 { stop-color: var(--cb-member); stop-opacity: var(--cb-s1); }
.cb-f0 { stop-color: var(--cb-fee); stop-opacity: var(--cb-s0); }
.cb-f1 { stop-color: var(--cb-fee); stop-opacity: var(--cb-s1); }
.cb-rib { fill-opacity: var(--cb-rest); transition: fill-opacity .15s; }
.cb-node, .cb-slice { fill: var(--cb-member); transition: opacity .15s; }
.o-fee .cb-node, .o-fee .cb-slice { fill: var(--cb-fee); }
/* Zusammengefasste kleine Anteile: dieselbe Farbe, heller, damit sie nicht als eine Wallet gelesen werden */
.o-rest .cb-node, .o-rest .cb-slice { fill-opacity: 0.5; }
.cb-hit { fill: transparent; transition: fill .15s; }
.cb-lbl { transition: opacity .15s; pointer-events: none; }
.cb-name { font-size: 13.5px; font-weight: 700; fill: var(--ink); }
.cb-sub { font-size: 11.5px; fill: var(--muted); }
.cb-mono { font-family: var(--mono) !important; }
.cb-val { font-size: 13.5px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.cb-pct { font-size: 13.5px; font-weight: 600; fill: var(--text); font-variant-numeric: tabular-nums; }
.cb-work { font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.is-narrow .cb-name { font-size: 13px; }
.is-narrow .cb-val, .is-narrow .cb-pct { font-size: 12.5px; }
.cb-chip rect { fill: var(--brand-50); stroke: var(--brand-200); stroke-width: 1; }
.cb-chip text { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; fill: var(--brand-strong); }
.cb-svg .o { outline: none; cursor: default; }
.cb-svg.is-hl .o:not(.is-on) .cb-rib { fill-opacity: var(--cb-dim); }
.cb-svg.is-hl .o:not(.is-on) .cb-node, .cb-svg.is-hl .o:not(.is-on) .cb-slice { opacity: 0.4; }
.cb-svg.is-hl .o:not(.is-on) .cb-lbl { opacity: 0.55; }
.cb-svg .o.is-on .cb-rib { fill-opacity: 1; }
.cb-svg .o.is-on .cb-hit { fill: var(--sunken); }
.cb-svg .o:focus-visible .cb-hit { stroke: var(--brand); stroke-width: 2; }
.cb .hc-tip { max-width: calc(100% - 8px); white-space: normal; }
.cb .hc-tip-sub { overflow-wrap: anywhere; }
.cb-tip-fee .hc-tip-val::before { background: var(--cb-fee); }
.cb-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cb-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; max-width: 46rem; overflow-wrap: anywhere; }
.cb-note b { color: var(--text); font-weight: 700; }
/* aufgeklappt nimmt die Tabelle die ganze Breite und scrollt in sich, statt die Seite zu verbreitern */
.cb-table { min-width: 0; max-width: 100%; }
.cb-table[open] { flex: 1 1 100%; width: 100%; }
.cb-table summary { min-height: 40px; }
.cb-table th, .cb-table td { white-space: nowrap; }
.cb-table td:first-child { white-space: normal; min-width: 10rem; }
.cb-table td.is-sum { font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); }
.cb-table td.is-idle { color: var(--muted); }
/* Ohne Auszahlungsplan (niemand in den letzten 6 Stunden) oder waehrend des Ladens */
.cb-empty { display: grid; place-content: center; gap: 6px; min-height: 9rem; margin-top: 14px; padding: 20px; text-align: center; font-size: var(--fs-sm); line-height: 1.55; color: var(--text); background: var(--sunken); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.cb-empty strong { font-size: 0.9375rem; }

/* Die drei Nummern der Grafik in Worten */

/* ============ 4 Verzeichnis ============ */
.gv-sec-sub { margin-top: 6px; max-width: 44rem; font-size: 0.9375rem; color: var(--text); }
.gv-dir .sec-head { align-items: flex-end; }
.gv-dir .sec-note { gap: 0.3em; }
.gv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 18px; }
.gv-search { position: relative; flex: 1 1 14rem; max-width: 20rem; min-width: 0; }
.gv-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.gv-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); transition: border-color .15s, box-shadow .15s; }
.gv-search input::placeholder { color: var(--muted); }
.gv-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(73 51 209 / 0.18); }
.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.gv-chip:hover { border-color: var(--ink); color: var(--ink); }
.gv-chip .n { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.gv-chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.gv-chip[aria-pressed="true"] .n { color: rgb(255 255 255 / 0.8); }
.gv-chip .gv-emb-xs { width: 20px; height: 20px; }
.gv-none-dot { display: inline-block; flex: none; width: 14px; height: 14px; margin: 0 2px; border-radius: 99px; border: 1.5px dashed currentColor; opacity: 0.7; }
.gv-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.gv-select { position: relative; display: inline-flex; }
.gv-select select { height: 36px; padding: 0 2.1rem 0 0.9rem; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); appearance: none; -webkit-appearance: none; cursor: pointer; }
.gv-select select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gv-select svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; }

.gv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.gv-side { display: grid; gap: var(--gap); grid-template-rows: 1fr 1fr; min-width: 0; }
.gv-empty { grid-column: span 2; display: grid; place-content: center; gap: 10px; min-height: 12rem; padding: 24px; text-align: center; color: var(--text); font-size: 0.9375rem; background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); overflow-wrap: anywhere; }
.gv-empty strong { font-size: 1rem; }
.gv-empty .btn { justify-self: center; }

/* Kleine Karten rechts: versteckte Gruppen und Gruenden */
.gv-mini { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); min-width: 0; }
.gv-mini p { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.gv-mini .btn { align-self: flex-start; }
.gv-mini-head { display: flex; align-items: center; gap: 10px; }
.gv-mini-head h3 { font-size: 1rem; }
.gv-mini-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--sunken); color: var(--text); border: 1px solid var(--line); }
.gv-mini-ic svg { width: 17px; height: 17px; }
.gv-mini-ic.is-brand { background: var(--brand-50); color: var(--brand-strong); border-color: var(--brand-100); }
.gv-new-card { border-style: solid; border-color: var(--brand-200); background: linear-gradient(140deg, var(--brand-50) 0%, var(--card) 72%); }
.gv-lookup { display: flex; gap: 8px; min-width: 0; }
.gv-lookup .gv-hashin { flex: 1; }
.gv-lookup .gv-hashin input { height: 36px; font-size: 0.875rem; }
.gv-lookup .btn { flex: none; }
.gv-mini .gv-lookup-msg { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.gv-mini .gv-lookup-msg:empty { margin-top: -10px; }
.gv-mini .gv-lookup-msg.is-bad { color: var(--off); font-weight: 600; }

/* Eingabe mit festem # davor (Suche versteckter Gruppen, Baukasten) */
.gv-hashin { display: flex; align-items: center; min-width: 0; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); transition: border-color .15s, box-shadow .15s; }
.gv-hashin > span { padding-left: 13px; font-family: var(--mono); font-weight: 800; color: var(--brand-strong); }
.gv-hashin input { flex: 1; min-width: 0; width: 100%; height: 40px; padding: 0 14px 0 3px; font-family: var(--mono); font-size: 0.9375rem; color: var(--ink); background: none; border: 0; border-radius: inherit; }
.gv-hashin input::placeholder { color: var(--muted); }
.gv-hashin input:focus { outline: none; }
.gv-hashin:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(73 51 209 / 0.18); }

/* ============ 5 Karten ============ */
.gv-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--rk-glow) 9%, var(--card)) 0, var(--card) 7.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.gv-card::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; background: var(--rk-glow); }
.gv-card.is-none { background: var(--card); }
.gv-card.is-none::before { background: var(--line-strong); }
.gv-card:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.gv-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gv-emb { display: block; width: 56px; height: 56px; flex: none; }
.gv-emb-none { color: var(--faint); }
.gv-card-id { min-width: 0; }
.gv-name { font-size: 1.1875rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); overflow-wrap: anywhere; }
.gv-hash { color: var(--brand-strong); margin-right: 1px; }
.gv-tier { margin-top: 3px; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.gv-tier strong { font-weight: 800; }
.gv-me-chip { margin: 2px 0 4px; }

/* Plaetze: 50 Felder in fuenf Zehnerbloecken */
.gv-seats-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.gv-seats-top strong { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gv-slots { display: flex; gap: 5px; }
/* Bloecke an den Stufengrenzen: Breite und Spalten setzt plaetze() je Block (flex-grow = Zahl der Plaetze) */
.gv-slots b { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.gv-slots i { height: 10px; border-radius: 2px; background: var(--line); }
.gv-slots i.on { background: var(--bar); }

.gv-card-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.gv-card-figs div { min-width: 0; }
.gv-card-figs div + div { padding-left: 12px; border-left: 1px solid var(--line-soft); }
.gv-card-figs dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.gv-card-figs dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 800; color: var(--ink); white-space: nowrap; letter-spacing: -0.01em; }

.gv-next { display: grid; gap: 6px; }
.gv-next-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; color: var(--text); }
.gv-next-top strong { color: var(--ink); }
.gv-next-top span:last-child { color: var(--muted); white-space: nowrap; }
.gv-next .meter { height: 5px; }

.gv-card-meta { display: grid; gap: 3px; font-size: 0.8125rem; color: var(--muted); }
.gv-card-meta > p { min-width: 0; }
.gv-card-meta > p:first-child { display: flex; align-items: center; gap: 6px; }
.gv-card-meta code { background: none; padding: 0; font-size: 0.8125rem; color: var(--text); overflow-wrap: normal; white-space: nowrap; }
.gv-livedot { width: 7px; height: 7px; flex: none; border-radius: 99px; background: var(--live); box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18); }
.gv-livedot.is-stale { background: var(--faint); box-shadow: none; }
.gv-card-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
/* Unter 360 px passen beide Knoepfe nicht nebeneinander: dann untereinander */
.gv-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gv-card-actions .btn { flex: 1 1 auto; padding: 0 0.9rem; }

/* ============ 6 Schublade ============ */
/* Unter dem gemeinsamen Tooltip (.tip, z 60) und dem Verbindungsassistenten (z 100), ueber Kopf und Tab-Leiste */
.gv-scrim { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--anchor) 55%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s ease-out; }
.gv-scrim.is-open { opacity: 1; }
.gv-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; display: flex; flex-direction: column; width: min(36rem, 100%); background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); transform: translateX(104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); outline: none; }
.gv-drawer.is-open { transform: none; }
html.gv-lock, html.gv-lock body { overflow: hidden; }
/* Klassische Scrollleiste (Windows): ihr Platz bleibt reserviert, sonst springt die Seite hinter dem Schleier zur Seite */
html.gv-lock { scrollbar-gutter: stable; }
.gv-d-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 10px 14px 10px 24px; border-bottom: 1px solid var(--line); }
.gv-d-back { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 6px; margin-left: -6px; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; }
.gv-d-back svg { width: 18px; height: 18px; }
.gv-d-back:hover { background: var(--sunken); }
.gv-d-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gv-d-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.gv-d-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--brand-strong); background: none; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.gv-d-link svg { width: 15px; height: 15px; }
.gv-d-link:hover { background: var(--brand-50); border-color: var(--brand-100); }
.gv-d-link.copied { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.gv-d-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px 36px; }
.gv-d-loading { padding: 48px 0; text-align: center; color: var(--muted); }
.gv-d-loading h2 { font-size: 1.375rem; overflow-wrap: anywhere; }
.gv-d-loading p + p, .gv-d-loading h2 + p { margin-top: 8px; }

.gv-d-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gv-d-head .gv-emb { width: 72px; height: 72px; }
.gv-d-id { min-width: 0; }
.gv-d-id h2 { font-size: 1.625rem; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.gv-d-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gv-d-founder { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }
.gv-d-founder code { background: none; padding: 0; color: var(--text); font-size: 0.8125rem; white-space: nowrap; overflow-wrap: normal; }

.gv-d-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); }
.gv-d-figs .fig { padding: 11px 13px; }
.gv-d-figs .fig:nth-child(3n+2), .gv-d-figs .fig:nth-child(3n+3) { border-left: 1px solid var(--line); }
.gv-d-figs .fig:nth-child(n+4) { border-top: 1px solid var(--line); }
.gv-d-figs .fig-value { font-size: 1.1875rem; }
.gv-d-figs .fig-sub { font-size: 0.75rem; }

.gv-block { margin-top: 26px; }
.gv-block-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.gv-block-t h3 { font-size: 1.0625rem; }
.gv-block-n { font-size: 0.8125rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.gv-block-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--text); line-height: 1.55; }
.gv-note { margin-top: 12px; font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }

/* Stufe: zehn Punkte fuer aktive Wallets, darunter die Schwellen */
.gv-pips { margin-top: 12px; }
.gv-pips-row, .gv-pips-lab { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* Je Stufe ein Abschnitt in der Rangfarbe, gefuellt nach zaehlenden Wallets; der aktuelle umrandet */
.gv-pips-row i { position: relative; display: block; height: 14px; border-radius: 99px; background: var(--line); overflow: hidden; }
.gv-pips-row i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--rk-glow); }
.gv-pips-row i.gv-br-ohne b { background: var(--line-strong); }
.gv-pips-row i.is-now { box-shadow: 0 0 0 2px var(--rk-glow); }
.gv-pips-row i.gv-br-ohne.is-now { box-shadow: 0 0 0 2px var(--line-strong); }
.gv-pips-lab { margin-top: 7px; align-items: start; }
.gv-pips-lab span { display: block; min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.gv-pips-lab span b { display: block; font-weight: 700; color: var(--text); }
.gv-pips-lab span.is-now { color: var(--text); }
.gv-pips-lab span.is-now b { font-weight: 800; color: var(--ink); }
.gv-pips-more { margin-top: 6px; font-size: 0.75rem; color: var(--muted); }

/* Die Grafik in der Schublade: schmale Fassung, Quelle ueber den Baendern */
.gv-d-body .cb-compact { margin-top: 14px; }
.gv-d-body .cb-compact .cb-body { margin-top: 0; }

/* Mitglieder unter der Grafik */
.gv-mem { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.gv-m { padding: 12px 0; border-bottom: 1px solid var(--line-soft); transition: background-color .12s; }
.gv-m.is-hl { background: var(--brand-50); box-shadow: -10px 0 0 var(--brand-50), 10px 0 0 var(--brand-50); }
.gv-m.is-me { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand), -10px 0 0 var(--brand-50), 10px 0 0 var(--brand-50); }
.gv-m-top { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gv-m-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--sunken); font-size: 0.75rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.gv-m-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.gv-m-who code { background: none; padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow-wrap: normal; }
.gv-m-who .chip { font-size: 0.625rem; padding: 0.1rem 0.45rem; }
.gv-m-pct { font-size: 1rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; border-radius: 4px; }
.gv-m-pct[data-tip] { position: relative; text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px; cursor: help; }
/* Tooltip-Ausloeser: Trefferflaeche 40 px hoch, die Schrift bleibt klein */
.gv-m-pct[data-tip]::after, .gv-d-pills .pill[data-tip]::after { content: ''; position: absolute; left: -4px; right: -4px; top: -9px; bottom: -9px; }
.gv-d-pills .pill[data-tip] { position: relative; cursor: help; }
.gv-m-sub { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin: 3px 0 0 32px; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Workernamen sind frei gewaehlt und koennen lang sein */
.gv-m-sub > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.gv-m-btc { font-weight: 700; color: var(--text); white-space: nowrap; }
.gv-m .meter { height: 6px; margin: 8px 0 0 32px; }
.gv-m.is-out .gv-m-who code, .gv-m.is-out .gv-m-pct { color: var(--muted); }
.gv-m.is-out .gv-m-pct { font-size: 0.8125rem; font-weight: 700; }
.gv-wk-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; margin: 9px 0 0 32px; height: 28px; padding: 0 10px 0 11px; font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--brand-strong); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-pill); cursor: pointer; }
/* Trefferflaeche 40 px hoch, die Pille bleibt klein */
.gv-wk-btn::after { content: ''; position: absolute; left: -4px; right: -4px; top: -7px; bottom: -7px; }
.gv-wk-btn:hover { border-color: var(--brand-300); }
.gv-wk-btn svg { width: 14px; height: 14px; transition: transform .15s; }
.gv-wk-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gv-wk { list-style: none; margin: 8px 0 0 32px; padding: 4px 12px; background: var(--sunken); border-radius: var(--r-md); }
.gv-wk li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 6px 0; font-size: 0.8125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.gv-wk li + li { border-top: 1px solid var(--line-soft); }
.gv-wk li b { font-family: var(--mono); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-wk li span { text-align: right; white-space: nowrap; }

/* Rechnen mit der eigenen Hashrate */
.gv-calc { padding: 18px 18px 16px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-lg); }
.gv-calc-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.gv-calc-in label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.gv-hs { display: inline-flex; align-items: center; height: 42px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.gv-hs:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(73 51 209 / 0.18); }
.gv-hs input { width: 4.2rem; height: 100%; padding: 0 4px 0 14px; font: inherit; font-weight: 800; font-size: 0.9375rem; color: var(--ink); background: none; border: 0; font-variant-numeric: tabular-nums; }
.gv-hs input:focus { outline: none; }
.gv-hs span { padding-right: 14px; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.gv-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-presets button { height: 32px; padding: 0 10px; font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.gv-presets button:hover { border-color: var(--brand-300); color: var(--ink); }
.gv-presets button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-50); }
.gv-calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.gv-calc-out div { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.gv-calc-out dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.gv-calc-out dd { margin: 2px 0 0; font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.gv-calc-out dd.sub { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Beitreten */
.gv-join { padding: 18px; border: 1px solid var(--brand-100); border-radius: var(--r-lg); background: linear-gradient(140deg, var(--brand-50) 0%, var(--card) 80%); }
.gv-join p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text); }
.gv-join .gv-line { margin-top: 12px; }
.gv-join .btn { margin-top: 12px; }

/* Fertige Zeile: bricht um, statt den Tag abzuschneiden */
.gv-line { position: relative; min-height: 44px; padding: 10px 46px 10px 13px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); }
.gv-line code { display: block; background: none; padding: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.gv-line code .ph { color: var(--muted); font-style: italic; }
.gv-line code .tg { color: var(--brand-strong); font-weight: 800; }
.gv-line .copy-ic { top: 6px; transform: none; }

/* ============ 7 Baukasten ============ */
.gv-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.gv-form { padding: 24px; }
.gv-f + .gv-f { margin-top: 20px; }
.gv-f > label, .gv-f-top label { display: block; margin-bottom: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.gv-f-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gv-counter { font-size: 0.75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.gv-counter.is-bad { color: var(--off); }
.gv-in { width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s; }
.gv-in.is-mono { font-family: var(--mono); font-size: 0.875rem; }
.gv-in::placeholder { color: var(--muted); }
.gv-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(73 51 209 / 0.18); }
.gv-hashin-lg { border-radius: var(--r-md); }
.gv-hashin-lg input { height: 46px; }
.gv-f.is-bad .gv-in, .gv-f.is-bad .gv-hashin { border-color: var(--off); }
.gv-f.is-ok .gv-in { border-color: var(--ok-line); }
.gv-hint { margin-top: 7px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.gv-hint.is-ok { color: var(--ok); font-weight: 600; }
.gv-hint.is-bad { color: var(--off); font-weight: 600; }
.gv-hint.is-warn { color: var(--warn); font-weight: 600; }
.gv-checks { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8125rem; color: var(--muted); }
.gv-checks li { display: inline-flex; align-items: center; gap: 5px; }
.gv-checks code { font-size: 0.8125rem; padding: 0 0.3em; color: inherit; }
.gv-checks li svg { width: 14px; height: 14px; opacity: 0.45; }
.gv-checks li.ok { color: var(--ok); }
.gv-checks li.ok svg { opacity: 1; }
.gv-checks li.bad { color: var(--off); font-weight: 600; }
.gv-checks li.bad svg { opacity: 1; }
.gv-status { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); }
.gv-status:empty { display: none; }
/* Gruppennamen haben bis zu 32 Zeichen ohne Trennstelle: umbrechen statt aus dem Kasten ragen */
.gv-status > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.gv-status .btn, .gv-empty .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
.gv-status .btn { text-align: left; }
.gv-status .gv-emb { width: 36px; height: 36px; }
.gv-status-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.gv-status-ic svg { width: 18px; height: 18px; }
.gv-status strong { color: var(--ink); }
.gv-status p + p { margin-top: 4px; }
.gv-status .text-link { margin-top: 6px; text-align: left; }
.gv-status .btn { margin-top: 8px; }
.gv-status.is-join { background: var(--brand-50); border-color: var(--brand-100); }
.gv-status.is-new { background: var(--ok-bg); border-color: var(--ok-line); }
.gv-status.is-new .gv-status-ic { color: var(--ok); border-color: var(--ok-line); }
.gv-status.is-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.gv-status.is-warn .gv-status-ic { color: var(--warn); border-color: var(--warn-line); }
.gv-status.is-bad { background: var(--off-bg); border-color: var(--off-line); }
.gv-status.is-bad .gv-status-ic { color: var(--off); border-color: var(--off-line); }
.gv-status .gv-sub { font-size: 0.8125rem; color: var(--muted); }
.gv-switch-row { display: flex; align-items: flex-start; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.gv-switch { position: relative; width: 46px; height: 28px; flex: none; margin-top: 1px; padding: 0; background: var(--line-strong); border: 0; border-radius: 99px; cursor: pointer; transition: background-color .15s; }
.gv-switch::after { content: ''; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.gv-switch .gv-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform .15s; }
.gv-switch[aria-checked="true"] { background: var(--btn-bg); }
.gv-switch[aria-checked="true"] .gv-knob { transform: translateX(18px); }
.gv-switch-l { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.gv-switch-row .gv-hint { margin-top: 2px; }
.gv-f.is-flash .gv-hashin { animation: gv-ring 1.4s ease-out; }
@keyframes gv-ring { 0% { box-shadow: 0 0 0 6px var(--brand-200); } 100% { box-shadow: 0 0 0 0 transparent; } }

.gv-result { padding: 24px; position: sticky; top: 84px; }
.gv-r-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.gv-r-head h3 { font-size: var(--fs-xl); }
.gv-r-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--text); }
.gv-result .conn { margin-top: 16px; }
.gv-r-note { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.gv-r-steps { margin: 16px 0 0; padding: 0 0 0 1.25rem; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.gv-r-steps li::marker { font-weight: 800; color: var(--brand-strong); }
.gv-result .alert-row { margin-top: 18px; }
#b-badge { white-space: normal; overflow-wrap: anywhere; }
#b-badge.is-join { background: var(--brand-50); color: var(--brand-strong); border-color: var(--brand-100); }
#b-badge.is-new { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
#b-badge.is-bad { background: var(--off-bg); color: var(--off); border-color: var(--off-line); }

/* ============ 8 Erklaerung, Stufen, Regeln ============ */
.gv-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gv-how li { min-width: 0; padding: 20px 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.gv-how h3 { margin: 14px 0 6px; font-size: 1rem; }
.gv-how p { font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.gv-tiers-head { margin-top: 40px; max-width: 46rem; }
.gv-tiers-head h3 { font-size: var(--fs-xl); }
.gv-tiers-head p { margin-top: 8px; font-size: 0.9375rem; color: var(--text); line-height: 1.6; }
/* Fuenf Stufen seit 21.10.2026: breit fuenf Spalten, das Emblem steht ueber dem Text */
.gv-tiers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.gv-tier-card { position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; padding: 20px 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--rk-glow) 9%, var(--card)) 0, var(--card) 100%); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.gv-tier-card::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; background: var(--rk-glow); }
.gv-tier-card .gv-emb { width: 76px; height: 76px; }
.gv-tier-card h4 { font-size: 1.1875rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.gv-tier-rule { margin-top: 2px; font-size: var(--fs-sm); color: var(--text); }
.gv-tier-mult { margin-top: 8px; font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gv-tier-mult span { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.gv-tier-now { margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }
.gv-tier-now:empty { display: none; }
@media (min-width: 1100px) {
    .gv-tier-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 18px; }
    .gv-tier-card .gv-emb { width: 64px; height: 64px; }
}
.gv-tiers-foot { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gv-rules { margin-top: 36px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.gv-rules h3 { font-size: 1.0625rem; }
.gv-rules ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.gv-rules li { position: relative; padding-left: 16px; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.gv-rules li::before { content: ''; position: absolute; left: 1px; top: 0.62em; width: 6px; height: 6px; border-radius: 99px; background: var(--brand); }

/* ============ 8b Nonstop und Verlauf (seit 21.10.2026) ============ */
.gv-ns-row { margin-top: 7px; }
.gv-ns { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.6rem 0.12rem 0.45rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--sunken); color: var(--text); font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.gv-ns[data-tip] { position: relative; cursor: help; }
.gv-ns-ic { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gv-ns.is-off { color: var(--muted); }
/* Abzeichen: Bronze ab 30, Silber ab 100, Gold ab 365 Tagen */
.gv-ns-30 { background: #fbeee2; color: #9a4a12; border-color: #efcfb2; }
.gv-ns-100 { background: #eef1f6; color: #3f4a5c; border-color: #cfd6e2; }
.gv-ns-365 { background: #fff6d6; color: #8a5a00; border-color: #ecd27f; }
/* Mini-Verlauf in der Farbe der Stufe; Gruppen ohne Stufe neutral wie ihre Karte */
.gv-spark { display: grid; gap: 4px; }
.gv-spark svg { display: block; width: 100%; height: 36px; overflow: visible; }
.gv-spark-a { fill: var(--rk-glow, var(--muted)); opacity: 0.14; }
.gv-spark-l { fill: none; stroke: var(--rk-glow, var(--muted)); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.gv-spark-lab { font-size: 0.6875rem; font-weight: 700; line-height: 1; color: var(--muted); }
.gv-verlauf .hc-plot { margin-top: 12px; }
.gv-verlauf .gv-note { margin-top: 4px; }

/* ============ 9 Dunkel ============ */
:root[data-theme="dark"] .gv-ns-30 { background: rgb(234 138 66 / 0.14); color: #f2b07a; border-color: rgb(234 138 66 / 0.35); }
:root[data-theme="dark"] .gv-ns-100 { background: rgb(203 213 225 / 0.12); color: #d6dde8; border-color: rgb(203 213 225 / 0.3); }
:root[data-theme="dark"] .gv-ns-365 { background: rgb(251 191 36 / 0.14); color: #fcd34d; border-color: rgb(251 191 36 / 0.35); }
:root[data-theme="dark"] .gv-scrim { background: color-mix(in srgb, var(--anchor) 80%, transparent); }
:root[data-theme="dark"] .gv-anat-seg.is-tag { background: var(--brand-100); }
:root[data-theme="dark"] .gv-card { background: linear-gradient(180deg, color-mix(in srgb, var(--rk-glow) 10%, var(--card)) 0, var(--card) 7.5rem); }
:root[data-theme="dark"] .gv-card.is-none { background: var(--card); }
:root[data-theme="dark"] .gv-mini { background: color-mix(in srgb, var(--card) 70%, transparent); }
:root[data-theme="dark"] .gv-new-card { background: linear-gradient(140deg, var(--brand-100) 0%, var(--card) 75%); }
:root[data-theme="dark"] .gv-join { background: linear-gradient(140deg, var(--brand-100) 0%, var(--card) 80%); border-color: var(--brand-200); }
:root[data-theme="dark"] .gv-slots i, :root[data-theme="dark"] .gv-pips-row i { background: var(--line-strong); }
:root[data-theme="dark"] .gv-slots i.on { background: var(--bar); }
:root[data-theme="dark"] .cb-num, :root[data-theme="dark"] .cb-badge circle { background: var(--btn-bg); fill: var(--btn-bg); }

/* ============ 10 Tablet und Handy ============ */
@media (min-width: 900px) {
    /* Quelle links neben den Baendern; die schmale Fassung in der Schublade bleibt gestapelt.
       13,75rem fassen auch breite Summen wie "3,88888888 BTC" in 24 px; waere eine Summe noch
       breiter, waechst die Spalte mit (min-content), statt die Zahl umzubrechen. */
    .cb:not(.cb-compact) .cb-body { grid-template-columns: minmax(13.75rem, min-content) minmax(0, 1fr); gap: 0; align-items: center; }
    .cb:not(.cb-compact) .cb-src { padding: 0 16px 0 0; background: none; box-shadow: none; border-radius: 0; text-align: right; }
    .cb:not(.cb-compact) .cb-src-k { justify-content: flex-end; }
    .cb:not(.cb-compact) .cb-src-v { font-size: 1.5rem; }
    .cb:not(.cb-compact) .cb-src-s span { display: block; }
}
@media (max-width: 1099px) {
    .gv-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-hero-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 32px; }
    .gv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-side { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-sort { margin-left: 0; }
    .gv-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-tier-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    .gv-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .gv-kpis { max-width: 36rem; }
    .gv-build { grid-template-columns: minmax(0, 1fr); }
    .gv-result { position: static; }
    .gv-tier-card .gv-emb { width: 64px; height: 64px; }
}
@media (max-width: 767px) {
    .gv-tiers { grid-template-columns: minmax(0, 1fr); }
    .gv-hero { padding: 26px 0 30px; }
    .gv-lead { margin-top: 12px; font-size: var(--fs-md); }
    .gv-anat-seg { padding: 9px 11px 8px; }
    .gv-anat-seg code { font-size: 0.875rem; }
    .gv-anat-seg small { font-size: 0.6875rem; }
    .gv-facts { margin: 14px 0 0; }
    .gv-hero-cta { margin-top: 18px; }
    .gv-hero-cta .btn { width: 100%; }
    .gv-hero-cta .text-link { min-height: 40px; }
    .gv-kpis { padding: 16px; }
    .gv-kpis .fig-value { font-size: 1.3rem; }
    .gv-tools { gap: 10px; }
    .gv-search { flex-basis: 100%; max-width: none; }
    .gv-sort { width: 100%; justify-content: space-between; }
    /* Tippflaechen mindestens 40 px, auch in Zustaenden, die erst beim Tippen entstehen
       (Status im Baukasten, leere Suche, Link unter den Stufen) */
    .gv-chip, .gv-select select, .gv-lookup .gv-hashin input { height: 40px; }
    .gv-card-actions .btn, .gv-mini .btn, .gv-status .btn, .gv-empty .btn, .gv-presets button { min-height: 40px; }
    .gv-status .text-link, .gv-tiers-foot .text-link { min-height: 40px; }
    .gv-status .text-link { margin-top: 2px; }
    .gv-build .copy-ic, .gv-d-body .copy-ic { width: 40px; height: 40px; }
    .gv-build .field { padding-right: 50px; }
    .gv-line { padding-right: 52px; }
    .gv-line .copy-ic { top: 2px; right: 2px; }
    .gv-grid { grid-template-columns: minmax(0, 1fr); }
    .gv-side { grid-template-columns: minmax(0, 1fr); }
    .gv-empty { grid-column: auto; min-height: 9rem; }
    .gv-card { padding: 18px 16px 16px; gap: 14px; }
    .gv-card::before { left: 16px; right: 16px; }
    .gv-emb { width: 50px; height: 50px; }
    .gv-card-figs dd { font-size: 1rem; }
    .gv-card-figs div + div { padding-left: 10px; }
    .gv-slots { gap: 4px; }
    .gv-slots i { height: 9px; }
    .gv-how { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .gv-how li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    .gv-how li .how-icon { grid-row: span 2; }
    .gv-how h3 { margin: 2px 0 4px; }
    .gv-rules { padding: 18px 16px; }
    .gv-rules ul { grid-template-columns: minmax(0, 1fr); }
    .gv-form, .gv-result { padding: 18px 16px; }
    .gv-tier-card { padding: 16px; }

    /* Schublade wird Vollbild */
    .gv-drawer { width: 100%; border-left: 0; transform: translateY(24px); opacity: 0; transition: transform .22s ease-out, opacity .22s ease-out; }
    .gv-drawer.is-open { transform: none; opacity: 1; }
    .gv-d-bar { min-height: 56px; padding: 8px 10px 8px 12px; }
    .gv-d-back { display: inline-flex; }
    .gv-d-kicker { display: none; }
    .gv-d-link .js-copy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .gv-d-link { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .gv-d-bar .icon-btn { width: 40px; height: 40px; }
    .gv-d-body { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
    .gv-d-head { gap: 12px; }
    .gv-d-head .gv-emb { width: 58px; height: 58px; }
    .gv-d-id h2 { font-size: 1.375rem; }
    .gv-d-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-d-figs .fig:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
    .gv-d-figs .fig:nth-child(-n+2) { border-top: 0; }
    .gv-d-figs .fig:nth-child(even) { border-left: 1px solid var(--line); }
    .gv-pips-row, .gv-pips-lab { gap: 4px; }
    .gv-pips-lab span { font-size: 0.6875rem; }
    .gv-calc-out { grid-template-columns: minmax(0, 1fr); }
    .gv-m-sub, .gv-m .meter, .gv-wk-btn, .gv-wk { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gv-drawer, .gv-scrim, .gv-card, .gv-m { transition: none; }
    .gv-f.is-flash .gv-hashin { animation: none; }
    .cb-rib, .cb-node, .cb-slice, .cb-hit, .cb-lbl { transition: none; }
}
@media (forced-colors: active) {
    .gv-slots i.on, .gv-pips-row i b { background: Highlight; }
    .gv-slots i, .gv-pips-row i { background: GrayText; }
    .cb-node, .cb-slice { fill: CanvasText; }
    .o-fee .cb-node, .o-fee .cb-slice { fill: GrayText; }
    .cb-rib { fill-opacity: 0.35; }
}