/* ============================================================
   Reverance Living Batumi
   Palette aus den Materialien des Gebäudes: geschwärztes Glas
   der Fassade, Bronze der Lisenen, Travertin der Böden,
   Adscharien-Grün der Anlagen.
   ============================================================ */

:root{
  /* Flächen */
  --ground:#F4F2EC;
  --surface:#FBFAF6;
  --sunk:#EBE8DF;
  --console:#141F1C;
  --console-2:#1C2A26;

  /* Text */
  --ink:#15201D;
  --ink-2:#3F4B47;
  --muted:#5D6862;
  --on-dark:#EAE6DC;
  --on-dark-2:#B3BCB6;
  --on-dark-3:#87938C;

  /* Akzente für IMMER dunkle Flächen (Konsole, Seitenkopf, Abschlussband).
     Diese kippen bewusst NICHT mit dem Seitenthema — sonst stünde im hellen
     Modus das dunkle Grün auf dunklem Grund und wäre unlesbar. */
  --on-dark-sea:#6FBBA3;
  --on-dark-bronze:#C9A063;

  /* Akzente */
  --bronze:#7E5C2D;
  --bronze-2:#A17B3E;
  --bronze-soft:rgba(138,102,52,.10);
  --sea:#245A4A;
  --sea-soft:rgba(40,96,79,.10);

  /* Semantik Bestand */
  --st-free:#245A4A;
  --st-free-bg:rgba(40,96,79,.10);
  --st-res:#7E5C2D;
  --st-res-bg:rgba(138,102,52,.12);
  --st-sold:#6A6158;
  --st-sold-bg:rgba(122,113,104,.12);

  /* Linien */
  --line:rgba(21,32,29,.14);
  --line-2:rgba(21,32,29,.075);
  --line-dark:rgba(234,230,220,.15);
  --line-dark-2:rgba(234,230,220,.08);

  --shadow-sm:0 1px 2px rgba(21,32,29,.05);
  --shadow:0 1px 2px rgba(21,32,29,.04), 0 14px 36px -20px rgba(21,32,29,.30);
  --shadow-lg:0 2px 4px rgba(21,32,29,.05), 0 30px 70px -32px rgba(21,32,29,.42);

  /* Schrift
     Schibsted Grotesk für Überschriften und alle Zahlen: eindeutige Ziffern,
     insbesondere eine 1 mit Fahne — die Antiqua zuvor liess "A0201" wie
     "A02OI" aussehen. IBM Plex Sans für Fliesstext. */
  --display:'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --sans:'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* Maße */
  --page:1220px;
  --read:66ch;
  --gutter:clamp(20px, 4vw, 44px);
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:76px; --s7:clamp(66px,8.5vw,116px);
  --radius:3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1917; --surface:#16211E; --sunk:#0A1210;
    --console:#0A100F; --console-2:#141F1C;
    --ink:#EAE6DC; --ink-2:#C0C7C1; --muted:#8B978F;
    --bronze:#C9A063; --bronze-2:#DDB87F; --bronze-soft:rgba(201,160,99,.13);
    --sea:#6FBBA3; --sea-soft:rgba(111,187,163,.12);
    --st-free:#6FBBA3; --st-free-bg:rgba(111,187,163,.13);
    --st-res:#C9A063;  --st-res-bg:rgba(201,160,99,.14);
    --st-sold:#98A09A; --st-sold-bg:rgba(152,160,154,.13);
    --line:rgba(234,230,220,.16); --line-2:rgba(234,230,220,.075);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(0,0,0,.75);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 34px 80px -34px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"]{
  --ground:#0F1917; --surface:#16211E; --sunk:#0A1210;
  --console:#0A100F; --console-2:#141F1C;
  --ink:#EAE6DC; --ink-2:#C0C7C1; --muted:#8B978F;
  --bronze:#C9A063; --bronze-2:#DDB87F; --bronze-soft:rgba(201,160,99,.13);
  --sea:#6FBBA3; --sea-soft:rgba(111,187,163,.12);
  --st-free:#6FBBA3; --st-free-bg:rgba(111,187,163,.13);
  --st-res:#C9A063;  --st-res-bg:rgba(201,160,99,.14);
  --st-sold:#98A09A; --st-sold-bg:rgba(152,160,154,.13);
  --line:rgba(234,230,220,.16); --line-2:rgba(234,230,220,.075);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(0,0,0,.75);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 34px 80px -34px rgba(0,0,0,.85);
}

