/* ---------- Token-System ---------------------------------------------- */
/* Farben aus dem Logo: Hitchhiker-Blau #165899, Cyan #00A5CF,
   Hellblau #7EC8E3, Nachtblau #050F1A. Keine Farbverläufe, heller Grund. */
:root{
  --ink:#050F1A; --ink-2:#0A2540; --ink-3:#165899;
  --paper:#F5F7FA; --paper-2:#FFFFFF;
  --text:#0A2540; --text-soft:#546779; --text-faint:#667585;
  --line:rgba(10,37,64,.12); --line-soft:rgba(10,37,64,.06);
  --accent:#165899; --accent-2:#00A5CF; --cyan-text:#00789B; --hell:#7EC8E3;
  --tint:#ECEFF3; --tint-2:#FAFBFC;
  --surface:var(--paper-2); --ground:var(--paper);
  --shadow:0 1px 1px rgba(10,37,64,.03), 0 20px 50px -28px rgba(10,37,64,.22);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --maxw:1180px;
  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.4rem + 1vw,2.2rem);
  --step-3:clamp(2.3rem,1.8rem + 2.4vw,3.8rem);
  --step-4:clamp(3.1rem,2.1rem + 5vw,6.8rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#050F1A; --paper-2:#0C2438;
    --text:#E8F1F8; --text-soft:#9FB6C8; --text-faint:#6C879C;
    --line:rgba(232,241,248,.14); --line-soft:rgba(232,241,248,.08);
    --accent:#4F9BD9; --accent-2:#3FC3E8; --cyan-text:#3FC3E8;
    --surface:#0C2438; --ground:#050F1A; --tint:#0A1D2E; --tint-2:#0C2438;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 60px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#050F1A; --paper-2:#0C2438;
  --text:#E8F1F8; --text-soft:#9FB6C8; --text-faint:#6C879C;
  --line:rgba(232,241,248,.14); --line-soft:rgba(232,241,248,.08);
  --accent:#4F9BD9; --accent-2:#3FC3E8; --cyan-text:#3FC3E8;
  --surface:#0C2438; --ground:#050F1A; --tint:#0A1D2E; --tint-2:#0C2438;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 60px -20px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Instrument Serif",Georgia,"Times New Roman",serif; text-wrap:balance;
  margin:0; letter-spacing:-.015em; line-height:1.07; font-weight:400}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); font-weight:500}
.lede{font-size:var(--step-1); color:var(--text-soft); max-width:36ch; line-height:1.45; font-weight:400}

/* ---------- Navigation -------------------------------------------------- */
header.nav{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--ground) 78%,transparent);
  backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:32px; height:64px}
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:30px; width:auto; display:block}
.logo-fuss img{height:38px}
@media(max-width:520px){.logo img{height:26px}}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:.95rem; font-weight:500; color:var(--text-soft)}
.nav-links a{text-decoration:none; transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-links a.here{color:var(--text)}
@media(max-width:900px){.nav-links{display:none}}

.btn{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:13px 24px;
  font-weight:600; font-size:.97rem; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px -10px rgba(22,88,153,.9)}
.btn-primary:hover{transform:translateY(-1px); background:#12497F; box-shadow:0 10px 24px -12px rgba(22,88,153,.9)}
.btn-ghost{border-color:var(--line); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--text); transform:translateY(-2px)}
.btn-sm{padding:9px 18px; font-size:.9rem}

/* ---------- Hero -------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--paper-2);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(64px,9vw,120px) 0 clamp(60px,8vw,110px)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px); align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:48px}}
h1.title{font-size:var(--step-4); letter-spacing:-.02em; line-height:1.02}
h1.title em{font-style:normal; color:var(--accent)}
.hero p.lede{margin-top:22px; max-width:40ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-note{margin-top:20px; font-size:var(--step--1); color:var(--text-faint);
  font-family:"IBM Plex Mono",monospace}

/* ---------- Marktplatz-Fenster (Hero-Bild) ------------------------------ */
.fenster{border-radius:var(--r-l); background:var(--surface); border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(10,37,64,.55); overflow:hidden}
.fenster-kopf{display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--tint-2)}
.fenster-kopf i{width:9px; height:9px; border-radius:50%; background:var(--line); display:block}
.fenster-kopf span{margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase}
.fenster-leib{padding:20px 20px 24px; display:flex; flex-direction:column; gap:12px}
.suchzeile{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.suchfeld{flex:1; min-width:160px; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:.85rem; color:var(--text-faint); background:var(--ground)}
.gig{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line-soft);
  border-radius:14px; padding:14px 16px; background:var(--ground);
  opacity:0; transform:translateY(10px); animation:auf .55s cubic-bezier(.2,.8,.3,1) forwards}
