/* ==========================================================================
   Aromainsel — Päivi Blöchl, Dipl. Aromapraktikerin, Guntramsdorf
   Design-System. Kein Framework, keine externen Abhängigkeiten.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root {
  /* Papier & Tinte */
  --paper:        #FCF8F2;
  --paper-2:      #F6EFE4;
  --paper-3:      #F0E6D6;
  --ink:          #2A211D;
  --ink-soft:     #5F5249;
  --ink-mute:     #75675E;
  --line:         #E4D8C7;

  /* Markenfarben — aus Logo (Blattgrün) und Päivis Signature-Print */
  --leaf:         #4E6B14;
  --leaf-deep:    #384D0E;
  --leaf-light:   #8FA637;
  --leaf-tint:    #EDF1DC;

  --rose:         #B8225F;
  --rose-deep:    #8E1849;
  --rose-tint:    #FBE7EF;

  --coral:        #BC3813;
  --coral-tint:   #FCEADF;

  --gold:         #956005;
  --gold-warm:    #EDB554;
  --gold-tint:    #FBF0D8;

  /* Semantik */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --accent:       var(--leaf);

  /* Typografie */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Maße */
  --wrap:         1200px;
  --wrap-narrow:  760px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --radius:       18px;
  --radius-lg:    28px;
  --radius-pill:  999px;

  /* Rhythmus */
  --section-y:    clamp(4.5rem, 9vw, 8.5rem);

  /* Schatten — warm, nie grau */
  --shadow-sm:    0 1px 2px rgba(42, 33, 29, .05), 0 2px 8px rgba(42, 33, 29, .04);
  --shadow-md:    0 2px 6px rgba(42, 33, 29, .06), 0 12px 32px rgba(42, 33, 29, .07);
  --shadow-lg:    0 4px 12px rgba(42, 33, 29, .07), 0 28px 64px rgba(42, 33, 29, .11);

  --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

:focus-visible {
  outline: 2.5px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --------------------------------------------------------- 3. Typografie */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); }
h2, .h2 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem); }
h3, .h3 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem); line-height: 1.18; }
h4, .h4 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.28; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* Kursive Akzentwörter in Überschriften — das "Leuchten" */
.accent      { color: var(--rose); font-style: italic; }
.accent-leaf { color: var(--leaf); font-style: italic; }
.accent-gold { color: var(--gold); font-style: italic; }

/* Kleines, gesperrtes Label über einem Abschnitt */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 1.6em; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--center::before { display: none; }
.eyebrow--rose { color: var(--rose); }
.eyebrow--gold { color: var(--gold); }

