/* ============================================================================
   V68 · Die Lupe: EXAKT V67, nur alles 20 % größer (Nutzer-Wahl „Lupen-Ansatz").
   `zoom` skaliert Layout UND Abstände gemeinsam — Proportionen bleiben damit
   mathematisch identisch, wie Browser-Zoom auf 120 %. Auf sehr schmalen
   Bildschirmen kann seitliches Scrollen entstehen (bewusst in Kauf genommen).
   ========================================================================== */
html{zoom:1.2}

/* ============================================================================
   V63 · BAUSTEINE — DICHT + FUNKTIONEN (Basis V61)
   Collage aus fünf markierten Bausteinen (Nutzer-PDFs, Reihenfolge 01–05):
   01 Kopf aus V40 (samt Gold-Glühen als Seiten-Hintergrund, Nav wortgleich),
   02 Überschrift aus V24, 03 „Das Siegel“ + 04 Apparat aus V18 (PDF sagt V16,
   Fundort ist V18; Abstand 03→04 auf Nutzer-Wunsch deutlich verringert),
   05 Zahlen-Leiste aus V23 — dunkel gefasst. Schwester-Blatt: V62 luftig.
   ========================================================================== */

/* 01 · Hintergrund wortgleich aus V40 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 16%,rgba(252,211,77,.13) 0%,transparent 58%);
}
body > *{position:relative;z-index:1}

/* 02 · Überschrift im V24-Kleid (dünn + goldener Fettanteil) */
.buehne h1{font-weight:300;font-size:clamp(25px,4.2vw,46px);line-height:1.15;max-width:16ch;margin-inline:auto}
.buehne h1 span,.buehne h1 b{display:block}
.buehne h1 b{font-weight:900;background:linear-gradient(135deg,var(--akzent),var(--gold-tief));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* 03/04 · Siegel-Abschnitt aus V18 */
.siegel{text-align:center}
.siegel .hinweis{color:var(--t3);font-size:11.5px;min-height:1.4em}
.kasse .klein{margin-top:12px}

/* DICHT: ein-Bildschirm-Gefühl — knappe Abstände überall. */
.buehne{padding:clamp(16px,2.6vh,30px) 0 0;text-align:center}
.buehne .appicon{width:clamp(64px,7.5vw,84px);height:auto;margin:0 auto clamp(10px,1.6vh,16px)}
.buehne h1{margin:.3em auto .25em}
.siegel{padding:clamp(18px,3vh,34px) 0 clamp(20px,3.2vh,36px);border-top:0}
.kasse{margin-top:clamp(24px,3.6vh,40px)}
.zahlen-satz{padding:clamp(18px,3vh,34px) var(--rand) clamp(30px,5vh,52px)}

/* 05 · Zahlen-Leiste aus V23, dunkel gefasst: helles Gold, dunkle Haarlinien. */
.werte{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--linie2);border-bottom:1px solid var(--linie2);max-width:900px;margin:0 auto}
.werte div{padding:clamp(16px,2.4vw,24px) 10px;text-align:center;border-left:1px solid var(--linie)}
.werte div:first-child{border-left:0}
.werte .zahl{font-size:clamp(22px,3.2vw,38px);font-weight:900;background:linear-gradient(135deg,#FCD34D,#D9A124);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.werte .wort{display:block;margin-top:.75em;font-size:9px;letter-spacing:.18em}
@media(max-width:700px){
  .werte{grid-template-columns:repeat(2,1fr)}
  .werte div:nth-child(3),.werte div:nth-child(5){border-left:0}
  .werte div:nth-child(n+3){border-top:1px solid var(--linie)}
}

/* ══ HÜLLE UND KARTE ═════════════════════════════════════════════════════ */
.siegel .apparat{
  --kb:min(380px,80vw);
  --kh:calc(var(--kb) / 1.586);
  --weg:calc(var(--kh) * .78);
  width:calc(var(--kb) * 1.045);height:calc(var(--kh) + var(--weg));
  margin:clamp(34px,6vh,64px) auto clamp(14px,2vh,22px);
  position:relative;container-type:inline-size;
}
.siegel .karte{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:var(--kb);height:var(--kh);perspective:1400px;cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.siegel .apparat.draussen .karte{transform:translateX(-50%) translateY(calc(-1 * var(--weg)))}
.siegel .flaeche{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.8,.25,1)}
.siegel .karte.gedreht .flaeche{transform:rotateY(180deg)}

.siegel .seite{
  position:absolute;inset:0;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:5.5cqw;background:#000;display:flex;flex-direction:column;padding:5.8cqw;
  box-shadow:0 18px 44px rgba(0,0,0,.75);
}
.siegel .seite::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 26%,rgba(var(--akzent-rgb),.20) 0%,transparent 72%);
}
.siegel .seite::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:5.5cqw;
  box-shadow:inset 0 0 0 1px rgba(var(--akzent-rgb),.42);
}
.siegel .seite > *{position:relative}
.siegel .hinten{transform:rotateY(180deg)}

