/* =========================================================================
   ESESSA — Landingpage Stylesheet
   -------------------------------------------------------------------------
   Aufbau der Datei (in dieser Reihenfolge):
     1. Design-Token (Farben, Schriftgrößen, Abstände)  <- hier Farben ändern
     2. Grundlagen (Reset, Typografie, Fokus, Motion)
     3. Bausteine (Buttons, Formulare, Siegel, Label)
     4. Abschnitte in Reihenfolge der Seite
     5. Overlay
     6. Druck
   Alles ist mobil zuerst gebaut. Media-Queries erweitern nach oben.
   ========================================================================= */

/* =========================================================================
   1. DESIGN-TOKEN
   ========================================================================= */

:root {
  /* --- Farben ----------------------------------------------------------
     porzellan  = Grundfläche, warmer Neutralton mit Rosé-Stich
     sand       = zweite Fläche für Abschnittswechsel
     tinte      = Textfarbe, warmes Schwarzbraun (nie reines Schwarz)
     loden      = dunkle Fläche, tiefes Olivgrün
     champagner = Akzent, nur für Linien und große Schrift
     champagner-tief = Akzent für kleine Schrift (kontraststark genug)
  */
  --porzellan:        #F6F0EB;
  --porzellan-hell:   #FBF8F5;
  --sand:             #E7DACE;
  --sand-hell:        #EFE6DC;
  --tinte:            #211A15;
  --tinte-weich:      #5C5048;
  --loden:            #2E342A;
  --loden-hell:       #3D4437;
  --champagner:       #B08D57;
  --champagner-tief:  #7E6032;
  --champagner-licht: #D9BE93;
  --creme:            #E8E0D6;

  /* --- Schrift --------------------------------------------------------- */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --grotesk: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-mikro: 0.6875rem;
  --t-xs:    0.78rem;
  --t-sm:    0.875rem;
  --t-base:  1rem;
  --t-md:    clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  --t-lg:    clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
  --t-xl:    clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  /* Die Größe der Hauptüberschrift. Beide Grenzwerte sind bewusst gedeckelt:
     Wird die Schrift größer, rutscht das E-Mail-Feld unter die Bildschirmkante -
     auf dem Handy der kleine Wert, auf dem Rechner der große. Bitte nicht
     erhöhen, ohne danach beide Ansichten zu prüfen. */
  --t-2xl:   clamp(2.35rem, 1.1rem + 4.4vw, 4.9rem);
  --t-cup:   clamp(2.2rem, 0.6rem + 8.4vw, 6.5rem);

  /* --- Abstände --------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --abschnitt: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- Maße ------------------------------------------------------------- */
  --breite:  76rem;   /* maximale Inhaltsbreite */
  --lesetext: 34rem;  /* ca. 65 Zeichen pro Zeile */
  --rand: clamp(1.25rem, 5vw, 4rem);
  --hairline: 1px solid rgb(33 26 21 / 0.14);
  --hairline-hell: 1px solid rgb(232 224 214 / 0.22);

  color-scheme: light;
}

/* Diese Seite hat bewusst nur eine Farbwelt (helles Porzellan mit dunklen
   Loden-Bändern). Damit ein Betrachter mit Dunkelmodus-Einstellung nicht
   eine halb umgefärbte Seite sieht, sind beide Modi fest verankert. */
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: light;
}

/* =========================================================================
   2. GRUNDLAGEN
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--porzellan);
  /* Feine Papierkörnung. Ein winziges SVG als Datei-URI, kein Bild-Download. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Sichtbarer Tastatur-Fokus auf allen Flächen. */
:focus-visible {
  outline: 2px solid var(--champagner-tief);
  outline-offset: 3px;
  border-radius: 1px;
}
.auf-dunkel :focus-visible { outline-color: var(--champagner-licht); }

