/*
 * Taschenblick Frontend v1.4.0 (+ Artikel-Bilder)
 * v1.3.0: .audio-embed (self-hosted <audio> in article body, see editor.js
 *         "Audio einfügen")
 * v1.4.0: .article-image (inline images in article body, see editor.js
 *         "Bild einfügen") + max-width safety for any img in .article-body
 * Design: Richtung A "Die Kolumnistin" — Editorial-Classic
 * CSS @layer Architektur: critical → base → layout → components → utilities
 * WCAG 2.2 AA geprüft. CSP-konform. Keine Inline-Styles.
 * Wisdom: #1 (@layer), #3 (Card-Padding), #4 (Section-Padding),
 *         #5 (Container), #7 (Typography), #21 (Vanilla CSS),
 *         #24 (WCAG), #25 (BEM), #26 (Deutsche Typo), #27 (CSP)
 */

@layer critical, base, layout, components, utilities;

/* ── CRITICAL: Reset + CSS Custom Properties ──────────────────────────────── */
@layer critical {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* WCAG 2.4.11: Sticky-Nav */
    -webkit-text-size-adjust: 100%;
  }

  /* German Typography defaults (Wisdom #26) */
  html[lang="de"] {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

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

  /* ============================================================
     DESIGN TOKENS — Alle CSS Custom Properties
     Design System v1.0.0: Richtung A "Die Kolumnistin"
     ============================================================ */
  :root {
    /* --- Farben: Hintergründe --- */
    --color-bg:             #FAFAF8;
    --color-bg-secondary:   #F2EDE8;
    --color-surface:        #FFFFFF;
    --color-masthead:       #3D302A;

    /* --- Farben: Text --- */
    --color-text:           #1C1916;
    --color-text-meta:      #5A524D;
    --color-text-inverse:   #FFFFFF;

    /* --- Farben: Interaktiv --- */
    --color-link:           #4A6A80;
    --color-link-hover:     #3A546A;

    /* --- Farben: Dekorativ (KEIN Text auf hellem Grund!) --- */
    --color-accent-taupe:   #B8A99A;

    /* --- Farben: UI-Strukturen --- */
    --color-border:         #6E5E55;   /* 5.92:1 ≥ 3:1 WCAG UI ✅ */
    --color-border-subtle:  #DDD5CE;

    /* --- Farben: Status --- */
    --color-success:        #166534;
    --color-success-bg:     #F0FDF4;
    --color-error:          #DC2626;
    --color-error-bg:       #FEF2F2;
    --color-warning:        #92400E;
    --color-warning-bg:     #FEF3C7;

    /* --- Typografie: Familien --- */
    --font-headline: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- Typografie: Größen --- */
    --text-masthead:   3.25rem;    /* 52px */
    --text-h1:         2.5rem;     /* 40px */
    --text-h2:         1.875rem;   /* 30px */
    --text-h3:         1.375rem;   /* 22px */
    --text-h4:         1.125rem;   /* 18px */
    --text-h5:         1rem;       /* 16px */
    --text-h6:         0.875rem;   /* 14px */
    --text-lead:       1.125rem;   /* 18px */
    --text-base:       1.0625rem;  /* 17px */
    --text-small:      0.875rem;   /* 14px */
    --text-caption:    0.75rem;    /* 12px */
    --text-meta:       0.8125rem;  /* 13px */
    --text-pullquote:  1.625rem;   /* 26px */

    /* --- Spacing (4px-Basis) --- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* --- Section Padding (Wisdom #4) --- */
    --section-padding-lg: var(--space-24);   /* 96px Desktop */
    --section-padding-md: var(--space-12);   /* 48px Tablet */
    --section-padding-sm: var(--space-6);    /* 24px Mobile */

    /* --- Container (Wisdom #5) --- */
    --container-max:    1160px;
    --container-wide:   1280px;
    --container-narrow:  720px;
    --container-prose:   700px;
    --container-hero:   1200px;

    /* --- Border-Radius --- */
    --radius-0:    0px;
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-none:   none;
    --shadow-subtle: 0 1px 3px rgba(28, 25, 22, 0.08);
    --shadow-card:   0 2px 8px rgba(28, 25, 22, 0.10);
    --shadow-nav:    0 2px 12px rgba(28, 25, 22, 0.12);
    --shadow-modal:  0 8px 32px rgba(28, 25, 22, 0.20);

    /* --- Z-Index --- */
    --z-base:     0;
    --z-raised:   10;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* --- Transitions --- */
    --transition-fast:    150ms ease;
    --transition-base:    200ms ease;
    --transition-slow:    350ms ease;
    --transition-colors:  color 200ms ease, background-color 200ms ease, border-color 200ms ease;
    --transition-transform: transform 200ms ease;
  }
}

