/* SmarTrans — smartrans.online
   Eine Datei, keine externen Ressourcen, keine Webfonts, kein CDN.
   Farben laufen ausschliesslich ueber Custom Properties; [data-theme="dark"]
   kehrt sie um. Der Akzent bleibt in beiden Modi #1F5673. */

:root{
  --paper:#F8F8F7; --band:#F1F1EE; --ink:#16181A; --ink2:#3D4247; --ink3:#6B7075;
  --hair:#DCDCD8; --edge:#D6D6D1; --num:#9A9EA2; --chip:#F0ECE2;
  --accent:#1F5673; --accent-text:#1F5673;
  --btn-bg:#1F5673; --btn-fg:#FFFFFF; --btn-bd:#1F5673;
  --btn-bg-hover:#174257; --btn-bd-hover:#174257;
  --btn2-fg:#1F5673; --btn2-bd:#1F5673; --btn2-bg-hover:#E8EEF2;
  --nav-bg:#F8F8F7; --focus:#1F5673;
  --inv-bg:#16181A; --inv-fg:#F8F8F7; --inv-ink2:#C3C7CA; --inv-ink3:#8B9095;
  --drop-hot:#EEF3F6; --error:#B4453A;
  --inv-accent:#8FB3C6; --inv-hair:#33373D;
}
:root[data-theme="dark"]{
  --paper:#14161A; --band:#1B1E23; --ink:#ECEDEE; --ink2:#C2C7CB; --ink3:#8B9095;
  --hair:#2B2F35; --edge:#2B2F35; --num:#5C6167; --chip:#2A2E34;
  --accent-text:#8FB3C6;
  --btn-bg:#1F5673; --btn-fg:#FFFFFF; --btn-bd:#568499;
  --btn-bg-hover:#2A6B8C; --btn-bd-hover:#8FB3C6;
  --btn2-fg:#8FB3C6; --btn2-bd:#568499; --btn2-bg-hover:#1E2A31;
  --nav-bg:#14161A; --focus:#8FB3C6;
  --inv-bg:#F3F3F0; --inv-fg:#16181A; --inv-ink2:#4C5257; --inv-ink3:#6B7075;
  --drop-hot:#1B2A33; --error:#E39189;
  --inv-accent:#1F5673; --inv-hair:#D6D6D1;
}

*{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--accent-text)}
a:hover{color:var(--ink)}
h1,h2{margin:0; font-weight:600; letter-spacing:-0.015em; text-wrap:pretty}
strong{font-weight:600}

/* ---------- Navigation ----------
   Sticky: deckender Hintergrund aus der Theme-Variable, Haarlinie unten.
   Die Ankerziele bekommen scroll-margin-top in Leistenhoehe (s.u.). */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 96px; background:var(--nav-bg); border-bottom:1px solid var(--hair);
}
/* Ankerziele muessen die Leiste in JEDER Breite freistellen. Der Wert deckt
   darum die hoechste gemessene Leiste des Bandes, nicht die typische. */
:target{scroll-margin-top:8.5rem}
[id]{scroll-margin-top:8.5rem}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nav-left{display:flex; align-items:center; gap:20px}
.brand{display:flex; align-items:baseline; gap:10px}
.brand-name{font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); text-decoration:none}
.brand-tag{font-size:11px; letter-spacing:0.06em; color:var(--ink3)}
.nav-right{display:flex; align-items:center; gap:26px; font-size:14px}

/* Nav-Eintraege: Abstand kommt aus gap und ist in JEDER Breite >= 1.25rem.
   row-wrap erlaubt, damit die Leiste eher hoeher wird als die Abstaende
   zu verlieren. */
.nav-links{display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px}
.nav-links a{color:var(--ink2); text-decoration:none; font-weight:400}
.nav-links a:hover{color:var(--accent-text)}
/* Aktiver Eintrag: gleiche Schriftstaerke wie alle, markiert nur durch
   Farbe und eine feine Linie. aria-current bleibt erhalten. */
.nav-links a[aria-current]{color:var(--ink); font-weight:400;
  border-bottom:1px solid var(--accent-text); padding-bottom:3px}