/* Sprunglink für Screenreader und Tastatur. */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinte);
  color: var(--porzellan);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
}
.sprunglink:focus { left: 0; }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar. */
.js .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .einblenden.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .einblenden { opacity: 1; transform: none; }
}

/* =========================================================================
   3. BAUSTEINE
   ========================================================================= */

/* --- Kleines Großbuchstaben-Label ---------------------------------------- */
.label {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagner-tief);
  margin: 0;
}
.auf-dunkel .label { color: var(--champagner-licht); }

/* --- Buttons -------------------------------------------------------------
   Bewusst tintenschwarz, nicht champagnerfarben: der höchste Kontrast
   wird am zuverlässigsten als Schaltfläche erkannt und geklickt.        */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: 0 var(--s-6);
  border: 1px solid var(--tinte);
  background: var(--tinte);
  color: var(--porzellan-hell);
  font-family: var(--grotesk);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.knopf:hover { background: var(--loden); border-color: var(--loden); }

.knopf--offen {
  background: transparent;
  color: var(--tinte);
  border-color: rgb(33 26 21 / 0.35);
}
.knopf--offen:hover { background: var(--tinte); color: var(--porzellan-hell); border-color: var(--tinte); }

.auf-dunkel .knopf {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--loden);
}
.auf-dunkel .knopf:hover { background: var(--champagner-licht); border-color: var(--champagner-licht); }

.auf-dunkel .knopf--offen {
  background: transparent;
  color: var(--creme);
  border-color: rgb(232 224 214 / 0.4);
}
.auf-dunkel .knopf--offen:hover { background: var(--creme); color: var(--loden); }

/* Textlink mit Champagner-Unterstrich, der beim Überfahren durchläuft. */
.textlink {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--champagner), var(--champagner));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.4s ease;
}
.textlink:hover { background-size: 100% 2px; }

/* --- Newsletter-Formular -------------------------------------------------- */
.formular { display: grid; gap: var(--s-3); }

.feldzeile { display: grid; gap: var(--s-3); }

.formular input[type="email"] {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--s-4);
  border: 1px solid rgb(33 26 21 / 0.28);
  border-radius: 0;
  background: rgb(255 255 255 / 0.72);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 1rem; /* 16px verhindert das Zoomen auf iPhones */
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.formular input[type="email"]::placeholder { color: rgb(92 80 72 / 0.75); }
.formular input[type="email"]:focus { border-color: var(--champagner-tief); background: #fff; }

.auf-dunkel .formular input[type="email"] {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(232 224 214 / 0.35);
  color: var(--porzellan-hell);
}
.auf-dunkel .formular input[type="email"]::placeholder { color: rgb(232 224 214 / 0.6); }
.auf-dunkel .formular input[type="email"]:focus {
  border-color: var(--champagner-licht);
  background: rgb(255 255 255 / 0.12);
}

/* Einwilligung. Die Checkbox ist bewusst NICHT vorangekreuzt (DSGVO). */
.einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--tinte-weich);
}
.auf-dunkel .einwilligung { color: rgb(232 224 214 / 0.8); }

.einwilligung input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--champagner-tief);
  flex: none;
}
.auf-dunkel .einwilligung input[type="checkbox"] { accent-color: var(--champagner-licht); }

.einwilligung a { color: inherit; text-underline-offset: 2px; }

.formhinweis {
  font-size: var(--t-xs);
  color: var(--tinte-weich);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.auf-dunkel .formhinweis { color: rgb(232 224 214 / 0.72); }

/* Fehler- und Erfolgsmeldung des Formulars */
.formmeldung {
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--champagner);
  background: rgb(176 141 87 / 0.1);
}
.formmeldung[hidden] { display: none; }

/* --- Das Siegel (Rabatt-Störer) -------------------------------------------
   Ein geprägtes Rundsiegel statt eines Rabattbanners. Statisch und leicht
   schräg gesetzt: wirkt wie gestempelt, nicht wie ein Werbeaufkleber.   */
