/* ===========================================================
   studio hautnah – Neuaufbau „Editorial Luxus" (24.07.2026)
   Eigenständiges Design-System NUR für die Startseite (Preview).
   Kein Baukasten: Papyrus-Fond, große ruhige Serif, Haarlinien,
   eckige dezente Buttons, sparsame langsame Animationen.
   Referenz: kosmetik-isabelle.at (Ruhe, Weißraum, Serif) + CI #780040.
   =========================================================== */

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Literata';
  src: url('fonts/literata.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Töne ---------- */
:root {
  --papier:      #F6F1E8;   /* warmer Papyrus-Grund */
  --papier-tief: #EFE8DB;   /* eine Stufe tiefer */
  --tinte:       #2B2126;   /* warmes Schwarzbraun für Text */
  --tinte-sanft: #5C4F55;
  --berry:       #780040;   /* DIE Logo-Farbe – sparsam als Akzent */
  --berry-tief:  #4E0029;
  --salbei:      #6F8B7D;   /* gedämpftes Eukalyptusgrün */
  --creme:       #F9F5EE;
  --haar:        rgba(43, 33, 38, 0.16);   /* Haarlinien */
  --haar-hell:   rgba(249, 245, 238, 0.28);
  --serif: 'Literata', Georgia, serif;
  --ui:    'Nunito', 'Segoe UI', sans-serif;
  --hand:  'Caveat', cursive;
  --breite: 1200px;
  --gang: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  font-weight: 380;
  color: var(--tinte);
  background: var(--papier);
  font-size: clamp(16px, 1rem + 0.1vw, 18px);
  line-height: 1.75;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Papyrus-Struktur: feines Korn über der ganzen Seite */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: multiply;
}

/* ---------- Eröffnungs-Vorhang (beim ersten Aufruf, ~1 s) ---------- */
#vorhang {
  position: fixed; inset: 0; z-index: 100;
  background: var(--papier);
  display: grid; place-items: center;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#vorhang.weg { opacity: 0; visibility: hidden; }
.vorhang__innen { text-align: center; }
.vorhang__wort {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: 0.04em; color: var(--tinte);
  display: inline-flex;
}
.vorhang__wort span {
  opacity: 0; transform: translateY(0.5em);
  animation: vorhang-buchstabe 0.55s var(--gang) forwards;
}
@keyframes vorhang-buchstabe { to { opacity: 1; transform: none; } }
.vorhang__linie {
  display: block; width: 0; height: 1px;
  background: var(--berry); margin: 1.1rem auto 0;
  animation: vorhang-linie 0.8s 0.35s var(--gang) forwards;
}
@keyframes vorhang-linie { to { width: 150px; } }

.zeile { width: min(100% - 3rem, var(--breite)); margin-inline: auto; }
.abschnitt { padding: clamp(5rem, 4rem + 6vw, 10rem) 0; position: relative; }

/* ---------- Typografie ---------- */
.vorzeile {
  font-family: var(--ui);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--berry);
  display: block; margin-bottom: 1.4rem;
}
.vorzeile--salbei { color: var(--salbei); }
h1, h2, h3 { font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.8rem, 1.8rem + 3.2vw, 4.9rem); }
h2 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); margin-bottom: 1.2rem; }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }
h2 em, h1 em { font-style: italic; font-weight: 300; color: var(--berry); }
.still { color: var(--tinte-sanft); max-width: 58ch; }
.gross { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.25rem); }

/* ---------- Buttons: eckig, ruhig, mit Füll-Animation ---------- */
.knopf {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 1.15em 2.4em;
  border: 1px solid var(--tinte); color: var(--tinte);
  background: transparent; cursor: pointer;
  transition: color 0.45s var(--gang), border-color 0.45s var(--gang);
}
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tinte);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--gang);
}
.knopf:hover { color: var(--papier); }
.knopf:hover::after { transform: scaleX(1); }
.knopf--berry { border-color: var(--berry); color: var(--berry); }
.knopf--berry::after { background: var(--berry); }
.knopf--berry:hover { color: var(--creme); }
.knopf--hell { border-color: var(--creme); color: var(--creme); }
.knopf--hell::after { background: var(--creme); }
.knopf--hell:hover { color: var(--berry-tief); }

