/*
Theme Name: Somatic Piano Piano
Theme URI: https://ppiano.de
Author: Somatic Web (Jan Wolk)
Author URI: https://somatic-web.de
Description: Child-Theme für ppiano.de — eine digitale Reportage-Zeitschrift über Slow Travel und Bikepacking in Italien. Basiert auf somatic-base (BEM-Komponentensatz für WP Draft). Brand-Layer mit Piano-Piano-Tokens (Pino/Ocra/Papiro/Inchiostro), Bodoni Moda + Lora, scharfe Kanten, keine Shadows. Magazin-Komponenten aus dem Piano-Piano-Design-System (site-header, site-footer, hero, article-card, pq-block, stats-block, newsletter) ergänzen den Standard-Komponentensatz.
Template: wpdraft
Version: 1.0.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://somatic-web.de
Text Domain: somatic-piano-piano
*/

/* =========================================================================
   SOMATIC PIANO PIANO — Brand-Layer auf somatic-base
   =========================================================================

   Struktur:
     1.  DESIGN TOKENS (Piano-Piano-Werte + somatic-base-Aliases)
     2.  BASE / RESET
     3.  TYPOGRAPHY (Bodoni Moda + Lora, Editorial-Helpers)
     4.  CONTAINER
     5.  SECTION
     6.  EYEBROW
     7.  ACCENT STROKE
     8.  BUTTONS (somatic-base)
     9.  HERO (somatic-base — wird unten von magazine-Hero überschrieben)
     10. STATS
     11. PROCESS
     12. CARD
     13. CARD GRID
     14. PRICING CARD
     15. TESTIMONIAL
     16. FAQ
     17. CTA BLOCK
     18. CONTACT INFO
     19. NEWSLETTER (somatic-base — wird unten von magazine-Newsletter überschrieben)
     20. AUTHOR / CURATOR TAG
     21. HAIRLINE
     22. IMAGES
     23. FORM FIELDS
     24. HEADER & NAV (somatic-base — wird unten von magazine-Header überschrieben)
     25. FOOTER (somatic-base — wird unten von magazine-Footer überschrieben)
     26. ICON UTILITIES
     27. A11Y HELPERS
     28. PRINT
     29. PIANO PIANO MAGAZINE COMPONENTS (aus design-system/ui_kits/magazine)
     30. BRAND-CUSTOM (leer — projektspezifische Sonderfälle hier hinten)

   Brand-Verbote (aus design-system/SKILL.md):
     - radius: 0 überall
     - keine Shadows
     - kein Sans-Serif
     - Ocra (--ocra) trägt nie Text auf Papiro → --ocra-profonda für Text
     - keine Emojis, icon-shy
   ========================================================================= */

/* === 0. WEBFONTS (lokal gehostet, DSGVO-konform) ========================
   Statische woff2-Files unter /assets/fonts/. Browser lädt nur die Varianten,
   die im CSS tatsächlich referenziert werden — die Liste ist trotzdem
   vollständig, damit künftige Gewicht-Änderungen ohne weiteren Upload
   funktionieren.
   ========================================================================= */

/* Bodoni Moda — Display */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-700italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-800italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/bodoni-moda-v28-latin-900italic.woff2') format('woff2');
}

/* Lora — Body */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin-700italic.woff2') format('woff2');
}

