/* ================================================================
   0 · FONTS  (selbst gehostet — keine externen Requests)
   ================================================================ */
@font-face{ font-family:"Cormorant Garamond"; src:url("/fonts/CormorantGaramond.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("/fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight:400 500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("/fonts/HankenGrotesk.woff2") format("woff2"); font-weight:300 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Hanken Grotesk"; src:url("/fonts/HankenGrotesk-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* ================================================================
   1 · DESIGN-TOKENS
   ================================================================ */
:root{
  --cream:      #F6F3EC;   /* Grundfläche — warmes Elfenbein          */
  --cream-deep: #EFEAE0;   /* leicht vertiefte Flächen / Platzhalter  */
  --cream-line: #DDD6C8;   /* Flächen-Abstufung für Platzhalter       */
  --ink:        #1A1D23;   /* Anthrazit — Text                        */
  --ink-soft:   #43464D;   /* sekundärer Text                         */
  --navy:       #0E1626;   /* dunkler Abschluss-Block                 */
  --bordeaux:   #5B1220;   /* der eine Akzent                         */
  --hairline:   rgba(26,29,35,.16);          /* feine Linien, hell   */
  --hairline-strong: rgba(26,29,35,.32);
  --hairline-inv: rgba(246,243,236,.22);     /* feine Linien, dunkel */

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --w-max: 1200px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ================================================================
   2 · BASIS
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--bordeaux); color:var(--cream); }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.wrap{ max-width:var(--w-max); margin-inline:auto; padding-inline:var(--pad-x); }

/* Typo-Hierarchie */
h1,h2,h3,blockquote{ font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.005em; }
h1{ font-size:clamp(2.6rem, 5.4vw, 4.4rem); }
h2{ font-size:clamp(2.1rem, 4vw, 3.3rem); }
h3{ font-size:clamp(1.35rem, 2vw, 1.7rem); }
.lead{ font-size:clamp(1.05rem, 1.4vw, 1.2rem); color:var(--ink-soft); max-width:34em; }
.hero__brand{ color:var(--bordeaux); }

/* Eyebrow — Kapitälchen-Zeile über Headlines */
.eyebrow{
  display:inline-flex; align-items:center; gap:.9em;
  font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--bordeaux);
  margin-bottom:1.6rem;
}
.eyebrow::before{ content:""; width:2.4em; height:1px; background:currentColor; opacity:.55; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:2.4em; height:1px; background:currentColor; opacity:.55; }

/* Sektions-Rhythmus */
section{ padding-block:var(--sec-y); }
.sec-hairline{ border-top:1px solid var(--hairline); }

/* ================================================================
   3 · BUTTONS
   ================================================================ */