.nav-right a:not(.btn):not(.btn2){color:var(--ink2); text-decoration:none}
.nav-right a:not(.btn):not(.btn2):hover{color:var(--accent-text)}

/* Menü-Offenlegung: reines CSS, kein JS.
   Die Checkbox darf NIE als Steuerelement erscheinen — appearance:none plus
   Clip, sonst malt der Browser breit ein leeres Kaestchen in die Leiste. */
.nav-toggle{
  -webkit-appearance:none; appearance:none;
  position:absolute; width:1px; height:1px; margin:0; padding:0; border:0;
  opacity:0; pointer-events:none; clip-path:inset(50%); overflow:hidden;
}
.burger{display:none}
.lang{display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:0.06em}
.lang a{color:var(--ink3); text-decoration:none}
.lang span[aria-current="true"]{color:var(--ink); font-weight:700}
.lang .sep{width:1px; height:12px; background:var(--hair)}
.theme{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:1px solid var(--hair);
  background:none; color:var(--ink); cursor:pointer; flex:0 0 auto;
}
.theme:hover{border-color:var(--accent-text); color:var(--accent-text)}
.theme .moon{width:9px; height:9px; border-radius:50%; background:currentColor; outline:1.5px solid currentColor; outline-offset:3px; display:none}
.theme .sun{width:15px; height:15px; border-radius:50%; box-shadow:inset -4.5px 1px 0 0 currentColor}
:root[data-theme="dark"] .theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:none}

/* ---------- Buttons ----------
   Die Vordergrundfarbe kommt ausschliesslich aus --btn-fg / --btn2-fg und
   wird NIE geerbt — sonst gewinnt eine Kontextregel (z.B. .nav-right a) und
   der Text wird unlesbar. Darum bei jedem Zustand explizit gesetzt. */
a.btn, .btn{
  display:inline-block; padding:14px 26px; font-size:16px; text-decoration:none;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
}
a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus,
.btn:hover, .btn:active, .btn:focus{color:var(--btn-fg)}
a.btn:hover, .btn:hover{background:var(--btn-bg-hover); border-color:var(--btn-bd-hover)}
a.btn:active, .btn:active{background:var(--btn-bg-hover); transform:translateY(1px)}

/* Sekundaer: Outline, damit der primaere CTA fuehrend bleibt. */
a.btn2, .btn2{
  display:inline-block; padding:13px 25px; font-size:16px; text-decoration:none;
  background:transparent; color:var(--btn2-fg); border:1px solid var(--btn2-bd);
}
a.btn2:link, a.btn2:visited, a.btn2:hover, a.btn2:active, a.btn2:focus,
.btn2:hover, .btn2:active, .btn2:focus{color:var(--btn2-fg)}
a.btn2:hover, .btn2:hover{background:var(--btn2-bg-hover)}
a.btn2:active, .btn2:active{transform:translateY(1px)}

a.btn:focus-visible, a.btn2:focus-visible, .btn:focus-visible, .btn2:focus-visible,
.theme:focus-visible, .nav-right a:focus-visible, #drop:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.btn-s{padding:8px 16px; font-size:14px}
.btn2.btn-s{padding:7px 15px; font-size:14px}
.cta-note{font-size:13px; color:var(--ink3)}

/* ---------- Abschnittsraster: 220px Marginalie + Textkoerper ---------- */
.sec{padding:94px 96px 86px; border-bottom:1px solid var(--hair)}
.sec.tight{padding:62px 96px}
.sec.band{background:var(--band)}
.sec.inv{background:var(--inv-bg); color:var(--inv-fg)}
.sec.inv h2{color:var(--inv-fg)}
.grid{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start}
.marg{display:flex; flex-direction:column; gap:8px}
.label{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3)}
.sec.inv .label{color:var(--inv-ink3)}
.marg h2{font-size:26px; line-height:1.25}
.body-col{display:flex; flex-direction:column; gap:28px; max-width:880px}

/* ---------- Hero ---------- */
.hero{padding:100px 96px 86px; border-bottom:1px solid var(--hair);
  display:grid; grid-template-columns:1fr 380px; gap:72px; align-items:start}