.textlink {
  font-family: var(--ui); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--berry);
  display: inline-flex; align-items: center; gap: 0.7em;
  padding-bottom: 0.4em; position: relative;
}
.textlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--berry); transform-origin: right; transition: transform 0.5s var(--gang);
}
.textlink:hover::after { transform: scaleX(0.25); }

/* ---------- Kopf ---------- */
.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--haar);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.4s ease;
}
.kopfleiste.getaucht { box-shadow: 0 14px 40px rgba(43, 33, 38, 0.07); }
.kopfleiste__zeile {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 82px; gap: 2rem;
}
.wortmarke { display: flex; flex-direction: column; line-height: 1.1; }
.wortmarke__name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.02em; }
.wortmarke__ort {
  font-family: var(--ui); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--salbei);
}
.hauptnav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.hauptnav a {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinte-sanft);
  padding: 0.4em 0; position: relative; transition: color 0.3s ease;
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--berry); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--gang);
}
.hauptnav a:hover, .hauptnav a.aktiv { color: var(--berry); }
.hauptnav a:hover::after, .hauptnav a.aktiv::after { transform: scaleX(1); }
.hauptnav .knopf { padding: 0.95em 1.8em; }
.hauptnav .knopf::after { z-index: 0; }
.hauptnav .knopf span { position: relative; z-index: 1; }

.menue-knopf {
  display: none; background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--tinte);
  padding: 0.6em 0;
}
@media (max-width: 880px) {
  .hauptnav {
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; justify-content: center; gap: 2.2rem;
    background: var(--papier);
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
  }
  .hauptnav a { font-size: 1rem; }
  body.menue-offen .hauptnav { opacity: 1; pointer-events: auto; }
  body.menue-offen { overflow: hidden; }
  .menue-knopf { display: block; position: relative; z-index: 60; }
}

/* ---------- Hero ---------- */
.buehne {
  min-height: min(calc(100vh - 82px), 820px);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(3rem, 5vh, 5rem) 0 clamp(4rem, 7vh, 6rem);
  position: relative;
}
.buehne__text { position: relative; z-index: 2; }
.buehne__text .knoepfe { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.8rem; align-items: center; }
.buehne__hinweis {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--haar);
  font-size: 0.95rem; color: var(--tinte-sanft); max-width: 46ch; font-style: italic;
}
.buehne__hinweis b { color: var(--berry); font-weight: 600; font-style: normal; }

/* großes Bogenbild mit doppelter Rahmenlinie */
.bogenbild {
  position: relative; justify-self: end;
  width: min(460px, 88vw); aspect-ratio: 4 / 5.4;
}
.bogenbild__rahmen {
  position: absolute; inset: 0;
  border-radius: 999px 999px 0 0; overflow: hidden;
  box-shadow: 0 40px 90px rgba(43, 33, 38, 0.16);
}
.bogenbild__rahmen img, .bogenbild__rahmen video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.bogenbild::before {
  content: ""; position: absolute; inset: -16px -16px 0;
  border: 1px solid var(--berry); border-bottom: none;
  border-radius: 999px 999px 0 0; opacity: 0.5; pointer-events: none;
}
.bogenbild::after {
  content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 1px;
  background: var(--berry); opacity: 0.5;
}

