/* ============================================================
   DXB Radar - main.css (v4)

   v3 war redaktionell hell und las sich wie ein Blog von 2022.
   Jetzt: fast schwarzer Grund, ein elektrischer Akzent, sehr grosse
   eng laufende Grotesk, Bento-Raster, waagerechte Leiste, Korn ueber
   allen Flaechen und Bewegung beim Scrollen.

   Mobile first. Umbrueche: 640 / 900 / 1200.
   ============================================================ */

:root{
  /* Ruhig und fast einfarbig. Die vorige Fassung war an zu vielen Stellen
     gleichzeitig laut - Laufband, Knoepfe, Kacheln, Band, FAQ. Rueckmeldung
     war woertlich "Farbe macht Angst". Akzent jetzt gedaempftes Bernstein,
     sparsam eingesetzt; Neongruen ist ganz raus. */
  --bg:#131110;              /* warmes Dunkel statt kaltem Schwarzgrau */
  --bg-2:#1a1715;
  --card:#1e1a18;
  --card-2:#26211e;
  --line:#35302c;
  --line-soft:#2a2522;

  --light:#f6f3ec;
  --light-2:#ece7dd;

  --text:#f7f6f3;            /* Text deutlich heller als vorher */
  --muted:#b4b1aa;           /* war #8f8d88 - zu schwach auf Schwarz */
  --dim:#8b8880;

  --acc:#d8a24a;             /* Bernstein, kein Alarmrot */
  --teal:#0f5257;            /* Petrol - Gegenfarbe zum Bernstein */
  --teal-2:#14676d;
  --teal-deep:#0a3c40;
  --acc-soft:#e8bd74;
  --acc-dim:rgba(216,162,74,.14);
  --ink:#131110;

  --f-display:'Space Grotesk','Inter Tight',system-ui,sans-serif;
  --f-sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1320px;
  --wrap-mid:920px;
  --wrap-text:700px;
  --pad:1.15rem;
  --sec:4rem;
  --r:16px;
  --r-sm:10px;

  color-scheme:dark;
}
html[lang="ar"],html[lang="ur"],html[lang="fa"]{--f-sans:'Noto Sans Arabic','Inter Tight',sans-serif;--f-display:'Noto Sans Arabic',sans-serif;}
html[lang="hi"]{--f-sans:'Noto Sans Devanagari','Inter Tight',sans-serif;--f-display:'Noto Sans Devanagari',sans-serif;}
html[lang="zh"]{--f-sans:'Inter Tight','PingFang SC','Microsoft YaHei',sans-serif;--f-display:'Space Grotesk','PingFang SC',sans-serif;}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-sans);font-size:16.5px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Korn ueber der ganzen Seite - nimmt die digitale Sterilitaet raus */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:url("/assets/img/noise.png");opacity:.5;mix-blend-mode:overlay;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}

h1,h2,h3{margin:0 0 .45em;font-family:var(--f-display);font-weight:700;line-height:.96;letter-spacing:-.04em;}
h1{font-size:clamp(3rem,14vw,8.5rem);text-transform:uppercase;}
h2{font-size:clamp(2.1rem,8.5vw,4.6rem);text-transform:uppercase;}
h3{font-family:var(--f-sans);font-weight:700;font-size:1.1rem;line-height:1.2;letter-spacing:-.02em;text-transform:none;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}
.wrap-mid{max-width:var(--wrap-mid);}
.wrap-text{max-width:var(--wrap-text);}
.mono{font-family:var(--f-mono);}
.icon{width:1.15em;height:1.15em;flex:none;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1.1rem;
  padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:transparent;
}
.eyebrow .icon{color:var(--acc);}
.eyebrow .icon{width:.9rem;height:.9rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 1.5rem;border:1px solid transparent;border-radius:999px;
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.btn .icon{width:1.05rem;height:1.05rem;}
/* Weiss wirkte leblos. Bernstein fuer die Hauptaktion, Petrol daneben -
   die beiden liegen sich auf dem Farbkreis gegenueber. */
.btn-primary{background:var(--acc);color:#1a1408;}
.btn-primary:hover{background:var(--acc-soft);transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(216,162,74,.3);}
.btn-accent{background:var(--teal);color:#f2efe7;border-color:var(--teal);}
.btn-accent:hover{background:var(--teal-2);transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(15,82,87,.45);}
.btn-outline{border-color:rgba(216,162,74,.45);color:var(--acc);background:rgba(216,162,74,.05);}
.btn-outline:hover{background:var(--acc);color:#1a1408;border-color:var(--acc);transform:translateY(-2px);}
.band .btn-light{background:#f2efe7;color:var(--teal-deep);}
.band .btn-light:hover{background:#fff;}
.btn-light{background:var(--text);color:var(--ink);}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3);}
.btn-sm{padding:.6rem 1rem;font-size:.84rem;}
.btn-block{width:100%;}

/* ---------- Laufband ---------- */
.ticker{background:var(--bg-2);color:var(--muted);overflow:hidden;
  border-bottom:1px solid var(--line);}
.ticker-track{
  display:flex;gap:2.5rem;white-space:nowrap;padding:.5rem 0 .5rem var(--pad);
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.02em;
  animation:marquee 55s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-item{display:inline-flex;align-items:center;gap:.45rem;}
.ticker-item b{font-weight:600;color:var(--text);}
.ticker-item .icon{width:.9rem;height:.9rem;color:var(--acc);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .ticker-track{animation-name:marquee-rtl;}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------- Kopf ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,11,12,.72);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px;}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.02em;text-transform:uppercase;flex:none;}
.logo::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 3px var(--acc-dim);animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{0%,100%{box-shadow:0 0 0 3px var(--acc-dim)}50%{box-shadow:0 0 0 7px rgba(216,162,74,0)}}
.logo b{color:var(--acc);font-weight:700;}
.main-nav{display:none;gap:.15rem;}
.main-nav a{
  padding:.45rem .7rem;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--muted);
  transition:color .18s,background .18s;
}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,.06);}
.main-nav a[aria-current="page"]{color:#f2efe7;background:var(--teal);}
.header-right{display:none;align-items:center;gap:.55rem;}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  padding:0 11px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;cursor:pointer;flex:none;}
.burger span{display:block;height:1.6px;background:var(--text);transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:var(--nav-top,100px) 0 0 0;z-index:59;background:var(--bg);
  padding:1.4rem var(--pad) 2.5rem;display:flex;flex-direction:column;gap:1.1rem;overflow-y:auto;
  animation:fade .2s ease;
}
.mobile-nav[hidden]{display:none;}
.mobile-nav nav{display:flex;flex-direction:column;gap:.2rem;}
.mobile-nav nav a{
  display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:700;font-size:1.45rem;text-transform:uppercase;
  letter-spacing:-.03em;background:var(--card);border:1px solid var(--line-soft);
}
.mobile-nav nav a .icon{width:1.1rem;height:1.1rem;color:var(--acc);}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Sprachwahl */
.lang-wrap{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .75rem;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;color:var(--muted);
  font-family:var(--f-mono);font-size:.7rem;transition:border-color .18s,color .18s;}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--text);border-color:var(--text);}