/* ── BASE: Typografie, Body, Links ───────────────────────────────────────── */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);          /* 17px */
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
  }

  /* Heading base styles (Wisdom #7) */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    color: var(--color-text);
    text-wrap: balance;
    hyphens: none;
    line-height: 1.2;
  }

  h1 {
    font-size: var(--text-h1);      /* 40px Desktop */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--space-6);
    line-height: 1.15;
  }

  h2 {
    font-size: var(--text-h2);      /* 30px */
    font-weight: 400;
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    line-height: 1.25;
  }

  h3 {
    font-size: var(--text-h3);      /* 22px */
    font-weight: 400;
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    line-height: 1.35;
  }

  h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4);      /* 18px */
    font-weight: 600;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
  }

  h5 {
    font-family: var(--font-body);
    font-size: var(--text-h5);      /* 16px */
    font-weight: 600;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
  }

  h6 {
    font-family: var(--font-body);
    font-size: var(--text-h6);      /* 14px */
    font-weight: 600;
  }

  /* Body text defaults (Wisdom #26 — Deutsche Typografie) */
  p, li, dd, td {
    hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  p { margin-bottom: 1.25em; }

  /* Links */
  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    transition: var(--transition-colors);
  }

  a:hover {
    color: var(--color-link-hover);
  }

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

  /* Prose/Article text width (Wisdom #2 — 700px Magazin-Optimum) */
  .prose p,
  .article-body p {
    max-width: var(--container-prose);
    text-align: left;
    font-size: var(--text-lead);    /* 18px für bequemes Lesen */
    line-height: 1.7;
  }

  .prose,
  .article-body {
    font-variant-numeric: oldstyle-nums;
  }

  /* Editor alignment classes (set by admin editor.js v1.1.0 on post-body blocks).
     Doubled selectors so they beat the `.prose p / .article-body p` left default. */
  .text-center,
  .prose .text-center,
  .article-body .text-center { text-align: center; }
  .text-right,
  .prose .text-right,
  .article-body .text-right { text-align: right; }
  .text-justify,
  .prose .text-justify,
  .article-body .text-justify { text-align: justify; hyphens: auto; }

  /* Tables and prices: tabular nums */
  table, .price, .post-card__date, .post-card__reading-time {
    font-variant-numeric: tabular-nums;
  }

  /* Mobile Typo (≤ 767px) */
  @media (max-width: 767px) {
    h1 { font-size: 1.625rem; }          /* 26px */
    h2 { font-size: 1.375rem; }          /* 22px */
    h3 { font-size: 1.125rem; }          /* 18px */
    body { font-size: 1rem; }            /* 16px */
  }

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

/* ── LAYOUT: Grid + Container ────────────────────────────────────────────── */
@layer layout {
  /* Basis-Container */
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  .container--wide   { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }
  .container--prose  { max-width: var(--container-prose); }
  .container--hero   { max-width: var(--container-hero); }

  /* Seiten-Wrapper */
  .site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .site-main {
    flex: 1;
  }

  /* Magazin-Layout: Hauptinhalt + Sidebar (5.2) */
  .page-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-areas: "main sidebar";
    gap: var(--space-10);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
  }

  .page-layout__main    { grid-area: main; }
  .page-layout__sidebar { grid-area: sidebar; }

  /* Vollbreite Seite (ohne Sidebar) */
  .page-layout--full {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    max-width: var(--container-prose);
  }

  /* Artikel-Grid (5.3) */
  .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  /* Section-Wrapper */
  .site-section {
    padding: var(--section-padding-lg) 0;
  }

  .site-section--secondary {
    background-color: var(--color-bg-secondary);
  }

  .site-section--dark {
    background-color: var(--color-masthead);
    color: var(--color-text-inverse);
  }

  /* Tablet: 768–1023px */
  @media (max-width: 1023px) {
    .page-layout {
      grid-template-columns: 1fr;
      grid-template-areas: "main" "sidebar";
    }

    .articles-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Mobile: ≤ 767px */
  @media (max-width: 767px) {
    .page-layout {
      padding: var(--space-6) var(--space-4);
      gap: var(--space-8);
    }

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

    .site-section {
      padding: var(--section-padding-md) 0;
    }
  }
}


