@import url('/css/fonts.css');

/* ============================================================
   WUNDERELIXIERE, Editorial Wellness Design System
   Modern · Elegant · Minimal
   v2.0 · April 2026
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Sage / Primary */
  --sage-50:  #f4f7f1;
  --sage-100: #e6ecdf;
  --sage-200: #cdd8c0;
  --sage-300: #adbe9b;
  --sage-400: #8ba177;
  --sage-500: #6e8859;
  --sage-600: #556e45;
  --sage-700: #425637;
  --sage-800: #32422a;
  --sage-900: #222d1c;

  /* Gold / Accent */
  --gold-50:  #faf4e5;
  --gold-100: #f2e3bb;
  --gold-200: #e8cd8a;
  --gold-300: #dab65a;
  --gold-400: #c9a043;
  --gold-500: #b0883a;
  --gold-600: #8c6c2e;
  --gold-700: #6a5124;

  /* Ink / Neutral */
  --ink-900: #1c1915;
  --ink-800: #2c2824;
  --ink-700: #3f3a34;
  --ink-500: #6c655c;
  --ink-400: #8f887e;
  --ink-300: #c0b9ad;
  --ink-200: #ddd6c8;
  --ink-100: #ece7dc;

  /* Paper / Surface */
  --paper:       #fbf9f4;
  --paper-alt:   #f4efe5;
  --paper-deep:  #ebe4d3;
  --surface:     #ffffff;
  --surface-ink: #16130f;

  /* Semantic */
  --color-primary:      var(--sage-700);
  --color-primary-soft: var(--sage-100);
  --color-accent:       var(--gold-400);
  --color-accent-soft:  var(--gold-50);
  --color-text:         var(--ink-900);
  --color-text-soft:    var(--ink-500);
  --color-text-muted:   var(--ink-400);
  --color-line:         var(--ink-200);
  --color-line-soft:    var(--ink-100);
  --color-bg:           var(--paper);
  --color-bg-alt:       var(--paper-alt);
  --color-bg-card:      var(--surface);
  --color-error:        #b84a3d;
  --color-success:      #547d4c;

  /* Typography, Playfair Display als einheitliche Schrift, lokal gehostet */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Playfair Display', serif;
  --font-ui:      'Inter', sans-serif;
  --font-mono:    ui-monospace, monospace;

  /* Fluid Type Scale (clamp-based) */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.0625rem;
  --fs-lg:    clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-xl:    clamp(1.35rem, 1vw + 1.15rem, 1.6rem);
  --fs-2xl:   clamp(1.75rem, 1.5vw + 1.4rem, 2.25rem);
  --fs-3xl:   clamp(1.9rem, 2vw + 1.2rem, 2.8rem);
  --fs-4xl:   clamp(2.4rem, 3vw + 1.2rem, 3.6rem);
  --fs-hero:  clamp(2.6rem, 4vw + 1rem, 4.4rem);

  /* Spacing (8-pt + editorial) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Shadows, soft, editorial */
  --shadow-xs: 0 1px 2px rgba(28, 25, 21, 0.04);
  --shadow-sm: 0 2px 8px rgba(28, 25, 21, 0.05), 0 1px 2px rgba(28, 25, 21, 0.04);
  --shadow-md: 0 10px 30px -12px rgba(28, 25, 21, 0.10), 0 4px 12px -6px rgba(28, 25, 21, 0.06);
  --shadow-lg: 0 24px 60px -20px rgba(28, 25, 21, 0.16), 0 8px 24px -12px rgba(28, 25, 21, 0.08);
  --shadow-focus: 0 0 0 3px rgba(66, 86, 55, 0.18);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.6, 0.01, 0.22, 1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 620ms;

  /* Layout */
  --page-max: 1240px;
  --prose-max: 68ch;
  --header-h: 76px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.7;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--sage-900); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-text);
  font-variation-settings: normal;
}

h1 { font-size: var(--fs-4xl); font-weight: 400; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-3xl); font-weight: 400; letter-spacing: -0.022em; }
h3 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; font-family: var(--font-body); }

p { text-wrap: pretty; }

::selection { background: var(--gold-200); color: var(--ink-900); }

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Noch leere, per JS gemountete Ueberschriften reservieren ihre Zeile,
   damit der Inhalt beim Eintreffen der Daten nicht springt. */
.page-header h1:empty::before,
.hero h1:empty::before,
.page-header p:empty::before { content: '\00a0'; }

/* ---------- Micro-type utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-700);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sage-700);
  font-size: 1.15em;
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 58ch;
}

.rule {
  width: 48px;
  height: 1px;
  background: var(--sage-700);
  opacity: 0.4;
  border: 0;
  margin: var(--space-5) 0;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.prose {
  max-width: var(--prose-max);
  margin-inline: auto;
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Tiefe statt Flaeche: der Wechselgrund ist keine flache Farbe, sondern
   eine leise Diffusion. Honigtoenes Licht faellt von oben ein, unten
   sammelt sich ein gruener Grundton (Regler: die beiden Alphawerte). */
.section--alt {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(233, 213, 160, 0.14), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 112%, rgba(110, 136, 89, 0.09), transparent 65%),
    var(--color-bg-alt);
}

.section--dark {
  background: var(--sage-900);
  color: var(--paper);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .eyebrow { color: var(--gold-300); }

.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head--center { text-align: center; justify-items: center; }

/* Editorial-Split: Headline links, Beschreibung rechts unten, statt
   ueberall derselbe zentrierte Block (Kapitel duerfen Kanten haben). */
@media (min-width: 901px) {
  .section-head:not(.section-head--center) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
    align-items: end;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .section-head:not(.section-head--center) > .eyebrow { grid-column: 1 / -1; }
  .section-head:not(.section-head--center) > p {
    justify-self: end;
    text-align: right;
    margin-bottom: 8px;
  }
}
.section-head h2 { max-width: 28ch; }
.section-head p { color: var(--color-text-soft); max-width: 62ch; font-size: var(--fs-md); }
.section-head--center p { margin-inline: auto; }

/* Nur explizit zentrierte Heads bleiben zentriert; alle anderen folgen
   dem Editorial-Split (Headline links, Beschreibung rechts unten). */
.section-head h2 { text-wrap: balance; }
@media (min-width: 960px) {
  .section-head--center h2 { max-width: 32ch; }
}

/* ---------- Header / Top Nav ---------- */
/* Sicherheitsnetz: nichts darf die Seite horizontal scrollbar machen.
   clip statt hidden: erzeugt keinen Scroll-Container, sticky bleibt intakt. */
html, body { overflow-x: clip; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(251, 249, 244, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(251, 249, 244, 0.92);
  border-bottom-color: var(--color-line-soft);
}

.header-inner {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Logo links, alles Weitere (Nav, dann Such-Icon) nach rechts. Das Such-Icon
   ist das letzte Element und sitzt damit ganz rechts oben. min-width:0 laesst
   den Schriftzug auf schmalen Screens schrumpfen statt den Header zu sprengen. */
.header-inner > .logo { margin-right: auto; min-width: 0; }
.search-toggle { margin-left: var(--space-2); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
}
.logo:hover { color: var(--color-text); }

.logo-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22V9' stroke='%23fbf9f4' stroke-width='1' stroke-linecap='round' fill='none' opacity='0.9'/><path d='M12 16C8.6 15.2 6.4 12.6 7.2 9.6C9.6 11 11.6 12.8 12 15.6Z' fill='%23fbf9f4' opacity='0.92'/><path d='M12 14C13.4 11.4 15.2 10.4 16.6 10.6C16.4 12.4 14.6 13.8 12 14Z' fill='%23fbf9f4' opacity='0.7'/><circle cx='12' cy='6.4' r='1.6' fill='%23dab65a'/><circle cx='12' cy='6.4' r='1.6' fill='url(%23g)' opacity='0.6'/><defs><radialGradient id='g' cx='0.35' cy='0.3' r='0.7'><stop offset='0' stop-color='%23ffffff' stop-opacity='0.7'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0'/></radialGradient></defs></svg>") center/68% no-repeat,
    radial-gradient(circle at 32% 28%, var(--sage-500) 0%, var(--sage-700) 55%, var(--sage-900) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(218,182,90,0.12),
    var(--shadow-xs);
  position: relative;
  flex-shrink: 0;
}
.site-footer .logo-mark { width: 36px; height: 36px; }

.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sage-800);
}
.logo-subtitle {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.primary-nav { display: flex; align-items: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-700);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--sage-800); background: var(--color-primary-soft); }
.nav-links a.active { color: var(--sage-900); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 4px; height: 4px;
  background: var(--gold-400);
  border-radius: 50%;
  transform: translateX(-50%);
}
.nav-links .nav-cta {
  margin-left: 10px;
  padding: 10px 18px;
  background: var(--sage-800);
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
}
.nav-links .nav-cta:hover { background: var(--sage-900); color: var(--paper); }
.nav-links .nav-cta::before {
  content: "✦";
  margin-right: 6px;
  color: var(--gold-300);
}

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--ink-800);
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover { background: var(--color-primary-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--sage-800);
  color: var(--paper);
}
.btn--primary:hover { background: var(--sage-900); color: var(--paper); box-shadow: var(--shadow-md); }

.btn--gold {
  background: var(--gold-400);
  color: var(--ink-900);
}
.btn--gold:hover { background: var(--gold-300); color: var(--ink-900); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line);
}
.btn--ghost:hover { background: var(--color-bg-alt); border-color: var(--ink-300); }

.btn--outline-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,0.4);
}
.btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--paper); color: var(--paper); }

.btn--link {
  padding: 0;
  background: transparent;
  color: var(--sage-800);
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  gap: 8px;
}
.btn--link:hover { color: var(--gold-600); }

.btn--sm { padding: 10px 18px; font-size: 0.82rem; }
.btn--lg { padding: 16px 32px; font-size: 0.98rem; }

.btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Hero (Editorial Split) ---------- */
.hero {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, var(--gold-50) 0%, transparent 55%),
    radial-gradient(ellipse 70% 80% at 10% 90%, var(--sage-50) 0%, transparent 60%),
    var(--paper);
  overflow: hidden;
}
/* Jahreszeitliche Stage-Animation: dezenter Canvas-Hintergrund, der den Hero
   und den folgenden Abschnitt (Pillars) abdeckt. Das Modul setzt am Host (main)
   die Klasse has-seasonal-stage. Dann wird der Hero-Hintergrund auf den Host
   verlagert (hinter das Canvas), Hero und der Pillars-Abschnitt werden
   transparent, sodass die Animation durch beide hindurch sichtbar ist. */
.has-seasonal-stage {
  position: relative;
  background:
    radial-gradient(ellipse 80% 40% at 85% 6%, var(--gold-50) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 36%, var(--sage-50) 0%, transparent 60%),
    var(--paper);
}
.has-seasonal-stage > .seasonal-stage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Hero und Pillars transparent halten, damit das Canvas durchscheint; ihr
   Inhalt liegt per relativer Positionierung darueber. overflow der Hero auf
   visible, damit der Hintergrund nicht abschneidet (der Gradient kommt jetzt
   vom Host). */
.has-seasonal-stage > .hero {
  background: transparent;
  overflow: visible;
}
.has-seasonal-stage > .hero,
.has-seasonal-stage > .hero + .section--tight {
  position: relative;
  z-index: 1;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(66,86,55,0.05) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  pointer-events: none;
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
/* Editorial-Komposition: die Headline ist die Buehne. Sie sprengt ihre
   Spalte und ragt ueber die Kartenspalte, die Karte weicht nach unten
   aus (gebrochene Achse statt Zwei-Spalten-Vorlage). */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hero-copy { max-width: none; }
.hero h1 {
  font-size: clamp(3rem, 6.5vw + 0.5rem, 7.2rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin-top: var(--space-4);
  margin-right: clamp(-16rem, -20vw, 0rem);
  position: relative;
  z-index: 3;
  text-wrap: balance;
}
.hero-copy .lede { max-width: 42rem; }
.hero-visual { margin-top: clamp(4.5rem, 10vw, 9.5rem); }
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-700);
}
.hero-copy .lede { margin-top: var(--space-5); }
.hero-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
}
.hero-meta > div { display: grid; gap: 2px; }
.hero-meta strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--sage-800);
  letter-spacing: -0.02em;
}
.hero-meta span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-500);
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 40% at 25% 18%, rgba(218,182,90,0.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(34,45,28,0.5), transparent 65%),
    linear-gradient(155deg, var(--sage-500) 0%, var(--sage-700) 55%, var(--sage-900) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* Hauchfeines Raster + Vapor-Linien als Stoff-Textur */
.hero-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}
/* Botanische Linework-Sprig (background-Shorthand, Longhand kennt keine Position) */
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%23fbf9f4' stroke-linecap='round'><g opacity='0.55'><path d='M100 250V70' stroke-width='1.2'/><path d='M100 200C82 188 70 170 76 150C92 162 100 178 100 200Z' fill='%23fbf9f4' fill-opacity='0.18' stroke-width='0.8'/><path d='M100 175C118 165 130 150 124 130C108 142 100 158 100 175Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.8'/><path d='M100 150C84 140 75 122 80 105C96 116 100 130 100 150Z' fill='%23fbf9f4' fill-opacity='0.15' stroke-width='0.8'/><path d='M100 130C115 122 124 108 120 92C107 102 100 116 100 130Z' fill='%23fbf9f4' fill-opacity='0.1' stroke-width='0.8'/><path d='M100 105C88 95 82 80 86 65C97 75 100 88 100 105Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.8'/></g><g stroke='%23dab65a' stroke-width='1' opacity='0.7'><path d='M100 60C97 55 97 48 100 44C103 48 103 55 100 60Z' fill='%23dab65a' fill-opacity='0.85'/></g><g opacity='0.35' stroke-width='0.8'><path d='M70 50Q80 30 60 18'/><path d='M130 55Q140 35 124 22'/><path d='M50 80Q35 65 48 48'/></g></svg>") no-repeat center / auto 78%;
  pointer-events: none;
}

