/* ═══════════════════════════════════════════════════════════════
   Serelis · Produkt-Website
   Designsystem nach Brandbook v2: Marine auf Off-White, Hairlines
   statt Boxen, flach wie Druck, Typografie trägt die Hierarchie.
   Geteilt von allen Seiten — kein Build-Step.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --marine:#1D3557; --euro:#003399; --ink:#2A2D2B; --ground:#F4F2ED;
  --paper:#FCFBF8; --grey:#8A867E; --grey2:#5C5A54; --stone:#DDD8CD;
  --stone2:#CDC7BA; --sky:#7C9BC4; --ochre:#C4924E; --terra:#A65C48;
  --gold:#B98A2E;
  --sans:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --maxw:1240px; --pad:64px;
}
[data-theme="dark"]{
  --ground:#14181C; --paper:#1D2126; --ink:#F4F2ED; --grey:#9AA0A6;
  --grey2:#B4BAC0; --stone:#2A2F35; --stone2:#3A4149; --marine:#4C7FC0;
  --euro:#3E63B8;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* overflow-x MUSS hier stehen, nicht am body: zusammen mit dem
   display:flex + min-height:100vh des Body (klebender Footer) macht
   ein overflow-x am body diesen zum Scroll-Container — die Seite
   liess sich dann ueberhaupt nicht mehr scrollen. `clip` statt
   `hidden` erzeugt zudem gar keinen Scroll-Container. */
html{scroll-behavior:smooth; overflow-x:clip}
body{
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1}
::selection{background:var(--marine); color:var(--ground)}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
h1,h2,h3{font-weight:500; letter-spacing:-0.02em; line-height:1.1; text-wrap:balance}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--grey)}
/* NUR horizontal. Frueher `padding:0 var(--pad)`: die Kurzschreibweise
   gewann als Klasse gegen `section{padding:104px 0}` (Element) und hat
   damit die vertikale Polsterung aller Abschnitte stillgelegt. */
.wrap{max-width:var(--maxw); margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad)}
.marine{color:var(--marine)}

/* ═══ HEADER ═══ */
header{position:sticky; top:0; z-index:50; background:var(--ground);
  border-bottom:1px solid var(--stone)}
.nav{display:flex; justify-content:space-between; align-items:center; height:70px}
.brand{display:flex; align-items:center; gap:11px; font-size:20px;
  font-weight:500; letter-spacing:-0.03em}
.brand .mark{width:26px; height:26px; flex:none}
.nav-links{display:flex; align-items:center; gap:30px; margin-left:48px}
.nav-links a{font-size:14px; color:var(--grey2); transition:color .15s;
  position:relative; padding:4px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0;
  bottom:-2px; height:1px; background:var(--marine)}
.nav-actions{display:flex; align-items:center; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; font-size:15px;
  font-weight:500; padding:12px 22px; border:1px solid var(--ink);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .15s,color .15s,border-color .15s; white-space:nowrap}
.btn:hover{background:var(--ink); color:var(--ground)}
.btn-fill{background:var(--marine); border-color:var(--marine); color:var(--ground)}
.btn-fill:hover{background:var(--euro); border-color:var(--euro); color:var(--ground)}
.btn-sm{padding:9px 16px; font-size:14px}
.lang{position:relative}
.lang-btn{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey2);
  background:transparent; border:1px solid var(--stone); padding:8px 12px;
  cursor:pointer; transition:border-color .15s,color .15s}
.lang-btn:hover{border-color:var(--stone2); color:var(--ink)}
.lang-menu{position:absolute; top:calc(100% + 6px); right:0; min-width:150px;
  background:var(--paper); border:1px solid var(--stone); display:none; z-index:60}
.lang-menu.open{display:block}
.lang-menu button{display:flex; justify-content:space-between; width:100%;
  text-align:left; padding:11px 14px; font-family:var(--sans); font-size:14px;
  color:var(--ink); background:transparent; cursor:pointer;
  border-bottom:1px solid var(--stone)}
