/* ==========================================================================
   bevice.com — Landingpage Wyld Notes
   Formensprache der Marke: rechte Winkel, keine Schatten, viel Weißraum,
   dünne Großbuchstaben-Knöpfe. Weiß ist Fläche, Salbeigrün nur Akzent.
   Bewusst nur ein Erscheinungsbild (hell) — das ist die Markenwelt.
   ========================================================================== */

/* 18.09.2026 richtiggestellt: work-sans.woff2 ist KEINE variable Schrift,
   sondern ein einzelner Schnitt. Die alte Angabe "woff2-variations" mit
   "300 500" war falsch — deshalb sahen 300, 400 und 500 identisch aus, und
   alles ab 600 wurde vom Browser nur kuenstlich verfettet. Im Browser
   gemessen (font-variation-settings zeigte keinerlei Wirkung). */
@font-face {
    font-family: "Work Sans";
    src: url("/assets/font/work-sans.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Echter Fettschnitt, 20,8 KB. Von Google Fonts geholt (Work Sans steht unter
   der SIL Open Font License) und lokal abgelegt — die Seite baut weiterhin
   keine externen Verbindungen auf. Gebraucht fuer die Duftnamen. */
@font-face {
    font-family: "Work Sans";
    src: url("/assets/font/work-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("/assets/font/outfit.woff2") format("woff2-variations");
    font-weight: 300 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    --weiss:       #FFFFFF;
    --papier:      #FAFAF8;
    --papier-tief: #F1F2EE;
    /* 18.09.2026 (Vorgabe Ralf): Die Schrift traegt das Gruen des Logos.
       Drei Abstufungen DESSELBEN Farbtons, nicht drei Farben — der Grund ist
       die Lesbarkeit: Das reine Logo-Gruen #687D63 erreicht auf Weiss ein
       Kontrastverhaeltnis von 4,47:1 und liegt damit knapp unter der Schwelle
       4,5:1, die fuer Fliesstext gilt (WCAG AA). Fuer grosse Schrift genuegt
       3:1 — dort steht deshalb das Logo-Gruen unveraendert (siehe h1/h2/h3).
       Fliesstext bekommt denselben Ton, nur dunkler. */
    --tinte:       #53654F;   /* 6,3:1 — Fliesstext */
    --tinte-weich: #5F7259;   /* 5,2:1 — Nebentext */
    --tinte-zart:  #687D63;   /* 4,5:1 — Kleinangaben, exakt das Logo-Gruen */
    --linie:       #E2E4DD;
    --linie-stark: #C9CCC2;
    --salbei:      #687D63;
    --salbei-tief: #53654F;
    --oliv:        #525143;
    --gold:        #B8935A;

    --anzeige: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lauf:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --bahn:  76rem;   /* maximale Inhaltsbreite */
    --rand:  1.25rem; /* Seitenabstand, nie kleiner */
}

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

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

/* Am Rechner ist mehr Platz — dann darf alles größer sein. Ein Hebel an der
   Wurzel skaliert Schrift, Abstände und Rahmen gleichmäßig mit, weil das
   ganze Stylesheet in rem rechnet. Am Handy bleibt es wie es ist.
   (Die Haltepunkte selbst rechnen mit der Ausgangsgröße, nicht mit dieser —
   die Umbrüche verschieben sich dadurch also nicht.) */
@media (min-width: 56rem) { html { font-size: 106.25%; } }  /* 17 px */
@media (min-width: 80rem) { html { font-size: 118.75%; } }  /* 19 px */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--weiss);
    color: var(--tinte);
    font-family: var(--lauf);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

/* 🔴 Safari-Haertung (18.09.2026, gemeldet von einem iPhone: Bilder liefen
   ueber den Bildschirmrand hinaus und verdeckten den Knopf darunter).
   Ursache: Ein Raster- oder Flex-Kind hat von sich aus `min-width: auto` und
   darf deshalb nicht unter die Originalbreite seines Bildes schrumpfen —
   `max-width: 100%` misst dann an einer schon zu breiten Spalte. Safari legt
   das strenger aus als Chrome. Deshalb: alle Spalten als minmax(0, 1fr)
   (siehe unten) UND die Kinder ausdruecklich schrumpfbar machen. */
.start__gitter > *, .ergebnis__innen > *, .duefte > *, .stimmen > *,
.marke__gitter > *, .beratung__wahl > *, .kopf__innen > *, .duft > * {
    min-width: 0;
}

/* Muss NACH der img-Regel stehen und muss !important tragen: sonst gewinnt
   "img { display: block }" gegen die Browservorgabe für [hidden] und
   ausgeblendete Bilder bleiben sichtbar. */
[hidden] { display: none !important; }

a { color: var(--salbei-tief); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--oliv); }

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

/* --------------------------------------------------------- Grundbausteine */

.bahn {
    max-width: var(--bahn);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(3rem, 8vw, 6rem); }
.abschnitt--papier { background: var(--papier); }
.abschnitt--linie  { border-top: 1px solid var(--linie); }

.hut {
    font-family: var(--anzeige);
    /* 18.09.2026 (Vorgabe Ralf) etwas groesser; die Sperrung geht dabei
       leicht zurueck, sonst zerfaellt die Zeile. */
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--salbei);
    margin: 0 0 1rem;
}

h1, h2, h3 {
    font-family: var(--anzeige); font-weight: 300;
    letter-spacing: -.015em; text-wrap: balance;
    /* Grosse Schrift darf das reine Logo-Gruen tragen. */
    color: var(--salbei);
}

