/*
 * Die Website-Seiten /, /adherent und /partenaire, neu gebaut am
 * 08.10.2026 — backend § 129. Ein Blatt fuer alle drei, Klassen mit `h-`.
 *
 * Handy zuerst (Richtung „Story"): Vollbild-Foto, Überschrift auf dunklem
 * Verlauf, Kategorien als Kreise, Angebote zum Wischen. Ab 1024 px die
 * ruhige Richtung „Nuit": Schrift links, Collage oder Jackpot-Rad rechts,
 * Angebote als Raster.
 *
 * Drei Regeln, die diese Datei hält:
 *   1. Kein `backdrop-filter`, nirgends. Er kostet auf Mittelklasse-Android
 *      bei jeder Scrollbewegung — daher kam die Trägheit der alten Seite.
 *   2. Keine Animation, die endlos läuft. Jede Bewegung läuft EINMAL (beim
 *      Laden, beim ersten Erscheinen oder auf Tipp) und nur mit JavaScript:
 *      versteckt wird nur unter `.js` oder über `.h-pre`, das allein das
 *      Skript vergibt. Ohne Skript und bei „weniger Bewegung" steht alles.
 *   3. Linien statt Kästen. Ein Rahmen nur dort, wo etwas anklickbar ist.
 *
 * Farben aus fc-tokens.css (CLAUDE.md § 1b), immer mit Rückfall. Violett ist
 * Identität (Eyebrow-Punkt, Kategorie-Ring, Ziffern), Rosé die eine Aktion.
 */

