/* =============================================================
   Rita Scheer – Design-System
   Umsetzung 1:1 der High-Fidelity-Webdesign-Spezifikation.
   Reihenfolge: Fonts · Tokens · Reset · Typografie · Layout ·
   Komponenten · Responsive · A11y/Motion.
   ============================================================= */

/* ---------- 1 · Schriften (selbst gehostet, WOFF2 + TTF-Fallback) ---------- */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/CormorantGaramond.woff2") format("woff2"),
      url("fonts/CormorantGaramond.ttf") format("truetype");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter.woff2") format("woff2"),
      url("fonts/Inter.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("fonts/Lora.woff2") format("woff2"),
      url("fonts/Lora.ttf") format("truetype");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- 2 · Tokens (Spezifikation 1.1–1.5) ---------- */
:root{
  /* Farben */
  --creme:#F8F4EE;
  --creme-100:#EFE9DE;
  --creme-200:#E7E0D2;
  --petrol:#1F4D57;
  --petrol-deep:#17383F;
  --petrol-900:#122C32;
  --terracotta:#C96E4A;
  --terracotta-deep:#B25E3C;
  --anthracite:#2F3437;

  --text-primary:#2F3437;
  --text-secondary:rgba(47,52,55,.72);
  --text-muted:rgba(47,52,55,.52);
  --on-dark:#F8F4EE;
  --on-dark-muted:rgba(248,244,238,.72);

  --hairline:rgba(47,52,55,.10);
  --hairline-strong:rgba(47,52,55,.16);
  --hairline-on-dark:rgba(248,244,238,.16);

  /* Spacing (8px-Basis) */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:48px; --s9:64px; --s10:80px; --s11:96px; --s12:120px;
  --s13:160px; --s14:200px;

  /* Layout */
  --container:1200px;
  --container-wide:1440px;
  --measure:680px;
  --pad:40px;          /* Seiten-Padding Desktop */
  --gutter:32px;       /* Grid-Gutter Desktop */

  /* Typografie – Desktop-Skala */
  --ff-head:"Cormorant Garamond",Georgia,serif;
  --ff-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --ff-logo:"Lora",Georgia,serif;

  --fs-display:72px; --lh-display:76px;
  --fs-h1:56px; --lh-h1:62px;
  --fs-h2:44px; --lh-h2:52px;
  --fs-h3:32px; --lh-h3:40px;
  --fs-h4:24px; --lh-h4:32px;
  --fs-card:22px; --lh-card:30px;
  --fs-lead:20px; --lh-lead:32px;
  --fs-bodyl:19px; --lh-bodyl:32px;
  --fs-body:18px; --lh-body:30px;
  --fs-small:15px; --lh-small:24px;
  --fs-caption:13px; --lh-caption:20px;
  --fs-over:13px; --lh-over:16px;

  /* Radien */
  --r-card:12px; --r-img:8px; --r-btn:8px; --r-btn-sm:6px;

  /* Sektions-Padding */
  --sec-y:var(--s12);       /* 120 */
  --sec-y-hero-top:var(--s13); /* 160 */
}

/* ---------- 3 · Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--creme);
  color:var(--text-primary);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,picture{max-width:100%;display:block;}
img{height:auto;}
a{color:var(--petrol);text-decoration:none;}
button{font-family:inherit;}
:where(h1,h2,h3,h4){margin:0;font-family:var(--ff-head);font-weight:600;color:var(--petrol);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- 4 · Typografie-Klassen (Spezifikation 1.2) ---------- */
.display{font-family:var(--ff-head);font-weight:600;color:var(--petrol);
  font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-1px;}
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.5px;}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:-.25px;}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--anthracite);}
.card-title{font-family:var(--ff-head);font-weight:600;color:var(--petrol);
  font-size:var(--fs-card);line-height:var(--lh-card);}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-secondary);}
.body-l{font-size:var(--fs-bodyl);line-height:var(--lh-bodyl);}
.body-s{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-secondary);}
.caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted);}
.overline{display:inline-block;font-family:var(--ff-body);font-weight:600;
  font-size:var(--fs-over);line-height:var(--lh-over);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--petrol);}
.overline--terracotta{color:var(--terracotta);}