h1 {
    /* 18.09.2026 (Vorgabe Ralf): etwas kleiner und etwas kraeftiger.
       500 ist das Maximum, das die variable Work Sans hier mitbringt
       (siehe @font-face oben) — mehr Fett gaebe es nur mit einer
       zweiten Schriftdatei. */
    font-size: clamp(1.75rem, 5.2vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
/* 18.09.2026 (Vorgabe Ralf): Die Abschnitts-Ueberschriften tragen exakt
   dieselbe Schrift wie die Eroeffnung — gleiche Groessenformel, gleiches
   Gewicht, gleicher Zeilenabstand. Wer die h1 aendert, aendert beide;
   die Werte stehen bewusst doppelt und nicht in einer gemeinsamen Regel,
   damit man die Ueberschrift der Eroeffnung spaeter wieder loesen kann. */
h2 {
    font-size: clamp(1.75rem, 5.2vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 1rem;
}
h3 {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 .5rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.vorlauf { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: var(--tinte-weich); max-width: 44ch; }
.fliess { max-width: 62ch; color: var(--tinte-weich); }
/* Steht klein unter der Unterzeile der Eroeffnung: "Angaben des Herstellers".
   🔴 Nicht entfernen — sie macht aus der Werbeaussage "100 % natuerlich" eine
   zugeschriebene Angabe. Siehe inc/texte.php, Schluessel hero. */
.vorlauf__quelle {
    font-size: .8125rem;
    color: var(--tinte-zart);
    margin-top: -.5rem;
}
/* Zentriert — z. B. im Schlussaufruf, wo der Satz mittig unter der
   Überschrift steht. Früher ein style-Attribut; das verwirft die CSP. */
.fliess--mitte { margin-inline: auto; }
strong { font-weight: 400; color: var(--tinte); }

/* ------------------------------------------------------------------ Kopf */

.kopf {
    border-bottom: 1px solid var(--linie);
    background: var(--weiss);
}
.kopf__innen {
    /* Drei Spalten, damit die mittlere Zeile wirklich in der Mitte der Seite
       steht und nicht in der Mitte des Restplatzes neben dem Logo. Die dritte
       Spalte ist leer und heisst deshalb .kopf__waage. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem 1rem;
    /* Flach halten: der Kopf traegt nur den Namen, er soll die Eroeffnung
       nicht nach unten druecken. */
    padding-block: .7rem;
}
.kopf__marke {
    font-family: var(--anzeige);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--tinte);
}
.kopf__marke span { display: block; font-size: .625rem; font-weight: 400; letter-spacing: .16em;
    text-transform: uppercase; color: var(--tinte-zart); margin-top: .1rem; }

/* Das Logo der Marke im Kopf (seit 18.09.2026 anstelle der Wortmarke). */
.kopf__logo { display: inline-flex; justify-self: start; }
.kopf__logo img {
    display: block;
    /* 18.09.2026: kleiner gestellt (Vorgabe Ralf) — das Logo soll die
       Kopfleiste nicht dominieren, die Zeile daneben traegt die Botschaft. */
    width: clamp(4.375rem, 9vw, 6.25rem);
    height: auto;
}

/* Die Zeile daneben: mittig in der Leiste, auf einer Hoehe mit dem Logo. */
.kopf__zeile {
    margin: 0;
    justify-self: center;
    text-align: center;
    font-family: var(--anzeige);
    /* 18.09.2026 deutlich groesser (Vorgabe Ralf). Die Sperrung wandert
       zurueck, weil weit gesperrte Grossbuchstaben in dieser Groesse
       auseinanderfallen. */
    font-size: clamp(.9375rem, 1.8vw, 1.25rem);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--salbei);
}

/* Leere dritte Spalte — haelt die Zeile in der Mitte. */
.kopf__waage { display: block; }

@media (max-width: 34rem) {
    /* Am Handy ist fuer drei Spalten kein Platz: Logo oben, Zeile darunter,
       beides mittig. */
    .kopf__innen { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .kopf__logo { justify-self: center; }
    .kopf__waage { display: none; }
}

/* Der Partner-Disclaimer stand hier oben und liegt jetzt im Fuss.
   Die Regel bleibt, falls er wieder hochwandern soll. */
.kopf__hinweis {
    font-size: .75rem;
    color: var(--tinte-zart);
    max-width: 30ch;
    line-height: 1.4;
}

/* Pflichtangaben im Fuss etwas kraeftiger als der uebrige Fusstext —
   sie sollen lesbar sein, nicht versteckt wirken. */
.fuss__pflicht { color: var(--tinte-weich); }

/* --------------------------------------------------------------- Knöpfe */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--anzeige);
    /* 18.09.2026 (Vorgabe Ralf): groesser, aber IMMER einzeilig.
       Drei Stellschrauben zusammen halten das durch:
       kleinere Sperrung (.08 statt .12em), mitwachsendes Seitenpolster und
       nowrap. Das Minimum der clamp ist so gewaehlt, dass
       "Ich will mir was Gutes tun" auch auf einem 360px-Handy in eine Zeile
       passt — wer den Knopftext aendert, muss das nachmessen. */
    font-size: clamp(.8125rem, 3.2vw, 1.0625rem);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.05rem clamp(.9rem, 3vw, 1.9rem);
    border: 1px solid var(--oliv);
    background: var(--oliv);
    color: var(--weiss);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }

/* Der Pfeil im Knopf. Er waechst mit der Schrift (em), nicht mit dem
   Wurzelmass — so bleibt er in jeder Groesse gleich gewichtet. Beim
   Zeigen rueckt er ein Stueck nach rechts; wer Bewegung abgeschaltet hat,
   sieht das nicht (die Regel dafuer steht ganz oben im Stylesheet). */
.knopf__pfeil {
    width: .9em;
    height: .9em;
    flex: 0 0 auto;
    transition: transform .18s ease;
}
.knopf:hover .knopf__pfeil { transform: translateX(.2em); }
.knopf--offen { background: transparent; color: var(--oliv); }
.knopf--offen:hover { background: var(--oliv); color: var(--weiss); }
.knopf--breit { width: 100%; }

/* Einzeilig — aber erst ab der Breite, ab der es auch wirklich passt.
   Gemessen (18.09.2026, Startseite im 360px-Rahmen): "Ich will mir was Gutes
   tun" braucht bei der kleinsten Stufe der clamp (13px) rund 275px plus
   Polster, also etwa 344px Fensterbreite. Darunter — alte 320px-Geraete —
   darf der Text umbrechen; ein erzwungenes nowrap wuerde dort den Knopf
   sprengen, und weil er .knopf--breit ist (width:100%), die ganze Seite
   mitreissen. Wer den Knopftext aendert, misst diese Schwelle neu. */
@media (min-width: 21.5rem) {
    .knopf { white-space: nowrap; }
}
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------- Eröffnung */

.start__gitter {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    /* Oben bewusst knapp, unten grosszuegig: die Ueberschrift soll moeglichst
       weit oben stehen, damit ohne Scrollen mehr davon sichtbar ist. */
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 56rem) {
    .start__gitter { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.start__text { min-width: 0; }
.start__bild { min-width: 0; }
.start__bild img { width: 100%; }

.start__datum {
    display: inline-block;
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oliv);
    border: 1px solid var(--linie-stark);
    padding: .4rem .7rem;
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------- Anmeldeblock */

/* Der Rabatt-Hinweis steht ÜBER dem Knopf, nicht darunter: darunter steht
   der Werbehinweis, und der muss unmittelbar am Knopf bleiben (§ 5a Abs. 4
   UWG). Salbeigrün als Linie, nicht als Fläche — Vorgabe des Corporate Design. */
/* Der Preisnachlass ist das staerkste Kaufargument der Seite. Die ZAHL
   traegt ihn, der Satz daneben erklaert sie nur — deshalb stehen beide in
   einer Zeile, aber in sehr verschiedener Groesse (Vorgabe Ralf, 18.09.2026).
   baseline statt center: sonst "schwimmt" der kleine Satz neben der Zahl. */
/* Die grosse Prozentzahl ueber dem Knopf — in Gebrauch. Sie war am
   18.09.2026 abends kurz stillgelegt (die Zahl stand testweise im Knopf,
   „Variante B") und ist auf Ansage Ralf zurueckgeholt worden. Unter dem
   Knopf steht zusaetzlich .anmeldung__bedingung. */
.rabatt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .125rem .5rem;
    font-family: var(--anzeige);
    color: var(--salbei-tief);
    border-left: 3px solid var(--salbei);
    /* 18.09.2026 spaet (Vorgabe Ralf): mehr Luft rechts — der Satz endete
       vorher fast auf der Kante des Kastens. */
    padding: .8125rem 1.5rem .8125rem 1.125rem;
    margin: 0 0 1rem;
    background: var(--papier-tief);
}
.rabatt__wert {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.rabatt__satz {
    /* 18.09.2026 spaet (Vorgabe Ralf): groesser als vorher (.8125–.9375rem),
       aber nicht so gross, dass der Satz auf dem Desktop neben der Zahl
       umbricht — er MUSS dort in eine Zeile passen. Gemessen im 30rem
       breiten Block: 1.125rem ist die Grenze. */
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.35;
}
/* Vorbereitet 19.09.2026: Steht ein Gutscheincode im Satz (RABATT_CODE in
   der .env), ist der Satz zu lang, um neben der grossen Zahl in eine Zeile
   zu passen — er bekommt deshalb die volle Breite und liegt unter ihr.
   Ohne gesetzten Code aendert sich nichts. */
/* 19.09.2026 (Vorgabe Ralf): Die zweite Zeile ist die FORTSETZUNG des Satzes
   und steht linksbuendig unter der ersten — mittig und rechtsbuendig probiert
   und verworfen. Wo sie beginnt, entscheidet nicht mehr der Text, sondern eines
   der beiden leeren Bruch-Elemente (siehe inc/teil_kaufknopf.php): ein Flex-Kind
   mit voller Breite und Hoehe 0 schiebt alles Folgende in die naechste Zeile.
   🔴 Deshalb darf .rabatt__satz--code KEIN flex-basis: 100 % mehr tragen —
   sonst faellt der Code immer in eine eigene, dritte Zeile. */
.rabatt__bruch { flex-basis: 100%; width: 100%; height: 0; margin: 0; }
@media (min-width: 40rem) { .rabatt__bruch--handy { display: none; } }
@media (max-width: 39.99rem) { .rabatt__bruch--desktop { display: none; } }
/* Der Code soll abtippbar sein und aus dem Satz herausstehen, ohne zu
   schreien — daher nur Gewicht und etwas Sperrung, keine andere Farbe. */
.rabatt__code { font-weight: 500; letter-spacing: .03em; }

/* Der Umbruch (Vorgabe Ralf, 18.09.2026 spaet):
     Desktop  „10 % Preisnachlass auf deine erste Bestellung."  — eine Zeile
     Handy    „10 % Preisnachlass" / „auf deine erste Bestellung."
   Dafuer ist der Satz in zwei <span> geteilt (siehe inc/teil_kaufknopf.php);
   am Handy bekommt nur der zweite die volle Breite. flex-basis statt
   flex-direction, damit die Ausrichtung des umgebenden Bereichs erhalten
   bleibt (im Schlussabschnitt ist alles zentriert). */
@media (min-width: 40rem) {
    /* Auf dem Desktop bleibt alles in einer Zeile — auch wenn ein Wort
       knapp wird, lieber die Schrift etwas kleiner als ein Umbruch. */
    .rabatt { flex-wrap: nowrap; }
    .rabatt__satz { white-space: nowrap; }
    /* 19.09.2026: Steht ein Gutscheincode im Satz, passt er NICHT in eine
       Zeile neben die Zahl — mit nowrap lief er ueber die Kante des Kastens
       hinaus und der Code war abgeschnitten (live gesehen). Nur in diesem
       Fall darf der Kasten wieder umbrechen; ohne Code bleibt alles wie
       gemessen. */
    .rabatt--code { flex-wrap: wrap; }
    /* Der Satz laeuft ueber mehrere Flex-Kinder — der Spaltenabstand wirkt
       dort als Wortabstand und war mit .5rem sichtbar zu weit. Die Zahl
       behaelt ihren groesseren Abstand ueber margin-right. */
    .rabatt--code { column-gap: .3125rem; }
    .rabatt--code .rabatt__wert { margin-right: .1875rem; }
    .rabatt--code .rabatt__satz--code { white-space: normal; }
}
@media (max-width: 39.99rem) {
    .rabatt { row-gap: .15rem; }
    .rabatt__satz--b { flex: 0 0 100%; }
    /* 19.09.2026: Am Handy muss „10 % Preisnachlass auf deine erste“ in EINE
       Zeile passen — dafuer ist die Zahl hier kleiner als auf dem Desktop
       (Vorgabe Ralf: lieber die Zahl kleiner als eine dritte Zeile). */
    .rabatt__wert { font-size: 1.5rem; }
    .rabatt { column-gap: .375rem; padding-right: 1rem; }
}

/* Ungenutzt seit 18.09.2026 spaet: Die Fussnote am Seitenende ist auf
   Ansage Ralf geloescht; ihren Inhalt traegt .anmeldung__bedingung an jedem
   Knopf. Regel bleibt stehen, falls sie zurueckkommt. */
.rabatt__fussnote { font-size: .8125rem; color: var(--tinte-zart); margin-top: 1rem; line-height: 1.5; }

.anmeldung { margin-top: 2rem; max-width: 30rem; }
.anmeldung__reihe { display: flex; flex-wrap: wrap; gap: .625rem; }
.anmeldung__feld {
    flex: 1 1 14rem;
    min-width: 0;
    font-family: var(--lauf);
    font-size: 1rem;
    padding: 1rem 1rem;
    border: 1px solid var(--linie-stark);
    background: var(--weiss);
    color: var(--tinte);
}
.anmeldung__feld::placeholder { color: var(--tinte-zart); }
.anmeldung__feld:focus { border-color: var(--salbei); outline: none; }
.anmeldung__knopf { flex: 0 0 auto; }
.anmeldung__hinweis { font-size: .8125rem; color: var(--tinte-zart); margin-top: .75rem; line-height: 1.5; }
/* Die Bedingung des Nachlasses, unter dem Knopf. Sie nennt die Bedingung
   („erste Bestellung"), den Haendler und den Hinweis, dass der Nachlass an
   diesem Weg haengt. 18.09.2026 spaet (Vorgabe Ralf): groesser und mit mehr
   Luft zum Knopf — sie ist kein Kleingedrucktes, sondern gehoert zum
   Angebot. Sie ist seit diesem Tag auch die EINZIGE Stelle, die die
   Bedingungen nennt: die Fussnote am Seitenende ist entfallen. */
.anmeldung__bedingung {
    font-size: .9375rem;
    color: var(--tinte-weich);
    margin-top: 1.125rem;
    line-height: 1.6;
}
.anmeldung__hinweis a { color: var(--tinte-weich); }
.anmeldung__meldung { font-size: .9375rem; padding: .875rem 1rem; margin-top: .875rem; border-left: 3px solid var(--salbei); background: var(--papier-tief); }
.anmeldung__meldung--fehler { border-left-color: #9C4A2F; }

/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- Werbekennzeichen */

.werbung {
    font-family: var(--anzeige);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinte-zart);
}
.absender {
    display: grid;
    gap: 1.25rem;
    padding-block: 1.75rem;
    border-block: 1px solid var(--linie);
    align-items: center;
}
@media (min-width: 44rem) { .absender { grid-template-columns: auto minmax(0, 1fr); } }
/* Ohne Werbekennzeichen daneben braucht der Block keine zweite Spalte. */
.absender--nurtext { grid-template-columns: 1fr !important; }
.absender__satz { font-size: 1rem; color: var(--tinte-weich); max-width: 70ch; margin: 0; }

/* ------------------------------------------------------------- Beratung */

/* Zentriert, sonst klebt der Block am linken Rand und rechts bleibt die
   halbe Seite leer. */
.beratung { max-width: 48rem; margin-inline: auto; }

/* ---- Die verdeckte Duftberatung (18.09.2026, Vorgabe Ralf) --------------
   Zu sehen ist zuerst nur die Frage. Sie steht auf getoentem Grund in einem
   duennen Rahmen — ein ruhiger Kasten mitten im weissen Fluss, damit klar
   ist: hier ist etwas, das man oeffnen kann. Beim Aufklappen bleibt der
   Kasten stehen und der Fragebogen waechst nach unten heraus; die Frage
   bleibt also die ganze Zeit ueber den Fragen sichtbar.
   Keine Schatten, rechte Winkel — Formensprache der Marke. */
.beratung--verdeckt {
    background: var(--papier-tief);
    border: 1px solid var(--linie);
    padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
}
/* Ueberschrift und Anreisser stehen mittig, der Fragebogen darunter wieder
   linksbuendig — Fragen und Antworten liest man nicht zentriert. */
.beratung--verdeckt .beratung__anreisser { max-width: 34rem; }
.beratung__start { margin-top: 1.75rem; }
.beratung__block { text-align: left; margin-top: 2.5rem; }
.beratung__block[hidden] { display: none !important; }
/* Der Winkel dreht sich, sobald der Block offen ist — dieselbe Dauer wie
   beim Pfeil am Kaufknopf. Wer Bewegung abgeschaltet hat, sieht nur den
   Endzustand (die Regel dafuer steht ganz oben im Stylesheet). */
.knopf__winkel {
    width: .9em;
    height: .9em;
    flex: 0 0 auto;
    transition: transform .18s ease;
}
.beratung__start[aria-expanded="true"] .knopf__winkel { transform: rotate(180deg); }
/* Das <fieldset> braucht den Browser-Rahmen nicht: die Frage gliedert
   sich über Abstand und Schrift. Die drei Zurücksetzungen standen bis
   18.09.2026 als style-Attribut in index.php — und wurden von der CSP
   (style-src ohne 'unsafe-inline') stillschweigend verworfen. */
.beratung__frage { margin-bottom: 2.25rem; border: 0; padding: 0; margin-inline: 0; }
.beratung__frage legend { padding: 0; }
.beratung__nummer {
    font-family: var(--anzeige);
    font-size: .6875rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--salbei);
    display: block; margin-bottom: .5rem;
}
/* Am Rechner zwei Spalten: die vier Antworten sind so mit einem Blick
   erfassbar und die Seite wird deutlich kürzer. Am Handy untereinander. */
.beratung__wahl { display: grid; gap: .5rem; margin-top: 1rem; }
@media (min-width: 40rem) { .beratung__wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.beratung__option { position: relative; display: block; }
.beratung__option input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.beratung__option span {
    display: block;
    padding: .9rem 1.1rem;
    border: 1px solid var(--linie-stark);
    background: var(--weiss);
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.beratung__option span:hover { border-color: var(--salbei); }
.beratung__option input:checked + span {
    border-color: var(--oliv);
    background: var(--papier-tief);
    font-weight: 400;
}
.beratung__option input:focus-visible + span { outline: 2px solid var(--salbei); outline-offset: 2px; }

.ergebnis {
    margin-top: 2rem;
    border: 1px solid var(--linie-stark);
    background: var(--weiss);
    padding: 0;
}
.ergebnis[hidden] { display: none !important; }
.ergebnis__innen { display: grid; gap: 0; }
@media (min-width: 40rem) { .ergebnis__innen { grid-template-columns: 11rem minmax(0, 1fr); } }
.ergebnis__bild { background: var(--papier-tief); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ergebnis__bild img { width: 100%; max-width: 8rem; }
/* Der Textteil der Empfehlung liegt ausdruecklich OBEN auf. Auf einem
   iPhone wurde der Kaufknopf hier nicht angenommen — die wahrscheinliche
   Ursache war ein ueberstehendes Flakonbild aus der Spalte daneben, das den
   Tap abgefangen hat. Die Ursache ist oben behoben (min-width: 0), das hier
   ist der Guertel zum Hosentraeger. */
.ergebnis__text { padding: 1.75rem; position: relative; z-index: 1; }
.ergebnis__vorspann { font-family: var(--anzeige); font-size: .6875rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-zart); margin: 0 0 .35rem; }
.ergebnis__name { font-family: var(--anzeige); font-size: 1.5rem; font-weight: 300; margin: 0 0 .5rem; }
.ergebnis__grund { font-size: .9375rem; color: var(--tinte-weich); margin: 0 0 1.25rem; }

/* ------------------------------------------------------------ Duftkarten */

/* 18.09.2026 (Vorgabe Ralf): Die Karten standen bisher als Raster mit einer
   1px-Fuge aneinander. Jetzt trennt sie Weissraum — kein Strich, keine Kante.
   Das Bild sitzt dadurch kleiner in der Karte und ist ringsum weiss gefasst. */
.duefte { display: grid; gap: 3.5rem 2.5rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .duefte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.duft { background: var(--weiss); display: flex; flex-direction: column; }
.duft__bild {
    position: relative;
    background: var(--papier-tief);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Der weisse Rand um das Motiv. Seitlich buendig mit dem Text darunter
       (der traegt 1.5rem Polster), oben genauso viel. */
    margin: 1.5rem 1.5rem 0;
}
.duft__bild img { width: 100%; height: 100%; object-fit: cover; }
.duft__kopf { padding: 1.5rem 1.5rem 0; }
/* 18.09.2026 (Vorgabe Ralf, zweite Fassung): Der Duftname traegt jetzt das
   Schriftbild der grossen Ueberschrift — dieselbe Work Sans, dasselbe leichte
   Gewicht (500) und dieselbe Sperrung (-0,015em), nur kleiner und ohne
   Versalien. Vorher stand er in Versalien mit Gewicht 700, nachgebaut von
   wyldnotes.de; das war eine zweite Schriftsprache auf derselben Seite.
   Der Fettschnitt work-sans-700.woff2 bleibt trotzdem geladen — die
   Notenzeilen in der Faltung (.noten__zeile b) brauchen ihn.
   Die Farbe bleibt --tinte statt des reinen Logo-Gruens: bei dieser Groesse
   traegt das helle Gruen den Kontrast nicht sicher (4,47:1). */
.duft__name {
    font-family: var(--anzeige); font-size: 1.5rem; font-weight: 500;
    letter-spacing: -.015em; text-transform: none; margin: 0 0 .4rem;
    color: var(--tinte);
}
.duft__charakter { font-size: 1rem; color: var(--salbei); letter-spacing: .04em; margin: 0 0 .75rem; }
/* Der Claim ist kein zweiter Titel, sondern der erste Satz der Beschreibung.
   Deshalb traegt er EXAKT dieselbe Schrift wie .duft__text darunter — gleiche
   Groesse, gleiches Gewicht, gleiche Farbe (Vorgabe Ralf, 18.09.2026). Wer
   eines davon aendert, aendert beide. */
.duft__claim { font-size: .9375rem; font-weight: 400; color: var(--tinte-weich); line-height: 1.5; margin: 0 0 .75rem; }
.duft__koerper { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.duft__text { font-size: .9375rem; color: var(--tinte-weich); margin: 0; }

.duft__mehr { margin-top: auto; }
.duft__schalter {
    font-family: var(--anzeige); font-size: .6875rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    background: none; border: 0; border-top: 1px solid var(--linie);
    color: var(--oliv); padding: 1rem 0 0; width: 100%; text-align: left; cursor: pointer;
}
.duft__schalter:hover { color: var(--salbei); }
.duft__faltung[hidden] { display: none !important; }

/* Duftpyramide als Herkunftskarte */
/* 18.09.2026 (Vorgabe Ralf): Die Faltung nennt nur noch die Noten, ohne
   Erklaerung je Pflanze — "Kopfnoten: Bergamotte, Geranie". Verlauf und
   "Passt, wenn" sind aus der Anzeige raus; in inc/texte.php stehen sie
   weiter, denn 'passt_wenn' braucht die Duftberatung fuer ihre Begruendung. */
.noten { margin-top: .75rem; display: grid; gap: .5rem; }
.noten__zeile { font-size: .9375rem; color: var(--tinte-weich); margin: 0; line-height: 1.5; }
.noten__zeile b { font-weight: 700; color: var(--tinte); }

.noten__stufe { border-top: 1px solid var(--linie); padding-top: .75rem; }
.noten__titel {
    font-family: var(--anzeige); font-size: .625rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-zart);
    margin: 0 0 .5rem;
}
.noten__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.noten__pflanze { font-size: .875rem; }
.noten__pflanze b { font-weight: 400; color: var(--tinte); }
.noten__pflanze span { color: var(--tinte-weich); }

.duft__video { margin-top: 1rem; background: var(--papier-tief); }
.duft__video video { width: 100%; }

/* ------------------------------------------------------------- Markenteil */

/* Der Alkohol-Punkt steht ueber dem Raster, weil sein Text laenger ist als
   die uebrigen fuenf zusammen. Linker Balken in Salbeigruen als einzige
   Auszeichnung — keine Flaeche, das verlangt das Corporate Design. */
.marke__gross {
    background: var(--weiss);
    border-left: 3px solid var(--salbei);
    padding: 1.75rem 1.5rem;
    margin-top: 2.5rem;
}
.marke__gross h3 { font-size: 1.125rem; font-weight: 400; margin: 0 0 .75rem; }
.marke__gross p  { font-size: .9375rem; color: var(--tinte-weich); margin: 0 0 .75rem; max-width: 42em; }
.marke__gross p:last-child { margin-bottom: 0; }

/* Steht der hervorgehobene Block darueber, ruecken Raster und Block zusammen. */
.marke__gross + .marke__gitter { margin-top: 1px; }

.marke__gitter { display: grid; gap: 1px; background: var(--linie); margin-top: 2.5rem; }
@media (min-width: 34rem) { .marke__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 60rem) { .marke__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.marke__punkt { background: var(--weiss); padding: 1.5rem; }
.marke__punkt h3 { font-size: 1rem; font-weight: 400; }
.marke__punkt p { font-size: .9375rem; color: var(--tinte-weich); margin: 0; }

/* --------------------------------------------------------------- Natalie */

.natalie { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 48rem) { .natalie { grid-template-columns: 18rem minmax(0, 1fr); } }
.natalie__bild { background: var(--papier-tief); aspect-ratio: 4 / 5; display: flex;
    align-items: center; justify-content: center; }
.natalie__platzhalter { font-size: .8125rem; color: var(--tinte-zart); text-align: center; padding: 1.5rem; line-height: 1.5; }
.natalie__qualifikation { font-size: .8125rem; color: var(--tinte-zart); margin-top: 1rem; }

/* --------------------------------------------- Grafik „Das Versprechen" */

/* Die Grafik ersetzt seit 18.09.2026 den Abschnitt „Was diese Düfte ausmacht".
   Sie bringt ihren eigenen dunklen Grund mit, deshalb steht sie ohne Rahmen
   und ohne Polster — die Bahn gibt ihr den Seitenabstand. */
.versprechen { margin: 0; }
.versprechen img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------- Kundenstimmen */

/* Vier Zitate nebeneinander am Rechner, untereinander am Handy. Keine
   Kaesten, keine Schatten — nur eine Linie links, wie beim Rabatthinweis.
   Die Formensprache der Marke kennt keine abgerundeten Karten. */
.stimmen {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 44rem) { .stimmen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 72rem) { .stimmen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stimme {
    margin: 0;
    padding-left: 1.125rem;
    border-left: 2px solid var(--salbei);
}
.stimme__text {
    margin: 0;
    font-family: var(--anzeige);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.45;
    color: var(--tinte);
}
.stimme__wer { margin-top: .875rem; }
.stimme__name {
    display: block;
    font-size: .875rem;
    color: var(--tinte-weich);
}
.stimme__duft {
    display: block;
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinte-zart);
    margin-top: .25rem;
}

/* Die Zahlen dahinter. Vier Bloecke, gleiche Breite, duenne Trennlinien. */
.stimmen__zahlen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
    margin-top: 2.5rem;
}
@media (min-width: 44rem) { .stimmen__zahlen { grid-template-columns: repeat(4, 1fr); } }

.zahl {
    background: var(--weiss);
    padding: 1.25rem 1rem;
    text-align: center;
}
.zahl__wert {
    font-family: var(--anzeige);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--salbei);
    line-height: 1;
}
.zahl__gross {
    font-size: .8125rem;
    color: var(--tinte-zart);
    margin-left: .25rem;
}
.zahl__klein {
    display: block;
    font-size: .8125rem;
    color: var(--tinte-weich);
    margin-top: .5rem;
    line-height: 1.35;
}

/* 🔴 Pflichtangabe nach § 5b Abs. 3 UWG — nie verkleinern bis zur
   Unlesbarkeit und nie entfernen. Siehe inc/texte.php, 'stimmen'. */
.stimmen__herkunft {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--tinte-zart);
    max-width: 70ch;
    margin-top: 1.5rem;
}

/* ------------------------------------------------------------------- FAQ */

.faq { max-width: 48rem; margin-top: 2rem; border-top: 1px solid var(--linie); }
.faq__eintrag { border-bottom: 1px solid var(--linie); }
/* Die Frage ist eine <h3> um den Knopf herum — sie soll keinen eigenen
   Abstand mitbringen, der Knopf bringt sein Polster selbst mit. */
.faq__titel { margin: 0; }
.faq__frage {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: var(--anzeige); font-size: 1.0625rem; font-weight: 400; color: var(--tinte);
    padding: 1.25rem 2.5rem 1.25rem 0; position: relative; line-height: 1.35;
}
.faq__frage::after {
    content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.25rem; font-weight: 300; color: var(--salbei);
}
.faq__frage[aria-expanded="true"]::after { content: "–"; }
.faq__antwort { padding: 0 0 1.5rem; font-size: .9375rem; color: var(--tinte-weich); max-width: 62ch; }
.faq__antwort[hidden] { display: none !important; }

/* ------------------------------------------------- Abschließender Aufruf */

.schluss { text-align: center; }
.schluss .anmeldung { margin-inline: auto; }
.schluss__gitter { display: grid; justify-items: center; gap: 1.5rem; }
/* Wenn der Knopf unter das Feld rutscht, soll er mittig darunter stehen
   und nicht links am Feldrand kleben. */
.schluss .anmeldung__reihe { justify-content: center; }

/* --------------------------------------------------- Mitlaufender Knopf */

.mitlauf {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--weiss);
    border-top: 1px solid var(--linie-stark);
    padding: .75rem var(--rand);
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform .25s ease;
}
.mitlauf.sichtbar { transform: translateY(0); }
.mitlauf .knopf { width: 100%; }
@media (min-width: 56rem) { .mitlauf { display: none; } }

/* ==========================================================================
   LESESTRECKEN — die Unterseiten /fragen.php, /duft/<name>, /wissen/<thema>
   19.09.2026, zweite Fassung (Vorgabe Ralf: „die Unterseiten wirken wie
   unformatierte Textwuesten").

   Die Startseite ist eine Verkaufsflaeche: breite Bahn, Bild neben Text,
   kurze Absaetze. Die drei Unterseiten sind das Gegenteil — sie werden
   gelesen. Deshalb bekommen sie hier eine eigene, ruhige Anmutung mit
   denselben Mitteln wie die Startseite (rechte Winkel, keine Schatten,
   Salbeigruen nur als Linie):

     1. eine ZENTRIERTE, schmale Spalte statt einer 76rem-Bahn, an deren
        linkem Rand alles buendig steht (die Bahn selbst wird schmaler
        gestellt — dann teilen sich alle Kinder denselben Rand von selbst,
        ohne dass jedes einzeln zentriert werden muss);
     2. ein grosser, ruhiger VORSPANN, der die Ueberschrift traegt;
     3. RHYTHMUS aus Haarlinie + Weissraum statt aus Kaesten.

   🔴 Der Haken fuers Stylesheet ist `data-abschnitt` — dasselbe Attribut,
   das die Messung fuer den IntersectionObserver liest (siehe CLAUDE.md,
   „Ereignisnamen"). Wer einen Abschnittsnamen aendert, nimmt der Seite
   also nicht nur die Messreihe, sondern auch die Gestaltung. Sauberer
   waere eine eigene Klasse am <section>/<article> (Vorschlag: `lese`);
   dafuer muessten fragen.php, duft.php und wissen.php angefasst werden.
   ========================================================================== */

/* Die Lesebreite. 36rem sind bei der Outfit rund 68 Zeichen je Zeile —
   die Spanne, in der laengere Texte muehelos lesbar bleiben. Die Duftseite
   braucht mehr, weil dort Motiv und Text nebeneinander stehen und die
   Duftpyramide drei Spalten hat.
   Die Variable steht bewusst NICHT in :root, sondern nur an den drei
   Unterseiten-Abschnitten — die Startseite soll von diesem Kapitel gar
   nichts mitbekommen. */
.lese {
    --lese: 36rem;
    /* Oben knapp — die Brotkruemelzeile soll dicht unter dem Kopf stehen.
       Unten grosszuegig, damit der Kaufknopf Luft hat. */
    padding-block: clamp(2rem, 4.5vw, 3rem) clamp(3.5rem, 9vw, 6rem);
}
.lese--duft { --lese: 52rem; }

.lese > .bahn {
    max-width: calc(var(--lese) + 2 * var(--rand));
}

/* Ueberschriften: Auf der Startseite tragen h1 und h2 bewusst dieselbe
   Groesse (bis 3rem) — dort gliedert sich die Seite in gleichrangige
   Abschnitte. Auf einer Lesestrecke waere das falsch: Die Seite hat EIN
   Thema, alles darunter ist Zwischentitel. */
.lese h1 {
    font-size: clamp(1.875rem, 4.6vw, 2.5rem);
    margin-bottom: 1rem;
}
.lese h2 {
    font-size: clamp(1.3125rem, 2.8vw, 1.75rem);
    line-height: 1.25;
    margin-top: clamp(2.5rem, 6vw, 3.75rem);
    margin-bottom: .875rem;
}

/* Der Vorspann — der Absatz direkt unter der Ueberschrift. Er ist das
   wirksamste Mittel gegen die „Textwueste": groesser als der Fliesstext,
   dunkler, und mit einem breiten Abstand darunter, der den Kopf der Seite
   vom Koerper trennt. Etwas schmaler als die Spalte, damit er als eigener
   Block gelesen wird. */
.lese h1 + .fliess {
    font-size: clamp(1.125rem, 2.6vw, 1.375rem);
    line-height: 1.5;
    color: var(--tinte);
    max-width: 32rem;
    margin-bottom: clamp(1.75rem, 4.5vw, 2.75rem);
}

/* Fliesstext auf Lesestrecken: dunkler (6,3:1 statt 5,2:1) und mit mehr
   Durchschuss als auf der Startseite — dort stehen einzelne Saetze, hier
   ganze Absaetze. Die Breitenbegrenzung der .fliess-Regel (62ch) faellt in
   der schmalen Spalte weg: die Spalte IST das Mass. */
.lese--text .fliess {
    max-width: none;
    color: var(--tinte);
    line-height: 1.7;
}
.lese--duft .fliess {
    color: var(--tinte);
    line-height: 1.7;
}

/* Die Brotkruemelzeile traegt auf den Unterseiten einen Link. Der
   Vorgabe-Linkstil (gruen + Unterstrich) reisst die gesperrte
   Grossbuchstabenzeile auseinander — deshalb: Farbe erben, nur eine
   Haarlinie darunter. */
.lese .hut a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--linie-stark);
}
.lese .hut a:hover { color: var(--oliv); border-bottom-color: currentColor; }