/* riesiger, blasser Bogen + Zweig-Linienzeichnung im Hintergrund */
.deko-bogen {
  position: absolute; z-index: 0; pointer-events: none;
  border: 1px solid var(--haar); border-radius: 999px 999px 0 0;
  width: min(640px, 60vw); aspect-ratio: 3 / 4; bottom: 0; left: -8%;
  opacity: 0.7;
}
.zweig { position: absolute; pointer-events: none; color: var(--salbei); opacity: 0.5; }
.zweig svg { width: 100%; height: auto; display: block; }
.zweig--hero { width: clamp(150px, 16vw, 230px); top: 6%; right: -2%; transform: rotate(24deg); }

.scrollwink {
  position: absolute; bottom: 2.2rem; left: 0;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--ui); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--tinte-sanft);
}
.scrollwink::after { content: ""; width: 72px; height: 1px; background: var(--tinte-sanft); animation: wink 2.6s var(--gang) infinite; transform-origin: left; }
@keyframes wink { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ---------- Zwischenzeile (großes Statement) ---------- */
.statement { text-align: center; }
.statement p {
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.7rem);
  font-weight: 300; line-height: 1.4; font-style: italic;
  max-width: 26em; margin-inline: auto; color: var(--tinte);
}
.statement p b { color: var(--berry); font-weight: 400; font-style: normal; }

/* Zierlinie mit Blatt-Ornament */
.ornament { display: flex; align-items: center; gap: 1.2rem; justify-content: center; margin: 0 auto; max-width: 420px; }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--haar); }
.ornament svg { width: 22px; height: 22px; color: var(--salbei); flex: none; }

/* ---------- Leistungen: Galerie zum Durchblättern ---------- */
.galerie-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.galerie-pfeile { display: flex; gap: 0.8rem; align-items: center; }
.pfeil {
  width: 58px; height: 58px; border: 1px solid var(--tinte); border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-items: center;
  color: var(--tinte); transition: background 0.35s ease, color 0.35s ease, opacity 0.3s;
}
.pfeil:hover { background: var(--tinte); color: var(--papier); }
.pfeil:disabled { opacity: 0.3; cursor: default; }
.pfeil:disabled:hover { background: transparent; color: var(--tinte); }
.pfeil svg { width: 22px; height: 22px; }
.galerie-stand { font-family: var(--ui); font-size: 0.74rem; letter-spacing: 0.3em; color: var(--tinte-sanft); margin-left: 0.8rem; }

.galerie {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 0.5rem;
  margin-right: calc(50% - 50vw);  /* rechts aus dem Raster laufen lassen */
  padding-right: max(1.5rem, calc(50vw - var(--breite) / 2));
}
.galerie::-webkit-scrollbar { display: none; }
.blatt-karte {
  flex: 0 0 min(88vw, 780px);
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
  border-top: 1px solid var(--haar);
  padding-top: 2.4rem;
}
.blatt-karte__nr {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.6rem);
  color: var(--berry); line-height: 1; opacity: 0.85;
}
.blatt-karte h3 { margin: 0.6rem 0 1rem; }
.blatt-karte p { color: var(--tinte-sanft); font-size: 1rem; max-width: 44ch; }
.blatt-karte .textlink { margin-top: 1.6rem; }
.blatt-karte__bild {
  aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden;
  position: relative;
  background: linear-gradient(165deg, var(--papier-tief), #E5DCC9 55%, var(--papier-tief));
  border: 1px solid var(--haar);
  display: grid; place-items: center;
}
.blatt-karte__bild .zweig { position: static; width: 44%; opacity: 0.55; }
.blatt-karte__bild figcaption {
  position: absolute; bottom: 1.1rem;
  font-family: var(--ui); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--tinte-sanft);
}