.siegel .k-oben{height:3.4cqw}
.siegel .k-mitte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqw;transform:translateY(-6cqw)}
.siegel .k-wort{font-size:2.6cqw;letter-spacing:.26cqw;color:var(--t3);text-transform:uppercase;white-space:nowrap}
/* Vorn: der Beispiel-Name im exakten Stil der Wort-Zeile (App-Stand 2026-08-10). */
.siegel .k-namezeile{font-size:2.6cqw;letter-spacing:.26cqw;color:var(--t3);text-transform:uppercase;white-space:nowrap}
/* Hinten: das Karten-Wort mittig über dem Band; Zeile + Luft (h·0,02 ≈ 1,3cqw)
   schieben Band und Zähler gemeinsam nach unten — wie in der App. */
.siegel .hinten .k-wort{text-align:center;margin-bottom:1.3cqw}
.siegel .k-raster{width:88%}

.siegel .k-fuss{margin-top:auto;display:flex;align-items:center;gap:1.76cqw}
.siegel .k-fuss .zeichen{width:11cqw;height:5.96cqw}       /* 0,115·Karte wie in der App */
.siegel .k-fuss .name{font-weight:700;letter-spacing:.24em;font-size:1.93cqw;color:var(--t3)}
.siegel .k-fuss .rechts{margin-left:auto;font-weight:700;letter-spacing:.15em;font-size:2.2cqw}
.siegel .vorn .k-fuss .rechts{color:var(--akzent)}      /* Getauscht: vorn die STUFE */
.siegel .hinten .k-fuss .rechts{color:var(--t4)}        /* Getauscht: hinten das JAHR */

.siegel .guilloche{width:100%;height:26%;margin-top:4cqw}
.siegel .guilloche svg{height:100%}
.siegel .k-zaehler{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(2cqw)}
.siegel .k-zaehler .zahl{font-size:10.5cqw;background:linear-gradient(135deg,var(--akzent),var(--gold-tief));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.siegel .k-zaehler .zwort{font-size:1.9cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--t1);margin-top:1.4cqw}