/* === 1. DESIGN TOKENS ==================================================== */
:root {
  /* ─── Piano Piano Brand Palette (primary tokens) ──────────── */
  --pino:             #2C4A2D;   /* Primary — Mediterranean pine green */
  --ocra:             #C9924A;   /* Accent — never as body text on Papiro */
  --papiro:           #F4EBD9;   /* Page background — sun-warmed cream */
  --inchiostro:       #211D17;   /* Text — warm fountain-pen ink */

  /* Extended palette */
  --papiro-chiaro:    #FBF7EE;
  --papiro-scuro:     #E8DCC2;
  --pino-scuro:       #1A2E1B;
  --ocra-profonda:    #8E5F1F;   /* AA-safe ocre text on Papiro */
  --inchiostro-lieve: #57504A;

  /* ─── Semantic Aliases (Piano Piano) ──────────────────────── */
  --bg:               var(--papiro);
  --bg-elevated:      var(--papiro-chiaro);
  --bg-sunken:        var(--papiro-scuro);
  --bg-hover:         var(--papiro-scuro);
  --bg-inverse:       var(--pino);
  --fg:               var(--inchiostro);
  --fg-muted:         var(--inchiostro-lieve);
  --fg-inverse:       var(--papiro);
  --fg-accent:        var(--ocra-profonda);
  --border:           var(--papiro-scuro);
  --border-strong:    var(--inchiostro-lieve);
  --border-accent:    var(--ocra);
  --primary:          var(--pino);
  --primary-hover:    var(--pino-scuro);
  --accent:           var(--ocra);
  --rule:             var(--ocra);
  --rule-soft:        var(--papiro-scuro);

  /* ─── somatic-base Token Aliases (so dass somatic-base-CSS weiterhin greift) ─── */
  --crema:            var(--papiro);
  --crema-pura:       var(--papiro-chiaro);
  --crema-profonda:   var(--papiro-scuro);
  --caffelatte:       var(--papiro-scuro);
  --espresso:         var(--inchiostro);
  --espresso-tenue:   var(--inchiostro-lieve);
  --ottone:           var(--ocra);
  --ottone-scuro:     var(--ocra-profonda);
  --ottone-chiaro:    #D9B670;
  --linea:            rgba(33, 29, 23, 0.12);
  --oliva:            var(--pino);
  --terracotta:       #B5532A;

  /* ─── Type Families ───────────────────────────────────────── */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --font-body:    'Lora', 'Georgia', 'Times New Roman', serif;

  /* ─── Type Scale (Desktop — Piano Piano) ──────────────────── */
  --fs-h1:            72px;
  --fs-h2:            48px;
  --fs-h3:            32px;
  --fs-h4:            24px;
  --fs-lead:          22px;
  --fs-body:          18px;
  --fs-body-lg:       20px;
  --fs-small:         14px;
  --fs-label:         12px;
  --fs-caption:       14px;
  --fs-meta:          12px;

  /* ─── Type Scale (Mobile — alias variables for somatic-base compatibility) ─── */
  --fs-h1-m:          44px;
  --fs-h2-m:          32px;
  --fs-h3-m:          24px;
  --fs-h4-m:          20px;
  --fs-body-lg-m:     19px;
  --fs-body-m:        17px;
  --fs-small-m:       13px;

  /* ─── Line Heights ────────────────────────────────────────── */
  --lh-h1:            1.05;
  --lh-h2:            1.10;
  --lh-h3:            1.20;
  --lh-h4:            1.30;
  --lh-lead:          1.55;
  --lh-body:          1.70;
  --lh-tight:         1.40;
  --lh-caption:       1.40;

  /* ─── Letter-spacing ──────────────────────────────────────── */
  --ls-h1:            -0.025em;
  --ls-h2:            -0.02em;
  --ls-h3:            -0.01em;
  --ls-meta:          0.15em;

  /* ─── Spacing (8px base) ──────────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 192px;

  /* ─── Layout ──────────────────────────────────────────────── */
  --container:        1200px;
  --container-max:    1200px;
  --reading:          680px;
  --reading-column:   680px;

  /* ─── Edges (Piano Piano: sharp like a book page) ─────────── */
  --radius:           0;
  --radius-sharp:     0;
  --radius-pill:      999px;   /* nur für reine Utility-Elements (Avatar) */
  --hairline:         1px;
  --rule-thick:       3px;

  /* ─── Motion ──────────────────────────────────────────────── */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:         150ms;
  --dur:              300ms;
  --dur-slow:         500ms;
  --transition:       300ms var(--ease);
  --transition-slow:  500ms var(--ease);

  /* ─── Accent-Stroke ───────────────────────────────────────── */
  --accent-stroke-w:  32px;
  --accent-stroke-h:  2px;
}

@media (max-width: 720px) {
  :root {
    --fs-h1:        44px;
    --fs-h2:        32px;
    --fs-h3:        24px;
    --fs-h4:        20px;
    --fs-lead:      19px;
    --fs-body:      17px;
    --fs-body-lg:   18px;
    --fs-caption:   13px;
    --fs-meta:      11px;
    --space-7:      48px;
  }
}

/* === 2. BASE / RESET ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

::selection { background: var(--ocra-profonda); color: var(--papiro); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration:  0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* === 3. TYPOGRAPHY ======================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-h4); }

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}

p { margin: 0 0 var(--space-3); }

strong, b { font-weight: 600; }
small, .text-small { font-size: var(--fs-small); }

a {
  color: var(--pino);
  text-decoration: underline;
  text-decoration-color: var(--ocra);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
a:hover {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--pino);
}

.lead, .intro, .lead-para {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}

.eyebrow, .meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow-accent {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--fg-accent);
}

.it, em.it {
  font-style: italic;
  color: var(--fg-accent);
}

.dropcap::first-letter,
.dropcap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  color: var(--pino);
  font-size: 6em;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
}

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.3;
  color: var(--pino);
  border-top: var(--hairline) solid var(--ocra);
  border-bottom: var(--hairline) solid var(--ocra);
  padding: var(--space-4) 0;
  margin: var(--space-5) 0;
  text-align: center;
}

.section-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ocra-profonda);
  font-size: 18px;
  letter-spacing: 0.02em;
}

hr, .rule {
  border: 0;
  border-top: var(--hairline) solid var(--ocra);
  margin: var(--space-5) 0;
}
.rule-soft { border-top-color: var(--rule-soft); }

blockquote {
  margin: var(--space-5) 0;
  padding: 0 0 0 var(--space-4);
  border-left: 1px solid var(--border-accent);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--fg);
}

/* === 4. CONTAINER ======================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow { max-width: var(--reading); }
.container--wide   { max-width: 1400px; }

/* === 5. SECTION ========================================================== */
.section {
  padding-block: var(--space-6);
  background: var(--bg);
}
@media (min-width: 768px)  { .section { padding-block: var(--space-7); } }

.section--dense { padding-block: var(--space-5); }
.section--tight { padding-block: var(--space-6); }

.section--dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--fg-inverse); }
.section--dark a  { color: var(--ottone-chiaro); }
.section--dark .eyebrow { color: var(--ottone-chiaro); }

.section--elevated { background: var(--bg-elevated); }

.section--hero {
  padding-block: var(--space-7) var(--space-6);
}
@media (min-width: 1024px) {
  .section--hero { padding-block: var(--space-9) var(--space-8); }
}

/* === 6. EYEBROW LABEL ==================================================== */
/* (siehe Editorial Helpers oben — .eyebrow / .meta sind dort definiert) */