/* ── Grundlagen ───────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px}

.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--console); color:var(--on-dark); padding:12px 20px}
.skip:focus{left:12px; top:12px}

/* Eine Grotesk trägt bei gleicher Punktgröße optisch schwerer als eine
   Antiqua — deshalb etwas kleiner, enger und in mittlerem Schnitt gesetzt. */
/* Kein tabular-nums auf Überschriften: die Schrift gibt dann auch Punkt und
   Komma Ziffernbreite, was in „40 % Eigenkapital." eine Lücke vor dem Punkt
   reisst. Feste Ziffernbreite braucht nur, was in Spalten steht — .num. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.022em;
  font-variant-numeric:lining-nums;
}
h1{font-size:clamp(2.3rem,4.9vw,3.7rem); line-height:1.06}
h2{font-size:clamp(1.75rem,3.2vw,2.55rem); line-height:1.14}
h3{font-size:clamp(1.16rem,1.6vw,1.36rem); line-height:1.32; letter-spacing:-.014em}
h4{font-size:1rem; line-height:1.35; letter-spacing:.002em; font-weight:600}
p{margin:0}
ul,ol{margin:0; padding:0}

/* Zahlen immer in der Grotesk, mit gleicher Laufweite pro Ziffer. */
.num{
  font-family:var(--display);
  font-variant-numeric:lining-nums;
  letter-spacing:-.012em;
}
/* Feste Ziffernbreite nur, wo Zahlen tatsächlich untereinander stehen:
   Tabellen, Kennzahlenreihen, Rechnerzeilen. */
table .num, td, th,
.rowline > b, .tmark b, .tmark i, .kpi b,
.unit__specs div b, .unit__price b, .unit__price span,
.poi b, .card__list li b, .field__val{
  font-variant-numeric:tabular-nums lining-nums;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 var(--s2);
}
.lede{font-size:clamp(1.04rem,1.35vw,1.16rem); line-height:1.68; color:var(--ink-2)}
.small{font-size:.87rem; color:var(--muted); line-height:1.6}

/* Lange Bezeichner wie „Strict-Transport-Security" haben keine
   Trennstelle und sprengen sonst auf schmalen Schirmen das Layout. */
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.9em;
  padding:1px 5px;
  border-radius:2px;
  background:var(--bronze-soft);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* ── Layout ───────────────────────────────────────────────── */

.wrap{width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter)}
.read{max-width:var(--read)}
.section{padding-block:var(--s7)}
.section--tight{padding-block:var(--s6)}
.section--surface{background:var(--surface)}
.section--sunk{background:var(--sunk)}
.rule{height:1px; background:var(--line-2); border:0; margin:0}

.stack{display:flex; flex-direction:column}
.stack > * + *{margin-top:var(--s3)}
.stack--lg > * + *{margin-top:var(--s4)}

.head{max-width:var(--read); margin-bottom:var(--s5)}
.head .lede{margin-top:var(--s3)}

/* Grid- und Flex-Kinder haben min-width:auto und schrumpfen deshalb nicht
   unter ihre Inhaltsbreite. Eine breite Tabelle sprengt so das ganze Layout,
   statt in ihrem eigenen Container zu scrollen. */
.cols > *,.grid > *,.cards > *,.units > *,
.console__body > *,.console__plan > *,.foot__in > *,
.panel > *,.stack > *,.adminwrap > *{min-width:0}

.cols{display:grid; gap:var(--s5); grid-template-columns:1fr}
@media(min-width:900px){
  .cols--2{grid-template-columns:1fr 1fr}
  .cols--wide-left{grid-template-columns:1.25fr .95fr; align-items:start}
  .cols--wide-right{grid-template-columns:.95fr 1.25fr; align-items:start}
}

/* ── Kopfleiste ───────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.topbar.is-stuck{border-bottom-color:var(--line-2)}
.topbar__in{
  max-width:var(--page); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:var(--s4);
}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto}
.brand__mark{
  font-family:var(--display); font-size:1.32rem; font-weight:700;
  letter-spacing:-.01em; line-height:1;
}
.brand__sub{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}

.mainnav{display:flex; align-items:center; gap:var(--s4)}
.mainnav ul{display:flex; gap:var(--s3); list-style:none}

/* Bewusst `.mainnav ul a` statt `.mainnav a`: die zweite Form ist
   spezifischer als `.btn` und hat dem Button im Kopf Farbe und Padding
   weggenommen. So greift die Regel nur für die Menüpunkte in der Liste. */