/* ---------- 5 · Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.container-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--pad);}
.measure{max-width:var(--measure);}
.section{padding-block:var(--sec-y);}
.section--cream100{background:var(--creme-100);}
.section--hero{padding-top:var(--sec-y-hero-top);padding-bottom:var(--s12);}
.section--tight{padding-block:var(--s11);}      /* 96 */
.section--head80{padding-top:var(--sec-y-hero-top);padding-bottom:var(--s10);} /* Kopf 160/80 */

/* Sektionskopf (2.4) */
.section-head{margin-bottom:var(--s10);}
.section-head .overline{margin-bottom:var(--s4);}
.section-head h1,.section-head h2{margin:0;}
.section-head .lead{margin-top:var(--s5);max-width:640px;}

/* Grids */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.hero__text{grid-column:1 / span 7;align-self:center;}
.hero__media{grid-column:8 / span 5;}
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center;}
.split__media{grid-column:1 / span 5;}
.split__text{grid-column:7 / span 6;}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);}
.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);}

/* ---------- 6 · Skip-Link ---------- */
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--petrol);color:var(--creme);padding:12px 20px;border-radius:6px;
  font-family:var(--ff-body);font-weight:500;}
.skip-link:focus{top:var(--s4);}

/* ---------- 7 · Header (Spezifikation 2.1) ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:96px;
  background:var(--creme);
  border-bottom:1px solid var(--hairline);
  padding:12px 0;
}
.site-header .container{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  font-family:var(--ff-logo);
  font-weight:600;
  color:var(--petrol);
  font-size:24px;
  line-height:1;
  letter-spacing:.2px;
  text-decoration:none;
  white-space:nowrap;
}
.brand img{
  display:block;
  width:auto;
  height:72px;
  max-width:320px;
  object-fit:contain;
}
.brand:focus-visible{outline:2px solid var(--petrol);outline-offset:4px;}
.header-nav{display:flex;align-items:center;gap:var(--s8);}
.nav{display:flex;align-items:center;gap:var(--s6);}
.nav__link{font-family:var(--ff-body);font-weight:500;font-size:16px;line-height:24px;
  letter-spacing:.2px;color:var(--anthracite);padding:4px 0;position:relative;}
.nav__link:hover{color:var(--petrol);}
.nav__link:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--terracotta);}
.nav__link[aria-current="page"]{color:var(--petrol);}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--terracotta);}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--petrol);
  align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle svg{width:24px;height:24px;}

/* Mobile-Menü (Overlay-Dialog) */
.mobile-menu{position:fixed;inset:0;z-index:150;background:var(--creme);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s6);
  padding:var(--s10) var(--s5);}
.mobile-menu[hidden]{display:none;}
.mobile-menu__close{position:absolute;top:24px;right:24px;width:44px;height:44px;border:0;
  background:transparent;color:var(--petrol);cursor:pointer;}
.mobile-menu__close svg{width:24px;height:24px;}
.mobile-menu a{font-family:var(--ff-head);font-weight:600;font-size:32px;line-height:40px;color:var(--petrol);}
.mobile-menu .btn{margin-top:var(--s4);}

/* ---------- 8 · Buttons (Spezifikation 1.5) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--ff-body);font-weight:500;font-size:16px;line-height:16px;letter-spacing:.2px;
  border:1px solid transparent;border-radius:var(--r-btn);cursor:pointer;text-decoration:none;
  transition:background-color 120ms ease-out,border-color 120ms ease-out,color 120ms ease-out;}
.btn--lg{height:56px;padding:0 32px;}
.btn--md{height:48px;padding:0 24px;}
.btn--sm{height:40px;padding:0 20px;border-radius:var(--r-btn-sm);font-size:15px;}
.btn__icon{width:20px;height:20px;flex:none;}
.btn--primary{background:var(--petrol);color:var(--creme);}
.btn--primary:hover{background:var(--petrol-deep);}
.btn--primary:active{background:var(--petrol-900);}
.btn--secondary{background:transparent;border-color:var(--petrol);color:var(--petrol);}
.btn--secondary:hover{background:var(--creme-100);}
.btn--secondary:active{background:var(--creme-200);}
.btn--on-dark-primary{background:var(--creme);color:var(--petrol);}
.btn--on-dark-primary:hover{background:var(--creme-200);}
.btn--on-dark-secondary{background:transparent;border-color:var(--creme);color:var(--creme);}
.btn--on-dark-secondary:hover{background:rgba(248,244,238,.10);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;pointer-events:none;}
.btn:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;}
.btn--on-dark-primary:focus-visible,.btn--on-dark-secondary:focus-visible{outline-color:var(--creme);}

/* Textlink (2.5) */
.text-link{display:inline-flex;align-items:center;gap:var(--s2);font-weight:500;color:var(--petrol);
  text-underline-offset:4px;}