/* === 7. ACCENT STROKE ==================================================== */
.accent-stroke {
  display: block;
  width: var(--accent-stroke-w);
  height: var(--accent-stroke-h);
  background: var(--border-accent);
  border: 0;
  margin: var(--space-3) 0 var(--space-4);
}
.accent-stroke--center  { margin-inline: auto; }
.accent-stroke--on-dark { background: var(--ottone-chiaro); }

/* === 8. BUTTONS (somatic-base) =========================================== */
.btn {
  --btn-bg:     var(--pino);
  --btn-fg:     var(--papiro);
  --btn-border: var(--pino);
  --btn-bg-h:   var(--pino-scuro);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 16px 32px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover  { background: var(--btn-bg-h); color: var(--btn-fg); border-color: var(--btn-bg-h); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn--primary   { --btn-bg: var(--pino); --btn-fg: var(--papiro); --btn-border: var(--pino); --btn-bg-h: var(--pino-scuro); }
.btn--secondary { --btn-bg: transparent;  --btn-fg: var(--pino);   --btn-border: var(--pino); --btn-bg-h: var(--pino); }
.btn--secondary:hover { color: var(--papiro); }
.btn--ghost     { --btn-bg: transparent;  --btn-fg: var(--fg);     --btn-border: transparent; --btn-bg-h: var(--bg-hover); padding: 12px 20px; }
.btn--on-dark   { --btn-bg: var(--papiro); --btn-fg: var(--pino);  --btn-border: var(--papiro); --btn-bg-h: var(--papiro-chiaro); }
.btn--on-dark.btn--secondary { --btn-bg: transparent; --btn-fg: var(--papiro); --btn-border: var(--papiro); --btn-bg-h: var(--papiro); }
.btn--on-dark.btn--secondary:hover { color: var(--pino); }
.btn--block     { display: flex; width: 100%; }
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* === 9. HERO (somatic-base — content-section hero, wird unten überschrieben) === */
.hero {
  --hero-headline: clamp(var(--fs-h1-m), 5vw + 1rem, var(--fs-h1));
  padding-block: var(--space-7);
}
@media (min-width: 1024px) { .hero { padding-block: var(--space-9) var(--space-8); } }

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--hero-headline);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}
.hero__lede {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-style: italic;
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 0 var(--space-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero--dark { background: var(--bg-inverse); color: var(--fg-inverse); }
.hero--dark .hero__headline { color: var(--fg-inverse); }
.hero--dark .hero__lede     { color: var(--ottone-chiaro); }

.hero--split .hero__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero--split .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
}
.hero__media img,
.hero__media picture { border-radius: 0; }

/* === 10. STATS (somatic-base) ============================================ */
.stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.stats__item { text-align: left; }
.stats--center .stats__item { text-align: center; }

.stats__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--pino);
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.stats__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* === 11. PROCESS STEPS =================================================== */
.process {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .process { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }

.process__step {
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.process__number {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ocra-profonda);
  margin-bottom: var(--space-3);
  font-style: italic;
  font-weight: 500;
}
.process__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin: 0 0 var(--space-2);
}
.process__text {
  color: var(--fg-muted);
  font-size: var(--fs-body);
  margin: 0;
}

/* === 12. CARD (somatic-base) ============================================= */
.card {
  --card-bg:     var(--bg-elevated);
  --card-fg:     var(--fg);
  --card-border: var(--border);
  --card-pad:    var(--space-4);

  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  padding: var(--card-pad);
  transition: border-color var(--transition);
}

.card__eyebrow { margin-bottom: var(--space-1); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--ocra);
  margin-bottom: var(--space-3);
  color: var(--ocra-profonda);
}
.card__icon svg { width: 24px; height: 24px; }

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin: 0 0 var(--space-1);
  font-weight: 700;
}
.card__text { color: var(--fg-muted); margin: 0 0 var(--space-3); }
.card__text:last-child { margin-bottom: 0; }
.card__actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.card--bordered { --card-border: var(--border); --card-bg: transparent; }
.card--elevated { --card-border: var(--border); }
.card--dark     { --card-bg: var(--bg-inverse); --card-fg: var(--fg-inverse); }
.card--dark .card__title { color: var(--fg-inverse); }
.card--dark .card__text  { color: var(--ottone-chiaro); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { --card-border: var(--ocra); }
.card--interactive:has(a:focus-visible) { --card-border: var(--ocra-profonda); }

.card--featured { border-left: 3px solid var(--ocra); padding-left: var(--space-3); }

/* === 13. CARD GRID ======================================================= */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .card-grid { gap: var(--space-5); } }
@media (min-width: 768px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* === 14. PRICING CARD ==================================================== */
.pricing-card {
  --pc-bg:     var(--bg-elevated);
  --pc-border: var(--border);
  --pc-fg:     var(--fg);

  display: flex;
  flex-direction: column;
  background: var(--pc-bg);
  color: var(--pc-fg);
  border: 1px solid var(--pc-border);
  border-radius: 0;
  padding: var(--space-5);
  transition: border-color var(--transition);
}
@media (min-width: 1024px) { .pricing-card { padding: var(--space-6); } }

.pricing-card__tier {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}
.pricing-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.pricing-card__price-suffix {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  font-weight: 400;
  letter-spacing: 0;
}
.pricing-card__description {
  color: var(--fg-muted);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
}
.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pricing-card__feature-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--fg-accent);
  margin-top: 4px;
}
.pricing-card__cta { margin-top: auto; }
.pricing-card--highlighted {
  --pc-bg: var(--bg-inverse);
  --pc-fg: var(--fg-inverse);
  --pc-border: var(--pino);
}
.pricing-card--highlighted .pricing-card__tier         { color: var(--ottone-chiaro); }
.pricing-card--highlighted .pricing-card__description  { color: var(--ottone-chiaro); }
.pricing-card--highlighted .pricing-card__features     { border-top-color: var(--pino-scuro); }
.pricing-card--highlighted .pricing-card__feature-icon { color: var(--ottone-chiaro); }