/* Duftfaeden auf der Diffuser-Karte: auf Fabians Wunsch entfernt
   (wirkten als Streifen, nicht als Duft). Der Sprig bleibt. */
/* Editorial Typo-Layer: rotierendes Diffuser-Blend als großes Display */
.hero-visual-meta {
  position: absolute;
  inset: auto 16px 38% 16px;
  text-align: center;
  color: var(--paper);
  z-index: 2;
  pointer-events: none;
}
/* Lichtung: die Buehne macht dem Blend-Text Platz, der Sprig tritt zurueck */
.hero-visual-meta::before {
  content: "";
  position: absolute;
  inset: -34% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 70% 85% at 50% 50%, rgba(38, 52, 34, 0.5), transparent 70%);
  filter: blur(2px);
}
.hero-visual-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(251,249,244,0.72);
}
.hero-visual-meta-label::before,
.hero-visual-meta-label::after {
  content: "";
  width: 28px; height: 1px;
  background: rgba(251,249,244,0.4);
}
.hero-visual-meta-blend {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-variation-settings: normal;
  padding-inline: 1rem;
}
/* Alle Mischungs-Optionen sind im Markup vorhanden. JS aktiviert genau eine
   pro Tag (deterministisch über den Tag des Jahres), kein Auto-Karussell. */
.hero-visual-meta-blend > span { display: none; }
.hero-visual-meta-blend > span.is-active {
  display: block;
  animation: blendFadeIn 1s var(--ease-out) 200ms both;
}
@keyframes blendFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual-meta-blend > span.is-active { animation: none; }
}

.hero-badge {
  position: absolute;
  left: 18px; bottom: 22px;
  padding: 9px 18px 9px 10px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  white-space: nowrap;
  max-width: calc(100% - 36px);
}
.hero-badge-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  padding: 3px 9px 3px 10px;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.hero-badge-text {
  display: inline-block;
  line-height: 1.1;
}
.hero-badge-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-500);
  box-shadow: 0 0 0 4px rgba(110,136,89,0.18);
  animation: pulse 2.4s var(--ease-in-out) infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(110,136,89,0.22); }
  50%      { box-shadow: 0 0 0 10px rgba(110,136,89,0); }
}

/* ---------- Page Header ---------- */
.page-header {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, var(--sage-50), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, var(--gold-50), transparent 60%),
    var(--paper);
  text-align: center;
  border-bottom: 1px solid var(--color-line-soft);
}
.page-header .container { max-width: 50rem; }
.page-header h1 {
  font-size: var(--fs-4xl);
  font-weight: 300;
  margin-top: var(--space-3);
  letter-spacing: -0.03em;
}
.page-header h1 em { font-style: italic; color: var(--sage-700); }
.page-header p {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--ink-700);
}

/* ---------- Cards / Editorial Grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}
.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-200);
}

.card-media {
  aspect-ratio: 4 / 3;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 25% 22%, var(--sage-100), transparent 65%),
    radial-gradient(ellipse 70% 60% at 80% 88%, var(--gold-50), transparent 65%),
    var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Subtiles Raster als Stoff/Papier-Hauch */
.card-media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(66,86,55,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(66,86,55,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(22,19,15,0.08));
  z-index: 1;
}
/* Typografische Initiale als Hauptmotiv */
.card-media-letter {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 7.5rem);
  line-height: 0.9;
  color: var(--sage-700);
  letter-spacing: -0.04em;
  font-variation-settings: normal;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  user-select: none;
}
/* Kleines Glyph-Akzent: Tropfen oben links, Familienkürzel unten rechts */
.card-media-mark {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-media-mark::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(218,182,90,0.18);
}
.card-media-icon {
  position: absolute;
  bottom: 12px; right: 14px;
  z-index: 2;
  font-size: 1.1rem;
  opacity: 0.55;
  filter: grayscale(0.2);
}
/* Backwards compatibility: wenn nur ein nackter String/Emoji im .card-media steht */
.card-media:not(:has(.card-media-letter, img)) {
  font-size: 2.6rem;
}

.card-body {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.card-tag::before { content: "·"; font-size: 1.2em; }

.card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.card-title a { color: var(--color-text); }
.card-title a:hover { color: var(--sage-700); }

.card-text {
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.6;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-line-soft);
  font-size: 0.8rem;
  color: var(--ink-500);
}
.card-meta .btn--link { font-size: 0.85rem; }

/* Oil cards */
.oil-card .card-media { aspect-ratio: 1 / 1; }
.oil-card .card-media-letter { font-size: clamp(3.5rem, 8vw, 5.5rem); }

/* Öle-Übersicht: dichteres 4-Spalten-Raster (statt 3) für die große Sammlung */
#oils-grid.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(0.9rem, 1.5vw, 1.4rem);
}
#oils-grid .oil-card .card-body {
  padding: 0.95rem 1.1rem 1rem;
  gap: 0.55rem;
}
#oils-grid .oil-card .card-title {
  font-size: 1.08rem;
  letter-spacing: -0.012em;
}
#oils-grid .oil-card .card-tag {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}
#oils-grid .oil-card .card-media-mark {
  font-size: 0.55rem;
  top: 10px;
  left: 10px;
  letter-spacing: 0.2em;
}
#oils-grid .oil-card .oil-aroma {
  font-size: 0.72rem;
  padding: 4px 10px;
}
#oils-grid .oil-card .oil-uses li {
  font-size: 0.82rem;
  padding-left: 18px;
  line-height: 1.45;
}
#oils-grid .oil-card .oil-uses { gap: 5px; }
#oils-grid .oil-card .card-meta {
  font-size: 0.74rem;
  padding-top: 0.55rem;
}
#oils-grid .oil-card .card-meta .btn--link { font-size: 0.78rem; }

/* ---------- Duftfamilien-Farbsystem ----------
   Kernmetapher "Ein Tropfen entfaltet sich": Jede Duftfamilie hat einen
   eigenen Farbraum, der von einem Punkt am unteren Rand der Karte
   aufsteigt und weich diffundiert, wie ein Tropfen im Diffuser.
   Regler pro Familie: --fam-ink (Text/Akzent), --fam-deep (Initiale),
   --fam-wash (Grundton), --fam-point (Tropfenfarbe, kraeftigster Punkt).
   Gilt fuer Karten (.oil-card[data-family]), Filter-Tabs ([data-fam])
   und das Oel-Detail (#oil-detail-content[data-family]). */
:root {
  --fam-ink: var(--sage-700);
  --fam-deep: var(--sage-800);
  --fam-wash: var(--paper-alt);
  --fam-point: #dfe5d2;
}
[data-family="Kräuter"], [data-fam="Kräuter"] {
  --fam-ink: #587a54; --fam-deep: #3f5b3e; --fam-wash: #eaf0df; --fam-point: #bcd4a9;
}
[data-family="Holzig"], [data-fam="Holzig"] {
  --fam-ink: #8a6248; --fam-deep: #63452f; --fam-wash: #f0e7db; --fam-point: #d9bfa2;
}
[data-family="Würzig"], [data-fam="Würzig"] {
  --fam-ink: #a05737; --fam-deep: #7d3f24; --fam-wash: #f5e6d3; --fam-point: #e4b98c;
}
[data-family="Zitrus"], [data-fam="Zitrus"] {
  --fam-ink: #a8801f; --fam-deep: #7d5e13; --fam-wash: #faf1d2; --fam-point: #f0d987;
}
[data-family="Harz"], [data-fam="Harz"] {
  --fam-ink: #8a6430; --fam-deep: #64481f; --fam-wash: #ece0ca; --fam-point: #cfb083;
}
[data-family="Blumig"], [data-fam="Blumig"] {
  --fam-ink: #7d5a8f; --fam-deep: #5c4270; --fam-wash: #f1e9f3; --fam-point: #d6c2de;
}
[data-family="Mint"], [data-fam="Mint"] {
  --fam-ink: #3f7f7a; --fam-deep: #2d5f5b; --fam-wash: #e2efec; --fam-point: #a5d2ca;
}
[data-family="Blend"], [data-fam="Blend"] {
  --fam-ink: var(--sage-700); --fam-deep: var(--sage-800);
  --fam-wash: var(--paper-alt); --fam-point: var(--gold-100);
}

/* Duftwolke: der Tropfen setzt unten mittig an und entfaltet sich nach oben.
   Regler: Ellipsen-Groesse und transparent-Stops steuern, wie hoch der
   Duft in der Karte aufsteigt. */
.oil-card .card-media {
  background:
    radial-gradient(ellipse 100% 88% at 50% 102%, var(--fam-point), transparent 70%),
    radial-gradient(ellipse 150% 110% at 50% 125%, var(--fam-point), transparent 78%),
    var(--fam-wash);
}
.oil-card .card-media-letter { color: var(--fam-deep); }
.oil-card .card-media-mark { color: var(--fam-ink); }
.oil-card .card-media-mark::before {
  background: var(--fam-ink);
  box-shadow: 0 0 0 3px var(--fam-wash);
}
.oil-card .card-tag { color: var(--fam-ink); }
.oil-card .oil-aroma { background: var(--fam-wash); color: var(--fam-deep); }

/* Sieben Tropfen als Familien-Spektrum (Oel-Finder): unter ihnen waehlt
   das Quiz. Tropfenform: eckige Ecke oben, um 45 Grad gedreht. */
.family-drops {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 18px;
}
.family-drops i {
  width: 11px;
  height: 11px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: var(--fam-point);
  box-shadow: inset 0 0 0 1.5px var(--fam-ink);
  opacity: 0.85;
}

/* Filter-Tabs tragen den Familienton als Tropfenpunkt */
.filter-tab[data-fam] { display: inline-flex; align-items: center; }
.filter-tab[data-fam]:not([data-fam="*"])::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fam-point);
  box-shadow: inset 0 0 0 1.5px var(--fam-ink);
  margin-right: 7px;
  flex-shrink: 0;
}

/* Oel-Detail: die ganze Profilseite atmet den Familienton */
#oil-detail-content[data-family] .oil-hero-media {
  background:
    radial-gradient(ellipse 95% 75% at 50% 104%, var(--fam-point), transparent 65%),
    var(--fam-wash);
}
#oil-detail-content[data-family] .oil-hero .eyebrow { color: var(--fam-ink); }
#oil-detail-content[data-family] .use-chip {
  background: var(--fam-wash);
  color: var(--fam-deep);
  border-color: var(--fam-point);
}
#oil-detail-content[data-family] .oil-fact-label { color: var(--fam-ink); }