.siegel {
  width: clamp(5.25rem, 19vw, 8.5rem);
  height: clamp(5.25rem, 19vw, 8.5rem);
  flex: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 14px rgb(33 26 21 / 0.12));
}
.siegel__ring { fill: none; stroke: var(--champagner); stroke-width: 1; }
.siegel__text {
  font-family: var(--grotesk);
  font-size: 7.4px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  fill: var(--champagner-tief);
}
.siegel__zahl {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  fill: var(--tinte);
  text-anchor: middle;
}
.siegel__unter {
  font-family: var(--grotesk);
  font-size: 6.6px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--tinte-weich);
  text-anchor: middle;
}

/* =========================================================================
   4. ABSCHNITTE
   ========================================================================= */

/* --- 4.1 Ankündigungsleiste ---------------------------------------------- */
.ankuendigung {
  background: var(--loden);
  color: var(--creme);
  font-size: var(--t-mikro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ankuendigung__inhalt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  min-height: 2.4rem;
  text-align: center;
}
.ankuendigung__punkt { color: var(--champagner-licht); }
/* Auf schmalen Handys nur die wichtigste Aussage zeigen. */
@media (max-width: 32rem) {
  .ankuendigung__zweit, .ankuendigung__punkt { display: none; }
}

/* --- 4.2 Kopfzeile -------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(246 240 235 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline);
}
.kopf__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.6rem;
}
.kopf__logo { display: block; }
.kopf__logo img { width: clamp(6.5rem, 22vw, 8.5rem); height: auto; }
.kopf__aktion { display: flex; align-items: center; gap: var(--s-5); }
.kopf__telefon {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--tinte-weich);
}
@media (max-width: 46rem) { .kopf__telefon { display: none; } }

/* --- 4.3 Hero -------------------------------------------------------------
   Mobil: Text zuerst, Bild darunter. Das ist bewusst so — dadurch steht
   das E-Mail-Feld garantiert im ersten Bildschirm, ohne Scrollen.
   Ab 60rem: zweispaltig, Bild rechts, Schriftzug überlappt die Bildkante. */
.hero { padding-block: var(--s-5) 0; position: relative; }
.hero__raster { display: grid; gap: var(--s-6); align-items: center; }

.hero__kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.hero__eyebrow { max-width: 18ch; }

.hero__titel {
  font-size: var(--t-2xl);
  margin-block: var(--s-3) 0;
}
/* Der zweite Teil der Überschrift trägt das Versprechen und damit den Akzent. */
.hero__titel em {
  font-style: normal;
  color: var(--champagner-tief);
  position: relative;
}
.hero__unter {
  font-size: var(--t-md);
  color: var(--tinte-weich);
  max-width: 30rem;
  margin-top: var(--s-4);
}
.hero__formular { margin-top: var(--s-5); max-width: 30rem; }
.hero__nebenlink { margin-top: var(--s-5); }
.hero__bildfeld { position: relative; }
.hero__bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--sand-hell);
}
.hero__bildzeile {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--tinte-weich);
  border-top: var(--hairline);
  margin-top: var(--s-3);
}
.hero__bildzeile a {
  color: var(--champagner-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero__bildzeile a:hover { color: var(--tinte); }

@media (min-width: 60rem) {
  .hero { padding-block: var(--s-6) 0; }
  .hero__raster {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero__bild { aspect-ratio: 3 / 4; }
  /* Die Überschrift läuft leicht über die Bildkante hinaus — die eine
     Stelle, an der das strenge Raster gebrochen wird. */
  .hero__text { position: relative; z-index: 2; }
  .hero__titel { margin-right: -14%; }
}

/* --- 4.4 USP-Leiste ------------------------------------------------------- */
.usp {
  margin-top: var(--abschnitt);
  border-block: var(--hairline);
  background: var(--sand-hell);
}
.usp__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.usp__punkt {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-4);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.usp__punkt:nth-child(2n) { border-right: 0; }
.usp__punkt:nth-last-child(-n + 2) { border-bottom: 0; }
.usp__titel {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.1;
}
.usp__text { font-size: var(--t-xs); color: var(--tinte-weich); line-height: 1.45; }

@media (min-width: 52rem) {
  .usp__liste { grid-template-columns: repeat(4, 1fr); }
  .usp__punkt { padding: var(--s-6) var(--s-5); border-bottom: 0; }
  .usp__punkt:nth-child(2n) { border-right: var(--hairline); }
  .usp__punkt:last-child { border-right: 0; }
}

/* --- 4.5 Marken-Laufband --------------------------------------------------
   Endlos laufende Markennamen. Reine CSS-Animation, hält beim Überfahren
   an und steht still, wenn der Besucher reduzierte Bewegung eingestellt hat. */
.marken { padding-block: var(--s-6); overflow: hidden; }
.marken__kopf { text-align: center; margin-bottom: var(--s-5); }
.marken__band {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 6vw, 4.5rem);
  animation: laufband 46s linear infinite;
}
.marken:hover .marken__band { animation-play-state: paused; }

/* Die Logos werden auf eine einheitliche Hoehe gebracht und entfaerbt,
   damit acht fremde Markenzeichen wie eine Reihe wirken. */
.marken__band img,
.marken__band a {
  flex: none;
  display: block;
}
.marken__band img {
  width: auto;
  height: clamp(1.5rem, 4.5vw, 2.15rem);
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.marken__band a:hover img,
.marken__band a:focus-visible img { opacity: 1; filter: none; }
@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Laufband: Die Logos stehen still nebeneinander. Die Kopien,
     die nur den nahtlosen Durchlauf ermoeglichen, werden ausgeblendet. */
  .marken__band {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3rem);
  }
  .marken__band > [aria-hidden="true"] { display: none; }
}

/* --- 4.6 Passform-Abschnitt (dunkles Band) -------------------------------- */
.auf-dunkel { background: var(--loden); color: var(--creme); }

.passform { padding-block: var(--abschnitt); }
.passform__kopf { display: grid; gap: var(--s-5); max-width: 44rem; }
.passform__titel { font-size: var(--t-xl); color: var(--porzellan-hell); }
.passform__text { color: rgb(232 224 214 / 0.86); max-width: var(--lesetext); }

/* Die Cup-Reihe: große Buchstaben, die echte Links in die Shop-Kategorien
   sind. Die Reihenfolge A bis J trägt hier tatsächlich Information. */
.cups { margin-top: var(--s-7); }
.cups__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2.6vw, 1.6rem);
  align-items: baseline;
}
.cups__link {
  font-family: var(--display);
  font-size: var(--t-cup);
  font-weight: 300;
  line-height: 0.9;
  color: var(--creme);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
.cups__link:hover { color: var(--champagner-licht); transform: translateY(-4px); }
.cups__fuss {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--hairline-hell);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
}
.cups__hinweis { font-size: var(--t-sm); color: rgb(232 224 214 / 0.75); max-width: 44ch; }
.cups__hinweis a { color: var(--champagner-licht); text-underline-offset: 3px; }
.cups__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.passform__bauarten {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.chip {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgb(232 224 214 / 0.3);
  border-radius: 999px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--creme);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.chip:hover { background: var(--creme); color: var(--loden); border-color: var(--creme); }

/* --- 4.7 Kategorien -------------------------------------------------------- */
.kategorien { padding-block: var(--abschnitt); }
.abschnitt__kopf {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  max-width: 40rem;
}
.abschnitt__titel { font-size: var(--t-xl); }
.abschnitt__text { color: var(--tinte-weich); max-width: var(--lesetext); }

.kachel__liste { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .kachel__liste { grid-template-columns: repeat(3, 1fr); } }

/* Die Kacheln werden genauso zusammengeführt wie die Produktbilder:
   Mischmodus multiply auf Porzellan, damit die unterschiedlichen Studioweiße
   der drei Marken auf denselben Ton fallen. "isolation" hält den Mischmodus
   im Kasten, damit das Beschriftungsband darüber unverändert bleibt. */
.kachel {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: var(--porzellan-hell);
  isolation: isolate;
}
.kachel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Gleicher Anschnitt-Gedanke wie in der Produktreihe: Gesicht und
     Kleidungsstück im Bild, Beine raus. */
  object-position: 50% 12%;
  mix-blend-mode: multiply;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.kachel:hover img { transform: scale(1.05); }
.kachel__band {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: linear-gradient(to top, rgb(33 26 21 / 0.78), rgb(33 26 21 / 0));
  color: var(--porzellan-hell);
}
.kachel__name {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
}
.kachel__pfeil { font-size: var(--t-sm); letter-spacing: 0.1em; }

/* --- 4.8 Produkte ---------------------------------------------------------- */
.produkte { padding-block: 0 var(--abschnitt); }
.produkt__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
@media (min-width: 52rem) { .produkt__liste { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); } }

