/* ═══════════════════════════════════════════════════════════════════
   Vantura Dubai — vantura-dubai.com
   Marke: Anthrazit + Gold, wie auf den Instagram-Covern. Das strukturelle
   Motiv dort ist ein goldener Balken links neben der Zeile; auf dieser
   Seite wird daraus eine durchlaufende Linie, an der alle Abschnitte
   hängen. Wer von Instagram kommt, erkennt dieselbe Sprache wieder.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Montserrat";src:url("fonts/montserrat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Brittany traegt ausschliesslich den Vornamen im Personenabschnitt.
   ⚠ Liegt nur als TTF vor, nicht als woff2 (59 KB statt geschaetzt 30).
      Alle aktuellen Browser lesen TTF; wer die Datei verkleinern will,
      konvertiert sie mit woff2_compress und tauscht die Zeile.
   ⚠ Die Schrift kennt KEINE Umlaute, kein Eszett und keine Akzente. Sie
      darf deshalb nur fuer "Thomas" verwendet werden, nie fuer Fliesstext. */
@font-face{font-family:"Brittany";src:url("fonts/Brittany.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#121212;
  --panel:#1B1B1B;
  --line:#2E2E2E;
  --gold:#E6A212;
  --gold-dim:#8A6410;
  --text:#EDEFF2;
  --muted:#9CA1A8;
  --text-soft:#C8CCD2;
  --text-faint:#6E747B;
  --tick:#5A5F66;
  --paper:#F5F2EC;
  --paper-alt:#ECE7DE;
  --sans:"Poppins","Segoe UI",system-ui,sans-serif;
  --disp:"Montserrat","Segoe UI",system-ui,sans-serif;
  --serif:"Cormorant Garamond","Bodoni MT",Georgia,serif;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --spine-x:clamp(1.25rem,5vw,4.5rem);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:clamp(1rem,.42vw + .92rem,1.09rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;margin:0}
p{margin:0}

.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#111;padding:.7rem 1.2rem;font-weight:600}
.skiplink:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Kopfzeile ─────────────────────────────────────────────────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--pad);
  transition:background .35s ease,border-color .35s ease,padding .35s ease;
  border-bottom:1px solid transparent;
}
.topbar.is-solid{background:rgba(18,18,18,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line);padding-top:.7rem;padding-bottom:.7rem}
.topbar__brand{display:block;flex:none}
.topbar__brand img{width:clamp(112px,12vw,150px);height:auto}
.topbar__nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.86rem;letter-spacing:.02em}
.topbar__nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.topbar__nav a:hover{color:var(--text)}
@media (max-width:860px){.topbar__nav{display:none}.topbar .btn--small{margin-left:auto}}