.text-link:hover{text-decoration:underline;text-decoration-color:var(--terracotta);text-decoration-thickness:1px;}
.text-link .arrow{width:16px;height:16px;flex:none;}
.text-link:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;}

/* ---------- 9 · Karten (Spezifikation 1.6) ---------- */
.card{background:var(--creme-100);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:var(--s7);display:flex;flex-direction:column;
  transition:border-color 120ms ease-out;}
.section--cream100 .card{background:var(--creme);}
.card:hover{border-color:var(--petrol);}
.card .card-title{margin-bottom:var(--s3);}
.card .card-title + p{margin-bottom:var(--s6);}
.card .text-link{margin-top:auto;}

.card-product{background:var(--creme-100);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:var(--s6);display:flex;flex-direction:column;transition:border-color 120ms ease-out;}
.section--cream100 .card-product{background:var(--creme);}
.card-product:hover{border-color:var(--petrol);}
.card-product__media{width:100%;height:300px;display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s6);}
.card-product__media img{max-height:300px;width:auto;object-fit:contain;}
.card-product .overline{margin-bottom:var(--s3);}
.card-product .card-title{margin-bottom:var(--s3);}
.card-product__desc{color:var(--text-secondary);margin-bottom:var(--s5);}
.card-product__price{font-size:var(--fs-body);font-weight:500;color:var(--petrol);margin-bottom:var(--s4);}
.card-product .text-link{margin-top:auto;}

/* Blog-Zeile (row-post) */
.row-post{
  display:flex;
  align-items:flex-start;
  gap:32px;
  padding-block:48px;
  border-bottom:1px solid var(--hairline);
}

.row-post__thumb{
  display:block;
  width:280px;
  height:180px;
  flex:0 0 280px;
  overflow:hidden;
  border-radius:12px;
}

.row-post__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}

.row-post__body{
  flex:1 1 0;
  min-width:0;
}

.row-post__meta{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:8px;
}

.row-post h3{
  margin-bottom:8px;
  transition:color 120ms ease-out;
}

.row-post h3 a{
  display:block;
}

.row-post h3 a:hover{
  color:var(--petrol-deep);
}

.row-post__excerpt{
  color:var(--text-secondary);
}
/* ---------- 10 · Formulare (Spezifikation 1.7) ---------- */
.field{display:flex;flex-direction:column;margin-bottom:var(--s7);}
.field__label{font-family:var(--ff-body);font-weight:600;font-size:13px;line-height:16px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--petrol);margin-bottom:var(--s2);}
.field__input,.field__textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--hairline-strong);
  font-family:var(--ff-body);font-size:18px;line-height:30px;color:var(--text-primary);
  padding:0 0 12px 0;transition:border-color 120ms ease-out;}
.field__textarea{min-height:140px;resize:vertical;}
.field__input::placeholder,.field__textarea::placeholder{color:rgba(47,52,55,.55);}
.field__input:focus,.field__textarea:focus{outline:none;border-bottom:1.5px solid var(--petrol);}
.field__input:focus-visible,.field__textarea:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;}
.field__error{margin-top:var(--s2);font-size:13px;line-height:20px;color:var(--terracotta);}
.field[data-invalid="true"] .field__input,
.field[data-invalid="true"] .field__textarea{border-bottom-color:var(--terracotta);}

.check{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s6);}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
  border:1px solid var(--anthracite);border-radius:4px;background:var(--creme);cursor:pointer;position:relative;}
.check input:checked{background:var(--petrol);border-color:var(--petrol);}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--creme);border-width:0 2px 2px 0;transform:rotate(45deg);}
.check input:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;}
.check label{font-size:15px;line-height:24px;color:var(--text-secondary);}

/* Inline-Newsletter-Formular */
.nl-form{display:flex;gap:var(--s3);max-width:480px;}
.nl-form .field{flex:1;margin-bottom:0;}
.form-status{margin-top:var(--s4);font-size:15px;line-height:24px;}
.form-status[data-type="success"]{color:var(--petrol);}
.form-status[data-type="error"]{color:var(--terracotta);}