.lang-menu button:last-child{border-bottom:none}
.lang-menu button:hover{background:var(--ground)}
.lang-menu button .mono{font-size:10px}
.theme-btn{background:transparent; border:1px solid var(--stone); color:var(--grey2);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .15s,color .15s}
.theme-btn:hover{border-color:var(--stone2); color:var(--ink)}
.burger{display:none; background:transparent; border:1px solid var(--stone);
  width:38px; height:38px; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink)}

/* ═══ SECTIONS ═══ */
/* 72+72 statt 104+104: die border-top des naechsten .sec-head bildet
   ohnehin die Trennlinie, doppelt so viel Luft wirkte nur leer. */
section{padding-top:72px; padding-bottom:72px}
section.tight{padding-top:48px; padding-bottom:48px}
.eyebrow{margin-bottom:22px}

/* Abschnittskopf — alles auf DERSELBEN linken Kante wie der Inhalt darunter.
   Vorher stand die Ueberschrift in einer zweiten Grid-Spalte und war damit
   gegenueber Karten/Tabellen sichtbar eingerueckt. */
.sec-head{border-top:1px solid var(--ink); padding-top:18px; margin-bottom:44px}
.sec-head .num{display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:0.14em; color:var(--marine); margin-bottom:14px}
.sec-head h2{font-size:38px; max-width:24ch}
.sec-head p{font-size:17px; color:var(--grey2); max-width:62ch; margin-top:14px}
.sec-actions{margin-top:32px}

/* ═══ PAGE HERO (Unterseiten) ═══ */
.page-hero{padding:76px 0 64px; border-bottom:1px solid var(--stone)}
.page-hero h1{font-size:56px; margin:20px 0 22px}
.page-hero .lede{font-size:20px; color:var(--grey2); max-width:620px}

/* ═══ HOME HERO ═══ */
.hero{padding-top:72px; padding-bottom:32px}
.hero-grid{display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:start}
.hero h1{font-size:64px; margin:22px 0}
.hero .lede{font-size:20px; color:var(--grey2); max-width:460px; margin-bottom:34px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.plan{border:1px solid var(--stone); background:var(--paper)}
.plan-head{display:flex; justify-content:space-between; padding:16px 24px;
  border-bottom:1px solid var(--stone)}
.plan-row{display:grid; grid-template-columns:64px 1fr auto; gap:14px;
  align-items:center; padding:17px 24px; border-bottom:1px solid var(--stone)}
.plan-row:last-child{border-bottom:none}
.plan-row .when{font-family:var(--mono); font-size:11px; color:var(--grey)}
.plan-row .what{font-size:14px}
.tag{font-family:var(--mono); font-size:9px; letter-spacing:0.1em;
  text-transform:uppercase; padding:4px 8px; white-space:nowrap}
.tag-pub{background:var(--marine); color:var(--ground)}
.tag-ok{border:1px solid var(--marine); color:var(--marine)}
.tag-draft{border:1px solid var(--ink); color:var(--ink)}

/* ═══ PRODUKTAUFNAHME ═══
   Echte Aufnahmen aus der Anwendung, in einer ruhigen Hairline-Fassung.
   Kein Schatten, keine Perspektive — flach wie der Rest der Marke. */
.shot{border:1px solid var(--stone); background:var(--paper)}
.shot-bar{display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--stone)}
.shot-dot{width:7px; height:7px; border-radius:50%; background:var(--stone2); flex:none}
.shot-url{font-family:var(--mono); font-size:10px; letter-spacing:0.06em;
  color:var(--grey); margin-left:8px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.shot-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.shot img{width:100%; height:auto; display:block}
.shot-cap{font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--grey); margin-top:14px}
.shot-hint{display:none; font-family:var(--mono); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--grey);
  padding:8px 14px; border-top:1px solid var(--stone)}

