/* Ursulas Naturseifen, Stylesheet
   Palette aus Logo und Seifen, Kontraste in KONZEPT.md nachgerechnet. */

:root {
  --leinen: #F7F3EC;
  --hafer: #EDE5D8;
  --salbei: #C4CCAE;
  --seife: #9CB478;
  --oliv: #76835A;
  --oliv-tief: #5E6A45;
  --braun: #4C3E33;
  --rose: #E8CFC4;
  --lavendel: #DCD5E8;
  --nuss: #231B16;

  --bg: var(--leinen);
  --bg-alt: var(--hafer);
  --surface: #FFFDF9;
  --text: var(--braun);
  --text-soft: #6B5D51;
  --accent: var(--oliv-tief);
  --accent-display: var(--oliv);
  --on-accent: var(--leinen);
  --line: rgba(76, 62, 51, .14);
  --shadow: 0 1px 2px rgba(76, 62, 51, .06), 0 12px 32px -12px rgba(76, 62, 51, .22);
  --shadow-lift: 0 2px 4px rgba(76, 62, 51, .08), 0 28px 60px -20px rgba(76, 62, 51, .35);

  --logo-salbei: #C4CCAE;
  --logo-seife: #A1B578;
  --logo-blase: #DDE3CB;
  --logo-oliv: #6F8250;
  --logo-braun: #503C29;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 77.5rem;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  /* Galerie: jede Sorte hat einen eigenen Pastellton */
  --sorte-rose: var(--rose); --sorte-olive: #F2EBDC; --sorte-gruen: var(--salbei); --sorte-gurke: #EEDFA0; --sorte-ziege: #E6D9C6; --sorte-shampoo: #E9D6B0; --sorte-geschenk: var(--lavendel);
  --glanz: 34%;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--nuss);
    --bg-alt: #2C231D;
    --surface: #33291F;
    --text: #F1EADF;
    --text-soft: #CFC4B5;
    --accent: var(--seife);
    --accent-display: var(--salbei);
    --on-accent: var(--nuss);
    --line: rgba(241, 234, 223, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
    --logo-oliv: #C4CCAE;
    --logo-braun: #EDE5D8;
    --logo-salbei: #8E9A78;
    --logo-blase: #C9D3B4;
    --glanz: 16%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--nuss);
  --bg-alt: #2C231D;
  --surface: #33291F;
  --text: #F1EADF;
  --text-soft: #CFC4B5;
  --accent: var(--seife);
  --accent-display: var(--salbei);
  --on-accent: var(--nuss);
  --line: rgba(241, 234, 223, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
  --logo-oliv: #C4CCAE;
  --logo-braun: #EDE5D8;
  --logo-salbei: #8E9A78;
  --logo-blase: #C9D3B4;
  --glanz: 16%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Große Bildschirme: alles in rem wächst mit, damit 27 bis 32 Zoll nicht leer wirken. */
@media (min-width: 1680px) { html { font-size: 112.5%; } }
@media (min-width: 2200px) { html { font-size: 125%; } }
@media (min-width: 3200px) { html { font-size: 150%; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
/* Feine Papierstruktur über allem, ohne Bilddatei. Nur mit Maus oder Trackpad: Auf Touchgeräten
   zeichnet die GPU eine feste, bildschirmfüllende Ebene beim Scrollen ständig neu, das flackert. */
@media (hover: hover) and (pointer: fine) {
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
em { font-style: italic; color: var(--accent-display); }
p { margin: 0 0 1em; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 16px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.eyebrow { font: 600 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin-bottom: 28px; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text-soft); max-width: 36em; }

/* Fortschritt und Cursor */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--seife), var(--oliv), var(--rose)); }
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; z-index: 130; opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 32%), radial-gradient(circle, rgba(196,204,174,.18) 55%, rgba(156,180,120,.55) 72%, rgba(232,207,196,.5) 86%, rgba(220,213,232,0) 100%);
  mix-blend-mode: normal; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Kopfzeile */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 110;
  display: flex; align-items: center; gap: 20px;
  padding: 14px var(--edge);
  transition: padding .4s var(--ease), transform .45s var(--ease);
}
/* Das Milchglas liegt auf einer eigenen Ebene. Trüge die Kopfzeile selbst backdrop-filter, würde sie zum
   Bezugsrahmen des fixierten Handymenüs, und das Menü wäre nur so groß wie die Kopfzeile. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .4s var(--ease); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-hidden { transform: translateY(-110%); }
.brand { display: block; width: 6rem; transition: width .4s var(--ease), opacity .4s var(--ease), visibility .4s; }
/* Über dem Hero steht das große Logo; das kleine erscheint erst beim Scrollen. */
.has-hero .site-header:not(.is-scrolled) .brand { opacity: 0; visibility: hidden; }
.site-header.is-scrolled .brand { width: 4.6rem; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
.nav { margin-left: auto; }
@media (min-width: 861px) {
  .site-header:not(.is-scrolled) .nav__list { background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); padding: 6px 6px 6px 24px; border-radius: 999px; box-shadow: 0 1px 0 var(--line), var(--shadow); }
  .site-header:not(.is-scrolled) .theme-toggle { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(12px); }
}
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); margin: 0; padding: 0; }
.nav__list a { color: var(--text); text-decoration: none; font-weight: 500; position: relative; padding: 6px 0; }
.nav__list a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__list a:not(.nav__cta):hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { padding: 10px 20px !important; border-radius: 999px; background: var(--accent); color: var(--on-accent) !important; }
.nav__cta:hover { background: var(--text); color: var(--bg) !important; }
.nav__toggle { display: none; }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background-color .3s, transform .5s var(--ease); }
.theme-toggle:hover { background: var(--bg-alt); transform: rotate(25deg); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

@media (max-width: 860px) {
  .nav__toggle { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; position: relative; z-index: 2; }
  .nav__toggle i { display: block; width: 18px; height: 1.6px; background: var(--text); transition: transform .4s var(--ease); }
  .nav__toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.8px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.8px) rotate(-45deg); }
  /* Geschlossen ist das Menü zusätzlich unsichtbar: Safari lässt beim Zuziehen des Kreises sonst Schrift stehen.
     Beim Schließen blenden die Punkte zuerst aus, visibility schaltet erst nach dem Kreis um. */
  .nav__list { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 22px; background: var(--bg); clip-path: circle(0 at calc(100% - 70px) 36px); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s linear .6s; }
  .nav__list.is-open { clip-path: circle(150% at calc(100% - 70px) 36px); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
  .nav__list li { opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
  .nav__list.is-open li { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .nav__list.is-open li:nth-child(2) { transition-delay: .05s; }
  .nav__list.is-open li:nth-child(3) { transition-delay: .1s; }
  .nav__list.is-open li:nth-child(4) { transition-delay: .15s; }
  .nav__list.is-open li:nth-child(5) { transition-delay: .2s; }
  .nav__list a { font: 500 2.2rem/1.2 var(--serif); }
  .nav__cta { font: 600 1rem/1 var(--sans) !important; }
}

/* Knöpfe */
.btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transform: translate(var(--mx), var(--my)); transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s; position: relative; overflow: hidden; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn--primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.35), transparent 55%); opacity: 0; transition: opacity .3s; }
.btn--primary:hover { color: var(--on-accent); box-shadow: var(--shadow-lift); }
.btn--primary:hover::before { opacity: 1; }
.btn--ghost { border-color: color-mix(in srgb, var(--text) 35%, transparent); color: var(--text); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); background: var(--bg); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: hidden; isolation: isolate; }
/* Das Hero-Foto hat links ruhiges Leinen als Textfläche und läuft deshalb über die volle Breite. */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 7% 7%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transform: scale(1.04); transform-origin: 100% 50%; will-change: transform; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 26%, color-mix(in srgb, var(--bg) 20%, transparent) 40%, transparent 52%); }
.hero__bubbles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* Vollflächiges Hero-Foto: Der Text sitzt auf der freien linken Bildhälfte, auf großen Bildschirmen
   daher näher am Rand als die übrigen Abschnitte. */