.hero-main{display:flex; flex-direction:column; gap:30px; max-width:760px}
.hero h1{font-size:42px; line-height:1.22}
.hero-sub{font-size:17px; color:var(--ink2)}
.hero-note{font-size:13px; color:var(--ink3)}
.hero-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:6px}
.side{border-left:1px solid var(--hair); padding-left:32px; display:flex; flex-direction:column; gap:18px}
.side ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;
  font-size:15px; line-height:1.5; color:var(--ink2)}
.side li{display:flex; gap:12px}
.side li::before{content:"\2192"; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--accent-text)}

/* ---------- Zeilenlisten ---------- */
.rows{display:flex; flex-direction:column; max-width:880px}
.row{display:grid; gap:32px; padding:26px 0; border-top:1px solid var(--hair); font-size:16px}
.row:last-child{border-bottom:1px solid var(--hair)}
.row-3{grid-template-columns:44px 1fr 1fr}
.row-n{font-size:13px; color:var(--num)}
.row-pain{color:var(--ink3)}
.defs{display:grid; grid-template-columns:220px 1fr; gap:0 32px; font-size:15px; line-height:1.65}
.defs>div{padding:18px 0; border-top:1px solid var(--hair)}
.defs>div:nth-last-child(1),.defs>div:nth-last-child(2){border-bottom:1px solid var(--hair)}
.defs .dt{font-weight:600}
.defs .dt.muted{font-weight:400; color:var(--ink3)}
.defs .dd{color:var(--ink2); display:flex; flex-direction:column; gap:8px}
.defs.two{grid-template-columns:1fr 1fr; gap:0 40px}
.chip{background:var(--chip); padding:2px 6px; font-size:13px}

/* ---------- Verfahren ---------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--ink)}
.step{display:flex; flex-direction:column; gap:12px; padding:20px 22px 24px; border-right:1px solid var(--hair)}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0; border-right:0}
.step-n{font-size:12px; letter-spacing:0.1em; color:var(--accent-text)}
.step-t{font-size:15px; font-weight:600}
.step-b{font-size:14px; line-height:1.5; color:var(--ink3)}
.quote{display:flex; flex-direction:column; gap:14px; max-width:820px; background:var(--band); padding:32px 36px}
.quote p{margin:0; font-size:18px; line-height:1.6}
.quote .src{font-size:12px; line-height:1.5; color:var(--ink3)}

/* ---------- Terminologie ---------- */
.term-quote{font-size:30px; line-height:1.4; font-weight:500; letter-spacing:-0.01em; margin:0}
.term-body{font-size:16px; line-height:1.7; color:var(--inv-ink2); max-width:720px; margin:0}
.term-body strong{color:var(--inv-fg)}

/* Testpaket: gleiche invertierte Behandlung wie die Terminologie-Garantie.
   Primaerbutton bleibt Akzentflaeche mit weisser Schrift; Sekundaerbutton,
   Links und Hinweise nehmen die invertierten Farben. */
.sec.inv .test-actions{display:flex; flex-direction:column; gap:12px; padding-top:6px}
.sec.inv .cta-row{justify-content:flex-start}
.sec.inv a.btn2, .sec.inv a.btn2:link, .sec.inv a.btn2:visited,
.sec.inv a.btn2:hover, .sec.inv a.btn2:active, .sec.inv a.btn2:focus{color:var(--inv-fg); border-color:var(--inv-ink3)}
.sec.inv a.btn2:hover{background:transparent; border-color:var(--inv-fg)}
.sec.inv a.btn:focus-visible, .sec.inv a.btn2:focus-visible{outline-color:var(--inv-accent)}
.sec.inv .cta-note{color:var(--inv-ink3)}
.sec.inv .test-foot{display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px solid var(--inv-hair); max-width:720px}
.sec.inv .exchange{border:0; padding:0; margin:0; color:var(--inv-ink2); font-size:15px}
.sec.inv .maillist a{color:var(--inv-accent)}
.sec.inv .maillist a.second{color:var(--inv-ink3)}