.btn{
  display:inline-block;
  font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.05em 2.4em;
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  text-align:center;
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--cream); }
.btn--primary:hover{ background:var(--bordeaux); border-color:var(--bordeaux); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--oncream:hover{ }
/* Variante auf dunklem Grund */
.btn--inverse{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.btn--inverse:hover{ background:transparent; color:var(--cream); }
.section-cta{ text-align:center; margin-top:clamp(2.5rem,5vh,4rem); }

/* ================================================================
   4 · NAVIGATION  (transparent über Hero → creme + Haarlinie)
   ================================================================ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(246,243,236,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom-color:var(--hairline);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:4.75rem;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-weight:600;
  font-size:1.45rem; letter-spacing:.3em;
}
.nav__logo{ flex-shrink:0; height:2.6rem; width:auto; display:block; }
.nav__links{ display:flex; gap:2.4rem; list-style:none; }
.nav__links a{
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-block:.4em;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--bordeaux); }
.nav__cta{ display:flex; align-items:center; gap:1.6rem; }
.nav__login{
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s;
}
.nav__login:hover{ color:var(--ink); }
.nav .btn{ padding:.85em 1.9em; }

/* Mobile-Menü */
.nav__toggle{ display:none; width:2.4rem; height:2.4rem; position:relative; z-index:110; }
.nav__toggle span{
  position:absolute; left:.35rem; right:.35rem; height:1px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .3s;
}
.nav__toggle span:nth-child(1){ top:.95rem; }
.nav__toggle span:nth-child(2){ top:1.45rem; }
body.menu-open .nav__toggle span:nth-child(1){ transform:translateY(.25rem) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2){ transform:translateY(-.25rem) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:var(--cream);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s .4s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.mobile-menu a{
  font-family:var(--serif); font-size:1.9rem; font-weight:500;
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.mobile-menu a:hover{ border-bottom-color:var(--bordeaux); }
.mobile-menu .btn{ font-family:var(--sans); font-size:.78rem; margin-top:1rem; }

@media (max-width: 900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:block; }
}

/* ================================================================
   5 · PLATZHALTER-SLOTS  (bewusst gestaltet, leicht austauschbar)
   ================================================================ */
.ph{
  position:relative;
  background:
    linear-gradient(160deg, var(--cream-deep) 0%, var(--cream-line) 100%);
  border:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem;
  overflow:hidden;
  min-height:100px;
}
/* innere Haarlinie — Passepartout-Effekt */
.ph::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--hairline);
  pointer-events:none;
}
.ph__icon{ width:26px; height:26px; stroke:var(--ink); opacity:.38; stroke-width:1; fill:none; }
.ph__label{
  font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.75;
  text-align:center; padding-inline:1.5rem; line-height:1.9;
  max-width:90%;
}
/* Seitenverhältnisse */
.ratio-45{ aspect-ratio:4/5; }        /* Personen · Hochformat  */
.ratio-169{ aspect-ratio:16/9; }      /* Video / Querformat     */
.ratio-32{ aspect-ratio:3/2; }        /* Konfigurator-UI        */
.ratio-11{ aspect-ratio:1/1; }

/* Echte Bild-Slots — fixes 3:4-Format (Assets: 1200×1600), cover-Fit
   fängt minimale Pixelabweichungen ab, nichts springt oder verzerrt */
.photo{
  position:relative; aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--cream-deep);
}
.photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* dunklere Platzhalter-Variante (z.B. „Nachher“-Studiobild) */
.ph--dark{
  background:linear-gradient(160deg, #2A2E36 0%, #1A1D23 100%);
}
.ph--dark::before{ border-color:var(--hairline-inv); }
.ph--dark .ph__icon{ stroke:var(--cream); opacity:.45; }
.ph--dark .ph__label{ color:var(--cream); opacity:.6; }

/* ================================================================
   6 · HERO
   ================================================================ */
.hero{ padding-top:clamp(8rem, 16vw, 11.5rem); padding-bottom:var(--sec-y); }
.hero__grid{
  display:grid; grid-template-columns: minmax(0,10fr) minmax(0,9fr);
  gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center;
}
.hero h1{ margin-bottom:1.6rem; }
.hero .lead{ margin-bottom:1.3rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__grid > :first-child{ order:2; }   /* Text unter das Bild */
  .hero__grid > :last-child{ order:1; }    /* Slider zuerst */
  .hero{ padding-top:7.5rem; }
}

/* --- Vorher/Nachher-Slider (Pflicht-Feature) ------------------- */
.ba{
  position:relative;
  aspect-ratio:3/4;                /* fix — entspricht den Assets (1200×1600) */
  max-height:78vh;
  border:1px solid var(--hairline-strong);
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y;              /* vertikales Scrollen bleibt möglich */
  cursor:ew-resize;
  overflow:hidden;
  background:var(--cream-deep);
}
.ba__layer{ position:absolute; inset:0; }
.ba__layer .ph{ position:absolute; inset:0; border:0; }
/* echte Slider-Bilder: beide Hälften decken sich exakt (cover + center) */
.ba__layer img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;                 /* Regler statt Bild ziehen */
  -webkit-user-drag:none; user-drag:none;
  user-select:none; -webkit-user-select:none;
}
/* „Nachher“ liegt unten, „Vorher“ wird per clip-path beschnitten */
.ba__before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:1px; background:var(--cream);
  box-shadow:0 0 0 .5px rgba(26,29,35,.35);
  pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--cream);
  border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 2px 14px rgba(14,22,38,.18);
}
.ba__grip::before, .ba__grip::after{
  content:""; width:5px; height:5px;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink);
}
.ba__grip::before{ transform:rotate(-45deg); }
.ba__grip::after{ transform:rotate(135deg); }
.ba__tag{
  position:absolute; bottom:14px; z-index:5;
  font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  padding:.5em 1.1em;
  background:rgba(246,243,236,.88);
  border:1px solid var(--hairline);
  color:var(--ink);
  pointer-events:none;
}
.ba__tag--before{ left:14px; }
.ba__tag--after{ right:14px; }