/* Post-Card Issue-Nummer als Hauptmotiv */
.post-card .card-media { aspect-ratio: 4 / 3; }
.post-issue {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-family: var(--font-display);
  color: var(--sage-700);
  font-variation-settings: normal;
  font-feature-settings: 'tnum';
  user-select: none;
}
.post-issue-prefix {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--gold-600);
  letter-spacing: 0.02em;
  position: relative;
  top: -0.4em;
}
.post-issue-prefix .ord {
  font-size: 0.7em;
  vertical-align: super;
  text-decoration: underline;
  text-underline-offset: 0.05em;
}
.post-issue-num {
  font-size: clamp(4.5rem, 13vw, 7.8rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-style: italic;
}

/* Kategorie-Tönung, wenig, aber spürbar */
.post-card[data-cat="Rezept"] .card-media {
  background:
    radial-gradient(ellipse 70% 60% at 22% 20%, var(--gold-100), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 88%, #e7d8b0, transparent 60%),
    #f7eed6;
}
.post-card[data-cat="Rezept"] .post-issue { color: var(--gold-700); }
.post-card[data-cat="Rezept"] .post-issue-prefix { color: var(--sage-600); }

.post-card[data-cat="Saison"] .card-media {
  background:
    radial-gradient(ellipse 70% 60% at 22% 20%, #d8c89a, transparent 65%),
    radial-gradient(ellipse 70% 60% at 80% 88%, #e7d4ae, transparent 60%),
    #f0e3c8;
}
.post-card[data-cat="Saison"] .post-issue { color: #6a5024; }
.post-card[data-cat="Saison"] .post-issue-prefix { color: var(--sage-600); }

.post-card[data-cat="Guide"] .card-media {
  background:
    radial-gradient(ellipse 70% 60% at 22% 20%, var(--sage-100), transparent 65%),
    radial-gradient(ellipse 70% 60% at 80% 88%, #d4e1c0, transparent 60%),
    #ebf1de;
}
.post-card[data-cat="Guide"] .post-issue { color: var(--sage-800); }
.post-card[data-cat="Guide"] .post-issue-prefix { color: var(--gold-600); }

/* Featured post: größere, exzentrische Initiale */
.card--featured .post-card-media .post-issue-num,
.card--featured.post-card .post-issue-num { font-size: clamp(5.5rem, 11vw, 9rem); }
@media (min-width: 820px) {
  .card--featured .card-media .post-issue {
    transform: translateY(-8%);
  }
}

.oil-aroma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--ink-700);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.oil-uses { list-style: none; padding: 0; display: grid; gap: 8px; }
.oil-uses li {
  padding-left: 22px;
  position: relative;
  font-size: 0.9rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.oil-uses li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 0;
  color: var(--gold-500);
}

/* ---------- Events / Timeline ---------- */
.event-list { display: grid; gap: var(--space-4); }
.event-card {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.event-card:hover { box-shadow: var(--shadow-md); border-color: var(--ink-200); transform: translateY(-2px); }

.event-date {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 12px;
  background: var(--sage-50);
  color: var(--sage-900);
  border-radius: var(--radius-md);
  border: 1px solid var(--sage-100);
  text-align: center;
}
.event-date .d {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.event-date .m {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-top: 4px;
}

.event-info h3 { font-size: 1.2rem; margin-bottom: 6px; font-weight: 500; }
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-top: 6px;
}
.event-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Feature blocks (alternating editorial) ---------- */
.feature-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature-block--reverse .feature-visual { order: 2; }
.feature-block + .feature-block { margin-top: clamp(3rem, 6vw, 5rem); }

.feature-visual {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 28% 22%, rgba(218,182,90,0.22), transparent 55%),
    radial-gradient(ellipse 70% 60% at 82% 88%, rgba(34,45,28,0.45), transparent 60%),
    linear-gradient(150deg, var(--sage-300) 0%, var(--sage-600) 60%, var(--sage-800) 100%);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.feature-visual > * {
  position: relative;
  z-index: 2;
  font-size: 0;
  width: 0; height: 0;
  visibility: hidden;
}
.feature-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
.feature-visual::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* background-Shorthand, NICHT background-image: die Longhand kennt kein
     no-repeat/Position und wuerde die ganze Deklaration verwerfen. */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 260' fill='none'><g stroke='%23fbf9f4' stroke-linecap='round' opacity='0.55'><path d='M160 250V60' stroke-width='1'/><path d='M160 200C140 188 128 172 132 152C150 162 160 178 160 200Z' fill='%23fbf9f4' fill-opacity='0.16' stroke-width='0.7'/><path d='M160 175C180 168 192 150 188 130C172 142 160 158 160 175Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.7'/><path d='M160 145C140 138 130 122 134 102C152 114 160 128 160 145Z' fill='%23fbf9f4' fill-opacity='0.14' stroke-width='0.7'/><path d='M160 120C176 112 184 96 180 80C168 92 160 106 160 120Z' fill='%23fbf9f4' fill-opacity='0.1' stroke-width='0.7'/><path d='M160 95C150 85 144 70 148 56C158 66 160 78 160 95Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.7'/></g><circle cx='160' cy='52' r='2.4' fill='%23dab65a'/><g opacity='0.3'><path d='M70 70Q60 50 80 38' stroke='%23fbf9f4' stroke-width='0.6' fill='none'/><path d='M250 75Q260 55 244 42' stroke='%23fbf9f4' stroke-width='0.6' fill='none'/></g></svg>") no-repeat center / auto 88%;
  pointer-events: none;
}
.feature-copy h2 { margin-bottom: var(--space-4); }
.feature-copy p { color: var(--ink-700); max-width: 50ch; }
.feature-copy .btn { margin-top: var(--space-5); }

/* ---------- Principles / Stat row ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-6);
}
/* CLS-Schutz Startseite: der Container wird per JS befüllt, ohne reservierte
   Höhe springt das Layout beim Mount (Lighthouse Layout-Shift 0.16). Werte
   liegen knapp unter der real gerenderten Höhe, damit bei kürzeren Texten
   kein Leerraum entsteht. */
.pillars--home { min-height: 180px; }
@media (max-width: 768px) { .pillars--home { min-height: 200px; } }
@media (max-width: 640px) { .pillars--home { min-height: 350px; } }
@media (max-width: 480px) { .pillars--home { min-height: 440px; } }
.pillar {
  display: grid;
  /* Rows nicht strecken, sonst rutschen Headlines in Boxen mit kurzem Text nach unten */
  align-content: start;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--color-line-soft);
}
.pillar:last-child { border-right: 0; }
.pillar-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-600);
  font-style: italic;
}
/* Startseite nutzt h2 (Hierarchie nach h1), andere Seiten h3 (nach h2-Sektionskopf) */
.pillar h2,
.pillar h3 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.pillar p { font-size: 0.9rem; color: var(--ink-500); line-height: 1.55; }

/* ---------- Quiz / Oil Finder ---------- */
/* ---------- Farbnebel-Buehne (Signature-Piece) ----------
   Die ganze Finder-Sektion ist Buehne: das Canvas liegt vollflaechig
   dahinter (multiply laesst Weiss verschwinden), der Finder selbst
   schwebt als Glas-Panel darueber. */
#oil-finder-section {
  position: relative;
  overflow: hidden;
}
#oil-finder-section > .container { position: relative; z-index: 1; }
.mist-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.oil-finder {
  background: rgba(251, 249, 244, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  max-width: 720px;
  margin-inline: auto;
  box-shadow: var(--shadow-md);
}
.oil-finder-head { text-align: center; margin-bottom: var(--space-6); }
.oil-finder-stage {
  min-height: 280px;
}
.oil-finder-progress {
  height: 3px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.oil-finder-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sage-500), var(--gold-400));
  width: 0%;
  transition: width var(--dur-med) var(--ease-out);
}
.quiz-question {
  animation: fadeSlide 420ms var(--ease-out);
}
.quiz-question h3 {
  font-size: var(--fs-2xl);
  text-align: center;
  font-weight: 400;
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.quiz-options {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.quiz-option {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-800);
}
.quiz-option:hover {
  border-color: var(--sage-500);
  background: var(--sage-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.quiz-option-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }

.quiz-result {
  text-align: center;
  animation: fadeSlide 520ms var(--ease-out);
}
.quiz-result h3 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); font-weight: 400; }
.quiz-result-oil {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  background: var(--surface);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius-md);
  margin-block: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--sage-800);
  box-shadow: var(--shadow-sm);
}
.quiz-result-oil-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--sage-100);
  border-radius: 50%;
  font-size: 1.5rem;
}
/* Klickbare Variante (mit slug) */
a.quiz-result-oil--link {
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a.quiz-result-oil--link:hover {
  color: var(--sage-800);
  border-color: var(--sage-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quiz-result-oil-arrow {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--gold-600);
  transition: transform var(--dur-fast) var(--ease-out);
}
a.quiz-result-oil--link:hover .quiz-result-oil-arrow {
  transform: translateX(4px);
}
.quiz-result-secondary {
  color: var(--sage-700);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
.quiz-result-secondary:hover { color: var(--gold-700); }
.quiz-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--ink-500);
  cursor: pointer;
  background: none; border: 0;
}
.quiz-back:hover { color: var(--sage-800); }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}
.testimonial {
  background: var(--surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold-200);
}
.testimonial blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-800);
  letter-spacing: -0.005em;
  font-style: italic;
  margin-bottom: var(--space-5);
}
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-200), var(--gold-200));
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: var(--sage-900);
  font-size: 1.05rem;
  font-weight: 500;
}
.testimonial-name { font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.testimonial-role { font-size: 0.78rem; color: var(--ink-500); }

/* ---------- Banners (CTA sections) ---------- */
.cta-panel {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, var(--sage-700), transparent 55%),
    radial-gradient(ellipse 50% 50% at 85% 85%, var(--gold-600), transparent 55%),
    linear-gradient(135deg, var(--sage-900) 0%, var(--sage-800) 100%);
  color: var(--paper);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-4);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.05) 0%, transparent 25%),
    radial-gradient(circle at 85% 75%, rgba(201, 160, 67, 0.1) 0%, transparent 30%);
}
.cta-panel > * { position: relative; }
.cta-panel-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(218,182,90,0.7);
  margin-inline: auto;
}
.cta-panel h2 { color: var(--paper); font-weight: 300; letter-spacing: -0.025em; }
.cta-panel p { color: rgba(251, 249, 244, 0.8); max-width: 46ch; margin-inline: auto; }
.cta-panel-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* Telegram-Panel als helle Briefkarte: bewusst ANDERS als das dunkle
   CTA-Panel davor, damit die beiden Einladungen nicht denselben Beat
   wiederholen (Kapitel-Choreografie). */
.telegram-panel {
  padding: clamp(2.25rem, 4vw, 3.25rem);
  background:
    radial-gradient(ellipse 75% 85% at 50% 110%, rgba(110, 136, 89, 0.14), transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(233, 213, 160, 0.2), transparent 60%),
    var(--surface);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--space-3);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.telegram-panel::before {
  content: "✦";
  position: absolute;
  top: 22px; left: 26px;
  font-size: 1.1rem;
  color: var(--gold-500);
  opacity: 0.8;
}
.telegram-panel::after {
  content: "✈";
  position: absolute;
  top: -10px; right: -8px;
  font-size: 8rem;
  color: rgba(110, 136, 89, 0.1);
  transform: rotate(-22deg);
  pointer-events: none;
}
.telegram-panel > * { position: relative; z-index: 1; }
.telegram-panel h3 {
  color: var(--color-text);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw + 0.6rem, 1.8rem);
  letter-spacing: -0.015em;
  font-family: var(--font-display);
  font-variation-settings: normal;
}
.telegram-panel p { color: var(--ink-700); max-width: 50ch; margin-inline: auto; }
.telegram-panel .btn {
  background: var(--sage-700);
  color: var(--paper);
  margin-top: 6px;
  align-self: center;
  justify-self: center;
}
.telegram-panel .btn:hover { background: var(--sage-800); color: var(--paper); }
.telegram-panel a:not(.btn) { color: var(--sage-700); text-decoration: underline; }

/* ---------- Notice strips ---------- */
.affiliate-notice {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.65;
}
.affiliate-notice strong { color: var(--ink-900); }