.mainnav ul a{
  text-decoration:none; font-size:.905rem; color:var(--ink-2);
  padding:6px 0; position:relative; transition:color .2s ease;
}
.mainnav ul a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.mainnav ul a:hover{color:var(--ink)}
.mainnav ul a:hover::after,
.mainnav ul a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav ul a[aria-current="page"]{color:var(--ink)}

.burger{display:none; flex-direction:column; gap:4px; background:none; border:0; padding:9px; cursor:pointer}
.burger span:not(.vh){display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .3s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:920px){
  .burger{display:flex}
  .mainnav{
    position:fixed; inset:60px 0 auto; background:var(--ground);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s3) var(--gutter) var(--s4);
    border-bottom:1px solid var(--line-2);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    max-height:calc(100dvh - 60px); overflow-y:auto;
  }
  .mainnav.is-open{transform:none; opacity:1; pointer-events:auto}
  .mainnav ul{flex-direction:column; gap:0}
  .mainnav li{border-bottom:1px solid var(--line-2)}
  .mainnav ul a{display:block; padding:14px 0; font-size:1.02rem}
  .mainnav ul a::after{display:none}
  .mainnav .btn{margin-top:var(--s3); width:100%}
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:48px; padding:14px 30px;
  border:1px solid transparent; border-radius:var(--radius);
  background:var(--bronze-2); color:#171008;
  font-family:var(--sans);
  font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.1; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), filter .22s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.07)}
.btn:active{transform:none}
.btn--sm{min-height:40px; padding:11px 22px; font-size:.71rem; gap:10px}

/* Auf schmalen Schirmen dürfen lange Beschriftungen umbrechen — sonst
   schiebt ein einzelner Button die ganze Seite über den Rand. */
@media(max-width:560px){
  .btn{white-space:normal; text-align:center; max-width:100%}
}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--bronze); filter:none}
.btn--on-dark{background:var(--bronze-2); color:#171008}
.btn--ghost-dark{background:transparent; border-color:rgba(234,230,220,.28); color:var(--on-dark)}
.btn--ghost-dark:hover{border-color:var(--on-dark-bronze); filter:none}
.btn--block{display:flex; justify-content:center; width:100%}
.btn__badge{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.42); border-radius:20px;
  padding:3px 10px; margin-right:-6px;
  font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.04em; line-height:1.35;
  font-variant-numeric:tabular-nums lining-nums;
}
.btn[disabled]{opacity:.45; pointer-events:none}

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bronze); text-decoration:none;
}
.link span{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.link:hover span{transform:translateX(4px)}

/* ── Hero ─────────────────────────────────────────────────── */

.hero{
  position:relative; isolation:isolate;
  min-height:min(90vh,880px);
  display:flex; align-items:flex-end;
  background:#0A100F; color:var(--on-dark);
  overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:68% 28%}
/* Zwei Verläufe: einer trägt die Textspalte links, einer den unteren Rand.
   Ohne den linken Verlauf steht die Headline auf dem hellen Turm. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,13,12,.90) 0%, rgba(8,13,12,.78) 26%, rgba(8,13,12,.34) 52%, rgba(8,13,12,0) 78%),
    linear-gradient(180deg, rgba(8,13,12,.60) 0%, rgba(8,13,12,.14) 30%, rgba(8,13,12,.55) 72%, rgba(8,13,12,.92) 100%);
}
@media(max-width:760px){
  .hero::after{background:linear-gradient(180deg, rgba(8,13,12,.72) 0%, rgba(8,13,12,.52) 38%, rgba(8,13,12,.86) 100%)}
}
.hero__in{width:100%; padding-block:var(--s6) var(--s5)}
.hero h1{max-width:15ch; color:#F2EFE7}
.hero h1 em{font-style:normal; color:var(--on-dark-bronze)}
.hero__lede{max-width:47ch; margin-top:var(--s3); color:rgba(242,239,231,.82); font-size:clamp(1.02rem,1.3vw,1.14rem)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}

.hero__facts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s4);
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid rgba(242,239,231,.22);
}
@media(min-width:760px){.hero__facts{grid-template-columns:repeat(4,1fr)}}
.hero__fact b{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,2.2vw,1.85rem);
  font-weight:600; color:#F2EFE7; line-height:1.08; letter-spacing:-.02em;
}
.hero__fact span{
  display:block; margin-top:5px;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(242,239,231,.60);
}

.pagehead{
  background:var(--console); color:var(--on-dark);
  padding-block:var(--s6) var(--s5);
}
.pagehead h1{font-size:clamp(2.2rem,4.4vw,3.4rem); color:#F2EFE7}
.pagehead .eyebrow{color:var(--on-dark-bronze)}
.pagehead .lede{color:var(--on-dark-2); margin-top:var(--s3)}

/* ── Kennzahlenreihen ─────────────────────────────────────── */

.facts{display:grid; gap:1px; background:var(--line-2); grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts > div{background:var(--ground); padding:var(--s4) var(--s3)}
.section--surface .facts > div{background:var(--surface)}
.facts b{display:block; font-family:var(--display); font-size:clamp(1.6rem,2.3vw,2rem); font-weight:600; line-height:1.08; letter-spacing:-.022em; color:var(--bronze)}
.facts span{display:block; margin-top:7px; font-size:.87rem; color:var(--ink-2)}
.facts i{display:block; font-style:normal; margin-top:3px; font-size:.75rem; color:var(--muted)}

.claims{list-style:none}
.claims li{
  display:grid; grid-template-columns:5.2ch 1fr; gap:0 var(--s3);
  padding:var(--s3) 0; border-top:1px solid var(--line-2); align-items:baseline;
}
.claims li:last-child{border-bottom:1px solid var(--line-2)}
.claims b{font-family:var(--display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em; color:var(--bronze); text-align:right}
.claims span{color:var(--ink-2); font-size:.955rem}

/* ── Bestandskarten ───────────────────────────────────────── */

.units{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:640px){.units{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.units{grid-template-columns:repeat(3,1fr)}}

.unit{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.unit:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line)}
.unit.is-sold{opacity:.62}
.unit.is-sold:hover{transform:none; box-shadow:none}

/* Die Grundrisse sind helle Renderings auf transparentem Grund. Sie brauchen
   eine leicht abgesetzte Fläche, sonst verschwinden die weißen Wände.
   Feste Proportion, damit alle Karten einer Reihe gleich hoch starten. */
.unit__plan{
  position:relative; aspect-ratio:4/3;
  background:linear-gradient(165deg, color-mix(in srgb, var(--ink) 7%, var(--sunk)), var(--sunk));
  padding:var(--s3); display:grid; place-items:center; overflow:hidden;
}
.unit__plan img{
  max-height:100%; max-width:86%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(21,32,29,.16));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.unit:hover .unit__plan img{transform:scale(1.04)}

.unit__body{padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.unit__top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s2)}
.unit__code{font-family:var(--display); font-size:1.28rem; font-weight:600; letter-spacing:-.015em; line-height:1}
.unit__type{font-size:.8rem; color:var(--muted); margin-top:3px}
.unit__specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1);
  padding-top:var(--s2); border-top:1px solid var(--line-2); margin-top:auto;
}
.unit__specs div u{display:block; text-decoration:none; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.unit__specs div b{display:block; font-weight:500; font-size:.94rem; margin-top:2px; font-variant-numeric:tabular-nums}
.unit__price{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
  padding-top:var(--s2); border-top:1px solid var(--line-2);
}
.unit__price b{font-family:var(--display); font-size:1.32rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums}
.unit__price span{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}

.tag{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:4px 11px; border-radius:20px;
  font-size:.67rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
}
.tag::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor}
.tag--verfuegbar{color:var(--st-free); background:var(--st-free-bg)}
.tag--reserviert{color:var(--st-res);  background:var(--st-res-bg)}
.tag--verkauft{color:var(--st-sold);   background:var(--st-sold-bg)}
.tag--zurueck{color:var(--muted);      background:var(--line-2)}
/* Status-Chips auf immer dunklen Flächen (Seitenkopf) brauchen die
   hellen Varianten — sonst steht dunkles Grün auf dunklem Grund. */
.pagehead .tag--verfuegbar{color:#6FBBA3; background:rgba(111,187,163,.16)}
.pagehead .tag--reserviert{color:#C9A063; background:rgba(201,160,99,.18)}
.pagehead .tag--verkauft{color:#AFB6B0;  background:rgba(175,182,176,.16)}
.pagehead .tag--zurueck{color:#9AA49D;   background:rgba(154,164,157,.16)}

/* ── Filterleiste ─────────────────────────────────────────── */

.filter{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:var(--s3); margin-bottom:var(--s4);
}
.filter__grid{display:grid; gap:var(--s2); grid-template-columns:1fr}
@media(min-width:680px){.filter__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.filter__grid{grid-template-columns:repeat(5,1fr)}}
.filter__foot{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-2)}
.filter__count{font-size:.9rem; color:var(--muted); margin-right:auto}
.filter__count b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

.field{display:flex; flex-direction:column; gap:6px}
.field > label,.field__lab{
  font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.field__lab{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.field__val{
  font-family:var(--display); font-size:1.02rem; font-weight:600;
  letter-spacing:-.01em; text-transform:none; color:var(--ink); font-variant-numeric:tabular-nums lining-nums;
}

.input,select.input,textarea.input{
  width:100%; padding:11px 13px;
  background:var(--ground); color:var(--ink);
  border:1px solid var(--line); border-radius:2px;
  font-size:.94rem; transition:border-color .2s ease;
}
textarea.input{min-height:130px; resize:vertical; line-height:1.6}
.input:hover{border-color:color-mix(in srgb, var(--ink) 28%, transparent)}
.input:focus{border-color:var(--bronze); outline:none; box-shadow:0 0 0 3px var(--bronze-soft)}
select.input{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}

/* ── Seitenblättern ───────────────────────────────────────── */

.pager{
  display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; justify-content:center;
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-2);
}
.pager__list{display:flex; gap:4px; list-style:none; align-items:center}
.pager__num,.pager__step{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:2px;
  font-size:.88rem; text-decoration:none; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  transition:border-color .2s ease, color .2s ease;
}
.pager__step{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
a.pager__num:hover,a.pager__step:hover{border-color:var(--bronze); color:var(--ink)}
.pager__num.is-now{background:var(--bronze-2); border-color:var(--bronze-2); color:#171008; font-weight:600}
.pager__step.is-off{opacity:.35}
.pager__gap{padding:0 4px; color:var(--muted)}

/* ── Konsole (Rechner) ────────────────────────────────────── */

.console{
  background:var(--console); color:var(--on-dark);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  overflow:hidden; border:1px solid var(--line-dark);
}
.console__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--s2);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-dark);
}
.console__head p{font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-3)}
.console__head p:last-child{color:var(--on-dark-bronze)}
.console__body{display:grid; grid-template-columns:1fr}
@media(min-width:940px){.console__body{grid-template-columns:minmax(310px,368px) 1fr}}

.console__panel{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); border-bottom:1px solid var(--line-dark)}
@media(min-width:940px){.console__panel{border-bottom:0; border-right:1px solid var(--line-dark)}}
.console .field > label,.console .field__lab{color:var(--on-dark-3)}
.console .field__val{color:var(--on-dark)}
/* Akzentfarben in der Konsole dürfen nicht mit dem Seitenthema kippen. */
.console .eyebrow,.console .link{color:var(--on-dark-bronze)}
.console h3{color:var(--on-dark)}
.console .input{background:var(--console-2); color:var(--on-dark); border-color:var(--line-dark)}
.console .input:hover{border-color:rgba(234,230,220,.30)}
.console .input:focus{border-color:var(--on-dark-bronze); box-shadow:0 0 0 3px rgba(201,160,99,.14)}
.console .hint{font-size:.78rem; color:var(--on-dark-3); line-height:1.5}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--line-dark); border-radius:2px}
input[type=range]::-moz-range-track{height:2px; background:var(--line-dark); border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%; background:var(--on-dark-bronze);
  margin-top:-7px; border:0; transition:transform .18s ease;
}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--on-dark-bronze); border:0}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(.95)}

.console__out{padding:var(--s4)}
.console__hero{
  display:grid; gap:var(--s3); grid-template-columns:1fr;
  padding-bottom:var(--s3); border-bottom:1px solid var(--line-dark);
}
@media(min-width:560px){.console__hero{grid-template-columns:1fr 1fr; gap:var(--s4)}}
.console__hero u{display:block; text-decoration:none; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:9px}
.big{font-family:var(--display); font-size:clamp(1.95rem,3.8vw,2.6rem); font-weight:600; line-height:1.02; letter-spacing:-.025em; font-variant-numeric:tabular-nums lining-nums}
.big--sea{color:var(--sea)}
.big--bronze{color:var(--bronze)}
.console .big--sea{color:var(--on-dark-sea)}
.console .big--bronze{color:var(--on-dark-bronze)}
.console__note{font-size:.81rem; color:var(--on-dark-3); margin-top:8px}

.rows{margin-top:var(--s3)}
.rowline{
  display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line-dark-2); font-size:.925rem;
}
.rowline:last-child{border-bottom:0}
.rowline > span{color:var(--on-dark-3)}
.rowline > b{font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.rowline--sum{border-top:1px solid var(--line-dark); border-bottom:0; margin-top:var(--s1); padding-top:var(--s2)}
.rowline--sum > span{color:var(--on-dark)}
.rowline--sum > b{font-family:var(--display); font-size:1.18rem; font-weight:600; letter-spacing:-.018em}
.rowline b.pos{color:var(--on-dark-sea)}
.rowline b.neg{color:var(--on-dark-bronze)}

.timeline{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:2px;
}
.tmark{padding:13px 12px; background:var(--console-2); border-radius:2px}
.tmark u{display:block; text-decoration:none; font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3)}
.tmark b{display:block; margin-top:6px; font-family:var(--display); font-size:1.25rem; font-weight:600; letter-spacing:-.02em; color:var(--on-dark-sea); font-variant-numeric:tabular-nums lining-nums}
.tmark i{display:block; margin-top:2px; font-style:normal; font-size:.76rem; color:var(--on-dark-3); font-variant-numeric:tabular-nums}

.console__plan{
  display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:center;
  padding:var(--s4); border-top:1px solid var(--line-dark);
}
@media(min-width:720px){.console__plan{grid-template-columns:300px 1fr}}
.console__plan img{width:100%; max-width:300px; justify-self:center}
.console__disclaim{
  padding:var(--s3) var(--s4); border-top:1px solid var(--line-dark);
  background:var(--console-2); color:var(--on-dark-3);
  font-size:.805rem; line-height:1.62;
}
.console__disclaim b{color:var(--on-dark); font-weight:600}

/* ── Tabellen ─────────────────────────────────────────────── */

.tablewrap{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2); border-radius:var(--radius);
  overscroll-behavior-x:contain;
}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:.92rem; background:var(--surface)}
caption{caption-side:bottom; text-align:left; font-size:.8rem; color:var(--muted); padding:var(--s2) var(--s3); line-height:1.55}
th,td{
  padding:13px 18px; text-align:right; vertical-align:middle;
  border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums;
}
th:first-child,td:first-child{text-align:left; font-variant-numeric:normal}
thead th{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); vertical-align:bottom; line-height:1.45;
  background:var(--sunk);
}
tbody tr:last-child td{border-bottom:0}
tbody tr.is-highlight td{background:var(--bronze-soft); font-weight:600}
tbody tr.is-highlight td:first-child{box-shadow:inset 3px 0 0 var(--bronze)}

/* ── Galerie ──────────────────────────────────────────────── */

.gallery{display:grid; gap:3px; grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{position:relative; margin:0; overflow:hidden; background:var(--sunk)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute; inset:auto 0 0 0; padding:32px 14px 12px;
  background:linear-gradient(180deg,rgba(10,16,15,0),rgba(10,16,15,.82));
  color:#F2EFE7; font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.gallery figure.is-wide{grid-column:span 2}
@media(min-width:820px){.gallery figure.is-wide img{aspect-ratio:8/3}}

.figure{margin:0}
.figure img{border-radius:var(--radius)}
.figure figcaption{margin-top:var(--s2); font-size:.83rem; color:var(--muted)}

/* ── Listen & Karten ──────────────────────────────────────── */

.poi{list-style:none}
.poi li{
  display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line-2); font-size:.95rem;
}
.poi li:first-child{border-top:1px solid var(--line-2)}
.poi b{font-weight:500; color:var(--bronze); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
/* Auf schmalen Schirmen müssen lange Werte („500–1.500 € statt 1.500–4.000 €")
   umbrechen dürfen, sonst sprengen sie die Seite. */
@media(max-width:620px){
  .poi b{white-space:normal}
  .poi li{grid-template-columns:1fr minmax(0,auto)}
}

.steps{list-style:none; counter-reset:s}
.steps li{
  counter-increment:s; display:grid; grid-template-columns:3.4ch 1fr; gap:0 var(--s3);
  padding:var(--s3) 0; border-top:1px solid var(--line-2);
}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--display); font-size:.95rem; font-weight:700; color:var(--bronze);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:.02em; padding-top:6px;
}
.steps h3{font-size:1.16rem; margin-bottom:5px}
.steps p{color:var(--ink-2); font-size:.95rem}