/* Aufnahme + erklaerender Text nebeneinander */
.shot-split{display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center}
.shot-split.flip{grid-template-columns:7fr 5fr}
/* Grid-Kinder haben min-width:auto und wachsen sonst auf die Breite ihres
   Inhalts. Die auf Mobil vergroesserte Aufnahme (min-width:1100px) sprengte
   damit die Spalte und die ganze Seite lief ueber, statt vom .shot-scroll
   begrenzt zu werden. */
.shot-split > *{min-width:0}
.shot-split .txt h3{font-size:28px; margin-bottom:14px}
.shot-split .txt p{font-size:17px; color:var(--grey2); line-height:1.6;
  margin-bottom:14px; max-width:46ch}
.shot-split .txt .mono{display:block; color:var(--marine); margin-bottom:16px}
.shot-list{list-style:none; margin-top:20px}
.shot-list li{display:flex; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--stone); font-size:16px; color:var(--grey2)}
.shot-list li:last-child{border-bottom:none}
.shot-list svg{width:17px; height:17px; stroke:var(--marine); stroke-width:1.5;
  fill:none; flex:none; margin-top:4px}

/* ═══ TRUST STRIP ═══ */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  border-top:1px solid var(--ink); padding-top:34px; margin-top:64px}
.trust .num{font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  color:var(--marine); margin-bottom:10px}
.trust h3{font-size:16px; font-weight:500; margin-bottom:6px}
.trust p{font-size:14px; color:var(--grey); line-height:1.55}

/* ═══ PROBLEM / LÖSUNG ═══ */
.ps{border-top:1px solid var(--stone)}
.ps-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:26px 0;
  border-bottom:1px solid var(--stone)}
.ps-row .p-side .mono{color:var(--terra); margin-bottom:10px; display:block}
.ps-row .s-side .mono{color:var(--marine); margin-bottom:10px; display:block}
.ps-row p{font-size:17px; line-height:1.55}
.ps-row .p-side p{color:var(--grey2)}

/* ═══ FEATURES ═══ */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--stone); border:1px solid var(--stone)}
.feat-card{background:var(--paper); padding:34px 30px}
.feat-card .icon{width:30px; height:30px; stroke:var(--marine); stroke-width:1.5;
  fill:none; margin-bottom:22px}
.feat-card .mono{color:var(--marine); margin-bottom:14px; display:block}
.feat-card h3{font-size:19px; margin-bottom:10px}
.feat-card p{font-size:15px; color:var(--grey2); line-height:1.55}

/* ═══ STEPS ═══ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--stone); border:1px solid var(--stone)}
.step{background:var(--paper); padding:32px 28px}
.step .num{font-family:var(--mono); font-size:26px; font-weight:400;
  color:var(--stone2); margin-bottom:20px}
.step h3{font-size:17px; margin-bottom:8px}
.step p{font-size:14px; color:var(--grey2); line-height:1.55}

/* ═══ SPLIT (Ihre Aufgabe / unsere) ═══ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--stone); border:1px solid var(--stone)}
.split > div{background:var(--paper); padding:36px 32px}
.split .mono{display:block; margin-bottom:18px}
.split .you .mono{color:var(--terra)}
.split .us .mono{color:var(--marine)}
.split ul{list-style:none}
.split li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--stone);
  font-size:16px; line-height:1.5}
.split li:last-child{border-bottom:none}
.split li svg{width:18px; height:18px; stroke:var(--marine); stroke-width:1.5;
  fill:none; flex:none; margin-top:4px}

/* ═══ PRINZIPIEN ═══ */
.princ{border-top:1px solid var(--stone)}
.princ-row{display:grid; grid-template-columns:44px 1fr; gap:20px; padding:22px 0;
  border-bottom:1px solid var(--stone)}
.princ-row .k{font-family:var(--mono); font-size:12px; color:var(--marine)}
.princ-row strong{font-weight:500}
.princ-row span.t{font-size:17px; line-height:1.5}
.princ-row .d{color:var(--grey2)}