.h-page{
  --h-bg:#0A0910;
  --h-raise:#14121C;
  --h-ink:#F3F1F8;
  --h-mute:#A6A1B8;
  --h-faint:#77728A;
  --h-line:rgba(255,255,255,.09);
  --h-violet:var(--fc-brand-b,#AB68FF);
  --h-grad:var(--fc-brand-grad,linear-gradient(135deg,#667EEA 0%,#AB68FF 100%));
  --h-rose:var(--fc-action,#EC4899);
  --h-gutter:20px;
  color:var(--h-ink);
}
/* `body.pitch-theme` (site-theme.css) legt den violetten Verlauf mit
   200 % Groesse darunter; die Startseite ist dunkel und braucht dafuer
   dieselbe Spezifitaet plus eine Klasse. */
body.pitch-theme.h-page{background:var(--h-bg);background-size:auto}

.h-main{display:block}
.h-wrap{max-width:1180px;margin:0 auto;padding-inline:var(--h-gutter)}
.h-section{padding-block:56px 8px;content-visibility:auto;contain-intrinsic-size:auto 640px}
.h-h2{font-size:clamp(1.6rem,4.6vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;margin:0}
.h-head{display:grid;gap:8px;margin-bottom:22px}
.h-sub{color:var(--h-mute);font-size:.95rem;line-height:1.55;max-width:60ch;margin:0}
.h-sub strong{color:var(--h-ink)}
.h-link{color:var(--h-ink);font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
.h-link:hover{text-decoration-color:var(--h-violet)}

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.h-hero{position:relative;isolation:isolate;overflow:hidden}
.h-eyebrow{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:#E6E2F0;background:rgba(10,9,16,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 11px}
.h-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--h-violet)}
.h-hero__title{margin:0;font-size:clamp(2.6rem,12vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:.92;text-wrap:balance}
.h-hero__title span{display:block}
.h-hero__title span i,.h-phero__title span i{background:linear-gradient(100deg,#9DB0FF,#C99BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hero__lede{margin:0;color:#D6D2E2;font-size:1rem;line-height:1.55;max-width:46ch}
.h-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:4px}
/* Die zwei Store-Knoepfe teilen sich auf dem Telefon die Zeile. Mit ihrer
   eigenen Breite (168 + 165 px) brachen sie unter 345 px um — auf jedem
   360-px-Android, also dem halben Publikum. */
@media (max-width:639px){
  .h-hero__actions .storebar{flex-wrap:nowrap;width:100%;gap:10px}
  .h-hero__actions .storebtn{flex:1 1 0;min-width:0;justify-content:center;padding:0 10px;gap:8px}
  .h-hero__actions .storebtn__kicker{font-size:.58rem;letter-spacing:.01em;white-space:nowrap}
  .h-hero__actions .storebtn__name{font-size:.98rem;white-space:nowrap}
}
.h-ghost{color:var(--h-ink);font-weight:700;font-size:.92rem;text-decoration:none;padding:10px 2px}
.h-ghost:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Plakat-Hero der Startseite — Vorlage: partner/apply.blade.php (.pa-hero).
   Der Grund kommt aus partials/page-hero-bg (Motiv `partner-hero`), das
   Wappen aus partials/brand-ring. Schleier und Maße wie auf der Vorlage:
   links deckend für den Text, ab 60 % frei für Court, Gästehaus und Meer. */
.h-hero--poster{display:flex;align-items:center;min-height:clamp(560px,74vh,820px);padding:96px 0 60px}
.h-hero--poster .hero-photo__bg img{object-position:40% center}
.h-hero--poster .hero-photo__veil{background:
  linear-gradient(96deg,rgba(9,7,22,.86) 0%,rgba(9,7,22,.78) 34%,rgba(11,8,30,.56) 50%,rgba(13,9,36,.24) 68%,rgba(13,9,36,.06) 84%,rgba(13,9,36,.16) 100%),
  linear-gradient(180deg,rgba(10,8,24,.42) 0%,rgba(10,8,24,0) 16%,rgba(10,8,24,0) 62%,rgba(10,8,24,.62) 88%,var(--h-bg) 100%)}
.h-hero__inner{position:relative;z-index:2;width:100%}
.h-hero__copy{display:grid;gap:14px;max-width:720px;justify-items:start}
.h-hero__copy .pa-logo{margin-bottom:4px}
.h-wheel{display:flex;justify-content:center;padding-top:28px}
@media (max-width:720px){
  .h-hero--poster{display:block;min-height:0;padding:0 0 28px}
  .h-hero--poster .hero-photo__bg{position:relative;inset:auto}
  .h-hero--poster .hero-photo__bg img{height:clamp(300px,46vh,420px);object-position:center top}
  .h-hero--poster .hero-photo__veil{top:0;bottom:auto;height:clamp(300px,46vh,420px);
    background:linear-gradient(180deg,rgba(10,8,24,.55) 0%,rgba(10,8,24,.08) 24%,rgba(10,8,24,.12) 56%,rgba(10,8,24,.74) 86%,var(--h-bg) 100%)}
  .h-hero--poster .h-hero__inner{margin-top:clamp(-64px,-9vw,-48px)}
  .h-hero--poster .h-hero__copy{justify-items:center;text-align:center;margin:0 auto}
  .h-hero--poster .h-hero__actions{justify-content:center}
  .h-hero--poster .pa-logo{margin:0 auto 4px}
  .h-hero--poster .h-eyebrow{justify-self:center}
}

/* ── 2 · Zahlen + Kategorien ───────────────────────────────────────────── */
.h-pulse{padding-top:26px}
.h-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-block:1px solid var(--h-line)}
.h-stats div{display:flex;flex-direction:column-reverse;padding:14px 0}
.h-stats div+div{padding-left:16px;border-left:1px solid var(--h-line)}
.h-stats dd{margin:0;font-size:1.9rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.h-stats dt{color:var(--h-mute);font-size:.8rem;margin-top:4px}
.h-cats{list-style:none;margin:20px calc(var(--h-gutter) * -1) 0;padding:0 var(--h-gutter) 6px;display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-cats::-webkit-scrollbar{display:none}
.h-cats li{flex:none;width:70px;display:grid;justify-items:center;gap:6px;font-size:.74rem;color:#CFCADC;text-align:center;scroll-snap-align:start}
.h-cats li{cursor:pointer;-webkit-tap-highlight-color:transparent}
.h-cats__ring{position:relative;display:block;width:70px;height:70px;border-radius:50%;padding:2.5px}
.h-cats__ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#667EEA,#AB68FF,#EC4899,#667EEA)}
.h-cats__ring img{position:relative;display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid var(--h-bg);object-fit:cover;background:var(--h-raise)}

/* ── 3 · Angebote ──────────────────────────────────────────────────────── */
.h-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--h-gutter);
  padding:0 var(--h-gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-rail::-webkit-scrollbar{display:none}
.h-card{position:relative;flex:none;width:min(72vw,260px);aspect-ratio:480/615;border-radius:22px;overflow:hidden;
  scroll-snap-align:start;color:#fff;text-decoration:none;background:var(--h-raise);display:flex;align-items:flex-end}
.h-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.h-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0) 58%)}
.h-card__badge{position:absolute;top:12px;left:12px;z-index:1;font-size:.76rem;font-weight:800;color:#fff;background:var(--h-rose);
  border-radius:999px;padding:4px 9px;font-variant-numeric:tabular-nums}
.h-card__text{position:relative;z-index:1;display:grid;gap:2px;padding:16px}
.h-card__text b{font-size:1.06rem;line-height:1.2}
.h-card__text small{font-size:.8rem;color:#E2DEEE}
.h-card:hover img{transform:scale(1.04)}
.h-card:focus-visible{outline:3px solid var(--h-violet);outline-offset:3px}

/* ── 4 · So funktioniert es ────────────────────────────────────────────── */
.h-how{display:grid;gap:28px}
.h-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:s}
.h-steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:15px 0;border-bottom:1px solid var(--h-line);color:var(--h-mute);font-size:.92rem}
.h-steps li::before{content:counter(s);grid-row:span 2;font-size:1.3rem;font-weight:800;color:var(--h-violet);line-height:1.1}
.h-steps b{color:var(--h-ink);font-size:1rem}
.h-video{min-width:0;display:flex;justify-content:center}
.h-video video{max-width:100%;border-radius:20px}

/* ── 5 · Zwei Türen ────────────────────────────────────────────────────── */
.h-doors{display:grid;gap:14px;margin-top:22px}
.h-door{position:relative;display:flex;align-items:flex-end;min-height:300px;border-radius:24px;overflow:hidden;color:#fff;text-decoration:none;background:var(--h-raise)}
.h-door>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-door::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,16,.92) 8%,rgba(10,9,16,.25) 70%)}
.h-door__text{position:relative;z-index:1;display:grid;gap:6px;padding:20px}
.h-door__text small{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#CBB8FF}
.h-door__text b{font-size:1.4rem;letter-spacing:-.02em;line-height:1.15}
.h-door__text>span{color:#D6D2E2;font-size:.9rem;max-width:42ch}
.h-door__text em{font-style:normal;font-weight:700;color:#fff}
.h-door__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.h-door__links a{color:#fff;text-decoration:none}
.h-door .btn-login{font-size:.82rem;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(10,9,16,.4)}
a.h-door:hover em,.h-door__links a:hover em{text-decoration:underline;text-underline-offset:4px}

/* ── 6 · Tarife ────────────────────────────────────────────────────────── */
.h-plans{display:grid;gap:10px}
.h-plan{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:16px 18px;border-radius:18px;
  border:1px solid var(--h-line);background:var(--h-raise);color:var(--h-ink);text-decoration:none;transition:border-color .2s ease}
.h-plan:hover{border-color:rgba(255,255,255,.28)}
.h-plan--featured{border-color:rgba(171,104,255,.5)}
.h-plan__name b{display:block;font-size:1.06rem}
.h-plan__name small{color:var(--h-mute);font-size:.78rem}
.h-plan__price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.h-plan__price s{display:block;font-size:.8rem;color:var(--h-faint)}
.h-plan__price span{font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
.h-plans__foot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:16px 0 0;font-size:.8rem;color:var(--h-mute)}
.h-plans__foot span a{color:var(--h-mute)}

/* ── 7 · FAQ ───────────────────────────────────────────────────────────── */
.h-faq{display:grid;gap:18px}
.h-faq details{border-bottom:1px solid var(--h-line)}
.h-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:17px 0;font-weight:700;font-size:1rem}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--h-mute);transition:transform .2s ease}
.h-faq details[open] summary::after{transform:rotate(45deg)}
.h-faq summary:focus-visible{outline:2px solid var(--h-violet);outline-offset:4px;border-radius:6px}
.h-faq details p{margin:0 0 18px;color:var(--h-mute);line-height:1.6;max-width:68ch}
.h-faq details p strong{color:var(--h-ink)}

/* ── 8 · Transparenz ───────────────────────────────────────────────────── */
.h-trust{display:grid;gap:0;border-top:1px solid var(--h-line)}
.h-trust>div{padding:18px 0;border-bottom:1px solid var(--h-line)}
.h-trust h3{margin:0 0 8px;font-size:1rem;font-weight:800}
.h-trust p,.h-trust li{color:var(--h-mute);font-size:.9rem;line-height:1.6}
.h-trust p{margin:0}
.h-trust ul{margin:0;padding-left:1.1rem;display:grid;gap:3px}
.h-trust li strong{color:var(--h-ink);font-weight:700}
.h-trust__links{list-style:none;padding:0!important;display:flex!important;flex-wrap:wrap;gap:8px!important}
.h-trust__links a{display:inline-block;color:var(--h-ink);font-size:.86rem;font-weight:700;text-decoration:none;padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.h-trust__links a:hover{border-color:var(--h-violet)}

/* ── 9 · Kontakt + Download ────────────────────────────────────────────── */
.h-end{padding-bottom:64px}
.h-end__grid{display:grid;gap:40px}
.h-contact{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
.h-btn-quiet{font:inherit;font-weight:700;font-size:.92rem;color:var(--h-ink);background:var(--h-raise);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:11px 18px;cursor:pointer}
.h-btn-quiet:hover{border-color:rgba(255,255,255,.4)}
.h-download{display:grid;gap:18px;align-content:start}

/* ── Hero mit Foto-Grund (/adherent, /partenaire) ─────────────────────── *
 * Der Grund kommt unverändert aus partials/page-hero-bg und site-theme.css
 * (.hero-photo, __bg, __veil) — der Betreiber will diese Motive behalten.
 * Hier liegt nur, was DARÜBER steht. */
.h-phero{display:flex;align-items:flex-end;min-height:min(92svh,820px)}
.h-phero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:100%;padding-top:120px;padding-bottom:26px}
.h-phero__copy{display:grid;gap:14px;align-content:end}
.h-phero__title{margin:0;font-size:clamp(2.1rem,9vw,4rem);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}

.h-phero__side{display:none;min-width:0}
.h-proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;font-weight:600;color:#E6E2F0}
.h-proof li{display:inline-flex;align-items:center;gap:7px}
.h-proof li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--h-violet)}
.h-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--h-rose);
  color:#fff;font-weight:800;font-size:1rem;text-decoration:none}
.h-cta:hover{filter:brightness(1.06)}
.h-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.h-phero .h-btn-quiet{display:inline-flex;align-items:center;min-height:50px;text-decoration:none;background:rgba(10,9,16,.55)}

/* ── Spar-Rechner ──────────────────────────────────────────────────────── */
.h-calc__grid{display:grid;gap:22px}
.h-calc__rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--h-line)}
.h-calc__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--h-line)}
.h-calc__what{display:grid;gap:2px;min-width:0}
.h-calc__what b{font-size:1rem}
.h-calc__what small{color:var(--h-mute);font-size:.8rem;font-variant-numeric:tabular-nums}
.h-calc__step{display:grid;grid-template-columns:36px 30px 36px;align-items:center;justify-items:center;row-gap:2px;flex:none}
.h-calc__step button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:var(--h-raise);color:var(--h-ink);
  font:700 1.1rem/1 inherit;cursor:pointer}
