/* Creative Cosmetic — Kosmetikstudio Martina Bachmeier, Fischbachau
   Farben und Schriften folgen dem Original, Rhythmus und Kontrast sind neu. */

/* ---------- Schriften: dieselben wie auf creative-cosmetic.com ---------- */
@font-face {
  font-family: 'Julius Sans One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/julius-sans-one-normal-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Julius Sans One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/julius-sans-one-normal-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Palanquin'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/palanquin-normal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Palanquin'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/palanquin-normal-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jura'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/jura-normal-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jura'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/jura-normal-latin-ext-300.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jura'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jura-normal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jura'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jura-normal-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/merriweather-normal-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/merriweather-normal-latin-ext-300.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/montserrat-normal-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/montserrat-normal-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lato-normal-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lato-normal-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Grundwerte ---------- */
:root {
  --gold: #b7884b;          /* dunkler als das Original-Gold: erfuellt AA auf Weiss */
  --gold-hell: #d1a26a;     /* Originalton, nur auf dunklem Grund */
  --tinte: #000;            /* wie im Original: reines Schwarz */
  --tinte-weich: #55504a;
  --creme: #faf7f3;
  --sand: #eddcc6;
  --dunkel: #211f1d;
  --weiss: #fff;
  --linie: #e2d8ca;

  --kopf-h: 72px;
  --bahn: 1180px;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --luft: clamp(4rem, 9vw, 7.5rem);
  --radius: 2px;

  /* Schriftrollen wie auf creative-cosmetic.com */
  --schrift-titel: 'Julius Sans One', 'Trebuchet MS', sans-serif;   /* Überschriften */
  --schrift-hero: 'Palanquin', 'Segoe UI', sans-serif;              /* Bühnentitel */
  --schrift-text: 'Jura', 'Segoe UI', sans-serif;                   /* Fließtext, Buttons */
  --schrift-zitat: 'Merriweather', Georgia, serif;                  /* Leitsatz */
  --schrift-nav: 'Montserrat', 'Segoe UI', sans-serif;              /* Navigation */
  --schrift-neutral: 'Lato', 'Segoe UI', sans-serif;                /* Formular, Fuß */
}

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

html {
  scroll-behavior: smooth;
  /* Sprungziele duerfen nicht unter dem Kopf verschwinden */
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

/* Fließtext: Jura 300, 19px, Zeilenabstand 1.8 – wie im Original */
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font: 300 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)/1.8 var(--schrift-text);
  overflow-x: hidden;
}

/* Überschriften: Julius Sans One 40px, eng gesperrt, Zeilenabstand 1.3 */
h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.05em;
  margin: 0 0 0.8em;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }
h4 { font-family: var(--schrift-text); font-size: 1.125rem; font-weight: 500; margin: 0; }
p { margin: 0 0 1.1em; }
img, picture { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.bahn { width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto; }

.sprungmarke {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 100; background: var(--tinte); color: var(--weiss);
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.sprungmarke:focus { transform: translate(-50%, 0); color: var(--weiss); }

/* ---------- Kopf ----------
   Über der Bühne durchsichtig, beim Scrollen wird er weiß und rückt zusammen. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow 0.3s ease;
}
.kopf.ist-fest { box-shadow: 0 6px 26px rgba(38, 30, 18, 0.08); }
.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--bahn));
  margin-inline: auto;
  min-height: 84px;
  display: flex; align-items: center; gap: 1rem;
  transition: min-height 0.35s ease;
}
.kopf.ist-fest .kopf__innen { min-height: 70px; }
.kopf__logo { flex: none; display: block; padding: 0.5rem 0; }
.kopf__logo img {
  width: clamp(96px, 9vw, 122px); height: auto;
  transition: width 0.3s ease;
}
.kopf.ist-fest .kopf__logo img { width: clamp(88px, 8vw, 108px); }

/* Telefonnummer rechts in der Leiste */
.nav .kopf__anruf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-left: clamp(1rem, 2.5vw, 2.25rem);
  padding: 0.55rem 1.25rem;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--schrift-nav); font-weight: 700;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  color: var(--gold); transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.kopf__anruf .zeichen { width: 15px; height: 15px; }
.kopf__anruf:hover, .kopf__anruf:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.nav .kopf__anruf:hover, .nav .kopf__anruf:focus-visible { color: #fff; }



.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav { display: flex; align-items: center; }
.nav a {
  display: block; padding: 0.4rem 0;
  color: #1f1f1f; text-decoration: none;
  font-family: var(--schrift-nav); font-weight: 700;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 0.975rem); letter-spacing: -0.01em;
  position: relative;
}
/* Der Strich wächst von der Mitte heraus */
.nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0.05rem;
  height: 1.5px; background: var(--gold);
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="true"]::after { left: 0; right: 0; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="true"] { color: var(--gold); }