/* ---------- 11 · Newsletter-Sektion (Spezifikation 2.3) ---------- */
.newsletter{background:var(--petrol);color:var(--on-dark);}
.newsletter .container{text-align:center;display:flex;flex-direction:column;align-items:center;}
.newsletter h2{color:var(--creme);}
.newsletter .overline{margin-bottom:var(--s4);}
.newsletter .lead{color:var(--on-dark-muted);max-width:520px;margin:var(--s5) auto 0;}
.newsletter .nl-form{margin:var(--s8) auto 0;text-align:left;}
.newsletter .field__label{color:var(--on-dark);}
.newsletter .field__input{color:var(--on-dark);border-bottom-color:var(--hairline-on-dark);}
.newsletter .field__input::placeholder{color:var(--on-dark-muted);}
.newsletter .field__input:focus{border-bottom-color:var(--creme);}
.newsletter .caption{color:var(--on-dark-muted);margin-top:var(--s4);}
.newsletter .form-status[data-type="success"]{color:var(--creme);}

/* Wert-/Schritt-Blöcke mit Terrakotta-Linie */
.line-block{padding-top:var(--s4);}
.line-block::before{content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--terracotta);margin-bottom:var(--s4);}
.line-block h4{margin-bottom:var(--s3);}

/* ---------- 12 · Footer (Spezifikation 2.2) ---------- */
.site-footer{background:var(--petrol-900);color:var(--on-dark-muted);
  padding-top:var(--s12);padding-bottom:var(--s9);}
.footer-top{display:flex;justify-content:space-between;gap:var(--s9);align-items:flex-start;
  margin-bottom:var(--s10);flex-wrap:wrap;}
.footer-brand .brand{color:var(--creme);font-size:24px;}
.footer-brand p{color:var(--on-dark-muted);margin-top:var(--s3);font-size:15px;line-height:24px;}
.footer-newsletter{min-width:320px;}
.footer-newsletter .overline{color:var(--terracotta);margin-bottom:var(--s3);display:block;}
.footer-newsletter .field__input{color:var(--on-dark);border-bottom-color:var(--hairline-on-dark);}
.footer-newsletter .field__input::placeholder{color:var(--on-dark-muted);}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);}
.footer-cols h3{font-family:var(--ff-body);font-weight:600;font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:var(--s4);}
.footer-cols li{margin-bottom:var(--s3);}
.footer-cols a{color:var(--on-dark-muted);font-size:15px;line-height:24px;}
.footer-cols a:hover{color:var(--creme);text-decoration:underline;text-decoration-color:var(--terracotta);text-underline-offset:4px;}
.footer-divider{height:1px;background:var(--hairline-on-dark);margin-block:var(--s9);}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;}
.footer-bottom p{font-size:13px;line-height:20px;color:var(--on-dark-muted);}

/* ---------- 13 · Hero-Media / Bilder ---------- */
.portrait{border-radius:12px;overflow:hidden;}
.portrait--45{aspect-ratio:4/5;}
.split__media .portrait--3\/2{
    aspect-ratio:5/4;
}
.split__media .portrait--45{
  aspect-ratio:3/2;
}

.split__media .portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.portrait img{width:100%;height:100%;object-fit:cover;}
.img-16-9{aspect-ratio:16/9;border-radius:var(--r-img);overflow:hidden;background:var(--creme-100);}
.img-16-9 img{width:100%;height:100%;object-fit:cover;}

/* Hero-Vertrauenszeile */
.hero__cta-note{margin-top:var(--s3);}
.hero__text .display{margin-bottom:var(--s6);}
.hero__text .overline{margin-bottom:var(--s5);}
.hero__text .lead{max-width:460px;margin-bottom:var(--s7);}

/* Werte-/Fließtextabstände */
.prose > * + *{margin-top:var(--s5);}
.prose{max-width:var(--measure);}

/* Cookie-Banner (2.5) */
.cookie{position:fixed;left:24px;right:24px;bottom:24px;z-index:180;max-width:640px;margin-inline:auto;
  background:var(--creme);border:1px solid var(--hairline);border-radius:12px;padding:24px 28px;}
.cookie[hidden]{display:none;}
.cookie p{font-size:15px;line-height:24px;color:var(--text-secondary);margin-bottom:16px;}
.cookie__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ---------- 14 · Utilities ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.u-center{text-align:center;}
.mt-3{margin-top:var(--s3);} .mt-6{margin-top:var(--s6);} .mt-9{margin-top:var(--s9);}
.stack-cta{display:flex;gap:var(--s4);flex-wrap:wrap;}
.center-block{max-width:640px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;}