/* === 15. TESTIMONIAL ===================================================== */
.testimonial {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-elevated);
}
@media (min-width: 1024px) { .testimonial { padding: var(--space-6); } }

.testimonial__stars { display: inline-flex; gap: 2px; color: var(--ocra); margin-bottom: var(--space-3); }
.testimonial__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 var(--space-4);
  color: var(--pino);
}
.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.testimonial__avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial__author {
  display: block; font-weight: 600;
  font-size: var(--fs-body); color: var(--fg);
  margin: 0; font-family: var(--font-body);
}
.testimonial__role {
  display: block; font-size: var(--fs-small);
  color: var(--fg-muted); margin: 0; font-family: var(--font-body);
}

/* === 16. FAQ ACCORDION =================================================== */
.faq { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__question { list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg);
  font-weight: 700;
  transition: color var(--transition);
}
@media (min-width: 768px) { .faq__question { padding: var(--space-5) 0; } }
.faq__question:hover { color: var(--ocra-profonda); }
.faq__question:focus-visible { outline: 2px solid var(--ocra-profonda); outline-offset: 4px; }
.faq__question::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.faq__item[open] > .faq__question::after { transform: rotate(-135deg) translateY(-2px); }
.faq__answer {
  padding: 0 0 var(--space-5);
  color: var(--fg-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 70ch;
}
.faq__answer > :last-child { margin-bottom: 0; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size var(--transition-slow), opacity var(--transition),
                content-visibility var(--transition-slow) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* === 17. CTA BLOCK ======================================================= */
.cta-block {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
}
@media (min-width: 1024px) { .cta-block { padding: var(--space-8) var(--space-6); } }
.cta-block--dark {
  background: var(--bg-inverse); color: var(--fg-inverse); border-color: var(--pino);
}
.cta-block--dark .cta-block__title { color: var(--fg-inverse); }
.cta-block--dark .cta-block__text  { color: var(--ottone-chiaro); }
.cta-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 auto var(--space-3);
  max-width: 20ch;
  font-weight: 700;
}
.cta-block__text {
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-lead);
  font-style: italic;
}
.cta-block__actions {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
}

/* === 18. CONTACT INFO ==================================================== */
.contact-info {
  display: flex; flex-direction: column; gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
}
.contact-info__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-body); color: var(--fg);
}
.contact-info__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  color: var(--fg-accent); background: var(--bg-elevated);
}
.contact-info__icon svg { width: 20px; height: 20px; }
.contact-info__label {
  display: block; font-family: var(--font-body);
  font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 2px;
}
.contact-info__value { color: var(--fg); }
.contact-info__value a { color: inherit; text-decoration-color: var(--ocra); }

/* === 19. NEWSLETTER (inline-Variante, embedded-Variante kommt aus magazine) === */
.newsletter--inline {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-5) 0;
}

/* === 20. AUTHOR / CURATOR TAG ============================================ */
.author-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.author-tag__avatar { width: 20px; height: 20px; border-radius: var(--radius-pill); object-fit: cover; }
.author-tag__name { color: var(--fg); }
.author-tag--quiet { border-color: transparent; background: transparent; padding-inline: 0; }

/* === 21. HAIRLINE DIVIDER ================================================ */
.hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-5) 0;
  height: 0;
}
.hairline--strong { border-top-color: var(--border-strong); }
.hairline--soft   { border-top-color: var(--rule-soft); }
.hairline--short  { width: 64px; }
.hairline--center { margin-inline: auto; }

/* === 22. IMAGES ========================================================== */
.image--rounded { border-radius: 0; }
.image--avatar  { border-radius: var(--radius-pill); width: 96px; height: 96px; object-fit: cover; }
.image--full    { width: 100%; height: auto; display: block; }
.image--frame   { border: 1px solid var(--border); padding: var(--space-2); background: var(--bg-elevated); }

/* === 23. FORM FIELDS (bottom-rule only, brand-konform) =================== */
.form-field {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.form-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--fg-muted);
  font-weight: 400;
}
.form-field__input,
.form-field__textarea,
.form-field__select {
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--inchiostro-lieve);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
  width: 100%;
  outline: none;
}
.form-field__textarea { min-height: 140px; resize: vertical; padding: 8px 0; }
.form-field__input:focus-visible,
.form-field__textarea:focus-visible,
.form-field__select:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--pino);
  padding-bottom: 7px;
}
.form-field__hint  { font-size: var(--fs-small); color: var(--fg-muted); font-style: italic; }
.form-field__error { font-size: var(--fs-small); color: var(--terracotta); font-weight: 600; }
.form-field:has(:user-invalid) .form-field__input,
.form-field:has(:user-invalid) .form-field__textarea { border-bottom-color: var(--terracotta); }