/* ── COMPONENTS: UI-Elemente (BEM, Design-System v1.0.0) ─────────────────── */
@layer components {
  /* Skip-Link (A11y) */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    background: var(--color-masthead);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-toast);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }
  .skip-link:focus { left: var(--space-4); }

  /* ── Masthead-Header ───────────────────────────────────────────────────── */
  .masthead {
    background-color: var(--color-masthead);
    color: var(--color-text-inverse);
    border-bottom: 1px solid var(--color-accent-taupe);
  }
  .masthead__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-4);
    text-align: center;
  }
  .masthead__logo-link {
    text-decoration: none;
    color: var(--color-text-inverse);
    display: inline-block;
  }
  .masthead__logo {
    font-family: var(--font-headline);
    font-size: var(--text-masthead);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-text-inverse);
  }
  .masthead__tagline {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-small);
    letter-spacing: 0.12em;
    color: var(--color-accent-taupe);
    margin-top: var(--space-2);
  }

  /* ── Navigation ────────────────────────────────────────────────────────── */
  .main-nav-bar {
    background-color: var(--color-masthead);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  .main-nav-bar--sticky { box-shadow: var(--shadow-nav); }
  .main-nav-bar__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-nav__list {
    display: flex;
    list-style: none;
    gap: var(--space-10);
    margin: 0;
    padding: 0;
  }
  .main-nav__link {
    display: block;
    padding: 14px 0 20px;
    min-height: 44px; /* WCAG 2.5.8: min 44px touch target (total with padding) */
    color: var(--color-text-inverse);
    text-decoration: none;
    font-size: var(--text-meta);
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    transition: var(--transition-colors);
    border-bottom: 2px solid transparent;
  }
  .main-nav__link:hover { color: var(--color-accent-taupe); }
  .main-nav__link--active {
    color: var(--color-accent-taupe);
    border-bottom-color: var(--color-accent-taupe);
  }

  /* Burger-Toggle (Mobile) */
  .main-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  .main-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: var(--transition-transform);
  }

  @media (max-width: 767px) {
    .main-nav-bar__inner { justify-content: flex-start; position: relative; }
    .main-nav__toggle { display: flex; }
    .main-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: var(--color-masthead);
      z-index: var(--z-dropdown);
      box-shadow: var(--shadow-nav);
    }
    .main-nav.is-open { display: block; }
    .main-nav__list { flex-direction: column; gap: 0; }
    .main-nav__link {
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-nav__link--active { border-bottom-color: rgba(255, 255, 255, 0.1); }
  }

  /* ── Hero-Artikel ──────────────────────────────────────────────────────── */
  .hero-section { padding: var(--space-10) 0 0; }
  .hero {
    max-width: var(--container-hero);
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  .hero__image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
  }
  .hero__image { width: 100%; height: 100%; object-fit: cover; }
  .hero__content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) 0 var(--space-8);
  }
  .hero__category-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-link);
    text-decoration: none;
    margin-bottom: var(--space-3);
  }
  .hero__category-tag:hover { text-decoration: underline; }
  .hero__headline {
    font-size: var(--text-h1);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--space-4);
    max-width: 900px;
  }
  .hero__teaser {
    font-size: var(--text-lead);
    color: var(--color-text-meta);
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: var(--space-4);
  }
  .hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-meta);
    color: var(--color-text-meta);
    max-width: 640px;
    margin-bottom: var(--space-4);
  }
  .hero__meta-line { flex: 1; height: 0; border-bottom: 1px dashed #C4BDB8; }
  .hero__cta-link {
    display: inline-block;
    padding: 6px 0; /* WCAG 2.5.8: min 24px touch target height */
    font-weight: 500;
    font-size: var(--text-small);
    color: var(--color-link);
    text-decoration: none;
  }
  .hero__cta-link:hover { color: var(--color-masthead); text-decoration: underline; }
  @media (max-width: 767px) {
    .hero__headline { font-size: 1.625rem; }
  }

  /* ── Section-Heading ───────────────────────────────────────────────────── */
  .section-heading {
    font-size: var(--text-h2);
    margin-top: 0;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border-subtle);
  }
  .articles-section { margin-bottom: var(--space-8); }

  /* ── Post-Card ─────────────────────────────────────────────────────────── */
  .post-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
  }
  .post-card:hover { box-shadow: var(--shadow-card); }
  .post-card__image-wrapper {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
  }
  .post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }
  .post-card:hover .post-card__image { transform: scale(1.03); }
  .post-card__body {
    padding: var(--space-6) var(--space-6) var(--space-8);
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .post-card__tag {
    font-family: var(--font-body);
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-masthead);
    text-decoration: none;
    font-weight: 500;
  }
  .post-card__tag:hover { color: var(--color-link); }
  .post-card__title {
    font-family: var(--font-headline);
    font-size: var(--text-h3);
    font-weight: 400;
    line-height: 1.35;
    margin: var(--space-2) 0 0;
  }
  .post-card__title a { text-decoration: none; color: var(--color-text); }
  .post-card__title a:hover { color: var(--color-link); }
  .post-card__excerpt {
    font-size: var(--text-base);
    color: var(--color-text-meta);
    line-height: 1.6;
    margin-top: var(--space-3);
  }
  .post-card__meta {
    font-size: var(--text-caption);
    color: var(--color-text-meta);
    margin-top: var(--space-3);
    margin-bottom: 0;
  }
  .post-card__link {
    display: inline-block;
    padding: 5px 0; /* WCAG 2.5.8: min 24px touch target */
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
    margin-top: var(--space-3);
  }
  .post-card__link:hover { text-decoration: underline; }

  /* ── Sidebar ───────────────────────────────────────────────────────────── */
  .sidebar { display: flex; flex-direction: column; gap: var(--space-8); }
  .sidebar-widget {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .sidebar-widget__title {
    font-family: var(--font-body);
    font-size: var(--text-h6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-4);
  }
  .sidebar-widget--about { text-align: center; }
  .sidebar-widget__image { width: 80px; height: 80px; margin: 0 auto var(--space-3); }
  .sidebar-widget__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  .sidebar-widget--about .sidebar-widget__title { margin-bottom: var(--space-2); }
  .sidebar-widget__text {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    line-height: 1.6;
    margin-bottom: var(--space-3);
  }
  .sidebar-widget__link {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
  }
  .sidebar-widget__link:hover { text-decoration: underline; }

  /* Beliebteste Artikel */
  .popular-list { list-style: none; margin: 0; padding: 0; }
  .popular-list__item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .popular-list__item:last-child { border-bottom: none; padding-bottom: 0; }
  .popular-list__item:first-child { padding-top: 0; }
  .popular-list__rank {
    font-family: var(--font-headline);
    font-size: var(--text-h3);
    color: var(--color-text-meta); /* #5A524D — 6.57:1 auf #F2EDE8 ✅ WCAG AA (war #B8A99A = 1.96:1 ❌) */
    line-height: 1;
    flex-shrink: 0;
  }
  .popular-list__body { display: flex; flex-direction: column; gap: 2px; }
  .popular-list__link {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.4;
  }
  .popular-list__link:hover { color: var(--color-link); }
  .popular-list__category { font-size: var(--text-caption); color: var(--color-text-meta); }

  /* Kategorien-Widget */
  .category-list { list-style: none; margin: 0; padding: 0; }
  .category-list__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .category-list__item:last-child { border-bottom: none; }
  .category-list__link {
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
  }
  .category-list__link:hover { color: var(--color-link); }
  .category-list__count { font-size: var(--text-meta); color: var(--color-text-meta); }

  /* ── Affiliate-Box ─────────────────────────────────────────────────────── */
  .affiliate-box {
    background-color: var(--color-bg-secondary);
    border-left: 3px solid var(--color-accent-taupe);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-8) 0;
  }
  .affiliate-box__header {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-meta); /* #5A524D — 6.57:1 auf #F2EDE8 ✅ (war #B8A99A = 1.96:1 ❌) */
    margin: 0 0 var(--space-4);
  }
  .affiliate-box__inner { display: flex; gap: var(--space-6); align-items: flex-start; }
  .affiliate-box__image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
  }
  .affiliate-box__image img { width: 100%; height: 100%; object-fit: cover; }
  .affiliate-box__content { flex: 1; }
  .affiliate-box__product-name {
    font-family: var(--font-headline);
    font-size: var(--text-h4);
    font-weight: 600;
    margin: 0 0 var(--space-2);
  }
  .affiliate-box__description {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    margin-bottom: var(--space-3);
  }
  .affiliate-box__price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-3);
  }
  .affiliate-box__cta {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-masthead);
    color: var(--color-text-inverse);
    text-decoration: none;
    font-size: var(--text-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    transition: var(--transition-colors);
  }
  .affiliate-box__cta:hover { background-color: var(--color-text); color: var(--color-text-inverse); }
  .affiliate-box__disclaimer {
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--color-text-meta);
    margin: var(--space-3) 0 0;
  }
  @media (max-width: 480px) {
    .affiliate-box__inner { flex-direction: column; }
    .affiliate-box__image { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  }

  /* ── Buttons ───────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-colors);
    min-height: 44px;
    min-width: 44px;
  }
  .btn--primary {
    background: var(--color-masthead);
    color: var(--color-text-inverse);
    border-color: var(--color-masthead);
  }
  .btn--primary:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-text-inverse);
  }
  .btn--secondary {
    background: transparent;
    color: var(--color-masthead);
    border-color: var(--color-masthead);
  }
  .btn--secondary:hover { background: var(--color-masthead); color: var(--color-text-inverse); }
  .btn--ghost {
    background: transparent;
    color: var(--color-link);
    border-color: transparent;
    padding: var(--space-2) var(--space-3);
  }
  .btn--ghost:hover { color: var(--color-masthead); text-decoration: underline; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn:active { transform: scale(0.98); }

  /* ── Newsletter-Sektion ────────────────────────────────────────────────── */
  .newsletter-section {
    background-color: var(--color-masthead);
    padding: var(--section-padding-lg) var(--space-6);
  }
  .newsletter-section__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
  }
  .newsletter-section__headline {
    font-family: var(--font-headline);
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--color-bg-secondary);
    margin: 0 0 var(--space-4);
  }
  .newsletter-section__subline {
    font-size: 1rem;
    color: var(--color-accent-taupe);
    line-height: 1.6;
    margin-bottom: var(--space-6);
  }
  .newsletter-section__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
  }
  .newsletter-section__input {
    flex: 1 1 280px;
    padding: 12px 16px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 44px;
  }
  .newsletter-section__input:focus-visible {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(74, 106, 128, 0.35);
  }
  .newsletter-section__submit {
    background: var(--color-link);
    border-color: var(--color-link);
    flex: 0 0 auto;
  }
  .newsletter-section__submit:hover {
    background: var(--color-link-hover);
    border-color: var(--color-link-hover);
  }
  .newsletter-section__disclaimer {
    flex: 1 1 100%;
    font-size: var(--text-caption);
    color: var(--color-accent-taupe);
    margin: var(--space-2) 0 0;
  }
  .newsletter-section__disclaimer a { color: var(--color-accent-taupe); }

  /* Newsletter consent — active opt-in checkbox (DSGVO + WCAG target size) */
  .newsletter-section__consent {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    font-size: var(--text-caption);
    line-height: 1.45;
    color: var(--color-bg);
    text-align: left;
  }
  .newsletter-section__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.1rem;
    accent-color: var(--color-accent-taupe);
    cursor: pointer;
  }
  .newsletter-section__consent label { cursor: pointer; }
  .newsletter-section__consent a {
    color: var(--color-accent-taupe);
    text-decoration: underline;
  }

  /* Related posts (article footer) */
  .related-posts {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
  }
  .related-posts .section-heading { margin-bottom: var(--space-6); }

  /* ── Breadcrumb ────────────────────────────────────────────────────────── */
  .breadcrumb { margin-bottom: var(--space-6); }
  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-meta);
    color: var(--color-text-meta);
  }
  .breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); }
  .breadcrumb__item:not(:last-child)::after {
    content: "\203A";
    color: var(--color-accent-taupe);
  }
  .breadcrumb__link { color: var(--color-link); text-decoration: none; }
  .breadcrumb__link:hover { text-decoration: underline; }
  .breadcrumb__item--current { color: var(--color-text-meta); }

  /* ── Article ───────────────────────────────────────────────────────────── */
  .article { max-width: var(--container-prose); margin: 0 auto; }
  .article__category-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-link);
    text-decoration: none;
    margin-bottom: var(--space-3);
  }
  .article__title {
    font-size: var(--text-h1);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 var(--space-4);
  }
  .article__meta {
    font-size: var(--text-meta);
    color: var(--color-text-meta);
    margin-bottom: var(--space-2);
  }
  .article__meta-sep { margin: 0 var(--space-1); }
  .article__disclosure {
    font-size: var(--text-caption);
    font-style: italic;
    color: var(--color-text-meta);
    margin-bottom: var(--space-6);
  }
  .article__hero { margin: 0 0 var(--space-8); }
  .article__hero-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
  }
  .article-body__intro {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-6);
  }
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-small);
  }
  .article-body th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border-subtle);
    font-weight: 600;
  }
  .article-body td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
  }
  .article-body ol, .article-body ul {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
    max-width: var(--container-prose);
  }
  .article-body li { margin-bottom: var(--space-2); }
  .article-body__signature {
    font-size: var(--text-small);
    font-style: italic;
    color: var(--color-text-meta);
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-4);
    margin-top: var(--space-8);
  }

  /* Teilen-Buttons */
  .article__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-8) 0;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .article__share-label {
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-meta);
  }
  .article__share-btn {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-link);
    background: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: var(--transition-colors);
  }
  .article__share-btn:hover { background: var(--color-bg-secondary); color: var(--color-masthead); }

  /* Autor-Box */
  .author-box {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
  }
  .author-box__image { flex-shrink: 0; }
  .author-box__image img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
  .author-box__name {
    font-family: var(--font-headline);
    font-size: var(--text-h4);
    font-weight: 600;
    margin: 0 0 var(--space-1);
  }
  .author-box__bio {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    margin: 0;
    line-height: 1.6;
  }

  /* ── Kategorie-Header ──────────────────────────────────────────────────── */
  .category-header {
    background-color: var(--color-bg-secondary);
    padding: var(--section-padding-md) var(--space-6);
    text-align: center;
  }
  .category-header__inner { max-width: var(--container-prose); margin: 0 auto; }
  .category-header__eyebrow {
    font-size: var(--text-meta);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-meta);
    margin-bottom: var(--space-2);
  }
  .category-header__title {
    font-size: var(--text-h1);
    font-weight: 600;
    margin: 0 0 var(--space-4);
  }
  .category-header__intro {
    font-size: var(--text-lead);
    color: var(--color-text-meta);
    line-height: 1.6;
    margin: 0;
  }

  /* ── Pagination ────────────────────────────────────────────────────────── */
  .pagination { margin-top: var(--space-10); }
  .pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
  }
  .pagination__item, .pagination__next, .pagination__prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-small);
    color: var(--color-text-meta);
    text-decoration: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
  }
  .pagination__item:hover, .pagination__next:hover, .pagination__prev:hover {
    background: var(--color-bg-secondary);
  }
  .pagination__item--active {
    background: var(--color-masthead);
    color: var(--color-text-inverse);
    border-color: var(--color-masthead);
  }

  /* ── Forms ─────────────────────────────────────────────────────────────── */
  .form-field { margin-bottom: var(--space-6); }
  .form-field--checkbox { display: flex; gap: var(--space-2); align-items: flex-start; }
  .form-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }
  .form-label--checkbox { margin-bottom: 0; font-weight: 400; line-height: 1.5; }
  .form-input, .form-textarea, .form-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
    min-height: 44px;
  }
  .form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(74, 106, 128, 0.25);
  }
  .form-input::placeholder, .form-textarea::placeholder { color: #6E5E55; }
  .form-textarea { resize: vertical; min-height: 140px; }
  .form-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-masthead);
  }
  .form-required { color: var(--color-error); margin-left: 2px; }

  /* Honeypot — CSS-versteckt (CSP-konform, kein Inline-Style) */
  .form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ── Contact ───────────────────────────────────────────────────────────── */
  .contact { max-width: var(--container-prose); margin: 0 auto; }
  .contact__intro { font-size: var(--text-lead); color: var(--color-text); }
  .contact__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin: var(--space-6) 0 var(--space-10);
  }
  .contact__col h2 { font-size: var(--text-h3); margin-top: 0; }
  .contact__privacy-note {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    margin-top: var(--space-6);
  }
  @media (max-width: 767px) {
    .contact__columns { grid-template-columns: 1fr; gap: var(--space-6); }
  }

  /* ── Legal / About ─────────────────────────────────────────────────────── */
  .legal, .about { max-width: var(--container-prose); margin: 0 auto; }
  .about__header { text-align: center; margin-bottom: var(--space-8); }
  .about__image { width: 200px; height: 200px; margin: 0 auto var(--space-6); }
  .about__photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
  .about__title { margin: 0; }

  /* ── Footer ────────────────────────────────────────────────────────────── */
  .site-footer {
    background-color: var(--color-masthead);
    color: var(--color-bg-secondary);
    padding: var(--section-padding-lg) 0 var(--section-padding-md);
    margin-top: var(--section-padding-lg);
  }
  .site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
  .site-footer__columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
  }
  .site-footer__brand {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3);
    color: var(--color-text-inverse);
  }
  .site-footer__brand-text {
    font-size: var(--text-small);
    color: var(--color-accent-taupe);
    line-height: 1.6;
    margin: 0;
  }
  .site-footer__heading {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-taupe);
    margin: 0 0 var(--space-4);
  }
  .site-footer__nav { list-style: none; margin: 0; padding: 0; }
  .site-footer__nav li { margin-bottom: var(--space-1); }
  .site-footer__nav a {
    display: inline-block;
    padding: 4px 0; /* WCAG 2.5.8: min 24px touch target (4px*2 + ~14px text = ~22px; acceptable with spacing context) */
    min-height: 24px;
    color: var(--color-bg-secondary);
    text-decoration: none;
    font-size: var(--text-small);
  }
  .site-footer__nav a:hover { color: var(--color-accent-taupe); text-decoration: underline; }
  .site-footer__bottom {
    border-top: 1px solid #5A524D;
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .site-footer__disclaimer { font-size: var(--text-meta); color: var(--color-accent-taupe); margin: 0; }
  .site-footer__copy { font-size: var(--text-meta); color: var(--color-accent-taupe); margin: 0; }
  @media (max-width: 1023px) {
    .site-footer__columns { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .site-footer__columns { grid-template-columns: 1fr; gap: var(--space-8); }
  }

  /* ── Error page ────────────────────────────────────────────────────────── */
  .error-page { text-align: center; padding: var(--space-16) 0; }

  /* ── Placeholders (Wisdom #13) ─────────────────────────────────────────── */
  .needs-data { background-color: #ffe0e0; border-left: 4px solid #cc0000; padding: var(--space-2); }
  .needs-data mark {
    background-color: #ff0000;
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-style: normal;
  }
  .page-warning {
    background-color: var(--color-warning-bg);
    border: 2px solid #ffc107;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }
  .page-warning strong { color: var(--color-warning); }

  /* Image-Platzhalter (dezenter Taupe-Ton bis echte Bilder kommen) */
  .img-placeholder {
    background-color: var(--color-bg-secondary);
    background-image: linear-gradient(135deg, #EDE5DE 0%, #DDD1C8 100%);
  }
}

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .text-center { text-align: center; }
  .text-meta { color: var(--color-text-meta); font-size: var(--text-small); }
}

/* ── Inline article images (editor "Bild einfügen") v1.4.0 ──────────────── */
@layer components {
  .article-body img {
    max-width: 100%;
    height: auto;
  }
  .article-image {
    margin: var(--space-6) 0;
    max-width: var(--container-prose);
  }
  .article-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .article-image figcaption {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    margin-top: var(--space-2);
  }
  /* Centered/right-aligned figures via the editor alignment buttons */
  .article-body .article-image.text-center img { margin-inline: auto; width: auto; max-width: 100%; }
  .article-body .article-image.text-right img { margin-left: auto; width: auto; max-width: 100%; }
}

/* ── Audio embed (article body) v1.3.0 ──────────────────────────────────── */
@layer components {
  .audio-embed {
    margin: var(--space-6) 0;
    max-width: var(--container-prose);
  }
  .audio-embed audio {
    width: 100%;
  }
  .audio-embed figcaption {
    font-size: var(--text-small);
    color: var(--color-text-meta);
    margin-top: var(--space-2);
  }
}

/* ── Masthead image logo (operator upload via Admin → Einstellungen) v1.3.0 ─ */
@layer components {
  .masthead__logo-img {
    display: block;
    margin: 0 auto;
    max-height: 84px;
    max-width: min(100%, 420px);
    width: auto;
    height: auto;
  }
}