/* ============================================================
 *  Duftmoment · Lesetypografie fuer Lexikon- und Ratgeberseiten
 *
 *  Dieser Block lag frueher als <style> in jeder einzelnen der 214
 *  Lese-Seiten -- rund 8,5 KB, die der Browser bei jedem Seitenaufruf
 *  neu laden musste. Als eigene Datei laedt er einmal und liegt danach
 *  im Cache.
 *
 *  Bis auf das Spaltenlayout auf breiten Bildschirmen ist alles
 *  identisch. Unterschieden wird ueber eine Klasse am <body>:
 *    .lese-lexikon   drei Spalten: Rail | Lesekern | gleich breiter
 *                    Balance-Rand, damit der Text mittig steht
 *    .lese-ratgeber  zwei Spalten: Rail | Lesekern
 *  Ohne eine der Klassen bleibt es beim einspaltigen Lesefluss.
 * ============================================================ */


/* ===== DM-READING-V2 · Redaktionelles Artikel-Leselayout ===== */
:root{
  --kicker:#8a5620;               /* vertiefter Amber fuer Rubrik-Text (AA) */
  --measure:66ch;                 /* Lesekern ~640px @19px -> ~66 Zeichen/Zeile */
  --measure-lead:60ch;
  --wide:46rem;                   /* Breakout fuer Hero/breite Bloecke */
  --fs-body:clamp(1.0625rem, 1rem + .45vw, 1.1875rem); /* 17px -> 19px */
  --rhythm:1.6rem;
}

/* Lese-Fortschrittsbalken */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--amber));
  z-index:60;transition:width .12s linear;will-change:width;border:0}
@media(prefers-reduced-motion:reduce){.read-progress{transition:none}}

/* Artikel-Container als Content-Grid (schmaler Lesekern + gezielte Breakouts) */
main{padding:0 0 24px}
.reading-shell{max-width:var(--wrap);margin:0 auto}
article.content{
  display:grid;
  grid-template-columns:
    [full-start] minmax(1rem,1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure))/2))
    [content-start] min(var(--measure), 100% - 2rem) [content-end]
    minmax(0, calc((var(--wide) - var(--measure))/2)) [wide-end]
    minmax(1rem,1fr) [full-end];
  max-width:none;padding:8px 0 0;
  font-size:var(--fs-body);line-height:1.72;color:var(--ink);
  text-rendering:optimizeLegibility;
}
article.content > *{grid-column:content;min-width:0}
article.content > .art-media,
article.content > figure.art-media{grid-column:wide}

/* Kopf: Kicker -> H1 -> Lead -> Byline -> Hero */
.content .eyebrow{font-family:var(--sans);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--kicker);margin:0 0 .7rem}
.content h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.35rem,1.6rem + 3.2vw,3.4rem);line-height:1.07;
  letter-spacing:-.015em;color:var(--mahogany);margin:0 0 .5rem;text-wrap:balance}
.content .lead{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.28rem,1.1rem + .9vw,1.55rem);line-height:1.4;color:var(--mahogany);
  max-width:var(--measure-lead);margin:.6rem 0 0;opacity:.92}

/* Byline mit Lesezeit */
.byline{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin:1.4rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);max-width:var(--measure-lead)}
.byline .who{color:var(--mahogany);font-weight:600}
.byline .sep{color:var(--gold)}

/* Hero-Medien: festes ruhiges Verhaeltnis, gekappt, statt bildschirmhoch */
.art-media{margin:2.4rem 0 .5rem}
.art-media img,.art-media video{width:100%;display:block;
  aspect-ratio:3/2;height:auto;max-height:64vh;object-fit:cover;object-position:center 32%;
  border-radius:14px;box-shadow:0 30px 60px -34px rgba(58,36,23,.5);
  border:1px solid rgba(199,154,91,.22)}
.art-media figcaption{font-family:var(--sans);font-size:.82rem;line-height:1.45;
  color:var(--ink-soft);margin-top:.7rem;max-width:var(--measure)}
.art-media figcaption .credit{opacity:.7;font-size:.76rem}

/* Fliesstext-Rhythmus */
.content p{margin:0 0 1.2em;text-wrap:pretty;hyphens:none}
.content h2{font-family:var(--serif);font-weight:600;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.05rem);line-height:1.18;letter-spacing:-.01em;
  color:var(--mahogany);margin:3rem 0 .7rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--line);text-wrap:balance;scroll-margin-top:5.5rem}
.content h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.32rem,1.1rem + .6vw,1.5rem);
  line-height:1.25;color:var(--mahogany);margin:2rem 0 .5rem;scroll-margin-top:5.5rem}
.content ul,.content ol:not(.schritte){margin:0 0 1.2em 1.3em}
.content li{margin-bottom:.5em}
.content a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(169,111,62,.4);transition:color .2s,text-decoration-color .2s}
.content a:hover{color:var(--mahogany);text-decoration-color:var(--amber)}

/* Kurzantwort = "Das Wichtigste in Kuerze" */
.kurz{background:linear-gradient(140deg,rgba(199,154,91,.12),rgba(247,241,231,.55));
  border:1px solid rgba(199,154,91,.32);border-left:3px solid var(--gold);
  border-radius:14px;padding:20px 22px;margin:2.2rem 0}
.kurz .lbl,.bx .lbl{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kicker);margin-bottom:8px;font-weight:600}
.kurz p{margin:0;font-size:1.05em}

/* Boxen: Praxis / Beratung */
.bx{border:1px solid rgba(199,154,91,.26);border-radius:14px;padding:20px 22px;margin:2.6rem 0;
  background:rgba(253,250,244,.75)}