/* === 24. MOBILE MENU TOGGLE (Magazin-Header benutzt es nicht — bleibt für Edge-Cases) === */
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.menu-toggle:hover { background: var(--bg-hover); border-color: var(--border-strong); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle__bar { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.menu-toggle__bar::before { top: -6px; }
.menu-toggle__bar::after  { top:  6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

.site-nav--mobile {
  display: none;
  position: absolute; inset: 100% 0 auto 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4);
  z-index: 50;
}
.site-header:has(.menu-toggle[aria-expanded="true"]) .site-nav--mobile { display: block; }
@media (min-width: 1024px) { .site-nav--mobile { display: none !important; } }
.site-nav--mobile .nav-link { display: block; padding: var(--space-2) 0; }

/* === 25. FOOTER (Default leer — Magazin-Footer kommt in Sektion 29) ====== */

/* === 26. ICON UTILITIES ================================================== */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
  vertical-align: -0.125em;
}
.icon--sm { font-size: 16px; }
.icon--md { font-size: 20px; }
.icon--lg { font-size: 24px; }
.icon--xl { font-size: 32px; }

/* === 27. ACCESSIBILITY HELPERS =========================================== */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: -100px; left: var(--space-3);
  padding: 12px 16px;
  background: var(--pino); color: var(--papiro);
  font-weight: 600; text-decoration: none;
  z-index: 100; border-radius: 0;
  transition: top var(--transition);
}
.skip-link:focus-visible { top: var(--space-3); }

/* === 28. PRINT =========================================================== */
@media print {
  :root {
    --bg: #fff; --bg-elevated: #fff; --bg-inverse: #fff;
    --fg: #000; --fg-muted: #333; --fg-inverse: #000;
    --border: #999; --border-strong: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.4; }
  .site-header, .site-footer, .menu-toggle, .site-nav,
  .newsletter, .cta-block, .hero__actions, .icon-btn {
    display: none !important;
  }
  .section, .section--dark { background: #fff !important; color: #000 !important; padding-block: 12pt; }
  h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; }
  p, blockquote, .card, .pricing-card { page-break-inside: avoid; orphans: 3; widows: 3; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .btn { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; padding: 4pt 8pt; }
  .faq__item > .faq__answer { display: block; padding: 4pt 0 8pt; }
  .faq__question::after { display: none; }
}

/* =========================================================================
   === 29. PIANO PIANO MAGAZINE COMPONENTS ================================
   Aus design-system/ui_kits/magazine/components.css — 1:1 übernommen.
   Überschreibt gezielt .site-header, .site-footer, .hero, .newsletter
   sowie kleinere .container/.section-Anpassungen.
   ========================================================================= */

/* Page chrome --------------------------------------------------------- */
.page {
  background: var(--papiro);
  color: var(--inchiostro);
  min-height: 100vh;
}
.reading {
  max-width: var(--reading-column);
  margin: 0 auto;
}

/* --- Header (Magazin-Variante) -------------------------------------- */
.site-header {
  position: relative;
  border-bottom: 1px solid var(--papiro-scuro);
  background: var(--papiro);
}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-4);
}
.site-header .nav-left,
.site-header .nav-right {
  display: flex; gap: var(--space-4); align-items: center;
}
.site-header .nav-right { justify-content: flex-end; }
.site-header a.nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--inchiostro);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.site-header a.nav-link:hover {
  color: var(--pino);
  border-bottom: 1px solid var(--ocra);
}
@media (max-width: 900px) {
  .site-header .nav-left,
  .site-header .nav-right { display: none; }
  .site-header .container { grid-template-columns: auto 1fr auto; }
}
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  color: var(--pino);
  letter-spacing: -0.5px;
  text-decoration: none;
  line-height: 1;
}
.wordmark .small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--inchiostro-lieve);
  text-align: center;
  margin-top: 4px;
}
.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--inchiostro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { color: var(--pino); }
.icon-btn svg { stroke: currentColor; stroke-width: 1.5; fill: none; }

/* --- Hero (Magazin: full-bleed) ------------------------------------- */
.hero {
  position: relative;
  height: 78vh;
  min-height: 540px;
  max-height: 760px;
  overflow: hidden;
  padding-block: 0;   /* überschreibt somatic-base */
}
.hero-image {
  position: absolute; inset: 0;
  background: var(--pino);
  background-image:
    linear-gradient(180deg, rgba(33,29,23,0) 0%, rgba(33,29,23,.55) 70%, rgba(33,29,23,.85) 100%),
    radial-gradient(ellipse at 70% 30%, #3a5b3a 0%, #2C4A2D 45%, #1A2E1B 100%);
}
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 50%, rgba(201,146,74,.10) 90%);
  pointer-events: none;
}
.hero-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-7) var(--space-4);
}
.hero-inner .container { width: 100%; }
.hero-eyebrow {
  font-family: var(--font-body); font-style: italic; font-size: 14px;
  color: var(--ocra); margin-bottom: var(--space-2);
}
.hero h1 {
  color: var(--papiro);
  max-width: 880px;
  margin-bottom: var(--space-3);
}
.hero .meta {
  font-family: var(--font-body); font-size: 12px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: rgba(244,235,217,.7);
}
.hero .image-caption {
  position: absolute; right: var(--space-4); top: var(--space-4);
  font-family: var(--font-body); font-style: italic; font-size: 12px;
  color: rgba(244,235,217,.65);
  max-width: 220px; text-align: right;
}
@media (max-width: 640px) {
  .hero h1 { font-size: 44px; }
}

/* --- Section-Lockup (Magazin) --------------------------------------- */
.section.tight { padding: var(--space-6) 0; }
.section-head {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--ocra);
  padding-top: var(--space-3);
}
.section-head .num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--ocra-profonda); font-size: 18px;
}
.section-head h2 { color: var(--inchiostro); }
.section-head .lede {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: 20px; line-height: 1.55; color: var(--inchiostro-lieve);
  max-width: 640px;
}