/* ================================================================
   7 · PROBLEM  (Bild links, großer Blickfang-Satz rechts)
   ================================================================ */
.problem{ background:var(--ink); color:var(--cream); }
.problem .lead{ color:rgba(246,243,236,.8); }
.problem .photo{ border-color:var(--hairline-inv); }
.problem__grid{
  display:grid; grid-template-columns:minmax(0,8fr) minmax(0,10fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.problem h2{ margin-bottom:1.4rem; }
.problem__statement{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,2.9vw,2.45rem); line-height:1.24; letter-spacing:-.005em;
  max-width:17em;
  margin-top:clamp(2rem,3.5vw,2.8rem);
  padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--hairline-inv);
}
.problem__statement em{ color:#C99AA0; }
@media (max-width: 820px){
  .problem__grid{ grid-template-columns:1fr; }   /* Bild oben, Text darunter */
  .problem__grid .ph, .problem__grid .photo{ max-width:440px; }
}

/* ================================================================
   8 · ÜBERSETZEN  (visuelles Triptychon: Begriffe → Bild)
   dunkel eingefärbt — exakt wie die Video-Sektion
   ================================================================ */
.translate__head{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.translate .lead{ color:var(--ink-soft); margin-inline:auto; margin-top:1.3rem; }
.translate__flow{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);
  max-width:1000px; margin-inline:auto;
  align-items:center;
}
.translate__label{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bordeaux);
  text-align:center; margin-bottom:1.4rem;
}
/* linke Karte — die Welt der Beratung */
.translate__panel{
  position:relative; aspect-ratio:4/5;
  border:1px solid var(--hairline);
  background:linear-gradient(160deg, var(--cream-deep) 0%, var(--cream-line) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.8rem,3vw,2.6rem);
  padding:clamp(1.5rem,3vw,2.5rem);
}
/* innere Haarlinie — Passepartout wie bei den Bild-Slots */
.translate__panel::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--hairline); pointer-events:none;
}
.translate__swatches{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:start;
  gap:clamp(.45rem,1vw,.7rem);
}
.translate__swatch{ text-align:center; }
.translate__chip{
  display:block; width:clamp(2.1rem,3.2vw,2.7rem); aspect-ratio:1;
  border:3px solid var(--cream);           /* wie aufgezogene Stoffmuster */
  box-shadow:0 0 0 1px var(--hairline), 0 1px 8px rgba(26,29,35,.14);
  margin-inline:auto;
}
.translate__swatch small{
  display:block; margin-top:.55rem;
  font-size:.52rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.8;
}
.translate__terms{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.translate__terms span{
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:.55em 1.15em; border:1px solid var(--hairline);
}
/* Mitte — der Übersetzungs-Moment */
.translate__bridge{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-align:center;
}
.translate__arrow{
  font-family:var(--serif); font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:1;
  color:var(--bordeaux);
}
.translate__bridge small{
  font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bordeaux); white-space:nowrap;
}
/* rechtes Ergebnisbild */
.translate .photo{ border-color:var(--hairline); }
.translate__closing{
  margin-top:clamp(3rem,6vw,4.5rem);
  text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1.8vw,1.45rem); line-height:1.6;
  color:var(--ink-soft); max-width:36em; margin-inline:auto;
}
@media (max-width: 820px){
  .translate__flow{ grid-template-columns:1fr; max-width:440px; gap:2rem; }
  .translate__panel{ aspect-ratio:auto; padding-block:clamp(2.6rem,9vw,3.4rem); } /* gestapelt: Höhe folgt Inhalt */
  .translate__arrow{ transform:rotate(90deg); }  /* Pfeil zeigt nach unten */
}