.gig:nth-of-type(1){animation-delay:.30s}
.gig:nth-of-type(2){animation-delay:.45s}
.gig:nth-of-type(3){animation-delay:.60s}
@keyframes auf{to{opacity:1; transform:none}}
.gig .abt{width:34px; height:34px; flex:none; border-radius:10px; background:var(--tint);
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  font-weight:500; color:var(--accent)}
.gig .txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.gig .titel{font-weight:600; font-size:.93rem}
.gig .unter{font-size:.8rem; color:var(--text-soft)}
.gig .match{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  color:var(--cyan-text); flex:none; padding-top:3px}
.gig.aus{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---------- Zahlenband -------------------------------------------------- */
.stats{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.stats-in{display:grid; grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.stats-in{grid-template-columns:1fr}}
.stat{padding:38px 8px 34px; border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:0}
@media(max-width:760px){.stat{border-left:0; border-top:1px solid var(--line-soft)} .stat:first-child{border-top:0}}
.stat .num{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,2.2rem + 2.4vw,4.4rem); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1}
.stat .k{margin-top:10px; font-weight:600}
.stat .d{margin-top:6px; color:var(--text-soft); font-size:.94rem; max-width:32ch}

/* ---------- Abschnitte -------------------------------------------------- */
section{padding:clamp(84px,11vw,152px) 0}
.sec-head{max-width:62ch; display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{font-size:var(--step-3)}
.tint{background:var(--tint); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:880px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:30px 28px 32px; display:flex; flex-direction:column; gap:12px}
.card h3{font-size:var(--step-1)}
.card p{color:var(--text-soft); font-size:.97rem}
.card .glyph{font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase}

/* Vier Rollen */
.rollen{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:1000px){.rollen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rollen{grid-template-columns:1fr}}
.rolle-karte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:26px 24px 28px; display:flex; flex-direction:column; gap:10px}
.rolle-karte .nr{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.2em; color:var(--cyan-text)}
.rolle-karte h3{font-size:var(--step-1)}
.rolle-karte ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;
  font-size:.93rem; color:var(--text-soft)}
.rolle-karte li{padding-left:20px; position:relative}
.rolle-karte li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:3px; background:var(--accent-2)}

/* Funktionen: grosse, abwechselnde Karten */
.features{display:flex; flex-direction:column; gap:24px}
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,72px); align-items:center;
  padding:clamp(30px,4vw,56px); border-radius:var(--r-l); background:var(--surface);
  border:1px solid var(--line); box-shadow:0 1px 1px rgba(10,37,64,.03)}
.feature:nth-child(even) .f-visual{order:-1}
@media(max-width:880px){.feature{grid-template-columns:1fr} .feature:nth-child(even) .f-visual{order:0}}
.f-text{display:flex; flex-direction:column; gap:14px}
.f-text h3{font-size:var(--step-2)}
.f-text p{color:var(--text-soft)}
.f-visual{border-radius:var(--r-m); background:var(--tint); border:1px solid var(--line-soft);
  min-height:250px; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:12px;
  overflow:hidden}

/* Mini-Visuals */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:1px solid var(--line); color:var(--text); background:var(--surface);
  border-radius:999px; padding:8px 15px; font-size:.85rem}