.distributor-notice {
  background: var(--ink-900);
  color: rgba(251,249,244,0.62);
  padding: 16px 24px;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  border-top: 1px solid rgba(218,182,90,0.16);
  position: relative;
}
.distributor-notice::before {
  content: "✦";
  display: inline-block;
  margin-right: 10px;
  color: var(--gold-300);
  font-size: 0.78em;
  vertical-align: 0.1em;
  opacity: 0.65;
}
.distributor-notice strong {
  color: var(--gold-300);
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Notice und Footer fließen als ein dunkler Bodenbereich zusammen. */
.distributor-notice + .site-footer {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(251,249,244,0.06);
}

/* ---------- Form ---------- */
.form {
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; gap: var(--space-5); }
.form-row--two { grid-template-columns: 1fr 1fr; }
.form-field { display: grid; gap: 6px; }
.form-field[hidden] { display: none; }
.form-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-700);
  letter-spacing: 0.01em;
}
.form-field label .req { color: var(--gold-600); margin-left: 2px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-900);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-400); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--sage-500);
  background: var(--surface);
  box-shadow: var(--shadow-focus);
}
.form-field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.55;
  cursor: pointer;
}
.form-check input { margin-top: 3px; width: auto; }
.form-msg {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.9rem;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.ok  { background: #e8f2e3; color: var(--color-success); border: 1px solid #c5dbb8; }
.form-msg.err { background: #fbe8e4; color: var(--color-error); border: 1px solid #f1c6bd; }

/* ---------- About page layout ---------- */
.about-portrait {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-portrait-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 50% at 28% 22%, rgba(218,182,90,0.22), transparent 55%),
    radial-gradient(ellipse 70% 60% at 82% 88%, rgba(34,45,28,0.45), transparent 60%),
    linear-gradient(155deg, var(--sage-400) 0%, var(--sage-700) 55%, var(--sage-900) 100%);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.about-portrait-visual > * {
  position: relative; z-index: 2;
  font-size: 0; width: 0; height: 0; visibility: hidden;
}
.about-portrait-visual::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  opacity: 0.45;
  pointer-events: none;
}
.about-portrait-visual::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* background-Shorthand, NICHT background-image (Longhand kennt keine Position) */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none'><g opacity='0.6' stroke='%23fbf9f4' stroke-linecap='round'><path d='M100 250V40' stroke-width='1'/><path d='M100 200C82 192 72 178 76 160C92 168 100 182 100 200Z' fill='%23fbf9f4' fill-opacity='0.18' stroke-width='0.7'/><path d='M100 175C118 168 128 152 124 134C108 144 100 158 100 175Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.7'/><path d='M100 150C82 142 74 124 78 108C94 118 100 132 100 150Z' fill='%23fbf9f4' fill-opacity='0.14' stroke-width='0.7'/><path d='M100 125C114 116 122 100 118 84C108 95 100 110 100 125Z' fill='%23fbf9f4' fill-opacity='0.1' stroke-width='0.7'/><path d='M100 100C92 92 86 78 90 62C100 72 100 84 100 100Z' fill='%23fbf9f4' fill-opacity='0.12' stroke-width='0.7'/><path d='M100 76C108 68 116 56 110 42C104 50 100 62 100 76Z' fill='%23fbf9f4' fill-opacity='0.1' stroke-width='0.7'/></g><circle cx='100' cy='34' r='2.6' fill='%23dab65a'/></svg>") no-repeat center / auto 88%;
  pointer-events: none;
}
.about-portrait-caption {
  position: absolute;
  bottom: -20px;
  right: -12px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 0.78rem;
  color: var(--ink-700);
  font-style: italic;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  font-weight: 500;
  color: var(--sage-800);
  display: inline-block;
  transform: rotate(-4deg);
  letter-spacing: 0.02em;
}

/* ---------- Blog / Article styles ---------- */
.post-detail { max-width: 760px; margin-inline: auto; padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2rem); }
.post-detail h1 {
  font-size: var(--fs-3xl);
  font-weight: 400;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.post-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
  color: var(--ink-500);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-content { font-size: 1.05rem; line-height: 1.8; color: var(--ink-800); }
.post-content p + p { margin-top: 1.2em; }
.post-content h2 { font-size: 1.8rem; margin: 2em 0 0.6em; font-weight: 400; }
.post-content h3 { font-size: 1.4rem; margin: 1.6em 0 0.5em; font-weight: 500; }
.post-content ul,
.post-content ol { margin: 1em 0 1em 1.5em; }
.post-content li + li { margin-top: 0.35em; }
.post-content blockquote {
  margin: 1.8em 0;
  padding: 1em 0 1em 1.5em;
  border-left: 2px solid var(--sage-400);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-800);
  font-size: 1.25rem;
  line-height: 1.5;
}

/* ---------- Legal pages ---------- */
.legal-content { max-width: 760px; margin-inline: auto; padding: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2rem); }
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 2.5em 0 0.8em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-line);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.legal-content h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin: 1.2em 0 0.4em; font-weight: 600; letter-spacing: 0; font-family: var(--font-body); }
.legal-content p { margin-bottom: 0.9em; font-size: 0.95rem; color: var(--ink-700); line-height: 1.7; }
.legal-content ul { margin: 0.8em 0 1em 1.5em; }
.legal-content li { margin-bottom: 0.3em; font-size: 0.95rem; color: var(--ink-700); line-height: 1.65; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--ink-900);
  color: rgba(251, 249, 244, 0.72);
  padding: clamp(3rem, 5vw, 5rem) 0 var(--space-4);
}
.footer-grid {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.footer-brand .logo { color: var(--paper); }
.footer-brand .logo-text { color: var(--paper); }
.footer-brand .logo-subtitle { color: rgba(251, 249, 244, 0.4); }
.footer-brand p {
  margin-top: var(--space-4);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 38ch;
  color: rgba(251, 249, 244, 0.6);
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; display: grid; gap: 5px; }
.footer-col a {
  color: rgba(251, 249, 244, 0.72);
  font-size: 0.92rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--paper); }
.footer-newsletter p {
  font-size: 0.85rem;
  color: rgba(251, 249, 244, 0.58);
  margin-bottom: var(--space-3);
  line-height: 1.55;
}
.footer-newsletter form {
  display: flex;
  border: 1px solid rgba(251, 249, 244, 0.18);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(251, 249, 244, 0.04);
}
.footer-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  color: var(--paper);
  font-size: 0.88rem;
  font-family: inherit;
}
.footer-newsletter input:focus { outline: 2px solid var(--gold-400); outline-offset: -2px; }
.footer-newsletter input::placeholder { color: rgba(251, 249, 244, 0.4); }
.footer-newsletter button {
  background: var(--gold-400);
  color: var(--ink-900);
  border: 0;
  padding: 0 18px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.footer-newsletter button:hover { background: var(--gold-300); }

.footer-brandpartner {
  max-width: var(--page-max);
  margin: var(--space-4) auto 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}
.footer-brandpartner .yl-bp-logo {
  height: auto;
  width: 200px;
  max-width: 60vw;
  /* SW-Logo auf dunklem Footer aufhellen, damit es lesbar ist */
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: 0.85;
}
.footer-brandpartner .yl-bp-id {
  font-size: 0.78rem;
  color: rgba(251, 249, 244, 0.55);
  line-height: 1.5;
}
.footer-copyright {
  max-width: var(--page-max);
  margin: var(--space-4) auto 0;
  padding: var(--space-4) clamp(1.25rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(251, 249, 244, 0.1);
  text-align: center;
  font-size: 0.78rem;
  color: rgba(251, 249, 244, 0.5);
}
.footer-disclaimer {
  max-width: var(--page-max);
  margin: var(--space-5) auto 0;
  padding: var(--space-4) clamp(1.25rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(251, 249, 244, 0.08);
  font-size: 0.72rem;
  color: rgba(251, 249, 244, 0.35);
  line-height: 1.7;
  text-align: center;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-lg);
  display: none;
  max-width: 720px;
  margin-inline: auto;
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.cookie-banner.show {
  display: block;
  transform: translateY(0);
  opacity: 1;
}
.cookie-inner {
  display: grid;
  gap: var(--space-4);
}
.cookie-inner p {
  font-size: 0.88rem;
  color: var(--ink-700);
  line-height: 1.6;
}
.cookie-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-buttons .btn { flex: 1; min-width: 140px; }

/* ---------- Loading & empty states ---------- */
.loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--ink-400);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.loading::after {
  content: "";
  width: 18px; height: 18px;
  border: 2px solid var(--ink-200);
  border-top-color: var(--sage-600);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--ink-500);
}
.empty-state .icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  opacity: 0.6;
}
.empty-state p { font-size: 1rem; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }

/* Hero-spezifischer orchestrierter Auftritt: Eyebrow → H1 → Lede → Actions → Meta.
   Wrapper wird sichtbar belassen, damit nur die Kinder gestaffelt animieren.
   Der IntersectionObserver feuert nahezu sofort, weil der Hero above-the-fold steht. */
.hero-copy[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.hero-copy > .eyebrow      { transition-delay: 60ms; }
.hero-copy > h1            { transition-delay: 180ms; transition-duration: 0.95s; }
.hero-copy > .lede         { transition-delay: 380ms; }
.hero-copy > .hero-actions { transition-delay: 520ms; }
.hero-copy > .hero-meta    { transition-delay: 660ms; }
.hero-copy.is-visible > *,
.hero-copy[data-reveal].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hero-Headline-Reveal: sanfte Einblendung beim Sichtbarwerden */
.hero-copy > h1 {
  font-variation-settings: normal;
  transition: opacity 0.95s var(--ease-out),
              transform 0.95s var(--ease-out),
              font-variation-settings 1.6s var(--ease-out);
}
.hero-copy.is-visible > h1 {
  font-variation-settings: normal;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { transition: none !important; opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-soft { color: var(--color-text-soft); }
.max-prose { max-width: var(--prose-max); margin-inline: auto; }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip-Link: per Tastatur als erstes Element erreichbar, sonst aus dem Blickfeld.
   Springt zum benannten Hauptbereich (#main), damit die Navigation übersprungen wird. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink-900);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui, var(--font-body));
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}
/* Das Sprungziel hält Abstand zum klebenden Header, damit die Überschrift nach dem
   Sprung sichtbar bleibt. Der Fokus auf der Landmark bekommt einen dezenten Ring als
   kurzes Feedback, dass der Sprung griff (nur bei Tastatur, nicht bei Maus-Fokus). */
main[tabindex] { scroll-margin-top: 88px; }
main[tabindex]:focus { outline: none; }
main[tabindex]:focus-visible { box-shadow: var(--shadow-focus); }

/* Sichtbarkeit / Zustände (ersetzen ehemalige Inline-Styles, CSP-konform) */
.is-hidden { display: none !important; }

/* Spacing-Helfer */
.mt-xl { margin-top: 2.5rem; }

/* Container-Breiten-Varianten (vormals inline max-width) */
.container--form   { max-width: 680px; }
.container--prose  { max-width: 820px; }
.container--narrow { max-width: 860px; }
.container--mid    { max-width: 920px; }
.container--wide   { max-width: 960px; }

/* Eyebrow-Ausrichtungs-Modifier (.eyebrow ist bereits inline-flex) */
.eyebrow--centered { justify-content: center; }
.eyebrow--gold { color: var(--gold-300); justify-content: center; }

/* Smallprint auf dunklen Panels (CTA / Telegram) */
.panel-smallprint {
  font-size: 0.72rem;
  max-width: 52ch;
  margin: 16px auto 0;
}
.panel-smallprint--cta { color: rgba(251, 249, 244, 0.55); }
/* Telegram-Panel ist jetzt hell: Smallprint in ruhigem Tintengrau */
.panel-smallprint--telegram {
  color: var(--ink-500);
  max-width: none;
  margin: 10px 0 0;
}

/* Newsletter-Inline-Form (Blog-CTA) */
.newsletter-inline {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 1.5rem auto 0;
  flex-wrap: wrap;
}
.newsletter-inline-input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
}

/* Über-mich: Portrait + Prosa-Überschrift */
.prose-h2 { margin: 1rem 0 2rem; }
.portrait-wrap { text-align: center; margin-top: 2.5rem; }
.portrait-caption {
  font-size: 0.92rem;
  color: var(--ink-500);
  font-style: italic;
  margin: 0 0 1rem;
}

/* Kontakt: Submit-Button volle Breite, Datensektion ohne Schatten */
.btn--block { justify-self: start; width: 100%; }
.form--flat { box-shadow: none; }

/* Quiz (vormals inline in main.js) */
.quiz-eyebrow-center { display: flex; justify-content: center; margin-bottom: 12px; }
.quiz-result-lead { max-width: 46ch; margin: 16px auto; color: var(--ink-500); }
.quiz-result-note { max-width: 46ch; margin: 0 auto; color: var(--ink-500); font-size: 0.95rem; line-height: 1.6; }
.quiz-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.quiz-result-disclaimer { font-size: 0.72rem; color: var(--ink-400); margin-top: 20px; line-height: 1.5; }

/* Event-Karten-Beschreibung (Startseite) */
.event-card-desc { margin-top: 10px; color: var(--ink-500); font-size: 0.92rem; line-height: 1.6; }

/* Kalender-Legende (Farb-Marker je Typ) */
.cal-legend [data-t="oeleabend"] { color: var(--t-oeleabend); }
.cal-legend [data-t="kraeuter"]  { color: var(--t-kraeuter); }
.cal-legend [data-t="workshop"]  { color: var(--t-workshop); }
.cal-legend [data-t="online"]    { color: var(--t-online); }
.cal-legend .legend-label { color: var(--ink-soft); }

/* Empty-State-Varianten */
.empty-state--flush { margin-top: 0; }
.empty-state--full { grid-column: 1 / -1; }

/* Blog-Detail: Lesebreite */
.post-content--prose { max-width: 68ch; margin: 0 auto; }

/* Container mit echtem Bild: dekorativer Verlauf/SVG/Overlay entfallen, das Bild
   füllt den Kasten randlos. Abgerundete Form + Schatten bleiben (konsistent über
   alle Komponenten). object-fit:cover + object-position (Focus-Point) zoomen das
   Bild bis zum Zielformat und halten den wichtigen Bereich sichtbar. */
.feature-visual:has(.feature-visual-img),
.oil-hero-media:has(.oil-hero-media-img) {
  background: none;
}
.feature-visual:has(.feature-visual-img)::before,
.feature-visual:has(.feature-visual-img)::after,
.oil-hero-media:has(.oil-hero-media-img)::before,
.oil-hero-media:has(.oil-hero-media-img)::after,
.card-media:has(img)::before,
.card-media:has(img)::after {
  display: none;
}
/* Bild füllt den Container exakt aus: das <picture> wird per absoluter Schicht
   über den Container gelegt (inset:0), damit es dessen Maße annimmt statt der
   Eigengröße des Bildes; das <img> deckt es mit object-fit:cover ab. So wird
   jedes Quellformat bis zum Zielformat gezoomt; object-position (= Focus-Point)
   hält den wichtigen Bereich sichtbar.
   Wichtig: Die Container behalten ihre Maße (aspect-ratio bzw. feste Größe) und
   ihr place-items:center für den Fallback-Inhalt; das absolute Bild liegt darüber. */
.feature-visual:has(.feature-visual-img),
.oil-hero-media:has(.oil-hero-media-img),
.card-media:has(.card-media-img),
.post-hero-emoji:has(.post-hero-img) {
  position: relative;
}
/* Öl-Hero sitzt in einem Grid mit align-items:center und wird daher nicht auf
   Zeilenhöhe gestreckt. Da der Bild-Inhalt absolut liegt, fehlt die intrinsische
   Höhe: explizite Breite erzwingen, damit aspect-ratio die Höhe ableitet. */
.oil-hero-media:has(.oil-hero-media-img) {
  width: 100%;
  align-self: stretch;
}
.feature-visual picture,
.oil-hero-media picture,
.card-media picture,
.post-hero-emoji picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  visibility: visible;
  z-index: 1;
}
.feature-visual-img,
.oil-hero-media-img,
.card-media-img,
.post-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  visibility: visible;
}
/* Öl-Hero behält sein 4:5-Verhältnis.
   YL-Produktbilder sind freigestellte Fläschchen auf hellem Grund: statt randlos
   zu füllen (cover) wirken sie besser mittig "eingerahmt" (contain) mit etwas
   Innenabstand und sanftem Hintergrund. */