/* Der Kaufknopf am Ende einer Lesestrecke braucht Abstand zum Text —
   sonst liest er sich wie der naechste Absatz. */
.lese .anmeldung {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* Kleingedrucktes (Quellenangabe, Stand): abgesetzt durch eine Haarlinie,
   nicht durch noch kleinere Schrift. */
.duftseite__quelle,
.wissen__quelle,
.wissen__stand {
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--tinte-zart);
}
/* Kein 62ch-Deckel, wo eine Haarlinie darueber laeuft — sie wuerde sonst
   mitten im Nichts enden. Der Satz unter der Kundenstimme bleibt aber auf
   der Breite des Zitats, sonst laeuft er ueber die ganze Duftseite. */
.lese--duft > .bahn > .duftseite__quelle { max-width: 40rem; }
.wissen__quelle { max-width: 62ch; }
.duftseite__quelle { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--linie); }
.wissen__quelle    { margin-top: 1rem; }
.wissen__stand     { margin-top: clamp(2rem, 5vw, 3rem); padding-top: .875rem; border-top: 1px solid var(--linie); }

/* ------------------------------------------- Unterseite „Häufige Fragen" */
/* 19.09.2026: Die sieben Fragen stehen hier OFFEN — keine Aufklapper.
   Gegliedert wird ueber Linie, Abstand und eine gezaehlte Nummer, nicht
   ueber Knoepfe. Die Nummer kommt aus einem CSS-Zaehler; im Quelltext
   steht sie nicht, sie ist reine Gliederungshilfe fuers Auge. */