.hero__content { --hero-x: max(var(--gutter), min(var(--edge), 6vw)); padding: 8rem var(--gutter) 6rem var(--hero-x); max-width: calc(var(--hero-x) + 34rem); }
.hero__logo { width: clamp(200px, 22vw, 22rem); margin: 0 0 1.6rem -6px; }
.hero__logo svg, .hero__logo img { width: 100%; height: auto; display: block; overflow: visible; }
.hero__logo path { transition: fill .5s, stroke .5s; }
.hero__logo [data-layer="salbei"] { fill: var(--logo-salbei); stroke: var(--logo-salbei); }
.hero__logo [data-layer="seife"] { fill: var(--logo-seife); stroke: var(--logo-seife); }
.hero__logo [data-layer="blase"] { fill: var(--logo-blase); stroke: var(--logo-blase); }
.hero__logo [data-layer="oliv"] { fill: var(--logo-oliv); stroke: var(--logo-oliv); }
.hero__logo [data-layer="braun"] { fill: var(--logo-braun); stroke: var(--logo-braun); }
.hero__title { font-size: clamp(3rem, 6vw, 6rem); line-height: .98; margin-bottom: 26px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: inline-block; }
/* Suchbegriff sichtbar in der H1, gesetzt wie eine Dachzeile. */
.hero__kicker { display: block; font: 600 .8rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
@media (max-width: 480px) { .hero__kicker { font-size: .72rem; letter-spacing: .12em; margin-bottom: 14px; } }
/* Niedrige Laptopfenster: Logo kleiner, damit die Knöpfe im ersten Blick bleiben. */
@media (min-width: 768px) and (max-height: 820px) { .hero__logo { width: clamp(150px, 15vw, 15rem); margin-bottom: 1rem; } }
.hero__lead { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--text-soft); max-width: 25em; margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; width: 28px; height: 46px; border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 20px; transform: translateX(-50%); }
.scroll-hint span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 3px; background: var(--text); animation: wheel 2s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Hochformat (Handy und Tablet im Hochformat): Bild oben, Text unten. */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .hero { grid-template-columns: 1fr; align-items: end; }
  /* Bild nur im oberen Teil, damit das Hochformat-Motiv kaum beschnitten wird und der Text auf Leinen steht. */
  .hero__media { inset: 0 0 auto 0; height: min(66svh, 140vw); border-radius: 0; }
  .hero__media img { object-position: 50% 20%; }
  .hero__media::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 18%, transparent 42%); }
  .hero__content { padding: calc(min(66svh, 140vw) - 9rem) var(--gutter) 72px; max-width: 40rem; }
  .hero__logo { width: 150px; margin-bottom: 14px; filter: drop-shadow(0 0 10px var(--bg)) drop-shadow(0 0 18px color-mix(in srgb, var(--bg) 80%, transparent)); }
  .scroll-hint { display: none; }
}

