/* ============ FONTS (self-hosted) ============ */
  @font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-500-600-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Instrument Sans';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/instrument-sans-600italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/karla-300-400-500-600-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla-400italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* ============ TOKENS ============ */
  :root {
    --paper: #F6F2E5;
    --paper-soft: #EFE9D6;
    --ink: #2A2A1F;
    --ink-soft: #55543F;
    --muted: #726F58;
    --moss: #52713A;
    --moss-dark: #3B5429;
    --forest: #1E3E28;
    --forest-deep: #12241A;
    --gold: #A8934A;
    --gold-soft: #D9CD98;
    --clay: #A85D3D;
    --card: #FFFFFF;
    --border: #E1D8BC;
    --shadow: 0 30px 60px -30px rgba(30, 62, 40, 0.35);

    /* Der Hauptbutton nutzt --moss als Flaeche. Das Token ist theme-abhaengig und
       wird im Dunkelmodus hell, weil es dort auch als Textfarbe dient. Schrift und
       Hover des Buttons brauchen deshalb eigene Tokens, sonst steht im Dunkelmodus
       helle Schrift auf hellem Gruen (gemessen: 2,37:1). */
    --btn-primary-ink: #FBF9EE;
    --btn-primary-hover: #3B5429;

    --font-display: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;

    --wrap: 1180px;
    --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #14170F;
      --paper-soft: #1B2015;
      --ink: #F1EEDD;
      --ink-soft: #CBC7AC;
      --muted: #9A987F;
      --moss: #8EAE68;
      --moss-dark: #84AB63;
      --forest: #16301F;
      --forest-deep: #0C1912;
      --gold: #D6C787;
      --gold-soft: #8A7B44;
      --clay: #CE9068;
      --card: #1C2116;
      --border: #333C28;
      --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
      --btn-primary-ink: #14180E;
      --btn-primary-hover: #A4C07E;
    }
  }

  :root[data-theme="dark"] {
    --paper: #14170F;
    --paper-soft: #1B2015;
    --ink: #F1EEDD;
    --ink-soft: #CBC7AC;
    --muted: #9A987F;
    --moss: #8EAE68;
    --moss-dark: #84AB63;
    --forest: #16301F;
    --forest-deep: #0C1912;
    --gold: #D6C787;
    --gold-soft: #8A7B44;
    --clay: #CE9068;
    --card: #1C2116;
    --border: #333C28;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
      --btn-primary-ink: #14180E;
      --btn-primary-hover: #A4C07E;
  }

  /* ============ RESET / BASE ============ */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
  p { margin: 0; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
  section { padding: var(--space-section) 0; }
  :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

  .skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 999;
    background: var(--moss); color: #FBF9EE; font-family: var(--font-body); font-weight: 600;
    font-size: 0.95rem; padding: 0.7rem 1.2rem; border-radius: 0 0 10px 10px; text-decoration: none;
    transition: top 140ms ease;
  }
  .skip-link:focus { top: 0; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss-dark);
  }
  .eyebrow svg { flex: none; }
  .eyebrow-mark { width: 18px; height: 18px; object-fit: contain; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--moss); color: var(--btn-primary-ink); box-shadow: 0 14px 28px -14px rgba(59, 84, 41, 0.55); }
  .btn-primary:hover { background: var(--btn-primary-hover); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
  .btn-ghost:hover { border-color: var(--moss); color: var(--moss-dark); }
  /* Sitzt immer auf dauerhaft dunklem Grund, deshalb feste Werte: --gold sprang
     im Dunkelmodus auf #D6C787 und blendete, --gold-soft wurde beim Hover zu
     #8A7B44 und fiel auf 3,85:1 ab. */
  .btn-on-dark { background: #A8934A; color: #14180E; }
  .btn-on-dark:hover { background: #BFA85C; color: #14180E; }

  /* ============ HEADER ============ */
  header.site {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .preheader { padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem); text-align: center; border-bottom: 1px solid var(--border); }
  .preheader .brand { display: inline-flex; text-decoration: none; }
  .preheader .brand img { height: 68px; width: auto; }

  .nav-bar {
    background: transparent;
  }
  .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
  header.site .wrap { padding-left: clamp(1.75rem, 5vw, 3.5rem); padding-right: clamp(1.75rem, 5vw, 3.5rem); }
  nav.main-nav { display: flex; align-items: center; gap: 2rem; }
  nav.main-nav a { text-decoration: none; font-size: 0.93rem; font-weight: 500; color: var(--ink-soft); position: relative; padding: 0.2rem 0; }
  nav.main-nav a:hover { color: var(--moss-dark); }
  .nav-actions { display: flex; align-items: center; gap: 1.6rem; }
  .nav-contact { display: flex; align-items: center; gap: 1.3rem; font-size: 0.85rem; color: var(--muted); }
  .nav-contact a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink-soft); transition: color 150ms ease; }
  .nav-contact a svg { flex: none; stroke: var(--moss-dark); }
  .nav-contact a:hover { color: var(--moss-dark); text-decoration: underline; }

  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .theme-toggle:hover { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--card)); }
  .theme-toggle svg { width: 18px; height: 18px; }

  .nav-toggle { display: none; }

  /* Mit fünf Navigationspunkten wird es unter 1150px eng: erst Abstände kürzen, dann aufs Menü umschalten */
  @media (max-width: 1150px) {
    nav.main-nav { gap: 1.25rem; }
    .nav-contact { gap: 0.9rem; font-size: 0.8rem; }
  }

  @media (max-width: 1000px) {
    nav.main-nav, .nav-contact { display: none; }
    .nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
      background: transparent; color: var(--ink); cursor: pointer;
    }
  }

  @media (max-width: 560px) {
    .preheader .brand img { height: 52px; }
  }

  .mobile-panel { display: none; }
  @media (max-width: 1000px) {
    .mobile-panel[data-open="true"] {
      display: flex; flex-direction: column; gap: 1.1rem;
      padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem) 1.6rem;
      border-top: 1px solid var(--border);
      background: var(--paper);
    }
    .mobile-panel nav { display: flex; flex-direction: column; gap: 0.9rem; }
    .mobile-panel nav a { text-decoration: none; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
    .mobile-panel .nav-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; text-align: left; font-size: 0.88rem; }
  }

  /* ============ HERO (photo background) ============ */
  .hero-photo {
    position: relative; min-height: min(86vh, 720px);
    display: flex; align-items: flex-end; overflow: hidden; color: #F3EFDC;
  }
  .hero-photo-media { position: absolute; inset: 0; }
  .hero-photo-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 20%; }
  .hero-photo-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(12,24,17,0.95) 0%, rgba(12,24,17,0.84) 30%, rgba(12,24,17,0.4) 57%, rgba(12,24,17,0.04) 76%),
      linear-gradient(0deg, rgba(9,18,12,0.55) 0%, rgba(9,18,12,0) 42%);
  }
  .hero-photo-content { position: relative; z-index: 2; max-width: 620px; padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(5rem, 4rem + 4vw, 7.5rem); }
  /* Der Scrim ist in beiden Modi dunkel -> fester Wert. --gold-soft faellt
     im Dunkelmodus auf 3,19:1 gegen die abgedunkelte Fotoflaeche. */
  .hero-photo-content .eyebrow { color: #D9CD98; }
  .hero-photo-content h1 { margin-top: 1rem; font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.6rem); letter-spacing: -0.01em; color: #FBF9EE; }
  .hero-photo-content h1 em { font-style: italic; color: #D9CD98; }
  .hero-photo-lede { margin-top: 1.4rem; font-size: 1.13rem; color: #E4E0C9; max-width: 46ch; }
  .hero-photo-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
  .hero-photo-actions .link-more { font-size: 0.92rem; font-weight: 600; color: #F3EFDC; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
  .hero-photo-actions .link-more:hover { text-decoration: underline; }
  .hero-photo-actions .btn-primary { box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6); }

  @media (max-width: 700px) {
    .hero-photo { min-height: 620px; }
    .hero-photo-media img { object-position: 66% 14%; }
    .hero-photo-scrim {
      background: linear-gradient(185deg, rgba(12,24,17,0.28) 0%, rgba(12,24,17,0.88) 52%, rgba(12,24,17,0.97) 100%);
    }
    .hero-photo-content { max-width: 100%; }
  }

  /* ============ TRUST BAR ============ */
  .trust-bar { position: relative; z-index: 3; margin-top: -60px; margin-bottom: var(--space-section); }
  .trust-bar-inner {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .trust-item {
    padding: 1.5rem 1rem; text-align: center; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 0.3rem; justify-content: center;
  }
  .trust-item:last-child { border-right: none; }
  .trust-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--moss-dark); }
  .trust-label { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.3; }
  /* --moss-dark erreicht auf --card im Dunkelmodus nur 4,45. Als grosse Fettschrift
     waere das nach WCAG zulaessig (Grenzwert 3,0), projektweit gilt aber 4,5. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .trust-num { color: var(--moss); }
  }
  :root[data-theme="dark"] .trust-num { color: var(--moss); }
  .trust-item.is-credential { flex-direction: row; align-items: center; justify-content: center; gap: 0.7rem; text-align: left; }
  .trust-badge-icon { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
  .trust-badge-icon img { width: 100%; height: 100%; object-fit: contain; }
  .trust-item.is-credential .trust-label { font-weight: 600; color: var(--ink); }

  /* Fuenf Spalten brauchen Breite. Darunter 3 + 2, wobei das Siegel zwei Spalten
     nimmt - es steht als einziges mit Bild neben Text und braucht am meisten Platz.
     So bleibt keine Zelle leer. */
  @media (max-width: 1150px) {
    .trust-bar-inner { grid-template-columns: repeat(3, 1fr); }
    .trust-item.is-credential { grid-column: span 2; }
    .trust-item:nth-child(3n) { border-right: none; }
    .trust-item:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  }

  @media (max-width: 760px) {
    .trust-bar { margin-top: -40px; }
    .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
    .trust-item { border-right: none; border-bottom: 1px solid var(--border); }
    .trust-item.is-credential { grid-column: span 2; }
    .trust-item:last-child { border-bottom: none; }
  }

  /* ============ SIGNS / PAIN POINTS ============ */
  .signs { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .signs-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .signs-head h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); margin-top: 0.9rem; }
  .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.6rem; }
  .quote-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    padding: 1.5rem 1.6rem; position: relative;
  }
  .quote-card p { font-family: var(--font-display); font-style: italic; font-size: 1.06rem; color: var(--ink); line-height: 1.5; }
  .signs-scope { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 64ch; }
  .signs-close { margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); font-size: 1.15rem; font-family: var(--font-display); font-style: italic; color: var(--moss-dark); max-width: 64ch; }

  @media (max-width: 720px) { .quote-grid { grid-template-columns: 1fr; } }

  /* ============ OFFER / BRIDGE ============ */
  .bridge { text-align: center; }
  .bridge-inner { max-width: 62ch; margin: 0 auto; }
  .bridge .eyebrow { justify-content: center; }
  .bridge h2 { margin-top: 1rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); }
  .bridge h2 .accent { color: var(--moss-dark); }
  .bridge p { margin-top: 1.3rem; color: var(--ink-soft); font-size: 1.08rem; }

  .offers { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
  .offer-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 22px;
    padding: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem;
  }
  .offer-icon { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--moss) 16%, var(--card)); display: flex; align-items: center; justify-content: center; }
  .offer-icon svg { width: 23px; height: 23px; stroke: var(--moss-dark); }
  .offer-card h3 { font-size: 1.25rem; }
  .offer-card p { color: var(--ink-soft); font-size: 0.98rem; }
  .offer-card .btn { align-self: flex-start; margin-top: auto; }

  @media (max-width: 720px) { .offers { grid-template-columns: 1fr; } }

  /* ============ ABOUT ============ */
  .about { background: var(--forest); color: #F3EFDC; }
  /* Dauerhaft dunkle Flaeche (--forest): fester Wert, --gold-soft faellt hier auf 3,38:1. */
  .about .eyebrow { color: #D9CD98; }
  .about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
  .about-portrait { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3/4; background: var(--forest-deep); }
  .about-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .about h2 { margin-top: 0.8rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); color: #FBF9EE; }
  .about-motto { margin-top: 1.2rem; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: #D9CD98; }
  .about-copy { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; color: #DCD8C2; max-width: 62ch; }
  .about-copy strong { color: #FBF9EE; }

  @media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-portrait { max-width: 320px; }
  }

  /* ============ METHODS ============ */
  .methods-head { max-width: 60ch; }
  .methods-head h2 { margin-top: 0.9rem; font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); }
  .tag-cloud { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); display: flex; flex-wrap: wrap; gap: 0.7rem; }
  .tag {
    font-size: 0.9rem; padding: 0.55rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--ink-soft); background: var(--card);
  }
  .tag.is-strong { border-color: var(--moss); color: var(--moss-dark); font-weight: 600; background: color-mix(in srgb, var(--moss) 10%, var(--card)); }

  /* ============ TESTIMONIALS ============ */
  .testimonials { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

  .stars { display: inline-flex; align-items: center; gap: 2px; }
  .star-icon { width: 18px; height: 18px; fill: #FFB800; flex: none; }
  .stars.small .star-icon { width: 14px; height: 14px; }

  .review-summary {
    margin-top: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
    padding-bottom: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem;
  }
  .review-summary-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
  .review-summary-stats { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
  .review-score { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
  /* --muted lag hier bei 4,19:1. */
  .review-count, .review-source { font-size: 0.88rem; color: var(--ink-soft); }
  .review-source { display: inline-flex; align-items: center; gap: 0.4rem; }

  .review-grid { margin-top: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); display: flex; align-items: center; gap: 0.75rem; }
  .review-track {
    flex: 1; min-width: 0; display: flex; gap: 1.4rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    padding-bottom: 0.3rem; margin-bottom: -0.3rem;
  }
  .review-track::-webkit-scrollbar { display: none; }
  .review-card {
    scroll-snap-align: start; flex: 0 0 clamp(250px, 29vw, 320px);
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
  }
  .review-card-head { display: flex; align-items: center; gap: 0.75rem; }
  .review-avatar { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--moss) 15%, var(--card)); display: flex; align-items: center; justify-content: center; flex: none; }
  .review-avatar svg { width: 20px; height: 20px; stroke: var(--moss-dark); }
  .review-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
  .review-context { font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
  .review-text { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.55; }

  .review-nav {
    flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 150ms ease, border-color 150ms ease;
  }
  .review-nav svg { width: 18px; height: 18px; }
  .review-nav:hover:not(:disabled) { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--card)); }
  .review-nav:disabled { opacity: 0.35; cursor: default; }

  .review-more { margin-top: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); text-align: center; }
  .review-more a { font-size: 0.92rem; font-weight: 600; color: var(--moss-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
  .review-more a:hover { text-decoration: underline; }

  @media (max-width: 620px) {
    .review-nav { width: 38px; height: 38px; }
    .review-summary { flex-direction: column; align-items: flex-start; }
  }

  /* ============ STORY TEASER ============ */
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
  .story-copy p { color: var(--ink-soft); margin-top: 1.2rem; }
  .story-copy h2 { margin-top: 0.9rem; font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); }
  .story-copy .btn { margin-top: 1.6rem; }
  .story-art { position: relative; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; border: 10px solid var(--paper-soft); box-shadow: var(--shadow); max-width: 380px; margin: 0 auto; }
  .story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 38%; }

  @media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story-art { order: -1; } }

  /* ============ NEWSLETTER ============ */
  .newsletter { background: var(--forest-deep); color: #F3EFDC; padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0; }
  .newsletter-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 3vw, 3.5rem); align-items: center; }
  .newsletter h2 { color: #FBF9EE; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-top: 0.7rem; }
  .newsletter p { margin-top: 1rem; color: #C9C5AC; max-width: 48ch; }
  .newsletter form, .newsletter-cta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
  .newsletter input[type="email"] {
    flex: 1 1 220px; padding: 0.9rem 1.1rem; border-radius: 999px; border: 1px solid #3A4432;
    background: #1C2416; color: #F3EFDC; font-family: var(--font-body); font-size: 0.95rem;
  }
  .newsletter input::placeholder { color: #8C8A70; }
  .newsletter form .hint, .newsletter-cta .hint { flex-basis: 100%; font-size: 0.76rem; color: #8C8A70; margin-top: 0.3rem; }

  @media (max-width: 800px) { .newsletter-inner { grid-template-columns: 1fr; } }

  /* ============ FOOTER ============ */
  footer.site {
    background: var(--forest); color: #E7E3CC; padding: 0 0 2rem;
  }
  footer.site > .wrap { padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 2.5rem; }
  .footer-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-bottom: 1rem; }
  .footer-brand img { height: 34px; }
  .footer-brand-text { font-family: var(--font-display); font-weight: 600; color: #FBF9EE; }
  footer.site p.footer-tagline { color: #B7B398; font-size: 0.92rem; max-width: 30ch; background: none; padding: 0; border: none; border-radius: 0; }
  /* dauerhaft dunkle Flaeche: fester heller Wert, --gold-soft erreicht hier nur 3,38:1 */
  footer.site h3 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #D9CD98; margin-bottom: 1rem; }
  footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
  footer.site a { text-decoration: none; color: #D8D4BA; font-size: 0.92rem; }
  footer.site a:hover { color: #FBF9EE; }
  /* Der Newsletter-Button ist ein <a> im Footer. `footer.site a` schlaegt
     `.btn-on-dark` und faerbte die Beschriftung beige — 1,13:1, praktisch
     unlesbar; nebenbei wurde auch die Schriftgroesse ueberschrieben. */
  footer.site .btn-on-dark { background: #A8934A; color: #14180E; font-size: 0.95rem; }
  footer.site .btn-on-dark:hover { background: #BFA85C; color: #14180E; }
  .footer-quote { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid #33422C; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-end; }
  .footer-quote blockquote { margin: 0; max-width: 52ch; font-family: var(--font-display); font-style: italic; color: #C9C5AC; font-size: 0.95rem; }
  .footer-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.78rem; color: #D9CD98; }
  .footer-legal { display: flex; gap: 1.4rem; font-size: 0.82rem; color: #9A9880; }

  @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

  .concept-flag {
    position: fixed; right: 14px; bottom: 14px; z-index: 50;
    background: var(--forest); color: #F3EFDC; font-family: var(--font-body);
    font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.5rem 0.8rem; border-radius: 999px;
    box-shadow: var(--shadow); opacity: 0.88;
  }

  /* ============ PAGE INTRO (Angebot) ============ */
  .page-intro { padding-top: clamp(3rem, 2.2rem + 4vw, 5.5rem); }
  .page-intro-inner h1 { margin-top: 1rem; font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem); letter-spacing: -0.01em; }
  .page-intro-inner p { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.08rem; }
  .page-intro-inner p + p { margin-top: 1rem; }

  /* ============ PROGRAMS / ANGEBOTSTREPPE ============ */
  .programs { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .programs-head h2 { margin-top: 0.9rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); }
  .programs-head p { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.02rem; }

  .tier-grid {
    margin-top: clamp(2.5rem, 2rem + 1.8vw, 3.5rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch;
  }
  .tier-card {
    display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
    border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); height: 100%;
  }
  .tier-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-soft); }
  .tier-media img { width: 100%; height: 100%; object-fit: cover; }
  .tier-body { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
  .tier-badge {
    align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--moss) 14%, var(--card)); color: var(--moss-dark);
  }
  .tier-card[data-tier="2"] .tier-badge { background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: color-mix(in srgb, var(--gold) 38%, var(--ink)); }
  .tier-card[data-tier="3"] .tier-badge { background: color-mix(in srgb, var(--clay) 18%, var(--card)); color: color-mix(in srgb, var(--clay) 50%, var(--ink)); }
  .tier-body h3 { font-size: 1.4rem; margin-top: 0.2rem; }
  .tier-price { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); margin: 0; }
  .tier-tagline { font-family: var(--font-display); font-style: italic; color: var(--moss-dark); font-size: 1.02rem; margin: 0; }
  .tier-body > p:not(.tier-price):not(.tier-tagline) { color: var(--ink-soft); font-size: 0.95rem; }
  .tier-meta { list-style: none; padding: 0.9rem 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .tier-meta li { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
  .tier-meta li span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 0.35em; }
  .tier-meta li span::after { content: ":"; }
  .tier-body .btn { align-self: flex-start; margin-top: auto; }
  .tier-card.is-flagship { border-color: var(--gold); }

  .compare { margin-top: clamp(3rem, 2.4rem + 2vw, 4.5rem); }
  .compare h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
  .compare-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
  .compare-table { border-collapse: collapse; width: 100%; min-width: 680px; background: var(--card); }
  .compare-table th, .compare-table td { text-align: left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; vertical-align: top; }
  .compare-table thead th { font-family: var(--font-display); font-size: 1rem; color: var(--ink); background: color-mix(in srgb, var(--moss) 9%, var(--card)); border-bottom: 1px solid var(--border); }
  /* Zeilenkopf ist seit dem Barrierefreiheits-Durchgang ein <th scope="row">. */
  /* --muted lag auf der getoenten Flaeche punktgenau auf 4,50:1 — kein Puffer. */
  .compare-table .rowlabel { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--moss) 9%, var(--card)); }
  .compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }
  .compare-table td:not(.rowlabel) { color: var(--ink-soft); }
  .compare-table .col-1 { border-left: 3px solid var(--moss); }
  .compare-table .col-2 { border-left: 3px solid var(--gold); }
  .compare-table .col-3 { border-left: 3px solid var(--clay); }

  .programs-note { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); color: var(--muted); font-size: 0.95rem; }

  @media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 680px) { .tier-grid { grid-template-columns: 1fr; } }

  /* ============ PROCESS NOTE ============ */
  .process { background: var(--forest); color: #F3EFDC; }
  .process-lede { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: #EDE9D2; }
  .process p:not(.process-lede) { margin-top: 1.1rem; color: #C9C5AC; }

  /* ============ HONORAR ============ */
  .fees-head h2 { margin-top: 0.9rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); }
  .fees-head p { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.02rem; }

  .fees-grid { margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .fee-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); display: flex; flex-direction: column; gap: 0.4rem;
  }
  .fee-card.is-highlight { background: var(--forest); border-color: var(--forest); color: #F3EFDC; }
  .fee-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  /* Dauerhaft dunkle Flaeche (--forest): fester Wert statt Token. */
  .fee-card.is-highlight .fee-label { color: #D9CD98; }
  .fee-price { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--ink); }
  .fee-card.is-highlight .fee-price { color: #FBF9EE; }
  .fee-price small { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--muted); }
  .fee-note { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
  .fee-card.is-highlight .fee-note { color: #D8D4BA; }

  .fee-practical {
    margin-top: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 0.75rem;
  }
  .fee-practical li {
    position: relative; padding-left: 1.6rem; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55;
  }
  .fee-practical li::before {
    content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px;
    border-radius: 50%; background: var(--moss);
  }

  @media (max-width: 860px) { .fees-grid { grid-template-columns: 1fr; } }

  /* ============ OFFER CTA ============ */
  .offer-cta { background: var(--forest); color: #F3EFDC; }
  .offer-cta-inner { text-align: center; }
  /* Farbe steht weiter unten fest auf #D9CD98 — hier nur die Ausrichtung. */
  .offer-cta .eyebrow { justify-content: center; }
  .offer-cta h2 { margin-top: 1rem; font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); color: #FBF9EE; }
  .offer-cta p { margin-top: 1.2rem; color: #C9C5AC; font-size: 1.05rem; }
  .offer-cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem; }
  .offer-cta-actions .link-more { font-size: 0.92rem; font-weight: 600; color: #F3EFDC; text-decoration: none; }
  .offer-cta-actions .link-more:hover { text-decoration: underline; }

  /* ============ ÜBER MICH – gemeinsame Bausteine ============ */
  .link-more { font-size: 0.92rem; font-weight: 600; color: var(--moss-dark); text-decoration: none; }
  .link-more:hover { text-decoration: underline; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link-more { color: var(--moss); } }
  :root[data-theme="dark"] .link-more { color: var(--moss); }

  /* Dauerhaft dunkle Flaechen: feste helle Werte statt umschaltender Tokens */
  .um-name-inner .eyebrow,
  .um-name-inner .link-more,
  .um-praxis-head .eyebrow,
  .um-praxis-card .link-more,
  .offer-cta .eyebrow { color: #D9CD98; }

  .um-section-head h2 { margin-top: 0.9rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); }
  .um-section-lede { margin-top: 1.2rem; max-width: 68ch; color: var(--ink-soft); font-size: 1.02rem; }

  /* ============ ÜBER MICH – Intro ============ */
  .um-intro { padding-top: clamp(3rem, 2.2rem + 4vw, 5.5rem); }
  .um-intro-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center;
  }
  .um-intro-copy h1 { margin-top: 1rem; font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem); letter-spacing: -0.01em; }
  .um-lede {
    margin-top: 0.9rem; font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--moss-dark);
  }
  .um-intro-copy > p:not(.um-lede) { margin-top: 1.2rem; max-width: 56ch; color: var(--ink-soft); font-size: 1.05rem; }
  .um-intro-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
  .um-intro-portrait img {
    width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 62% 32%;
    border-radius: 26px; box-shadow: var(--shadow);
  }

  @media (max-width: 900px) {
    .um-intro-grid { grid-template-columns: 1fr; }
    .um-intro-portrait { order: -1; }
  }

  /* ============ ÜBER MICH – Story ============ */
  .um-story { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .um-story-body {
    margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  }
  .um-story-col p { color: var(--ink-soft); }
  .um-story-col p + p { margin-top: 1.1rem; }
  .um-pullquote {
    margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; max-width: 46ch; text-align: center;
    font-family: var(--font-display); font-style: italic; font-weight: 600;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; color: var(--moss-dark);
  }
  .um-story-close { margin: clamp(2.2rem, 1.8rem + 1.5vw, 3rem) auto 0; max-width: 74ch; color: var(--ink-soft); }

  @media (max-width: 760px) { .um-story-body { grid-template-columns: 1fr; } }

  /* ============ ÜBER MICH – Name ============ */
  .um-name { background: var(--forest); color: #F3EFDC; }
  .um-name-inner { max-width: 780px; }
  .um-name-inner .eyebrow { color: #D9CD98; }
  .um-name-inner h2 { margin-top: 1rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); color: #FBF9EE; }
  .um-name-inner > p { margin-top: 1.2rem; color: #C9C5AC; }
  .um-name-quote {
    margin: 1.8rem 0 1.6rem; padding-left: 1.4rem; border-left: 2px solid var(--gold);
    font-family: var(--font-display); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: #EDE9D2;
  }
  .um-name-inner .link-more { color: #D9CD98; }

  /* ============ ÜBER MICH – Vita ============ */
  .um-vita-grid {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    align-items: start;
  }
  .um-timeline { list-style: none; margin: 0; padding: 0 0 0 1.9rem; border-left: 2px solid var(--border); }
  .um-timeline li { position: relative; padding-bottom: 2rem; }
  .um-timeline li:last-child { padding-bottom: 0; }
  .um-timeline li::before {
    content: ""; position: absolute; left: calc(-1.9rem - 7px); top: 0.45rem;
    width: 12px; height: 12px; border-radius: 50%; background: var(--moss);
    border: 3px solid var(--paper);
  }
  .um-year {
    display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  .um-timeline h3 { margin-top: 0.3rem; font-size: 1.18rem; }
  .um-timeline p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.96rem; }

  .um-vita-aside { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
  .um-vita-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 64% center; border-radius: 20px; box-shadow: var(--shadow); }
  .um-seal-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.1rem;
  }
  .um-seal-card img { width: 68px; height: auto; flex: none; }
  .um-seal-card p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
  .um-vita-aside .btn { align-self: flex-start; }

  @media (max-width: 900px) {
    .um-vita-grid { grid-template-columns: 1fr; }
    .um-vita-aside { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .um-vita-photo { display: none; }
    .um-seal-card { flex: 1 1 320px; }
  }

  /* ============ ÜBER MICH – Arbeitsweise ============ */
  .um-approach { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .um-approach-grid {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch;
  }
  .um-approach-card {
    height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  }
  .um-approach-num {
    display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--moss);
  }
  .um-approach-card h3 { margin-top: 0.4rem; font-size: 1.24rem; }
  .um-approach-card p { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.96rem; }

  @media (max-width: 780px) { .um-approach-grid { grid-template-columns: 1fr; } }

  /* ============ ÜBER MICH – Und sonst? ============ */
  .um-private-grid {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center;
  }
  .um-private-art img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 58% center; border-radius: 26px; box-shadow: var(--shadow); }
  .um-private-copy h2 { margin-top: 1rem; font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.3rem); }
  .um-private-copy > p { margin-top: 1.2rem; color: var(--ink-soft); }
  .um-private-list { margin: 1.6rem 0 0; padding: 0; list-style: none; }
  .um-private-list li {
    padding: 0.75rem 0; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 0.98rem;
  }
  .um-private-list li:last-child { border-bottom: 1px solid var(--border); }
  .um-private-list strong { color: var(--ink); }

  @media (max-width: 860px) {
    .um-private-grid { grid-template-columns: 1fr; }
    .um-private-art img { aspect-ratio: 16 / 10; }
  }

  /* ============ ÜBER MICH – Praxis ============ */
  .um-praxis { background: var(--forest); color: #F3EFDC; }
  .um-praxis-head { max-width: 720px; }
  .um-praxis-head .eyebrow { color: #D9CD98; }
  .um-praxis-head h2 { margin-top: 1rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); color: #FBF9EE; }
  .um-praxis-head > p { margin-top: 1.2rem; color: #C9C5AC; }
  .um-praxis-gallery {
    margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  }
  .um-praxis-gallery figure { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #33422C; }
  .um-praxis-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .um-praxis-gallery figure:last-child img { object-position: center 45%; }
  .um-praxis-gallery + .um-praxis-grid { margin-top: 1.1rem; }

  .um-praxis-grid {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch;
  }
  .um-praxis-card {
    height: 100%; display: flex; flex-direction: column; gap: 0.7rem;
    background: rgba(255, 255, 255, 0.05); border: 1px solid #33422C; border-radius: 20px;
    padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  }
  .um-praxis-card h3 { font-size: 1.14rem; color: #FBF9EE; }
  .um-praxis-card p { color: #C9C5AC; font-size: 0.96rem; }
  .um-praxis-card .link-more { color: #D9CD98; margin-top: auto; }
  .um-download-row { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; }
  .um-download-row .link-more { margin-top: 0; }

  @media (max-width: 860px) {
    .um-praxis-grid { grid-template-columns: 1fr; }
    .um-praxis-gallery { grid-template-columns: 1fr 1fr; }
    .um-praxis-gallery figure:last-child { display: none; }
  }
  @media (max-width: 560px) {
    .um-praxis-gallery { grid-template-columns: 1fr; }
    .um-praxis-gallery figure:last-child { display: block; }
  }

  /* ============ ÜBER MICH – Partner ============ */
  .um-partner-group {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    font-family: var(--font-body);
  }
  .um-partner-grid {
    margin-top: 1.1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch;
  }
  .um-partner-card {
    height: 100%; display: flex; flex-direction: column; gap: 0.55rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem 1.3rem;
  }
  .um-partner-card h4 { font-size: 1.05rem; }
  .um-partner-card p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
  .um-partner-card .link-more { margin-top: auto; font-size: 0.85rem; word-break: break-word; }
  .um-partner-note { margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); color: var(--muted); font-size: 0.85rem; max-width: 70ch; }

  @media (max-width: 1000px) { .um-partner-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .um-partner-grid { grid-template-columns: 1fr; } }

  /* ============ ZEREMONIEN & SESSIONS ============ */
  .ceremonies { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ceremonies-head h2 { margin-top: 0.9rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); }
  .ceremonies-head > p { margin-top: 1.2rem; max-width: 68ch; color: var(--ink-soft); font-size: 1.02rem; }

  .ceremony-grid {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch;
  }
  .ceremony-card {
    height: 100%; display: flex; flex-direction: column; gap: 0.8rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 22px;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); box-shadow: var(--shadow);
  }
  .ceremony-media {
    margin: calc(-1 * clamp(1.5rem, 1.2rem + 1vw, 2rem)) calc(-1 * clamp(1.5rem, 1.2rem + 1vw, 2rem)) 0.4rem;
    overflow: hidden; border-radius: 22px 22px 0 0; background: var(--paper-soft);
  }
  .ceremony-media img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }

  .ceremony-figure { margin: 0 0 1.2rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
  .ceremony-figure img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }

  .ceremony-badge {
    align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: color-mix(in srgb, var(--moss) 14%, var(--card)); color: var(--moss-dark);
  }
  .ceremony-badge.is-new { background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: color-mix(in srgb, var(--gold) 38%, var(--ink)); }
  .ceremony-card h3 { font-size: 1.45rem; }
  .ceremony-lede { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--moss-dark); }
  .ceremony-card > p:not(.ceremony-lede):not(.ceremony-todo) { color: var(--ink-soft); font-size: 0.96rem; }
  .ceremony-todo {
    border: 1px dashed var(--clay); border-radius: 12px; padding: 0.8rem 1rem;
    color: var(--clay); font-size: 0.9rem; line-height: 1.5;
  }

  .ceremony-meta { list-style: none; padding: 0.9rem 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ceremony-meta li { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
  .ceremony-meta li span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

  .ceremony-dates-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .ceremony-dates ul { margin: 0.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .ceremony-dates li {
    font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
    padding: 0.32rem 0.7rem; border-radius: 999px;
    background: color-mix(in srgb, var(--moss) 10%, var(--card)); border: 1px solid var(--border);
  }
  .ceremony-card .btn { align-self: flex-start; margin-top: auto; }

  .ceremony-details {
    margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem);
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  }
  .ceremony-details summary {
    cursor: pointer; list-style: none; padding: 1.1rem clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
    font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink);
    display: flex; align-items: center; gap: 0.7rem;
  }
  .ceremony-details summary::-webkit-details-marker { display: none; }
  .ceremony-details summary::before {
    content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--moss); color: #FBF9EE; font-family: var(--font-body); font-weight: 700;
    display: grid; place-items: center; font-size: 1rem; line-height: 1;
  }
  .ceremony-details[open] summary::before { content: "–"; }
  .ceremony-details-body {
    padding: 0 clamp(1.2rem, 1rem + 0.8vw, 1.8rem) clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
    border-top: 1px solid var(--border); padding-top: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  }
  .ceremony-details-body h4 { font-size: 1.02rem; margin-top: 1.4rem; }
  .ceremony-details-body > div > h4:first-child { margin-top: 0; }
  .ceremony-details-body p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.94rem; }
  .ceremony-list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
  .ceremony-list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.5; }
  .ceremony-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
  .ceremony-note { color: var(--muted); font-size: 0.88rem; }

  @media (max-width: 900px) {
    .ceremony-grid { grid-template-columns: 1fr; }
    .ceremony-details-body { grid-template-columns: 1fr; }
  }

  /* Moss-Dark auf Karten ist im Dark Mode zu kontrastarm -> hellere Variante */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ceremony-lede,
    :root:not([data-theme="light"]) .tier-tagline { color: var(--moss); }
  }
  :root[data-theme="dark"] .ceremony-lede,
  :root[data-theme="dark"] .tier-tagline { color: var(--moss); }

  /* ============ DIAGNOSE & THERAPIEN ============ */
  .dt-intro-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

  /* --- Diagnostik --- */
  .dt-diagnose { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .dt-diagnose-grid {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch;
  }
  .dt-card {
    height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  }
  .dt-num {
    display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--moss);
  }
  .dt-card h3 { margin-top: 0.4rem; font-size: 1.24rem; }
  .dt-card p { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.96rem; }

  .dt-anamnesebogen {
    margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: color-mix(in srgb, var(--moss) 10%, var(--card));
    border: 1px solid var(--border); border-radius: 20px;
    padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  }
  .dt-anamnesebogen h3 { font-size: 1.14rem; }
  .dt-anamnesebogen p { margin-top: 0.5rem; max-width: 60ch; color: var(--ink-soft); font-size: 0.95rem; }
  .dt-anamnesebogen .btn { flex: none; }

  @media (max-width: 780px) { .dt-diagnose-grid { grid-template-columns: 1fr; } }

  /* --- Ueberleitung --- */
  .dt-bridge { background: var(--forest); color: #F3EFDC; }
  .dt-bridge-inner { max-width: 760px; }
  .dt-bridge-lede {
    font-family: var(--font-display); font-style: italic; font-weight: 600;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); line-height: 1.35; color: #FBF9EE;
  }
  .dt-bridge-inner > p:not(.dt-bridge-lede) { margin-top: 1.2rem; color: #C9C5AC; }

  /* --- Therapien --- */
  .dt-layout {
    margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    align-items: start;
  }
  .dt-index { position: sticky; top: 1.5rem; }
  .dt-index-label {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem;
  }
  .dt-index ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
  .dt-index li a {
    display: block; padding: 0.5rem 0 0.5rem 1rem; margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink-soft); text-decoration: none; font-size: 0.94rem; line-height: 1.35;
  }
  .dt-index li a:hover { color: var(--moss-dark); border-left-color: var(--moss); }

  .dt-therapy + .dt-therapy { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); padding-top: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); border-top: 1px solid var(--border); }
  .dt-therapy h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
  .dt-therapy p { margin-top: 0.9rem; color: var(--ink-soft); }
  .dt-inline-label {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); margin-top: 1.4rem;
  }
  .dt-list { margin: 0.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
  .dt-list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; }
  .dt-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
  .dt-list strong { color: var(--ink); }

  .dt-disclaimer {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.88rem;
  }

  @media (max-width: 900px) {
    .dt-layout { grid-template-columns: 1fr; }
    .dt-index { position: static; }
    .dt-index ul { display: flex; flex-wrap: wrap; gap: 0.5rem; border-left: none; }
    .dt-index li a {
      padding: 0.4rem 0.9rem; margin-left: 0; border-left: none;
      border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 0.88rem;
    }
    .dt-index li a:hover { border-color: var(--moss); border-left-color: var(--moss); }
  }

  /* ============ TEASER DIAGNOSE & THERAPIEN ============ */
  .dt-teaser { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .dt-teaser-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 1.2rem + 2vw, 3rem); }
  .dt-teaser-inner > div { flex: 1 1 480px; }
  .dt-teaser-inner h2 { margin-top: 0.9rem; font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem); }
  .dt-teaser-inner p { margin-top: 1.1rem; max-width: 62ch; color: var(--ink-soft); font-size: 1rem; }
  .dt-teaser-inner .btn { flex: none; }

  /* Methoden-Wolke: Tags sind Links auf die Detailseite */
  a.tag { text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
  a.tag:hover { border-color: var(--moss); color: var(--moss-dark); }

  .dt-hero-figure { margin: clamp(2.2rem, 1.8rem + 1.5vw, 3rem) 0 0; }
  .dt-hero-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 60%; border-radius: 22px; box-shadow: var(--shadow); }
  .dt-hero-figure figcaption { margin-top: 0.8rem; color: var(--muted); font-size: 0.86rem; }

  /* --- Funktionelle Medizin (Block in der Intro-Sektion) --- */
  .dt-fm {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-top: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    border-top: 1px solid var(--border);
  }
  .dt-fm h2 { margin-top: 0.9rem; font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem); }
  .dt-fm-body {
    margin-top: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  }
  .dt-fm-body p { color: var(--ink-soft); }
  .dt-fm-body p + p { margin-top: 1.1rem; }
  .dt-fm-body em { font-family: var(--font-display); font-style: italic; color: var(--moss-dark); }
  .dt-fm-note {
    margin-top: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    padding: 1rem 1.2rem; border-left: 3px solid var(--moss);
    background: color-mix(in srgb, var(--moss) 8%, var(--card));
    border-radius: 0 12px 12px 0; color: var(--ink-soft); font-size: 0.95rem;
  }

  @media (max-width: 780px) { .dt-fm-body { grid-template-columns: 1fr; } }


  /* ============================================================
     IMPRESSUM & DATENSCHUTZ (impressum.html)
     Ruhige Lesefassung: schmale Textspalte, klebendes Inhaltsverzeichnis
     ============================================================ */

  .legal-hero {
    background: var(--paper-soft);
    border-bottom: 1px solid var(--border);
    padding: clamp(2.6rem, 2.2rem + 2.5vw, 4.4rem) 0 clamp(2.2rem, 1.9rem + 2vw, 3.4rem);
  }
  .legal-hero h1 {
    margin-top: 0.9rem;
    font-size: clamp(2rem, 1.55rem + 2.2vw, 3rem);
    line-height: 1.12;
  }
  .legal-hero-lede {
    margin-top: 1.2rem; max-width: 64ch;
    color: var(--ink-soft); font-size: 1.04rem; line-height: 1.72;
  }
  .legal-hero-meta {
    margin-top: 1.6rem; font-size: 0.78rem; letter-spacing: 0.1em;
    /* --muted erreicht auf --paper-soft im hellen Modus nur 4,19:1 */
    text-transform: uppercase; color: var(--ink-soft);
  }

  .legal { background: var(--paper); }
  .legal-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
    align-items: start;
  }

  /* --- Inhaltsverzeichnis --- */
  .legal-toc { position: sticky; top: 13.5rem; }
  .legal-toc-title {
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 0.9rem;
  }
  .legal-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
  .legal-toc li { margin: 0; }
  .legal-toc a {
    display: block; padding: 0.42rem 0 0.42rem 1rem;
    margin-left: -1px; border-left: 2px solid transparent;
    font-size: 0.92rem; line-height: 1.35; color: var(--ink-soft);
    text-decoration: none; transition: color 0.18s ease, border-color 0.18s ease;
  }
  .legal-toc a:hover { color: var(--moss-dark); border-left-color: var(--moss); }
  .legal-toc .legal-toc-break > a {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-display); font-weight: 600; color: var(--ink);
  }
  .legal-toc li:first-child > a {
    font-family: var(--font-display); font-weight: 600; color: var(--ink);
  }

  /* --- Textspalte --- */
  .legal-body { max-width: 68ch; }
  .legal-body h2 {
    font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
    line-height: 1.15;
  }
  .legal-body h2.legal-part-two {
    margin-top: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
    padding-top: clamp(2.4rem, 2rem + 2vw, 3.4rem);
    border-top: 1px solid var(--border);
  }
  .legal-body h3 {
    margin-top: clamp(2rem, 1.7rem + 1.2vw, 2.8rem);
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem);
    line-height: 1.35; color: var(--ink);
  }
  .legal-body p {
    margin-top: 0.85rem; color: var(--ink-soft);
    font-size: 0.98rem; line-height: 1.78;
  }
  .legal-body ul {
    margin-top: 0.9rem; padding-left: 1.15rem;
    color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7;
  }
  .legal-body li { margin-top: 0.4rem; }
  .legal-body li::marker { color: var(--moss); }
  .legal-body strong { color: var(--ink); font-weight: 600; }
  .legal-body a { color: var(--moss-dark); text-decoration: underline; text-underline-offset: 3px; }
  .legal-body a:hover { color: var(--forest); }
  .legal-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em; padding: 0.1em 0.4em; border-radius: 5px;
    background: color-mix(in srgb, var(--moss) 10%, var(--card));
    color: var(--ink);
  }
  .legal-address {
    font-style: normal; line-height: 1.65;
  }

  /* --- Hervorgehobene Kästen --- */
  .legal-callout {
    margin-top: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    padding: clamp(1.2rem, 1rem + 0.8vw, 1.7rem) clamp(1.2rem, 1rem + 1vw, 1.9rem);
    border-left: 3px solid var(--moss);
    background: color-mix(in srgb, var(--moss) 8%, var(--card));
    border-radius: 0 14px 14px 0;
  }
  .legal-callout-title {
    margin-top: 0 !important;
    font-family: var(--font-display); font-weight: 600;
    color: var(--ink) !important; font-size: 1rem !important;
  }
  .legal-callout p + p, .legal-callout ul { margin-top: 0.7rem; }

  .legal-back {
    margin-top: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem);
    font-size: 0.9rem;
  }
  .legal-back a { color: var(--muted); text-decoration: none; }
  .legal-back a::before { content: "\2191\00a0"; }
  .legal-back a:hover { color: var(--moss-dark); }

  @media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 2.2rem; }
    .legal-toc {
      position: static;
      padding: 1.1rem 1.3rem 1.3rem;
      border: 1px solid var(--border); border-radius: 16px;
      background: var(--card);
    }
    .legal-toc ul {
      border-left: 0;
      display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 0 1.2rem;
    }
    .legal-toc a { padding-left: 0; border-left: 0; }
    .legal-toc a:hover { border-left: 0; }
    .legal-toc .legal-toc-break > a { margin-top: 0.6rem; }
    .legal-body { max-width: none; }
  }

  /* ============================================================
     SPRUNGMARKEN
     Der Header ist position:sticky und 192px hoch (mobil 176px).
     Ohne genug scroll-margin-top landet das Ziel eines Ankerlinks
     dahinter und ist unsichtbar. 13.5rem = 216px laesst 24px Luft.
     Gilt fuer jedes Element mit id innerhalb von <main>, damit neue
     Anker das automatisch erben.
     ============================================================ */
  main[id], main [id] { scroll-margin-top: 13.5rem; }

  /* ============================================================
     LANGTEXT / ARTIKEL  (.lr-*)
     Bewusst generisch: dieses Layout traegt die Story-Seite
     UND spaeter jeden Blogartikel. Keine seitenspezifischen
     Namen, keine eigenen scroll-margin-Werte.
     ============================================================ */

  /* --- Kopf --- */
  .lr-hero { background: var(--paper); padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .lr-hero-inner { max-width: 46rem; display: flex; flex-direction: column; align-items: flex-start; }
  .lr-back {
    display: inline-block; margin-bottom: 1.8rem;
    font-size: 0.88rem; font-weight: 600; color: var(--muted); text-decoration: none;
  }
  .lr-back:hover { color: var(--moss-dark); text-decoration: underline; }
  .lr-hero h1 {
    margin-top: 1rem;
    font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.1rem);
    letter-spacing: -0.01em;
  }
  .lr-lede {
    margin-top: 1.1rem;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.12rem, 1rem + 0.55vw, 1.35rem);
    line-height: 1.45; color: var(--moss-dark);
  }
  .lr-meta {
    margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
  }

  /* --- Lesespalte ---
     Achtung: die Breitenbegrenzung sitzt auf .lr-body, NICHT auf .wrap.
     .wrap gibt weiterhin die Seitenbreite von 1180px vor. */
  .lr { background: var(--paper); }
  .lr-part-one { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .lr-body { max-width: 40rem; margin: 0 auto; }
  .lr-body > * + * { margin-top: 1.25rem; }
  .lr-body p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.72; }
  .lr-intro { font-size: 1.16rem !important; color: var(--ink) !important; }
  .lr-body h2 {
    margin-top: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
    font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem);
    color: var(--ink);
  }
  .lr-body h3 {
    margin-top: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
    font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem);
    color: var(--ink);
  }
  .lr-body ul, .lr-body ol { margin: 1.25rem 0 0; padding-left: 1.3rem; color: var(--ink-soft); }
  .lr-body li + li { margin-top: 0.5rem; }
  .lr-body a:not(.btn):not(.link-more) { color: var(--moss-dark); text-decoration: underline; text-underline-offset: 3px; }

  /* --- Bild: etwas breiter als die Lesespalte --- */
  .lr-figure { max-width: 52rem; margin: clamp(2.6rem, 2rem + 2vw, 3.6rem) auto 0; }
  .lr-figure-lead { margin-top: 0; margin-bottom: clamp(2.6rem, 2rem + 2vw, 3.6rem); }
  .lr-figure img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); }
  .lr-figure figcaption {
    margin-top: 0.85rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); text-align: center;
  }
  .lr-credit { display: block; margin-top: 0.15rem; font-size: 0.78rem; }
  .lr-figure + .lr-body { margin-top: clamp(2.6rem, 2rem + 2vw, 3.6rem); }

  /* --- Zitat im Fliesstext --- */
  .lr-quote {
    margin: clamp(2.4rem, 2rem + 1.6vw, 3.2rem) 0 0;
    padding-left: 1.5rem; border-left: 3px solid var(--gold);
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--ink);
  }

  /* --- Dunkles Band mitten im Text ---
     Dauerhaft dunkle Flaeche: feste helle Hex-Werte statt Tokens. --- */
  .lr-band { background: var(--forest); color: #F3EFDC; }
  .lr-band-inner { max-width: 44rem; }
  .lr-band .eyebrow { color: #D9CD98; }
  .lr-band h2 {
    margin-top: 1rem;
    font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem); color: #FBF9EE;
  }
  .lr-band p { margin-top: 1.2rem; color: #C9C5AC; font-size: 1.06rem; line-height: 1.72; }

  @media (max-width: 640px) {
    .lr-figure img { border-radius: 14px; }
    .lr-quote { padding-left: 1.1rem; }
  }

  /* ============================================================
     WISSENSWERTES — Uebersicht (.bl-*)
     Keine Fotos auf den Karten: die 73 Artikelbilder sind
     stilistisch zu verschieden. Stattdessen typografische Kacheln,
     die Themenfarbe traegt ausschliesslich Dekoration (Balken und
     Punkt) — nie Text. Deshalb ist sie von Kontrastfragen frei.
     ============================================================ */

  /* --- Themenfarben, nur dekorativ --- */
  :root {
    --t-hormone:   #BE6C3C;
    --t-darm:      #5E8C3E;
    --t-labor:     #AE8B2A;
    --t-psyche:    #3C6B5A;
    --t-verfahren: #8A5566;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --t-hormone:   #D98F60;
      --t-darm:      #8EAE68;
      --t-labor:     #D6B84E;
      --t-psyche:    #5E9B84;
      --t-verfahren: #B77E90;
    }
  }
  :root[data-theme="dark"] {
    --t-hormone:   #D98F60;
    --t-darm:      #8EAE68;
    --t-labor:     #D6B84E;
    --t-psyche:    #5E9B84;
    --t-verfahren: #B77E90;
  }

  /* --- Kopf --- */
  .bl-hero { background: var(--paper); padding-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
  .bl-hero-inner { max-width: 48rem; }
  .bl-hero h1 { margin-top: 1rem; font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); letter-spacing: -0.01em; }
  .bl-hero .bl-lede {
    margin-top: 1.1rem; font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.45; color: var(--moss-dark);
  }
  .bl-hero > .wrap > p:not(.bl-lede) { margin-top: 1.2rem; color: var(--ink-soft); }

  /* --- Filter --- */
  .bl-liste { background: var(--paper-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .bl-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
  .bl-filter-label {
    margin-right: 0.4rem; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  }
  .bl-filter button {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--ink); border: 1px solid var(--border);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .bl-filter button:hover { border-color: var(--moss); }
  .bl-filter button[aria-pressed="true"] { background: var(--moss); color: var(--btn-primary-ink); border-color: var(--moss); }
  .bl-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
  .bl-filter button[aria-pressed="true"] .bl-punkt { background: var(--btn-primary-ink); }
  .bl-treffer { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-soft); }

  /* --- Raster --- */
  .bl-grid {
    margin-top: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); align-items: stretch;
  }
  .bl-card {
    position: relative; height: 100%;
    display: flex; flex-direction: column; gap: 0.7rem;
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .bl-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--akzent, var(--moss));
  }
  .bl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--akzent, var(--moss)); }
  .bl-card:focus-within { border-color: var(--akzent, var(--moss)); }
  .bl-card[data-thema="hormone"]   { --akzent: var(--t-hormone); }
  .bl-card[data-thema="darm"]      { --akzent: var(--t-darm); }
  .bl-card[data-thema="labor"]     { --akzent: var(--t-labor); }
  .bl-card[data-thema="psyche"]    { --akzent: var(--t-psyche); }
  .bl-card[data-thema="verfahren"] { --akzent: var(--t-verfahren); }

  .bl-thema {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .bl-thema .bl-punkt { background: var(--akzent, var(--moss)); }
  /* h2, nicht h3: die Karten stehen direkt unter der h1 der Seite, ein
     Sprung h1 -> h3 waere ein Hierarchiefehler. */
  .bl-card h2 { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem); line-height: 1.25; }
  .bl-card h2 a { text-decoration: none; }
  .bl-card h2 a::after { content: ""; position: absolute; inset: 0; }
  .bl-card h2 a:hover { text-decoration: underline; }
  .bl-teaser {
    color: var(--ink-soft); font-size: 0.94rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bl-mehr { margin-top: auto; font-size: 0.88rem; font-weight: 600; color: var(--moss-dark); }
  .bl-card[hidden] { display: none; }

  @media (max-width: 980px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) {
    .bl-grid { grid-template-columns: 1fr; }
    .bl-filter { gap: 0.45rem; }
    .bl-filter button { font-size: 0.85rem; padding: 0.45rem 0.85rem; }
  }

  /* --- Haftungshinweis unter Artikeln --- */
  .lr-hinweis { background: var(--paper); padding-top: 0; }
  .lr-hinweis-inner { max-width: 40rem; margin: 0 auto; padding-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); border-top: 1px solid var(--border); }
  .lr-hinweis p { font-size: 0.9rem; line-height: 1.65; color: var(--ink-soft); }

  /* --- Video im Artikel --- */
  .lr-figure video { width: 100%; border-radius: 20px; display: block; background: #000; }

  /* Schmale Vorschaubilder (unter 640px Originalbreite) nicht hochskalieren. */
  .lr-figure-klein { max-width: 26rem; }

  /* ============================================================
     Nur fuer Screenreader: sichtbar fuer Hilfsmittel, unsichtbar
     im Layout. Kein display:none und kein visibility:hidden —
     beides wuerde den Text auch fuer Screenreader entfernen.
     ============================================================ */
  .nur-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ============================================================
     Aktueller Navigationspunkt — sichtbar, nicht nur fuer Screenreader.
     aria-current="page" setzt _a11y.py in Kopf, mobilem Menue und Fuss.
     ============================================================ */
  nav.main-nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
  }
  nav.main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--moss);
    border-radius: 2px;
  }
  .mobile-panel nav a[aria-current="page"] {
    color: var(--moss-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
  /* Im Fuss liegt die Navigation auf dauerhaft dunklem Grund. */
  footer.site a[aria-current="page"] {
    color: #FBF9EE;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #A8934A;
    text-decoration-thickness: 2px;
  }

  /* ============================================================
     Aus dem Bild gehobener Text — DERZEIT UNBENUTZT.
     Vier Canva-Kacheln tragen einen Satz, der sonst nirgends auf der
     Seite steht. Der steht jetzt im alt-Text: Als Bildunterschrift
     wuerde er fuer sehende Besucher doppelt erscheinen, einmal im Bild
     und einmal darunter.
     Diese Klasse wartet auf den Fall, dass die vier Motive ohne
     Textebene neu aus Canva kommen — dann ist die Unterschrift der
     richtige Ort, und der alt-Text beschreibt wieder nur das Foto.
     ============================================================ */
  .lr-bildtext {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    text-align: left;
    max-width: 40rem;
    margin: 0 auto 0.6rem;
  }
  .lr-bildtext + .lr-credit { display: block; margin-top: 0.5rem; }