.fragenseite { border-top: 1px solid var(--linie-stark); counter-reset: frage; }
.fragenseite__eintrag {
    border-bottom: 1px solid var(--linie);
    padding: clamp(1.75rem, 4.5vw, 2.5rem) 0;
    counter-increment: frage;
}
.lese--fragen .fragenseite__frage,
.fragenseite__frage {
    /* 🔴 Der doppelte Selektor ist Absicht: Die Frage ist eine <h2>, und
       die Ueberschriften-Regel der Lesestrecke oben ([data-abschnitt] h2)
       ist spezifischer als eine Klasse allein — sie schob sonst ihre
       3,75rem Vorlauf vor jede Frage, zusaetzlich zum Polster des
       Eintrags. */
    font-family: var(--anzeige);
    font-size: clamp(1.1875rem, 2.6vw, 1.4375rem);
    font-weight: 500;
    line-height: 1.25;
    /* Nicht das reine Logo-Gruen: Bei 19–23 px und Gewicht 500 gilt die
       Schrift noch nicht als „gross", der Text braucht also 4,5:1. */
    color: var(--salbei-tief);
    margin: 0 0 .75rem;
}
/* Die Nummer. Am Handy steht sie klein ueber der Frage, am breiten
   Bildschirm haengt sie links neben der Spalte im Weissraum. */