.lang-btn .icon{width:1rem;height:1rem;color:var(--acc);}
.lang-btn .caret{width:.75rem;height:.75rem;transition:transform .2s;}
.lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;z-index:80;min-width:200px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.35rem;
  box-shadow:0 24px 60px rgba(0,0,0,.6);display:grid;gap:1px;animation:fade .15s ease;}
.lang-menu[hidden]{display:none;}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .75rem;border-radius:var(--r-sm);font-size:.94rem;}
.lang-opt:hover{background:var(--card-2);}
.lang-opt.is-active{background:var(--acc);color:var(--ink);}
.lang-code{font-family:var(--f-mono);font-size:.66rem;color:var(--dim);}
.lang-opt.is-active .lang-code{color:rgba(19,17,16,.62);}
.mobile-nav .lang-wrap{width:100%;}
.mobile-nav .lang-btn{width:100%;justify-content:space-between;padding:.9rem 1rem;font-size:.82rem;}
.mobile-nav .lang-menu{position:static;width:100%;box-shadow:none;margin-top:.4rem;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;}
.hero-media{position:absolute;inset:0;z-index:-2;}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.04);}
.hero-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 72% 12%,rgba(216,162,74,.16),transparent 58%),
             linear-gradient(180deg,rgba(19,17,16,.35) 0%,rgba(19,17,16,.7) 58%,var(--bg) 100%);}
.hero-radar{position:absolute;z-index:-1;inset-inline-end:-30%;top:-14%;width:min(88vw,660px);
  color:#fff;opacity:.28;pointer-events:none;}
.hero-inner{position:relative;padding-block:3.5rem 2.5rem;}
.hero h1{margin-bottom:1.1rem;}
.hero h1 .accent{color:var(--acc);}
.hero .lead{max-width:36rem;font-size:1.05rem;color:#c9c7c1;margin-bottom:1.9rem;}
.cta-row{display:flex;flex-direction:column;gap:.7rem;}

/* Kennzahlen als schwebende Leiste */
.figures{position:relative;z-index:2;margin-top:-.5rem;}
.figures-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.figure{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.95rem .7rem;text-align:center;}
.figure b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.6rem;
  letter-spacing:-.04em;color:var(--text);line-height:1;white-space:nowrap;}
.figure span{display:block;margin-top:.35rem;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);line-height:1.3;}
.figure b::after{content:"";display:block;width:22px;height:2px;background:var(--acc);
  margin:.55rem auto 0;}