.h-calc__step button:hover{border-color:var(--h-violet)}
.h-calc__step button:focus-visible{outline:2px solid var(--h-violet);outline-offset:2px}
.h-calc__step output{font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}
.h-calc__step small{grid-column:1/-1;color:var(--h-faint);font-size:.7rem;white-space:nowrap}
.h-calc__plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}
.h-calc__plan{display:grid;gap:6px;padding:14px 12px;border-radius:18px;border:1px solid var(--h-line);background:var(--h-raise);font-size:.78rem;color:var(--h-mute)}
.h-calc__plan.is-best{border-color:rgba(171,104,255,.6);box-shadow:inset 0 0 0 1px rgba(171,104,255,.35)}
.h-calc__pname{color:var(--h-ink);font-weight:800;font-size:1rem;display:grid}
.h-calc__pname small{color:var(--h-faint);font-weight:600;font-size:.7rem}
.h-calc__line b,.h-calc__net b{display:block;color:var(--h-ink);font-size:1rem;font-variant-numeric:tabular-nums}
.h-calc__line b,.h-calc__net b{white-space:nowrap}
.h-calc__net b{font-size:clamp(1.02rem,4.4vw,1.3rem);letter-spacing:-.02em}
.h-calc__plan.is-best .h-calc__net b{color:#D9C2FF}
.h-calc__fine{margin:16px 0 0;color:var(--h-faint);font-size:.76rem;line-height:1.5;max-width:80ch}

/* ── Funktionsliste ────────────────────────────────────────────────────── */
.h-feat{display:grid;gap:18px}
.h-feat__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--h-line)}
.h-feat__list li{display:grid;gap:3px;padding:16px 0 16px 22px;border-bottom:1px solid var(--h-line);color:var(--h-mute);font-size:.92rem;line-height:1.55;position:relative}
.h-feat__list li::before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;border-radius:2px;background:var(--h-violet)}
.h-feat__list b{color:var(--h-ink);font-size:1rem}