.kopf__schalter {
  display: none; margin-left: auto; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  font: inherit; font-size: 0.9rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinte);
}
.kopf__balken, .kopf__balken::before, .kopf__balken::after {
  display: block; width: 24px; height: 1.5px; background: currentColor;
  transition: transform 0.25s, opacity 0.2s;
}
.kopf__balken { position: relative; }
.kopf__balken::before, .kopf__balken::after { content: ''; position: absolute; left: 0; }
.kopf__balken::before { top: -7px; }
.kopf__balken::after { top: 7px; }
[aria-expanded="true"] .kopf__balken { background: transparent; }
[aria-expanded="true"] .kopf__balken::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .kopf__balken::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buehne ---------- */
.buehne {
  position: relative;
  min-height: min(84vh, 760px);
  display: grid; place-items: center;
  /* unten mehr Luft: darunter sitzen die Bildpunkte */
  padding: clamp(4rem, 10vw, 7rem) var(--rand) clamp(5.5rem, 11vw, 8.5rem);
  overflow: hidden;
  isolation: isolate;
}
.buehne__bilder { position: absolute; inset: 0; z-index: -2; }
.buehne__bild {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s ease;
}
.buehne__bild.ist-sichtbar { opacity: 1; }
.buehne__bild picture { display: block; height: 100%; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf statt Vollflaeche: das Bild bleibt sichtbar, die Schrift wird lesbar */
.buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,16,0.42) 0%, rgba(20,18,16,0.38) 45%, rgba(20,18,16,0.62) 100%);
}
/* Bühne wie im Original: Titel in Palanquin 500 weiß, darunter der Claim
   in Jura 300 im Goldton #d1a26a. */
/* breit genug, dass Titel und Claim wie im Original je auf einer Zeile stehen */
.buehne__text { text-align: center; color: var(--weiss); max-width: min(100%, 60rem); }
.buehne h1 {
  font-family: var(--schrift-hero);
  font-weight: 500;
  font-size: clamp(2.75rem, 0.8rem + 7.25vw, 7.3125rem);   /* 117px ab 1440px */
  line-height: 1.4;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin-bottom: 0.15em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.buehne__claim {
  font-family: var(--schrift-text);
  font-weight: 300;
  font-size: clamp(1.125rem, 0.75rem + 1.94vw, 2.5rem);   /* 40px ab 1440px */
  line-height: 1.4;
  letter-spacing: -0.0375em;
  color: var(--gold-hell);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
  margin-bottom: 2rem;
  text-wrap: balance;
}
/* Partner-Siegel in der Bühne, unten rechts */
.buehne__siegel {
  position: absolute; right: clamp(1.25rem, 4vw, 3.5rem); bottom: clamp(1.75rem, 5vw, 3rem);
  width: clamp(78px, 9vw, 118px); height: auto; z-index: 1;
  padding: 0.55rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.js .buehne__siegel { opacity: 0; }
.keine-bewegung .buehne__siegel { opacity: 1; }

.buehne__punkte {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.75rem;
}
.buehne__punkte button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.85); background: transparent;
  transition: background 0.3s;
}
.buehne__punkte button[aria-selected="true"] { background: var(--weiss); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-block;
  padding: 0.75rem 1.9rem;
  background: var(--gold); color: var(--weiss);
  font-family: var(--schrift-text); font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem); letter-spacing: 0.02em;
  text-decoration: none; border: 1px solid var(--gold); border-radius: var(--radius);
  cursor: pointer; font-family: inherit;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.knopf:hover, .knopf:focus-visible { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); transform: translateY(-2px); }