.fragenseite__frage::before {
    content: counter(frage, decimal-leading-zero);
    display: block;
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1;
    color: var(--tinte-zart);
    margin-bottom: .6rem;
}
.fragenseite__antwort {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--tinte);
}
/* Erst ab 66rem (1056 px) ist links neben der Spalte sicher Platz fuer die
   haengende Nummer — darunter wuerde sie aus dem Fenster ragen und die
   Seite waagerecht scrollbar machen. */
@media (min-width: 66rem) {
    /* Verankert an der FRAGE, nicht am Eintrag: sonst haengt die Nummer
       oben am Polster des Eintrags und damit weit ueber der Zeile, zu der
       sie gehoert. */
    .fragenseite__frage { position: relative; }
    .fragenseite__frage::before {
        position: absolute;
        left: -4.75rem;
        /* auf die erste Grundlinie der Frage eingeruckt */
        top: .45em;
        width: 3.25rem;
        margin: 0;
        text-align: right;
    }
}

/* ------------------------------------------------ Unterseiten je Duft */
/* 19.09.2026: /duft/<name>. Zweispaltig ab 50rem — Motiv links, Text rechts;
   darunter die Duftpyramide mit Erlaeuterung je Pflanze (die steht NUR hier,
   damit die Seite sich von der Karte auf der Startseite unterscheidet). */