.lead {
  font-size: clamp(1.1rem, 1.02rem + .5vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.small { font-size: .875rem; line-height: 1.6; color: var(--ink-mute); }

.serif-quote {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 120;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.3rem);
  line-height: 1.32;
  letter-spacing: -.012em;
}

/* ----------------------------------------------------------- 4. Struktur */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: 1360px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--sand  { background: var(--paper-2); }
.section--leaf  { background: var(--leaf-deep); color: #F3EFE4; }
.section--ink   { background: var(--ink); color: #F3EFE4; }

/* Auf dunklen Flächen werden die Tinten-Tokens umdefiniert. Alles, was
   var(--ink-soft) o. Ä. nutzt (Listen, Schritte, Kleintext), zieht damit
   automatisch nach — sonst bliebe dunkle Schrift auf dunklem Grund. */
.section--leaf, .section--ink, .cta-band {
  --ink:      #FBF6EC;
  --ink-soft: rgba(243, 239, 228, .82);
  --ink-mute: rgba(243, 239, 228, .72);
  --line:     rgba(243, 239, 228, .18);
}
.section--leaf .eyebrow, .section--ink .eyebrow, .cta-band .eyebrow { color: var(--gold-warm); }

/* Markenfarben, die für helles Papier gemischt sind, werden auf dunklem
   Grund durch ihre helle Entsprechung ersetzt. */
.section--leaf .step::before, .section--ink .step::before, .cta-band .step::before,
.section--leaf .acc-item > summary::after, .section--ink .acc-item > summary::after,
.section--leaf .link-arrow, .section--ink .link-arrow, .cta-band .link-arrow {
  color: var(--gold-warm);
}
.section--leaf .step::after, .section--ink .step::after, .cta-band .step::after {
  background: var(--gold-warm);
}
.section--leaf .link-arrow:hover, .section--ink .link-arrow:hover { color: #FBF6EC; }

/* Helle Karten behalten auch innerhalb dunkler Abschnitte die dunkle Tinte. */
.section--leaf .pcard, .section--ink .pcard,
.section--leaf .tcard, .section--ink .tcard,
.section--leaf .notice, .section--ink .notice,
.section--leaf .quote, .section--ink .quote {
  --ink:      #2A211D;
  --ink-soft: #5F5249;
  --ink-mute: #75675E;
  --line:     #E4D8C7;
}

.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.stack > * + * { margin-top: 1.15em; }

/* Header eines Abschnitts */
.sec-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head.center { margin-inline: auto; }
.sec-head p { color: var(--ink-soft); }

/* ------------------------------------------------------------ 5. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.7em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 4px 14px rgba(184, 34, 95, .26);
}
.btn--primary:hover { background: var(--rose-deep); box-shadow: 0 8px 24px rgba(184, 34, 95, .32); }

.btn--leaf {
  background: var(--leaf);
  color: #fff;
  box-shadow: 0 4px 14px rgba(78, 107, 20, .24);
}
.btn--leaf:hover { background: var(--leaf-deep); box-shadow: 0 8px 24px rgba(78, 107, 20, .3); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(42, 33, 29, .04); }

.btn--light {
  background: rgba(255, 255, 255, .1);
  color: #FBF6EC;
  border-color: rgba(251, 246, 236, .38);
}
.btn--light:hover { background: #FBF6EC; color: var(--leaf-deep); border-color: #FBF6EC; }

.btn--sm { padding: .7em 1.25em; font-size: .875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.btn-row.center { justify-content: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 700;
  font-size: .95rem;
  color: var(--leaf);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: .12em;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover { gap: .7em; color: var(--rose); }
.link-arrow:hover::after { transform: translateX(2px); }

/* ------------------------------------------------------------- 6. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 248, 242, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(42, 33, 29, .05);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
}
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
.brand__sub {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .22em;
}

.nav-main { display: none; }
@media (min-width: 1040px) {
  .nav-main {
    display: flex;
    align-items: center;
    gap: .15rem;
  }
}
.nav-main a {
  position: relative;
  padding: .55em .8em;
  font-size: .925rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav-main a::after {
  content: '';
  position: absolute;
  left: .8em; right: .8em; bottom: .28em;
  height: 1.5px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-main a:hover { color: var(--ink); }
.nav-main a:hover::after { transform: scaleX(1); }
.nav-main a[aria-current="page"] { color: var(--rose); }
.nav-main a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav-actions .btn { display: none; }
@media (min-width: 1040px) { .nav-actions .btn { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* Mobile Navigation */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
}
.nav-mobile.is-open { display: block; }
@media (min-width: 1040px) { .nav-mobile { display: none !important; } }
.nav-mobile ul { list-style: none; margin: 0; padding: .75rem 0 1.5rem; }
.nav-mobile a {
  display: block;
  padding: .8rem var(--gutter);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 216, 199, .5);
}
.nav-mobile a[aria-current="page"] { color: var(--rose); }
.nav-mobile .nav-mobile__cta { padding: 1.25rem var(--gutter) 0; }
.nav-mobile .nav-mobile__cta .btn { width: 100%; }

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--rose);
  color: #fff;
  padding: .8em 1.4em;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}