.oil-hero-media:has(.oil-hero-media-img) {
  background: linear-gradient(160deg, var(--paper-alt, #f4efe5), #ece5d6);
}
/* Das Bild liegt absolut (inset:0 + width/height:100% aus der generischen Regel).
   Für den "eingerahmt schwebenden" Look das picture mit Abstand einrücken. WICHTIG:
   width/height:100% muss auf auto zurückgesetzt werden, sonst überbestimmt es mit
   inset die Größe und das Bild wird verschoben/verzerrt. */
.oil-hero-media:has(.oil-hero-media-img) picture {
  inset: clamp(1.25rem, 4%, 2.25rem);
  width: auto;
  height: auto;
}
.oil-hero-media-img {
  object-fit: contain;
  object-position: center;
}
/* Öl-Karten (Übersicht #oils-grid UND "gleiche Familie"/related auf der Detailseite):
   gleicher "eingerahmt schwebender" contain-Look für die freigestellten Produktbilder.
   .oil-card trifft alle Öl-Karten, aber keine Blog-Karten (.post-card). */
.oil-card .card-media:has(.card-media-img) {
  background: linear-gradient(160deg, var(--paper-alt, #f4efe5), #ece5d6);
}
.oil-card .card-media:has(.card-media-img) picture {
  inset: clamp(0.75rem, 6%, 1.5rem);
  width: auto;
  height: auto;
}
.oil-card .card-media-img {
  object-fit: contain;
  object-position: center;
}
/* Blog-Detail-Hero ist ein runder Avatar */
.post-hero-emoji { overflow: hidden; }
.post-hero-img { border-radius: 50%; }
/* Portrait: eigener Block (kein Overlay-Container), behält normales Fluss-Layout */
.portrait-photo picture { display: block; width: 100%; }
/* Portraitfoto auf Über-mich: nur sichtbar, wenn ein Bild gesetzt wurde */
.portrait-photo:empty { display: none; }
.portrait-photo {
  max-width: 360px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.portrait-photo-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Kontakt-FAQ (vormals inline in render/contact-page.js) */
.faq-item { padding: 1.25rem 1.5rem; box-shadow: none; }
.faq-summary {
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.faq-answer { color: var(--ink-500); margin-top: 1rem; line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-newsletter { grid-column: 1 / -1; margin-top: var(--space-4); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { margin-right: 0; font-size: clamp(2.8rem, 11vw, 4.5rem); }
  /* Explizite Breite gegen CLS: margin-inline auto schaltet das Grid-Stretching
     ab, die Box waere ohne Inhalt 0x0. Ihre heutige Groesse (300x375) entsteht
     erst, wenn JS das Stage-Canvas (intrinsisch 300 breit) einfuegt, und dieser
     Sprung schiebt die ganze Seite nach unten. */
  .hero-visual { width: 300px; max-width: 100%; margin-inline: auto; margin-top: var(--space-6); }
  /* CLS-Schutz: einspaltig steht die hero-copy ueber der Diffuser-Karte, ihre
     Texte kommen per JS. Hoehe knapp unter dem gerenderten Ist reservieren,
     sonst schiebt der Text-Mount die Karte und alles darunter nach unten. */
  .hero-copy { min-height: 600px; }
  .feature-block { grid-template-columns: 1fr; }
  .feature-block--reverse .feature-visual { order: 0; }
  .about-portrait { grid-template-columns: 1fr; }
  .about-portrait-visual { max-width: 420px; margin-inline: auto; }
}

/* Tablet (769-1080px): volle Nav behalten, aber FLIESSEND skalieren statt in
   Stufen. Schrift, Abstaende und Logo skalieren stufenlos mit der Viewport-
   Breite (clamp + vw), damit es bei JEDER Zwischenbreite sauber in eine Zeile
   passt und nichts intern umbricht. Obergrenze 1080px (nicht 1024), weil die
   volle Desktop-Nav knapp ueber 1024px noch nicht passt und sonst dort fuer
   ein paar Pixel umbricht. Hamburger erst unter 768px. */
@media (min-width: 769px) and (max-width: 1080px) {
  .header-inner { gap: clamp(8px, 1.6vw, 20px); padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
  .logo { gap: clamp(7px, 1vw, 12px); }
  .logo-mark { width: clamp(28px, 3.6vw, 36px); height: clamp(28px, 3.6vw, 36px); }
  .logo-text { font-size: clamp(0.98rem, 1.7vw, 1.3rem); }
  .logo-subtitle { font-size: clamp(0.5rem, 0.85vw, 0.6rem); letter-spacing: 0.18em; white-space: nowrap; }
  .nav-links { gap: 0; flex-wrap: nowrap; }
  /* Einzelne Links/Button duerfen NIE intern umbrechen. */
  .nav-links a { padding: 7px clamp(5px, 1vw, 13px); font-size: clamp(0.72rem, 1.15vw, 0.9rem); white-space: nowrap; }
  .nav-links .nav-cta { margin-left: clamp(3px, 0.8vw, 10px); padding: 8px clamp(9px, 1.4vw, 18px); font-size: clamp(0.68rem, 1vw, 0.82rem); white-space: nowrap; }
  .nav-links .nav-cta::before { margin-right: clamp(3px, 0.5vw, 6px); }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 12px; right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open { display: flex; z-index: 82; }
  /* Scrim hinter dem offenen Menue: Inhalt tritt zurueck, ein Tap darauf
     schliesst (Pointer-Handler in main.js). Sitzt unter dem Header (z 80). */
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(26, 32, 23, 0.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nav-links a { padding: 12px 18px; font-size: 0.95rem; text-align: left; }
  .nav-links .nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }
  /* Logo links (margin-right:auto), Hamburger und Such-Icon als Gruppe rechts.
     Das Such-Icon ist das letzte Element und sitzt ganz rechts. */
  .menu-toggle { display: inline-flex; flex-shrink: 0; }

  .hero-meta { flex-direction: column; gap: var(--space-3); }
  .hero-meta strong { font-size: 1.4rem; }
  .event-card { grid-template-columns: 80px 1fr; }
  .event-card .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

  .form-row--two { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }

  .pillar { border-right: 0; border-bottom: 1px solid var(--color-line-soft); padding-bottom: var(--space-4); }
  .pillar:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  /* Kompakter Logo-Untertitel: passt neben Hamburger + Lupe in 390px */
  .logo-subtitle { font-size: 0.53rem; letter-spacing: 0.11em; }
  .logo-text { font-size: 1.22rem; }
  .header-inner { gap: var(--space-3); }

  /* CLS-Schutz: schmaler = mehr Zeilenumbrueche, siehe Kommentar bei 900px */
  .hero-copy { min-height: 680px; }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .hero h1 { font-size: 2.5rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .cookie-buttons { flex-direction: column; }
}

/* CLS-Schutz: sehr schmale Geraete brauchen fuer die hero-copy noch mehr
   reservierten Platz (mehr Zeilenumbrueche). Muss nach dem 480px-Block
   stehen, damit er dessen 680px ueberschreibt. */
@media (max-width: 400px) {
  .hero-copy { min-height: 740px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cookie-banner,
  .distributor-notice, .hero-actions, .btn,
  .cta-panel, .telegram-panel { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   Kalender-Ansicht (Veranstaltungen)
   ============================================================ */
.events-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.cal-month {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg, 18px);
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(28,25,21,.03);
}
.cal-month-head h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 1rem;
  text-align: center;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background .15s, transform .15s;
  position: relative;
}
.cal-cell .cal-day { line-height: 1; }
.cal-cell--empty { visibility: hidden; }
.cal-cell--past  { color: var(--color-text-muted); }
.cal-cell--today {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}
.cal-cell--event {
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}
.cal-cell--event:hover {
  background: var(--gold-200);
  transform: translateY(-1px);
}
.cal-cell--event.cal-cell--today {
  background: var(--color-primary);
  color: var(--surface);
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.cal-cell--event.cal-cell--today .cal-dot { background: var(--gold-200); }
@media (max-width: 560px) {
  .events-calendar { grid-template-columns: 1fr; }
  .cal-cell { font-size: 0.82rem; }
}

/* ============================================================
   UX v3, Detail-Seiten (Blog & Öl) · Filter · Featured-Post
   April 2026
   ============================================================ */

/* ---------- Reading-Progress-Bar (fixed, oben) ---------- */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-400), var(--sage-500));
  z-index: 200;
  transition: width 90ms linear;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(176, 136, 58, 0.25);
}

/* ---------- Detail-Topbar (Breadcrumb) ----------
   Breite = Textspalte von .page-header .container (50rem abzüglich
   Innenabstand), damit der Breadcrumb auf Detailseiten bei jeder
   Viewport-Breite exakt an derselben Stelle beginnt wie der
   page-breadcrumb im Seitenkopf. */
.detail-top {
  width: min(100%, calc(50rem - 2 * clamp(1.25rem, 3vw, 2.5rem)));
  margin: 0 auto 1.75rem;
  padding: 0 0 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-line-soft);
}
.detail-breadcrumb,
.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-400);
  letter-spacing: 0.02em;
  min-width: 0;
}
.detail-breadcrumb a,
.page-breadcrumb a { color: var(--ink-500); }
.detail-breadcrumb a:hover,
.page-breadcrumb a:hover { color: var(--sage-700); }
.detail-breadcrumb .crumb-sep,
.page-breadcrumb .crumb-sep { opacity: 0.5; }
.detail-breadcrumb .crumb-current,
.page-breadcrumb .crumb-current {
  color: var(--ink-700);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Breadcrumb im Seitenkopf der Unterseiten: linksbündig an der
   Inhaltsspalte, wie der Breadcrumb der Detail-Topbar. */
.page-header .page-breadcrumb {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Post Hero (Blog-Detail) ---------- */
.post-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem 0 2.25rem;
}
.post-hero-emoji {
  display: inline-grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--sage-100), transparent 70%),
    linear-gradient(135deg, var(--sage-50) 0%, var(--gold-50) 100%);
  border: 1px solid var(--color-line-soft);
  font-size: 2.4rem;
  margin: 0 auto 1.5rem;
  box-shadow: var(--shadow-sm);
}
.post-hero-eyebrow {
  display: inline-flex;
  margin-bottom: 0.5rem;
}
.post-hero h1 {
  font-size: clamp(2rem, 2.6vw + 1.2rem, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0.25rem 0 0.9rem;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.post-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
  justify-content: center;
}
.post-meta-row .dot { opacity: 0.5; }
.post-meta-row time { font-feature-settings: 'tnum'; }
.post-meta-row .reading-time::before { content: "⏱ "; margin-right: 2px; font-size: 0.9em; }

/* ---------- Lede (Intro-Absatz) ---------- */
.post-content .lede,
.post-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink-800);
  margin: 0 0 1.75rem;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* ---------- Share-Zeile ---------- */
.post-share {
  max-width: 68ch;
  margin: 2.75rem auto 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.post-share-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.share-buttons {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  color: var(--ink-700);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.share-btn:hover {
  background: var(--sage-50);
  border-color: var(--sage-200);
  color: var(--sage-800);
}
.share-btn--success {
  background: var(--sage-100);
  border-color: var(--sage-300);
  color: var(--sage-800);
}

/* ---------- Related (Weiter im Journal · Verwandte Öle) ---------- */
.related-block {
  max-width: 1080px;
  margin: 2.5rem auto 0;
}
.related-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-line-soft);
}
.related-block-head h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.015em;
}
.related-block-head a {
  font-size: 0.82rem;
  color: var(--sage-700);
  white-space: nowrap;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ---------- Öl-Detail Hero ---------- */
.oil-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 2.5rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.oil-hero-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 30% 30%, var(--sage-100), transparent 55%),
    radial-gradient(ellipse at 80% 80%, var(--gold-100), transparent 60%),
    linear-gradient(140deg, var(--sage-50), var(--paper-alt));
  border: 1px solid var(--color-line-soft);
  display: grid;
  place-items: center;
  font-size: 5.5rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.oil-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.45), transparent 55%);
  pointer-events: none;
}
.oil-hero-copy .eyebrow { margin-bottom: 0.5rem; }
.oil-hero-copy h1 {
  font-size: clamp(2rem, 2.4vw + 1.3rem, 3.2rem);
  font-weight: 400;
  margin: 0.25rem 0 0.4rem;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.oil-hero-botanical {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-500);
  margin: 0 0 1rem;
}
.oil-hero-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
}
.oil-hero-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ---------- Quick-Facts Info-Panel ---------- */
.oil-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--paper-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line-soft);
  margin: 2.5rem auto;
  max-width: 860px;
}
.oil-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.oil-fact-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-700);
}
.oil-fact-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-800);
  line-height: 1.3;
  word-wrap: break-word;
}