/* Intro-Animation (nur mit JavaScript) */
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero__title .line + .line > span { transition-delay: .12s; }
.js .hero__lead, .js .hero__actions { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .hero__lead { transition-delay: .35s; }
.js .hero__actions { transition-delay: .5s; }
.js .hero__media img { clip-path: inset(0 0 0 100% round 0); transition: clip-path 1.5s var(--ease); }
.js .is-ready .hero__title .line > span, .js .hero.is-ready .hero__title .line > span { transform: none; }
.js .hero.is-ready .hero__lead, .js .hero.is-ready .hero__actions { opacity: 1; transform: none; }
.js .hero.is-ready .hero__media img { clip-path: inset(0 0 0 0 round 0); }

/* Laufband */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-alt); padding: 18px 0; }
.marquee__track { display: flex; width: max-content; gap: 34px; align-items: center; animation: marquee 38s linear infinite; font: italic 500 clamp(1.3rem, 2.4vw, 2rem)/1 var(--serif); white-space: nowrap; }
.marquee__track b { color: var(--seife); font-weight: 400; font-style: normal; font-size: .8em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Zuschnitt liegt auf dem Bild, nicht auf dem Rahmen: Ein voll zugeschnittenes Element
   meldet Chrome dem IntersectionObserver als unsichtbar, dann würde es nie aufgedeckt. */
.js .mask-reveal img { clip-path: inset(100% 0 0 0); transform: scale(1.25); transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease); }
.js .mask-reveal.is-in img { clip-path: inset(0 0 0 0); transform: none; }
.js .mask-reveal { transition: box-shadow 1s var(--ease) .3s, border-color 1s var(--ease) .3s; }
.js .mask-reveal:not(.is-in) { box-shadow: none; border-color: transparent; background: transparent; }

/* Versprechen */
.promise { text-align: center; }
.promise .h2 { margin-inline: auto; }
.promise__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); margin-top: 56px; text-align: left; }
.promise__item { background: var(--surface); border-radius: var(--radius); padding: 36px 30px 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.promise__item:nth-child(1) { --tint: var(--salbei); }
.promise__item:nth-child(2) { --tint: var(--rose); }
.promise__item:nth-child(3) { --tint: var(--lavendel); }
.promise__item::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; background: var(--tint); opacity: .55; filter: blur(4px); transition: transform .8s var(--ease); }
.promise__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.promise__item:hover::before { transform: scale(1.25) translate(-10px, 10px); }
.promise__item h3 { font-size: 1.8rem; margin: 18px 0 10px; position: relative; }
.promise__item p { color: var(--text-soft); margin: 0; position: relative; }
.icon { width: 58px; height: 58px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; position: relative; }
.icon.draw path, .icon.draw rect, .icon.draw circle, .icon.draw ellipse { transition: stroke-dashoffset 1.6s var(--ease) .3s; }
@media (max-width: 860px) { .promise__grid { grid-template-columns: 1fr; } }

/* Unikat: Handarbeit, Gewicht, Sorten außerhalb des Shops */
.unique { padding-block: clamp(64px, 9vw, 120px); }
.unique__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.unique__text > p { color: var(--text-soft); max-width: 40em; }
.unique__note { margin-top: 22px; padding: 16px 20px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--salbei) 30%, transparent); color: var(--text); }
.unique__note a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* doppelte Klasse, weil .stats weiter unten im Stylesheet steht */
.stats.unique__stats { grid-template-columns: 1fr; margin: 0; }
.unique__stats dt { white-space: nowrap; }
.unique__stats .stat { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 18px; }
.unique__stats .stat dd { margin: 0; font-size: 1rem; }
.unique__stats .stat:nth-child(1) { background: color-mix(in srgb, var(--salbei) 28%, var(--surface)); }
.unique__stats .stat:nth-child(2) { background: color-mix(in srgb, var(--rose) 32%, var(--surface)); }
.unique__stats .stat:nth-child(3) { background: color-mix(in srgb, var(--lavendel) 36%, var(--surface)); }
@media (max-width: 960px) { .unique__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .unique__stats .stat { grid-template-columns: 7.5rem 1fr; } }

/* Seifen auf Wunsch */
.wish { background: radial-gradient(ellipse 45% 60% at 92% 12%, color-mix(in srgb, var(--rose) var(--glanz), transparent), transparent 70%),
                    radial-gradient(ellipse 40% 55% at 4% 88%, color-mix(in srgb, var(--salbei) var(--glanz), transparent), transparent 70%), var(--bg); }