.siegel .huelle{
  position:absolute;left:0;bottom:0;width:100%;height:calc(var(--kh) * .62);
  border-radius:5.3cqw;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,#333 0%,#141414 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(var(--akzent-rgb),.30);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:13%;
}
.siegel .huelle::before{content:"";position:absolute;top:0;left:0;right:0;height:1.2px;background:rgba(var(--akzent-rgb),.55)}
.siegel .huelle::after{content:"";position:absolute;top:1.2px;left:0;right:0;height:16%;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.siegel .huelle .pfeil{color:rgba(var(--akzent-rgb),.40);font-size:3.8cqw;line-height:1;margin-bottom:6%;transition:transform .4s}
.siegel .apparat.draussen .huelle .pfeil{transform:rotate(180deg)}
.siegel .huelle .titel{font-size:3cqw;letter-spacing:1.4cqw;color:var(--t4);text-transform:uppercase}

.siegel .hinweis{color:var(--t3);font-size:11.5px;min-height:1.4em}
.siegel .stufenwahl{display:inline-flex;gap:10px;margin-top:clamp(20px,3vh,30px)}
.siegel .stufenwahl button{
  background:none;border:1px solid var(--linie2);border-radius:999px;cursor:pointer;
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 20px;color:var(--t4);transition:.22s;
}
.siegel .stufenwahl button[aria-pressed="true"]{color:var(--w);border-color:var(--w)}

/* 04-Zusatz · „HOL SIE DIR“-Knopf aus V41 (rotes Rechteck), auf Nutzer-Wunsch
   40 % kleiner als dort und OHNE den Glow-Schatten aus kern.css. */
.siegel .kasse .knopf{font-size:clamp(10px,1.2vw,12.5px);padding:11px 24px;box-shadow:none}
.siegel .kasse .knopf:hover{box-shadow:none}
.siegel .kasse .klein{margin-top:10px}

/* 06 · Funktionsübersicht (aus V11), im dichten V61-Rhythmus. */
.satz{padding:clamp(20px,3.4vh,38px) 0 clamp(30px,5vh,52px);border-top:1px solid var(--linie)}
.kopfzeile{text-align:center;margin-bottom:clamp(18px,3vh,30px)}
.kopfzeile h2{font-weight:300;font-size:clamp(22px,3vw,36px);margin-top:.5em;line-height:1.22}
.kopfzeile h2 b{font-weight:900;color:var(--akzent)}
.kopfzeile .unter{color:var(--t3);font-size:14px;margin-top:1em;margin-inline:auto;max-width:none}
/* Nutzer-Vorgabe: der Satz bleibt EINE Zeile (auf sehr schmalen Schirmen darf
   er umbrechen, sonst schöbe er die Seite waagerecht). */
@media(min-width:560px){ .kopfzeile .unter{white-space:nowrap} }

/* Nutzer-Vorgabe: Zahl und Auf/Zu-Zeichen in den Gruppen-Köpfen doppelt so groß
   (kern.css: 12px/14px → 24px/28px; das „x" ist das um 45° gedrehte Plus). */
[data-art="falten"] .fkopf .fzahl{font-size:24px}
[data-art="falten"] .fkopf .fpfeil{font-size:28px}

/* 07 · Die verdichtete Vergleichstafel (zwischen 02 und 03). */
.vgl{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;font-size:13.5px}
.vgl th{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:10px 8px;text-align:center}
.vgl th.b{color:#F0B27A}.vgl th.si{color:#98A2B3}.vgl th.g{color:var(--akzent)}
.vgl td{padding:11px 8px;border-top:1px solid var(--linie2)}
.vgl td:first-child{text-align:left;color:var(--t2)}
.vgl td:not(:first-child){text-align:center;width:5.2em}
.vgl .ja{color:var(--akzent)}.vgl .nein{color:var(--t4)}.vgl .wert{color:var(--t1);font-weight:700}
.vgl .gruppe td{border-top:0;padding-top:26px;color:var(--t4);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.vgl .preis td{font-weight:700;color:var(--t1)}
.vgl .preis td:not(:first-child){color:var(--t1)}  /* wie .wert (Statistik-Kacheln) */
@media(max-width:560px){.vgl{font-size:12px}.vgl td:not(:first-child){width:4em}}
/* ══ DIE DREI KARTEN — Format 0,87, Breiten 0,821 / 0,941 / 1,0 ══════════
   ⚠️ 2026-08-10 exakt auf GETPROVIEW Vorschlag 45 gezogen (AboSeitenDreiSignatur/
   -Zurueckhaltung/-Gleichmass): Rand 5,8 % · Raster-Rahmen 72 % Höhe mit Auslauf
   ab 80 % · Preis spalte·0,26 · Fuß mass=kb·0,115, Logo mass·0,65, hinten ·0,85. */
#karten-satz .karten{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.2vw,30px);flex-wrap:wrap}
#karten-satz .karte{
  --breite:clamp(236px,25vw,326.8px);
  width:calc(var(--breite) * var(--f,1));aspect-ratio:.87;
  perspective:1400px;cursor:pointer;opacity:.55;
  transition:opacity .3s ease;container-type:inline-size;
}
#karten-satz .karte[data-stufe="free"]{--f:.821}
#karten-satz .karte[data-stufe="plus"]{--f:.941}
#karten-satz .karte[data-stufe="pro"]{--f:1}
#karten-satz .karte.wahl{opacity:1}

#karten-satz .flaeche{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.8,.25,1)}
#karten-satz .karte.gedreht .flaeche{transform:rotateY(180deg)}

#karten-satz .seite{
  position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:5.5cqw;background:#000;overflow:hidden;
  display:flex;flex-direction:column;padding:5.8cqw;
}
#karten-satz .seite::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 26%,var(--schimmer) 0%,transparent 70%);
}
#karten-satz .seite > *{position:relative}
#karten-satz .hinten{transform:rotateY(180deg)}
#karten-satz .karte.wahl .seite{
  box-shadow:0 0 0 1.4px var(--metall-30),0 18px 46px rgba(0,0,0,.75),0 0 34px var(--metall-20);
}