/* ================================================================
   9 · SO FUNKTIONIERT'S  (drei Schritte)
   ================================================================ */
.steps{ background:var(--ink); color:var(--cream); }
.steps .photo{ border-color:var(--hairline-inv); }
.steps__head{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.steps__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:stretch;
}
.step{ display:flex; flex-direction:column; }
.step .photo{ margin-top:auto; }
.step__num{
  font-family:var(--serif); font-size:1.45rem; font-style:italic;
  color:#C99AA0;
  display:flex; align-items:center; gap:.9em;
  margin-bottom:1.1rem;
}
.step__num::after{ content:""; flex:1; height:1px; background:var(--hairline-inv); }
.step h3{ margin-bottom:.5rem; }
.step p{ color:rgba(246,243,236,.8); font-size:.98rem; margin-bottom:1.6rem; max-width:26em; }
@media (max-width: 900px){
  .steps__grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:3.5rem; }
}

/* ================================================================
   10 · DEMO-VIDEO  (vollbreit, dunkler Rahmen)
   ================================================================ */
.video-sec{ background:var(--ink); color:var(--cream); }
.video-sec .eyebrow{ color:var(--cream); opacity:.85; }
.video-sec__head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.video-sec .lead{ color:rgba(246,243,236,.72); margin-inline:auto; }
.video-frame{
  max-width:980px; margin-inline:auto;
  border:1px solid var(--hairline-inv);
  padding:clamp(.6rem,1.4vw,1rem);          /* Rahmen wie ein Passepartout */
}
.video-ph{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(160deg,#232730 0%,#14171d 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  cursor:pointer;
}
.video-ph__play{
  width:78px; height:78px; border-radius:50%;
  border:1px solid rgba(246,243,236,.5);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.video-ph__play svg{ width:20px; height:20px; fill:var(--cream); margin-left:3px; }
.video-ph:hover .video-ph__play{ background:var(--bordeaux); border-color:var(--bordeaux); transform:scale(1.05); }
.video-ph__label{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,243,236,.55); text-align:center; line-height:2; padding-inline:1.5rem;
}

/* ================================================================
   11 · GALERIE  (Beweis-Sektion)
   ================================================================ */
.gallery__head{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.gallery__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.6vw,2rem);
}
.tile{ position:relative; }
/* Galerie-Kacheln nutzen denselben .ba-Slider wie der Hero —
   nur der Griff und die Tags sind etwas dezenter, damit 6 Slider ruhig wirken */
.tile .ba{ border-color:var(--hairline); }
.tile .ba__grip{ width:34px; height:34px; box-shadow:0 2px 10px rgba(14,22,38,.14); }
.tile .ba__grip::before, .tile .ba__grip::after{ width:4px; height:4px; }
.tile .ba__tag{ font-size:.55rem; padding:.4em .9em; bottom:10px; }
.tile .ba__tag--before{ left:10px; }
.tile .ba__tag--after{ right:10px; }
.tile__caption{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:.9rem;
}
.tile__caption h3{ font-size:1.35rem; font-style:italic; font-weight:500; }
.tile__caption span{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); opacity:.7;
}
@media (max-width: 900px){ .gallery__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .gallery__grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; } }

/* ================================================================
   12 · REALISMUS  (Bild links, Text rechts)
   ================================================================ */