/* ---------- Detail-Sektionen ---------- */
/* Detail-Deep-Links (/oele/<slug>, /journal/<slug>) starten im Detail-Zustand:
   alles, was nur zur Listenansicht gehoert, bleibt von Anfang an unsichtbar. */
.is-detail-page [data-list-only] { display: none; }

/* ---------- Kernuebergang: Karte entfaltet sich zum Oel-Profil ----------
   Seitenwechsel als weicher Wechsel statt hartem Weiss (View Transitions,
   progressive Enhancement). Der EINE koerperliche Uebergang der Seite:
   das Oel-Bild oeffnet sich wie ein Tropfen von unten (clip-path-Kreis).
   Alle anderen Uebergaenge bleiben hoeflich (kurzer Crossfade). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.22s; }
::view-transition-new(root) { animation-duration: 0.22s; }

.is-detail-page .oil-hero-media {
  animation: oilUnfold 0.75s var(--ease-out) 0.05s both;
}
@keyframes oilUnfold {
  from { clip-path: circle(9% at 50% 86%); }
  to   { clip-path: circle(142% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .is-detail-page .oil-hero-media { animation: none; }
}

.detail-section {
  max-width: 820px;
  margin: 3rem auto;
}
.detail-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-line-soft);
}
.detail-section-head .eyebrow { margin: 0; }
.detail-section-head h2 {
  font-size: 1.55rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.015em;
}

/* ---------- Tipps als nummerierte Cards ---------- */
.tip-cards {
  display: grid;
  gap: 0.75rem;
}
.tip-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.tip-card:hover {
  border-color: var(--sage-200);
  background: var(--sage-50);
}
.tip-num {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-800);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
}
.tip-text {
  color: var(--ink-700);
  line-height: 1.6;
  font-size: 0.98rem;
  padding-top: 5px;
}

/* ---------- Anwendungen als Chips ---------- */
.use-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.use-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--sage-200);
  background: var(--sage-50);
  color: var(--sage-800);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
}
.use-chip::before {
  content: "✦";
  color: var(--gold-500);
  font-size: 0.9em;
}

/* ---------- Blends-With Pills ---------- */
.blend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.blend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--gold-200);
  background: var(--gold-50);
  border-radius: var(--radius-pill);
  color: var(--gold-700);
  font-size: 0.85rem;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.blend-pill:hover {
  background: var(--gold-100);
  border-color: var(--gold-300);
  transform: translateY(-1px);
  color: var(--gold-700);
}

/* ---------- Filter-Tabs (Journal & Öle) ---------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 2.5rem;
}
.filter-tab {
  padding: 8px 18px;
  border: 1px solid var(--color-line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.filter-tab:hover {
  border-color: var(--sage-300);
  color: var(--sage-800);
}
.filter-tab.is-active {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--paper);
}
.filter-count {
  margin-left: 6px;
  opacity: 0.7;
  font-size: 0.82em;
  font-feature-settings: 'tnum';
}

/* ---------- Featured-Post (im Journal-Grid) ---------- */
.card--featured {
  grid-column: 1 / -1;
  position: relative;
}
.card--featured::before {
  content: "Neuester Eintrag";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--ink-900);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
@media (min-width: 820px) {
  .card--featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  .card--featured .card-media {
    aspect-ratio: auto;
    min-height: 320px;
    font-size: 4.5rem;
  }
  .card--featured .card-body {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    justify-content: center;
    gap: var(--space-4);
  }
  .card--featured .card-title { font-size: clamp(1.55rem, 1.2vw + 1.2rem, 2.1rem); }
  .card--featured .card-text { font-size: 1.02rem; line-height: 1.7; }
}

/* ---------- Responsive (Detail- & List-Komponenten) ---------- */
@media (max-width: 820px) {
  .oil-hero { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .oil-hero-media { max-width: 260px; margin: 0 auto; aspect-ratio: 1 / 1; font-size: 4.2rem; }
  /* Mit echtem (hohem) Produktbild: höhere Box + mehr Breite, damit das Fläschchen
     vollständig (contain) und in guter Größe sichtbar ist statt winzig im 1:1-Quadrat. */
  .oil-hero-media:has(.oil-hero-media-img) { max-width: 320px; aspect-ratio: 4 / 5; }
  .oil-hero-desc { margin-inline: auto; }
  .oil-hero-actions { justify-content: center; }
  .post-share { flex-direction: column; align-items: stretch; text-align: center; }
  .post-share .share-buttons { justify-content: center; }
  .related-block-head { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .post-hero h1 { font-size: 2rem; }
  .post-meta-row { gap: 0.7rem; font-size: 0.76rem; }
  .post-content .lede,
  .post-lede { font-size: 1.12rem; }
  .oil-facts { gap: 1rem; padding: 1.25rem; }
  .tip-card { grid-template-columns: 36px 1fr; gap: 0.75rem; padding: 0.85rem; }
  .tip-text { font-size: 0.94rem; }
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 7px 14px; font-size: 0.8rem; }
}

/* ============================================================
   POLISH PASS · Atelier Botanique (April 2026)
   Additive: vellum grain · dividers · drop caps · footer atmosphere
   ============================================================ */

/* Vellum-Grain · global tactility (sub-pixel paper noise) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.04; }
}

/* Section divider · sage hairlines mit goldenem Mark */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  max-width: 360px;
  margin: clamp(0.5rem, 2vw, 1.5rem) auto;
  padding-inline: 1.25rem;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sage-300) 28%, var(--sage-300) 72%, transparent);
  opacity: 0.6;
}
.section-divider-mark {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-500);
  font-variation-settings: normal;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
}

/* Drop-Cap · erste Zeile editorial */
.post-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 300;
  font-style: italic;
  line-height: 0.86;
  float: left;
  margin: 0.08em 0.18em -0.05em 0;
  color: var(--sage-700);
  font-variation-settings: normal;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  letter-spacing: -0.025em;
}
.post-content > .post-lede + p::first-letter,
.post-content > .lede + p::first-letter {
  /* falls Lede vor erstem Absatz steht: Drop-Cap auf den Absatz nach Lede */
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 300;
  font-style: italic;
  line-height: 0.86;
  float: left;
  margin: 0.08em 0.18em -0.05em 0;
  color: var(--sage-700);
  font-variation-settings: normal;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  letter-spacing: -0.025em;
}
@media (max-width: 540px) {
  .post-content > p:first-of-type::first-letter,
  .post-content > .post-lede + p::first-letter,
  .post-content > .lede + p::first-letter { font-size: 3.2rem; }
}

/* Newsletter · refined Atelier-Card */
.footer-newsletter form {
  border-color: rgba(218, 182, 90, 0.32);
  background: rgba(218, 182, 90, 0.045);
}
.footer-newsletter form:focus-within {
  border-color: rgba(218, 182, 90, 0.55);
  background: rgba(218, 182, 90, 0.08);
}
.footer-newsletter h4 {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
}
.footer-newsletter h4::after {
  content: "n°";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-300);
  opacity: 0.75;
  font-variation-settings: normal;
}

/* Footer · botanische Constellation als Backdrop */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 480' fill='none' preserveAspectRatio='xMidYMin slice'><g opacity='0.07' stroke='%23dab65a' stroke-linecap='round'><path d='M704 26V322' stroke-width='0.7'/><path d='M704 254C684 244 672 226 676 206C694 216 704 232 704 254Z' fill='%23dab65a' fill-opacity='0.22' stroke-width='0.4'/><path d='M704 220C726 210 738 192 734 172C718 184 704 202 704 220Z' fill='%23dab65a' fill-opacity='0.18' stroke-width='0.4'/><path d='M704 188C688 178 680 162 684 142C700 154 704 170 704 188Z' fill='%23dab65a' fill-opacity='0.2' stroke-width='0.4'/><path d='M704 158C720 148 728 132 724 114C710 124 704 138 704 158Z' fill='%23dab65a' fill-opacity='0.14' stroke-width='0.4'/><path d='M704 126C694 116 686 100 690 82C702 92 704 108 704 126Z' fill='%23dab65a' fill-opacity='0.18' stroke-width='0.4'/><circle cx='704' cy='26' r='2.4' fill='%23dab65a' fill-opacity='0.6'/></g><g opacity='0.05' stroke='%23fbf9f4' stroke-linecap='round'><path d='M118 130V412' stroke-width='0.7'/><path d='M118 354C98 344 86 328 90 308C108 318 118 332 118 354Z' fill='%23fbf9f4' fill-opacity='0.1' stroke-width='0.4'/><path d='M118 320C140 310 152 294 148 274C132 286 118 302 118 320Z' fill='%23fbf9f4' fill-opacity='0.07' stroke-width='0.4'/><path d='M118 290C102 280 94 264 98 246C114 256 118 270 118 290Z' fill='%23fbf9f4' fill-opacity='0.08' stroke-width='0.4'/><path d='M118 258C134 248 142 234 138 216C124 226 118 240 118 258Z' fill='%23fbf9f4' fill-opacity='0.06' stroke-width='0.4'/><path d='M118 228C110 220 104 204 108 188C118 196 118 212 118 228Z' fill='%23fbf9f4' fill-opacity='0.07' stroke-width='0.4'/></g><g opacity='0.6' fill='%23dab65a'><circle cx='400' cy='84' r='0.9' fill-opacity='0.5'/><circle cx='280' cy='420' r='0.9' fill-opacity='0.45'/><circle cx='580' cy='402' r='0.7' fill-opacity='0.4'/><circle cx='220' cy='62' r='0.6' fill-opacity='0.4'/><circle cx='620' cy='180' r='0.7' fill-opacity='0.45'/></g></svg>");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }

/* Cookie-Banner · subtiler Ornament-Glyph + warm gradient */
.cookie-banner {
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, var(--gold-50), transparent 60%),
    var(--surface);
}
.cookie-banner::before {
  content: "✦";
  position: absolute;
  top: 14px;
  right: 18px;
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 0.92rem;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* Page-Header · feine goldene Hairline unter dem Heading-Block */
.page-header > .container::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: clamp(1.25rem, 2vw, 1.75rem) auto 0;
  background: var(--gold-400);
  opacity: 0.5;
}