.wish .lead { margin-bottom: 0; }
.wish__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); margin-top: 52px; }
.wish__item { background: var(--surface); border-radius: var(--radius); padding: 32px 26px 26px; box-shadow: var(--shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wish__item:nth-child(1) { --tint: var(--rose); }
.wish__item:nth-child(2) { --tint: var(--lavendel); }
.wish__item:nth-child(3) { --tint: var(--salbei); }
.wish__item:nth-child(4) { --tint: var(--hafer); }
.wish__item::before { content: ""; position: absolute; width: 200px; height: 200px; right: -80px; top: -90px; border-radius: 50%; background: var(--tint); opacity: .55; filter: blur(4px); transition: transform .8s var(--ease); }
.wish__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.wish__item:hover::before { transform: scale(1.25) translate(-10px, 10px); }
.wish__item h3 { font-size: 1.65rem; margin: 16px 0 8px; position: relative; }
.wish__item p { color: var(--text-soft); margin: 0 0 18px; position: relative; }
.wish__link { margin-top: auto; position: relative; color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.wish__link span { transition: transform .3s var(--ease); }
.wish__link:hover span { transform: translateX(4px); }
.wish__cta { margin: 44px 0 0; }
@media (max-width: 1100px) { .wish__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wish__grid { grid-template-columns: 1fr; } }

/* Seifen, horizontal */
.soaps { position: relative; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 18%, var(--bg-alt) 82%, var(--bg) 100%); }
/* Nur die Karten bleiben stehen, die Überschrift scrollt vorher normal weg. So bleibt auch auf niedrigen
   Laptopfenstern genug Höhe, dass jede Karte samt Zutaten ganz sichtbar ist. */
.soaps__head { padding-top: clamp(80px, 12vw, 160px); margin-bottom: 8px; }
.soaps__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 76px 0 28px; }
.soaps__head .h2 { margin-bottom: 12px; }
.soaps__hint { color: var(--text-soft); margin: 0; }
.soaps__track { display: flex; gap: 1.75rem; padding: 10px var(--edge) 30px; width: max-content; will-change: transform; }
.soap { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; width: var(--soap-w, 21.25rem); flex: 0 0 auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease), box-shadow .6s var(--ease); position: relative; }
.soap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.35), transparent 45%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
.soap:hover { box-shadow: var(--shadow-lift); }
.soap:hover::after { opacity: 1; }
/* Die Höhe setzt main.js im gepinnten Modus passend zur Fensterhöhe, sonst gilt das Seitenverhältnis. */
.soap__media { position: relative; aspect-ratio: 3 / 4; height: var(--soap-img-h, auto); overflow: hidden; background: var(--hafer); }
.soap__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.soap:hover .soap__media img { transform: scale(1.06); }
.soap__badge { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; background: var(--rose); color: var(--braun); font: 600 .78rem/1 var(--sans); letter-spacing: .04em; }
.soap__body { position: relative; padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.soap__meta { font: 600 .74rem/1.45 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.soap h3 { font-size: 1.85rem; margin-bottom: 10px; }
.soap__body > p { color: var(--text-soft); font-size: .98rem; }
.soap details { margin: auto 0 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: .9rem; color: var(--text-soft); }
.soap summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.soap summary::-webkit-details-marker { display: none; }
.soap summary::after { content: "+"; font-size: 1.3rem; line-height: 1; transition: transform .4s var(--ease); }
.soap details[open] summary::after { transform: rotate(45deg); }
/* Zutaten legen sich über das Foto, damit die Karte beim Aufklappen nicht wächst und nichts aus dem Bild rutscht. */
.soap details p { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0; padding: 18px 24px 20px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--text); line-height: 1.55; box-shadow: 0 -10px 30px rgba(35,27,22,.12); }
.soap details[open] p { animation: zutaten .45s var(--ease); }
.soap__tipp { display: block; margin-top: 10px; font-style: italic; color: var(--text-soft); }
@keyframes zutaten { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .soap details[open] p { animation: none; } }
.soap__link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.soap__link span { transition: transform .4s var(--ease); }
.soap__link:hover span { transform: translate(3px, -3px); }
.soap--more { background: transparent; box-shadow: none; display: grid; place-items: center; width: 17.5rem; text-decoration: none; }
.soap--more__circle { width: 13.75rem; height: 13.75rem; border-radius: 50%; display: grid; place-content: center; text-align: center; font: italic 500 1.9rem/1.15 var(--serif); color: var(--braun); background: radial-gradient(circle at 35% 30%, #fff 0, var(--salbei) 46%, var(--seife) 100%); box-shadow: var(--shadow-lift); transition: transform .6s var(--ease); }
.soap--more:hover .soap--more__circle { transform: scale(1.06) rotate(-4deg); }
.soaps__progress { margin: 6px var(--edge) 0; height: 2px; background: var(--line); border-radius: 2px; max-width: 420px; }
.soaps__progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); border-radius: 2px; }

/* Ohne Pinning (Mobil, reduzierte Bewegung): normales Wischen mit Einrasten */
.soaps.is-native .soaps__sticky { position: static; min-height: 0; padding: 26px 0 60px; }
.soaps.is-native .soaps__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.soaps.is-native .soaps__track::-webkit-scrollbar { display: none; }
.soaps.is-native .soap { scroll-snap-align: start; width: min(78vw, 21.25rem); scroll-margin-left: var(--gutter); }
.soaps.is-native .soaps__track { padding-inline: var(--gutter); }

/* Herstellung */
.craft__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.craft__media { position: relative; padding-bottom: 18%; }
.craft__media > figure:first-child { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); width: 82%; }
.craft__float { position: absolute; right: 0; bottom: 0; width: 46%; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); border: 8px solid var(--bg); }
.steps-wrap { position: relative; }
.steps { list-style: none; margin: 10px 0 0; padding: 0 0 0 64px; position: relative; }
.steps__line { position: absolute; left: 12px; top: 6px; width: 20px; height: calc(100% - 12px); overflow: visible; }
.steps__line path { fill: none; stroke: var(--seife); stroke-width: 2.2; stroke-linecap: round; }
.step { position: relative; padding-bottom: 34px; }
.step__no { position: absolute; left: -64px; top: -2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); font: 600 1.25rem/1 var(--serif); color: var(--accent); }
.step h3 { font-size: 1.7rem; margin-bottom: 6px; }
.step p { color: var(--text-soft); margin: 0; }
@media (max-width: 960px) { .craft__grid { grid-template-columns: 1fr; } .craft__media { order: 2; } }

/* Galerie */
.gallery { background: var(--bg-alt); }
.gallery .lead { margin-bottom: 48px; }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="alle"] { --tint: var(--salbei); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="rose"] { --tint: var(--sorte-rose); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="olive"] { --tint: var(--sorte-olive); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="gruen"] { --tint: var(--sorte-gruen); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="gurke"] { --tint: var(--sorte-gurke); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="ziege"] { --tint: var(--sorte-ziege); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="shampoo"] { --tint: var(--sorte-shampoo); }
:is(.motiv, .sorte, .sorten__schieber, .ansicht)[data-sorte="geschenk"] { --tint: var(--sorte-geschenk); }