#karten-satz .oben{display:flex;gap:6.2cqw;align-items:flex-start}
#karten-satz .streifen{width:34%;flex:0 0 34%;height:82.76cqw;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(#000 0,#000 80%,transparent 100%)}
#karten-satz .streifen svg{display:block;width:100%}
#karten-satz .spalte{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
#karten-satz .k-name{align-self:stretch;text-align:left}
#karten-satz .k-name b{display:block;font-weight:700;font-size:5.2cqw;color:var(--metall);line-height:1.1}
#karten-satz .k-versprechen{display:block;font-size:3.2cqw;color:var(--t2);margin-top:.35em;line-height:1.2}
#karten-satz .k-preis{
  font-weight:900;font-size:13.56cqw;line-height:1;margin-top:5.25cqw;
  background:var(--metall-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;
}
#karten-satz .k-je{font-size:3.05cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--t1);margin-top:2.88cqw}
#karten-satz .k-tag{font-size:2.33cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:.9cqw;min-height:2.6cqw}
#karten-satz .abzeichen{margin-top:3.2cqw;min-height:4.4cqw;display:flex;align-items:center;justify-content:center}
#karten-satz .abzeichen span{
  font-size:3cqw;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#000;
  background:var(--metall);border-radius:999px;padding:.7cqw 2.4cqw;
}
#karten-satz .pillen{display:flex;gap:.8cqw;margin-top:3.2cqw;padding:.7cqw;border:1px solid var(--linie2);border-radius:999px}
#karten-satz .pillen button{
  flex:1;background:none;border:0;cursor:pointer;font-weight:700;font-size:2.3cqw;
  letter-spacing:.06em;text-transform:uppercase;padding:1.2cqw .6cqw;border-radius:999px;
  color:var(--t3);transition:.2s;white-space:nowrap;
}
#karten-satz .pillen button[aria-pressed="true"]{background:#fff;color:#000}
#karten-satz .haken{align-self:stretch;margin-top:6.6cqw;display:grid;gap:1.5cqw;text-align:left}
#karten-satz .haken div{display:flex;gap:2cqw;align-items:flex-start;font-size:3.4cqw;color:var(--t2);line-height:1.25}
#karten-satz .haken div::before{content:"✓";color:var(--metall);font-weight:700;font-size:3.2cqw;line-height:1.25;flex:0 0 auto}

#karten-satz .k-fuss{margin-top:auto;display:flex;align-items:center;gap:1.84cqw;font-size:2.01cqw}
#karten-satz .k-fuss .zeichen{width:7.48cqw;height:4.05cqw}
#karten-satz .k-fuss .name{font-weight:700;letter-spacing:.24em;color:var(--t3);font-size:2.01cqw}
#karten-satz .k-fuss .rechts{margin-left:auto;font-weight:700;letter-spacing:.3em;color:var(--t4);font-size:2cqw}
#karten-satz .k-fuss .krone{margin-left:auto;color:var(--metall);font-size:2.3cqw;line-height:1}
/* „Zurückhaltung": hinten ist die Fußzeile 15 % kleiner als vorn. */
#karten-satz .hinten .k-fuss{font-size:1.71cqw}
#karten-satz .hinten .k-fuss .zeichen{width:6.36cqw;height:3.44cqw}
#karten-satz .hinten .k-fuss .name{font-size:1.71cqw}
#karten-satz .hinten .k-fuss .rechts{font-size:1.96cqw}

#karten-satz .spruch{text-align:center;font-size:3.4cqw;letter-spacing:.4cqw;color:var(--t3);white-space:nowrap}
#karten-satz .hinten .raster{margin-top:3cqw}
#karten-satz .zaehler{display:flex;align-items:flex-start;gap:4cqw;margin-top:auto;padding-top:3cqw}
#karten-satz .zaehler .zahl{font-size:10.5cqw;background:var(--metall-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
#karten-satz .zaehler .zwort{font-size:2.1cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--t1);margin-top:1.2cqw}
#karten-satz .zaehler .haken{margin-top:0;flex:1;gap:1.3cqw}
#karten-satz .zaehler .haken div{font-size:3cqw}
#karten-satz .zaehler .haken div::before{font-size:2.8cqw}