/* --- Article grid (Magazin) ----------------------------------------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-4);
}
.article-grid.two { grid-template-columns: repeat(2, 1fr); }

.article-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: transparent;
  text-decoration: none; color: inherit;
}
.article-card .thumb {
  background: var(--pino);
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.article-card .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
}
.article-card .thumb.thumb-1 { background: radial-gradient(ellipse at 30% 70%, #3d6840, #1A2E1B); }
.article-card .thumb.thumb-2 { background: radial-gradient(ellipse at 70% 30%, #c9924a, #8e5f1f 70%, #57504A); }
.article-card .thumb.thumb-3 { background: radial-gradient(ellipse at 50% 50%, #4a6f4c, #2C4A2D 80%); }
.article-card .thumb.thumb-4 { background: radial-gradient(ellipse at 20% 80%, #E8DCC2, #C9924A 70%, #8E5F1F); }
.article-card .thumb.thumb-5 { background: radial-gradient(ellipse at 60% 40%, #2c4a2d, #1a2e1b 70%, #211D17); }
.article-card .thumb.thumb-6 { background: radial-gradient(ellipse at 50% 70%, #C9924A 0%, #8E5F1F 60%, #211D17); }
.article-card .thumb .thumb-caption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--font-body); font-style: italic; font-size: 12px;
  color: rgba(244,235,217,.8);
}
.article-card .eyebrow {
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--ocra-profonda);
  margin-top: var(--space-2);
  margin-bottom: 0;
}
.article-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--inchiostro);
  margin: 4px 0 6px;
}
.article-card .meta {
  font-family: var(--font-body); font-style: italic; font-size: 13px;
  color: var(--inchiostro-lieve);
  text-transform: none; letter-spacing: 0;
}
.article-card:hover h3 {
  text-decoration: underline;
  text-decoration-color: var(--ocra);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.article-card.featured {
  border-left: 3px solid var(--ocra);
  padding-left: var(--space-3);
}
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .article-grid, .article-grid.two { grid-template-columns: 1fr; } }

/* --- Pull quote (in flow) ------------------------------------------- */
.pq-block {
  border-top: 1px solid var(--ocra);
  border-bottom: 1px solid var(--ocra);
  padding: var(--space-5) 0;
  text-align: center;
  margin: 0 auto;
  max-width: 880px;
}
.pq-block blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 36px; line-height: 1.3; color: var(--pino);
  margin: 0; padding: 0; border: 0;
}
.pq-block cite {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-body); font-style: normal;
  font-size: 11px; letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

/* --- Stats (Magazin-Variante mit Hairlines, andere Klasse als somatic-base .stats) --- */
.stats-block {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ocra);
  border-bottom: 1px solid var(--ocra);
  padding: var(--space-4) 0;
}
.stats-block .stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-right: 1px solid var(--papiro-scuro);
  padding: 0 var(--space-2);
}
.stats-block .stat:last-child { border-right: 0; }
.stats-block .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px; line-height: 1; color: var(--pino);
  letter-spacing: -0.025em;
}
.stats-block .label {
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--inchiostro-lieve);
}

/* --- Buttons (Magazin-Aliases ohne -- prefix für ui_kit-Kompatibilität) --- */
.btn-primary { background: var(--pino); color: var(--papiro); border: 1px solid var(--pino); }
.btn-primary:hover { background: var(--pino-scuro); color: var(--papiro); }
.btn-secondary {
  background: transparent; color: var(--pino); border: 1px solid var(--pino);
  padding: 15px 31px;
}
.btn-secondary:hover { background: var(--pino); color: var(--papiro); }
.btn-ghost {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: 16px; color: var(--inchiostro); text-decoration: none;
  border-bottom: 1px solid var(--ocra); padding: 8px 0;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0; text-transform: none;
}
.btn-ghost:hover { color: var(--pino); border-bottom-color: var(--pino); }
.btn-ghost .arrow { display: inline-block; transition: transform 200ms var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(6px); }

/* --- Newsletter band (Magazin: full-bleed papiro-chiaro) ------------ */
.newsletter {
  background: var(--papiro-chiaro);
  border: 0;
  border-top: 1px solid var(--papiro-scuro);
  border-bottom: 1px solid var(--papiro-scuro);
  border-radius: 0;
  padding: var(--space-7) 0;
}
.newsletter .nl-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center;
}
.newsletter h2 {
  font-size: 40px; line-height: 1.1; margin: 0;
}
.newsletter p { color: var(--inchiostro-lieve); margin: var(--space-2) 0 0; }
.newsletter form {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3);
  align-items: end;
}
.newsletter label {
  display: block;
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--inchiostro-lieve);
  margin-bottom: 6px;
}
.newsletter input {
  width: 100%;
  font-family: var(--font-body); font-size: 17px; color: var(--inchiostro);
  background: transparent;
  border: none; border-bottom: 1px solid var(--inchiostro-lieve);
  border-radius: 0; padding: 8px 0; outline: none;
}
.newsletter input:focus { border-bottom: 2px solid var(--pino); padding-bottom: 7px; }
.newsletter .nl-note {
  margin-top: var(--space-2);
  font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--inchiostro-lieve);
}
@media (max-width: 900px) {
  .newsletter .nl-inner { grid-template-columns: 1fr; }
}