/* Filter: ohne JS gibt es nichts zu filtern, dann stehen einfach alle Motive da. */
.motive__steuerung { display: none; }
.js .motive__steuerung { display: block; margin-bottom: clamp(24px, 3vw, 40px); }
.sorten { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 959px) {
  .sorten { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .sorten::-webkit-scrollbar { display: none; }
}
.sorte { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--text); font: 600 .95rem/1 var(--sans); cursor: pointer; scroll-snap-align: start; transition: color .35s var(--ease), border-color .35s var(--ease); }
@media (hover: hover) { .sorte:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); } }
.sorte[aria-pressed="true"] { color: var(--braun); border-color: transparent; }
.sorte__zahl { font: 500 .78rem/1 var(--sans); font-variant-numeric: tabular-nums; opacity: .7; }
.sorte__punkt { flex: 0 0 auto; width: .7em; height: .7em; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
/* Die Pille hinter dem aktiven Filter gleitet und nimmt die Farbe der Sorte an. */
.sorten__schieber { position: absolute; z-index: 0; left: 0; top: 0; width: var(--w, 0px); height: var(--h, 0px); translate: var(--x, 0px) var(--y, 0px); border-radius: 999px; background: var(--tint); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--tint) 70%, #000); pointer-events: none; }
.sorten__schieber.ist-bereit { transition: translate .55s var(--ease), width .55s var(--ease), height .55s var(--ease), background-color .5s var(--ease); }
@media (forced-colors: active) { .sorte[aria-pressed="true"] { outline: 2px solid CanvasText; } }

/* Raster statt CSS-Spalten: Safari misst und bewegt Elemente in Spalten unzuverlässig.
   --spalten und --reihen liest main.js, daraus ergibt sich die Startmenge. */
.motive__liste { --spalten: 2; --reihen: 3; --luft: 12px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: calc(var(--luft) * 2) var(--luft); }
@media (min-width: 600px) { .motive__liste { --spalten: 3; --reihen: 2; --luft: 16px; } }
@media (min-width: 960px) { .motive__liste { --spalten: 4; --luft: 20px; } }
/* Niedriges Laptopfenster: eine Spalte mehr, damit zwei Reihen nicht über den Rand wachsen. */
@media (min-width: 1100px) and (max-height: 820px) { .motive__liste { --spalten: 5; } }
/* Großer Bildschirm: Das Raster bricht symmetrisch aus der Textbreite aus, statt Rand leer zu lassen. */
@media (min-width: 1680px) { .motive__liste { --spalten: 5; --luft: 24px; margin-inline: calc((100% - min(100vw - 2 * var(--gutter), 100rem)) / 2); } }
@media (min-width: 2200px) { .motive__liste { --spalten: 6; } }

.motiv__karte { position: relative; margin: 0; display: grid; gap: 10px; }
.motiv__oeffnen { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: color-mix(in srgb, var(--tint) 40%, var(--bg)); box-shadow: var(--shadow); cursor: zoom-in; transition: box-shadow .6s var(--ease); }
/* Ganze Karte klickbar, auch die Bildunterschrift. */
.motiv__oeffnen::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.motiv__oeffnen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 1.1s var(--ease), opacity .6s var(--ease); }
.js .motiv__oeffnen img:not(.ist-geladen) { opacity: 0; }
.motiv__oeffnen:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .motiv:hover .motiv__oeffnen { box-shadow: var(--shadow-lift), 0 24px 48px -26px var(--tint); }
  .motiv:hover .motiv__oeffnen img { transform: scale(1.045); }
}
.motiv__unter { display: grid; gap: 4px; min-width: 0; padding-inline: 2px; }
.motiv__name { font: 500 clamp(1.05rem, 1.3vw, 1.25rem)/1.15 var(--serif); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.motiv__sorte { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-soft); }

/* Einblenden als diagonale Welle; Bewegung über translate, damit FLIP (transform) nicht kollidiert. */
.js .motive__liste .motiv { transition: opacity .9s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s); }
.js .motive__liste:not(.is-in) .motiv { opacity: 0; translate: 0 28px; }

.motive__fuss { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.motive__mehr[hidden] { display: none; }
.motive__mehr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: rotate .45s var(--ease); }
.motive__mehr[aria-expanded="true"] svg { rotate: 180deg; }

/* Große Ansicht */
@property --glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
html.ist-gesperrt { overflow: hidden; scrollbar-gutter: stable; }
.ansicht { --rand: clamp(16px, 2.4vw, 32px); --hoch: min(92dvh, 60rem); --glow: color-mix(in srgb, var(--tint) var(--glanz), transparent);
  width: fit-content; max-width: min(94vw, 84rem); max-height: var(--hoch); padding: 0; border: 0; border-radius: var(--radius); color: var(--text);
  background: radial-gradient(110% 80% at 18% 12%, var(--glow), transparent 62%), var(--surface);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .5); overflow: hidden; overscroll-behavior: contain; transition: --glow .7s var(--ease); }