.duftseite {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    margin: 0 0 clamp(2rem, 5vw, 3rem);
}
@media (min-width: 50rem) {
    .duftseite { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
}
.duftseite > * { min-width: 0; }
.duftseite__bild img { width: 100%; }
.duftseite__text .fliess { margin-bottom: 1rem; }

/* „Im Verlauf:" / „Passt, wenn:" — die beiden Saetze unter „Wie er sich
   traegt". Das <b> davor wird zur Marke ueber dem Satz, damit die zwei
   Angaben nicht als ein Textblock zusammenlaufen. Der Selektor greift
   bewusst nur bei den direkten Absaetzen der Duftseite. */
.lese--duft > .bahn > p.fliess > b {
    display: block;
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinte-zart);
    margin-bottom: .15rem;
}

/* ---- Die Duftpyramide ---------------------------------------------------
   Das Herzstueck der Duftseiten: drei Stufen nebeneinander, jede unter
   einer Salbei-Linie (Linie, keine Flaeche — Corporate Design), die
   Pflanzen darunter zeilenweise durch Haarlinien getrennt. So liest sich
   der Block wie eine Tabelle, ohne eine zu sein. Die roemische Ziffer
   kommt aus einem Zaehler und zeigt die Reihenfolge, in der der Duft sich
   entfaltet. */