.bx.erfahrung{border-left:3px solid var(--mahogany)}
.bx.praxis{border-left:3px solid var(--amber)}
.bx :last-child{margin-bottom:0}

/* Steckbrief (Lexikon) */
.steckbrief{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:2.4rem 0}
.sb{background:#fff;border:1px solid rgba(199,154,91,.25);border-radius:12px;padding:14px 16px}
.sb .k{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:5px;font-weight:600}
.sb .v{font-size:.95rem;color:var(--ink)}

/* Schritt-fuer-Schritt */
ol.schritte{counter-reset:s;list-style:none;padding:0;margin:2rem 0}
ol.schritte li{counter-increment:s;position:relative;padding:2px 0 20px 56px}
ol.schritte li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;
  border-radius:50%;background:var(--mahogany);color:var(--cream);display:flex;align-items:center;
  justify-content:center;font-size:.95rem;font-weight:600;font-family:var(--serif)}
ol.schritte li strong{display:block;margin-bottom:3px;color:var(--mahogany)}

/* Mythos / Fakt */
.mf{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2.4rem 0}
.mf>div{border-radius:14px;padding:16px 18px;border:1px solid}
.mf .mythos{background:rgba(165,64,42,.06);border-color:rgba(165,64,42,.28)}
.mf .fakt{background:rgba(90,122,82,.08);border-color:rgba(90,122,82,.32)}
.mf b{display:block;margin-bottom:6px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.mf .mythos b{color:#a5402a}.mf .fakt b{color:#4a6a44}
.mf p{margin:0;font-size:.97em}

/* Mini-Check */
.check{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:2.2rem 0}
.check .c{background:#fff;border:1px solid rgba(199,154,91,.25);border-radius:12px;padding:16px}
.check .c b{color:var(--mahogany)}
.check .c p{font-size:.9em;color:var(--ink-soft);margin:6px 0 0}

/* FAQ */
.faq{margin:3rem 0 0}
.faq>h2{margin-bottom:.4rem}
.faq h3{font-size:1.18rem;margin:1.6rem 0 .3rem}
.faq p{margin:0 0 .4rem}

/* Callout / CTA */
.callout{background:linear-gradient(140deg,var(--cream),rgba(247,241,231,.5));
  border:1px solid rgba(199,154,91,.3);border-left:3px solid var(--gold);
  border-radius:14px;padding:22px 24px;margin:3rem 0}
.callout :last-child{margin-bottom:0}

/* Weiterlesen + Autorzeile */
.content > h2 + ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.autorline{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-soft)}
.autorline b{color:var(--mahogany)}

/* Inhaltsverzeichnis (Sticky-Rail ab Desktop) */
.toc{font-family:var(--sans);font-size:.875rem}
.toc[hidden]{display:none}
.toc .toc-title{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--kicker);
  font-weight:600;margin:0 0 .7rem}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc li{margin:0}
/* Bewusst .toc ul a und nicht .toc a: im Duftlexikon steht die Seitenkarte
   mit den Notenchips innerhalb desselben Rail-Containers. Deren Links
   sitzen nicht in einer Liste -- ein blosses .toc a wuerde ihnen das
   Listen-Padding aufzwingen und dem Mixer-Knopf sein inline-flex nehmen. */
.toc ul a{display:block;padding:.32rem 0 .32rem .9rem;margin-left:-1px;color:var(--ink-soft);
  text-decoration:none;line-height:1.35;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.toc ul a:hover{color:var(--ink)}
.toc ul a.active{color:var(--mahogany);border-left-color:var(--gold);font-weight:600}


/* Layout: Sticky-ToC-Rail nur auf breiten Screens */
@media(max-width:1199px){ .toc{display:none} }

/* --- Duftlexikon: drei Spalten mit Balance-Rand --- */
@media(min-width:1200px){
  /* Leseseite darf etwas breiter atmen als der Standard-Wrap (1080px),
     damit Rail + Lesekern + symmetrischer Rand nebeneinander Platz haben */
  .lese-lexikon main > .wrap{max-width:79rem}
  /* Drei Spalten: Rail | zentrierter Lesekern | gleich breiter Balance-Rand.
     Weil Spalte 1 und 3 identisch breit sind, sitzt der Artikel optisch
     exakt in der Seitenmitte statt nach rechts zu driften. */
  .lese-lexikon .reading-shell{max-width:none;display:grid;
    grid-template-columns:13rem minmax(0,var(--wide)) 13rem;
    column-gap:2.6rem;justify-content:center;align-items:start}
  .lese-lexikon .reading-shell > .toc{grid-column:1;position:sticky;top:5.2rem;padding-top:8px}
  .lese-lexikon .reading-shell > article.content{grid-column:2}
}

/* --- Ratgeber: zwei Spalten --- */
@media(min-width:1200px){
  .lese-ratgeber .reading-shell{display:grid;grid-template-columns:14.5rem minmax(0,1fr);
    column-gap:3rem;align-items:start}
  .lese-ratgeber .reading-shell > .toc{position:sticky;top:5.2rem;padding-top:8px}
  .lese-ratgeber .reading-shell > article.content{grid-column:2}
}


/* Mobile-Feinschliff */
@media(max-width:600px){
  .art-media img,.art-media video{aspect-ratio:4/5;max-height:70vh;object-position:center 30%}
  .art-media{margin:1.8rem 0 .5rem}
  .content h2{margin-top:2.4rem}
}
