/* FETAI · MK · stili i faqeve tematike */

/* ============================================================
   HYALURONSÄURE · Bausteine, die es nur auf dieser Unterseite gibt.
   Alle Werte kommen aus fetai-styles.css. Hier steht keine Zahl,
   die nicht aus dem Takt, der Skala oder der Palette stammt.
   ============================================================ */

  /* Sprungmarke für Tastatur und Vorlesegerät */
  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--forest); color: var(--cream);
    font-family: var(--ui); font-size: var(--fs-cta); letter-spacing: var(--ls-cta); text-transform: uppercase; padding: 14px 22px; }
  .skip-link:focus { left: 12px; top: 12px; }

  /* ===== Seitenkopf: Jade unter dem Bild, ein Titel, ein Versprechen ===== */
  .page-hero { position: relative; background: var(--forest); overflow: hidden; padding-top: 96px; }
  .page-hero-photo { position: absolute; top: 0; bottom: 0; left: 0; width: 58%; }
  .page-hero-photo img { width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 16%; filter: saturate(1.02) contrast(1.03) brightness(1.06); }
  /* Der Uebergang: links bleibt das Foto offen, nach rechts schliesst die Jade
     langsam zu. Die Schrift steht erst dort, wo die Flaeche ruhig ist. */
  .page-hero::after { content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(96deg,
        rgba(10,26,19,0) 0%, rgba(10,26,19,0.02) 20%, rgba(10,26,19,0.10) 31%,
        rgba(10,26,19,0.42) 39%, rgba(10,26,19,0.82) 45%, rgba(10,26,19,0.97) 50%,
        var(--forest) 56%),
      linear-gradient(180deg, rgba(5,18,13,0.3) 0%, rgba(5,18,13,0) 22%,
        rgba(5,18,13,0) 74%, rgba(5,18,13,0.3) 100%); }
  .page-hero-credit { position: absolute; left: var(--pad-side); bottom: 18px; z-index: 3;
    font-family: var(--ui); font-weight: 400; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: rgba(242,240,234,0.42); pointer-events: none; }
  .page-hero-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-bright) 50%, var(--gold) 78%, transparent); opacity: 0.55; }
  .page-hero-inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto;
    padding: clamp(56px,7vw,104px) var(--pad-side) clamp(64px,7vw,112px);
    display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); align-items: center; gap: var(--gap-l); }
  .page-hero-text { grid-column: 2; max-width: 27em; padding-right: clamp(0px, 3vw, 60px); }
  /* Der Titel setzt sich Zeile fuer Zeile, ein einziges Mal beim Laden */
  .page-hero h1 .ln { display: block; }
  .crumbs { font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu); letter-spacing: var(--ls-menu);
    color: rgba(242,240,234,0.62); margin-bottom: var(--gap-m); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .crumbs a { color: rgba(242,240,234,0.78); }
  .crumbs a:hover { color: var(--gold-bright); }
  .crumbs i { font-style: normal; color: var(--gold); opacity: 0.7; }
  .page-hero-label { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-bright); display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
  .page-hero-label::before { content: ''; width: 46px; height: 7px; flex: 0 0 auto;
    background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .page-hero h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-title);
    letter-spacing: 0.075em; line-height: 1.1; color: var(--cream); margin: 0 0 var(--gap-m); }
  .page-hero h1 em { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--gold-bright); }
  .page-hero-lead { font-family: var(--display); font-style: italic; font-size: var(--fs-lead); line-height: 1.32;
    color: var(--gold-bright); margin: 0 0 var(--gap-m); max-width: 22em; }
  .page-hero-text p { color: rgba(242,240,234,0.86); max-width: var(--measure); margin: 0 0 var(--gap-m); }
  .page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-bottom: var(--gap-m); }
  .link-quiet { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); color: var(--gold-bright); }
  .link-quiet:hover { color: var(--cream); }
  .review-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: var(--gap-m);
    border-top: 1px solid rgba(201,169,110,0.32); font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu);
    letter-spacing: var(--ls-menu); color: rgba(242,240,234,0.62); }
  .review-line b { font-weight: 500; color: var(--gold-bright); }
  .review-line i { display: block; width: 1px; height: 12px; background: var(--gold); opacity: 0.5; }

  @media (prefers-reduced-motion: no-preference) {
    .js .page-hero .anim { opacity: 0; translate: 0 16px;
      transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
      transition-delay: var(--d, 0ms); }
    .js .page-hero.lit .anim { opacity: 1; translate: 0 0; }
    .js .page-hero-label::before { transform: scaleX(0); transform-origin: left;
      transition: transform var(--t-slow) var(--ease) 140ms; }
    .js .page-hero.lit .page-hero-label::before { transform: scaleX(1); }
  }

  /* ===== Guetezeichen: eine schmale Leiste, viermal auf der Seite =====
     Sie steht immer zwischen zwei Sektionen und traegt genau eine Jadeform,
     das kleine Quadrat mit dem Zeichen. */
  .trust-strip { background: var(--paper); border-top: 1px solid var(--border-gold);
    border-bottom: 1px solid var(--border-gold); position: relative; }
  .trust-inner { max-width: 1440px; margin: 0 auto; padding: var(--gap-m) var(--pad-side);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(228px,1fr)); gap: 20px 44px; align-items: start; }
  .trust-item { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: start; }
  .trust-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius);
    background: var(--mat); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,169,110,0.45); }
  .trust-item b { display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.5; color: var(--forest); }
  .trust-item p { margin: 4px 0 0; font-family: var(--body); font-size: var(--fs-note);
    line-height: 1.55; color: var(--text-muted); }
  .trust-item a { text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(201,169,110,0.7); }

  /* ===== Kennzahlenband ===== */
  .hero-strip { background: linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 100%); border-bottom: 1px solid var(--border-gold); }
  .hero-strip-inner { max-width: 1440px; margin: 0 auto; padding: var(--gap-l) var(--pad-side);
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: var(--gap-m) var(--gap-l); align-items: center; }
  .hero-stat { display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: 26px; }
  .hero-stat::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
    background: linear-gradient(180deg, var(--gold), transparent); opacity: 0.6; }
  .hero-stat b { font-family: var(--display); font-weight: 400; font-size: var(--fs-num); line-height: 1;
    color: var(--gold-bright); font-variant-numeric: lining-nums tabular-nums; }
  .hero-stat span { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: rgba(242,240,234,0.6); }

  /* ===== Direktantworten: der Block, aus dem zitiert wird ===== */
  .aeo-section { background: var(--linen); border-bottom: 1px solid var(--line); }
  .aeo-inner { max-width: 1440px; margin: 0 auto; padding: var(--pad-sec) var(--pad-side); position: relative; }
  .aeo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding-bottom: var(--gap-m); border-bottom: 1px solid var(--border-gold); margin-bottom: var(--gap-l); position: relative; }
  .aeo-head::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 46px; height: 7px;
    background: linear-gradient(var(--forest), var(--forest)) left center / 7px 7px no-repeat,
                linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .aeo-head h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-section); line-height: 1.1; color: var(--forest); margin: 0; }
  .aeo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
  .aeo-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 28px 28px; box-shadow: var(--lift-rest); }
  .aeo-item:hover { box-shadow: var(--lift-hover); }
  .aeo-item dt { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 14px; }
  .aeo-item dd { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--text-muted); }
  .aeo-item dd b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-card);
    line-height: 1.25; color: var(--forest); margin-bottom: 8px; }

  /* ============================================================
     DIE TIEFENLINIE · die Signatur dieser Unterseite.
     Ein Querschnitt durch die Haut. Eine Wasserlinie wandert
     langsam hindurch und zeigt, in welcher Schicht das Depot
     liegt. Das einzige Element, das sich auf dieser Seite
     dauerhaft bewegt. Alles andere steht still.
     ============================================================ */
  .dl-section { background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%); position: relative; }
  .dl-grid { display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr); gap: clamp(48px,6vw,96px); align-items: center; }
  .dl-head .overline { color: var(--gold-bright); }
  .dl-head .overline::before { background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                                            linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .dl-head h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-section); line-height: 1.1;
    letter-spacing: -0.014em; color: var(--cream); margin: 0 0 var(--gap-m); }
  .dl-head h2 em { font-style: italic; color: var(--gold-bright); }
  .dl-head p { color: rgba(242,240,234,0.82); max-width: var(--measure); margin: 0 0 20px; }
  .dl-head p em { color: var(--gold-bright); }
  .dl-head .cta-outline { margin-top: var(--gap-s); }
  .dl-frame { position: relative; background: var(--mat); border: 1px solid var(--forest); border-radius: var(--radius);
    padding: 10px; box-shadow: var(--lift-rest-dark); }
  .dl-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.55);
    border-radius: 1px; pointer-events: none; z-index: 2; }
  .dl-svg { width: 100%; height: auto; display: block; border-radius: 1px; }
  .dl-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 10px 24px; margin-top: 18px; }
  .dl-tag { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-bright); }
  .dl-note { font-family: var(--body); font-style: italic; font-size: var(--fs-note); color: rgba(242,240,234,0.55); }
  .dl-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 20px 32px;
    margin: var(--gap-l) 0 0; padding-top: var(--gap-m); border-top: 1px solid rgba(201,169,110,0.28); }
  .dl-legend dt { display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--cream); margin-bottom: 8px; }
  .dl-legend dd { margin: 0; font-size: var(--fs-note); line-height: 1.6; color: rgba(242,240,234,0.66); }
  .dl-sw { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 1px; }
  .dl-sw-epi { background: #2a6346; }
  .dl-sw-derm { background: #1a4030; box-shadow: inset 0 0 0 1px rgba(201,169,110,0.6); }
  .dl-sw-sub { background: #12291b; box-shadow: inset 0 0 0 1px rgba(201,169,110,0.35); }
  .dl-sw-bone { background: #050b0e; box-shadow: inset 0 0 0 1px #2c4f45; }
  /* Die Wasserlinie. Eine Bewegung, eine Kurve, achtzehn Sekunden. */
  .dl-wave { animation: dlSweep 18s var(--ease) infinite alternate; }
  @keyframes dlSweep { from { transform: translateX(-146px); } to { transform: translateX(254px); } }
  @media (prefers-reduced-motion: reduce) { .dl-wave { animation: none; transform: translateX(54px); } }

  /* ===== Fließtext, zweispaltig: links die kurze Antwort, rechts die Ausführung ===== */
  .prose-section { background: var(--cream); position: relative; }
  .prose-section.linen { background: var(--linen); }
  .prose-section.dark, .facts-section.dark, .areas-section {
    background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%); }
  .prose-grid { display: grid; grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr); gap: clamp(48px,6vw,96px); align-items: start; }
  .prose-side { position: sticky; top: 130px; }
  .prose-side h2, .facts-head h2, .areas-text h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-section);
    line-height: 1.1; letter-spacing: -0.014em; color: var(--forest); margin: 0 0 var(--gap-m); }
  .prose-side h2 em, .facts-head h2 em, .areas-text h2 em, .ask-text h2 em { font-style: italic; color: var(--gold-deep); }
  .answer { margin: 0; padding-top: var(--gap-m); border-top: 1px solid var(--border-gold); font-size: var(--fs-small);
    line-height: 1.68; color: var(--text-muted); max-width: 34em; }
  .answer::before { content: 'Shkurt'; display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 10px; }
  .prose-block { margin-bottom: var(--gap-l); max-width: var(--measure); }
  .prose-block:last-child { margin-bottom: 0; }
  .prose-block h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-sub); line-height: 1.25;
    color: var(--forest); margin: 0 0 20px; position: relative; padding-bottom: 18px; }
  .prose-block h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 46px; height: 7px;
    background: linear-gradient(var(--forest), var(--forest)) left center / 7px 7px no-repeat,
                linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .prose-block h4 { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); margin: var(--gap-m) 0 10px; }
  .prose-block p { margin: 0 0 20px; }
  .prose-block p:last-child { margin-bottom: 0; }
  .prose-block ul, .prose-block ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
  .prose-block li { position: relative; padding: 0 0 12px 26px; line-height: 1.65; }
  .prose-block li::before { content: ''; position: absolute; left: 0; top: 0.82em; width: 14px; height: 1px; background: var(--gold); }
  .prose-block strong { font-weight: 600; color: var(--forest); }
  .answer-first { font-weight: 500; color: var(--text); }
  .definition { border-left: 1px solid var(--gold); padding: 4px 0 4px 24px; font-style: italic; color: var(--forest); }
  .callout { background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--gold);
    border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--lift-rest); margin-top: var(--gap-m); }
  .callout .lbl { display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 10px; }
  .callout p { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--text-muted); }
  .prose-section.dark .section-title, .prose-section.dark .prose-block h3 { color: var(--cream); }
  .prose-section.dark .section-header { border-bottom-color: rgba(201,169,110,0.3); }
  .prose-section.dark .section-header::after, .prose-section.dark .prose-block h3::after {
    background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .prose-section.dark p, .prose-section.dark li { color: rgba(242,240,234,0.82); }
  .prose-section.dark .section-label { color: rgba(242,240,234,0.5); }
  .hy-merkmale li::before { top: 0.82em; }

  /* ===== Zitat ===== */
  .hy-quote { margin: var(--gap-m) 0; padding-left: 28px; border-left: 1px solid var(--gold); max-width: var(--measure); }
  .hy-quote p { font-family: var(--display); font-style: italic; font-size: var(--fs-lead); line-height: 1.4;
    color: var(--forest); margin: 0; }
  .hy-quote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .hy-quote.signed cite::before { content: ''; display: block; width: 120px; height: 14px; margin: 0 0 12px;
    border-bottom: 1px solid var(--gold); border-radius: 0 0 60% 40%; transform: rotate(-2deg); opacity: 0.75; }

  /* ===== Bilder ===== */
  .op-img-wrap { position: relative; background: var(--mat); border: 1px solid var(--forest); border-radius: var(--radius);
    padding: 10px; box-shadow: var(--lift-rest-dark); overflow: hidden; }
  .op-img-wrap::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.55);
    border-radius: 1px; pointer-events: none; z-index: 2; }
  .op-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
  .hy-figure { margin: var(--gap-l) 0 0; }
  .hy-figure .op-img-wrap { max-width: 760px; aspect-ratio: 16/9; }
  .hy-duo { display: block; position: relative; height: 100%; }
  .hy-duo img { filter: grayscale(1) contrast(1.18) brightness(0.96); }
  .hy-duo::before { content: ''; position: absolute; inset: 0; background: var(--forest); mix-blend-mode: lighten; pointer-events: none; }
  .hy-duo::after { content: ''; position: absolute; inset: 0; background: #8fb39c; mix-blend-mode: multiply; pointer-events: none; }
  .hy-cap { display: block; margin-top: 14px; font-family: var(--body); font-style: italic; font-size: var(--fs-note);
    color: var(--text-light); line-height: 1.5; }
  .areas-visual .hy-cap { color: rgba(242,240,234,0.55); }

  /* ===== Zonen: Reiter auf Jade ===== */
  .areas-grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: clamp(48px,6vw,96px); align-items: start; }
  .areas-text .overline { color: var(--gold-bright); }
  .areas-text .overline::before { background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                                              linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .areas-text h2 { color: var(--cream); }
  .areas-text .answer { color: rgba(242,240,234,0.82); border-top-color: rgba(201,169,110,0.3); }
  .areas-text .answer::before { color: var(--gold-bright); }
  .areas-visual .op-img-wrap { aspect-ratio: 16/9; }
  .hy-tabs { margin-top: var(--gap-m); }
  .hy-tablist { display: flex; flex-wrap: wrap; gap: 14px 22px; border-bottom: 1px solid rgba(201,169,110,0.28);
    padding-bottom: 18px; margin-bottom: var(--gap-m); }
  .hy-tablist button { background: none; border: 0; padding: 8px 0; cursor: pointer; position: relative;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label);
    color: rgba(242,240,234,0.6); transition: color var(--t-fast) ease; }
  .hy-tablist button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--gold-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); }
  .hy-tablist button:hover, .hy-tablist button[aria-selected="true"] { color: var(--cream); }
  .hy-tablist button[aria-selected="true"]::after { transform: scaleX(1); }
  .hy-panels p { color: rgba(242,240,234,0.86); margin: 0; max-width: var(--measure); }
  .hy-panels [role="tabpanel"] { animation: riseIn var(--t-mid) var(--ease) both; }
  @keyframes riseIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

  /* ===== Ablauf: Zeitleiste zum Aufklappen ===== */
  .hy-tl { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; margin-top: var(--gap-l); }
  .tl-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
  .tl-step.open { border-color: var(--border-gold); box-shadow: var(--lift-rest); }
  .tl-toggle { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: center; }
  .tl-num { font-family: var(--ui); font-weight: 500; font-size: var(--fs-micro); letter-spacing: var(--ls-micro);
    color: var(--cream); background: var(--forest); padding: 7px 12px; border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(201,169,110,0.5); }
  .tl-time { font-family: var(--ui); font-weight: 400; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: var(--text-light); }
  .tl-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: var(--fs-item);
    line-height: 1.3; color: var(--forest); }
  .tl-title svg { color: var(--gold-deep); transition: transform var(--t-mid) var(--ease); }
  .tl-toggle[aria-expanded="true"] .tl-title svg { transform: rotate(180deg); }
  .tl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); width: 100%; }
  .tl-panel > * { overflow: hidden; min-height: 0; }
  .tl-step.open .tl-panel { grid-template-rows: 1fr; }
  .tl-text { display: block; padding-top: 14px; font-size: var(--fs-note); line-height: 1.6; color: var(--text-muted); text-align: center; }

  /* ===== Fakten auf Jade ===== */
  .facts-grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(48px,6vw,96px); align-items: start; }
  .facts-head .overline { color: var(--gold-bright); }
  .facts-head .overline::before { background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                                              linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .facts-head h2 { color: var(--cream); }
  .facts-head .answer { color: rgba(242,240,234,0.82); border-top-color: rgba(201,169,110,0.3); }
  .facts-head .answer::before { color: var(--gold-bright); }
  .facts-table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--lift-rest-dark); overflow: hidden; }
  .facts-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 22px 28px; border-bottom: 1px solid var(--border-gold); }
  .facts-caption b { font-family: var(--display); font-weight: 400; font-size: var(--fs-card); color: var(--forest); }
  .facts-caption span { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--text-light); }
  .facts-table table { width: 100%; border-collapse: collapse; }
  .facts-table td { padding: 20px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .facts-table td:first-child { padding-left: 28px; width: 1%; }
  .facts-table td:last-child { padding-right: 28px; }
  .facts-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius);
    background: var(--mat); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,169,110,0.45); }
  .facts-row-label { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--text-light); }
  .facts-row-value { display: block; font-family: var(--display); font-size: var(--fs-item); color: var(--forest);
    font-variant-numeric: lining-nums tabular-nums; }
  .facts-row-sub { display: block; font-size: var(--fs-note); color: var(--text-muted); line-height: 1.5; margin-top: 4px; }
  .facts-note { padding: 18px 28px; font-family: var(--body); font-style: italic; font-size: var(--fs-note); color: var(--text-light); }

  /* ===== Mythos und Fakt ===== */
  .hy-myth-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
  .hy-myth { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--lift-rest); overflow: hidden; display: flex; flex-direction: column; }
  .hy-myth.open { border-color: var(--border-gold); }
  .hy-myth-q { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 26px 28px 22px;
    cursor: pointer; font: inherit; color: inherit; }
  .hy-myth .tag { display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--text-light); margin-bottom: 12px; }
  .hy-myth-q p { font-family: var(--display); font-style: italic; font-size: var(--fs-item); line-height: 1.35;
    color: var(--text-muted); margin: 0 0 16px; }
  .hy-myth-cue { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); color: var(--gold-deep); }
  .hy-myth-cue svg { transition: transform var(--t-mid) var(--ease); }
  .hy-myth-q[aria-expanded="true"] .hy-myth-cue svg { transform: rotate(180deg); }
  .hy-myth-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); }
  .hy-myth-a > * { min-height: 0; overflow: hidden; }
  .hy-myth.open .hy-myth-a { grid-template-rows: 1fr; }
  .hy-myth-a > div { margin: 0 28px; }
  .hy-myth-a .tag { color: var(--gold-deep); padding-top: 16px; border-top: 1px solid var(--border-gold); }
  .hy-myth-a p { margin: 0; padding-bottom: 26px; font-size: var(--fs-small); line-height: 1.65; color: var(--text); }
  .prose-section.dark .hy-myth-q p { color: var(--text-muted); }

  /* ===== Tabellen: Zonen und Vergleich ===== */
  .cmp-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--lift-rest); overflow-x: auto; }
  .cmp-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; }
  .cmp-wrap caption { text-align: left; padding: 22px 28px 18px; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep);
    border-bottom: 1px solid var(--border-gold); }
  .cmp-wrap th { text-align: left; padding: 16px 20px; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--text-light); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .cmp-wrap th.win { color: var(--forest); background: rgba(201,169,110,0.08); }
  .cmp-wrap td { padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-small);
    line-height: 1.5; color: var(--text-muted); }
  .cmp-wrap td.win { color: var(--forest); background: rgba(201,169,110,0.06); font-weight: 500; }
  .cmp-wrap td:first-child { color: var(--text); }
  .cmp-wrap tr:last-child td { border-bottom: 0; }
  .cmp-wrap .price { font-family: var(--display); font-size: var(--fs-item); color: var(--forest);
    font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
  .zone-table table { min-width: 480px; }
  .zone-table td:nth-child(2) { white-space: nowrap; }

  /* ===== Preisrechner ===== */
  .hy-calc { position: relative; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--gold);
    border-radius: var(--radius); box-shadow: var(--lift-rest); padding: 28px 32px; display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: var(--gap-m); }
  .hy-calc fieldset { border: 0; padding: 0; margin: 0; }
  .hy-calc legend { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 12px; }
  .hy-calc-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .hy-calc-item:last-child { border-bottom: 0; }
  .hy-calc-item span { flex: 1; font-size: var(--fs-small); color: var(--text); }
  .hy-calc-item b { font-family: var(--display); font-weight: 400; font-size: var(--fs-small); color: var(--forest);
    font-variant-numeric: lining-nums tabular-nums; }
  .hy-calc-item input { appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 0; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fffdf9; position: relative;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
  .hy-calc-item input:checked { background: var(--forest); border-color: var(--forest); }
  .hy-calc-item input:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .hy-calc-out { border-left: 1px solid var(--border-gold); padding-left: 28px; display: flex; flex-direction: column;
    justify-content: center; gap: 8px; }
  .hy-calc-out .lbl { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .hy-calc-out output { font-family: var(--display); font-weight: 400; font-size: var(--fs-num); line-height: 1;
    color: var(--forest); font-variant-numeric: lining-nums tabular-nums; }
  .hy-calc-out output.empty { font-size: var(--fs-sub); font-style: italic; color: var(--text-light); }
  .hy-calc-out p { margin: 0; font-size: var(--fs-note); color: var(--text-light); line-height: 1.5; }

  /* ===== Autor ===== */
  .author-card { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: var(--gap-m);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--lift-rest); }
  .author-card:hover { box-shadow: var(--lift-hover); }
  .author-card .photo { position: relative; aspect-ratio: 4/5; background: var(--mat); border: 1px solid var(--forest);
    border-radius: var(--radius); padding: 8px; overflow: hidden; }
  .author-card .photo::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201,169,110,0.55);
    border-radius: 1px; pointer-events: none; z-index: 2; }
  .author-card .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
  .author-card .lbl { display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 10px; }
  .author-card h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-card); color: var(--forest); margin: 0 0 6px; }
  .author-card .role { display: block; font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu);
    letter-spacing: var(--ls-menu); color: var(--text-muted); margin-bottom: var(--gap-s); }
  .author-card ul { list-style: none; padding: 0; margin: 0 0 var(--gap-s); }
  .author-card li { position: relative; padding: 0 0 8px 22px; font-size: var(--fs-note); color: var(--text-muted); }
  .author-card li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 12px; height: 1px; background: var(--gold); }
  .author-card .links { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: var(--gap-s); border-top: 1px solid var(--line); }
  .author-card .links a { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta);
    letter-spacing: var(--ls-cta); color: var(--forest); }
  .author-card .links a:hover { color: var(--gold-deep); }

  /* ===== Quellen ===== */
  .sources-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-gold); }
  .sources-list li { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 24px; align-items: baseline;
    padding: 22px 0; border-bottom: 1px solid var(--line); }
  .sources-list li > span { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .sources-list li > div { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
  .sources-list a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,169,110,0.7); }
  .legal-note { margin-top: var(--gap-m); font-family: var(--body); font-style: italic; font-size: var(--fs-note); color: var(--text-light); }

  /* ===== Verwandte Behandlungen ===== */
  .sib-section { background: var(--linen); }
  .scroll-wrap { position: relative; }
  .scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); gap: 20px;
    overflow-x: auto; padding-bottom: var(--gap-s); scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .scroll-row > * { scroll-snap-align: start; }
  .sib-card { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 26px 24px; box-shadow: var(--lift-rest); }
  .sib-card:hover { box-shadow: var(--lift-hover); }
  .sib-card.current { background: var(--mat); border-color: var(--forest); }
  .sib-num { font-family: var(--ui); font-weight: 500; font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--gold-deep); }
  .sib-card.current .sib-num { color: var(--gold-bright); }
  .sib-name { font-family: var(--display); font-size: var(--fs-card); line-height: 1.2; color: var(--forest); }
  .sib-card.current .sib-name { color: var(--cream); }
  .sib-desc { font-size: var(--fs-note); line-height: 1.6; color: var(--text-muted); flex: 1; }
  .sib-card.current .sib-desc { color: rgba(242,240,234,0.72); }
  .sib-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--gap-s); padding-top: var(--gap-s);
    border-top: 1px solid var(--line); font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-cta); letter-spacing: var(--ls-cta); color: var(--forest); }
  .sib-card.current .sib-arrow { color: var(--gold-bright); border-top-color: rgba(201,169,110,0.3); }
  .scroll-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: var(--gap-s); }
  .scroll-dots { display: flex; gap: 6px; }
  .scroll-dots i { width: 16px; height: 1px; background: var(--gold); opacity: 0.4; }
  .scroll-hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 500;
    text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--text-light); }

  /* ===== Anfrage ===== */
  .ask-section { background: var(--linen); border-top: 1px solid var(--line); }
  .ask-grid { display: grid; grid-template-columns: minmax(0,0.62fr) minmax(0,1.38fr); gap: clamp(48px,6vw,96px); align-items: start; }
  .ask-visual .portrait-frame { max-width: 340px; }
  .ask-name { margin-top: var(--gap-m); display: flex; flex-direction: column; gap: 4px; max-width: 340px; }
  .ask-name b { font-family: var(--display); font-weight: 400; font-size: var(--fs-item); color: var(--forest); }
  .ask-name span { font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu); letter-spacing: var(--ls-menu); color: var(--text-light); }
  .ask-text h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-section); line-height: 1.1;
    color: var(--forest); margin: 0 0 var(--gap-m); }
  .ask-text > p { max-width: var(--measure); margin: 0 0 var(--gap-l); }
  .ask-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 2px;
    margin-bottom: var(--gap-l); border-top: 1px solid var(--border-gold); }
  .ask-contact { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .ask-contact > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui);
    font-weight: 500; text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .ask-contact > span:last-child { font-family: var(--display); font-size: var(--fs-item); color: var(--forest);
    font-variant-numeric: lining-nums tabular-nums; }
  .ask-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap-m) var(--gap-m); max-width: 720px; }
  .ask-form .full { grid-column: 1 / -1; }

  /* ===== Telefon und Tablet ===== */
  @media (max-width: 1100px) {
    .prose-grid, .facts-grid, .areas-grid, .dl-grid, .ask-grid { grid-template-columns: minmax(0,1fr); }
    .prose-side, .faq-intro { position: static; }
    .hy-myth-list { grid-template-columns: minmax(0,1fr); }
    .hy-tl { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  /* Auf dem Telefon liegt das Foto als Band oben, darunter schliesst die Jade an.
     Der Verlauf haengt am Band, nicht an der Hoehe der Sektion. */
  @media (max-width: 900px) {
    .page-hero-inner { grid-template-columns: minmax(0,1fr); padding-top: clamp(330px, 76vw, 432px); }
    .page-hero-text { grid-column: 1; max-width: none; padding-right: 0; }
    .page-hero-photo { width: 100%; bottom: auto; height: clamp(384px, 84vw, 480px); }
    .page-hero-photo img { object-position: 50% 8%; }
    .page-hero-photo::after { content: ''; position: absolute; inset: 0; background:
      linear-gradient(180deg, rgba(10,26,19,0) 0%, rgba(10,26,19,0.03) 46%,
        rgba(10,26,19,0.26) 70%, rgba(10,26,19,0.78) 88%, var(--forest) 100%); }
    .page-hero::after { background: none; }
  }
  @media (max-width: 760px) {
    .page-hero { padding-top: 78px; }
    .hero-strip-inner { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-m) var(--gap-s); }
    .hero-strip-cta { grid-column: 1 / -1; }
    .hero-stat { padding: 14px 0 0; }
    .hero-stat::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
      background: linear-gradient(90deg, var(--gold), transparent); }
    .hero-stat b { font-size: 30px; }
    .hero-strip-cta .cta-outline { width: 100%; }
    .hy-tl { grid-template-columns: minmax(0,1fr); }
    .tl-toggle { flex-direction: row; align-items: center; gap: 16px; text-align: left; flex-wrap: wrap; }
    .tl-text { text-align: left; }
    .hy-calc { grid-template-columns: minmax(0,1fr); padding: 24px; }
    .hy-calc-out { border-left: 0; border-top: 1px solid var(--border-gold); padding: 20px 0 0; }
    .author-card { grid-template-columns: minmax(0,1fr); }
    .author-card .photo { max-width: 180px; }
    .ask-form { grid-template-columns: minmax(0,1fr); }
    .sources-list li { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .facts-table td:first-child { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hy-panels [role="tabpanel"], .tl-panel, .hy-myth-a, .hy-tablist button::after,
    .hy-myth-cue svg, .tl-title svg { animation: none; transition: none; }
  }

  /* ============================================================
     INTERAKTIVE BAUSTEINE
     Lesefortschritt, Gesichtskarte, Zonentabelle, Tiefenregler,
     Preisrechner, Entscheidungshilfe. Alle Werte aus dem System.
     ============================================================ */

  /* Sprungziele bleiben unter der festen Kopfzeile sichtbar */
  section[id], aside[id], main[id] { scroll-margin-top: 104px; }


  /* ============================================================
     BILDSTRECKE · drei Plätze, auf jeder Landingpage dieselben.
     Ein Platz wird mit dem Motiv der Seite gefüllt, die anderen
     bleiben sichtbar leer, bis ein Foto vorliegt. Austauschbar,
     ohne dass am Aufbau etwas geändert werden muss.
     ============================================================ */
  .shot { background: var(--cream); }
  .shot.linen { background: var(--linen); }
  .shot-inner { max-width: 1440px; margin: 0 auto; padding: clamp(52px,5.6vw,92px) var(--pad-side); }
  .shot-frame { position: relative; background: var(--mat); border: 1px solid var(--forest);
    border-radius: var(--radius); padding: 10px; box-shadow: var(--lift-rest-dark); overflow: hidden; }
  .shot-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.55);
    border-radius: 1px; pointer-events: none; z-index: 2; }
  .shot-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; display: block; }
  .shot--wide .shot-frame { aspect-ratio: 16/9; }
  .shot--strip .shot-frame { aspect-ratio: 21/9; }
  .shot--tall .shot-frame { aspect-ratio: 4/5; max-width: 460px; }
  .shot-empty { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 10px;
    text-align: center; padding: 24px; background: rgba(233,229,219,0.05); border-radius: 1px; }
  .shot-empty b { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-bright); }
  .shot-empty span { font-family: var(--body); font-style: italic; font-size: var(--fs-note);
    color: rgba(242,240,234,0.55); }
  .shot-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 6px 24px; margin-top: 14px; }
  .shot-cap span { font-family: var(--body); font-style: italic; font-size: var(--fs-note); color: var(--text-light); }
  .shot-cap b { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: var(--gold-deep); }
  @media (max-width: 760px) { .shot--strip .shot-frame { aspect-ratio: 16/10; } }

  /* ============================================================
     RUHIGE DYNAMIK · alles hängt am Bildlauf, nichts läuft von
     allein. Bewegt wird ausschließlich vom Bildlaufband getrieben,
     also im Compositor, ohne Rechenlast auf dem Telefon. Fehlt die
     Unterstützung oder ist reduzierte Bewegung eingestellt, steht
     die Seite still und sieht trotzdem fertig aus.
     ============================================================ */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* Bilder wandern langsamer als ihr Rahmen. Das ist die ganze Bewegung. */
      .shot-frame img, .op-img-wrap img, .portrait-frame img, .author-card .photo img {
        animation: shotDrift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
      @keyframes shotDrift {
        from { transform: scale(1.09) translate3d(0, -2.6%, 0); }
        to   { transform: scale(1.09) translate3d(0,  2.6%, 0); }
      }
      /* Der Seitenkopf weicht beim Weiterscrollen einen Hauch zurück */
      .page-hero-photo img {
        animation: heroSink linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
      @keyframes heroSink {
        from { transform: scale(1) translate3d(0, 0, 0); }
        to   { transform: scale(1.06) translate3d(0, 2.6%, 0); }
      }
      /* Jedes Siegel zieht seine Goldlinie auf, sobald es ins Bild kommt */
      .section-header::after, .aeo-head::after, .prose-block h3::after,
      .prose-side .overline::before, .facts-head .overline::before, .dl-head .overline::before,
      .ask-text .overline::before {
        animation: drawSeal linear both;
        animation-timeline: view();
        animation-range: entry 12% entry 88%;
      }
      @keyframes drawSeal {
        from { clip-path: inset(0 100% 0 0); }
        to   { clip-path: inset(0 0 0 0); }
      }
      /* Auf dem Telefon ist der Bildlauf der einzige Antrieb, dort darf er
         etwas deutlicher sein: mehr Weg, gleiche Ruhe. */
      @media (max-width: 760px) {
        @keyframes shotDrift {
          from { transform: scale(1.12) translate3d(0, -3.6%, 0); }
          to   { transform: scale(1.12) translate3d(0,  3.6%, 0); }
        }
        .hero-stat, .trust-item, .aeo-item {
          animation: liftIn linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 62%;
        }
        @keyframes liftIn {
          from { opacity: 0.15; translate: 0 18px; }
          to   { opacity: 1; translate: 0 0; }
        }
      }
    }
  }

  /* ---- Wortmarke und Monogramm ---- */
  .brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .logo img, .footer-logo img { filter: none; opacity: 1; }
  .logo img { height: 46px; width: auto; }
  .header.scrolled .logo img { height: 40px; }
  .footer-logo img { height: 64px; width: auto; }
  .mono { display: block; color: var(--gold); }
  /* Signet im Autorenblock */
  .author-card h3 { display: flex; align-items: center; gap: 12px; }
  .author-card h3 .mono { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gold-deep); }
  /* Signet statt gezeichneter Feder unter dem Zitat */
  .hy-quote.signed cite { display: flex; align-items: center; gap: 14px; }
  .hy-quote.signed cite::before { content: none; }
  .hy-quote.signed .mono { width: 30px; height: 30px; flex: 0 0 auto; color: var(--gold); }
  /* Wasserzeichen in den leeren Bildplätzen */
  .shot-empty .mono { width: 54px; height: 54px; color: rgba(224,200,150,0.5); margin: 0 auto 4px; }

  /* ---- Lesefortschritt und Sprungleiste ---- */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
  .progress i { display: block; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright)); }
  .jump { position: sticky; top: 0; z-index: 40; background: rgba(250,248,243,0.94);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
    transform: translateY(-100%); transition: transform var(--t-mid) var(--ease); }
  .jump.show { transform: translateY(0); }
  .jump-inner { max-width: 1440px; margin: 0 auto; padding: 12px var(--pad-side);
    display: flex; align-items: center; gap: 10px 26px; overflow-x: auto; scrollbar-width: none; }
  .jump-inner::-webkit-scrollbar { display: none; }
  .jump a { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: var(--text-light); white-space: nowrap; padding: 4px 0;
    border-bottom: 1px solid transparent; }
  .jump a:hover, .jump a.on { color: var(--forest); border-bottom-color: var(--gold); }
  .jump .jump-cta { margin-left: auto; color: var(--gold-deep); border-bottom-color: var(--border-gold); }

  /* ---- Gesichtskarte und Zonentabelle ---- */
  .areas-section .section-title { color: var(--cream); }
  .areas-section .section-header { border-bottom-color: rgba(201,169,110,0.3); }
  .areas-section .section-header::after {
    background: linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
                linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat; }
  .areas-section .section-label { color: rgba(242,240,234,0.5); }
  .zone-wrap { display: grid; grid-template-columns: minmax(0,0.78fr) minmax(0,1.22fr);
    gap: clamp(32px,4vw,64px); align-items: start; }
  .zone-map { position: relative; }
  .zone-frame { position: relative; max-width: 404px; margin: 0 auto; background: var(--mat);
    border: 1px solid var(--forest); border-radius: var(--radius); padding: 9px;
    box-shadow: var(--lift-rest-dark); }
  .zone-frame::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201,169,110,0.55);
    border-radius: 1px; pointer-events: none; z-index: 2; }
  .zone-svg { width: 100%; height: auto; display: block; border-radius: 1px; }
  .zone-hit { cursor: pointer; }
  .zone-hit circle { fill: rgba(10,26,19,0.34); stroke: var(--gold-bright); stroke-width: 1.4;
    transition: fill var(--t-fast) ease, stroke var(--t-fast) ease; }
  .zone-hit:hover circle, .zone-hit:focus-visible circle { fill: rgba(224,200,150,0.42); }
  .zone-hit.on circle { fill: var(--gold-bright); stroke: var(--cream); }
  .zone-hit:focus-visible { outline: none; }
  .zone-hit:focus-visible circle { stroke-width: 2; }
  .zone-hint { display: block; margin-top: 18px; text-align: center; font-family: var(--body);
    font-style: italic; font-size: var(--fs-note); color: rgba(242,240,234,0.55); }
  .zone-table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--lift-rest-dark); overflow-x: auto; }
  .zone-table table { width: 100%; border-collapse: collapse; min-width: 520px; }
  .zone-table caption { text-align: left; padding: 18px 24px 16px; border-bottom: 1px solid var(--border-gold);
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .zone-table th { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line);
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); color: var(--text-light); white-space: nowrap; }
  .zone-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-note);
    line-height: 1.5; color: var(--text-muted); }
  .zone-table tr:last-child td { border-bottom: 0; }
  .zone-table th:first-child, .zone-table td:first-child { padding-left: 24px; }
  .zone-table th:last-child, .zone-table td:last-child { padding-right: 24px; }
  .zone-table td:first-child { font-family: var(--display); font-size: var(--fs-small); color: var(--forest); }
  .zone-table td.eur { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--forest); }
  .zone-table tbody tr { cursor: pointer; transition: background-color var(--t-fast) ease; }
  .zone-table tbody tr:hover { background: rgba(201,169,110,0.07); }
  .zone-table tbody tr.on { background: rgba(201,169,110,0.14); }
  .zone-table tbody tr.on td:first-child { color: var(--forest); font-weight: 500; }

  /* ---- Tiefenregler ---- */
  .depth-ctl { margin-top: var(--gap-m); padding-top: var(--gap-m); border-top: 1px solid rgba(201,169,110,0.28); }
  .depth-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .depth-steps button { flex: 1 1 auto; background: rgba(201,169,110,0.08); border: 1px solid rgba(201,169,110,0.28);
    border-radius: var(--radius); padding: 11px 12px; cursor: pointer; color: rgba(242,240,234,0.7);
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro);
    letter-spacing: var(--ls-micro); transition: background-color var(--t-fast) ease, color var(--t-fast) ease,
      border-color var(--t-fast) ease; }
  .depth-steps button:hover { color: var(--cream); border-color: var(--gold); }
  .depth-steps button[aria-pressed="true"] { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--forest-deep); }
  .depth-read { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: baseline; }
  .depth-read b { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-bright); white-space: nowrap; }
  .depth-read span { font-family: var(--body); font-size: var(--fs-note); line-height: 1.6; color: rgba(242,240,234,0.72); }
  /* Der Regler haelt die Wanderung an und stellt das Fenster auf eine Schicht */
  .dl-svg.held .dl-wave { animation: none; transition: transform var(--t-slow) var(--ease); }
  .dl-layer { opacity: 0; transition: opacity var(--t-mid) var(--ease); }
  .dl-layer.on { opacity: 1; }

  /* ---- Preisrechner ---- */
  .calc-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap-s); }
  .calc-chip { position: relative; }
  .calc-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
  .calc-chip span { display: block; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 999px;
    font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu); letter-spacing: var(--ls-menu);
    color: var(--text-muted); background: #fffdf9; cursor: pointer;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; }
  .calc-chip input:hover + span { border-color: var(--gold); }
  .calc-chip input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--cream); }
  .calc-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
  .calc-out { display: grid; gap: 4px; padding: 18px 0 0; border-top: 1px solid var(--border-gold); }
  .calc-out .lbl { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .calc-out output { font-family: var(--display); font-weight: 400; font-size: var(--fs-num); line-height: 1.1;
    color: var(--forest); font-variant-numeric: lining-nums tabular-nums; }
  .calc-out output.empty { font-size: var(--fs-sub); font-style: italic; color: var(--text-light); }
  .calc-out p { margin: 2px 0 0; font-size: var(--fs-note); color: var(--text-light); line-height: 1.5; }
  .calc-take { margin-top: var(--gap-s); align-self: start; }
  .calc-take[disabled] { opacity: 0.4; pointer-events: none; }

  /* ---- Entscheidungshilfe ---- */
  .pick { background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--gold);
    border-radius: var(--radius); box-shadow: var(--lift-rest); padding: 26px 30px; margin-bottom: var(--gap-l); }
  .pick fieldset { border: 0; padding: 0; margin: 0 0 var(--gap-s); }
  .pick legend { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); margin-bottom: 12px; }
  .pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .pick-opt { position: relative; }
  .pick-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
  .pick-opt span { display: block; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 999px;
    font-family: var(--ui); font-weight: 400; font-size: var(--fs-menu); color: var(--text-muted);
    background: #fffdf9; cursor: pointer; transition: background-color var(--t-fast) ease,
      color var(--t-fast) ease, border-color var(--t-fast) ease; }
  .pick-opt input:hover + span { border-color: var(--gold); }
  .pick-opt input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--cream); }
  .pick-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
  .pick-out { display: grid; gap: 8px; padding-top: var(--gap-s); border-top: 1px solid var(--border-gold); }
  .pick-out .lbl { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: var(--ls-label); color: var(--gold-deep); }
  .pick-out b { font-family: var(--display); font-weight: 400; font-size: var(--fs-sub); color: var(--forest); }
  .pick-out p { margin: 0; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }
  .pick-out a { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--ui);
    font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta);
    color: var(--forest); }
  .pick-out a:hover { color: var(--gold-deep); }

  /* ---- Nicht gebaute Menuepunkte bleiben lesbar, aber sind keine Links ---- */
  .submenu-item[aria-disabled], .footer-col span[aria-disabled] { opacity: 0.5; cursor: default; }

  @media (max-width: 900px) {
    .zone-wrap { grid-template-columns: minmax(0,1fr); }
    .zone-frame { max-width: 306px; }
  }