/* Das "Leuchten": weiche Duftaura im Hintergrund */
.aura {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  z-index: 0;
}
.aura span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.aura span:nth-child(1) {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -6%; left: -6%;
  background: radial-gradient(circle, rgba(229, 169, 58, .68), rgba(229, 169, 58, 0) 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aura span:nth-child(2) {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  top: 22%; right: -4%;
  background: radial-gradient(circle, rgba(184, 34, 95, .3), rgba(184, 34, 95, 0) 68%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.aura span:nth-child(3) {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  bottom: 2%; left: 26%;
  background: radial-gradient(circle, rgba(143, 166, 55, .42), rgba(143, 166, 55, 0) 68%);
  animation: drift-c 29s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(5%, 7%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-6%, -5%, 0) scale(1.15); } }
@keyframes drift-c { to { transform: translate3d(4%, -8%, 0) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .aura span { animation: none !important; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
}

.hero__title { margin-bottom: .35em; }
.hero__lead { max-width: 46ch; margin-bottom: 2rem; }

/* Vertrauens-Zeile unter dem Hero */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero__trust span { display: inline-flex; align-items: center; gap: .5em; }
.hero__trust span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--leaf-light);
  flex: none;
}

/* Hero-Bild mit Rahmen */
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
/* Handgeschriebene Notiz als Overlay */
.hero__note {
  position: absolute;
  left: clamp(-2rem, -2vw, -1rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 15rem;
  padding: 1.1rem 1.3rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.hero__note strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .15rem;
}
.hero__note span { font-size: .82rem; color: var(--ink-mute); line-height: 1.45; display: block; }

/* ------------------------------------------------------------ 8. Marquee */
.marquee {
  background: var(--leaf-deep);
  color: #F0EDDF;
  padding: .9rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, .12);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Nicht scrollbar machen: das Band ist aria-hidden und dürfte sonst
     per Tastatur fokussierbar werden. Es bleibt einfach beschnitten. */
  .marquee__track { animation: none; }
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__group span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding-inline: 1.1rem;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 40;
  font-size: .98rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .02em;
  white-space: nowrap;
}
.marquee__group span::after {
  content: '✽';
  font-style: normal;
  color: var(--gold-warm);
  font-size: .8em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------------------------------------------------- 9. Statement-Bereich */
.statement {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
}
.statement--wide { max-width: 32ch; }

/* -------------------------------------------------------- 10. Karten-Grid */
.card-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 700px)  { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* Getönte Angebotskarte */
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.tcard--rose  { background: var(--rose-tint); }
.tcard--leaf  { background: var(--leaf-tint); }
.tcard--gold  { background: var(--gold-tint); }
.tcard--coral { background: var(--coral-tint); }

.tcard__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.tcard--rose  .tcard__label { color: var(--rose); }
.tcard--leaf  .tcard__label { color: var(--leaf); }
.tcard--gold  .tcard__label { color: var(--gold); }
.tcard--coral .tcard__label { color: var(--coral); }

.tcard h3, .tcard h4 { margin-bottom: .5rem; }
/* In der Karte steht eine Ueberschrift im Text, nicht ueber der Seite. Mit der
   globalen h3-Groesse (bis 1.9rem) fuellten lange finnische Titel die halbe
   Karte. */
.tcard h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.45rem); }
.tcard p { color: var(--ink-soft); font-size: .975rem; }

.tcard__meta {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  font-size: .875rem;
}
.tcard__price {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.tcard__dur { color: var(--ink-mute); }

.tcard__arrow {
  /* An den Kartenboden gehaengt: Im Raster sind alle Karten einer Zeile gleich
     hoch. Klebte der Pfeil am Text, klaffte darunter je nach Textlaenge ein
     unterschiedlich grosses Loch. So sitzt der Leerraum zwischen Text und
     Pfeil, und die Pfeile stehen ueber die Zeile hinweg auf einer Linie. */
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .3s var(--ease);
}
a.tcard:hover .tcard__arrow { transform: translateX(5px); }

/* Schlichte Karte auf Papier */
.pcard {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* Kompaktkarten tragen semantisch h3, optisch aber die kleinere Stufe. */
.pcard h3, .pcard h4 {
  margin-bottom: .45rem;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.28;
}
.pcard p { color: var(--ink-soft); font-size: .975rem; }

/* ------------------------------------------------------------ 11. Schritte */
.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
@media (min-width: 800px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 40;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .04em;
}
.step::after {
  content: '';
  position: absolute;
  top: 1.9rem; left: 0;
  width: 2.2rem; height: 1.5px;
  background: var(--gold);
  opacity: .4;
}
.step h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); margin-bottom: .4rem; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* ---------------------------------------------------- 12. Split-Bereiche */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr .85fr; }
}
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__media--wide img { aspect-ratio: 4 / 3; }

/* Bilderpaar, versetzt */
.media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: start;
}
.media-duo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.media-duo img:first-child { margin-top: clamp(1.5rem, 5vw, 3.5rem); }