.realism__grid{
  display:grid; grid-template-columns:minmax(0,8fr) minmax(0,9fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.realism h2{ margin-bottom:1.6rem; }
.realism p{ color:var(--ink-soft); max-width:32em; }
.realism p strong{ font-weight:600; color:var(--ink); }
@media (max-width: 820px){
  .realism__grid{ grid-template-columns:1fr; }
  .realism__grid .ph, .realism__grid .photo{ max-width:440px; }
}

/* ================================================================
   13 · NUTZEN  (vier Punkte + seitliches Bild)
   ================================================================ */
.benefits__title{ text-align:center; max-width:16em; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.benefits__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.bcard{
  border:1px solid var(--hairline); background:var(--cream);
  padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1.4rem,2vw,1.8rem);
  display:flex; flex-direction:column;
}
.bcard__num{
  font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--bordeaux);
  margin-bottom:1.1rem;
}
.bcard h3{ font-size:1.15rem; line-height:1.2; margin-bottom:.5rem; }
.bcard p{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; }
@media (max-width:900px){ .benefits__cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .benefits__cards{ grid-template-columns:1fr; } }

/* ================================================================
   14 · TRUST-STREIFEN
   ================================================================ */
.trust{ padding-block:clamp(3.5rem,7vw,5.5rem); background:var(--ink); color:var(--cream); border-top:1px solid var(--hairline-inv); }
.trust__inner{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; max-width:980px; margin-inline:auto;
}
.trust__icons{ display:flex; gap:2.2rem; }
.trust__icon{
  width:88px; text-align:center;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,243,236,.72);
  line-height:1.8;
}
.trust__icon svg{
  width:34px; height:34px; margin:0 auto .7rem;
  stroke:var(--cream); stroke-width:1; fill:none;
}
.trust h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.9rem; }
.trust h2{ color:var(--cream); }
.trust p{ color:rgba(246,243,236,.85); font-size:.98rem; max-width:44em; }
.trust p strong{ font-weight:600; color:var(--cream); }
@media (max-width: 700px){
  .trust__inner{ grid-template-columns:1fr; }
  .trust__icons{ order:2; }
}

/* ================================================================
   15 · REFERENZ  (Zitat-Slot)
   ================================================================ */
.reference{ text-align:center; }
/* Zitat-Slot: freistehendes Blockquote, keine Kachel */
.reference blockquote{
  max-width:840px; margin-inline:auto;
  margin-top:clamp(2.4rem,4.5vw,3.4rem);
}
.reference blockquote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.5; color:var(--ink);
}
.reference cite{
  display:block; margin-top:1.6rem;
  font-style:normal; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.7;
}
/* Testimonial mit Porträt + Logo */
.quote__by{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:1.1rem; margin-top:clamp(2.4rem,4vw,3.2rem);
}
.quote__avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:1px solid var(--hairline);
}
.quote__meta{ text-align:left; }
.quote__meta cite{
  display:block; margin:0;
  font-family:var(--sans); font-style:normal; font-weight:600;
  font-size:.98rem; letter-spacing:0; text-transform:none;
  color:var(--ink); opacity:1;
}
.quote__role{
  display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.75;
}
.quote__logo{
  height:32px; width:auto; margin-left:.4rem; padding-left:1.1rem;
  border-left:1px solid var(--hairline);
}
@media (max-width:520px){ .quote__logo{ border-left:0; padding-left:0; margin-left:0; } }

/* ================================================================
   16 · PREIS  (eine ruhige Karte)
   ================================================================ */
.pricing__card{
  max-width:720px; margin-inline:auto;
  text-align:center;
  border:1px solid var(--hairline-strong);
  padding:clamp(2.8rem,6vw,4.5rem) clamp(1.8rem,5vw,4rem);
  position:relative;
}
/* doppelte Haarlinie — Etikett-Anmutung */
.pricing__card::before{
  content:""; position:absolute; inset:8px;
  border:1px solid var(--hairline); pointer-events:none;
}
.pricing__card h2{ margin-bottom:1.6rem; }
.pricing__card > p{ color:var(--ink-soft); max-width:38em; margin:0 auto 2.4rem; }
.pricing__card p.pricing__note{ margin:-.6rem auto 1.6rem; font-size:.8rem; color:var(--ink-soft); opacity:.7; }
.pricing__card p.pricing__guarantee{ margin:1.5rem auto 0; max-width:32em; font-size:.85rem; color:var(--ink-soft); }
.pricing__rule{
  width:56px; height:1px; background:var(--bordeaux); opacity:.6;
  margin:0 auto 2.2rem;
}