.produkt { display: grid; gap: var(--s-3); }

/* Die Produktbilder kommen aus vier verschiedenen Fotostudios, jedes mit einem
   anderen Weiß im Hintergrund (gemessen: 214 bis 255). Damit die Reihe nicht
   auseinanderfällt, liegen alle Bilder im Mischmodus "multiply" auf einer
   Porzellan-Fläche: Jedes Studioweiß wird dadurch auf denselben warmen Ton
   heruntergerechnet. Die Haut verändert sich dabei kaum, weil Porzellan fast
   weiß ist. "isolation" hält den Mischmodus innerhalb der Kachel. */
.produkt__bildfeld {
  overflow: hidden;
  background: var(--porzellan-hell);
  border: var(--hairline);
  isolation: isolate;
}
.produkt__bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* 15 % von oben: zeigt Gesicht und Kleidungsstück, schneidet die Beine ab.
     Weil alle sechs Vorlagen ein ähnliches Seitenverhältnis haben, sitzt der
     Anschnitt überall gleich. */
  object-position: 50% 15%;
  mix-blend-mode: multiply;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.produkt:hover .produkt__bild { transform: scale(1.045); }
.produkt__marke {
  font-size: var(--t-mikro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagner-tief);
}
.produkt__name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}
.produkt__name a { text-decoration: none; }
.produkt__name a::after { content: ""; position: absolute; inset: 0; }
.produkt { position: relative; }
.produkt__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--tinte-weich);
}
.produkt__preis { font-variant-numeric: tabular-nums; color: var(--tinte); }
.produkte__fuss { margin-top: var(--s-7); display: flex; justify-content: center; }