/* ── Schaltflächen ─────────────────────────────────────────────── */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.94rem;
  padding:.95rem 1.7rem;background:var(--gold);color:#141414;
  border:1px solid var(--gold);transition:background .2s,color .2s,transform .2s;
}
.btn:hover{background:#F4B22B;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text);border-color:#4A4A4A}
.btn--ghost:hover{background:transparent;border-color:var(--gold);color:var(--gold)}
.btn--small{padding:.6rem 1.15rem;font-size:.84rem;flex:none}
.btn--dark{background:#141414;color:var(--gold);border-color:#141414}
.btn--dark:hover{background:#000}
.btn--outline-dark{background:transparent;color:#141414;border-color:rgba(20,20,20,.45)}
.btn--outline-dark:hover{background:rgba(20,20,20,.08);border-color:#141414}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.cta-row--center{justify-content:center}

/* ── Augenbrauen-Zeile: das Coverdetail ────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.21em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;
  position:relative;padding-left:1.15rem;
}
.eyebrow::before{content:"";position:absolute;left:0;top:.16em;width:3px;height:1.05em;background:var(--gold)}
.eyebrow--dark{color:#3A2A05}
.eyebrow--dark::before{background:#3A2A05}

/* ── Hero ──────────────────────────────────────────────────────── */
/* Der Text steht mittig, nicht unten. Bei bodenbündigem Satz entsteht über der
   Headline ein totes Feld von halber Bildschirmhöhe — das war der Eindruck von
   „zu viel Leerraum oben". Die Höhe ist zusätzlich gedeckelt, damit der Hero auf
   großen Bildschirmen nicht ins Absurde wächst. */
.hero{
  position:relative;min-height:min(94svh,900px);display:flex;align-items:center;
  padding:clamp(6.5rem,13vh,9rem) var(--pad) clamp(3rem,7vh,5rem);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.72) contrast(1.04) brightness(.92)}
/* Das Bild ist ein Tagesrendering mit hellem Himmel. Der Verlauf dunkelt nur
   unten und oben ab — dort steht Text —, die Skyline in der Mitte bleibt sichtbar.
   Zu viel Abdunklung und die Seite verliert genau das, wofür das Bild da ist. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 78% 14%,rgba(230,162,18,.20),transparent 56%),
    linear-gradient(to top,var(--ink) 2%,rgba(18,18,18,.94) 26%,rgba(18,18,18,.60) 52%,rgba(18,18,18,.20) 74%,rgba(18,18,18,.55) 100%);
}
.hero__inner{position:relative;z-index:1;max-width:var(--maxw);width:100%;margin:0 auto}
/* Die Headline ist auf drei Zeilen gesetzt und soll drei bleiben. Die längste
   Zeile hat 22 Zeichen — danach richtet sich der Maximalgrad, sonst bricht sie
   ein viertes Mal um und der Satzrhythmus geht verloren. */
.hero h1{
  font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.02;margin:0 0 1.6rem;max-width:26ch;
}
.hero h1 b{color:var(--gold);font-weight:800}
.lede{max-width:52ch;color:#D5D9DE;font-size:clamp(1.02rem,.5vw + .94rem,1.22rem)}
.hero__micro{margin-top:1.1rem;font-size:.82rem;letter-spacing:.04em;color:#8A9098}
.hero__scroll{
  position:absolute;left:var(--pad);bottom:1.4rem;z-index:1;margin:0;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#6E747B;
}
@media (max-width:700px){.hero__scroll{display:none}}

/* Auftritt beim Laden */
.hero .eyebrow,.hero h1,.hero .lede,.hero .cta-row,.hero__micro{animation:rise .9s cubic-bezier(.16,.84,.44,1) both}
.hero h1{animation-delay:.08s}
.hero .lede{animation-delay:.18s}
.hero .cta-row{animation-delay:.28s}
.hero__micro{animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ── Die durchlaufende Linie ───────────────────────────────────── */
/* Sie liegt exakt auf der linken Textkante, damit der goldene Balken jeder
   Augenbrauen-Zeile wie eine Verdickung der Linie wirkt — dasselbe Motiv wie
   auf den Covern. z-index, weil die dunklen Abschnitte sonst darüber malen. */
.spine-wrap{position:relative}
.spine{
  position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:3;
  left:max(14px,calc(max(var(--pad),(100% - var(--maxw)) / 2) - 30px));
}
.spine__fill{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top center;will-change:transform}
@media (max-width:700px){.spine{display:none}}

/* ── Abschnitte ────────────────────────────────────────────────── */
/* Die Inhaltsspalte entsteht über das Innenmaß, nicht über automatische
   Ränder an den Kindern — sonst bekommt jedes Element mit eigener Maximalbreite
   seine eigene linke Kante, und der Abschnitt franst aus. */
.band{
  padding-block:clamp(4.5rem,11vh,8.5rem);
  padding-inline:max(var(--pad),calc((100% - var(--maxw)) / 2));
  position:relative;
}
.band--panel{background:var(--panel)}
.band h2{font-size:clamp(1.75rem,3.9vw,3.05rem);line-height:1.06;margin:0 0 1.5rem;max-width:20ch}
/* Die Unterseiten haben keinen Bildaufmacher. Ihre Hauptüberschrift steht in
   einem gewöhnlichen Band und braucht deshalb dieselben Maße wie eine h2,
   sonst fällt sie auf die Browservorgabe zurück. */
.band h1{font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.05;margin:0 0 1.5rem;max-width:20ch}
/* Im Aufmacher einer Unterseite folgt auf den Vorspann nichts mehr. Der
   übliche Abstand darunter wäre dort nur Leere. */
.band--opener .band__lede{margin-bottom:0}
/* ⚠ Die Kopfzeile liegt fest über der Seite. Auf der Startseite steht darunter
   der Hero und fängt sie ab; auf einer Unterseite beginnt sofort ein Band, und
   die Augenbraue lief in die Wortmarke. Der Aufmacher braucht deshalb eigenes
   Kopfpolster. */
.band--opener{padding-top:clamp(7.5rem,14vh,11rem)}

/* ══ SPANIEN: die Serife statt der Grotesk ═══════════════════════════
   Cormorant gehört zum Haus (Projektnamen im Reel, Überschriften im
   Exposé) und ist dort als Ausgleich gegen die Montserrat gedacht. An der
   Costa Blanca wird zum Selbstnutzen gekauft, nicht gerechnet; Versalien
   in Montserrat 800 lesen sich dafür zu hart. Gemischte Schreibung, kein
   text-transform. Gilt nur für diesen einen Aufmacher. */
.band--warm h1{
  font-family:var(--serif);
  text-transform:none;font-weight:400;letter-spacing:0;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.04;max-width:24ch;
}
/* ⚠ Von Cormorant liegt nur der Schnitt 400 vor. Ein <b> würde der Browser
   künstlich fett rechnen, was bei einer Serife unsauber aussieht. Die
   Hervorhebung läuft deshalb allein über die Farbe. */
.band--warm h1 b{font-weight:400;color:var(--gold)}
.band--warm .band__lede{max-width:56ch}
/* Nur h1: In den h2 der Startseite ist <b> bewusst nicht farbig, das bleibt so. */
.band h1 b{color:var(--gold);font-weight:800}
/* Rückweg zur Startseite, sitzt in der Augenbraue über der Überschrift */
.zurueck{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.zurueck:hover{color:var(--text)}
.band__lede{max-width:60ch;color:var(--muted);margin-bottom:3.2rem}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.44,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.sticky{animation:none}}

/* ── Rolle: zwei Spalten ───────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:800px){.split{grid-template-columns:1fr}}
.split__col{border-top:1px solid var(--line);padding-top:1.6rem}
.split__col--partner{border-top-color:var(--gold-dim)}
.split__head{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;margin:0 0 1.3rem}
.split__col--partner .split__head{color:var(--gold)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--text-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.62rem;height:1px;background:var(--tick)}
.ticks--gold li::before{background:var(--gold)}

/* ── Die Zahlungsleiter ────────────────────────────────────────── */
.ladder{
  list-style:none;margin:0 0 3.5rem;padding:0;
  display:grid;grid-template-columns:repeat(var(--steps,6),1fr);gap:0;
  border-top:1px solid var(--line);
}
/* Zwischenüberschrift für die beiden Kaufwege und die zwei Kostentabellen */
.track__head{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:.8rem;color:var(--gold);margin:0 0 1.4rem;
}
.track__head--second{margin-top:3.4rem}
@media (max-width:960px){.ladder{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.ladder{grid-template-columns:1fr;border-top:none}}
.ladder__step{
  position:relative;padding:2.1rem 1.2rem 1.9rem 0;
  opacity:.34;transition:opacity .55s ease;
}
.ladder__step.is-lit{opacity:1}
.ladder__step::before{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--gold);
  transition:width .6s cubic-bezier(.16,.84,.44,1);
}
.ladder__step.is-lit::before{width:100%}
/* ══ LEITER AUF DEM TELEFON: WISCHEN STATT STAPELN ═════════════════
   Sieben untereinander gestapelte Schritte waren 1.140 px hoch und damit
   über die Hälfte des ganzen Abschnitts. Waagrecht bleibt eine Kartenhöhe
   stehen — und es ist dieselbe Leserichtung wie auf dem Desktop, wo die
   Leiter ohnehin waagrecht läuft. Der Ablauf ist eine Abfolge; wischen
   entspricht ihr besser als scrollen. */
@media (max-width:620px){
  .ladder{
    grid-template-columns:repeat(var(--steps,6),66%);
    border-top:1px solid var(--line);
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:1.4rem;margin-bottom:.6rem;padding-bottom:.6rem;
    scrollbar-width:thin;
  }
  .ladder__step{
    scroll-snap-align:start;
    padding:1.35rem 0 1.1rem;border-left:none;
    opacity:1;   /* waagrecht liegen alle im Bild — Abdunkeln ergibt hier keinen Sinn */
  }
  .ladder__step::before{left:0;top:-1px;width:100%;height:2px}
  .ladder__step.is-lit::before{width:100%;height:2px}
  .ladder p{padding-right:0}
}
.ladder__hint{
  display:none;margin:0 0 2.4rem;font-size:.78rem;letter-spacing:.06em;color:var(--text-faint);
}
@media (max-width:620px){.ladder__hint{display:block}}
.ladder__num{
  display:block;font-family:var(--disp);font-weight:800;font-size:.78rem;
  letter-spacing:.14em;color:var(--gold);margin-bottom:.7rem;
}
.ladder h3{font-size:1.02rem;letter-spacing:.01em;margin:0 0 .5rem}
.ladder p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0;padding-right:.6rem}

.pull{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.6rem;max-width:64ch}
.pull__label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem;font-weight:600}
.pull__text{margin:0;color:var(--text-soft)}
.pull__text b{color:var(--text);font-weight:600}

/* ── Kostentabelle ─────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;margin-bottom:3.2rem}
.costs{width:100%;border-collapse:collapse;font-size:1rem;min-width:min(100%,420px)}
.costs th,.costs td{text-align:left;padding:1.15rem 1rem 1.15rem 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.costs th{font-weight:400;color:var(--text-soft)}
.costs th span{display:block;font-size:.78rem;color:var(--text-faint);letter-spacing:.02em}
.costs td{font-family:var(--disp);font-weight:600;color:var(--gold);white-space:nowrap;text-align:right;padding-right:0}
.costs tr:last-child th,.costs tr:last-child td{border-bottom:none}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem)}
@media (max-width:860px){.notes{grid-template-columns:1fr}}
/* Zwei Karten nebeneinander statt drei: für die beiden weiteren Märkte, die
   auf eigenen Unterseiten liegen und hier nur angerissen werden. */
.notes--zwei{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.notes--zwei{grid-template-columns:1fr}}
.note__more{margin-top:1rem !important}
.note__more a{color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.note{border-top:1px solid var(--line);padding-top:1.3rem}
.note p{font-size:.93rem;line-height:1.65;color:var(--muted);margin:0}
.note b{color:var(--text-soft);font-weight:600}
.note__head{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--text)!important;margin:0 0 .7rem!important}

/* ── Projekte ──────────────────────────────────────────────────── */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.5vw,2rem)}
@media (max-width:860px){.projects{grid-template-columns:1fr;max-width:26rem}}
.project__img{overflow:hidden;background:#111;margin-bottom:1.2rem}
.project__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.16,.84,.44,1);filter:saturate(.85)}
.project:hover .project__img img{transform:scale(1.045)}
/* Querformat für die Marktseiten. Das Portalmaterial liegt im Seitenverhältnis
   3:2 vor; im Hochformat müsste es beschnitten und vergrößert werden, und bei
   668 px Quellbreite bleibt dafür kein Spielraum. Quer bleiben die Bilder
   unter ihrer Originalgröße und damit scharf. */
.projects--quer .project__img img{aspect-ratio:3/2}
.project__tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .55rem;font-weight:600}
.project__name{font-family:var(--serif);font-weight:400;font-size:1.85rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.1;margin:0 0 .3rem}
.project__dev{font-size:.85rem;color:var(--muted);margin:0 0 .7rem}
.project__note{font-size:.9rem;color:var(--text-soft);margin:0}

/* ── Partner ───────────────────────────────────────────────────── */
.partner{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:800px){.partner{grid-template-columns:1fr}}
.partner__text{max-width:62ch;display:grid;gap:1.25rem;color:#C8CCD2}
.partner__link a{color:var(--gold);text-underline-offset:.28em;text-decoration-thickness:1px}
.partner__seal{text-align:center;border:1px solid var(--line);padding:2rem 2.6rem}
.partner__seal img{margin:0 auto .9rem;opacity:.8;width:72px;height:auto}
.partner__seal p{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:0}

/* ── Person ────────────────────────────────────────────────────── */
.person{display:grid;grid-template-columns:minmax(0,.72fr) 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
@media (max-width:860px){.person{grid-template-columns:1fr}}
/* Freigestelltes Porträt auf dem dunklen Grund, unten bündig — dieselbe
   Behandlung wie auf den Covern. Ein Foto mit weißem Studiogrund würde hier
   ein helles Rechteck in die Seite schlagen. Der warme Schein dahinter ist
   derselbe Radialverlauf, der auch die Cover trägt. */
.person__img{position:relative;display:flex;align-items:flex-end;min-height:clamp(300px,42vw,440px)}
.person__img::before{
  content:"";position:absolute;left:50%;top:8%;translate:-50% 0;
  width:112%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(230,162,18,.15),transparent 62%);
}
/* Auf Brusthöhe beschnitten: von 820×1230 bleiben die oberen 760 px — Kopf,
   Schultern, Brust. Die verschränkten Hände und die Knie fallen weg. Der
   Schnitt liegt im CSS, nicht in der Datei: Das Original bleibt vollständig,
   und der Ausschnitt lässt sich hier in einer Zahl nachjustieren. */
.person__img img{
  position:relative;width:100%;height:auto;
  aspect-ratio:820/760;object-fit:cover;object-position:50% 0;
  /* Ohne diese Auflösung stünde am Schnitt eine harte Linie quer durch den
     Oberkörper. So läuft das Porträt nach unten in den dunklen Grund aus. */
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
  filter:saturate(.88) contrast(1.02);
}
.person__text{display:grid;gap:1.2rem;color:#C8CCD2;max-width:56ch}
.person__text h2{margin-bottom:.4rem}
.person__text a{color:var(--gold);text-underline-offset:.28em}

/* ── Städtevergleich ───────────────────────────────────────────────
   Vier Balken für dieselbe Kaufsumme. Die Balken wachsen erst, wenn der
   Abschnitt im Bild ist — dieselbe .is-in-Mechanik wie bei den Leitern,
   damit der Vergleich als Bewegung gelesen wird und nicht als Tabelle. */
.compare{display:grid;gap:1rem;max-width:52rem}
.compare__row{display:grid;grid-template-columns:7rem 1fr 4.6rem;gap:1.1rem;align-items:center}
@media (max-width:560px){.compare__row{grid-template-columns:5rem 1fr 3.8rem;gap:.7rem}}
.compare__city{font-size:.95rem;color:var(--text-soft)}
.compare__bar{height:.6rem;border-radius:99px;background:rgba(255,255,255,.06)}
.compare__fill{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.15s cubic-bezier(.22,.8,.24,1);
}
.reveal.is-in .compare__fill{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.compare__fill{transition:none}}
.compare__val{font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--gold);text-align:right}
.compare__foot{margin-top:2.2rem;max-width:60ch;color:var(--muted);font-size:.93rem;line-height:1.68}
.compare__src{margin-top:1rem;max-width:70ch;font-size:.8rem;line-height:1.6;color:var(--text-faint)}

/* ── Häufige Fragen ───────────────────────────────────────────────
   Aufklappend, damit die Antworten den Lesefluss nicht anhalten. Kein
   Rahmen, nur Linien — dieselbe Sprache wie Kostentabelle und Notizen. */
.faq{max-width:74ch;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.35rem 3rem 1.35rem 0;
  font-family:var(--disp);font-weight:600;font-size:.98rem;line-height:1.45;
  letter-spacing:.005em;transition:color .2s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--gold)}
/* Plus, das beim Öffnen zum Minus wird — zwei Striche, keine Grafik. */
.faq__item summary::before,
.faq__item summary::after{
  content:"";position:absolute;right:.3rem;top:50%;
  background:var(--gold);transition:transform .3s cubic-bezier(.16,.84,.44,1),opacity .3s;
}
.faq__item summary::before{width:.85rem;height:1px;translate:0 -50%}
.faq__item summary::after{width:1px;height:.85rem;right:.72rem;translate:0 -50%}
.faq__item[open] summary::after{transform:rotate(90deg);opacity:0}
.faq__body{padding:0 2.5rem 1.6rem 0;animation:faqIn .35s ease both}
.faq__body p{color:var(--muted);font-size:.95rem;line-height:1.7}
.faq__body b{color:var(--text-soft);font-weight:600}
.faq__body a{color:var(--gold);text-underline-offset:.24em;text-decoration-thickness:1px}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq__body{animation:none}}