.pyramide {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    counter-reset: stufe;
}
@media (min-width: 44rem) { .pyramide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pyramide > * { min-width: 0; }
.pyramide__stufe {
    border-top: 2px solid var(--salbei);
    padding-top: .875rem;
    counter-increment: stufe;
}
.pyramide__titel {
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--salbei-tief);
    margin: 0 0 .25rem;
}
.pyramide__titel::before {
    content: counter(stufe, upper-roman) " · ";
    color: var(--tinte-zart);
}
.pyramide__liste { margin: 0; }
.pyramide__liste dt {
    font-family: var(--anzeige);
    font-size: 1rem;
    font-weight: 500;
    color: var(--tinte);
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px solid var(--linie);
}
.pyramide__liste dt:first-child { margin-top: .5rem; padding-top: 0; border-top: 0; }
.pyramide__liste dd {
    margin: .15rem 0 0;
    font-size: .9375rem;
    color: var(--tinte-weich);
    line-height: 1.5;
}

/* ---- Die Kundenstimme ---------------------------------------------------
   Dieselbe Sprache wie die Zitate auf der Startseite (.stimme): eine
   Salbei-Linie links, sonst nichts. Hier steht nur EIN Zitat, deshalb darf
   es deutlich groesser sein — es ist das einzige Stueck Seite, das nicht
   vom Hersteller stammt. */
.duftseite__stimme {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    max-width: 40rem;
    border-left: 2px solid var(--salbei);
    padding-left: clamp(1.125rem, 3vw, 1.75rem);
}
.duftseite__stimme blockquote { margin: 0; }
.duftseite__stimme p {
    font-family: var(--anzeige);
    font-size: clamp(1.1875rem, 2.9vw, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--tinte);
    margin: 0;
}
.duftseite__stimme figcaption {
    font-family: var(--anzeige);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--tinte-zart);
    margin-top: .875rem;
    letter-spacing: .02em;
}
/* Der Gedankenstrich gehoert zur Zuschreibung, nicht zum Namen — deshalb
   steht er hier und nicht in duft.php. */
.duftseite__stimme figcaption::before { content: "— "; }

/* ---- Weiterlesen: die Nachbarseiten am Fuss der Lesestrecke -------------
   Eine Zeile aus gleich breiten Feldern, getrennt durch 1px Fuge. Der Pfeil
   rechts macht aus dem Feld eine Einladung; beim Zeigen hellt es auf Weiss
   auf und der Pfeil rueckt nach. */
.nachbarn {
    list-style: none;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    padding: 0;
    display: grid;
    /* 🔴 Bewusst KEINE gemalte Flaeche mit 1px-Fugen (so war es zuerst):
       Die Wissensseiten haben vier Nachbarn bei drei Spalten — die leere
       vierte Zelle wurde dann als grauer Klotz sichtbar. Jetzt traegt jedes
       Feld seine eigene Linie oben, eine leere Zelle ist unsichtbar. */
    gap: 0 clamp(1.5rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--linie);
}
@media (min-width: 44rem) {
    /* auto-fit statt fester Spaltenzahl: die Duftseite hat drei Nachbarn,
       die Wissensseiten vier. */
    .nachbarn { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.nachbarn > * { min-width: 0; display: flex; border-top: 1px solid var(--linie); }
.nachbarn a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: 1.125rem 2.25rem 1.25rem 0;
    text-decoration: none;
    position: relative;
}
.nachbarn a::after {
    content: "→";
    position: absolute;
    right: .375rem;
    top: 1.05rem;
    font-family: var(--anzeige);
    font-size: 1rem;
    color: var(--salbei);
    transition: transform .18s ease;
}
.nachbarn a:hover::after { transform: translateX(.25rem); }
.nachbarn__name {
    display: block;
    font-family: var(--anzeige);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--tinte);
    transition: color .18s ease;
}
.nachbarn a:hover .nachbarn__name { color: var(--salbei-tief); }
.nachbarn__charakter { display: block; font-size: .875rem; color: var(--tinte-weich); margin-top: .15rem; }

/* Der Abschnitt, der die Nachbarseiten traegt, steht ausserhalb der
   Lesestrecke (eigene <section>). Damit er nicht wieder ueber die volle
   76rem-Bahn laeuft, bekommt er dasselbe Mass wie die Duftseite. */
.weiterlesen > .bahn {
    /* 52rem = dasselbe Mass wie die Duftseite (--lese dort); hier als Zahl,
       weil dieser Abschnitt ausserhalb der Lesestrecke steht und die
       Variable deshalb nicht erbt. */
    max-width: calc(52rem + 2 * var(--rand));
}
.weiterlesen h2 {
    font-size: clamp(1.3125rem, 2.8vw, 1.75rem);
    margin-bottom: .5rem;
}
/* Der Satz, der unter der Ueberschrift auf die Nachbarseiten hinfuehrt. */
.weiterlesen > .bahn > p:not(.zurueck) {
    max-width: 62ch;
    color: var(--tinte-weich);
    margin: 0;
}