/* ---------- Zahlen ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--hair)}
.stat{display:flex; flex-direction:column; gap:10px; padding:28px; border-right:1px solid var(--hair)}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0; border-right:0}
.stat-n{font-size:40px; letter-spacing:-0.03em; color:var(--accent-text)}
.stat-b{font-size:15px; line-height:1.5; color:var(--ink2)}
/* Fussnote des Zahlen-Bands: drei feste Zeilen. .stand traegt das Datum,
   .basis die Messgrundlage, .stat-extra ist der leere Slot fuer die spaetere
   Ergaenzung (ausgewertete Auftraege, Sprachkombinationen, Plattformen) —
   Text austauschen bzw. hidden entfernen, kein Layoutwechsel. */
.stat-notes{display:flex; flex-direction:column; gap:6px; max-width:720px; font-size:12px; line-height:1.6; color:var(--ink3)}
.stat-notes .stand{color:var(--ink2); letter-spacing:0.04em}
.stat-notes .basis{max-width:660px; text-wrap:pretty}
.stat-notes .stat-extra[hidden]{display:none}
/* Streubereich: dem Band untergeordnet — kleiner, gedeckt, eigene Zeile. */
.stat-range{font-size:12px; line-height:1.6; color:var(--ink3); max-width:660px;
  padding-left:14px; border-left:1px solid var(--hair)}

/* ---------- Preistabelle ----------
   Desktop: echte Tabelle, Zahlen in Monospace rechtsbündig.
   Mobil: jede Zeile wird ein gestapelter Block mit Beschriftung aus
   data-th — kein horizontales Scrollen. */
.price{width:100%; max-width:760px; border-collapse:collapse; font-size:15px}
.price th{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3);
  font-weight:400; text-align:left; padding:0 0 12px; border-bottom:1px solid var(--ink)}
.price td{padding:14px 0; border-bottom:1px solid var(--hair); color:var(--ink)}
.price td.unit{color:var(--ink3); font-size:14px; width:120px}
.price .num{text-align:right; width:120px}
.price td.num{color:var(--accent-text); font-size:15px; white-space:nowrap}

.notes{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
  font-size:14px; line-height:1.6; color:var(--ink2); max-width:720px}
.notes li{display:flex; gap:12px}
.notes li::before{content:"\2014"; color:var(--ink3); flex:0 0 auto}
.notes li.plain{color:var(--ink3); font-size:13px}
.price-guarantee{border-left:2px solid var(--accent); padding:2px 0 2px 20px;
  font-size:17px; line-height:1.55; max-width:720px}

/* Leistungsaussage im Hero — nicht Teil der Messgrundlage. */
.hero-scope{font-size:15px; color:var(--ink2)}