/* ── Partner-Logos: gleich viele je Reihe (4 · 6 · 8) ──────────────────── */
.h-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.h-logos li{aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--h-raise);border:1px solid var(--h-line)}
.h-logos img{display:block;width:100%;height:100%;object-fit:cover}

/* ── Konsolen-Bilder ───────────────────────────────────────────────────── */
.h-shot{margin:0;min-width:0}
.h-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);background:#fff}
.h-shot figcaption{display:grid;gap:2px;margin-top:10px;color:var(--h-mute);font-size:.86rem;line-height:1.5}
.h-shot figcaption b{color:var(--h-ink);font-size:1rem}
.h-shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--h-gutter);
  padding:0 var(--h-gutter) 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-shots::-webkit-scrollbar{display:none}
.h-shots .h-shot{flex:none;width:min(86vw,520px);scroll-snap-align:start}

/* ── Transparenz: vier Siegel zum Aufklappen ───────────────────────────── */
.h-seals{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.h-seal{background:var(--h-raise);border:1px solid var(--h-line);border-radius:18px;overflow:hidden}
.h-seal summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:16px}
.h-seal summary::-webkit-details-marker{display:none}
.h-seal summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--h-mute);transition:transform .25s ease}
.h-seal[open] summary::after{transform:rotate(45deg)}
.h-seal summary:focus-visible{outline:2px solid var(--h-violet);outline-offset:-2px;border-radius:18px}
.h-seal summary b{display:block;font-size:1rem}
.h-seal summary small{color:var(--h-mute);font-size:.8rem}
.h-seal__ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(171,104,255,.14);color:#CDB3FF}
.h-seal__ic svg{width:22px;height:22px}
/* Aufgeklappt über die ganze Breite der Box, ab links — nicht eingerückt
   unter den Titel; jeder Eintrag mit sichtbarem Punkt (Betreiber, 08.10.). */