/* Distributor-Notice · symmetrisches ✦ rechts (das ::before liegt links) */
.distributor-notice::after {
  content: "✦";
  display: inline-block;
  margin-left: 10px;
  color: var(--gold-300);
  font-size: 0.78em;
  vertical-align: 0.1em;
  opacity: 0.65;
}

/* ============================================================
   PREVIEW-MODUS · GPU-Schonung
   In der Live-Preview im Admin sind Endlos-Animationen, Grain-Overlays
   und schwere Backdrop-Filter unnötig. Dort wird hoch-frequent re-gerendert,
   und ohne diese Sparmaßnahme kann der Compositor (Firefox-GPU-Helper) den
   Laptop ausreizen.
   ============================================================ */
.preview-mode body::after { display: none; }
.preview-mode .hero-badge-dot {
  animation: none !important;
  box-shadow: 0 0 0 4px rgba(110, 136, 89, 0.18);
}
.preview-mode .hero-visual-meta-blend > span.is-active { animation: none !important; }
.preview-mode *,
.preview-mode *::before,
.preview-mode *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 80ms !important;
  scroll-behavior: auto !important;
}
.preview-mode [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
.preview-mode .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* In-Place-Edit · Hover-Outline + Edit-State */
.preview-mode [data-edit-source] {
  cursor: text;
  border-radius: 3px;
  transition: outline-color 100ms ease, background-color 100ms ease;
  outline: 1px dashed transparent;
  outline-offset: 3px;
}
.preview-mode [data-edit-source]:hover {
  outline-color: rgba(218, 182, 90, 0.55);
  background-color: rgba(218, 182, 90, 0.06);
}
.preview-mode [data-edit-source]:focus {
  outline: 2px solid var(--gold-400, #c9a043);
  outline-offset: 3px;
  background-color: rgba(218, 182, 90, 0.08);
}
/* Header / Footer / Aside / Banner: garantiert nicht editierbar */
.preview-mode header [data-edit-source],
.preview-mode footer [data-edit-source],
.preview-mode aside.distributor-notice [data-edit-source],
.preview-mode .cookie-banner [data-edit-source] {
  outline: none !important;
  background: none !important;
  cursor: default;
  pointer-events: auto;
}

/* Header / Footer / Banner-Links in Preview-Mode deaktivieren, der User soll
   nicht durch versehentliches Klicken die Preview-Seite wegnavigieren */
.preview-mode header a,
.preview-mode header button,
.preview-mode footer a,
.preview-mode footer button,
.preview-mode aside.distributor-notice a,
.preview-mode .cookie-banner {
  pointer-events: none !important;
  cursor: default;
}

/* ============================================================
   BEGEGNUNGEN / TERMINE, Hero-CTA · Tabs · Kalender
   ============================================================ */

:root {
  --t-oeleabend: #b0883a;
  --t-kraeuter:  #6e8859;
  --t-workshop:  #8a4a22;
  --t-online:    #6b4a7d;
  --ink-soft:    var(--ink-500);
  --ink-mute:    var(--ink-400);
  --line-soft:   var(--ink-100);
}

/* --- Hero-CTA --- */
.events-hero-cta {
  padding: 48px clamp(20px, 3vw, 40px) 24px;
}
.events-hero-cta > .container {
  padding: 36px 36px 32px;
  background:
    radial-gradient(ellipse 70% 50% at 18% 30%, rgba(218,182,90,0.18), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 90%, rgba(110,136,89,0.14), transparent 60%),
    var(--paper);
  border-radius: 16px;
  text-align: center;
}
.events-hero-cta .mh-eyebrow {
  display: inline-flex;
  gap: 0.7em;
  align-items: center;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.events-hero-cta .mh-eyebrow::before,
.events-hero-cta .mh-eyebrow::after {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.55;
}
.events-hero-cta h2 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
}
.events-hero-cta h2 em { font-style: italic; color: var(--sage-700); }
.events-hero-cta p.desc {
  color: var(--ink-500);
  max-width: 55ch;
  margin: 0 auto 6px;
}
.events-hero-cta p.desc em {
  font-style: italic;
  color: var(--sage-700);
}
/* Datum, Uhrzeit, Ort: abgesetzt vom Teaser, jede Angabe in eigener Zeile. */
.events-hero-cta p.desc .ev-hero-meta {
  display: block;
  margin-top: 0.85em;
  line-height: 1.55;
}
.events-hero-cta p.desc .ev-hero-meta-line {
  display: block;
}
.btn.btn--sage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  background: var(--sage-700);
  color: var(--paper);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  margin-top: 10px;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 14px -4px rgba(50, 66, 42, 0.4);
  cursor: pointer;
  border: 0;
}
.btn.btn--sage:hover { background: var(--sage-800); transform: translateY(-1px); }
.events-hero-cta p.seats {
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.78rem;
  color: var(--ink-400);
  margin: 16px 0 0;
}

/* --- Tabs + Event-Liste --- */
.events-tabs-section {
  padding: 48px clamp(20px, 3vw, 40px) 24px;
}
.ev-section-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 20px;
}
.events-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--paper-alt);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  margin: 0 0 20px;
  width: fit-content;
}
.events-tabs .tab {
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.85rem;
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.events-tabs .tab:hover { color: var(--ink-900); }
.events-tabs .tab.is-active {
  background: var(--ink-900);
  color: var(--paper);
}
.events-tabs .badge-count {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: var(--paper-deep);
  color: var(--ink-500);
}
.events-tabs .tab.is-active .badge-count {
  background: rgba(255,255,255,0.18);
  color: var(--paper);
}

/* Event-Cards (ev-list) */
.ev-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ev {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  transition: box-shadow 180ms ease, border-color 180ms ease;
  overflow: hidden;
}
.ev:hover {
  box-shadow: 0 10px 28px -18px rgba(50, 66, 42, 0.25);
  border-color: var(--ink-200);
}
.ev[open] {
  border-color: var(--sage-300);
  box-shadow: 0 14px 36px -22px rgba(50, 66, 42, 0.3);
}
.ev > summary.ev-head {
  display: grid;
  grid-template-columns: 92px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 22px 22px 22px 26px;
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease;
}
.ev > summary.ev-head::-webkit-details-marker { display: none; }
.ev > summary.ev-head:hover { background: var(--paper-alt); }
.ev-toggle {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--ink-300);
  transition: transform 220ms var(--ease-out), color 160ms ease;
}
.ev-toggle::before,
.ev-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 220ms var(--ease-out);
}
.ev-toggle::before { width: 10px; height: 1px; transform: translate(-50%, -50%); }
.ev-toggle::after  { width: 1px; height: 10px; transform: translate(-50%, -50%); }
.ev > summary.ev-head:hover .ev-toggle { color: var(--ink-500); }
.ev[open] .ev-toggle { color: var(--sage-700); transform: rotate(180deg); }
.ev[open] .ev-toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.ev-body {
  padding: 4px 26px 26px 142px;
  border-top: 1px solid var(--ink-100);
  margin-top: 0;
  animation: evBodyIn 280ms var(--ease-out);
}
.ev-desc {
  margin: 18px 0 0;
  color: var(--ink-700);
  font-size: 0.96rem;
  line-height: 1.65;
  max-width: 62ch;
}
.ev-facts {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ev-fact {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.85rem;
  color: var(--ink-700);
}
.ev-fact-label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
}
.ev-actions {
  margin-top: 22px;
}
@keyframes evBodyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .ev > summary.ev-head {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "date info toggle"
      "cta  cta  cta";
    gap: 14px 12px;
    padding: 18px;
  }
  .ev > summary.ev-head .ev-date   { grid-area: date; }
  .ev > summary.ev-head .ev-info   { grid-area: info; }
  .ev > summary.ev-head .ev-toggle { grid-area: toggle; align-self: center; }
  .ev > summary.ev-head .ev-cta    { grid-area: cta; justify-content: center; }
  .ev-body { padding: 4px 18px 22px 18px; }
}
.ev-date {
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  padding: 10px;
  background: var(--sage-100);
  border-radius: 12px;
  text-align: center;
}
.ev-date .d {
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--sage-800);
  letter-spacing: -0.02em;
}
.ev-date .m {
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-top: 6px;
}
.ev-info { min-width: 0; }
.ev-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ev-type[data-t="oeleabend"] { background: rgba(176,136,58,0.14);  color: var(--gold-700);    border: 1px solid rgba(176,136,58,0.32); }
.ev-type[data-t="kraeuter"]  { background: rgba(110,136,89,0.14);  color: var(--sage-700);    border: 1px solid rgba(110,136,89,0.32); }
.ev-type[data-t="workshop"]  { background: rgba(138,74,34,0.10);   color: var(--t-workshop);  border: 1px solid rgba(138,74,34,0.28); }
.ev-type[data-t="online"]    { background: rgba(107,74,125,0.10);  color: var(--t-online);    border: 1px solid rgba(107,74,125,0.28); }
.ev-info h3 {
  font-size: 1.18rem;
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.ev-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.8rem;
  color: var(--ink-500);
}
.ev-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}
.ev-cta:hover { background: var(--paper-alt); transform: translateX(2px); }

/* --- Kalender-Sektion --- */
.events-cal-section {
  padding: 48px clamp(20px, 3vw, 40px) 48px;
}
.events-cal-section > .container .cal {
  max-width: 540px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px -18px rgba(50, 66, 42, 0.14);
}
.cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-head h3 {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.008em;
  margin: 0;
}
.cal-nav {
  display: flex;
  gap: 6px;
}
.cal-nav button {
  width: 28px; height: 28px;
  border: 1px solid var(--ink-200);
  background: var(--paper-alt);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-500);
  padding: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.cal-nav button:hover {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.78rem;
}
.cal-grid .wd {
  text-align: center;
  color: var(--ink-400);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 0 6px;
}
.cal-day {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink-900);
  position: relative;
  font-size: 0.86rem;
  font-feature-settings: 'tnum';
  transition: transform 120ms ease, background 120ms ease;
}
.cal-day.empty { color: var(--ink-400); opacity: 0.25; }
.cal-day.has-ev {
  cursor: pointer;
  font-weight: 500;
  padding-bottom: 8px;
}
.cal-day.has-ev .dot {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
}
.cal-day.has-ev:hover { transform: translateY(-1px); }

.cal-day[data-t="oeleabend"]       { background: rgba(176, 136, 58, 0.12); }
.cal-day[data-t="oeleabend"]:hover { background: rgba(176, 136, 58, 0.20); }
.cal-day[data-t="oeleabend"] .dot  { background: var(--t-oeleabend); }

.cal-day[data-t="kraeuter"]        { background: rgba(110, 136, 89, 0.14); }
.cal-day[data-t="kraeuter"]:hover  { background: rgba(110, 136, 89, 0.22); }
.cal-day[data-t="kraeuter"] .dot   { background: var(--t-kraeuter); }

.cal-day[data-t="workshop"]        { background: rgba(138, 74, 34, 0.10); }
.cal-day[data-t="workshop"]:hover  { background: rgba(138, 74, 34, 0.18); }
.cal-day[data-t="workshop"] .dot   { background: var(--t-workshop); }

.cal-day[data-t="online"]          { background: rgba(107, 74, 125, 0.10); }
.cal-day[data-t="online"]:hover    { background: rgba(107, 74, 125, 0.18); }
.cal-day[data-t="online"] .dot     { background: var(--t-online); }