#karten-satz .kasse{margin-top:clamp(30px,5vh,52px);text-align:center}
#karten-satz .kasse .klein{margin-top:12px}


/* 08 · Rahmen des Preis-Abschnitts */
.karten-hinweis{display:block;text-align:center;margin:clamp(18px,3vh,28px) 0 clamp(14px,2.2vh,22px)}
.kasse.laden{margin-top:clamp(22px,3.4vh,36px);text-align:center}
/* Der Lade-Knopf trägt die NORMALE kern.css-Größe samt Schein — die kleine,
   scheinlose Fassung weiter oben gilt nur dem Apparat (V61-Vorgabe). */
.kasse.laden .knopf{font-size:10.15px;padding:10.5px 22.4px;
  box-shadow:0 12px 32px rgba(var(--akzent-rgb),.20)}
.kasse.laden .klein{margin-top:10px}

/* ── V68-Nachträge (Nutzer-Vorgaben 2026-08-11) ───────────────────────────
   Karte oben: Abstand unter dem Namen verdoppelt (2,6 → wirksam 5,2cqw), und
   zwar so, dass der NAME nach oben wandert und das Raster stehen bleibt. */
.siegel .k-namezeile{position:relative;top:-2.6cqw}

/* (1) Alle drei Preiskarten in Pro-Größe — die Staffel 0,821/0,941/1 entfällt. */
#karten-satz .karte[data-stufe="free"]{--f:1}
#karten-satz .karte[data-stufe="plus"]{--f:1}

/* (2) Die Krone unten rechts 2,5× (2,3 → 5,75cqw). */
#karten-satz .k-fuss .krone{font-size:5.75cqw}

/* (4) Kaufargumente hinten in Vorderseiten-Größe (3/2,8 → 3,4/3,2cqw). */
#karten-satz .zaehler .haken div{font-size:3.4cqw}
#karten-satz .zaehler .haken div::before{font-size:3.2cqw}

/* (3) Dreh-Hinweis oben rechts (Nutzer-Wahl: ↻, 50 % Transparenz) — im
   Metallton der Karte, sitzt auf dem Innenrand (5,8cqw). */
#karten-satz .seite .dreh{position:absolute;top:5.8cqw;right:5.8cqw;
  font-size:4.5cqw;line-height:1;color:var(--metall);opacity:.4}

/* Mitgliedskarte oben: derselbe Dreh-Hinweis wie auf den Preiskarten —
   Innenrand 5,8cqw, Metallton der Stufe (--akzent), 50 % Transparenz. */
.siegel .seite .dreh{position:absolute;top:5.8cqw;right:5.8cqw;
  font-size:4.5cqw;line-height:1;color:var(--akzent);opacity:.4}

/* (2) Raster der Mitgliedskarte ×1,04 (88 → 91,52 %). */
.siegel .k-raster{width:91.52%}

/* „62 Funktionen" ist jetzt der Schalter für die Funktionsübersicht. */
.werte .klickbar{cursor:pointer}
.werte .klickbar:hover .zahl{filter:brightness(1.25)}

/* ── V68-Nachträge 2026-08-11 (rote Punkte + Nutzer-Antworten) ────────────
   Fußzeile der Mitgliedskarte rückt in die Ecken: Innenabstand 2 statt
   5,8 cqw (negative Ränder gegen das Karten-Polster; gilt vorn UND hinten —
   damit sitzen Logo wie gewünscht unten links, PRO/2026 unten rechts). */
.siegel .k-fuss{margin-left:-2.8cqw;margin-right:-2.8cqw;margin-bottom:-2.8cqw}

/* Logo + Schriftzug −15 % (ein Regler wie in der App) — beide Seiten gleich:
   Vorderseite von 7,48/2,01 auf die bisherigen Rückseiten-Werte 6,36/1,71. */
.siegel .k-fuss{gap:1.56cqw;font-size:1.71cqw}
.siegel .k-fuss .zeichen{width:6.36cqw;height:3.44cqw}
.siegel .k-fuss .name{font-size:1.71cqw}