.h-seal__body{margin:0 16px;padding:4px 0 18px;border-top:1px solid var(--h-line);color:var(--h-mute);font-size:.88rem;line-height:1.6}
.h-seal__body p{margin:12px 0 8px}
.h-seal__body ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.h-seal__body ul:not(.h-trust__links) li{position:relative;padding-left:16px}
.h-seal__body ul:not(.h-trust__links) li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--h-violet)}
.h-seal__body strong{color:var(--h-ink)}
.h-seal__body .h-trust__links{padding:0}
.js .h-seal[open] .h-seal__body{animation:h-drop .35s cubic-bezier(.2,.7,.2,1)}

/* ── /analyseur (§ 151) ────────────────────────────────────────────────── *
 * Telefon-Bildschirme statt Konsolen-Bilder, die Kaufkarte des Analyseurs,
 * Formeln und Start von Analyseur Pro. Sonst dieselben Bausteine. */
.h-shots.a-phones .h-shot{width:min(62vw,250px)}
.a-phones .h-shot img,.a-phone img{border-radius:30px;border:5px solid #1E1B2A;background:#0B0A12}
.a-phone{margin:0 auto;width:min(70vw,300px)}
.a-phone img{display:block;width:100%;height:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.a-offer{display:grid;gap:16px;padding:22px;border-radius:22px;background:var(--h-raise);border:1px solid rgba(171,104,255,.45)}
.a-offer__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0}
.a-offer__price b{font-size:clamp(2.2rem,8vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.a-offer__price span{color:var(--h-mute);font-size:.95rem}
.a-offer__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--h-mute);font-size:.92rem;line-height:1.5}
.a-offer__list li{position:relative;padding-left:22px}
.a-offer__list li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;border-left:2px solid var(--h-violet);border-bottom:2px solid var(--h-violet);transform:rotate(-45deg)}
.a-offer__hint{margin:0;color:var(--h-faint);font-size:.8rem}
.a-h3{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.a-pro-buy{display:grid;gap:8px;margin-top:34px}
.a-pro-start{margin-top:30px}
.a-pro-cta{display:grid;gap:14px;align-content:start}
.a-quiet{display:inline-flex;align-items:center;min-height:50px;text-decoration:none}
.h-plan__price small{display:block;font-size:.74rem;font-weight:600;color:var(--h-faint)}
.a-split{display:grid;gap:30px}
/* Eine Spalte, die schrumpfen darf: sonst setzt die Mindestbreite der
   Store-Knöpfe die Spalte breiter als ein 360-px-Telefon. */
.a-feat{grid-template-columns:minmax(0,1fr)}
/* Die zwei Store-Knöpfe teilen sich die Zeile, solange jeder 130 px hat —
   auf schmaleren Telefonen stehen sie untereinander, nie gequetscht. */
@media (max-width:639px){
  .a-offer{padding:18px 16px}
  .a-offer .storebar{flex-wrap:wrap;width:100%;gap:10px}
  .a-offer .storebtn{flex:1 1 130px;min-width:0;justify-content:center;padding:0 10px;gap:8px}
  .a-offer .storebtn__kicker{font-size:.58rem;letter-spacing:.01em;white-space:nowrap}
  .a-offer .storebtn__name{font-size:.98rem;white-space:nowrap}
}
@media (max-width:720px){
  .h-hero--poster .h-proof{justify-content:center}
}
@media (min-width:1024px){
  .h-shots.a-phones{grid-template-columns:repeat(3,minmax(0,260px));justify-content:center;gap:48px}
  .a-split{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}
  .h-how.a-pro-start{align-items:start}
}

/* ── Bewegung (einmal, nur mit Skript) ────────────────────────────────────
 * 1 Zahlen zählen hoch          site-pages.js, .h-stats dd
 * 2 Überschrift Wort für Wort   .js .h-words i
 * 3 Karten/Zeilen schieben auf  .h-pre → .h-in (vom Skript vergeben)
 * 4 Kategorie-Ring dreht        .h-cats li.is-spin
 * 5 Rabatt stempelt auf         .h-card__badge beim Erscheinen der Karte
 * 6 Fotos gleiten ins Bild      Karten-, Tür- und Hero-Foto von 115 % auf 100 % */
.h-words i{font-style:normal}
.js .h-words i{display:inline-block;animation:h-word .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--w,0) * 70ms + 80ms)}
.h-pre{opacity:0;transform:translateY(18px)}
.h-in{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.h-card.h-pre img,.h-door.h-pre>img{transform:scale(1.15)}
.h-card.h-in img,.h-door.h-in>img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.h-card.h-pre .h-card__badge{transform:scale(0)}
.h-card.h-in .h-card__badge{transition:transform .45s cubic-bezier(.3,1.6,.5,1) .35s}
.js .h-hero--poster .hero-photo__bg img{animation:h-zoom 1.4s cubic-bezier(.2,.7,.2,1) both}
.h-cats li.is-spin .h-cats__ring::before{animation:h-spin .8s cubic-bezier(.2,.7,.2,1)}
.h-cats li.is-spin .h-cats__ring{animation:h-pop .8s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.h-cats li:hover .h-cats__ring::before{animation:h-spin .8s cubic-bezier(.2,.7,.2,1)}}
@keyframes h-word{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}}
@keyframes h-zoom{from{transform:scale(1.12)}}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-pop{50%{transform:scale(1.08)}}
@keyframes h-drop{from{opacity:0;transform:translateY(-6px)}}