.chip.an{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.cyan{background:var(--surface); border-color:color-mix(in srgb,var(--accent-2) 55%,transparent); color:var(--accent)}
.bars{display:flex; align-items:flex-end; gap:9px; height:130px}
.bars i{flex:1; border-radius:5px 5px 2px 2px; background:var(--accent);
  transform-origin:bottom; transform:scaleY(.06); transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.reveal.in .bars i{transform:scaleY(1)}
.bars i:nth-child(1){transition-delay:.02s} .bars i:nth-child(2){transition-delay:.06s}
.bars i:nth-child(3){transition-delay:.1s}  .bars i:nth-child(4){transition-delay:.14s}
.bars i:nth-child(5){transition-delay:.18s} .bars i:nth-child(6){transition-delay:.22s}
.bars i:nth-child(7){transition-delay:.26s}
.bar-legend{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; color:var(--text-faint); letter-spacing:.1em}
.notiz{border-left:2px solid var(--accent); padding-left:16px; color:var(--text-soft);
  font-size:1.02rem; line-height:1.5}
.notiz b{color:var(--text); font-weight:600}

/* Waage: Angebot trifft Nachfrage */
.waage{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; width:100%}
@media(max-width:520px){.waage{grid-template-columns:1fr}}
.waage-seite{display:flex; flex-direction:column; gap:8px}
.waage-seite .kopf{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint)}
.waage-seite span{background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:9px 12px; font-size:.85rem}
.waage-mitte{font-family:"IBM Plex Mono",monospace; color:var(--cyan-text); font-size:1.1rem; text-align:center}

/* Ablauf */
.day{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:880px){.day{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line); padding-top:20px; display:flex; flex-direction:column; gap:10px}
.step .t{font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.14em; color:var(--accent)}
.step h3{font-size:var(--step-1)}
.step p{color:var(--text-soft); font-size:.96rem}

/* Vertrauensband: Teams, Swiss Made, Einführung */
.band{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:880px){.band{grid-template-columns:1fr}}
.band div{display:flex; flex-direction:column; gap:8px}
.band b{font-weight:600}
.band p{color:var(--text-soft); font-size:.95rem}
.band .marke{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan-text)}