/* ---------- 14a · Stabilität / Platzhalter ---------- */
html,body{max-width:100%;overflow-x:clip;}
.hero__text,.hero__media,.split__media,.split__text,
.card,.card-product,.row-post__body{min-width:0;}
.section-head h1,.section-head h2,.row-post h3,
.card-title,.display{overflow-wrap:anywhere;}

/* Header: Logo links, Navigation rechts */
.site-header .container{width:100%;}
.header-nav{margin-left:auto;min-width:0;}

/* Das aktuelle Logo-PNG enthält viel freie Fläche. Breite begrenzen,
   damit Navigation und CTA sicher in einer Zeile bleiben. */
.cookie h3{font-size:20px;line-height:28px;margin-bottom:8px;}
.brand img{height:auto;width:280px;max-height:72px;max-width:28vw;}

/* Saubere Übergangslösungen, bis echte Bilder geliefert werden */
.portrait--placeholder,.media-placeholder,.thumb-placeholder{
  background:var(--creme-200);
  border:1px solid var(--hairline);
  color:var(--text-muted);
}
.portrait--placeholder,.media-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.portrait--placeholder span,.media-placeholder span{
  font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;
}
.media-placeholder{width:100%;height:100%;border-radius:var(--r-img);}
.thumb-placeholder{display:block;width:100%;height:100%;}

/* Produkt-Karten */
.products-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);}

/* =============================================================
   RESPONSIVE (Spezifikation Teil 4)
   ============================================================= */

/* Tablet 768–1023 */
@media (max-width:1023px){
  :root{
    --pad:32px; --gutter:24px;
    --sec-y:88px; --sec-y-hero-top:112px;
    --fs-display:56px; --lh-display:60px;
    --fs-h1:44px; --lh-h1:50px;
    --fs-h2:36px; --lh-h2:44px;
    --fs-h3:28px; --lh-h3:36px;
    --fs-h4:22px; --lh-h4:30px;
    --fs-lead:19px; --lh-lead:30px;
    --fs-bodyl:18px; --lh-bodyl:30px;
  }
  /* Header → Hamburger */
  .nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-nav{gap:var(--s5);}
  .site-header .header-nav > .btn{display:none;}
  .brand img{width:240px;max-width:62vw;}

  /* Hero & Splits stapeln */
  .hero__grid{grid-template-columns:1fr;}
  .hero__text,.hero__media{grid-column:1 / -1;}
  .hero__media{order:2;}
  .split{grid-template-columns:1fr;}
  .split__media,.split__text{grid-column:1 / -1;}
  .split__media{order:1;} .split__text{order:2;}

  /* Karten: 3→2, Wegweiser 3→1 */
  .cards-3{grid-template-columns:1fr;}
  .cards-2{grid-template-columns:1fr;}
  .products-3{grid-template-columns:repeat(2,1fr);}

  .footer-cols{grid-template-columns:repeat(2,1fr);row-gap:var(--s8);}
  .footer-top{flex-direction:column;}
}


/* Mobile <768 */
@media (max-width:767px){
  :root{
    --pad:24px; --gutter:16px;
    --sec-y:64px; --sec-y-hero-top:88px;
    --fs-display:40px; --lh-display:44px;
    --fs-h1:34px; --lh-h1:40px;
    --fs-h2:30px; --lh-h2:38px;
    --fs-h3:26px; --lh-h3:34px;
    --fs-h4:20px; --lh-h4:28px;
    --fs-lead:18px; --lh-lead:28px;
    --fs-bodyl:17px; --lh-bodyl:28px;
    --fs-body:17px; --lh-body:28px;
  }
  .products-3{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;}
  .footer-newsletter{min-width:0;width:100%;}
  /* Buttons volle Breite */
  .hero__text .btn,.center-block .btn{width:100%;}
  .stack-cta{flex-direction:column;}
  .stack-cta .btn{width:100%;}
  /* Newsletter-/Kontakt-Formulare stapeln */
  .nl-form{flex-direction:column;}
  .nl-form .btn{width:100%;}
  /* Blog-Zeile stapeln */
  .row-post{flex-direction:column;gap:var(--s4);}
  .row-post__thumb{width:100%;height:auto;aspect-ratio:16/9;}
}
/* Logo im Header – Mobil */
@media (max-width:768px){
  .brand img{width:220px;max-width:68vw;height:auto;}
}
/* ---------- 15 · Motion / A11y ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important;scroll-behavior:auto!important;}
}