/* ── Die eine Aktion unten (nur Telefon) ───────────────────────────────── */
/* Safari auf dem iPhone färbt seine untere Leiste nach dem festen Element
   am Rand. Ein Verlauf ohne eigene Grundfarbe ließ es den Rosé-Knopf nehmen
   — die Leiste sprang auf Pink, sobald der Balken kam (08.10.2026, Betreiber).
   Darum trägt der Balken die Seitenfarbe deckend; der weiche Übergang nach
   oben liegt in ::before, außerhalb der Fläche, die Safari ausliest. */
.h-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background-color:var(--h-bg,#0A0910);transform:translateY(110%);transition:transform .3s ease;pointer-events:none}
.h-dock::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;pointer-events:none;
  background:linear-gradient(to top,var(--h-bg,#0A0910),rgba(10,9,16,0))}
.h-dock.is-on{transform:none;pointer-events:auto}
.h-dock__btn{display:flex;justify-content:center;align-items:center;min-height:50px;border-radius:999px;background:var(--h-rose);color:#fff;
  font-weight:800;font-size:1rem;text-decoration:none}
.h-dock__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (min-width:640px){
  .h-page{--h-gutter:28px}
  .h-doors{grid-template-columns:1fr 1fr}
  .h-plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-trust{grid-template-columns:1fr 1fr;column-gap:32px}
  .h-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .h-seals{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  /* Ab Tablet ein Raster statt Wischen: zwei Reihen zu je sechs, genau
     untereinander — nie 8 oben und 4 unten. */
  .h-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 12px;margin:24px 0 0;padding:0;overflow:visible}
  .h-cats li{width:auto}
}
@media (min-width:1180px){
  .h-cats{grid-template-columns:repeat(12,minmax(0,1fr))}
}

/* ── Desktop: Richtung „Nuit" ──────────────────────────────────────────── */
@media (min-width:1024px){
  .h-page{--h-gutter:40px}
  .h-hero__title{font-size:clamp(3rem,5vw,4.4rem)}
  .h-hero__lede{font-size:1.08rem;color:var(--h-mute)}
  .h-pulse{display:grid;gap:26px;padding-top:30px}
  .h-stats{border:0;gap:0}
  .h-stats div{padding:6px 28px 6px 0}
  .h-stats div+div{padding-left:28px}
  .h-stats dd{font-size:2.3rem}

  .h-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible;max-width:1180px;margin:0 auto;padding:0 var(--h-gutter)}
  .h-card{width:auto;aspect-ratio:4/5}
  .h-how{grid-template-columns:1fr 1fr;align-items:center;gap:56px}
  .h-door{min-height:360px}
  .h-faq{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .h-trust{grid-template-columns:repeat(4,1fr);border-top:0}
  .h-trust>div{border-bottom:0;border-top:1px solid var(--h-line)}
  .h-end__grid{grid-template-columns:1fr 1fr;gap:56px}
  .h-dock{display:none}
  .h-phero{min-height:640px;align-items:center}
  .h-phero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:48px;padding-top:130px;padding-bottom:60px}
  .h-phero__side{display:block}
  .h-phero__title{font-size:clamp(2.8rem,4.6vw,4.2rem)}
  .h-shot--hero img{transform:perspective(1400px) rotateY(-8deg);transform-origin:left center}
  .h-calc__grid{grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
  .h-feat{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .h-feat--solo{grid-template-columns:1fr}
  .h-feat--solo .h-feat__list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:0}
  .h-feat--solo .h-feat__list li{border-top:1px solid var(--h-line);border-bottom:0}
  .h-logos{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}
  .h-seals{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;max-width:1180px;margin:0 auto;padding:0 var(--h-gutter) 24px}
  .h-shots .h-shot{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .h-card img,.h-dock,.h-faq summary::after,.h-seal summary::after{transition:none}
  .h-card:hover img{transform:none}
  .js .h-words i,.js .h-hero--poster .hero-photo__bg img,.js .h-seal[open] .h-seal__body,
  .h-cats li .h-cats__ring,.h-cats li .h-cats__ring::before{animation:none!important}
  .h-pre{opacity:1;transform:none}
  .h-card.h-pre img,.h-door.h-pre>img,.h-card.h-pre .h-card__badge{transform:none}
}

/* ══ Stadt-Seiten (/sousse, /tunis …, SEO 11.10.2026) ══════════════════
   Zeilen statt Hochkant-Karten: die Titelbilder sind oft Logos oder Flyer,
   ein kleines Quadrat verträgt beides. Rosé nur am Rabatt, wie auf .h-card. */
.c-hero.h-hero--poster{min-height:clamp(520px,66vh,720px)}
.c-crumbs{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--h-mute)}
.c-crumbs a{color:var(--h-mute);text-decoration:none}
.c-crumbs a:hover{color:var(--h-ink);text-decoration:underline;text-underline-offset:3px}
.c-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c-chips a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(10,9,16,.55);color:var(--h-ink);font-size:.86rem;font-weight:700;text-decoration:none}
.c-chips a small{color:var(--h-faint);font-weight:700}
.c-chips a:hover{border-color:var(--h-violet)}
.c-group{padding-block:36px 0}
.c-group .h-h2{font-size:clamp(1.35rem,3.6vw,1.8rem)}
.c-group .h-head{margin-bottom:10px}
.c-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
.c-offer{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--h-line);
  color:var(--h-ink);text-decoration:none}
.c-offer__img{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--h-raise)}
.c-offer__body{display:grid;gap:3px;min-width:0}
.c-offer__body b{font-size:1rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-offer__body small{color:var(--h-mute);font-size:.84rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-offer__price{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:.84rem}
.c-offer__price s{color:var(--h-faint)}
.c-offer__price strong{color:var(--h-ink)}
.c-offer__price em{font-style:normal;color:var(--h-faint)}
.c-offer__pct{font-size:.8rem;font-weight:800;color:#fff;background:var(--h-rose);border-radius:999px;padding:5px 10px;white-space:nowrap}
.c-offer:hover b{text-decoration:underline;text-underline-offset:3px}
.c-offer:focus-visible{outline:3px solid var(--h-violet);outline-offset:3px;border-radius:12px}
.c-small{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.c-small .c-list{grid-template-columns:minmax(0,1fr)!important}
.c-cities{align-self:start}
.c-cities ul{list-style:none;margin:18px 0 0;padding:0}
.c-cities li a{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--h-line);color:var(--h-ink);font-weight:700;text-decoration:none}
.c-cities li a small{color:var(--h-faint);font-weight:600}
.c-cities li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (min-width:720px){
  .c-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-offer{grid-template-columns:88px minmax(0,1fr) auto}
  .c-offer__img{width:88px;height:88px;border-radius:18px}
}
@media (min-width:720px){
  .c-small{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .c-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-small{grid-template-columns:repeat(3,minmax(0,1fr))}
}