/* Dreh-Pfeil in die Ecke (alle Karten): 5,8 → 2 cqw. */
.siegel .seite .dreh{top:2cqw;right:2cqw}
#karten-satz .seite .dreh{top:2cqw;right:2cqw}

/* (2) Zähler „1071" 20 % kleiner (10,5 → 8,4 cqw); Guilloche-Band näher an
   LIFETIME (Gesamtabstand ≈ halbiert: margin-top 4 → 1,3 cqw). */
.siegel .k-zaehler .zahl{font-size:7.14cqw}
.siegel .guilloche{margin-top:1.3cqw}

/* Logo −15 % auch auf den drei Preiskarten (vorn 7,48→6,36 · hinten 6,36→5,41,
   die Zurückhaltungs-Staffel vorn/hinten bleibt damit erhalten). */
#karten-satz .k-fuss{gap:1.56cqw;font-size:1.71cqw}
#karten-satz .k-fuss .zeichen{width:6.36cqw;height:3.44cqw}
#karten-satz .k-fuss .name{font-size:1.71cqw}
#karten-satz .hinten .k-fuss{font-size:1.45cqw}
#karten-satz .hinten .k-fuss .zeichen{width:5.41cqw;height:2.92cqw}
#karten-satz .hinten .k-fuss .name{font-size:1.45cqw}

/* Stufen-Name (Free/Plus/Pro) bündig mit der Raster-Oberkante: line-height 1
   und den Schrift-Vorlauf (Lato-Oberlänge über Versalhöhe ≈ 0,25em) abziehen. */
#karten-satz .k-name b{line-height:1;margin-top:-1.3cqw}

/* Fußzeile vorn (nur noch Logo + Schriftzug, Krone entfernt) in die Ecke —
   derselbe 3-%-Innenabstand wie auf der Mitgliedskarte oben. */
#karten-satz .seite.vorn .k-fuss{margin-left:-1.8cqw;margin-right:-1.8cqw;margin-bottom:-1.8cqw}

/* Zähler „1071 / Häkchen bisher" ein kleines Stück höher (translateY 2→0cqw). */
.siegel .k-zaehler{transform:translateY(0)}

/* Kaufargumente −16 % (3,4/3,2 → 2,856/2,688cqw) — vorn UND hinten; damit
   rutscht auch die von den langen Listen hinausgedrückte Fußzeile auf
   Plus/Pro zurück in die Karte. */
#karten-satz .oben .haken div{font-size:2.856cqw}
#karten-satz .oben .haken div::before{font-size:2.688cqw}
#karten-satz .zaehler .haken div{font-size:2.856cqw}
#karten-satz .zaehler .haken div::before{font-size:2.688cqw}

/* Perioden-Leiste: waagerecht ~10 % breiter (Knopf-Seitenpolster 0,6→1,05cqw)
   und Schrift −4 % (2,3 → 2,208cqw). */
#karten-satz .pillen button{font-size:2.208cqw;padding:1.2cqw 1.05cqw}

/* Kaufpreise −6 %, dann nochmals −5 % (13,56 → 12,75 → 12,11cqw). */
#karten-satz .k-preis{font-size:12.11cqw}

/* Untertitel unter Free/Plus/Pro −6 % (3,2 → 3,008cqw). */
#karten-satz .k-versprechen{font-size:3.008cqw}

/* Perioden-Leiste nochmals ~10 % breiter — diesmal über die ÄUSSERE Kapsel
   (leerer Rand um die Knöpfe, Nutzer-Wahl): Seitenpolster 0,7 → 2,1cqw. */
#karten-satz .pillen{padding:.7cqw 2.1cqw}

/* ══ V70 · DIE DREI RINGE ═══════════════════════════════════════════════════
   Farben und Staffel aus der App; das Leuchten ist der Neon-Look von
   CoreRingsView, hier als weicher Schein statt echter Unschärfe (billiger). */
.ringe{width:clamp(190px,24vw,290px);margin:clamp(24px,4vh,42px) auto 0}
.ringe svg{display:block;width:100%;height:auto;overflow:visible}
/* V71: Farben, Dicken und Schein-Ebenen stehen im SVG selbst (wie GlowRing) —
   hier bleibt nur die Bahn, exakt der trackColor der App. */