/* ------------------------------------------------------------- 13. Listen */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--leaf-light);
}
.ticks li strong { color: var(--ink); }
.ticks--rose li::before { background: var(--rose); }
.ticks--gold li::before { background: var(--gold-warm); }

.ticks--check li { padding-left: 2rem; }
.ticks--check li::before {
  content: '✓';
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  top: 0;
  font-weight: 700;
  color: var(--leaf);
  font-size: 1rem;
}

/* Definitionsliste (Fakten) */
.facts { margin: 0; }
.facts > div {
  display: grid;
  gap: .15rem .75rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) { .facts > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: .2em;
}
.facts dd { margin: 0; color: var(--ink); }
.facts dd a { color: var(--leaf); font-weight: 600; }

/* ---------------------------------------------------------- 14. Preisbox */
.price-box {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) {
  .price-box { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}
.price-box__figure {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 72;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--rose);
  white-space: nowrap;
}
.price-box__meta { font-size: .875rem; color: var(--ink-mute); margin-top: .4rem; }
.price-box h3 { margin-bottom: .3rem; }
.price-box p { color: var(--ink-soft); font-size: .975rem; margin: 0; }

/* -------------------------------------------------------- 15. Testimonial */
.quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3.25rem);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.quote::before {
  content: '“';
  position: absolute;
  top: -.05em; left: .28em;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--gold-warm);
  opacity: .3;
  pointer-events: none;
}
.quote blockquote { margin: 0; position: relative; z-index: 1; }
.quote p { color: var(--ink-soft); }
.quote footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.quote footer strong { display: block; color: var(--ink); font-size: .95rem; }
.quote footer span { color: var(--ink-mute); }

/* --------------------------------------------------------- 16. Logo-Reihe */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-warm);
  flex: none;
}
.section--leaf .badge, .section--ink .badge {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(251, 246, 236, .2);
  color: rgba(243, 239, 228, .85);
}

/* Referenz-Namen (Duftkonzepte) */
.reflist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reflist li {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
  font-weight: 500;
  color: var(--ink-soft);
}
.reflist li:not(:last-child)::after {
  content: '·';
  margin-left: .75rem;
  color: var(--gold-warm);
}

/* --------------------------------------------------------- 17. Hinweisbox */
.notice {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice--leaf { background: var(--leaf-tint); border-left-color: var(--leaf); }
.notice--rose { background: var(--rose-tint); border-left-color: var(--rose); }

/* Redaktioneller Hinweis für Christoph — vor Go-live entfernen */
.todo {
  padding: 1rem 1.25rem;
  background: #FFF4D6;
  border: 2px dashed #C88618;
  border-radius: var(--radius);
  font-size: .875rem;
  color: #6B4A05;
  margin-block: 1.5rem;
}
.todo strong { display: block; margin-bottom: .25rem; }

/* ------------------------------------------------------------ 18. Galerie */
/* Gruppentitel über einem Kartenblock */
.group-head {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .8rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease);
}
.gallery img:hover { transform: scale(1.02); }
.gallery__tall { grid-row: span 2; }
.gallery__tall img { aspect-ratio: 1 / 2.06; }