/* --- 4.9 Bewertungen -------------------------------------------------------- */
.stimmen { padding-block: var(--abschnitt); background: var(--sand-hell); border-block: var(--hairline); }
.stimmen__liste { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) { .stimmen__liste { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

.stimme { display: grid; gap: var(--s-4); align-content: start; }
.stimme__sterne { color: var(--champagner); letter-spacing: 0.24em; font-size: var(--t-sm); }
.stimme__text {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.28;
}
.stimme__quelle { font-size: var(--t-xs); color: var(--tinte-weich); }

/* --- 4.10 Zweite Anmeldung (dunkles Band) ----------------------------------- */
.anmeldung { padding-block: var(--abschnitt); }
.anmeldung__raster { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) {
  .anmeldung__raster { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); }
}
.anmeldung__titel { font-size: var(--t-xl); color: var(--porzellan-hell); }
.anmeldung__text { color: rgb(232 224 214 / 0.86); max-width: var(--lesetext); margin-top: var(--s-4); }
.anmeldung__formular { max-width: 30rem; }
@media (min-width: 60rem) { .anmeldung__formular { max-width: none; } }
@media (min-width: 46rem) {
  .anmeldung .feldzeile { grid-template-columns: 1fr auto; }
}

/* --- 4.11 Fließtext (SEO) ---------------------------------------------------- */
.magazin { padding-block: var(--abschnitt); }
.magazin__raster { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .magazin__raster { grid-template-columns: 0.34fr 0.66fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .magazin__seite { position: sticky; top: 5.5rem; }
}
.magazin__titel { font-size: var(--t-lg); }
.magazin__fliesstext { display: grid; gap: var(--s-4); max-width: var(--lesetext); }
.magazin__fliesstext p { color: var(--tinte-weich); }
.magazin__fliesstext h3 {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--tinte);
  margin-top: var(--s-4);
}
.magazin__fliesstext a { color: var(--champagner-tief); text-underline-offset: 3px; }
.magazin__bild { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* --- 4.12 Fragen ------------------------------------------------------------- */
.fragen { padding-block: 0 var(--abschnitt); }
.frage {
  border-top: var(--hairline);
  padding-block: var(--s-4);
}
.frage:last-of-type { border-bottom: var(--hairline); }
.frage__titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 400;
}
.frage__titel::-webkit-details-marker { display: none; }
.frage__zeichen { font-family: var(--grotesk); font-size: var(--t-md); color: var(--champagner-tief); flex: none; }
.frage[open] .frage__zeichen { transform: rotate(45deg); }
.frage__antwort { margin-top: var(--s-3); color: var(--tinte-weich); max-width: var(--lesetext); font-size: var(--t-sm); }
.frage__antwort a { color: var(--champagner-tief); }

/* --- 4.13 Fußzeile ------------------------------------------------------------ */
.fuss { background: var(--tinte); color: rgb(246 240 235 / 0.82); padding-block: var(--s-8) var(--s-6); }
.fuss__raster { display: grid; gap: var(--s-7); }
@media (min-width: 52rem) { .fuss__raster { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
@media (min-width: 68rem) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-6); } }
.fuss__logo { width: 8rem; filter: brightness(0) invert(1); opacity: 0.9; }
.fuss__text { font-size: var(--t-sm); max-width: 26rem; margin-top: var(--s-4); }
.fuss__titel {
  font-size: var(--t-mikro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagner-licht);
  margin-bottom: var(--s-4);
}
.fuss__liste { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss__zahlung { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.zahlmittel {
  border: 1px solid rgb(246 240 235 / 0.28);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
}
.fuss__ende {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(246 240 235 / 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgb(246 240 235 / 0.6);
}

/* =========================================================================
   5. OVERLAY (Exit-Intent / Scroll)
   ========================================================================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--rand);
  background: rgb(33 26 21 / 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.overlay.offen { opacity: 1; visibility: visible; }
.overlay__karte {
  position: relative;
  width: min(30rem, 100%);
  max-height: 90svh;
  overflow-y: auto;
  background: var(--porzellan-hell);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border-top: 3px solid var(--champagner);
  transform: translateY(14px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.overlay.offen .overlay__karte { transform: none; }
.overlay__titel { font-size: var(--t-lg); margin-top: var(--s-4); }
.overlay__text { color: var(--tinte-weich); font-size: var(--t-sm); margin-top: var(--s-3); }
.overlay__formular { margin-top: var(--s-5); }
.overlay__zu {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--tinte-weich);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.overlay__zu:hover { color: var(--tinte); }
.overlay__nein {
  display: block;
  width: 100%;
  margin-top: var(--s-4);
  border: 0;
  background: none;
  color: var(--tinte-weich);
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* =========================================================================
   6. DRUCK
   ========================================================================= */
@media print {
  .kopf, .overlay, .ankuendigung, .marken { display: none; }
  body { background: #fff; color: #000; }
}