.knopf--hell { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: var(--weiss); }
.knopf--hell:hover, .knopf--hell:focus-visible { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.knopf--klein { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.pfeil { margin-left: 0.6em; }

/* ---------- Sektionen ---------- */
main > section { padding-block: var(--luft); scroll-margin-top: var(--kopf-h); }
.buehne { padding-block: 0; scroll-margin-top: var(--kopf-h); }

.willkommen { background: var(--weiss); }
.willkommen__gitter {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}
.leitsatz {
  margin: 0; padding-left: 2.5rem; position: relative;
  font-family: var(--schrift-zitat); font-weight: 300;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.9;
  color: var(--gold); letter-spacing: 0;
}
.leitsatz::before {
  content: '„'; position: absolute; left: 0; top: -0.35em;
  font-size: 4rem; color: var(--sand); line-height: 1;
}
.willkommen__aktion { margin-top: 1.8rem; }

.gruber { background: var(--dunkel); color: #e9e3da; }
.gruber h2 { color: var(--gold-hell); }
/* drei Absätze nebeneinander: nutzt die Breite und bleibt lesbar */
.gruber__text {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.gruber__text p { margin: 0; }
.produkte {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.produkte img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Preise ---------- */
.preise { background: var(--creme); }
/* Zweispaltig wie im Original: Klappleisten links, Behandlungsfoto rechts */
.preise__gitter {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  align-items: start;
}
.preise__bild img { width: 100%; border: 1px solid var(--linie); }

.klappliste { background: #f7f1e8; padding: clamp(0.75rem, 2vw, 1.25rem); }
.klapp { border: 1px solid var(--linie); margin-bottom: 3px; background: #e4cba9; }
.klapp:last-child { margin-bottom: 0; }
.klapp summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer; list-style: none;
  font-family: var(--schrift-titel); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.18rem);
  letter-spacing: 0.04em; text-transform: uppercase; color: #4a4033;
  transition: background 0.2s;
}
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary:hover { background: rgba(255, 255, 255, 0.35); }
.klapp summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Chevron, dreht sich beim Aufklappen */
.klapp summary::after {
  content: ''; flex: none;
  width: 9px; height: 9px; margin-right: 0.35rem;
  border-right: 1.5px solid #6b5b45; border-bottom: 1.5px solid #6b5b45;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s ease;
}
.klapp[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.klapp__inhalt { padding: 0.35rem 1.25rem 1.5rem; animation: aufklappen 0.3s ease both; }
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.klapp__hinweis { font-style: italic; color: #5c5040; margin-bottom: 1.2rem; }

.posten { margin-bottom: 1.75rem; }
.posten:last-child { margin-bottom: 0; }
.klapp__inhalt h3 {
  font-family: var(--schrift-text); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: #3a3226; margin-bottom: 0.35em;
}
.posten__text { margin: 0 0 0.5em; color: #574c3c; font-size: 0.95rem; line-height: 1.6; }
.posten__zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0; padding-top: 0.4rem; border-top: 1px solid rgba(107, 91, 69, 0.25);
  font-size: 0.9rem; letter-spacing: 0.04em; color: #574c3c;
}
.posten__preis {
  flex: none; font-family: var(--schrift-titel); font-size: 1.15rem; color: #7a5c2e;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.marke {
  display: inline-block; margin-left: 0.5em; vertical-align: 0.15em;
  background: #fff6ea; color: #7a5a2c;
  padding: 0.1em 0.6em; border-radius: 999px;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}

.einzel { margin: 0 0 1.5rem; }
.einzel:last-child { margin-bottom: 0; }
/* Leistung und Preis auf einer Linie, verbunden durch eine feine Punktreihe */
.zeile { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.95rem; }
.zeile dt { flex: 0 1 auto; color: #574c3c; }
.zeile::after {
  content: ''; flex: 1 1 auto; order: 1;
  border-bottom: 1px dotted rgba(107, 91, 69, 0.4); transform: translateY(-0.25em);
  min-width: 1.5rem;
}
.zeile dd {
  order: 2; margin: 0; flex: none;
  font-variant-numeric: tabular-nums; color: #7a5c2e; white-space: nowrap;
}

.hinweis {
  background: var(--sand); padding: clamp(1.5rem, 4vw, 2.25rem);
  border-left: 3px solid var(--gold);
}
.hinweis p:last-of-type { margin-bottom: 0; }
.hinweis__stand { font-size: 0.85rem; color: #6f5a3c; }

/* ---------- Shop ---------- */
.shop {
  background: var(--dunkel); color: #e9e3da; text-align: center;
}
.shop h2 { color: var(--gold-hell); }
.shop p { max-width: 60ch; margin-inline: auto; }

/* ---------- Ueber mich ---------- */
.ueber { background: var(--weiss); }
.ueber__gitter {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: start;
}
/* Portrait als Polaroid: breiter Rand unten, leicht gekippt */
.polaroid {
  margin: 0; padding: 0.85rem 0.85rem 0;
  background: #fff;
  box-shadow: 0 18px 45px -18px rgba(40, 30, 15, 0.45);
  transform: rotate(-1.8deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.polaroid:hover { transform: rotate(0deg); }
.polaroid img { width: 100%; object-fit: cover; }
.polaroid figcaption {
  padding: 0.9rem 0.25rem 1.1rem; text-align: center;
  font-family: var(--schrift-zitat); font-size: 0.95rem; color: var(--tinte-weich);
}
.werdegang { margin: 1.8rem 0; display: grid; gap: 0.75rem; }
.werdegang__zeile {
  display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.4rem 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie);
}
.werdegang dt {
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.werdegang dd { margin: 0; }

/* ---------- Stimmen ---------- */
.stimmen { background: var(--sand); text-align: center; }
.stimmen__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.stimmen__liste li { display: flex; }
.stimmen blockquote {
  position: relative; margin: 0; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5vw, 3.25rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--weiss);
  box-shadow: 0 16px 40px -22px rgba(60, 44, 20, 0.4);
}
/* großes Anführungszeichen als Ornament */
.stimmen blockquote::before {
  /* oberes Anführungszeichen: seine Glyphe sitzt im oberen Drittel der Zeile,
     das untere „ würde auf der Grundlinie mitten im Text landen */
  content: '\201C'; position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  font-family: var(--schrift-zitat); font-size: 3.8rem; line-height: 1;
  color: #e0c9a4;
}
.stimmen blockquote p {
  font-family: var(--schrift-zitat); font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  line-height: 1.8; color: var(--tinte);
}
.stimmen footer {
  margin-top: 1.1rem; padding-top: 0.9rem;
  font-family: var(--schrift-neutral); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.stimmen footer::before {
  content: ''; display: block; width: 34px; height: 1px;
  margin: 0 auto 0.9rem; background: var(--linie);
}

/* ---------- Kontakt ---------- */
.kontakt { background: var(--creme); }
.kontakt__gitter {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
/* Kontaktangaben als Liste mit feinen Zeichen */
.angaben { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.5rem; }
.angaben li { display: flex; gap: 1.1rem; align-items: flex-start; }
.angaben p { margin: 0; }
.angaben a { text-decoration: none; }
.angaben a:hover { text-decoration: underline; }
.angaben__was {
  display: block; margin-bottom: 0.15rem;
  font-family: var(--schrift-neutral); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.zeichen {
  flex: none; width: 22px; height: 22px; margin-top: 0.35rem;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.angaben .zeichen { color: var(--gold); width: 26px; height: 26px; }
.kontakt__hinweis {
  padding: 1rem 1.25rem; margin-bottom: 1.75rem;
  background: var(--sand); border-left: 3px solid var(--gold);
  font-size: 1rem;
}

.karte { border: 1px solid var(--linie); background: var(--weiss); overflow: hidden; }
.karte__platzhalter { padding: clamp(1.5rem, 4vw, 2.25rem); text-align: center; }
.karte__platzhalter p { color: var(--tinte-weich); font-size: 0.95rem; }
.karte__platzhalter p:last-child { margin-bottom: 0; font-size: 0.9rem; }
.karte iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ---------- Popup für Impressum und Datenschutz ---------- */
.popup {
  width: min(100% - 2rem, 52rem); max-height: 86vh;
  padding: 0; border: 0; border-radius: 3px;
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 24px 70px rgba(30, 22, 10, 0.32);
}
.popup::backdrop { background: rgba(24, 18, 10, 0.55); backdrop-filter: blur(3px); }
.popup[open] { animation: popup-auf 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.popup[open]::backdrop { animation: popup-grund 0.35s ease both; }
@keyframes popup-auf {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes popup-grund { from { opacity: 0; } to { opacity: 1; } }

.popup__kasten { position: relative; }
.popup__inhalt {
  max-height: 86vh; overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  overscroll-behavior: contain;
}
.popup__inhalt h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); color: var(--gold); margin-top: 0; }
.popup__inhalt h2:first-of-type { margin-top: 1.5em; }
.popup__zu {
  position: absolute; top: 0.6rem; right: 0.75rem; z-index: 1;
  width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 50%;
  font: 400 1.6rem/1 var(--schrift-neutral); color: var(--tinte-weich);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.popup__zu:hover, .popup__zu:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Formular ---------- */
.formular { background: var(--weiss); padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--linie); }
.formular h3 { color: var(--gold); }
.feldpaar { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.feld { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.feld label {
  font-family: var(--schrift-neutral); font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-weich);
}
.feld__zusatz { text-transform: none; letter-spacing: 0; }
.feld input, .feld select, .feld textarea {
  font: 400 1rem/1.5 var(--schrift-neutral); color: var(--tinte);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--creme);
  transition: border-color 0.2s, background 0.2s;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  background: var(--weiss); border-color: var(--gold); outline-offset: 1px;
}
.feld textarea { resize: vertical; min-height: 9rem; }
.feld [aria-invalid="true"] { border-color: #b3261e; }
.fehler { color: #b3261e; font-size: 0.9rem; }

.feld--kasten label {
  display: flex; gap: 0.7rem; align-items: flex-start;
  text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--tinte);
}
.feld--kasten input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; accent-color: var(--gold); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 1.25rem 1.5rem; border-left: 3px solid var(--gold); background: var(--weiss); }
.meldung--gut h3 { margin-bottom: 0.5em; }
.meldung--schlecht { border-color: #b3261e; color: #b3261e; margin-bottom: 1.5rem; }

/* ---------- Fuss ---------- */
.fuss { background: var(--gold); color: #fff; padding-top: clamp(2.5rem, 6vw, 4rem); }
.fuss__gitter {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.fuss h2 { font-size: 1rem; letter-spacing: 0.16em; color: #fff8ef; }
.fuss p { margin: 0; font-family: var(--schrift-neutral); font-size: 1rem; }
.fuss a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.fuss a:hover { color: var(--tinte); }
.fuss__zeile {
  margin: 0; padding: 1.1rem var(--rand);
  background: rgba(0, 0, 0, 0.18);
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem;
  align-items: center; justify-content: space-between;
  width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto;
  font-family: var(--schrift-neutral); font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 620px) { .fuss__zeile { justify-content: center; text-align: center; } }
.fuss__stempel { margin: 0; opacity: 0.8; }

/* destec-Credit mit Popup – Standard über alle destec-Seiten */
.gemacht-von { position: relative; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.gemacht-von__label {
  font-family: var(--schrift-neutral);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.gemacht-von img { width: auto; height: 24px; opacity: 0.9; transition: opacity 0.25s, transform 0.25s; }
.gemacht-von:hover img, .gemacht-von:focus-visible img { opacity: 1; transform: translateY(-1px); }
.destec-pop {
  position: absolute; bottom: calc(100% + 0.9rem); right: 0;
  font: 300 1rem/1.6 var(--schrift-text); letter-spacing: normal; text-transform: none;
  width: 268px; padding: 1.05rem 1.15rem; text-align: left;
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  z-index: 5; pointer-events: none;
}
.gemacht-von:hover .destec-pop,
.gemacht-von:focus-visible .destec-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.destec-pop i {
  display: block; font-style: normal;
  font-family: var(--schrift-neutral); font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.destec-pop b {
  display: block; margin: 0.35rem 0 0.3rem; color: var(--tinte);
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: 1.02rem; letter-spacing: -0.03em;
}
.destec-pop em { display: block; font-style: normal; font-size: 0.88rem; line-height: 1.5; color: var(--tinte-weich); }

/* ---------- Rechtstext-Seiten ---------- */
.rechtstext { background: var(--weiss); padding-block: var(--luft); }
.rechtstext .bahn { max-width: 74ch; }
.rechtstext h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); color: var(--gold); }
.rechtstext h2 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); margin-top: 2.5em; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 2em; letter-spacing: 0.06em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 0.4em; }
.zurueck { display: inline-block; margin-bottom: 2rem; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Bewegung ----------
   Verborgen wird nur, wenn JavaScript läuft (Klasse .js kommt aus dem <head>).
   Ohne JavaScript steht der ganze Inhalt sofort da. */
.js [data-reveal],
.js [data-stagger] > * { opacity: 0; }
.js [data-reveal] { transform: translateY(24px); }
.js [data-stagger] > * { transform: translateY(26px); }

.keine-bewegung [data-reveal],
.keine-bewegung [data-stagger] > *,
[data-reveal].ist-da,
[data-stagger].ist-da > * { opacity: 1; transform: none; }

/* Wortmasken für die Überschriften. Die Polsterung verhindert, dass
   Unterlängen an der Maskenkante abgeschnitten werden. */
.wort {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.12em 0.04em 0.16em; margin: -0.12em -0.04em -0.16em;
}
.wort__i { display: inline-block; will-change: transform; }
.js [data-split] .wort__i { transform: translateY(110%); }
.keine-bewegung [data-split] .wort__i,
[data-split].ist-da .wort__i { transform: none; }

/* Bühne läuft erst, wenn die Schriften geladen sind */
.js .buehne__claim, .js .buehne .knopf, .js .buehne__punkte { opacity: 0; }
.js .buehne h1 .wort__i { transform: translateY(115%); }
.keine-bewegung .buehne__claim, .keine-bewegung .buehne .knopf,
.keine-bewegung .buehne__punkte { opacity: 1; }
.keine-bewegung .buehne h1 .wort__i { transform: none; }

/* Notbremse: falls die Bühne nach 2,5 s nicht gestartet ist, alles zeigen */
@keyframes notfall-sichtbar { to { opacity: 1; transform: none; } }
.js .produkte img, .js .preise__bild img, .js .polaroid img, .js .buehne__siegel {
  animation: notfall-sichtbar 0.01s linear 4s forwards;
}
.js:not(.ist-bereit) .buehne__claim,
.js:not(.ist-bereit) .buehne .knopf,
.js:not(.ist-bereit) .buehne__punkte { animation: notfall-sichtbar 0.01s linear 2.5s forwards; }

.produkte img, .preise__bild img, .polaroid img { will-change: opacity; }
/* Bilder starten unsichtbar und werden weich eingeblendet (nur mit JavaScript) */
.js .produkte img, .js .preise__bild img, .js .polaroid img { opacity: 0; }
.keine-bewegung .produkte img, .keine-bewegung .preise__bild img,
.keine-bewegung .polaroid img { opacity: 1; }

/* ---------- Schmale Bildschirme ---------- */
/* zwischen 760 und 900 px wird die Leiste zu eng für die Telefonpille */
@media (max-width: 900px) { .nav .kopf__anruf { display: none; } }

@media (max-width: 860px) {
  .willkommen__gitter, .ueber__gitter, .preise__gitter { grid-template-columns: 1fr; }
  .preise__bild { max-width: 420px; order: -1; }   /* Foto zuerst, dann die Liste */
  .polaroid { max-width: 330px; }
  .leitsatz { padding-left: 2rem; }
}

@media (max-width: 760px) {
  .kopf__schalter { display: flex; }
  .nav {
    position: fixed; inset: var(--kopf-h) 0 auto;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
  }
  .nav.ist-offen { max-height: 70vh; overflow-y: auto; }
  .nav ul { flex-direction: column; gap: 0; padding: 0.5rem var(--rand) 1.25rem; }
  .nav { flex-direction: column; align-items: stretch; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--linie); }
  .nav a:hover, .nav a:focus-visible { border-bottom-color: var(--gold); }
  .nav .kopf__anruf {
    display: inline-flex; align-self: flex-start;
    margin: 0.25rem var(--rand) 1.5rem;
    color: var(--gold); border-color: var(--gold);
  }
  .buehne { min-height: 82vh; }
  .karte__kopf { flex-direction: column; gap: 0.25rem; }
  .werdegang__zeile { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
  [data-split] .wort__i, .buehne h1 .wort__i { transform: none; }
  .produkte img, .preise__bild img, .polaroid img, .buehne__siegel { opacity: 1; }
  .buehne__claim, .buehne .knopf, .buehne__punkte { opacity: 1; }
}