/* ------------------------------------------------------------ 19. Akkordeon */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  font-weight: 500;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary:hover { color: var(--rose); }
.acc-item > summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  transition: transform .3s var(--ease);
}
.acc-item[open] > summary::after { transform: rotate(45deg); }
.acc-item__body { padding-bottom: 1.6rem; color: var(--ink-soft); font-size: .975rem; }
.acc-item__body > *:first-child { margin-top: 0; }

/* ------------------------------------------------------------ 20. Formular */
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label .req { color: var(--rose); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85em 1em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(78, 107, 20, .13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); opacity: .75; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  flex: none;
  accent-color: var(--leaf);
  cursor: pointer;
}
.check a { color: var(--leaf); font-weight: 600; }

.form-note { font-size: .8rem; color: var(--ink-mute); }

.form-status {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
}
.form-status[data-state="ok"]   { background: var(--leaf-tint); color: var(--leaf-deep); }
.form-status[data-state="err"]  { background: var(--rose-tint); color: var(--rose-deep); }
.form-status[hidden] { display: none; }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------- 21. CTA */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--leaf-deep);
  color: #F3EFE4;
  text-align: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 20% 0%,  rgba(229, 169, 58, .28), transparent 62%),
    radial-gradient(55% 85% at 82% 100%, rgba(184, 34, 95, .3), transparent 62%);
  pointer-events: none;
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #FBF6EC; }
.cta-band p { color: rgba(243, 239, 228, .8); }

/* ------------------------------------------------------------ 22. Footer */
.site-footer {
  background: var(--ink);
  color: rgba(243, 239, 228, .72);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  font-size: .925rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer-brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 48;
  font-size: 1.6rem;
  font-weight: 600;
  color: #FBF6EC;
  margin-bottom: .5rem;
  display: block;
}
.footer-brand p { color: rgba(243, 239, 228, .6); max-width: 32ch; font-size: .9rem; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a {
  color: rgba(243, 239, 228, .72);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.site-footer a:hover { color: #FBF6EC; text-decoration: underline; }

.footer-hours { font-size: .9rem; }
.footer-hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(243, 239, 228, .1);
}
.footer-hours span:last-child { color: #FBF6EC; white-space: nowrap; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 239, 228, .14);
  font-size: .82rem;
  color: rgba(243, 239, 228, .5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom li { margin: 0; }
/* Der Widerrufsknopf muss laut FAGG hervorgehoben und leicht auffindbar sein —
   deshalb steht er in der Fusszeile als Knopf und nicht als weiterer Textlink. */
.footer-widerruf a {
  display: inline-block;
  padding: .4em 1em;
  border: 1px solid rgba(243, 239, 228, .38);
  border-radius: var(--radius-pill);
  color: rgba(243, 239, 228, .92);
  text-decoration: none;
}
.footer-widerruf a:hover { border-color: var(--paper); background: rgba(243, 239, 228, .1); }

/* ------------------------------------------------- 23. Seiten-Kopfbereich */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
/* Botanisches Wasserzeichen — füllt die rechte Hälfte, ohne zu drängen */
.page-head::after {
  content: '';
  position: absolute;
  right: -4%;
  bottom: -28%;
  width: clamp(20rem, 34vw, 32rem);
  aspect-ratio: 1;
  background: url('favicon.svg') no-repeat center / contain;
  opacity: .12;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 899px) {
  .page-head::after { right: -22%; bottom: -34%; opacity: .07; }
}

.page-head__inner { position: relative; z-index: 1; max-width: 58ch; }
.page-head h1 { margin-bottom: .3em; }
/* Auf Marketingseiten ist die H1 eine gesetzte Zeile und darf gross sein. Auf
   Artikelseiten ist sie der Beitragstitel — ein ganzer Satz. Bei bis zu 5rem
   fuellte ein langer finnischer Titel den gesamten ersten Bildschirm. */
.page-head--artikkeli h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem);
  letter-spacing: -.012em;
  line-height: 1.12;
  max-width: 22ch;
}
.page-head--artikkeli .lead { max-width: 60ch; }
.page-head .lead { max-width: 52ch; }

.crumbs {
  font-size: .8rem;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
}
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--leaf); text-decoration: underline; }
.crumbs span { margin-inline: .5em; opacity: .5; }