/* --- Footer (Magazin: Pino solid) ----------------------------------- */
.site-footer {
  background: var(--pino);
  color: var(--papiro);
  padding: var(--space-7) 0 var(--space-5);
}
.site-footer a { color: var(--papiro); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--ocra); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(244,235,217,.15);
}
.footer-grid h4 {
  font-family: var(--font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ocra); margin: 0 0 var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid .wordmark { color: var(--papiro); font-size: 36px; }
.footer-grid .wordmark .small { color: rgba(244,235,217,.6); }
.footer-grid .blurb {
  margin-top: var(--space-3); max-width: 320px;
  font-family: var(--font-body); font-style: italic;
  color: rgba(244,235,217,.8); font-size: 15px; line-height: 1.6;
}
.colophon {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-3);
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: rgba(244,235,217,.55);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Search overlay (optional) -------------------------------------- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(33,29,23,.92);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 22vh; z-index: 100;
}
.search-overlay.open { display: flex; }
.search-overlay .search-box {
  width: min(640px, 90vw);
  border-bottom: 1px solid var(--ocra);
  padding-bottom: var(--space-2);
  display: flex; align-items: center; gap: var(--space-3);
}
.search-overlay input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--papiro);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 36px;
}
.search-overlay input::placeholder { color: rgba(244,235,217,.4); }
.search-overlay .close {
  background: transparent; border: none; cursor: pointer; color: var(--papiro);
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-meta); text-transform: uppercase;
}
.search-overlay .hint {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  color: rgba(244,235,217,.5);
  font-family: var(--font-body); font-style: italic; font-size: 14px;
}

/* --- Article page (Long-Read) --------------------------------------- */
.article-hero {
  height: 64vh; min-height: 460px; max-height: 640px;
  position: relative; overflow: hidden;
}
.article-hero-image {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(33,29,23,.1) 0%, rgba(33,29,23,.7) 100%),
    radial-gradient(ellipse at 30% 60%, #4a6f4c, #2C4A2D 60%, #1A2E1B);
}
.article-hero-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-7) var(--space-4);
}
.article-hero h1 {
  color: var(--papiro); max-width: 880px; margin: var(--space-3) 0;
}
.article-hero .eyebrow {
  color: var(--ocra); font-style: italic; font-size: 14px;
  text-transform: none; letter-spacing: 0;
}
.article-hero .meta {
  font-family: var(--font-body); font-size: 12px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: rgba(244,235,217,.7);
}

.article-body { padding: var(--space-7) 0; }
.article-body p {
  font-family: var(--font-body); font-size: 18px; line-height: 1.7;
  color: var(--inchiostro);
  max-width: var(--reading-column);
  margin: 0 auto var(--space-3);
}
.article-body p em { font-style: italic; color: var(--ocra-profonda); }
.article-body p.lead-para {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.55;
  margin-bottom: var(--space-4);
}
.article-body p.dropcap::first-letter {
  font-family: var(--font-display); font-weight: 900;
  color: var(--pino); font-size: 6em; line-height: 0.85;
  float: left; padding: 8px 14px 0 0;
}
.article-body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--inchiostro);
  max-width: var(--reading-column);
  margin: var(--space-5) auto var(--space-3);
}
.article-body figure {
  margin: var(--space-5) auto;
  max-width: 880px;
}
.article-body figure .placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse at 70% 30%, #c9924a, #8e5f1f 70%, #57504A);
  position: relative;
}
.article-body figure .placeholder .caption-in {
  position: absolute; left: 16px; bottom: 12px;
  font-family: var(--font-body); font-style: italic; font-size: 12px;
  color: rgba(244,235,217,.85);
}
.article-body figcaption {
  font-family: var(--font-body); font-style: italic; font-size: 14px;
  color: var(--inchiostro-lieve);
  margin-top: var(--space-2);
  line-height: 1.4;
}
.related {
  padding-top: var(--space-6);
  border-top: 1px solid var(--ocra);
}

/* =========================================================================
   === 30. BRAND-CUSTOM ===================================================
   Projektspezifische Sonderfälle. Hier kommen Patterns rein, die nicht
   ins Komponenten-Set gehören.
   ========================================================================= */

/* --- Article-Hero via wp:cover (single.html) ---------------------------
   single.html nutzt wp:cover mit useFeaturedImage, um das Featured-Image
   automatisch als Article-Hero zu rendern. Die wp-block-cover-Defaults
   kollidieren teils mit der Brand (border-radius, Box-Modell, Min-Height-
   Padding) — hier werden sie an die Magazin-Optik angepasst.
   ------------------------------------------------------------------------ */

.wp-block-cover.article-hero {
  height: 64vh;
  min-height: 460px !important;   /* überschreibt das Inline min-height vom wp:cover */
  max-height: 640px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  padding: 0;                     /* eigenes Padding via .wp-block-cover__inner-container */
  margin: 0;
  align-items: flex-end;
  justify-content: flex-start;
}

.wp-block-cover.article-hero .wp-block-cover__image-background,
.wp-block-cover.article-hero video.wp-block-cover__video-background {
  object-position: center 40%;     /* Bildausschnitt: Hauptmotiv leicht oberhalb der Mitte */
}

.wp-block-cover.article-hero .wp-block-cover__inner-container {
  width: 100%;
  padding: var(--space-7) var(--space-4);
  margin: 0;
  z-index: 1;
}

/* Eyebrow im Cover-Hero (post-terms mit prefix „Reportage · ") */
.wp-block-cover.article-hero .eyebrow,
.wp-block-cover.article-hero .wp-block-post-terms.eyebrow {
  color: var(--ocra);
  font-style: italic;
  font-size: 14px;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}