/* Der Rueckweg am Seitenende (auch im Impressum und in der
   Datenschutzerklaerung). Kein Fliesstext-Link, sondern eine kleine, ruhige
   Zeile. Den Abstand nach oben setzt weiter unten die Rechtstext-Regel —
   hier bewusst nicht noch einmal. */
.zurueck {
    font-family: var(--anzeige);
    font-size: .875rem;
    color: var(--tinte-zart);
}
.zurueck a {
    color: var(--salbei-tief);
    text-decoration: none;
    border-bottom: 1px solid var(--linie-stark);
    padding-bottom: .15rem;
}
.zurueck a:hover { color: var(--oliv); border-bottom-color: currentColor; }

/* --------------------------------------------- Themenseiten /wissen/… */

/* Groesse und Farbe des Vorspanns kommen aus der gemeinsamen Regel oben. */
/* Jeder Abschnitt beginnt mit einer Haarlinie. Das ist der ganze Rhythmus
   dieser Seiten: Linie – Zwischentitel – Absaetze – viel Luft. */
.wissen__block {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--linie);
}
.wissen__block h2 { margin-top: 0; }
.wissen__block .fliess { margin-bottom: 1.1rem; }

/* ---- Die Vergleichstabelle ---------------------------------------------
   Vier Spalten passen nicht in die Lesespalte und schon gar nicht auf ein
   Handy. Deshalb zwei Zustaende:
     ab  56rem: die Tabelle bricht aus der Lesespalte aus und wird breiter
                als der Text — sie bleibt dabei auf derselben Mittelachse.
     bis 56rem: keine Tabelle mehr, sondern vier Bloecke untereinander;
                die Spaltenkoepfe wandern als kleine Marken vor die Werte.
   Die Marken kommen aus dem Markup (data-spalte).
   Wer die Kopfzeile in wissen.php umbenennt, muss sie hier mitaendern.
   Sauberer waere ein data-spalte="…" je <td> und content: attr(data-spalte)
   — dafuer muesste wissen.php angefasst werden. */
.vergleich { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.vergleich table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.vergleich th, .vergleich td {
    text-align: left;
    vertical-align: top;
    padding: .875rem 1.25rem .875rem 0;
    border-bottom: 1px solid var(--linie);
}
.vergleich thead th {
    font-family: var(--anzeige);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinte-zart);
    padding-top: 0;
    border-bottom: 1px solid var(--linie-stark);
}
.vergleich tbody th {
    font-family: var(--anzeige);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--tinte);
}
.vergleich tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie-stark); }
.vergleich tbody th a:hover { color: var(--salbei-tief); border-bottom-color: currentColor; }
.vergleich td { color: var(--tinte-weich); line-height: 1.55; }

@media (min-width: 56rem) {
    /* Feste Spaltenmasse, sonst quetscht der lange Text der letzten Spalte
       die drei kurzen zusammen ("cremig und / suess"). */
    .vergleich thead th:nth-child(1) { width: 10rem; }
    .vergleich thead th:nth-child(2) { width: 9.5rem; }
    .vergleich thead th:nth-child(3) { width: 11.5rem; }

    /* Der Ausbruch: Nicht die Tabelle allein bricht aus der Lesespalte aus,
       sondern der ganze Abschnitt — sonst haengen Zwischentitel und
       Quellenangabe schmaler daneben und die Kanten stimmen nicht mehr.
       Breite und halbe Breite muessen zusammenpassen, sonst steht der Block
       nicht mittig. 52rem ist dasselbe Mass wie die Duftseite; der zweite
       Term deckelt ihn am Fenster, damit nie waagerecht gescrollt wird. */
    .wissen__block:has(.vergleich) {
        width: min(52rem, calc(100vw - 2 * var(--rand)));
        margin-inline: calc(50% - min(26rem, (100vw - 2 * var(--rand)) / 2));
    }
    .vergleich { overflow-x: auto; }
    .vergleich tbody th { white-space: nowrap; }
}

@media (max-width: 55.99rem) {
    .vergleich table, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td {
        display: block;
        width: auto;
    }
    /* Die Kopfzeile bleibt im Quelltext stehen (Vorlesegeraete), ist aber
       nicht mehr zu sehen — dieselbe Technik wie beim Honigtopf. */
    .vergleich thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .vergleich tbody tr {
        border-top: 1px solid var(--linie-stark);
        padding: 1.25rem 0 1.5rem;
    }
    .vergleich tbody tr:first-child { border-top: 0; padding-top: 0; }
    .vergleich tbody th { padding: 0 0 .75rem; border: 0; font-size: 1.125rem; }
    .vergleich tbody td { padding: .75rem 0 0; border: 0; }
    .vergleich tbody td::before {
        display: block;
        font-family: var(--anzeige);
        font-size: .6875rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--tinte-zart);
        margin-bottom: .1rem;
    }
    /* 19.09.2026: Die Marke kommt aus dem Markup (data-spalte in wissen.php),
       nicht mehr als fester Text aus dem Stylesheet — sonst laufen Kopfzeile
       und Handy-Ansicht bei einer Umbenennung auseinander. */
    .vergleich tbody td::before { content: attr(data-spalte); }
}

/* Der Link von der Duftkarte auf die Duftseite (Startseite) */
.duft__mehrlink {
    display: inline-block; margin-top: .875rem;
    font-family: var(--anzeige); font-size: .875rem; font-weight: 500;
    letter-spacing: .02em; color: var(--salbei-tief);
}

/* ------------------------------------------------------------------- Fuß */

.fuss {
    border-top: 1px solid var(--linie);
    background: var(--papier);
    padding-block: 2.5rem;
    font-size: .8125rem;
    color: var(--tinte-zart);
}
.fuss__gitter { display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .fuss__gitter { grid-template-columns: 1.4fr 1fr; } }
.fuss p { margin: 0 0 .625rem; line-height: 1.55; max-width: 60ch; }
.fuss a { color: var(--tinte-weich); }
.fuss__links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }

/* Platz, damit der mitlaufende Knopf nichts verdeckt */
@media (max-width: 55.999rem) { .fuss { padding-bottom: 6rem; } }

/* ------------------------------------------------------- Rechtstext-Seiten */

.rechtstext { max-width: 46rem; padding-block: 3rem 4rem; }
.rechtstext h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: 2rem; }
.rechtstext h2 { font-size: 1.25rem; font-weight: 400; margin-top: 2.5rem; margin-bottom: .75rem; }
.rechtstext h3 { font-size: 1rem; font-weight: 400; margin-top: 1.75rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-weich); font-size: .9375rem; }

/* Der von Young Living vorgeschriebene Pflichttext im Impressum (Policies
   Abschnitt 5.7 b). Er muss auffindbar sein, darf im Wortlaut aber nicht
   verändert werden — deshalb abgesetzt statt im Fließtext untergebracht. */
.rechtstext blockquote {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--salbei);
    background: var(--papier-tief);
}
.rechtstext blockquote p { margin: 0 0 .5rem; color: var(--tinte); }
.rechtstext blockquote p:last-child { margin-bottom: 0; }
.rechtstext ul { padding-left: 1.2rem; }
/* Rückweg am Ende von Impressum und Datenschutzerklärung. */
.zurueck { margin-top: 3rem; }
.rechtstext li { margin-bottom: .4rem; }