/* ═══ PREISE ═══ */
.price{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stone);
  border:1px solid var(--stone)}
.price-card{background:var(--paper); padding:44px 40px; display:flex;
  flex-direction:column}
.price-card .mono{color:var(--marine); margin-bottom:20px; display:block}
.price-card h3{font-size:26px; margin-bottom:12px}
.price-card .desc{font-size:16px; color:var(--grey2); margin-bottom:26px;
  line-height:1.55}
.price-card ul{list-style:none; margin-bottom:32px; flex:1}
.price-card li{display:flex; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--stone); font-size:15px}
.price-card li svg{width:18px; height:18px; stroke:var(--marine); stroke-width:1.5;
  fill:none; flex:none; margin-top:3px}
.price-note{font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--grey); margin-top:20px}

/* ═══ DSGVO ═══ */
.gdpr{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  border:1px solid var(--stone); background:var(--paper); padding:56px 48px}
.gdpr h2{font-size:34px; margin-bottom:20px}
.gdpr p{font-size:17px; color:var(--grey2); line-height:1.6; margin-bottom:16px}
.gdpr-list{list-style:none}
.gdpr-list li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--stone); align-items:start}
.gdpr-list li:last-child{border-bottom:none}
.gdpr-list svg{width:20px; height:20px; stroke:var(--marine); stroke-width:1.5;
  fill:none; margin-top:3px}
.gdpr-list strong{font-weight:500; display:block; margin-bottom:2px}
.gdpr-list small{color:var(--grey); font-size:14px}
.euro-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--euro);
  border:1px solid var(--euro); padding:7px 12px; margin-bottom:24px}

/* ═══ FAQ ═══ */
.faq{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--stone)}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:24px;
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:26px 0; font-size:20px; font-weight:500; color:var(--ink);
  font-family:var(--sans); letter-spacing:-0.01em}
.faq-q .pm{font-family:var(--mono); font-size:22px; color:var(--marine); flex:none;
  transition:transform .2s}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease}
.faq-a p{font-size:16px; color:var(--grey2); line-height:1.6; padding:0 0 26px;
  max-width:760px}

/* ═══ KONTAKT ═══ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--stone); border:1px solid var(--stone)}
.contact-card{background:var(--paper); padding:44px 40px}
.contact-card .mono{color:var(--marine); margin-bottom:18px; display:block}
.contact-card h3{font-size:22px; margin-bottom:12px}
.contact-card p{font-size:16px; color:var(--grey2); line-height:1.6;
  margin-bottom:24px}
.contact-mail{font-size:22px; font-weight:500; color:var(--marine);
  letter-spacing:-0.01em; border-bottom:1px solid var(--marine);
  padding-bottom:2px; display:inline-block}
.contact-mail:hover{color:var(--euro); border-color:var(--euro)}
.next-list{list-style:none; counter-reset:n}
.next-list li{counter-increment:n; display:grid; grid-template-columns:34px 1fr;
  gap:14px; padding:16px 0; border-bottom:1px solid var(--stone); font-size:16px;
  line-height:1.5; align-items:start}
.next-list li:last-child{border-bottom:none}
.next-list li::before{content:counter(n,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--marine); padding-top:4px}

/* ═══ FINAL CTA ═══ */
.final{background:var(--marine); color:var(--ground); padding:96px 0}
[data-theme="dark"] .final{background:var(--paper);
  border-top:1px solid var(--stone); border-bottom:1px solid var(--stone)}