/* ---------- Abschnitte ---------- */
.section{padding-block:var(--sec);position:relative;}
/* Petrol-Abschnitt bricht das Dunkel auf, ohne grell zu werden. */
.section--teal{background:linear-gradient(160deg,var(--teal-deep),var(--teal));color:#f2efe7;}
.section--teal h2,.section--teal h3{color:#fff;}
.section--teal p{color:rgba(242,239,231,.78);}
.section--teal .eyebrow{color:rgba(242,239,231,.8);border-color:rgba(242,239,231,.24);}
.section--teal .eyebrow .icon{color:var(--acc);}
.section--teal .step,.section--teal .checks li{background:rgba(255,255,255,.06);
  border-color:rgba(242,239,231,.18);}
.section--teal .step p,.section--teal .checks li{color:rgba(242,239,231,.86);}
.section--teal .step-n{color:var(--acc);}
.section--teal .checks .icon{color:var(--acc);}

.section--light{background:var(--light);color:var(--ink);}
.section--light .tile{background:#fffdf9;border-color:rgba(19,17,16,.1);}
.section--light .tile h3{color:var(--ink);}
.section--light .tile p{color:#5d5952;}
.section--light .tile-n{color:#9a6f14;}
.section--light .tile--feature{background:#fdf7ea;}
.section--light .tile--media h3,.section--light .tile--media p{color:#fff;}
.section--light .topics,.section--light .post-row{border-color:rgba(19,17,16,.12);}
.section--light .post-row{background:#fffdf9;}
.section--light .post-row h3{color:var(--ink);}
.section--light .post-row .sub{color:#8a877f;}
.section--light h1,.section--light h2,.section--light h3{color:var(--ink);}
.section--light .eyebrow{color:#6b6862;border-color:rgba(19,17,16,.16);}
.section--light .eyebrow .icon{color:#9a6f14;}
.section--light .rail-hint{color:#8a877f;}
.section--light .rail-btn{background:#fff;border-color:rgba(19,17,16,.14);color:var(--ink);}
.section--light .table-hint{color:#8a877f;}
.section--light .eyebrow{color:var(--acc);border-color:rgba(11,11,12,.14);background:rgba(255,77,28,.08);}
.section--light p{color:#4a4844;}
.section--light .btn-outline{border-color:rgba(11,11,12,.2);color:var(--ink);background:transparent;}
.section--light .btn-outline:hover{background:var(--ink);color:var(--light);border-color:var(--ink);}
.section-head{margin-bottom:2rem;max-width:42rem;}
.section-head p{font-size:1.02rem;color:var(--muted);margin:0;}
.section--light .section-head p{color:#57544f;}

/* ---------- Bento ---------- */
.bento{display:grid;gap:.75rem;grid-template-columns:1fr;}
.tile{
  position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .25s,transform .25s,background .25s;
}
.tile:hover{border-color:var(--acc);transform:translateY(-3px);}
/* Die farbigen Kacheln (Orange, Limette) waren unlesbar und unruhig.
   Jetzt einheitlich, unterschieden nur ueber Groesse und Bild. */
.tile--feature{background:var(--card-2);border-color:var(--line);}
.tile--feature::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--acc);}
.tile--media{padding:0;min-height:240px;justify-content:flex-end;}
.tile--media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.tile--media:hover img{transform:scale(1.06);}
.tile--media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,17,16,.15) 0%,rgba(19,17,16,.55) 38%,rgba(19,17,16,.93) 72%,rgba(19,17,16,.99) 100%);}
.tile--media > *{position:relative;z-index:2;}
.tile--media .tile-body{padding:1.3rem;}
.tile-n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--acc);}
.tile h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.4rem;
  text-transform:uppercase;letter-spacing:-.03em;}
.tile p{margin:0;color:var(--muted);font-size:.94rem;}
.tile--media h3,.tile--media p{text-shadow:0 1px 12px rgba(0,0,0,.55);}
.tile .go{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.tile .go .icon{transition:transform .25s;}
.tile:hover .go .icon{transform:translateX(4px);}
[dir="rtl"] .tile:hover .go .icon{transform:translateX(-4px);}

/* ---------- Waagerechte Leiste ---------- */
/* Vorher lief die Leiste hart aus dem Bild und niemand sah, dass sie
   scrollbar ist. Jetzt mit Blende am Rand, Pfeilen und Hinweiszeile. */
.rail-wrap{position:relative;}
.rail-wrap::after{content:"";position:absolute;top:0;bottom:.9rem;inset-inline-end:0;width:64px;
  pointer-events:none;opacity:var(--fade,1);transition:opacity .25s;
  background:linear-gradient(to left,var(--bg),transparent);}
.section--light .rail-wrap::after{background:linear-gradient(to left,var(--light),transparent);}
[dir="rtl"] .rail-wrap::after{background:linear-gradient(to right,var(--bg),transparent);}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;}
.rail-hint{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.rail-nav{display:flex;gap:.4rem;}
.rail-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s;}
.rail-btn:hover{border-color:var(--acc);background:var(--card-2);}
.rail-btn:disabled{opacity:.3;cursor:default;}
.rail-btn svg{width:1rem;height:1rem;}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:.75rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.9rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.rail > *{scroll-snap-align:start;}
.rail::-webkit-scrollbar{height:5px;}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}

/* ---------- Eintragskarte ---------- */
.entry{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s;}
.entry:hover{border-color:var(--acc);transform:translateY(-3px);}
.entry .shot{position:relative;overflow:hidden;background:var(--card-2);}
.entry .shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.entry:hover .shot img{transform:scale(1.05);}
.entry .tag{position:absolute;top:.7rem;inset-inline-start:.7rem;z-index:2;
  background:rgba(11,11,12,.78);backdrop-filter:blur(6px);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.28rem .55rem;border-radius:999px;}
.entry .tag.deal{background:var(--acc);border-color:var(--acc);color:#fff;}
.entry .body{padding:1.25rem 1.3rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
/* War 0.62rem in der blassesten Farbe - unter dem Bild kaum zu lesen. */
.entry .kicker{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-dim);border-radius:999px;padding:.28rem .6rem;}
.entry .kicker .icon{width:.9rem;height:.9rem;}
.section--light .entry .kicker{color:#8a6212;background:rgba(216,162,74,.16);}
.entry h3{margin:0;font-size:1.1rem;line-height:1.3;}
.entry p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.58;}
.entry .foot{display:flex;align-items:center;justify-content:space-between;gap:.9rem;margin-top:auto;
  padding-top:1rem;border-top:1px solid var(--line-soft);font-family:var(--f-mono);font-size:.72rem;}
.entry .price{color:var(--text);font-weight:600;}
.entry .go{color:var(--acc);display:inline-flex;align-items:center;gap:.3rem;}
.entry .tag{color:var(--text);}
.entry .tag.deal{background:var(--acc);border-color:var(--acc);color:var(--ink);font-weight:600;}

/* ---------- Themenliste ---------- */
.topics{border-top:1px solid var(--line);}
.topic{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem 1rem;align-items:center;
  padding:1.15rem 0;border-bottom:1px solid var(--line);transition:padding-inline .3s,background .3s;}
.topic:hover{padding-inline:.9rem;background:var(--card);}
.topic-n{font-family:var(--f-mono);font-size:.7rem;color:var(--acc);}
.topic h3{margin:0 0 .1rem;font-family:var(--f-display);font-weight:700;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:-.03em;}
.topic p{margin:0;color:var(--muted);font-size:.9rem;}
.topic-go{color:var(--acc);transition:transform .25s;}
.topic:hover .topic-go{transform:translateX(5px);}
[dir="rtl"] .topic:hover .topic-go{transform:translateX(-5px);}
.section--light .topics,.section--light .topic{border-color:rgba(11,11,12,.12);}
.section--light .topic:hover{background:rgba(11,11,12,.04);}
.section--light .topic p{color:#57544f;}

/* ---------- Schritte ---------- */
.steps{display:grid;gap:.75rem;grid-template-columns:1fr;}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;}
.step-n{font-family:var(--f-mono);font-size:.68rem;color:var(--acc);display:block;margin-bottom:.9rem;}
.step h3{font-family:var(--f-display);font-weight:700;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:-.03em;margin-bottom:.4rem;}
.step p{margin:0;color:var(--muted);font-size:.93rem;}
.section--light .step{background:#fff;border-color:rgba(11,11,12,.1);}
.section--light .step p{color:#57544f;}

/* ---------- Merkmale ---------- */
.checks{display:grid;gap:.6rem;}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1rem;font-size:.96rem;}
.checks .icon{color:var(--acc);width:1.05rem;height:1.05rem;margin-top:.22rem;}
.section--light .checks li{background:#fff;border-color:rgba(11,11,12,.1);}
.section--light .checks .icon{color:var(--acc);}

/* ---------- Tabelle ---------- */
/* Die Tabelle lief auf dem Handy rechts aus dem Bild. Jetzt mit Blende
   und Hinweis, dass man wischen kann. */
.table-outer{position:relative;}
.table-outer::after{content:"";position:absolute;top:1px;bottom:1px;inset-inline-end:1px;width:48px;
  pointer-events:none;border-radius:0 var(--r) var(--r) 0;
  background:linear-gradient(to left,var(--card),transparent);}
.section--light .table-outer::after{background:linear-gradient(to left,#fff,transparent);}
@media (min-width:760px){.table-outer::after{display:none;}}
.table-hint{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-top:.6rem;}
@media (min-width:760px){.table-hint{display:none;}}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);}
table.data{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px;}
table.data th{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-weight:400;text-align:start;padding:.85rem 1rem;border-bottom:1px solid var(--line);}
table.data td{padding:.8rem 1rem;border-bottom:1px solid var(--line-soft);}
table.data tr:last-child td{border-bottom:0;}
table.data tbody tr:nth-child(even){background:rgba(255,255,255,.02);}
table.data tbody tr{transition:background .2s;}
table.data tbody tr:hover{background:var(--card-2);}
table.data td.num{font-family:var(--f-mono);color:var(--acc);white-space:nowrap;font-weight:500;}
.section--light .table-wrap{background:#fff;border-color:rgba(11,11,12,.1);}
.section--light table.data th{color:#8a877f;border-color:rgba(11,11,12,.12);}
.section--light table.data td{border-color:rgba(11,11,12,.08);}
.section--light table.data td.num{color:#9a6f14;}
.section--light table.data tbody tr:nth-child(even){background:rgba(19,17,16,.025);}
.section--light table.data tbody tr:hover{background:rgba(11,11,12,.03);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem;}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.faq details[open]{border-color:var(--acc);}
.faq summary{cursor:pointer;padding:1.1rem 3rem 1.1rem 1.2rem;list-style:none;position:relative;
  font-weight:600;font-size:1.02rem;letter-spacing:-.015em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;inset-inline-end:1.2rem;top:.95rem;
  font-family:var(--f-mono);color:var(--acc);font-size:1.3rem;}
.faq details[open] summary::after{content:"\2013";}
.faq details > p{margin:0;padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.95rem;}
.section--light .faq details{background:#fff;border-color:rgba(11,11,12,.1);}
.section--light .faq details > p{color:#57544f;}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:.82rem;color:var(--muted);
  transition:border-color .2s,color .2s;}
.chip:hover{border-color:var(--acc);color:var(--text);}
.chip .icon{width:.8rem;height:.8rem;color:var(--acc);}
.section--light .chip{background:#fff;border-color:rgba(11,11,12,.12);color:#57544f;}

/* ---------- Band ---------- */
.band{position:relative;overflow:hidden;color:#f2efe7;
  background:linear-gradient(135deg,var(--teal-deep) 0%,var(--teal) 55%,var(--teal-2) 100%);}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 82% 0%,rgba(216,162,74,.26),transparent 60%);}
.band .btn-accent{border-color:var(--acc);}
.band-inner{position:relative;padding-block:3rem;display:flex;flex-direction:column;gap:1.4rem;}
.band h2{margin:0 0 .5rem;color:#fff;}
.band p{margin:0;color:rgba(242,239,231,.82);}
.band .note{font-family:var(--f-mono);font-size:.72rem;margin-top:.5rem;color:rgba(242,239,231,.6);}

/* ---------- Fuss ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);}
.footer-top{padding-block:3rem 2rem;border-bottom:1px solid var(--line-soft);}
.footer-top h2{font-size:clamp(1.8rem,7vw,3.2rem);margin:0 0 .8rem;}
.footer-top p{color:var(--muted);margin:0 0 1.5rem;max-width:30rem;}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-block:2.5rem 2rem;}
.footer-grid h3{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-bottom:.9rem;}
.footer-grid ul{display:flex;flex-direction:column;gap:.5rem;}
.footer-grid ul{gap:.6rem;}
.footer-grid a{color:var(--muted);font-size:.95rem;transition:color .18s,padding .18s;
  display:inline-flex;align-items:center;gap:.45rem;}
.footer-grid a::before{content:'';width:0;height:1px;background:var(--acc);transition:width .18s;}
.footer-grid a:hover::before{width:12px;}
.footer-grid a:hover{color:var(--text);}
.foot-tag{color:var(--muted);font-size:.92rem;margin:.9rem 0 0;max-width:24rem;}
.foot-langs{flex-direction:row!important;flex-wrap:wrap;gap:.5rem .9rem!important;}
.footer-bottom{display:flex;flex-direction:column;gap:.5rem;padding-block:1.2rem 1.8rem;
  border-top:1px solid var(--line-soft);font-family:var(--f-mono);font-size:.68rem;color:var(--dim);}

/* ---------- Unterseiten ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate;}
.page-hero .hero-media img{opacity:.5;}
.page-hero-inner{position:relative;padding-block:2.8rem 2.4rem;}
.page-hero h1{font-size:clamp(2.3rem,10vw,5.6rem);margin-bottom:.8rem;}
.page-hero p{max-width:38rem;color:#c9c7c1;margin:0;font-size:1.02rem;}
.breadcrumb{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--dim);
  margin-bottom:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem;}
.breadcrumb a:hover{color:var(--acc);}

.post-list{display:grid;gap:.6rem;}
.post-row{display:grid;grid-template-columns:70px 1fr;gap:.9rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;
  transition:border-color .25s,transform .25s;}
.post-row:hover{border-color:var(--acc);transform:translateX(4px);}
[dir="rtl"] .post-row:hover{transform:translateX(-4px);}
.post-row .thumb{overflow:hidden;border-radius:var(--r-sm);background:var(--card-2);}
.post-row .thumb img{width:100%;aspect-ratio:1;object-fit:cover;}
.post-row h3{margin:0 0 .15rem;font-size:.98rem;}
.post-row .sub{font-family:var(--f-mono);font-size:.66rem;color:var(--dim);}
.empty-note{padding:2rem;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);text-align:center;}

/* ---------- Artikel ---------- */
.page-wrap{min-height:100vh;display:flex;flex-direction:column;}
.page-wrap > .site-footer{margin-top:auto;}
.article-hero{position:relative;height:min(56vw,380px);overflow:hidden;background:var(--card);}
.article-hero img{width:100%;height:100%;object-fit:cover;opacity:.62;}
.article-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,var(--bg));}
.signal-article{max-width:var(--wrap-text);margin:0 auto;padding:2rem var(--pad) 2.5rem;}
.article-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.3rem;
  font-family:var(--f-mono);font-size:.68rem;color:var(--dim);}
.badge{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.25rem .55rem;border:1px solid currentColor;border-radius:999px;}
.badge.high{color:var(--acc);} .badge.medium{color:var(--acc);} .badge.low{color:var(--dim);}
.signal-article h1{font-size:clamp(2rem,8vw,3.4rem);margin-bottom:1rem;}
.signal-article h2{font-size:1.7rem;margin:2.2rem 0 .8rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.signal-article h3{font-size:1.08rem;margin:1.6rem 0 .5rem;}
.signal-article p{color:#c2c0bb;}
.signal-article ul,.signal-article ol{margin:0 0 1.3rem;padding-inline-start:1.15rem;list-style:disc;color:#c2c0bb;}
.signal-article ol{list-style:decimal;}
.signal-article li{margin-bottom:.5rem;}
.signal-article strong{color:var(--text);}
.signal-article a{color:var(--acc);border-bottom:1px solid var(--acc);}
.signal-article table{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.9rem;display:block;overflow-x:auto;}
.signal-article th,.signal-article td{border-bottom:1px solid var(--line);padding:.6rem .8rem .6rem 0;text-align:start;}
.related-signals{max-width:var(--wrap-text);margin:0 auto;padding:0 var(--pad) 2rem;}
.related-signals h2{font-size:1.6rem;}
.article-cta{max-width:var(--wrap-text);margin:0 auto 3rem;padding:2.2rem var(--pad);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-align:center;}
.article-cta p{margin:0 0 1.1rem;color:var(--muted);}

/* Veranstaltungen: die Poster sind nur 100x100 Pixel gross. Auf Kartenbreite
   gezogen sahen sie matschig aus - deshalb als kleines Quadrat neben dem Text. */
.ev-list{display:grid;gap:.6rem;}
.ev{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem;
  transition:border-color .22s,transform .22s;}
.ev:hover{border-color:var(--acc);transform:translateY(-2px);}
.ev .shot{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;background:var(--card-2);}
.ev .shot img{width:100%;height:100%;object-fit:cover;image-rendering:auto;}
.ev .when{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:.15rem;}
.ev h3{margin:0 0 .12rem;font-size:1rem;line-height:1.25;}
.ev .where{font-size:.82rem;color:var(--dim);}
.ev .cost{font-family:var(--f-mono);font-size:.86rem;color:var(--text);white-space:nowrap;text-align:end;}
.ev .cost small{display:block;font-size:.6rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;}
.section--light .ev{background:#fffdf9;border-color:rgba(19,17,16,.12);}
.section--light .ev h3{color:var(--ink);}
.section--light .ev .where{color:#6b6862;}
.section--light .ev .cost{color:var(--ink);font-weight:600;}
.section--light .ev .cost small{color:#8a877f;}
.section--light .ev .when{color:#9a6f14;}
@media (min-width:640px){.ev-list{grid-template-columns:repeat(2,1fr);}}

/* ---------- Bewegung ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
.js .reveal.is-in{opacity:1;transform:none;}

/* ---------- RTL ---------- */
[dir="rtl"] body{text-align:right;}
[dir="rtl"] .hero-radar{inset-inline-end:auto;inset-inline-start:-30%;}
[dir="rtl"] .signal-article ul,[dir="rtl"] .signal-article ol{padding-inline-start:1.15rem;}

/* ---------- Umbrueche ---------- */
@media (min-width:520px){ .cta-row{flex-direction:row;flex-wrap:wrap;} }
@media (min-width:640px){
  :root{--sec:5rem;--pad:1.6rem;}
  body{font-size:17px;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento .span-2{grid-column:span 2;}
  .grid-3{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .checks{grid-template-columns:repeat(2,1fr);}
  .rail{grid-auto-columns:46%;}
  .band-inner{flex-direction:row;align-items:center;justify-content:space-between;}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
  .footer-grid{grid-template-columns:2fr 1fr 1fr;}
  .post-row{grid-template-columns:96px 1fr;}
  .hero-inner{padding-block:5.5rem 3.5rem;}
  .figures-inner{gap:.75rem;}
  .figure{padding:1.2rem 1rem;}
  .figure b{font-size:2.1rem;}
}
@media (min-width:900px){
  :root{--sec:6.5rem;}
  .bento{grid-template-columns:repeat(4,1fr);}
  .bento .span-2{grid-column:span 2;}
  .bento .span-3{grid-column:span 3;}
  .bento .row-2{grid-row:span 2;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .rail{grid-auto-columns:31%;}
  .hero-inner{padding-block:8rem 4.5rem;}
  .tile--media{min-height:260px;}
}
@media (min-width:1200px){
  .main-nav,.header-right{display:flex;}
  .burger{display:none;}
  .mobile-nav{display:none!important;}
  .hero-inner{padding-block:10rem 5.5rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .js .reveal{opacity:1;transform:none;}
}
@media print{
  .ticker,.site-header,.mobile-nav,.band,.article-cta,.hero-media,.hero-radar,.article-hero{display:none!important;}
  body{background:#fff;color:#000;} body::after{display:none;}
}

/* ---------------------------------------------------------------------------
   Leistungsseiten und Kontaktformular
   --------------------------------------------------------------------------- */
.nav-hi{color:var(--acc)}
.hide-sm{display:none}
@media (min-width:1100px){.hide-sm{display:inline-flex}}

.intro{font-size:clamp(1.05rem,.6rem+.9vw,1.3rem);line-height:1.65;color:var(--ink,inherit)}
.section--light .intro{color:#3a352f}

/* Nummerierte Punkte statt Haken - die Reihenfolge ist hier die Aussage */
.points{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.7rem}
@media (min-width:820px){.points{grid-template-columns:1fr 1fr;gap:.8rem 1.6rem}}
.points li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;
  border:1px solid var(--line);border-radius:14px;background:var(--card)}
.section--light .points li{background:#fff;border-color:#e2ddd3}
.points .p-n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--acc);padding-top:.2rem;flex:0 0 auto}
.points li span:last-child{line-height:1.55}
.section--light .points li span:last-child{color:#3a352f}

.bento--flat{grid-auto-rows:auto}
.bento--flat .tile{min-height:0}

/* Formular */
.lead{margin-top:2rem}
.lead{position:relative}
/* Honigtopf unsichtbar, aber ohne Versatz - ein left:-9999px hat in RTL die
   Seite auf ueber 11000 px verbreitert. */
.lead-trap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lead-grid{display:grid;gap:1rem}
@media (min-width:760px){.lead-grid{grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
  .lead-wide{grid-column:1 / -1}}
.lead-field{display:flex;flex-direction:column;gap:.4rem}
.lead-field>span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.section--teal .lead-field>span{color:rgba(255,255,255,.72)}
.lead input,.lead textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:.85rem .95rem;transition:border-color .16s,background .16s}
.lead textarea{resize:vertical;min-height:8.5rem;line-height:1.55}
.lead input::placeholder,.lead textarea::placeholder{color:rgba(255,255,255,.42)}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--acc);
  background:rgba(0,0,0,.34)}
.lead input:user-invalid,.lead textarea:user-invalid{border-color:#e0765a}

.lead-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;
  font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.86)}
.lead-consent input{width:1.15rem;height:1.15rem;flex:0 0 auto;margin-top:.16rem;
  accent-color:var(--acc)}
.lead-foot{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;margin-top:1.6rem}
.lead-note{margin:0;flex:1 1 16rem;font-size:.84rem;line-height:1.5;
  color:rgba(255,255,255,.6)}
.lead-done{margin-top:1.4rem;padding:1.3rem 1.4rem;border-radius:14px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18)}
.lead-done strong{display:block;font-family:var(--f-display);font-size:1.25rem;
  margin-bottom:.35rem}
.lead-done p{margin:0;color:rgba(255,255,255,.82);line-height:1.55}
.lead-error{margin-top:1.1rem;padding:.85rem 1rem;border-radius:12px;font-size:.92rem;
  background:rgba(224,118,90,.16);border:1px solid rgba(224,118,90,.5)}
.lead.is-sent .lead-grid,.lead.is-sent .lead-consent,.lead.is-sent .lead-foot{display:none}
[dir="rtl"] .points li,[dir="rtl"] .lead-consent{text-align:right}
/* Sicherheitsnetz: Formular auf heller Flaeche bleibt lesbar */
.section--light .lead input,.section--light .lead textarea{background:#fff;
  border-color:#ded8cd;color:#2a2622}
.section--light .lead input::placeholder,.section--light .lead textarea::placeholder{color:#9a938a}
.section--light .lead-consent{color:#3a352f}
.section--light .lead-note{color:#6c665e}
.section--light .lead-done{background:#fff;border-color:#ded8cd;color:#2a2622}
.section--light .lead-done p{color:#4a443d}

/* ---------------------------------------------------------------------------
   Fusszeile: drei Spalten, Sprachen sitzen bei der Marke.
   Vorher lief die vierte Spalte um und liess links ein grosses Loch stehen.
   --------------------------------------------------------------------------- */
.foot-brand h3{margin-top:2rem}
.foot-brand .foot-langs{margin-top:0}
@media (min-width:900px){
  .footer-grid{grid-template-columns:1.15fr .8fr 1.05fr;gap:2rem 3rem;align-items:start}
  .foot-brand .foot-langs{max-width:22rem}
}
@media (min-width:1200px){
  .footer-grid{grid-template-columns:1.2fr .7fr 1fr;gap:2rem 4rem}
}
/* Sprachen als eigene Zeile, damit die Markenspalte nicht halb leer steht */
.foot-langbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem 1.4rem;
  padding-block:1.4rem;border-top:1px solid var(--line-soft)}
.foot-langbar h3{margin:0}
.foot-langbar .foot-langs{gap:.5rem 1.3rem!important}
@media (min-width:900px){
  .footer-grid{grid-template-columns:1fr minmax(9rem,.55fr) minmax(11rem,.75fr);
    gap:2rem 3.5rem}
  .foot-brand{max-width:26rem}
}
@media (min-width:1200px){
  .footer-grid{grid-template-columns:1fr minmax(9rem,.5fr) minmax(12rem,.7fr);gap:2rem 4rem}
}
/* Die Sprachliste steht jetzt ausserhalb von .footer-grid und erbt dort kein
   display:flex mehr - deshalb hier ausdruecklich setzen. */
.foot-langbar .foot-langs{display:flex;flex-direction:row;flex-wrap:wrap}
.foot-langbar h3{flex:0 0 auto;min-width:7rem}
@media (min-width:900px){
  /* Marke schmal und fest, die beiden Listen teilen sich den Rest -
     sonst beginnt "Seiten" erst in der Seitenmitte. */
  .footer-grid{grid-template-columns:minmax(0,21rem) 1fr 1fr;gap:2rem 3rem}
  .foot-brand{max-width:none}
}
@media (min-width:1200px){
  .footer-grid{grid-template-columns:minmax(0,23rem) 1fr 1fr;gap:2rem 4rem}
}
/* Ueberschriften ausserhalb von .footer-grid haben deren Stil verloren */
.foot-langbar h3{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400}
.foot-reach{display:flex;flex-direction:column;gap:.6rem;margin-top:.9rem}
.foot-reach a{color:var(--muted);font-size:.95rem;display:inline-flex;align-items:center;
  gap:.55rem;transition:color .18s}
.foot-reach a:hover{color:var(--text)}
.foot-reach .icon{width:15px;height:15px;color:var(--acc);flex:0 0 auto}

/* ---------------------------------------------------------------------------
   Lesbarkeit kleiner Beschriftungen.
   Gemessen auf #131110: --dim lag bei 4,88:1 und damit gerade auf der
   Mindestnorm - bei 10 px Versalien mit Sperrung ist das zu wenig.
   Neuer Wert 7,2:1; die Abstufung tragen jetzt Groesse und Sperrung.
   --------------------------------------------------------------------------- */
:root{--dim:#a3a09a}
.figure span{font-size:.68rem;color:var(--muted)}
.rail-hint{font-size:.7rem;color:var(--muted)}
.table-hint{color:var(--muted)}
.data th{color:var(--muted)}
.footer-bottom{color:var(--muted)}
/* Auf der hellen Flaeche waren dieselben Kleinschriften bei rund 3,2:1 */
.section--light .table-hint{color:#4f4c47}
.section--light .data th{color:#4f4c47}
.section--light .rail-hint{color:#4f4c47}
.section--light .post-row .sub{color:#5d5952}
.section--light .figure span{color:#4f4c47}
.section--light .footer-bottom{color:#4f4c47}

/* ---------------------------------------------------------------------------
   Kopfzeile und Mobilmenue
   backdrop-filter macht die Kopfzeile zum Bezugsrahmen fuer position:fixed.
   Das Menue steht deshalb jetzt ausserhalb von <header> (siehe components.py).
   Zusaetzlich bekommt die Kopfzeile eine eigene Compositor-Ebene, sonst wird
   der Weichzeichner beim Scrollen in jedem Bild neu gerechnet und flackert.
   --------------------------------------------------------------------------- */
.site-header{
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  transform:translate3d(0,0,0);
  will-change:transform;
  /* kein contain:paint - das schnitt das Sprachmenue an der Kopfkante ab */
}
@media (prefers-reduced-motion:reduce){
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
}
/* Hoehe ausdruecklich statt ueber bottom:0 - so haengt sie an keinem
   Bezugsrahmen und das Menue ist auch bei Adressleisten-Wechsel voll da. */
.mobile-nav{
  inset:var(--nav-top,100px) 0 auto 0;
  height:calc(100dvh - var(--nav-top,100px));
  max-height:calc(100dvh - var(--nav-top,100px));
  overscroll-behavior:contain;
}
@supports not (height: 100dvh){
  .mobile-nav{height:calc(100vh - var(--nav-top,100px));
    max-height:calc(100vh - var(--nav-top,100px))}
}
/* Mit der Hilfe-Seite sind es elf Punkte plus Sprachwahl und zwei Knoepfe.
   Etwas kompakter, damit das Menue ohne Scrollen auf ein Telefon passt. */
.mobile-nav{padding:1rem var(--pad) 1.4rem;gap:.8rem}
.mobile-nav nav{gap:.35rem}
.mobile-nav nav a{padding:.62rem .9rem;font-size:1.12rem;letter-spacing:-.02em}
.mobile-nav nav a .icon{width:1rem;height:1rem}
.mobile-nav .lang-btn{padding:.7rem .9rem}
.mobile-nav .btn-block{padding:.75rem 1rem}
/* Der Ghost-Knopf war im Mobilmenue randlos und sah aus wie loser Text */
.mobile-nav .btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text);font-weight:600}
.mobile-nav .btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
/* Auch im Kopf sah der Ghost-Knopf wie loser Text neben dem Telegram-Knopf aus */
.header-right .btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text)}
.header-right .btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
/* Diese Regeln standen mit hoeherer Spezifitaet weiter oben (table.data th),
   deshalb hier auf gleicher Ebene nachgezogen. */
.section--light table.data th{color:#4f4c47}
.section--light .ev .cost small{color:#5d5952}

/* ---------------------------------------------------------------------------
   Bildkachel: der Abdunkler lag hinter dem Foto.
   .tile--media > *{z-index:2} war fuer den Text gedacht, traf aber auch das
   <img>. Der Verlauf (z-index auto = 0) lag darunter und wirkte nicht - am
   Pixel gemessen kam weisse Schrift dort auf 2,67:1.
   Reihenfolge jetzt ausdruecklich: Bild 0, Abdunkler 1, Text 2.
   --------------------------------------------------------------------------- */
.tile--media > img{z-index:0}
.tile--media::after{z-index:1;
  background:linear-gradient(180deg,
    rgba(19,17,16,.10) 0%,
    rgba(19,17,16,.34) 32%,
    rgba(19,17,16,.78) 52%,
    rgba(19,17,16,.94) 72%,
    rgba(19,17,16,.98) 100%)}
.tile--media .tile-body{position:relative;z-index:2}
/* .tile .go hatte keine eigene Farbe und erbte im hellen Abschnitt die dunkle
   Schrift - auf der Bildkachel stand sie damit dunkel auf dunkel. */
.tile--media .go{color:#f2c67a;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile--media .go .icon{color:#f2c67a}
/* 18 px fehlten auf 844 px Hoehe - hier abgeschnitten, dann passt es ohne Scrollen */
.mobile-nav{padding-bottom:1rem;gap:.7rem}
.mobile-nav nav{gap:.3rem}
.mobile-nav nav a{padding:.58rem .9rem}

/* ---------------------------------------------------------------------------
   Leiste: Scrollbalken war ein 5-px-Strich in der Linienfarbe und praktisch
   unsichtbar. Dazu ein breiterer Verlauf, damit die angeschnittene Karte am
   rechten Rand nach Absicht aussieht und nicht nach Fehler.
   --------------------------------------------------------------------------- */
.rail{scrollbar-color:var(--acc) rgba(255,255,255,.10);scrollbar-width:thin;
  padding-bottom:.15rem}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.09);border-radius:99px}
.rail::-webkit-scrollbar-thumb{background:var(--acc);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
.rail::-webkit-scrollbar-thumb:hover{background:#e8b45f;background-clip:padding-box;
  border:2px solid transparent}
.section--light .rail{scrollbar-color:#9a6f14 rgba(19,17,16,.12)}
.section--light .rail::-webkit-scrollbar-track{background:rgba(19,17,16,.10)}
.section--light .rail::-webkit-scrollbar-thumb{background:#9a6f14}

.rail-wrap::after{width:110px;transition:opacity .25s}

/* Fortschritt und Pausenhinweis der Selbstlauf-Leiste */
.rail-head{flex-wrap:wrap}
.rail-dots{display:flex;gap:.35rem;margin-inline-start:auto;margin-inline-end:.7rem}
.rail-dot{width:6px;height:6px;border-radius:99px;background:var(--line);border:0;padding:0;
  cursor:pointer;transition:background .2s,width .2s}
.rail-dot[aria-current="true"]{background:var(--acc);width:18px}
.section--light .rail-dot{background:rgba(19,17,16,.18)}
.section--light .rail-dot[aria-current="true"]{background:#9a6f14}

/* ---------------------------------------------------------------------------
   Themenraster
   Vorher standen sieben Kacheln in einer zufaellig wirkenden Anordnung, unten
   rechts blieb eine Zelle leer. Jetzt drei Spalten, die Bildkachel nimmt in der
   ersten Zeile zwei ein: 2 + 1 + 3 + 3 geht ohne Loch auf.
   --------------------------------------------------------------------------- */
@media (min-width:760px){
  .bento{grid-template-columns:repeat(2,1fr);gap:1rem}
}
@media (min-width:1060px){
  .bento{grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .bento .span-2{grid-column:span 2}
  .bento .row-2{grid-row:auto}          /* alte Zeilenspanne aufheben */
}

/* Kopfzeile der Kachel: Nummer und Symbol nebeneinander statt lose darueber */
.tile-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.15rem}
.tile-top .icon{width:1.15rem;height:1.15rem;color:var(--acc);opacity:.75;
  transition:opacity .25s,transform .25s}
.tile:hover .tile-top .icon{opacity:1;transform:scale(1.12)}
.section--light .tile-top .icon{color:#9a6f14}

/* Etwas mehr Ruhe und Tiefe, statt flacher Kaesten mit duennem Rand */
.tile{padding:1.65rem 1.5rem 1.4rem;gap:.5rem;min-height:13.5rem;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.tile h3{font-size:1.32rem;line-height:1.15}
.tile p{flex:1 1 auto}
.section--light .tile{box-shadow:0 1px 2px rgba(19,17,16,.05)}
.section--light .tile:hover{box-shadow:0 10px 30px rgba(19,17,16,.10);
  border-color:#d8c9a4}
.tile:hover{transform:translateY(-4px)}

/* Der Verweis unten: nur Pfeil in Ruhe, Text kommt beim Hinschauen dazu.
   Siebenmal derselbe Satz untereinander war der Hauptgrund fuer den
   zusammengewuerfelten Eindruck. */
.tile .go{font-size:.68rem;opacity:.62;transition:opacity .22s,gap .22s;gap:.35rem}
.tile:hover .go{opacity:1;gap:.6rem}

/* Bildkachel: quer ueber zwei Spalten, Text unten auf dunklem Grund */
.tile--media{min-height:15rem}
@media (min-width:1060px){ .tile--media{min-height:16.5rem} }
.tile--media .tile-top .icon{color:#f2c67a;opacity:.9}
.tile--media h3{font-size:1.6rem}
/* Siebenmal derselbe Satz untereinander war der Hauptgrund fuer den
   zusammengewuerfelten Eindruck. Auf den kleinen Kacheln bleibt nur der Pfeil;
   der Text steht weiter im Markup, damit Vorleseprogramme ihn finden. */
@media (min-width:760px){
  .tile:not(.tile--media) .go{font-size:0;gap:0;align-self:flex-start;
    width:2.1rem;height:2.1rem;border-radius:999px;justify-content:center;
    border:1px solid var(--line);opacity:.8}
  .tile:not(.tile--media) .go .icon{width:.95rem;height:.95rem}
  .tile:not(.tile--media):hover .go{opacity:1;border-color:var(--acc);
    background:var(--acc);color:var(--ink)}
  .section--light .tile:not(.tile--media) .go{border-color:#ded8cd;color:#5d5952}
  .section--light .tile:not(.tile--media):hover .go{background:var(--acc);
    border-color:var(--acc);color:#2a2622}
}
/* Die breite Kachel unten bekommt zwei Spalten Text statt einer langen Zeile */
@media (min-width:1060px){
  .bento .tile.span-2:not(.tile--media) p{max-width:44rem}
}

/* ---------------------------------------------------------------------------
   Preisleiter statt Miettabelle
   Die alte Tabelle hatte vier Spalten, davon eine, die siebenmal "pro Monat"
   wiederholte. Und aus Zahlenspalten liest niemand ab, was teuer ist. Jetzt
   sitzt jede Spanne als Balken auf einer gemeinsamen Skala.
   --------------------------------------------------------------------------- */
.preis-leiter{margin-top:1.6rem}
.pl-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.08em;color:var(--muted);padding-bottom:.5rem;
  border-bottom:1px solid var(--line)}
.section--light .pl-scale{color:#4f4c47;border-color:rgba(19,17,16,.12)}

.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pl-row{display:grid;grid-template-columns:1fr;gap:.5rem;
  padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.section--light .pl-row{border-color:rgba(19,17,16,.08)}
.pl-row:last-child{border-bottom:0}

.pl-name{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.pl-name b{font-weight:600;font-size:1rem}
.pl-name span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.section--light .pl-name span{color:#4f4c47}

.pl-track{position:relative;height:10px;border-radius:99px;
  background:rgba(255,255,255,.07);overflow:hidden}
.section--light .pl-track{background:rgba(19,17,16,.07)}
.pl-bar{position:absolute;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),#e8c07a);
  transform-origin:left center}
/* "AED 20.000 +" hat kein Ende - der Balken laeuft aus, statt hart zu stoppen */
.pl-bar.pl-open{background:linear-gradient(90deg,var(--acc),rgba(216,162,74,.15))}

.pl-val{font-family:var(--f-mono);font-size:.86rem;color:var(--acc);
  letter-spacing:.01em;white-space:nowrap}
.section--light .pl-val{color:#8a5a06}

@media (min-width:760px){
  .pl-row{grid-template-columns:minmax(11rem,1.1fr) minmax(0,2fr) auto;
    align-items:center;gap:1.4rem}
  .pl-name{flex-direction:column;gap:.15rem;align-items:flex-start}
}
@media (prefers-reduced-motion:no-preference){
  .pl-row.is-in .pl-bar{animation:plWachsen .6s cubic-bezier(.2,.7,.3,1) both}
  @keyframes plWachsen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* Der Wert stand hart an der Kante - Mindestbreite und etwas Luft */
.pl-val{min-width:9.5rem;text-align:end}
@media (min-width:760px){
  .pl-row{grid-template-columns:minmax(10rem,1fr) minmax(0,2.2fr) minmax(9.5rem,auto)}
}

/* ---------------------------------------------------------------------------
   Detailseite je Fund (/pages/<slug>)
   Die Karten zeigten seit jeher dorthin, die Seiten gab es aber nie - jeder
   Klick landete auf 404. Jetzt bleibt der Besucher auf unserer Seite, weil
   hier das Formular steht.
   --------------------------------------------------------------------------- */
.sig-head{padding-block:2.4rem 0}
.sig-head h1{font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.06;margin-bottom:.7rem}
.sig-head .lede{color:var(--muted);max-width:44rem}
.sig-compare{display:flex;align-items:flex-start;gap:.6rem;margin:1.2rem 0 0;
  padding:.85rem 1rem;border-radius:12px;background:rgba(216,162,74,.10);
  border:1px solid rgba(216,162,74,.28);color:var(--text);font-size:1rem;line-height:1.5}
.sig-compare .icon{width:1.1rem;height:1.1rem;color:var(--acc);flex:0 0 auto;margin-top:.15rem}
.sig-figures{margin-top:1.6rem;gap:.75rem}
.sig-note{margin-top:1.2rem;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.06em;color:var(--muted)}
.sig-shot{margin-top:2rem;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);max-height:26rem}
.sig-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:900px){ .sig-shot{max-height:30rem} }
/* .btn-ghost war nur im Kopf und im Mobilmenue gestaltet - auf der Detailseite
   stand der Knopf deshalb als nackter Text da. */
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--text)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.section--light .btn-ghost{border-color:rgba(19,17,16,.2);background:#fff;color:var(--ink)}
.section--light .btn-ghost:hover{border-color:#9a6f14;color:#9a6f14}