/* ::backdrop erbt in älteren Safari-Versionen keine Variablen, deshalb feste Werte. */
.ansicht::backdrop { background: rgba(35, 27, 22, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ansicht__rahmen { display: grid; grid-template-columns: auto minmax(17rem, 23rem); align-items: center; gap: clamp(20px, 3vw, 48px); padding: var(--rand); }
.ansicht__buehne { position: relative; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.ansicht__bild { display: block; height: calc(var(--hoch) - 2 * var(--rand)); width: auto; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tint) 30%, var(--bg-alt)); box-shadow: var(--shadow-lift); translate: var(--zug, 0px) 0; transition: translate .45s var(--ease); -webkit-user-drag: none; cursor: grab; }
.ist-ziehen .ansicht__bild { transition: none; cursor: grabbing; }
.ansicht__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-height: calc(var(--hoch) - 2 * var(--rand)); overflow-y: auto; padding-block: 56px 4px; }
.ansicht__sorte { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ansicht__sorte .sorte__punkt { width: .9em; height: .9em; }
.ansicht__titel { margin: 0; font: 500 clamp(2rem, 3.2vw, 3rem)/1.02 var(--serif); text-wrap: balance; }
.ansicht__gewicht { margin: 0; font-size: .9rem; color: var(--text-soft); }
.ansicht__gewicht:empty { display: none; }
.ansicht__info { margin: 0; color: var(--text-soft); line-height: 1.6; }
.ansicht__frage { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.ansicht__frage span { transition: transform .3s var(--ease); }
.ansicht__frage:hover span { transform: translateX(4px); }
.ansicht__nav { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ansicht__stand { margin: 0; min-width: 5.5em; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.ansicht__knopf, .ansicht__zu { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); cursor: pointer; transition: border-color .3s, background-color .3s; }
.ansicht__knopf:hover, .ansicht__zu:hover { border-color: var(--text); }
.ansicht__knopf svg, .ansicht__zu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ansicht__zu { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
@keyframes ansicht-text { from { opacity: 0; translate: 0 12px; } }
.ansicht[open] .ansicht__text > * { animation: ansicht-text .7s var(--ease) both; }
.ansicht[open] .ansicht__text > :nth-child(2) { animation-delay: .08s; }
.ansicht[open] .ansicht__text > :nth-child(3) { animation-delay: .16s; }
.ansicht[open] .ansicht__text > :nth-child(n+4) { animation-delay: .24s; }

/* Hochformat (Handy, iPad hochkant): Vollbild, Bild oben, Text als Blatt darunter. */
@media (max-aspect-ratio: 5/4) {
  .ansicht { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
  .ansicht__rahmen { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 18px;
    padding: calc(max(14px, env(safe-area-inset-top)) + 58px) var(--gutter) calc(18px + env(safe-area-inset-bottom)); }
  .ansicht__buehne { container-type: size; display: grid; place-items: center; height: 100%; min-height: 0; }
  .ansicht__bild { height: min(100cqh, 100cqw * 4 / 3); }
  .ansicht__text { width: min(100%, 36rem); justify-self: center; max-height: none; overflow: visible; padding: 0; gap: 8px; }
  .ansicht__titel { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .ansicht__info { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ansicht__nav { justify-content: space-between; margin-top: 4px; }
}
@media (hover: none), (pointer: coarse) {
  .ansicht::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(35, 27, 22, .92); }
}

/* Zoom aus der Kachel (View Transitions) */
.vt-motiv { view-transition-name: motiv; }
::view-transition-group(motiv) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(motiv), ::view-transition-new(motiv) { animation: none; height: 100%; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* Geschichte */
.story__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.story__portrait { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); position: relative; }
.story__portrait figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--leinen) 88%, transparent); color: var(--braun); font-size: .85rem; backdrop-filter: blur(6px); }
.story__text > p { color: var(--text-soft); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; }
.stat { background: var(--surface); border-radius: var(--radius-sm); padding: 22px 18px; box-shadow: var(--shadow); }
.stat dt { font: 500 clamp(2.4rem, 4vw, 3.4rem)/1 var(--serif); color: var(--accent-display); }
.stat dt small { font-size: .55em; margin-left: 2px; }
.stat dd { margin: 8px 0 0; font-size: .9rem; color: var(--text-soft); }
@media (max-width: 960px) { .story__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* Hofladen */
.shop__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.card-info { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-top: 30px; }
.card-info address { font-style: normal; margin-bottom: 18px; line-height: 1.6; }
.hours { margin: 0 0 16px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.hours dt { color: var(--text-soft); }
.hours dd { margin: 0; font-weight: 600; }
.card-info__note { font-size: .92rem; color: var(--text-soft); }
.card-info__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.shop__media { position: relative; aspect-ratio: 1 / 1; width: min(100%, 46rem); margin-inline: auto; }
.shop__img { position: absolute; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); }
.shop__img img { width: 100%; height: 100%; object-fit: cover; }
.shop__img--a { left: 0; top: 8%; width: 62%; aspect-ratio: 4 / 3; z-index: 2; }
.shop__img--b { right: 0; top: 0; width: 40%; aspect-ratio: 4 / 5; }
.shop__img--c { left: 24%; top: 50%; width: 58%; aspect-ratio: 4 / 3; z-index: 3; border: 8px solid var(--bg); }
@media (max-width: 960px) { .shop__grid { grid-template-columns: 1fr; } }

/* Märkte und Termine */
.termine__liste { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .termine__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.termin { display: flex; align-items: center; gap: 22px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; position: relative; overflow: hidden; transition: translate .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.termin::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rose) 70%, transparent), transparent 70%); pointer-events: none; opacity: .5; }
.termin:nth-child(2)::after { background: radial-gradient(circle, color-mix(in srgb, var(--salbei) 80%, transparent), transparent 70%); }
.termin:nth-child(3)::after { background: radial-gradient(circle, color-mix(in srgb, var(--lavendel) 90%, transparent), transparent 70%); }
.termin:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); }
.js .termin.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease); transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; }
.termin__datum { flex: none; width: 6rem; min-height: 6rem; padding: 10px 6px; border-radius: 20px; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); }
.termin__tag { font: 600 2.1rem/1 var(--serif); }
.termin__tag--lang { font-size: 1.25rem; line-height: 1.15; }
.termin__monat { font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-top: 7px; color: var(--accent); }
.termin__text { min-width: 0; }
.termin__text h3 { font-size: 1.55rem; line-height: 1.15; margin: 0; overflow-wrap: break-word; }
.termin__zusatz { display: block; font: italic 500 1.1rem/1.3 var(--serif); color: var(--accent); }
.termin__text p { margin: 6px 0 0; color: var(--text-soft); font-size: .95rem; }
.termine__hinweis, .termine__leer { margin: 28px 0 0; color: var(--text-soft); font-size: .92rem; }
.termin.is-vorbei { display: none; }
@media (prefers-reduced-motion: reduce) { .termin { transition: none; } .termin:hover { translate: none; } }