/* ---------- Über Susanne ---------- */
.ueber { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
.ueber .bogenbild { justify-self: start; width: min(400px, 84vw); }
.unterschrift {
  font-family: var(--hand); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem);
  color: var(--berry); display: inline-block;
  margin-top: 1.8rem;
}
.platzhalter-innen { text-align: center; color: var(--tinte-sanft); padding: 2rem; }
.platzhalter-innen .zweig { position: static; width: 80px; margin: 0 auto 1rem; }
.platzhalter-innen span { font-family: var(--ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; display: block; }

/* ---------- Produkte & Gutscheine: Editorial-Liste ---------- */
.abschnitt--tief { background: var(--papier-tief); }
.produkt-spalten { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.produkt-liste { border-top: 1px solid var(--haar); }
.produkt-punkt {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: baseline;
  padding: 1.8rem 0; border-bottom: 1px solid var(--haar);
  transition: padding-left 0.4s var(--gang);
}
.produkt-punkt:hover { padding-left: 0.8rem; }
.produkt-punkt__nr { font-family: var(--serif); font-weight: 200; font-size: 1.15rem; color: var(--berry); }
.produkt-punkt h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.produkt-punkt p { color: var(--tinte-sanft); font-size: 0.96rem; max-width: 52ch; }
.produkt-punkt__pfeil { color: var(--berry); font-size: 1.3rem; font-weight: 300; }
.produkt-spalten .knoepfe { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2.4rem; }

/* ---------- Werte: stille Reihe mit Haarlinien ---------- */
.werte-reihe { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--haar); }
.wert-feld { border-right: 1px solid var(--haar); padding: 0.4rem 2rem; }
.wert-feld__nr {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.32em; color: var(--salbei); display: block; margin-bottom: 1rem;
}
.wert-feld h3 { font-size: 1.2rem; font-style: italic; margin-bottom: 0.5rem; }
.wert-feld p { font-size: 0.92rem; color: var(--tinte-sanft); }

/* ---------- Einladung (Berry-Fläche) ---------- */
.einladung { background: linear-gradient(170deg, var(--berry) 0%, var(--berry-tief) 100%); color: var(--creme); position: relative; overflow: hidden; }
.einladung .vorzeile { color: color-mix(in srgb, var(--creme) 70%, var(--berry)); }
.einladung h2 { color: var(--creme); }
.einladung h2 em, .einladung h1 em { color: #EFC3D9; }
.einladung .still { color: color-mix(in srgb, var(--creme) 82%, var(--berry)); margin-inline: auto; }
.einladung__innen { text-align: center; max-width: 760px; margin-inline: auto; position: relative; z-index: 1; }
.einladung .knoepfe { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 2.8rem; }
.einladung__hinweis { margin-top: 2.4rem; font-style: italic; font-size: 0.95rem; color: color-mix(in srgb, var(--creme) 75%, var(--berry)); }
.einladung .deko-bogen { border-color: var(--haar-hell); left: auto; right: -10%; bottom: -30%; opacity: 1; }
.einladung .zweig { color: var(--creme); opacity: 0.14; width: clamp(200px, 24vw, 340px); top: -6%; left: -4%; transform: rotate(-150deg); }

/* ---------- Fußzeile ---------- */
.fussbereich { background: #241A1F; color: rgba(249, 245, 238, 0.75); padding: 4.5rem 0 2.5rem; }
.fussbereich a { transition: color 0.3s; }
.fussbereich a:hover { color: var(--creme); }
.fuss-spalten { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.fuss-spalten h4 {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--creme); margin-bottom: 1.2rem;
}
.fuss-spalten ul { display: grid; gap: 0.55rem; font-size: 0.95rem; }
.fuss-marke { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; color: var(--creme); margin-bottom: 1rem; }
.fuss-spalten p { font-size: 0.95rem; }
.fuss-unten {
  border-top: 1px solid rgba(249, 245, 238, 0.14); padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.06em;
  color: rgba(249, 245, 238, 0.5);
}

/* ---------- Mail-Liste (Platzhalter – Anbindung an Mail-Dienst folgt) ---------- */
.mailliste { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--haar); max-width: 46ch; }
.mailliste__intro { font-size: 0.95rem; color: var(--tinte-sanft); }
.mailliste__reihe { display: flex; align-items: center; border-bottom: 1px solid var(--tinte); margin-top: 1rem; transition: border-color 0.3s; }
.mailliste__reihe:focus-within { border-color: var(--berry); }
.mailliste input[type="email"] {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--ui); font-size: 0.92rem; color: var(--tinte); padding: 0.9em 0;
}
.mailliste input[type="email"]::placeholder { color: var(--tinte-sanft); opacity: 0.7; }
.mailliste__senden {
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--berry); padding: 0.6em 0 0.6em 1em; white-space: nowrap;
}
.mailliste__zustimmung {
  display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem;
  font-family: var(--ui); font-size: 0.76rem; line-height: 1.6;
  color: var(--tinte-sanft); cursor: pointer; text-align: left;
}
.mailliste__zustimmung input { margin-top: 0.25em; accent-color: var(--berry); }
.mailliste__zustimmung a { text-decoration: underline; }
.mailliste__danke { display: none; font-size: 0.95rem; font-style: italic; color: var(--berry); margin-top: 1rem; }
.mailliste.gesendet form { display: none; }
.mailliste.gesendet .mailliste__danke { display: block; }
/* helle Variante auf der Berry-Fläche */
.mailliste--hell { border-top-color: var(--haar-hell); margin-inline: auto; }
.mailliste--hell .mailliste__intro { color: color-mix(in srgb, var(--creme) 80%, var(--berry)); }
.mailliste--hell .mailliste__reihe { border-bottom-color: var(--creme); }
.mailliste--hell .mailliste__reihe:focus-within { border-color: #EFC3D9; }
.mailliste--hell input[type="email"] { color: var(--creme); }
.mailliste--hell input[type="email"]::placeholder { color: color-mix(in srgb, var(--creme) 65%, var(--berry)); opacity: 1; }
.mailliste--hell .mailliste__senden { color: var(--creme); }
.mailliste--hell .mailliste__zustimmung { color: color-mix(in srgb, var(--creme) 75%, var(--berry)); }
.mailliste--hell .mailliste__zustimmung input { accent-color: var(--creme); }
.mailliste--hell .mailliste__danke { color: var(--creme); }

/* ---------- WhatsApp, ruhig ---------- */
.wa-still {
  position: fixed; right: clamp(1.2rem, 2.4vw, 2.4rem); bottom: clamp(1.2rem, 2.4vw, 2.4rem);
  z-index: 45; width: 58px; height: 58px; border-radius: 999px;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.35);
  transition: transform 0.35s var(--gang);
}
.wa-still:hover { transform: translateY(-4px); }
.wa-still svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Erscheinen beim Scrollen ---------- */
.zeigen { opacity: 0; transform: translateY(34px); transition: opacity 1s ease, transform 1s var(--gang); }
.zeigen.da { opacity: 1; transform: none; }
.zeigen[data-spaeter="1"] { transition-delay: 0.12s; }
.zeigen[data-spaeter="2"] { transition-delay: 0.24s; }
.zeigen[data-spaeter="3"] { transition-delay: 0.36s; }

/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
  .buehne { grid-template-columns: 1fr; gap: 3rem; padding-top: 2rem; min-height: 0; }
  .bogenbild { justify-self: center; }
  .buehne__text { text-align: center; }
  .buehne__text .knoepfe { justify-content: center; }
  .buehne__hinweis { margin-inline: auto; }
  .scrollwink { display: none; }
  .ueber { grid-template-columns: 1fr; }
  .ueber .bogenbild { justify-self: center; }
  .produkt-spalten { grid-template-columns: 1fr; }
  .werte-reihe { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--haar); }
  .wert-feld { padding: 1.6rem 1.4rem; border-bottom: 1px solid var(--haar); }
  .blatt-karte { grid-template-columns: 1fr; }
  .blatt-karte__bild { order: -1; max-width: 380px; }
  .galerie-kopf { flex-direction: column; align-items: flex-start; }
  .fuss-spalten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zeigen { opacity: 1; transform: none; }
}