/* ================================================================
   17 · ABSCHLUSS  (dunkler Block)
   ================================================================ */
.closing{
  background:var(--navy); color:var(--cream);
  text-align:center;
  padding-block:clamp(6.5rem,13vw,11rem);
}
.closing .eyebrow{ color:var(--cream); opacity:.75; }
.closing h2{ font-size:clamp(2.2rem,4.6vw,3.7rem); max-width:17em; margin:0 auto 1.6rem; }
.closing p{
  color:rgba(246,243,236,.68); max-width:36em; margin:0 auto 3rem;
  font-size:clamp(1rem,1.3vw,1.15rem);
}

/* ================================================================
   18 · FOOTER
   ================================================================ */
.footer{
  background:var(--navy); color:rgba(246,243,236,.55);
  border-top:1px solid var(--hairline-inv);
  padding-block:2.2rem;
  font-size:.74rem; letter-spacing:.12em;
}
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
}
.footer__brand{
  font-family:var(--serif); font-size:1rem; font-weight:600;
  letter-spacing:.3em; text-indent:.3em; color:var(--cream);
}
.footer nav{ display:flex; flex-wrap:wrap; gap:1.8rem; }
.footer nav a{ text-transform:uppercase; transition:color .3s; }
.footer nav a:hover{ color:var(--cream); }

/* ================================================================
   19 · SCROLL-REVEAL  (dezent)
   ================================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ================================================================
   20 · NAV-EXTRAS  (für Fragmente: Sprachwahl + Login-Link)
   ================================================================ */
.lang-switch{ display:flex; gap:.2rem; }
.lang-btn{
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); padding:.35em .6em;
  border:1px solid transparent; transition:color .3s, border-color .3s;
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.is-active{ color:var(--bordeaux); border-color:var(--hairline); }
.nav__links a.is-active{ color:var(--ink); border-bottom-color:var(--bordeaux); }

/* ================================================================
   21 · SHARED SECTION  (Contact & generische Innen-Seiten)
   ================================================================ */
.section-inner{
  max-width:var(--w-max); margin-inline:auto;
  padding:clamp(9rem,16vw,12rem) var(--pad-x) var(--sec-y);
}
.section-header{
  text-align:center; max-width:40rem; margin:0 auto clamp(3rem,6vw,4.5rem);
}
.section-header h1,.section-header h2{ margin-bottom:1.2rem; }
.section-sub{
  font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-soft);
  max-width:34em; margin-inline:auto;
}

/* ================================================================
   22 · FORMULARE  (Contact + Auth teilen sich diese Bausteine)
   ================================================================ */
.form-group{ margin-bottom:1.5rem; }
.form-row-2{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px){ .form-row-2{ grid-template-columns:1fr 1fr; } }
.form-label{
  display:block; margin-bottom:.55rem;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.form-input{
  width:100%; padding:.95em 1.1em; min-height:44px;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream-deep);
  border:1px solid var(--hairline-strong); border-radius:0;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  outline:none;
}
.form-input::placeholder{ color:var(--ink-soft); opacity:.55; }
.form-input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(26,29,35,.08);
}
.form-input.is-error{
  border-color:var(--bordeaux);
  box-shadow:0 0 0 3px rgba(91,18,32,.10);
}
textarea.form-input{ resize:vertical; min-height:8rem; line-height:1.7; }
.form-field-error{
  display:none; margin-top:.5rem;
  font-size:.75rem; color:var(--bordeaux);
}
.form-field-error.visible{ display:block; }
.form-check{
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  font-size:.9rem; color:var(--ink-soft); line-height:1.6; padding:.4rem 0;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"]{
  flex-shrink:0; width:18px; height:18px; margin-top:.2rem;
  accent-color:var(--bordeaux); cursor:pointer;
}
.form-check a{ color:var(--bordeaux); text-decoration:underline; text-underline-offset:3px; }
.form-check-legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 2px;
}