.cal-day.today {
  outline: 2px solid var(--gold-500);
  outline-offset: -2px;
}
.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
  font-family: var(--font-ui, -apple-system, sans-serif);
  font-size: 0.74rem;
  color: var(--ink-500);
}
.cal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cal-legend .legend-marker {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  position: relative;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.cal-legend .legend-marker::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .events-hero-cta > .container { padding: 32px 24px 28px; }
  .ev { grid-template-columns: 64px 1fr; }
  .ev .ev-cta { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
}

/* ============================================================
   Dauerhafte Schmetterlinge im Diffuser-Bereich (.hero-visual)
   Layer liegt hinter Text/Badge (z-index 2), Falter werden per JS
   (diffuser-butterflies.js) ueber transform/opacity bewegt.
   ============================================================ */
.diffuser-flies {
  position: absolute;
  inset: 0;
  z-index: 1;            /* unter .hero-visual-meta (z-index 2) und .hero-badge */
  pointer-events: none;
  overflow: hidden;
}
.diffuser-fly {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}
.diffuser-fly svg { display: block; overflow: visible; }
.diffuser-fly .bfly-wingL,
.diffuser-fly .bfly-wingR { transform-box: fill-box; transform-origin: right center; }
.diffuser-fly .bfly-wingR { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .diffuser-fly .bfly-wingL { animation: diffuserFlapL 220ms ease-in-out infinite; }
  .diffuser-fly .bfly-wingR { animation: diffuserFlapR 220ms ease-in-out infinite; }
}
@keyframes diffuserFlapL { 0%, 100% { transform: rotateY(8deg); } 50% { transform: rotateY(64deg); } }
@keyframes diffuserFlapR { 0%, 100% { transform: rotateY(-8deg); } 50% { transform: rotateY(-64deg); } }

/* ============================================================
   Intro-Animation (wachsende Pflanze + Schmetterlinge)
   Einmal pro Session auf der Startseite. Markup wird von js/intro.js
   injiziert (nicht im Roh-HTML, daher SEO/GEO-neutral). No-motion-first:
   Bewegung nur bei prefers-reduced-motion: no-preference.
   ============================================================ */

/* FOUC-Deckschicht: Wird von intro.js via html.intro-armed gesetzt, bevor das
   echte Overlay steht. Liegt in der externen (CSP-konformen) style.css, kein
   Inline-Style noetig. Nur aktiv, wenn Bewegung erwuenscht ist. */
@media (prefers-reduced-motion: no-preference) {
  html.intro-armed body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1990;
    background:
      radial-gradient(ellipse 90% 90% at 50% 45%, rgba(34, 45, 28, 0.85), rgba(21, 19, 15, 0.96));
    pointer-events: none;
  }
}

/* Overlay traegt nur Pflanze + Schmetterlinge und ist transparent. Der dunkle
   Schleier wuerde sonst den Blur-Fade ueberdecken. Es fadet trotzdem mit (fuer
   die Pflanze/Falter), aber der sichtbare Hintergrund-Effekt liegt am Blur-Layer. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 4000ms var(--ease-out);
}
.intro-overlay.is-leaving { opacity: 0; pointer-events: none; }
/* Aktives Wegklicken/Tippen: sofort raus (kurzer Fade statt langem Auto-Ausblenden). */
.intro-overlay.is-fast { transition-duration: 220ms; }

/* Eigenstaendiges Body-Kind (kein Kind des Overlays), damit kein fadender
   Vorfahre den "backdrop root" zerstoert. Traegt Blur UND Schleier zusammen und
   fadet als Einheit ueber die eigene Opacity (Chrome interpoliert backdrop-filter
   selbst nicht, opacity-Fade des ganzen Layers funktioniert dagegen sauber). */
.intro-blur {
  position: fixed;
  inset: 0;
  z-index: 1999;
  opacity: 1;
  transition: opacity 4000ms var(--ease-out);
  /* Schleier (CI-Sage), auch Fallback wenn backdrop-filter fehlt. */
  background:
    radial-gradient(ellipse 90% 90% at 50% 45%, rgba(34, 45, 28, 0.78), rgba(21, 19, 15, 0.94));
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  .intro-blur {
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    /* Mit Blur darf der Schleier etwas transparenter sein. */
    background:
      radial-gradient(ellipse 90% 90% at 50% 45%, rgba(34, 45, 28, 0.6), rgba(21, 19, 15, 0.82));
  }
}
.intro-blur.is-leaving { opacity: 0; }
.intro-blur.is-fast { transition-duration: 220ms; }

.intro-fly {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.intro-plant { width: 150px; }
.intro-plant-svg { width: 100%; height: auto; overflow: visible; display: block; }
.intro-wordmark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  margin-top: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
}

/* Pflanzen-Bestandteile, Stil der vorhandenen SVGs. */
.intro-stem {
  stroke: var(--paper);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
  opacity: 0.92;
}
.intro-leaf {
  fill: var(--paper);
  opacity: 0;
  transform-box: view-box;   /* WICHTIG: Drehpunkt im SVG-System, sitzt am Staengel */
  transform: scale(0);
}
.intro-bloom {
  fill: var(--gold-300);
  opacity: 0;
  transform-box: view-box;
  transform: scale(0);
}

/* Schmetterling: Position/Rotation setzt JS via transform; nur der Fluegelschlag
   ist CSS. will-change nur auf den wenigen bewegten Faltern. */
.intro-butterfly {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}
.intro-butterfly svg { display: block; overflow: visible; }
.intro-butterfly .bfly-wingL, .intro-butterfly .bfly-wingR { transform-box: fill-box; transform-origin: right center; }
.intro-butterfly .bfly-wingR { transform-origin: left center; }

/* Bewegung NUR bei no-preference (no-motion-first). */
@media (prefers-reduced-motion: no-preference) {
  .intro-overlay.is-playing .intro-stem {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: introDraw 1.8s linear forwards;
  }
  .intro-overlay.is-playing .intro-leaf {
    animation: introLeafPop 0.55s cubic-bezier(0.34, 1.25, 0.5, 1) both;
    animation-delay: var(--d);
  }
  .intro-overlay.is-playing .intro-bloom {
    animation: introBloomPop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both;
    animation-delay: var(--d);
  }
  .intro-overlay.is-playing .intro-wordmark {
    animation: introWordIn 1s var(--ease-out) forwards;
    animation-delay: var(--word-delay);
  }
  .intro-overlay.is-playing .intro-butterfly .bfly-wingL { animation: introFlapL var(--wing) ease-in-out infinite; }
  .intro-overlay.is-playing .intro-butterfly .bfly-wingR { animation: introFlapR var(--wing) ease-in-out infinite; }
}

@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introLeafPop {
  0% { opacity: 0; transform: scale(0); }
  55% { opacity: 0.92; }
  100% { opacity: 0.92; transform: scale(1); }
}
@keyframes introBloomPop {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes introWordIn { to { opacity: 1; transform: translateY(0); } }
@keyframes introFlapL { 0%, 100% { transform: rotateY(8deg); } 50% { transform: rotateY(70deg); } }
@keyframes introFlapR { 0%, 100% { transform: rotateY(-8deg); } 50% { transform: rotateY(-70deg); } }

/* Mobile: nur die Pflanze, kein Schriftzug. */
@media (max-width: 768px) {
  .intro-plant { width: 120px; }
  .intro-wordmark { display: none; }
}

/* ============================================================
   SUCHE: Header-Lupe, Flyout und Suchergebnisseite
   ============================================================ */

/* Lupe-Button im Header (Vorlage: .menu-toggle) */
.search-toggle {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  background: var(--surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--ink-800);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.search-toggle:hover { background: var(--paper-alt); color: var(--ink-900); }
.search-toggle svg { display: block; }
/* Bei aktiver Suche wandert das Icon in die aufgezogene Leiste: der Button
   selbst tritt unsichtbar zurueck (die Leiste traegt ihr eigenes Icon). */
.site-header.search-active .search-toggle { opacity: 0; pointer-events: none; }

/* Header tritt zurueck, sobald die Suche offen ist: Logo und Navigation dimmen
   weich, damit die Eingabe-Leiste die Buehne bekommt. */
.site-header.search-active .logo,
.site-header.search-active .primary-nav,
.site-header.search-active .menu-toggle {
  opacity: 0.18;
  filter: saturate(0.6);
  transition: opacity var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
  pointer-events: none;
}

/* ---------- Such-Schicht: Leiste waechst aus der Lupe nach links ----------
   Verankert an .header-inner (position:relative), deckt die Header-Hoehe ab und
   ist rechtsbuendig an der Lupe. Die Leiste sitzt vertikal zentriert (flex), das
   Panel haengt absolut DARUNTER (top:100%) und ragt nach unten aus dem Header. */
.search-x {
  position: absolute;
  top: 0;
  right: 0;             /* gleicher Rand wie die Lupe, da innerhalb von .header-inner */
  height: var(--header-h);
  z-index: 4;
  width: min(560px, calc(100vw - 2.5rem));
  max-width: 100%;
  display: flex;
  align-items: center;
  /* Geschlossen faengt die (unsichtbare) Schicht keine Klicks ab, damit die
     darunterliegende Lupe klickbar bleibt. Offen wieder bedienbar. */
  pointer-events: none;
}
.search-x.is-open { pointer-events: auto; }

.search-x-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-4) 0 var(--space-5);
  background: var(--surface);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  /* Aufziehen aus der Lupe: die Leiste wird von rechts nach links freigelegt
     (clip-path statt scaleX, damit Icon und Text NICHT gestaucht werden). */
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  transition: clip-path var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.search-x.is-open .search-x-bar { clip-path: inset(0 0 0 0); opacity: 1; }

/* Text erst leicht verzoegert einblenden, begleitet die Aufzieh-Bewegung. */
.search-x-input { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.search-x.is-open .search-x-input { opacity: 1; transition-delay: 140ms; }

.search-x-icon { color: var(--gold-500); display: inline-flex; flex-shrink: 0; }
.search-x-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--ink-900);
}
.search-x-input::placeholder { color: var(--ink-400); font-style: italic; }
.search-x-input:focus { outline: none; }

/* ---------- Ergebnis-Panel: haengt unter der Leiste, waechst beim Tippen ----
   Absolut positioniert ab der Unterkante der Leiste, damit es aus dem Header
   nach unten herausragt statt die Header-Hoehe zu dehnen. */
.search-x-panel {
  position: absolute;
  top: calc(50% + 28px);   /* knapp unter der 48px-Leiste (Header vertikal zentriert) */
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.search-x-panel.is-shown { max-height: min(70vh, 480px); opacity: 1; }

.search-x-list {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
  max-height: min(66vh, 460px);
  overflow-y: auto;
  /* Weiche Blende an der Unterkante, solange weitere Treffer folgen:
     angeschnittene Zeilen lesen sich sonst wie ein Layout-Bruch. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.search-x-group {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding: var(--space-3) var(--space-2) var(--space-2);
}
.search-x-group:first-child { padding-top: var(--space-2); }
.search-x-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.search-x-item.is-active,
.search-x-item:hover { background: var(--sage-50); }
.search-x-type {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-700);
  background: var(--sage-100);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  flex-shrink: 0;
}
.search-x-text { display: flex; flex-direction: column; min-width: 0; }
.search-x-title { font-family: var(--font-body); font-size: 1.05rem; color: var(--ink-900); line-height: 1.3; }
.search-x-sub { font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-500); font-style: italic; }
.search-x-empty { padding: var(--space-5); color: var(--ink-500); font-family: var(--font-ui); font-size: 0.92rem; }
.search-suggest {
  border: 0; background: transparent; padding: 0;
  color: var(--gold-600); font: inherit; cursor: pointer; text-decoration: underline;
}

/* Hervorhebung des Suchbegriffs */
mark {
  background: var(--gold-100);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

@media (max-width: 768px) {
  .search-x { right: 12px; left: 12px; width: auto; max-width: none; }
  .search-x-input { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .search-x-bar,
  .search-x-panel,
  .search-x-input,
  .site-header.search-active .logo,
  .site-header.search-active .primary-nav { transition: none; }
  .search-x.is-open .search-x-bar { clip-path: inset(0 0 0 0); }
}

/* ---------- Suchergebnisseite ---------- */
.search-page-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.search-page-form:focus-within { box-shadow: var(--shadow-focus); border-color: var(--sage-400); }
.search-page-icon { color: var(--ink-400); display: inline-flex; flex-shrink: 0; }
.search-page-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--ink-900);
}
.search-page-input:focus { outline: none; }
.search-page-status {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: var(--space-4);
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.search-filter {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-700);
  background: var(--paper-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.search-filter:hover { background: var(--sage-50); }
.search-filter.is-active { background: var(--sage-700); color: var(--paper); border-color: var(--sage-700); }
.search-filter-count { opacity: 0.7; font-size: 0.8em; }

.search-results { margin-top: var(--space-6); }
.search-result-group { margin-bottom: var(--space-7); }
.search-result-heading {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}
.search-result-heading span { color: var(--ink-400); }
.search-result-list { list-style: none; margin: 0; padding: 0; }
.search-result-item { border-top: 1px solid var(--color-line-soft); }
.search-result-item:last-child { border-bottom: 1px solid var(--color-line-soft); }
.search-result-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.search-result-link:hover { background: var(--sage-50); }
.search-result-link .search-item-type { grid-row: 1 / span 1; }
.search-result-title { grid-column: 2; font-family: var(--font-body); font-size: 1.15rem; color: var(--ink-900); }
.search-result-sub { grid-column: 2; font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-500); font-style: italic; }
.search-result-snippet { grid-column: 2; font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-600, var(--ink-500)); margin-top: 2px; line-height: 1.5; }
.search-empty, .search-hint { font-family: var(--font-ui); color: var(--ink-500); padding: var(--space-5) 0; }
.search-empty p { margin-bottom: var(--space-3); }

@media (max-width: 768px) {
  .search-flyout { right: 12px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .search-flyout { transition: none; }
}