/* ---------- Teaser / Abschluss ---------- */
.teaser{display:flex; flex-direction:column; gap:12px; background:var(--band); padding:28px 32px; max-width:760px}
.close{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap}
.close-main{display:flex; flex-direction:column; gap:14px; max-width:640px}
.close-main h2{font-size:26px}
.close-body{font-size:16px; color:var(--ink2)}
.exchange{padding-top:18px; margin-top:8px; border-top:1px solid var(--hair); font-size:15px; color:var(--ink2)}
.close-side{display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.maillist{display:flex; flex-direction:column; gap:4px; font-size:13px}
.maillist.right{align-items:flex-end}
.maillist a{text-decoration:none}
.maillist a.second{color:var(--ink3)}

/* ---------- Werkzeuge ---------- */
.checks{display:grid; grid-template-columns:44px 1fr; gap:0 24px; font-size:16px; line-height:1.55}
.checks>div{padding:18px 0; border-top:1px solid var(--hair)}
.checks>div:nth-last-child(1),.checks>div:nth-last-child(2){border-bottom:1px solid var(--hair)}
.checks .cn{font-size:13px; color:var(--accent-text)}
.checks .cb{color:var(--ink2)}
#drop{border:2px dashed var(--accent); padding:52px 32px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; gap:10px; background:transparent}
#drop.hot{background:var(--drop-hot)}
#drop .dt{font-size:18px; font-weight:500}
#drop .db{font-size:12px; color:var(--ink3)}
.opts{display:flex; flex-direction:column; max-width:880px}
.opt{display:grid; grid-template-columns:26px 1fr; gap:0 14px; padding:20px 0;
  border-top:1px solid var(--hair); cursor:pointer; align-items:start;
  font-size:16px; line-height:1.55; color:var(--ink2)}
.opt:last-of-type{border-bottom:1px solid var(--hair)}
.opt input{margin:4px 0 0; width:16px; height:16px; accent-color:var(--accent)}
.opt strong{color:var(--ink)}
.opt-note{padding-top:18px; font-size:12px; line-height:1.6; color:var(--ink3); max-width:720px}
#results{display:flex; flex-direction:column; max-width:880px}
.res{display:grid; grid-template-columns:1fr 1fr 220px; gap:24px; padding:18px 0;
  border-top:1px solid var(--hair); align-items:baseline; font-size:13px}
.res .name{word-break:break-all}
.res .msg{color:var(--ink2)}
.res .msg.err{color:var(--error)}
.res a{justify-self:end; text-align:right; word-break:break-all; text-decoration:none}
.res-empty{padding:20px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-size:13px; color:var(--ink3)}

/* ---------- Footer ---------- */
.foot{padding:34px 96px 42px; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; font-size:13px; color:var(--ink3)}
.foot-links{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.foot a{color:var(--ink3); text-decoration:none}
.foot a:hover{color:var(--accent-text)}
.foot .claim{font-size:12px}

/* ---------- Schmaler Desktop ----------
   Die Linkreihe wird hier bereits kompaktiert (Schrift, Abstaende, CTA),
   sonst braucht die Leiste mehr Breite als das Band hergibt und die ganze
   Seite scrollt waagerecht. */
@media (max-width:1420px){
  .nav{padding:14px 32px}
  [id],:target{scroll-margin-top:5rem}
  .nav-right{gap:18px; font-size:13px}
  .nav-links{gap:8px 20px}
  .nav-right>a.btn{padding:8px 14px; font-size:13px}
  .brand-tag{display:none}
  .sec,.sec.tight{padding:70px 40px}
  .hero{padding:70px 40px 64px; grid-template-columns:1fr 320px; gap:48px}
  .hero h1{font-size:36px}
  .grid{grid-template-columns:180px 1fr; gap:32px}
  .defs{grid-template-columns:180px 1fr}
  .foot{padding:30px 40px 36px}
}

/* ---------- Mobil ---------- */
@media (max-width:1080px){
  /* Kompakte Leiste: nur Marke, Modus, Sprache, Werkzeuge, CTA.
     Der CTA schrumpft mit, damit die Leiste einzeilig bleibt. */
  .nav{padding:10px 20px; gap:12px}
  [id],:target{scroll-margin-top:5.5rem}
  .nav-right{gap:14px; font-size:13px}
  .nav-links{gap:8px 20px}
  .nav-right>a.btn{padding:7px 12px; font-size:13px}
  .theme{width:30px; height:30px}
  .brand-name{font-size:17px}
  .hero{padding:38px 20px 34px; grid-template-columns:1fr; gap:34px}
  .hero h1{font-size:27px}
  .side{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:24px}
  .sec,.sec.tight{padding:34px 20px}
  .grid{grid-template-columns:1fr; gap:18px}
  .body-col{gap:20px}
  .marg h2{font-size:21px}
  .steps{grid-template-columns:1fr; border-top:0}
  .step,.step:first-child,.step:last-child{border-right:0; border-top:1px solid var(--hair); padding:15px 0}
  .stats{grid-template-columns:1fr; border-top:0}
  .stat,.stat:first-child,.stat:last-child{border-right:0; border-top:1px solid var(--hair); padding:14px 0}
  .stat-n{font-size:24px}
  .row-3{grid-template-columns:1fr; gap:8px}
  .defs,.defs.two,.checks{grid-template-columns:1fr; gap:0}
  .defs>div{padding:12px 0; border-top:0}
  .defs .dt{padding-top:16px; border-top:1px solid var(--hair)}
  .defs>div:nth-last-child(1),.defs>div:nth-last-child(2){border-bottom:0}
  .defs>div:last-child{border-bottom:1px solid var(--hair); padding-bottom:16px}
  .checks>div{border-top:0; padding:4px 0}
  .checks .cn{padding-top:16px; border-top:1px solid var(--hair)}
  .checks>div:last-child{padding-bottom:16px; border-bottom:1px solid var(--hair)}
  .term-quote{font-size:20px}
  .close{gap:24px}
  .close-side{align-items:stretch; width:100%}
  .maillist.right{align-items:flex-start}
  .btn,.btn2{text-align:center}
  .cta-row{flex-direction:column; align-items:stretch}
  .cta-note{text-align:center}
  .res{grid-template-columns:1fr; gap:6px}
  .res a{justify-self:start; text-align:left}
  /* Preistabelle gestapelt: Kopfzeile aus, Beschriftung je Zelle aus data-th. */
  .price thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .price,.price tbody,.price tr,.price td{display:block; width:auto}
  .price tr{padding:14px 0; border-bottom:1px solid var(--hair)}
  .price tr:first-child{border-top:1px solid var(--ink)}
  .price td{padding:0; border:0; display:flex; justify-content:space-between; gap:16px; align-items:baseline}
  .price td::before{content:attr(data-th); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink3); flex:0 0 auto}
  .price td.unit,.price td.num,.price .num{width:auto; text-align:right}
  .price td:not(:first-child){padding-top:6px}
  .price-guarantee{font-size:16px; padding-left:16px}
  .quote{padding:22px 20px}
  .teaser{padding:22px 20px}
  .foot{padding:24px 20px 30px; align-items:flex-start; flex-direction:column; gap:14px}
  .foot-links{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ---------- Sehr schmale Geraete ----------
   Bei 360px Geraetebreite bleiben ~345px nutzbar; Leiste entsprechend enger. */
@media (max-width:420px){
  .nav{padding:9px 14px; gap:10px}
  .nav-left{gap:12px}
  .nav-right{gap:10px}
  .nav-right>a.btn{padding:6px 10px; font-size:12px}
  .theme{width:28px; height:28px}
  .burger{width:28px; height:28px}
  .brand-name{font-size:16px}
  .sec,.sec.tight{padding:30px 14px}
  .hero{padding:32px 14px 30px}
  .foot{padding:22px 14px 28px}
  .nav-links{padding:6px 14px 14px}
}

/* Unter 360px reicht die Breite nicht mehr fuer den Kopf-CTA. Er entfaellt;
   der Kontakt bleibt unmittelbar darunter im Hero, im Menue-Panel und in
   der Fusszeile erreichbar. */
@media (max-width:360px){
  .nav-right>a.btn{display:none}
}

/* ---------- Kompakte Leiste ----------
   Erst hier reicht die Breite fuer die Linkreihe nicht mehr (gemessen: die
   Reihe braucht ~865px). Darunter klappen die Abschnittslinks in ein Panel;
   erreichbar bleiben sie ueber das Menue — reines CSS, kein JS.
   Sichtbar in der Leiste: Modus, Marke, Menue, Sprache, CTA. */
@media (max-width:950px){
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:34px; height:32px; padding:0 6px; border:1px solid var(--hair);
    cursor:pointer; flex:0 0 auto; box-sizing:border-box;
  }
  /* Drei deutliche Balken — zwei Haarlinien lesen sich als leeres Kaestchen. */
  .burger span{display:block; height:2px; background:var(--ink)}
  .burger::after{content:""; display:block; height:2px; background:var(--ink)}
  .burger:hover{border-color:var(--accent-text)}
  .nav-toggle:focus-visible+.burger{outline:2px solid var(--focus); outline-offset:2px}

  .nav-links{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--nav-bg); border-bottom:1px solid var(--hair);
    padding:6px 20px 14px; font-size:15px;
  }
  .nav-toggle:checked~.nav-links{display:flex}
  .nav-links a{padding:13px 0; border-top:1px solid var(--hair)}
  .nav-links a:first-child{border-top:0}
  /* Im Panel markiert die Farbe plus ein Akzentstrich links, nicht unten —
   unten sitzt bereits die Trennlinie der naechsten Zeile. */
  .nav-links a[aria-current]{padding:13px 0 13px 10px; border-bottom:0;
    border-left:2px solid var(--accent-text); margin-left:-12px}
}