/* Schluss-CTA */
.final{text-align:center; border-radius:var(--r-l); padding:clamp(56px,8vw,104px) 28px;
  background:#165899; border:1px solid rgba(10,37,64,.35)}
.final .eyebrow{color:rgba(255,255,255,.78)}
.final h2{font-size:var(--step-3); color:#fff}
.final p{color:rgba(255,255,255,.92); margin:16px auto 30px; max-width:46ch}
.final .btn-primary{background:#fff; color:#165899}
.final .btn-primary:hover{background:#fff; color:#0F3E6D}
.cta-zweit{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  margin-top:26px; font-size:.94rem; color:rgba(255,255,255,.85)}
.cta-zweit a{color:#fff; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.45)}
.cta-zweit a:hover{text-decoration-color:#fff}
.cta-zweit span{color:rgba(255,255,255,.45)}

/* Fussbereich */
footer{border-top:1px solid var(--line-soft); padding:56px 0 40px; color:var(--text-soft); font-size:.92rem}
.foot-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between}
.foot-links{display:flex; gap:26px; flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--text)}
.foot-base{margin-top:34px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.85rem; color:var(--text-faint)}

/* Scroll-Auftritt */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .gig,.bars i{animation:none!important; transition:none!important; opacity:1; transform:none}
  .bars i{transform:scaleY(1)}
}

/* ---------- Unterseiten -------------------------------------------------- */
.a-head{padding:clamp(36px,6vw,72px) 0 clamp(20px,3vw,32px); max-width:760px; margin-inline:auto}
.back{display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint);
  text-decoration:none}
.back:hover{color:var(--accent)}
.a-head h1{font-size:var(--step-3); margin-top:24px}
.a-head .lede{margin-top:20px; max-width:46ch}
.prose{max-width:66ch; margin-inline:auto; display:flex; flex-direction:column; gap:24px;
  font-size:1.09rem; line-height:1.72; padding-bottom:clamp(60px,8vw,110px)}
.prose.breit{max-width:var(--maxw)}
.prose h2{font-size:var(--step-2); margin-top:20px}
.prose h3{font-size:var(--step-1); margin-top:8px}
.prose strong{font-weight:600}
.prose ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px; color:var(--text-soft)}
.prose > p{color:var(--text-soft)}
.prose > p:first-of-type{color:var(--text)}
.prose a{color:var(--accent)}

/* Preise */
.plaene{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:8px 0 12px}
@media(max-width:1000px){.plaene{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plaene{grid-template-columns:1fr}}
.plan{display:flex; flex-direction:column; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); padding:28px 24px 30px; font-size:1rem}
.plan-hervor{border-color:var(--accent)}
.preis{font-family:"Instrument Serif",Georgia,serif; font-size:2.6rem; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.preis span{font-family:"Schibsted Grotesk",sans-serif; font-size:.85rem; color:var(--text-faint);
  letter-spacing:0; margin-left:8px}
.plan-text{color:var(--text-soft); font-size:.93rem}
.plan-liste{list-style:none; margin:0; padding:16px 0 0; display:flex; flex-direction:column; gap:9px;
  font-size:.92rem; color:var(--text-soft); border-top:1px solid var(--line-soft)}
.plan-liste li{padding-left:20px; position:relative}
.plan-liste li::before{content:""; position:absolute; left:0; top:.52em; width:8px; height:8px;
  border-radius:3px; background:var(--accent)}
.plan .btn{align-self:flex-start; margin-top:auto}

/* Zwei Spalten: zählt / zählt nicht */
.zwei{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:760px){.zwei{grid-template-columns:1fr}}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft); padding:6px 0}
.faq summary{cursor:pointer; list-style:none; padding:16px 32px 16px 0; position:relative;
  font-weight:600; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:14px; color:var(--accent);
  font-family:"IBM Plex Mono",monospace; font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p, .faq details ul{color:var(--text-soft); font-size:.98rem; padding:0 0 18px}
.faq details ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.faq-gruppe{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan-text); margin-top:34px}

/* Team und Kontakt */
.team{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:6px 0}
@media(max-width:760px){.team{grid-template-columns:1fr}}
.kopf-karte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:26px}
.kopf-karte .name{font-family:"Instrument Serif",Georgia,serif; font-size:1.6rem; line-height:1.1}
.kopf-karte .rolle{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-top:6px}
.kopf-karte .zitat{color:var(--text-soft); font-size:.98rem; margin-top:14px}
.kontakt{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:6px 0}
@media(max-width:760px){.kontakt{grid-template-columns:1fr}}
.kontakt-karte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:28px; display:flex; flex-direction:column; gap:12px}
.kontakt-karte p{color:var(--text-soft); font-size:.95rem}
.kontakt-gross{font-family:"Instrument Serif",Georgia,serif; font-size:1.7rem; line-height:1.15}
.kontakt-gross a{text-decoration:none; color:var(--text)}
.kontakt-gross a:hover{color:var(--accent)}
.kontakt-karte .btn{align-self:flex-start; margin-top:auto}

/* Knöpfe im Fliesstext behalten ihre eigenen Farben */
.prose a.btn-primary{color:#fff}
.prose a.btn-ghost{color:var(--text)}

/* Wortmarke: helle Fassung im Dunkelmodus */
.logo img.logo-hell{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo img.logo-dunkel{display:none}
  :root:not([data-theme="light"]) .logo img.logo-hell{display:block}
}
:root[data-theme="dark"] .logo img.logo-dunkel{display:none}
:root[data-theme="dark"] .logo img.logo-hell{display:block}

/* Nichts darf auf schmalen Bildschirmen breiter werden als der Bildschirm */
.hero-grid > *{min-width:0}
.fenster{max-width:100%}
@media(max-width:520px){
  .suchfeld{min-width:0; width:100%}
  .gig{flex-wrap:wrap}
  .gig .match{margin-left:0; padding-left:48px}
}

/* ---------- Sprachwahl ---------------------------------------------------- */
.sprachwahl{position:relative}
.sprachwahl > button{font:inherit; font-size:.9rem; font-weight:500; color:var(--text-soft);
  background:none; border:0; cursor:pointer; padding:8px 4px; display:flex; align-items:center; gap:6px}
.sprachwahl > button::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px)}
.sprachwahl > button:hover{color:var(--text)}
.sprachliste{position:absolute; top:calc(100% + 10px); right:0; min-width:150px; display:none;
  flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-s); padding:6px; box-shadow:var(--shadow); z-index:60}