.final h2{font-size:48px; color:var(--ground); margin-bottom:20px}
[data-theme="dark"] .final h2{color:var(--ink)}
.final p{font-size:18px; opacity:.85; margin-bottom:34px; max-width:520px}
[data-theme="dark"] .final p{color:var(--grey2); opacity:1}
.final .btn{border-color:var(--ground); color:var(--ground)}
.final .btn:hover{background:var(--ground); color:var(--marine)}
.final .btn-fill{background:var(--ground); color:var(--marine); border-color:var(--ground)}
.final .btn-fill:hover{background:transparent; color:var(--ground)}
[data-theme="dark"] .final .btn{border-color:var(--ink); color:var(--ink)}
[data-theme="dark"] .final .btn:hover{background:var(--ink); color:var(--paper)}
[data-theme="dark"] .final .btn-fill{background:var(--marine); color:var(--ground);
  border-color:var(--marine)}
.final-meta{font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; opacity:.7; margin-top:26px}

/* ═══ FOOTER ═══ */
footer{padding:64px 0 40px; border-top:1px solid var(--stone)}
.foot-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:48px}
.foot-brand{display:flex; align-items:center; gap:11px; font-size:20px;
  font-weight:500; letter-spacing:-0.03em; margin-bottom:16px}
.foot-brand .mark{width:24px; height:24px}
.foot-col p, .foot-col a{font-size:14px; color:var(--grey2); display:block;
  line-height:1.5}
.foot-col a{padding:5px 0; transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-col .mono{margin-bottom:16px; color:var(--grey)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--stone); padding-top:26px; flex-wrap:wrap; gap:16px}
.foot-bottom .mono{font-size:11px}

/* ═══ RECHTSTEXTE ═══ */
.legal{max-width:760px}
.legal h2{font-size:26px; margin:56px 0 16px; padding-top:22px;
  border-top:1px solid var(--stone)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:18px; margin:28px 0 10px}
.legal p{font-size:16px; line-height:1.7; color:var(--grey2); margin-bottom:14px}
.legal ul{margin:0 0 16px 0; padding-left:20px}
.legal li{font-size:16px; line-height:1.7; color:var(--grey2); margin-bottom:8px}
.legal strong{color:var(--ink); font-weight:500}
.legal a{color:var(--marine); border-bottom:1px solid var(--stone2)}
.legal a:hover{border-bottom-color:var(--marine)}
.legal address{font-style:normal; font-size:16px; line-height:1.8; color:var(--grey2)}
.legal .updated{font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--grey); margin-top:56px;
  border-top:1px solid var(--stone); padding-top:20px}

/* Platzhalter — bewusst auffällig, damit fehlende Angaben nicht
   unbemerkt live gehen. Vor Veröffentlichung müssen ALLE weg sein. */
.todo{display:inline-block; background:var(--terra); color:var(--ground);
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  padding:2px 8px; border-radius:2px}
.legal .warn{border:1px solid var(--terra); padding:20px 24px; margin-bottom:40px}
.legal .warn p{color:var(--terra); margin:0; font-size:15px}
.legal .warn strong{color:var(--terra); font-weight:600}

/* ═══ ANIMATION — „Quiet motion": nur Opacity + Position ═══ */
.reveal{opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ═══════════════ RESPONSIVE ═══════════════
   Typografie skaliert fluid ueber clamp(), damit zwischen den Breakpoints
   keine Spruenge entstehen. Reihenfolge: Tablet -> klein -> sehr klein. */

/* Fluide Schriftgroessen — greifen auf allen Breiten */
.hero h1{font-size:clamp(34px, 6.2vw, 64px)}
.page-hero h1{font-size:clamp(30px, 5.4vw, 56px)}
.sec-head h2{font-size:clamp(26px, 3.6vw, 38px)}
.final h2{font-size:clamp(28px, 4.4vw, 48px)}
.hero .lede,.page-hero .lede{font-size:clamp(17px, 2vw, 20px)}
.shot-split .txt h3{font-size:clamp(22px, 2.8vw, 28px)}
.gdpr h2{font-size:clamp(24px, 3.2vw, 34px)}

@media(max-width:1000px){
  :root{--pad:32px}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .shot-split,.shot-split.flip{grid-template-columns:1fr; gap:32px}
  .feat,.steps{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr; gap:32px}
  .ps-row,.gdpr,.split,.price,.contact-grid{grid-template-columns:1fr}
  .ps-row{gap:18px; padding:22px 0}
  .gdpr{gap:32px; padding:40px 32px}
  .split,.price,.contact-grid{gap:1px}
  .trust{grid-template-columns:1fr; gap:26px}
  section{padding-top:72px; padding-bottom:72px}
  section.tight{padding-top:56px; padding-bottom:56px}
  .final{padding-top:72px; padding-bottom:72px}

  /* Navigation → Burger */
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; background:var(--ground);
    border-bottom:1px solid var(--stone); padding:4px var(--pad) 18px; margin-left:0}
  .nav-links.open a{padding:15px 0; width:100%; border-bottom:1px solid var(--stone);
    font-size:17px}
  .nav-links.open a:last-child{border-bottom:none}
  .nav-links.open a.active::after{display:none}
  .nav-links.open a.active{color:var(--marine); font-weight:500}
  .burger{display:flex}
}