/* Häufige Fragen */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.faq__intro { position: sticky; top: 120px; }
.faq__item { border-top: 1px solid var(--line); padding: 22px 0; }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.3 var(--serif); color: var(--text); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font: 400 1.6rem/1 var(--sans); color: var(--accent); transition: transform .4s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.faq__item p { margin: 14px 0 0; color: var(--text-soft); max-width: 40em; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: 28px; } .faq__intro { position: static; } }

/* Kontakt */
.contact { background: radial-gradient(ellipse 60% 50% at 85% 20%, color-mix(in srgb, var(--lavendel) 55%, transparent), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 90%, color-mix(in srgb, var(--rose) 50%, transparent), transparent 70%), var(--bg); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact__img { margin: 30px 0 0; border-radius: 50%; overflow: hidden; width: min(17rem, 70%); aspect-ratio: 1; box-shadow: var(--shadow-lift); }
.contact__img img { width: 100%; height: 100%; object-fit: cover; }
.form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; }
.field { position: relative; }
.field input, .field textarea { width: 100%; font: 400 1.05rem/1.5 var(--sans); color: var(--text); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 24px 18px 10px; transition: border-color .3s, box-shadow .3s, background-color .3s; resize: vertical; }
.field textarea { min-height: 150px; }
.field label { position: absolute; left: 19px; top: 17px; color: var(--text-soft); pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease), color .3s; }
.field .opt { font-size: .85em; opacity: .8; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--seife) 28%, transparent); background: var(--surface); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.78); color: var(--accent); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #A0473A; }
.field__error { color: #A0473A; font-size: .88rem; margin: 6px 2px 0; min-height: 0; }
:root[data-theme="dark"] .field__error { color: #F0A493; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field__error { color: #F0A493; } }
.field__error:empty { display: none; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); transition: background-color .3s, border-color .3s, color .3s; font-size: .95rem; }
.chips input:checked + span { background: var(--salbei); border-color: var(--salbei); color: var(--braun); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--text-soft); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--oliv-tief); flex: 0 0 auto; }
.btn--send { justify-self: start; min-width: 220px; }
.btn__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: none; animation: spin .8s linear infinite; }
.form.is-sending .btn__spinner { display: inline-block; }
.form.is-sending .btn--send { pointer-events: none; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { margin: 0; font-weight: 600; }
.form__status.is-ok { color: var(--accent); }
.form__status.is-err { color: #A0473A; }
.form.is-done { animation: done-pop .7s var(--ease); }
@keyframes done-pop { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }

/* Dankeschön nach dem Absenden */
.danke { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 20px; }
.danke[hidden] { display: none; }
.danke__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); opacity: 0; transition: opacity .5s var(--ease); }
.danke__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.danke__card { position: relative; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow: auto; text-align: center; background: var(--surface); border-radius: 28px; padding: clamp(28px, 5vw, 48px); box-shadow: 0 30px 90px -20px rgba(35, 27, 22, .45); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .6s var(--ease), transform .8s var(--ease);
  background-image: radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--rose) 45%, transparent), transparent 70%), radial-gradient(ellipse 60% 45% at 0% 100%, color-mix(in srgb, var(--salbei) 45%, transparent), transparent 70%); }
.danke.is-open .danke__backdrop { opacity: 1; }
.danke.is-open .danke__card { opacity: 1; transform: none; }
.danke__logo { width: min(220px, 60%); margin: 0 auto 14px; }
.danke__logo svg { width: 100%; height: auto; display: block; }
.danke__logo [data-layer="salbei"] { fill: var(--logo-salbei); stroke: var(--logo-salbei); }
.danke__logo [data-layer="seife"] { fill: var(--logo-seife); stroke: var(--logo-seife); }
.danke__logo [data-layer="blase"] { fill: var(--logo-blase); stroke: var(--logo-blase); }
.danke__logo [data-layer="oliv"] { fill: var(--logo-oliv); stroke: var(--logo-oliv); }
.danke__logo [data-layer="braun"] { fill: var(--logo-braun); stroke: var(--logo-braun); }
.danke__title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.danke__text { color: var(--text-soft); margin: 0 auto 22px; max-width: 30em; }
.danke__img { width: 132px; aspect-ratio: 3 / 4; margin: 0 auto 18px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-3deg); }
.danke__img img { width: 100%; height: 100%; object-fit: cover; }
.danke__gruss { font: italic 500 1.3rem/1.4 var(--serif); margin-bottom: 24px; }
.danke__gruss em { font-size: 1.6rem; }
@media (max-height: 780px) { .danke__img { display: none; } .danke__logo { width: 150px; margin-bottom: 6px; } .danke__card { padding: 26px 22px; } }