.sprachwahl.offen .sprachliste{display:flex}
.sprachliste a{padding:9px 12px; border-radius:7px; text-decoration:none; font-size:.92rem; color:var(--text-soft)}
.sprachliste a:hover{background:var(--tint); color:var(--text)}
.sprachliste a[aria-current="true"]{color:var(--accent); font-weight:600}
@media(max-width:900px){.sprachwahl > button{font-size:.85rem}}

/* ---------- Blog: Kacheln --------------------------------------------- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.post-grid{grid-template-columns:1fr}}
.post{display:flex; flex-direction:column; gap:14px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--r-m); overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line)}
.post .thumb{aspect-ratio:16/7; background:var(--tint); border-bottom:1px solid var(--line-soft); overflow:hidden}
.post .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.post .body{padding:0 22px 24px; display:flex; flex-direction:column; gap:10px}
.post h3{font-size:var(--step-1)}
.post p{color:var(--text-soft); font-size:.95rem}
.meta{display:flex; gap:14px; align-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint)}
.meta .tag{color:var(--cyan-text)}

/* ---------- Blog: Beitrag --------------------------------------------- */
.a-hero{margin:0 auto clamp(24px,4vw,44px); border-radius:var(--r-l); overflow:hidden;
  background:var(--tint); border:1px solid var(--line-soft); aspect-ratio:2.4/1;
  margin-left:50%; transform:translateX(-50%); width:min(1000px, calc(100vw - 48px))}
.a-hero img{width:100%; height:100%; object-fit:cover; display:block}
.a-meta{display:flex; gap:14px; align-items:center; margin:0 0 8px; padding-bottom:20px;
  border-bottom:1px solid var(--line-soft); font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); flex-wrap:wrap}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; color:#fff; font-family:"Instrument Serif",Georgia,serif;
  font-size:.85rem; letter-spacing:0}
.prose .pull{border-left:3px solid var(--accent); padding:6px 0 6px 24px;
  font-family:"Instrument Serif",Georgia,serif; font-size:var(--step-2); font-style:italic;
  line-height:1.2; color:var(--text)}
.more{margin-top:clamp(44px,6vw,80px); padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--line-soft);
  margin-left:50%; transform:translateX(-50%); width:min(1132px, calc(100vw - 48px))}
.more h2{font-size:var(--step-2); margin-bottom:24px}
.prose .more .post h3{font-size:1.1rem}

/* ---------- Navigation auf kleinen Bildschirmen ------------------------- */
/* Statt die Verweise zu verstecken: eine schmale Zeile, die man wischen kann. */
@media(max-width:900px){
  /* Auf dem Handy nimmt eine klebende Leiste zu viel Platz weg. */
  header.nav{position:static}
  .nav-in{height:auto; flex-wrap:wrap; gap:8px 12px; padding-block:8px}
  .nav-links{display:flex; order:3; width:100%; margin-left:0; gap:18px; font-size:.86rem;
    padding-bottom:2px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
  .sprachwahl{margin-left:auto}
}

/* Preise: zwei Karten statt vier Stufen */
.preis-zwei{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 12px}
@media(max-width:760px){.preis-zwei{grid-template-columns:1fr}}
.preis-zwei .plan{padding:34px 30px 36px}
.preis-zwei .preis{font-size:3.2rem}