/* ================================================================
   23 · AUTH  (Login / Register)
   ================================================================ */
.auth-page{ min-height:100vh; display:flex; flex-direction:column; background:var(--cream); }
.auth-main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:clamp(8rem,15vw,10rem) var(--pad-x) 4rem;
}
.auth-card{
  width:100%; max-width:460px;
  background:var(--cream-deep);
  border:1px solid var(--hairline);
  padding:clamp(2rem,5vw,3rem);
  position:relative;
}
.auth-card::before{
  content:""; position:absolute; inset:8px;
  border:1px solid var(--hairline); pointer-events:none;
}
.auth-header{ margin-bottom:2rem; position:relative; }
.auth-header .eyebrow{ margin-bottom:1rem; }
.auth-header h1{ font-size:clamp(1.9rem,3vw,2.4rem); margin-bottom:.7rem; }
.auth-header p{ font-size:.95rem; color:var(--ink-soft); line-height:1.7; }
.auth-password-wrap{ position:relative; }
.auth-toggle-pw{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; color:var(--ink-soft); padding:0; line-height:1;
}
.auth-toggle-pw:hover{ color:var(--ink); }
.auth-alert{
  padding:.85em 1.1em; margin-bottom:1.4rem;
  font-size:.9rem; line-height:1.55; border:1px solid transparent; display:none;
}
.auth-alert.visible{ display:block; }
.auth-alert-error{ background:rgba(91,18,32,.06); color:var(--bordeaux); border-color:rgba(91,18,32,.20); }
.auth-alert-success{ background:rgba(26,29,35,.05); color:var(--ink); border-color:var(--hairline); }
.auth-alert-title{
  display:block;
  font-size:1.2rem; font-weight:600;
  line-height:1.25; margin-bottom:1.3rem;
}
.auth-submit{ width:100%; margin-top:.4rem; }
.auth-footer-link{
  text-align:center; margin-top:1.6rem;
  font-size:.9rem; color:var(--ink-soft);
}
.auth-footer-link a{ color:var(--bordeaux); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ================================================================
   24 · RECHTLICHE SEITEN  (Impressum / Datenschutz / AGB)
   ================================================================ */
.privacy-wrap,.imprint-wrap{
  max-width:820px; margin-inline:auto;
  padding:clamp(9rem,16vw,12rem) var(--pad-x) clamp(5rem,10vw,8rem);
}
.privacy-back,.imprint-back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:2.5rem;
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s;
}
.privacy-back:hover,.imprint-back:hover{ color:var(--bordeaux); }
.privacy-wrap h1,.imprint-wrap h1{ font-size:clamp(2.2rem,4.4vw,3.2rem); margin-bottom:1.6rem; }
.privacy-updated{
  display:inline-block; margin-bottom:3rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); opacity:.75;
}
.privacy-wrap h2{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:500; margin:3rem 0 .8rem; }
.imprint-wrap h2{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bordeaux); margin:2.6rem 0 .6rem;
}
.privacy-wrap h3{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bordeaux); margin:2rem 0 .6rem;
}
.privacy-wrap p,.privacy-wrap li,.privacy-wrap address,
.imprint-wrap p,.imprint-wrap address{
  font-style:normal; line-height:1.8; color:var(--ink-soft); margin:0;
}
.privacy-wrap p + p{ margin-top:.8rem; }
.privacy-wrap ul{ list-style:disc; padding-left:1.4rem; margin:.6rem 0; }
.privacy-wrap a,.imprint-wrap a{ color:var(--bordeaux); text-decoration:underline; text-underline-offset:3px; }
.privacy-wrap a:hover,.imprint-wrap a:hover{ color:var(--ink); }

/* Honeypot (Spamschutz Kontaktformular) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }