/* ============================================================
   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;
  /* Deutsche Komposita sind laenger als jede Spalte: "Datenschutzerklaerung"
     sprengte auf 375 px die Seite. hyphens greift dank <html lang="de">,
     overflow-wrap faengt ab, wofuer es keine Trennstelle gibt. */
  hyphens:auto;
  overflow-wrap:break-word;
}
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)}

/* Umschaltpunkt der Navigation.
   Stand bis 18.08.2026 auf 920 px. Mit dem neunten Menuepunkt ("Ueber uns")
   passt die Leiste erst ab rund 1040 px in eine Zeile — dazwischen schob sie
   die ganze Seite ueber den Rand. Lieber das Klappmenue etwas laenger zeigen
   als eine gequetschte Leiste. */
@media(max-width:1039px){
  .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)}
/* Dieselbe Falle bei Grid: "1,016 Mrd. $" ist breiter als eine halbe
   Handybreite und dehnte die Spalte, statt umzubrechen. */
.facts > div{min-width:0}
@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); overflow-wrap:break-word}
.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}
.unit__note{margin-top:5px; font-size:.74rem; color:var(--muted); line-height:1.4}

.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;
}
/* Keine erzwungene Mindestbreite.
   Sie stand auf 640 px und war der Grund, warum Tabellen selbst dort
   scrollten, wo genug Platz war: Der Lesebereich ist auf 66 Zeichen (rund
   600 px) begrenzt, drei von vier Ratgebertabellen brauchen natuerlich nur
   381 bis 481 px. Der Browser verkleinert eine Tabelle ohnehin nie unter die
   Breite ihres Inhalts — das Mindestmass erzeugte also nur Leerraum und
   Scrollbalken. Wirklich breite Tabellen (Marktvergleich, 743 px) bekommen
   ihre Breite weiterhin vom Inhalt und scrollen auf dem Handy im Rahmen. */
table{border-collapse:collapse; width:100%; font-size:.92rem; background:var(--surface)}

/* Faktentabellen im Lesebereich brauchen kein Mindestmass.
   Der Lesebereich ist auf 66 Zeichen begrenzt — rund 600 px —, die
   Mindestbreite von 640 px lag also IMMER darueber. Impressum und
   Datenschutz zeigten dadurch auf jedem Bildschirm einen Scrollbalken,
   auch auf einem grossen Monitor. Zwei- und dreispaltige Beschriftungs-
   Wert-Tabellen brechen stattdessen um. Die breiten Vergleichstabellen
   in Ratgeber und Marktseite stehen ausserhalb von .read und behalten
   ihre Mindestbreite. */
/* Die Einfassung bleibt: Ohne sie schiebt eine zu breite Tabelle die ganze
   Seite nach rechts. Sie zeigt jetzt nur noch dann einen Balken, wenn der
   Inhalt wirklich nicht hineinpasst — nicht mehr grundsaetzlich. */

/* Ganz schmale Geraete: Beschriftung ueber den Wert statt daneben, und
   insgesamt etwas kompakter, damit auch dreispaltige Tabellen hineinpassen. */
@media (max-width:560px){
  .read table{font-size:.82rem}
  .read table th, .read table td{padding:9px 10px}
  .read table th[scope="row"]{width:auto; padding-bottom:1px}
  .read table th[scope="row"], .read table th[scope="row"] + td{display:block; text-align:left}
  .read table th[scope="row"] + td{padding-top:0; padding-bottom:11px}
}
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)}

/* Unterlage-Block auf den Ratgeberseiten: links wofuer, rechts das Formular.
   Auf dem Handy untereinander, Formular zuletzt — erst der Grund, dann die
   Aufforderung. */
.unterlage{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start}
.unterlage > *{min-width:0}
@media(min-width:920px){
  .unterlage{grid-template-columns:1.05fr .95fr; gap:var(--s6)}
}
.unterlage__form{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow-sm);
}
@media(min-width:920px){ .unterlage__form{padding:var(--s5)} }
.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;
}
/* Flex-Kinder schrumpfen sonst nicht unter ihre Inhaltsbreite (min-width:auto)
   und schoben auf 375 px die ganze Seite nach rechts. */
.notice > *{min-width:0}
.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)}}

/* Ab 900 px wird der Fussbereich zweispaltig, die Linkleiste bekommt dann nur
   noch rund 457 px — behielt aber ihre vier Spalten. Deren Inhalt („Aufenthaltstitel
   in Georgien") passt dort nicht hinein, und Gitterspalten schrumpfen nicht unter
   ihr laengstes Wort: Die Seite lief bei genau dieser Breite ueber den Rand.
   Zwischen 900 und 1100 px deshalb zwei Spalten. */
@media(min-width:900px) and (max-width:1099px){
  .foot__nav{grid-template-columns:repeat(2,1fr)}
}
/* Sicherheitsnetz gegen denselben Fehler an anderer Stelle. */
.foot__nav > *{min-width:0}
.foot__nav a{overflow-wrap:break-word}
.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}
}

/* ── Ratgeber: Bilder ─────────────────────────────────────── */

/* Aufmacher, randlos über die volle Breite. Die Bildunterschrift läuft
   im Textraster mit, damit sie nicht am Rand klebt. */
.ratgeber__hero{margin:0; background:var(--sunk)}
.ratgeber__hero img{
  width:100%; aspect-ratio:21/9; object-fit:cover;
  max-height:min(58vh, 520px);
}
@media(max-width:720px){
  .ratgeber__hero img{aspect-ratio:16/10; max-height:none}
}
.ratgeber__hero figcaption{
  padding-block:var(--s3);
  font-size:.87rem; color:var(--muted); line-height:1.6;
  max-width:var(--read);
}

.bildgitter{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:620px){.bildgitter{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.bildgitter{grid-template-columns:repeat(3,1fr)}}
.bildgitter figure{margin:0; display:flex; flex-direction:column}
.bildgitter img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius); background:var(--sunk);
}
.bildgitter figcaption{
  margin-top:var(--s2); font-size:.83rem; color:var(--muted); line-height:1.5;
}
.bildgitter figure.is-wide{grid-column:1 / -1}
@media(min-width:620px){.bildgitter figure.is-wide img{aspect-ratio:2.6/1}}

/* Ratgeberkarte mit Bild oben */
.card--bild{padding:0; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease}
.card--bild:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card--bild img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--sunk)}
.card--bild .card__text{
  padding:var(--s4) var(--s3); display:flex; flex-direction:column;
  gap:var(--s2); flex:1;
}


/* ── KI-Berater ────────────────────────────────────────────────────
   Fenster unten rechts. Bewusst zurueckhaltend: kein aufspringendes
   Sprechblasen-Theater, sondern ein Knopf, der wartet, bis er gebraucht
   wird. Auf dem Handy nimmt das offene Fenster fast die ganze Flaeche. */
.berater{position:fixed; right:var(--s3); bottom:var(--s3); z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2)}

/* Das hidden-Attribut muss die display-Regeln hier schlagen.
   Browser blenden es ueber [hidden]{display:none} aus — eine Regel mit sehr
   geringer Spezifitaet. Jedes .klasse{display:flex} gewinnt dagegen. Genau
   daran hing der Schliessknopf: Das Skript setzte hidden korrekt, das Fenster
   blieb trotzdem stehen. Betrifft ebenso das Eingabefeld am Gespraechsende. */
.berater[hidden], .berater [hidden]{display:none}

.berater__ruf{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--console); color:var(--on-dark); border:1px solid var(--line-dark);
  border-radius:999px; padding:12px 18px; cursor:pointer;
  font:600 .88rem/1 var(--sans); letter-spacing:.01em;
  box-shadow:var(--shadow-lg); transition:transform .18s ease, background .18s ease;
}
.berater__ruf:hover{transform:translateY(-1px); background:var(--console-2)}
.berater__ruf-punkt{width:7px; height:7px; border-radius:50%;
  background:var(--on-dark-sea); flex-shrink:0}
.berater.is-offen .berater__ruf{display:none}

.berater__fenster{
  width:min(94vw, 400px); height:min(76vh, 560px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.berater__kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2);
  padding:var(--s3); background:var(--console); color:var(--on-dark);
}
.berater__auge{font:700 .64rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-bronze); margin:0 0 5px}
.berater__kopf h2{font-size:1rem; margin:0; color:var(--on-dark)}
.berater__zu{background:none; border:0; color:var(--on-dark-2); cursor:pointer;
  padding:4px; line-height:0; border-radius:4px}
.berater__zu:hover{color:var(--on-dark)}

.berater__lauf{flex:1; overflow-y:auto; padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3); background:var(--ground)}
.berater__zeile{max-width:88%; font-size:.9rem; line-height:1.6}
.berater__zeile p{margin:0 0 .55em}
.berater__zeile p:last-child{margin-bottom:0}
.berater__zeile--bot{align-self:flex-start; color:var(--ink)}
.berater__zeile--ich{align-self:flex-end; background:var(--sunk);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:10px 13px; color:var(--ink-2)}

.berater__warten{display:flex; gap:5px; align-items:center; padding:6px 0}
.berater__warten span{width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:beraterPuls 1.2s infinite ease-in-out}
.berater__warten span:nth-child(2){animation-delay:.18s}
.berater__warten span:nth-child(3){animation-delay:.36s}
@keyframes beraterPuls{0%,60%,100%{opacity:.25} 30%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .berater__warten span{animation:none; opacity:.5}
  .berater__ruf{transition:none}
}

.berater__vorschlaege{display:flex; flex-wrap:wrap; gap:6px;
  padding:0 var(--s3) var(--s3); background:var(--ground)}
.berater__vorschlaege button{
  background:var(--surface); border:1px solid var(--line-2); border-radius:999px;
  padding:7px 12px; font:400 .8rem/1.2 var(--sans); color:var(--ink-2); cursor:pointer;
}
.berater__vorschlaege button:hover{border-color:var(--bronze); color:var(--ink)}

/* Beschriftung nur fuer Screenreader. */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.berater__form{display:flex; gap:8px; padding:var(--s3);
  border-top:1px solid var(--line-2); background:var(--surface)}
.berater__form input[type=text]{flex:1; min-width:0; font-size:.9rem}
.berater__form button[type=submit]{
  flex-shrink:0; width:40px; display:grid; place-items:center;
  background:var(--console); color:var(--on-dark); border:0;
  border-radius:var(--radius); cursor:pointer;
}
.berater__form button[type=submit]:hover{background:var(--console-2)}
.berater__fuss{margin:0; padding:0 var(--s3) var(--s3); background:var(--surface);
  font-size:.7rem; line-height:1.5; color:var(--muted)}

@media (max-width:560px){
  .berater{right:10px; bottom:10px; left:10px; align-items:stretch}
  .berater__fenster{width:auto; height:min(80vh, 620px)}
  .berater__ruf{align-self:flex-end}
}

/* ── Rollenwahl (zugang.php) ──────────────────────────────────────────
   Zwei grosse Karten statt zweier Links. Bewusst mit viel Fläche: Diese
   Seite wird im Stehen auf dem Handy benutzt, nicht am Schreibtisch. */
.zugang{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.zugang__karte{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4); border:1px solid var(--line); border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow-sm);
  text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
.zugang__karte:hover{border-color:var(--sea); box-shadow:var(--shadow); transform:translateY(-2px)}
.zugang__karte--admin:hover{border-color:var(--bronze)}
.zugang__karte:active{transform:translateY(0)}
.zugang__zeichen{
  display:grid; place-items:center; width:52px; height:52px; border-radius:13px;
  background:var(--sea-soft); color:var(--sea); margin-bottom:var(--s1);
}
.zugang__karte--admin .zugang__zeichen{background:var(--bronze-soft); color:var(--bronze)}
.zugang__zeichen svg{width:26px; height:26px}
.zugang__karte h2{font-size:1.35rem; margin:0}
.zugang__karte p{color:var(--muted); margin:0}
.zugang__karte ul{list-style:none; padding:0; margin:var(--s1) 0 0; display:flex; flex-wrap:wrap; gap:6px}
.zugang__karte li{
  font-size:.8rem; padding:3px 10px; border-radius:999px;
  background:var(--sunk); color:var(--ink-2);
}
.zugang__los{
  margin-top:auto; padding-top:var(--s3); font-weight:600; color:var(--sea);
  display:inline-flex; align-items:center; gap:8px;
}
.zugang__karte--admin .zugang__los{color:var(--bronze)}

/* ── Umschalter für Sprache und Währung ───────────────────────────────
   Klein und ruhig: Er gehört in den Kopf, soll dort aber nicht mit dem
   Beratungsknopf um Aufmerksamkeit ringen. */
.umschalt{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.umschalt__gruppe{
  display:inline-flex; align-items:center; margin:0; padding:2px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.umschalt__knopf{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:26px; padding:0 9px; border:0; border-radius:999px;
  background:none; font:inherit; font-size:.74rem; font-weight:700;
  letter-spacing:.03em; color:var(--muted); text-decoration:none; cursor:pointer;
  transition:background .12s, color .12s;
}
.umschalt__knopf:hover{color:var(--ink)}
.umschalt__knopf.ist{background:var(--sea); color:#fff}
@media (max-width:1039px){
  .umschalt{width:100%; padding-top:var(--s2); border-top:1px solid var(--line-2)}
}