@media(max-width:700px){
  :root{--pad:20px}
  /* Header-CTA weicht dem Burger; Kontakt ist im Menue und im Seitenfuss */
  header .nav-actions > .btn-fill{display:none}
  .feat,.steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:28px}
  section{padding-top:56px; padding-bottom:56px}
  section.tight{padding-top:44px; padding-bottom:44px}
  .final{padding-top:56px; padding-bottom:56px}
  .sec-head{margin-bottom:32px}
  .hero{padding-top:48px; padding-bottom:64px}
  .page-hero{padding:48px 0 44px}
  .trust{margin-top:44px; padding-top:26px}

  /* Karten/Zellen: weniger Innenabstand, damit Text nicht einschnuert */
  .feat-card{padding:26px 22px}
  .step{padding:26px 22px}
  .price-card{padding:32px 24px}
  .contact-card{padding:32px 24px}
  .split > div{padding:28px 22px}
  .gdpr{padding:32px 24px}

  /* Wochenplan im Hero: Datum ueber den Text stellen statt zu quetschen */
  .plan-row{grid-template-columns:1fr auto; gap:6px 12px; padding:14px 18px}
  .plan-row .when{grid-column:1/-1; font-size:10px}
  .plan-head{padding:12px 18px}

  /* Rechtstexte */
  .legal h2{font-size:22px; margin:40px 0 12px}
  .legal p,.legal li{font-size:15px}

  /* Buttons volle Breite = groessere Trefferflaeche */
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{justify-content:center; padding:15px 22px}
  .sec-actions .btn,.price-card .btn{width:100%; justify-content:center; padding:15px 22px}

  /* Fussnavigation: groessere Tap-Ziele */
  .foot-col a{padding:9px 0}
}

/* Breite Produktaufnahmen auf schmalen Schirmen.
   Auf 350px Anzeigebreite schrumpft eine 1400px-Oberflaeche auf ~1/8 —
   die Schrift darin landet bei ~3.5px und ist unlesbar. Statt das Bild
   zu faelschen oder zu verstecken: in lesbarer Vergroesserung zeigen und
   horizontal verschiebbar machen. Die Browserleiste bleibt fest. */
@media(max-width:760px){
  .shot img{min-width:1100px}
  .shot-hint{display:block}
}

@media(max-width:420px){
  .princ-row{grid-template-columns:28px 1fr; gap:12px}
  .gdpr-list li{gap:10px}
  .shot-bar{padding:8px 10px}
  .contact-mail{font-size:18px; word-break:break-all}
}

/* Zeigegeraet ohne Hover (Touch): Hover-Zustaende nicht „kleben" lassen */
@media(hover:none){
  .btn:hover{background:transparent; color:var(--ink)}
  .btn-fill:hover{background:var(--marine); color:var(--ground)}
  .final .btn-fill:hover{background:var(--ground); color:var(--marine)}
}