/* Titel im Cover-Hero — wie unser .article-hero h1 */
.wp-block-cover.article-hero h1.wp-block-post-title {
  color: var(--papiro);
  max-width: 880px;
  margin: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 800;
}

/* Meta-Zeile (post-date mit className meta) */
.wp-block-cover.article-hero .wp-block-post-date.meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: rgba(244, 235, 217, 0.7);
}

/* --- Reportagen-Index Query-Block (Page #10) ---------------------------
   Der Query-Block rendert Posts als article-card. Die Default
   wp-block-post-template / wp-block-post wickeln Felder in extra Wrapper —
   wir mappen die Komponenten-Klassen drauf, damit das Magazin-Grid greift.
   ------------------------------------------------------------------------ */

.article-grid > .wp-block-post {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: transparent;
  text-decoration: none;
  color: inherit;
}

.article-grid > .wp-block-post:nth-child(1) {
  /* Erste Card als Featured */
  border-left: 3px solid var(--ocra);
  padding-left: var(--space-3);
}

.article-grid .wp-block-post-featured-image {
  background: var(--pino);
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.article-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.article-grid .wp-block-post-terms.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ocra-profonda);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.article-grid h3.wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
  margin: 4px 0 6px;
}

.article-grid h3.wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.article-grid .wp-block-post:hover h3.wp-block-post-title a {
  text-decoration: underline;
  text-decoration-color: var(--ocra);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.article-grid .wp-block-post-excerpt {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--inchiostro-lieve);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.article-grid .wp-block-post-excerpt p {
  margin: 0;
}

.article-grid .wp-block-post-excerpt__more-link {
  display: none;   /* „Weiterlesen" als Link unter Excerpt unterdrücken — Card ist komplett klickbar */
}

/* --- Aquarell-Illustrationen für Article-Card-Thumbnails ---------------
   Generiert via gemini-prompts.md. Je illustriertem Slot wird das Bild
   als background-image über den ursprünglichen Gradient gelegt — der
   Gradient bleibt als Loading-/Fallback-Schicht erhalten.
   Cover-Crop greift den 4:3-Slot exakt; der Cream-Notizbuch-Rand der
   Aquarelle wird minimal weggeschnitten.

   Slots:
     thumb-1 — Apennin / Strada Bianca durch Pinienwald (dunkles Pino)
     thumb-2 — Apulien / Olivenbaum im Spätsommer-Feld (warmes Ocra)
     thumb-3 — Apenninen-Hügel / Berghütte (mittleres Grün)
     thumb-4 — Val d'Orcia / Toskana-Farmhaus (helles Papiro)
     thumb-5 — Wald-Pass / dunkler Wald, schlängelnde Straße (tiefes Pino)
     thumb-6 — Lecce / Café-Tisch in der Gasse (warmes Honig zu Inchiostro)
   ------------------------------------------------------------------------ */

.article-card .thumb.thumb-1 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Apennin_Tag_fuenf_dunkles_Pino-Gruen.webp') center/cover no-repeat,
    radial-gradient(ellipse at 30% 70%, #3d6840, #1A2E1B);
}

.article-card .thumb.thumb-2 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Apulien_Spaetsommer_warmes_Ocra.webp') center/cover no-repeat,
    radial-gradient(ellipse at 70% 30%, #c9924a, #8e5f1f 70%, #57504A);
}

.article-card .thumb.thumb-3 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Dolomiten_Fruehherbst_mittleres_Huegel-Gruen.webp') center/cover no-repeat,
    radial-gradient(ellipse at 50% 50%, #4a6f4c, #2C4A2D 80%);
}

.article-card .thumb.thumb-4 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Val_d_Orcia_Fruehjahr.webp') center/cover no-repeat,
    radial-gradient(ellipse at 20% 80%, #E8DCC2, #C9924A 70%, #8E5F1F);
}

.article-card .thumb.thumb-5 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Stilfser_Joch_Langhe.webp') center/cover no-repeat,
    radial-gradient(ellipse at 60% 40%, #2c4a2d, #1a2e1b 70%, #211D17);
}

.article-card .thumb.thumb-6 {
  background:
    url('https://ppiano.de/wp-content/uploads/2026/05/Lecce_sieben_Espresso.webp') center/cover no-repeat,
    radial-gradient(ellipse at 50% 70%, #C9924A 0%, #8E5F1F 60%, #211D17);
}

/* Subtiler weißer Schein aus dem Default-CSS würde Aquarell-Farben ausbleichen — abschalten. */
.article-card .thumb.thumb-1::after,
.article-card .thumb.thumb-2::after,
.article-card .thumb.thumb-3::after,
.article-card .thumb.thumb-4::after,
.article-card .thumb.thumb-5::after,
.article-card .thumb.thumb-6::after {
  display: none;
}

/* Caption-Pill für Lesbarkeit auf den hellen Cream-Bereichen der Aquarelle. */
.article-card .thumb.thumb-1 .thumb-caption,
.article-card .thumb.thumb-2 .thumb-caption,
.article-card .thumb.thumb-3 .thumb-caption,
.article-card .thumb.thumb-4 .thumb-caption,
.article-card .thumb.thumb-5 .thumb-caption,
.article-card .thumb.thumb-6 .thumb-caption {
  background: rgba(33, 29, 23, 0.55);
  padding: 4px 10px;
  color: rgba(244, 235, 217, 0.95);
  border-radius: 0;
}