.ring-bahn{stroke:rgba(255,255,255,.06)}

.ringworte{display:flex;justify-content:center;align-items:baseline;gap:.7em;
  margin-top:clamp(16px,2.4vh,26px);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700}
.ringworte .r-auf{color:#5C74F2}
.ringworte .r-ab {color:#F06060}
.ringworte .r-er {color:#FFC933}
.ringworte .r-punkt{color:var(--t4);font-weight:400}

/* Die zweite Bühne trägt nur die Karten-Überschrift. */
.buehne2{padding:clamp(40px,6.5vh,80px) 0 0;text-align:center}
.buehne2 h1{font-weight:300;font-size:clamp(25px,4.2vw,46px);line-height:1.15;
  max-width:16ch;margin-inline:auto}
.buehne2 h1 span,.buehne2 h1 b{display:block}
.buehne2 h1 b{font-weight:900;background:linear-gradient(135deg,var(--akzent),var(--gold-tief));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ══ V70 · MITGLIEDSKARTE NACH VORSCHLAG 16 („Versetzt") ═══════════════════
   Umgerechnet aus AboMkMass (Anteile der KARTENHÖHE; Format 1,586 →
   1 Kartenhöhe = 63,05 cqw):
     Lücke unter dem Namen   0,045 × 1,3 = 0,0585 h = 3,69 cqw
     Lücke unter dem Raster  0,042 × 1,6 = 0,0672 h = 4,24 cqw
     Block-Versatz  −0,10 (getauscht) − 0,065 (nameHoeher) + 0,04835 (versatz16)
                    = −0,11665 h = −7,35 cqw
   Name und Tageszeile tragen beide 3 % der Kartenbreite (tagGrad). */
.siegel .k-mitte{gap:0;transform:translateY(-7.35cqw)}
.siegel .k-namezeile{font-size:3cqw;top:0;margin-bottom:3.69cqw}
.siegel .k-tagzeile{margin-top:4.24cqw;font-size:3cqw;letter-spacing:.8cqw;
  color:rgba(255,255,255,.65);text-transform:uppercase;white-space:nowrap}
/* Tageszeile halb so groß (Nutzer-Vorgabe 2026-08-14) — Sperrung mit halbiert,
   damit die Zeile ihr Verhältnis behält. */
.siegel .k-tagzeile{font-size:1.5cqw;letter-spacing:.4cqw}
/* Abstand Raster-Unterkante → Tageszeile halbiert (4,24 → 2,12cqw). */
.siegel .k-tagzeile{margin-top:2.12cqw}

/* Abstand Kicker → Ring-Überschrift ×3 (0,3 → 0,9 em; .buehne2 bleibt). */
.buehne h1{margin-top:.9em}

/* Abstand Ringworte → Karten-Überschrift = derselbe wie Kicker → Ring-Überschrift:
   0,9 × der (identischen) h1-Schriftgröße. Als padding der zweiten Bühne gesetzt,
   damit kein Rand-Kollaps dazwischenfunkt. */
.buehne2{padding-top:calc(1.81 * clamp(25px,4.2vw,46px))}
.buehne2 h1{margin-top:0}

/* Startwert 0 — den wahren Abstand über der Karte setzt abstaende.js. */
.siegel{padding-top:0}

/* Preise brechen auf dem Handy nicht mehr um: schmales geschütztes Leerzeichen
   im Text + etwas weniger Seitenpolster in den Zahlenspalten (8 → 5 px). */
@media(max-width:560px){
  .vgl td:not(:first-child){padding-left:5px;padding-right:5px}
}

/* ── Fußzeile auf dem Handy (Nutzer-Vorgaben 2026-08-17) ──────────────────
   Reihenfolge umgedreht: erst die drei Links (mittig, eigene Zeile), darunter
   Logo + HABITCHAIN und 2026 NEBENEINANDER — ganz unten auf der Seite.
   Der untere Abstand des Fußes bleibt wie er ist (Nutzer-Wahl), ebenso der
   Abstand zwischen den Links. Ab 561 px gilt unverändert die Desktop-Zeile. */
@media(max-width:560px){
  .fuss-inner{justify-content:center;gap:16px 14px}
  .fuss nav{order:1;flex-basis:100%;justify-content:center}
  .fuss .marke{order:2}
  .fuss .jahrzahl{order:3}
}