/* ------------------------------------------------------- 24. Fließtext */
.prose { max-width: 68ch; }
/* Zwischenueberschriften im Fliesstext sind keine Seitentitel. Mit der
   Displaygroesse (bis 3.5rem) ergab margin-top: 2.5em bis zu 140 px Luft je
   Ueberschrift — auf Seiten mit vielen Zwischentiteln (die finnische Seite
   „Turvallinen aromaterapia" hat dreizehn) summierte sich das auf ueber
   1500 px Leerraum und der Text zerfiel in lauter Einzelstuecke. */
.prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--ink-soft); }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--leaf); font-weight: 600; }

/* ----------------------------------------------------- 25. Sanftes Einblenden */
/* Nur verstecken, wenn JavaScript läuft — sonst bleibt alles sichtbar.
   Die Klasse .js setzt ein Inline-Skript im <head>, damit es kein Aufblitzen gibt. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- Verbands-Logos
   Die Reihe zeigt die offiziellen Member-Badges, die Paeivi aus den
   Mitgliederbereichen der Verbaende bekommt. Sie bleiben unveraendert:
   keine Graustufen, keine Einfaerbung, kein Beschnitt — die Verbaende
   geben ihre Badges mit Nutzungsregeln heraus, und die verlangen in der
   Regel die unveraenderte Wiedergabe. Vereinheitlicht wird nur die Hoehe. */
.logowall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.8rem 2.6rem;
  margin-top: 2rem;
}
.logowall img {
  height: 68px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* Die Badges sind fuer weissen Grund gemacht. Der Abschnitt ist dunkelgruen —
     ohne eigene helle Flaeche verschwinden sie darin. Also bekommt jedes Logo
     ein weisses Feld, statt das Bild selbst anzutasten. */
  background: #fff;
  padding: .75rem .9rem;
  border-radius: 12px;
  box-sizing: content-box;
}
.logowall__note {
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--ink-mute);
  max-width: 60ch;
}
.section--leaf .logowall__note { color: rgba(255, 255, 255, .72); }
@media (max-width: 640px) {
  .logowall { gap: 1.4rem 1.8rem; justify-content: center; }
  .logowall img { height: 54px; }
}

/* ------------------------------------------------------------- 26. Utils */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- 27. Print */
@media print {
  .site-header, .site-footer, .marquee, .cta-band, .aura, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ------------------------------------------------ 30. Verbands-Logos
   Reihe der Mitgliedslogos (AIA, ICAN, IFPA, LKL, Suomen Aromaterapeutit ry …).
   Die Logos sind fremde Marken: es duerfen nur die offiziellen Member-Badges
   verwendet werden, die die Verbaende ihren Mitgliedern zur Verfuegung stellen.
   Dateien nach images/logos/, dann in die Seite einhaengen. */
.logowall {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.5rem;
}
.logowall img {
  height: clamp(38px, 4.5vw, 56px); width: auto;
  opacity: .78; filter: saturate(.9);
  transition: opacity .2s ease;
}
.logowall a:hover img { opacity: 1; }
.logowall figcaption { font-size: .72rem; color: var(--ink-mute); margin-top: .35rem; }

/* ------------------------------------------------- 31. Newsletter-Anmeldung */
.newsletter-form { max-width: 46rem; margin-inline: auto; }
.newsletter-form__zeile { display: grid; gap: .6rem; }
@media (min-width: 720px) {
  .newsletter-form__zeile { grid-template-columns: 1fr 1.4fr auto; align-items: center; }
}
.newsletter-form input[type="text"], .newsletter-form input[type="email"] {
  width: 100%; font: inherit; padding: .8em 1em;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.newsletter-form input:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.newsletter-form .check { font-size: .875rem; text-align: left; }