/* Fußzeile */
.site-footer { position: relative; background: var(--nuss); color: #E9E0D2; padding: 110px 0 40px; margin-top: 40px; }
.site-footer__wave { position: absolute; left: 0; top: -1px; width: 100%; height: 80px; transform: scaleY(-1); }
.site-footer__wave path { fill: var(--bg); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.site-footer__logo { width: 13rem; }
.site-footer__head { font: 500 1.5rem/1.2 var(--serif); color: #F7F3EC; margin-bottom: 14px; }
/* Footer-Links ohne Standardstrich: eine feine Linie läuft beim Überfahren von links ein, im Menü gleitet ein Pfeil herein. */
.site-footer a { color: #DCE3CB; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: color .35s var(--ease), background-size .5s var(--ease); }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; background-size: 100% 1px; }
.site-footer a:focus-visible { outline: 2px solid var(--seife); outline-offset: 4px; border-radius: 4px; }
.site-footer__mail { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .site-footer__mail, .site-footer .site-footer__credit a { background-image: linear-gradient(rgba(220, 227, 203, .35), rgba(220, 227, 203, .35)), linear-gradient(currentColor, currentColor); background-size: 100% 1px, 0 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; }
.site-footer .site-footer__mail:hover, .site-footer .site-footer__mail:focus-visible, .site-footer .site-footer__credit a:hover, .site-footer .site-footer__credit a:focus-visible { background-size: 100% 1px, 100% 1px; }
.site-footer__mail svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer li a { display: inline-flex; align-items: center; gap: 10px; }
.site-footer li a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seife); opacity: .55; transition: transform .4s var(--ease), opacity .4s; }
.site-footer li a::after { content: "→"; font-size: .9em; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .45s var(--ease); }
.site-footer li a:hover::before, .site-footer li a:focus-visible::before { transform: scale(1.5); opacity: 1; }
.site-footer li a:hover::after, .site-footer li a:focus-visible::after { opacity: 1; transform: none; }
.site-footer li a[aria-current="page"] { color: #fff; }
.site-footer li a[aria-current="page"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .site-footer a, .site-footer li a::before, .site-footer li a::after { transition: none; } }
.site-footer__small { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(233, 224, 210, .15); font-size: .85rem; color: #BDB1A1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; }
.site-footer__small p { margin: 0; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Rechtstexte */
.legal-nav { margin-left: auto; display: flex; gap: clamp(14px, 2.4vw, 30px); }
.legal-nav a { color: var(--text); text-decoration: none; font-weight: 500; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .3s; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.legal-hero { position: relative; padding: clamp(150px, 16vw, 210px) 0 clamp(90px, 9vw, 130px); overflow: hidden;
  background: radial-gradient(ellipse 50% 70% at 88% 20%, color-mix(in srgb, var(--lavendel) 60%, transparent), transparent 70%),
              radial-gradient(ellipse 45% 60% at 8% 90%, color-mix(in srgb, var(--salbei) 55%, transparent), transparent 70%),
              radial-gradient(ellipse 35% 50% at 55% 10%, color-mix(in srgb, var(--rose) 45%, transparent), transparent 70%), var(--bg-alt); }
.legal-hero h1 { font-size: clamp(3rem, 7vw, 5.6rem); margin-bottom: 16px; overflow-wrap: anywhere; hyphens: manual; }
.legal-hero .lead { margin: 0; }
.legal-404__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.legal-hero--404 h1 em { color: var(--accent); }
.legal-hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; }
.legal-hero__wave path { fill: var(--bg); }
.legal { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.legal-grid--text .legal-facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .legal-grid--text .legal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
.legal-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--seife), var(--salbei)); opacity: .8; }
.legal-card--main { grid-row: span 2; background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--salbei) 22%, var(--surface))); }
.legal-card--main address { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.7; }
.legal-card--main strong { font: 500 clamp(1.8rem, 2.6vw, 2.3rem)/1.2 var(--serif); color: var(--accent-display); display: inline-block; margin-bottom: 6px; }
.legal-card--wide { grid-column: 1 / -1; }
.legal-card--maker { background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--lavendel) 30%, var(--surface))); }
.legal-card h2 { font-size: clamp(1.5rem, 2vw, 1.8rem); margin: 0 0 12px; }
.legal-card p, .legal-card address { color: var(--text-soft); font-style: normal; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card strong { color: var(--text); }
.legal-list { margin: 0; }
.legal-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.legal-list dt { color: var(--text-soft); }
.legal-list dd { margin: 0; font-weight: 600; }
.legal-facts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.legal-facts li { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 18px 20px; display: grid; gap: 4px; }
.legal-facts li:nth-child(1) { background: color-mix(in srgb, var(--salbei) 35%, var(--surface)); }
.legal-facts li:nth-child(2) { background: color-mix(in srgb, var(--rose) 40%, var(--surface)); }
.legal-facts li:nth-child(3) { background: color-mix(in srgb, var(--lavendel) 45%, var(--surface)); }
.legal-facts li:nth-child(4) { background: color-mix(in srgb, var(--seife) 30%, var(--surface)); }
.legal-facts strong { font: 500 1.35rem/1.2 var(--serif); color: var(--text); }
.legal-facts span { font-size: .92rem; color: var(--text); opacity: .85; }
.legal-stand { font-style: italic; }
.todo { background: color-mix(in srgb, var(--rose) 75%, transparent); color: var(--braun); padding: 1px 8px; border-radius: 6px; font-size: .92em; }
@media (max-width: 760px) {
  .legal-grid, .legal-facts, .legal-grid--text .legal-facts { grid-template-columns: 1fr; }
  .legal-card--main { grid-row: auto; }
  .legal-nav a:first-child { display: none; }
}

/* Touchgeräte: Glas ohne Weichzeichner, deckende Flächen statt Live-Blur über den Blasen. */
@media (hover: none), (pointer: coarse) {
  .theme-toggle, .btn--ghost, .story__portrait figcaption { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .theme-toggle { background: color-mix(in srgb, var(--bg) 90%, transparent); }
  .btn--ghost { background: color-mix(in srgb, var(--bg) 85%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .hero__lead, .js .hero__actions { opacity: 1 !important; transform: none !important; }
  .js .motive__liste .motiv { opacity: 1 !important; translate: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js .mask-reveal img { clip-path: none !important; }
  .js .hero__title .line > span, .js .mask-reveal img, .hero__media img { transform: none !important; }
  .js .hero__media img { clip-path: none !important; }
  .marquee__track { animation: none; }
}