.cards{display:grid; gap:2px; grid-template-columns:1fr}
@media(min-width:720px){.cards--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.cards--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.cards--4{grid-template-columns:repeat(4,1fr)}}
.card{
  padding:var(--s4) var(--s3);
  background:var(--surface); border:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:var(--s2);
}
.card h3{font-size:1.2rem}
.card p{color:var(--ink-2); font-size:.94rem}
.card__list{list-style:none; margin-top:auto; padding-top:var(--s2)}
.card__list li{
  display:grid; grid-template-columns:1fr auto; gap:var(--s2); align-items:baseline;
  padding:8px 0; border-top:1px solid var(--line-2); font-size:.875rem;
}
.card__list li span{color:var(--muted)}
.card__list li b{font-weight:500; text-align:right; font-variant-numeric:tabular-nums}

.checks{list-style:none; display:grid; gap:9px}
.checks li{position:relative; padding-left:22px; font-size:.94rem; color:var(--ink-2)}
.checks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--bronze);
}

/* ── Formulare ────────────────────────────────────────────── */

.form{display:grid; gap:var(--s3)}
.form__row{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:620px){.form__row--2{grid-template-columns:1fr 1fr}}
.form__hint{font-size:.8rem; color:var(--muted); line-height:1.55}

.notice{
  padding:var(--s3); border-radius:var(--radius); border:1px solid var(--line);
  font-size:.92rem; display:flex; gap:var(--s2); align-items:flex-start;
}
.notice--ok{background:var(--sea-soft); border-color:color-mix(in srgb, var(--sea) 32%, transparent); color:var(--ink)}
.notice--warn{background:var(--bronze-soft); border-color:color-mix(in srgb, var(--bronze) 34%, transparent); color:var(--ink)}
.notice--info{background:var(--sunk); color:var(--ink-2)}

/* ── Abschlussband ────────────────────────────────────────── */

.closing{background:var(--console); color:var(--on-dark); padding-block:var(--s7)}
.closing h2{color:#F2EFE7}
.closing .lede{color:var(--on-dark-2)}
.closing .eyebrow{color:var(--on-dark-bronze)}
.closing__cta{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
.closing__meta{
  display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s5);
  padding-top:var(--s3); border-top:1px solid var(--line-dark);
  font-size:.87rem; color:var(--on-dark-3);
}

/* ── Fußzeile ─────────────────────────────────────────────── */

.foot{background:var(--sunk); border-top:1px solid var(--line-2); padding-block:var(--s6) var(--s4)}
.foot__in{
  max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:var(--s5); grid-template-columns:1fr;
}
@media(min-width:900px){.foot__in{grid-template-columns:1fr 1.5fr}}
.foot__brand p{color:var(--muted); font-size:.9rem; margin-top:var(--s1)}
.foot__meta{font-size:.82rem!important; margin-top:var(--s2)!important}
.foot__nav{display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.foot__nav{grid-template-columns:repeat(4,1fr)}}
.foot__nav h4{font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}
.foot__nav ul{list-style:none; display:grid; gap:9px}
.foot__nav a{font-size:.9rem; color:var(--ink-2); text-decoration:none}
.foot__nav a:hover{color:var(--bronze)}
.foot__legal{
  max-width:var(--page); margin:var(--s5) auto 0; padding:var(--s3) var(--gutter) 0;
  border-top:1px solid var(--line-2);
}
.foot__legal p{font-size:.775rem; color:var(--muted); line-height:1.65; max-width:96ch}
.foot__copy{margin-top:var(--s2)!important}

/* ── Bewegung ─────────────────────────────────────────────── */

/* Einblenden nur, wenn JavaScript läuft — sonst ist alles sofort sichtbar.
   Ohne die .js-Bedingung bliebe der Inhalt bei JS-Fehlern dauerhaft unsichtbar. */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .js .reveal,.js .reveal.is-in{opacity:1; transform:none}
}

@media print{
  .topbar,.foot__nav,.closing__cta,.btn,.burger{display:none!important}
  body{background:#fff; color:#000}
}