/* ── Anfrage: Einordnung links, Formular rechts ───────────────────
   Das Formular ist die einzige Fläche der Seite, die etwas verlangt. Es
   steht deshalb auf eigenem Grund, eine Spur heller als der Abschnitt. */
.ask{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.ask{grid-template-columns:1fr}}
.ask__intro .band__lede{margin-bottom:2.6rem}

.facts{display:grid;gap:1.1rem;margin:0}
.fact{border-top:1px solid var(--line);padding-top:.95rem}
.fact dt{font-family:var(--disp);font-weight:800;font-size:1.45rem;color:var(--gold);line-height:1.1}
.fact dd{margin:.35rem 0 0;font-size:.88rem;color:var(--muted)}

.ask__form{background:var(--panel);border:1px solid var(--line);padding:clamp(1.5rem,3.2vw,2.6rem)}
.band--panel .ask__form{background:#161616}
.field{margin-bottom:1.4rem;border:0;padding:0;min-width:0}
.field label,.field legend{
  display:block;font-family:var(--disp);font-weight:600;font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;color:#C8CCD2;margin:0 0 .7rem;padding:0;
}
.field__opt{font-weight:400;letter-spacing:.06em;color:#6E747B;text-transform:none}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:.98rem;color:var(--text);
  background:#101010;border:1px solid var(--line);border-radius:0;
  padding:.9rem 1rem;transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#3E3E3E}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:#141414}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.35rem,calc(100% - .8rem) 1.35rem;
  background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;padding-right:2.6rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:520px){.choices{grid-template-columns:1fr}}
.choice{position:relative;display:block;margin:0}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:block;padding:.85rem 1rem;font-size:.93rem;color:#C8CCD2;
  background:#101010;border:1px solid var(--line);transition:border-color .2s,color .2s,background .2s;
}
.choice:hover span{border-color:#3E3E3E}
.choice input:checked+span{border-color:var(--gold);color:var(--gold);background:rgba(230,162,18,.07)}
.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

.consent{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;margin:0 0 1.8rem;cursor:pointer}
.consent input{
  appearance:none;width:1.15rem;height:1.15rem;margin:.18rem 0 0;flex:none;cursor:pointer;
  background:#101010;border:1px solid var(--line);transition:border-color .2s,background .2s;
}
/* Der Haken als Hintergrundbild, nicht als Pseudo-Element: Pseudo-Elemente an
   <input> rendern nicht in jedem Browser zuverlässig. */
.consent input:checked{
  background:var(--gold) no-repeat center/.7rem .7rem;
  border-color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23141414' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.6l3.4 3.4L13 4.6'/%3E%3C/svg%3E");
}
.consent span{font-size:.84rem;line-height:1.6;color:var(--muted)}
.consent a{color:var(--gold);text-underline-offset:.22em}

.ask__note{margin-top:1.4rem;font-size:.82rem;line-height:1.65;color:#6E747B}
.ask__note a{color:var(--gold);text-underline-offset:.22em}
.ask__note.is-sent{color:#C8CCD2;border-left:2px solid var(--gold);padding-left:1rem}
.ask__note b{color:var(--text);font-weight:600}

/* ── Dauerhafter Ausgang auf dem Telefon ──────────────────────────── */
.sticky{display:none}
@media (max-width:860px){
  .sticky{
    display:block;position:fixed;z-index:60;left:0;right:0;bottom:0;
    padding:.7rem max(.9rem,env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(18,18,18,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    animation:rise .35s ease both;
  }
  .sticky[hidden]{display:none}
  /* Zwei Ziele nebeneinander: der Rückruf trägt, der Leitfaden steht daneben.
     Gestapelt wären es zwei Zeilen und der Balken nähme ein Sechstel des
     Bildschirms. Das Verhältnis 3:2 lässt die Hauptschaltfläche gewinnen,
     ohne die zweite auf ein Wort zu quetschen. */
  .sticky__row{display:flex;gap:.55rem}
  .sticky__row .btn{flex:3 1 0;white-space:nowrap}
  .sticky__row .btn--ghost{flex:2 1 0}
  .sticky .btn{display:block;text-align:center;padding-block:.85rem}
  .foot{padding-bottom:5.5rem}
}

/* ── Kontakt ───────────────────────────────────────────────────── */
.contact{
  background:var(--gold);color:#141414;text-align:center;
  padding:clamp(4.5rem,11vh,8rem) var(--pad);
}
.contact h2{font-size:clamp(1.75rem,4.2vw,3.1rem);line-height:1.06;margin:0 auto 1.3rem;max-width:22ch;color:#141414}
.contact .eyebrow{display:inline-block}
.contact__lede{max-width:52ch;margin:0 auto;color:#3D2F0C}

/* ── Fuß ───────────────────────────────────────────────────────── */
.foot{padding-block:clamp(3rem,7vh,5rem) 2.5rem;padding-inline:max(var(--pad),calc((100% - var(--maxw)) / 2));border-top:1px solid var(--line)}
.foot__top{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;margin-bottom:2.4rem}
.foot__logo{width:150px;height:auto;opacity:.85}
.foot__nav{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.88rem}
.foot__nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.foot__nav a:hover{color:var(--gold)}
.foot__legal{font-size:.82rem;line-height:1.65;color:#6E747B;max-width:78ch;margin-bottom:1.6rem}
.foot__copy{font-size:.78rem;color:#4E545B;margin:0}

/* ── Rechtsseiten ──────────────────────────────────────────────── */
.legal{padding:clamp(7rem,14vh,10rem) var(--pad) clamp(4rem,9vh,6rem);max-width:var(--maxw);margin:0 auto}
.legal h1{font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:2.5rem}
.legal h2{font-size:1.12rem;letter-spacing:.06em;margin:2.8rem 0 .9rem;color:var(--gold)}
.legal p,.legal li{color:#C8CCD2;max-width:74ch;margin:0 0 1rem}
.legal ul{padding-left:1.2rem;margin:0 0 1rem}
.legal a{color:var(--gold);text-underline-offset:.26em}
.legal .todo{
  display:block;border-left:2px solid var(--gold);background:rgba(230,162,18,.07);
  padding:1rem 1.3rem;margin:1.2rem 0;color:#E0D2AE;font-size:.92rem;
}
.legal__back{display:inline-block;margin-top:3rem;font-size:.88rem;color:var(--muted);text-decoration:none}
.legal__back:hover{color:var(--gold)}

/* ══ HELLE ABSCHNITTE ═══════════════════════════════════════════════
   Mischform seit 2026-08-08: Die Seite bleibt in ihrer Grundhaltung
   dunkel, bekommt aber zwei helle Kapitel als Atempause. Die Aufteilung
   ist nicht dekorativ, sondern inhaltlich — hell ist, wo gerechnet und
   erklärt wird (Ablauf, Kosten, Steuern, Fragen), dunkel bleibt, wo
   erzählt und gezeigt wird (Hero, Rolle, Projekte, Partner, Person).

   Umgesetzt allein über Variablen: Die Bausteine darin (Leiter,
   Kostentabelle, Notizen, Aufklapper) sind unverändert und erben die
   Farben. Wer eine neue Sektion hell haben will, hängt nur
   `band--light` an — sonst nichts. */
.band--light{
  background:var(--paper);
  --text:#171717;
  --text-soft:#33383D;
  --muted:#54595F;
  --text-faint:#6E7379;
  --line:#DCD5C9;
  --tick:#B5AC9C;
  --gold:#8A6410;
  color:var(--text);
}
.band--light.band--panel{background:var(--paper-alt)}

/* ══ REITER FÜR DIE BEIDEN KAUFWEGE ═════════════════════════════════
   Seit 2026-08-09. Vorher standen beide Leitern untereinander — zwölf
   Kacheln, von denen jeden Leser höchstens die Hälfte betrifft. Auf dem
   Telefon war der Ablauf damit der längste Block der ganzen Seite. */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:2.4rem;flex-wrap:wrap}
.tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:.9rem 1.4rem .9rem 0;margin-right:2.2rem;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:.78rem;color:var(--muted);
  cursor:pointer;transition:color .2s,border-color .2s;
}
.tab:last-child{margin-right:0}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.tabpanel[hidden]{display:none}

/* ══ LEITFADEN ══════════════════════════════════════════════════════ */
.guide{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.guide{grid-template-columns:1fr}}
.guide__text .ticks{margin:0 0 2.2rem;padding:0;list-style:none;display:grid;gap:.75rem}
.guide__note{margin-top:1.4rem;font-size:.88rem;line-height:1.65;color:var(--muted);max-width:56ch}
.guide__note b{color:var(--text);font-weight:600}
.guide__cover img{
  width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28);
  border:1px solid var(--line);
}
@media (max-width:900px){.guide__cover{max-width:300px;margin:.5rem auto 0}}
/* Im Leitfaden-Block stehen die drei Kennzahlen nebeneinander, nicht
   untereinander — die Spalte ist hier breit, anders als früher im Formular. */
.guide .facts{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2.2rem);margin:0 0 .4rem}
@media (max-width:560px){.guide .facts{grid-template-columns:1fr}}

/* ⚠ Die Schaltflächen auf hellem Grund: `--gold` ist dort auf den dunklen
   Ton heruntergesetzt, damit Text lesbar bleibt. Für die Fläche einer
   Schaltfläche ist das falsch — dunkles Gold mit dunkler Schrift hat kaum
   Kontrast. Sie bekommt deshalb das Markengold zurück. */
.band--light .btn{background:#E6A212;border-color:#E6A212;color:#141414}
.band--light .btn:hover{background:#F4B22B}
.band--light .btn--outline-dark{background:transparent;color:#141414;border-color:rgba(20,20,20,.4)}
.band--light .btn--outline-dark:hover{background:rgba(20,20,20,.07);border-color:#141414}

/* ══ PROJEKTE ALS WISCHLEISTE AUF SCHMALEN SCHIRMEN ═════════════════
   Drei gestapelte Bildkacheln waren auf dem Telefon 2.500 px hoch. Als
   Wischleiste bleibt eine Kachelhöhe stehen, ohne dass etwas entfällt. */
@media (max-width:860px){
  .projects{
    grid-template-columns:repeat(3,78%);
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:1rem;padding-bottom:1rem;
    scrollbar-width:thin;
  }
  .project{scroll-snap-align:start}
  .projects::after{content:"";flex:0 0 .5rem}
}
.projects__hint{
  display:none;margin-top:.4rem;font-size:.78rem;letter-spacing:.06em;color:var(--text-faint);
}
@media (max-width:860px){.projects__hint{display:block}}


/* ══ ABSCHNITT MIT FOTO IM HINTERGRUND ═════════════════════════════
   Dieselbe Machart wie der Hero: Das Bild liegt hinter dem Inhalt, nicht
   als eigener Block daneben. Der Verlauf endet oben und unten auf dem
   Anthrazit der Nachbarabschnitte — dadurch hat der Abschnitt keine
   sichtbare Bildkante, sondern taucht auf und wieder ab.

   Ein voriger Versuch mit einem randlosen Bildstreifen zwischen zwei
   Abschnitten stieß hart auf die helle Fläche darunter und wirkte
   eingeklebt. Das hier ist der Ersatz.

   ⚠ Das Motiv steht als eigene Modifier-Klasse HIER im Stylesheet, nicht als
   `style="--photo:url(...)"` am HTML-Element. Grund: Ein relativer Pfad in
   einer CSS-Variablen wird gegen das Stylesheet aufgelöst, nicht gegen die
   HTML-Datei — aus `assets/img/bild.jpg` wurde dabei `assets/assets/img/…`
   und das Bild blieb unsichtbar. Ein weiteres Motiv bekommt also eine
   weitere Klasse nach dem Muster unten. */
.band--photo{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.band--photo > *{position:relative;z-index:2}
.band--photo-marina::before{background-image:url("img/bg-marina.jpg")}
/* ══ VORBEREITET, ABER NICHT AKTIV ═══════════════════════════════════════
   Die beiden Marktseiten sollten am 16.08. ein dezentes Hintergrundmotiv im
   Aufmacher bekommen. Vier Motive durchprobiert, keines hat getragen — die
   Arbeit ist abgebrochen, die Klassen sind aus dem HTML entfernt.

   ⭐⭐ WAS DABEI GELERNT WURDE, gilt fuer jeden neuen Versuch:
   1. Der Verlauf von .band--photo ist fuer einen LANGEN Abschnitt gebaut:
      oben und unten voll deckend, Licht nur um 80% 30%. Ein Aufmacher ist
      rund 400 px hoch, dort sieht man fast nur die deckenden Raender.
      Ein eigener, weicherer Verlauf ist also Pflicht (Entwurf unten).
   2. Landschaft verschwindet in dieser Abdunklung. Es braucht einen klaren
      BAUKOERPER mit heller Silhouette.
   3. Das Motiv muss RECHTS liegen, links steht der Text. Ein Bild, dessen
      Gebaeude links sitzt, laesst sich per background-position nicht retten.
   4. Der Zuschnitt braucht das Seitenverhaeltnis des Bandes (rund 3,2:1),
      sonst schneidet `cover` genau das Motiv weg.
   5. ⛔ Nichts verwenden, was schon in den Marktkarten derselben Seite steht
      (Yas Living, Blanc Altea) — die Seite wiederholt sich sonst selbst.

   ⭐ NAECHSTER ANSATZ, vom Kunden vorgeschlagen: Scheich-Zayid-Moschee oder
      eine Luftaufnahme der Tuerme. Beides hat eine kraeftige Silhouette und
      wuerde Punkt 2 erfuellen.

   ⚠ LIZENZEN, falls es weitergeht: CC BY ist unproblematisch (Namensnennung),
     CC BY-SA zieht Share-Alike auf den bearbeiteten Ausschnitt nach. Und der
     Bildnachweis im Impressum muss wieder mit, sobald ein Motiv live geht.

.band--opener.band--photo::after{
  background:
    linear-gradient(to right,
      rgba(18,18,18,.97) 0%, rgba(18,18,18,.92) 34%,
      rgba(18,18,18,.62) 62%, rgba(18,18,18,.44) 100%),
    linear-gradient(to bottom,
      var(--ink) 0%, rgba(18,18,18,.30) 18%,
      rgba(18,18,18,.24) 62%, rgba(18,18,18,.72) 88%, var(--ink) 100%);
}
.band--photo-abudhabi::before{background-image:url("img/bg-abudhabi.webp")}
.band--photo-spanien::before{background-image:url("img/bg-spanien.webp")}
   ══════════════════════════════════════════════════════════════════════ */
.band--photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:62% 30%;
  filter:saturate(.74) contrast(1.02) brightness(1.02);
}
/* ⚠ Zwei Verläufe, die zusammen zwei verschiedene Aufgaben erfüllen:
   senkrecht macht die Kanten unsichtbar (oben und unten voll deckend auf
   var(--ink), sonst blitzt an der Sektionskante Foto durch und die harte
   Kante ist zurück), waagrecht hält die linke Hälfte dunkel, weil dort der
   Text steht. In der Mitte bleibt die Abdeckung bewusst niedrig — ein
   erster Versuch mit .84 durchgehend hat das Bild vollständig geschluckt. */
.band--photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(62% 48% at 80% 30%,
      rgba(18,18,18,.20) 0%,
      rgba(18,18,18,.66) 58%,
      rgba(18,18,18,.90) 100%),
    radial-gradient(100% 60% at 84% 16%,rgba(230,162,18,.10),transparent 60%),
    linear-gradient(to bottom,
      var(--ink) 0%,
      rgba(18,18,18,.42) 12%,
      rgba(18,18,18,.34) 34%,
      rgba(18,18,18,.72) 62%,
      rgba(18,18,18,.93) 82%,
      var(--ink) 100%);
}

/* Auf schmalen Schirmen tragen die Reiter nur den Namen des Kaufwegs — mit
   Zusatz brechen sie auf zwei Zeilen um und lesen sich dann wie eine Liste
   statt wie zwei Schalter. Der Zusatz steht ohnehin im Vorspann darüber. */
@media (max-width:620px){
  .tab__q{display:none}
  .tab{margin-right:1.6rem;padding-right:0;font-size:.74rem}
}

/* ── Der Vorname in Handschrift ────────────────────────────────────────
   Kundenvorgabe 15.08.: ueberall nur "Thomas", handschriftlich, ohne
   Nachnamen. Dieselbe Schrift wie die Unterschrift in den Reels, damit
   Video und Website denselben Absender zeigen.
   ⚠⚠ Deutlich groesser gesetzt als eine normale H2. Schreibschrift hat eine
      kleine x-Hoehe und traegt auf gleicher Punktgroesse viel weniger; bei
      3,9rem stand der Name kleiner da als die Vorzeile darueber und wirkte
      verloren. 5,4rem bringt ihn auf die Wirkung einer Ueberschrift zurueck. */
.band h2.hand-name{ font-size:clamp(3.6rem,8vw,5.4rem); max-width:none }
/* ⚠⚠ SPEZIFITAETSFALLE, im Projekt zum zweiten Mal: `.band h2` (0,0,1,1) ist
   spezifischer als `.hand-name` (0,0,1,0) und gewinnt bei der Schriftgroesse.
   Die Schriftart kam durch, weil `h1,h2,h3` nur (0,0,0,1) hat. Deshalb steht
   die Groesse oben mit derselben Struktur wie die Regel, die sie schlagen
   muss. Dieselbe Falle wie `.zeile.gross` gegen `.serif` im Reel-Generator. */
.hand-name{ font-family:"Brittany","Segoe Script",cursive; font-weight:400;
  font-size:clamp(3.6rem,8vw,5.4rem); line-height:1; letter-spacing:.01em;
  color:var(--gold); margin-bottom:.2em; text-transform:none }

/* ══ Der Abgleich ═══════════════════════════════════════════════════════
   Drei Fragen statt eines Objektverzeichnisses. Warum kein Verzeichnis:
   siehe Kommentar am Abschnitt #abgleich in index.html.
   ⚠ Native Radios bleiben erhalten und nur optisch versteckt — sie tragen
      Tastaturbedienung, Gruppierung und Screenreader-Ausgabe. Ein Nachbau
      aus <div> und JavaScript kann das alles nicht. */
.abgleich{max-width:var(--maxw);margin:0 auto}
.abgleich__frage{border:0;padding:0;margin:0 0 2.2rem}
.abgleich__frage legend{
  padding:0;margin-bottom:.9rem;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.abgleich__opts{display:flex;flex-wrap:wrap;gap:.7rem}
.abgleich__opts label{position:relative;cursor:pointer}
/* Nicht display:none — damit bliebe der Fokusrahmen aus und die Tastatur
   käme nicht mehr hin. */
.abgleich__opts input{position:absolute;opacity:0;width:0;height:0}
.abgleich__opts span{
  display:block;padding:.72rem 1.15rem;border:1px solid var(--line);
  border-radius:2px;font-size:.94rem;line-height:1.3;color:var(--text-soft);
  transition:border-color .18s,color .18s,background-color .18s}
.abgleich__opts label:hover span{border-color:var(--gold);color:#F2F0EC}
.abgleich__opts input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
/* ⚠ Die Markierung war zuerst zu zurueckhaltend (1 px Gold, 12 % Fuellung) —
   auf dem dunklen Grund sah man schlicht nicht, was gewaehlt ist. Jetzt volle
   Goldflaeche mit dunkler Schrift: unuebersehbar und ohne Zweifel. */
.abgleich__opts input:checked + span{
  border-color:var(--gold);background:var(--gold);color:#141414;font-weight:600}

.abgleich__out{
  margin-top:2.6rem;padding:1.8rem 1.9rem;border-left:2px solid var(--gold);
  background:rgba(255,255,255,.03)}
.abgleich__out p{font-size:1rem;line-height:1.72;color:var(--text-soft);margin:0 0 .9rem}
.abgleich__out p:last-child{margin-bottom:0}
.abgleich__leer{font-style:italic;opacity:.72}
.abgleich__schluss{font-size:.88rem !important;opacity:.75}
.abgleich__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}

@media (max-width:600px){
  .abgleich__opts{flex-direction:column}
  .abgleich__opts span{text-align:center}
  .abgleich__out{padding:1.4rem 1.2rem}
}