@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/source-serif-4.woff2') format('woff2')}@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/fonts/source-serif-4-italic.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/inter-italic.woff2') format('woff2')}@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces.woff2') format('woff2')}@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces-italic.woff2') format('woff2')}
:root {
  --hd-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hd-body: var(--font-body, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);
  --hd-maxw: 1120px;
  --hd-maxw-narrow: 720px;
  --hd-px: clamp(1.25rem, 4vw, 2.5rem);
  --hd-band-py: clamp(3.5rem, 7vw, 6rem);
}

/* Layout: Band (volle Breite) + innere Spalte */
.hd-band {
  padding: var(--hd-band-py) 0;
  background: var(--cream, #f4efe6);
  color: var(--text, #1f1b16);
}
.hd-band--soft { background: var(--cream-soft, #faf6ef); }
.hd-band--cream-dark { background: var(--cream-dark, #ece3d2); }
.hd-band--dark { background: #1f1b16; color: var(--text-light, #f4efe6); }
.hd-wrap { max-width: var(--hd-maxw); margin: 0 auto; padding: 0 var(--hd-px); }
.hd-wrap--narrow { max-width: var(--hd-maxw-narrow); }

/* Typografie */
.hd-eyebrow {
  font-family: var(--hd-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #ad5337);
  margin: 0 0 var(--space-3, 1.5rem);
}
.hd-title {
  font-family: var(--hd-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--space-4, 2rem);
  color: var(--text, #1f1b16);
}
.hd-h2 {
  font-family: var(--hd-display);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 var(--space-3, 1.5rem);
  max-width: 22em;
  color: var(--text, #1f1b16);
}
.hd-h3 {
  font-family: var(--hd-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--text, #1f1b16);
}
.hd-accent { color: var(--accent, #ad5337); font-style: italic; }
.hd-lead {
  font-family: var(--hd-body);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-secondary, #4a4138);
  max-width: 42rem;
  margin: 0 0 var(--space-4, 2rem);
}
.hd-p {
  font-family: var(--hd-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary, #4a4138);
  max-width: 38rem;
  margin: 0 0 1rem;
}
.hd-band--dark .hd-title,
.hd-band--dark .hd-h2,
.hd-band--dark .hd-h3 { color: var(--text-light, #f4efe6); }
.hd-band--dark .hd-lead,
.hd-band--dark .hd-p { color: var(--text-light-secondary, #bfb4a2); }
.hd-band--dark .hd-eyebrow { color: var(--accent-on-dark, #e08a5e); }

/* Buttons (mit Praesenz: Schatten + Hover-Lift) */
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.7rem;
  border-radius: 8px;
  font-family: var(--hd-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
}
.hd-btn--primary {
  background: var(--accent, #ad5337);
  color: var(--cream, #f4efe6);
  border-color: var(--accent, #ad5337);
  box-shadow: 0 6px 18px rgba(173, 83, 55, 0.2);
}
.hd-btn--primary:hover {
  background: var(--accent-hover, #8f4026);
  border-color: var(--accent-hover, #8f4026);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(173, 83, 55, 0.28);
}
.hd-btn--ghost {
  background: transparent;
  color: var(--accent, #ad5337);
  border-color: var(--line-strong, rgba(31, 27, 22, 0.28));
}
.hd-btn--ghost:hover { border-color: var(--accent, #ad5337); transform: translateY(-1px); }
.hd-band--dark .hd-btn--ghost {
  color: var(--text-light, #f4efe6);
  border-color: rgba(244, 239, 230, 0.35);
}
.hd-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--space-4, 2rem); }

/* Karten (Raster, Rand, Radius, Hover-Lift) */
.hd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3, 1.5rem);
  margin-top: var(--space-5, 3rem);
}
.hd-card {
  padding: var(--space-4, 2rem) var(--space-4, 2rem) var(--space-3, 1.5rem);
  background: var(--cream, #f4efe6);
  border: 1px solid var(--line-soft, rgba(31, 27, 22, 0.12));
  border-radius: 14px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hd-band--soft .hd-card { background: var(--cream-soft, #faf6ef); }
.hd-card:hover {
  border-color: var(--accent, #ad5337);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(31, 27, 22, 0.08);
}
.hd-card .hd-badge {
  display: inline-block;
  font-family: var(--hd-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #ad5337);
  margin: 0 0 0.6rem;
}
.hd-card p {
  font-family: var(--hd-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-secondary, #4a4138);
  margin: 0;
}

/* Feinheiten */
.hd-rule {
  width: 64px;
  height: 3px;
  background: var(--accent, #ad5337);
  border: 0;
  margin: 0 0 var(--space-3, 1.5rem);
  border-radius: 2px;
}
.hd-center { text-align: center; }
.hd-center .hd-h2,
.hd-center .hd-lead,
.hd-center .hd-p { margin-left: auto; margin-right: auto; }
.hd-center .hd-cta-row { justify-content: center; }

/* Arbeitsjournal-Zeitleiste (geteilt: /journal UND Studio-Beat der Landing).
   Datum + Tat klar getrennt (fixt den alten verklebten Log), Akzent-Punkt auf
   der Linie, ruhiger Takt. Trägt sich auf Hell wie im dunklen Band. */
.hd-journal { list-style: none; margin: var(--space-4, 2rem) 0 0; padding: 0; }
.hd-journal li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft, rgba(31, 27, 22, 0.1));
  position: relative;
}
/* Ruhiger Akzentpunkt vor jeder Tat (Lutz 18.06.): die Foto-Kacheln je Meister
   wirkten durch starke Wiederholung (viel Bau = oft dieselbe Figur) billig — daher
   editorial: ein feiner Punkt, der zuständige Meister steht ohnehin im Text. (Münz-
   Render --coin bleibt im Code bereit, falls echte Medaillons kommen.) */
.hd-journal li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--accent, #ad5337);
}
.hd-journal li:first-child { border-top: 0; }
.hd-journal time {
  font-family: var(--hd-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #ad5337);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hd-journal li > span {
  font-family: var(--hd-body);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--text-secondary, #4a4138);
}
/* Der Meister, der die Tat getan hat — fett + dunkler, auf einen Blick lesbar. */
.hd-journal-who { font-weight: 700; color: var(--text, #1f1b16); }
.hd-band--dark .hd-journal-who { color: var(--text-light, #f4efe6); }
@media (max-width: 560px) {
  .hd-journal li { gap: 0.7rem; }
  .hd-journal li > span { font-size: 0.98rem; }
}
.hd-band--dark .hd-journal li { border-top-color: rgba(244, 239, 230, 0.12); }
.hd-band--dark .hd-journal time { color: var(--accent-on-dark, #e08a5e); }
.hd-band--dark .hd-journal li > span { color: var(--text-light-secondary, #bfb4a2); }

/* /journal-Seite: die Tatenliste als EINE durchlaufende Zeitleiste (ein Strom,
   FLUSS) statt getrennter Logzeilen. Eigener Modifier → die kompakte Landing-
   Journal-Karte (.hd-journal, 4 Taten) bleibt unberührt. Trägt sich auf dem
   soft-Band (Ring-Farbe = Bandgrund). */
.hd-journal--timeline { margin-top: var(--space-4, 2rem); }
.hd-journal--timeline li {
  display: block;
  padding: 0 0 1.7rem 1.9rem;
  border-top: 0;
}
.hd-journal--timeline li:last-child { padding-bottom: 0; }
.hd-journal--timeline li::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
  margin: 0;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 4px var(--cream-soft, #faf6ef);
  z-index: 1;
}
.hd-journal--timeline li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.95rem;
  bottom: -0.5rem;
  width: 2px;
  background: var(--line-soft, rgba(31, 27, 22, 0.12));
}
.hd-journal--timeline li:last-child::after { display: none; }
.hd-journal--timeline li > span { display: block; }
/* Die jüngste Tat (oben) lebt: ein ruhiger Puls — das „Licht im Studio brennt". */
.hd-journal--timeline li:first-child::before {
  background: var(--accent, #ad5337);
  animation: hd-journal-pulse 2.6s ease-out infinite;
}
@keyframes hd-journal-pulse {
  0% { box-shadow: 0 0 0 4px var(--cream-soft, #faf6ef), 0 0 0 4px rgba(173, 83, 55, 0.45); }
  70% { box-shadow: 0 0 0 4px var(--cream-soft, #faf6ef), 0 0 0 13px rgba(173, 83, 55, 0); }
  100% { box-shadow: 0 0 0 4px var(--cream-soft, #faf6ef), 0 0 0 4px rgba(173, 83, 55, 0); }
}
/* Studio-Licht-Zeile im Kopf */
.hd-journal-live {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--hd-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary, #4a4138);
  margin: var(--space-3, 1.5rem) 0 0;
}
.hd-journal-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, #ad5337);
  flex: none;
  animation: hd-journal-livepulse 2.6s ease-out infinite;
}
@keyframes hd-journal-livepulse {
  0% { box-shadow: 0 0 0 0 rgba(173, 83, 55, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(173, 83, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(173, 83, 55, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-journal--timeline li:first-child::before,
  .hd-journal-live-dot { animation: none; }
}

/* ── Wache Bausteine (F3): greeting + journal-Karte ───────────────────────────
   greeting = die zwei sich schreibenden Empfangs-Takte (WACH_SCRIPT füllt sie);
   journal-card = die gerahmte Live-Zeitleiste „während du das liest, arbeite ich".
   Beide tragen sich auf Hell wie im dunklen Band. Ohne JS steht der Fallback. */
.hd-greet-bridge {
  font-family: var(--hd-body);
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: var(--text-secondary, #5b5248);
  margin: 0 0 0.5rem;
  min-height: 1.4em;
}
.hd-greet-head {
  font-family: var(--hd-display);
  font-size: clamp(2.1rem, 5.2vw, 3.3rem);
  line-height: 1.04;
  font-weight: 600;
  color: var(--text, #1f1b16);
  margin: 0 0 0.85rem;
}
.hd-greet-line {
  font-family: var(--hd-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-secondary, #4a4138);
  max-width: 36ch;
  margin: 0;
  min-height: 2.8em;
}
.hd-anim .hd-greet-bridge, .hd-anim .hd-greet-line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hd-greet-bridge.is-in, .hd-greet-line.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hd-anim .hd-greet-bridge, .hd-anim .hd-greet-line {
    opacity: 1; transform: none; transition: none;
  }
}

.hd-journal-card {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 16px;
  background: var(--cream-soft, #faf6ef);
  border: 1px solid var(--line-soft, rgba(31, 27, 22, 0.1));
}
.hd-journal-lead {
  margin: 0;
  font-family: var(--hd-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #ad5337);
}
.hd-journal-card .hd-journal { margin-top: 1rem; }
.hd-journal-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--hd-body);
  font-weight: 600;
  color: var(--accent, #ad5337);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.hd-band--dark .hd-journal-card {
  background: rgba(244, 239, 230, 0.04);
  border-color: rgba(244, 239, 230, 0.1);
}
.hd-band--dark .hd-journal-lead, .hd-band--dark .hd-journal-more {
  color: var(--accent-on-dark, #e08a5e);
}

/* Enthüllung als Bindegewebe: Inhalt steigt beim Scroll herein. Progressiv —
   ohne JS bleibt alles sichtbar (Klasse hd-anim setzt erst das Script). Unter
   prefers-reduced-motion: ruhig, kein Versatz. */
.hd-anim .hd-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.hd-anim .hd-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hd-anim .hd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Primitive-Baum (F1): Layout-Grammatik + Token-Klassen ────────────────────
   Generische Bausteine, aus denen Hannes frei komponiert (primitives.ts). Werte
   = Token-Skalen (tokens.ts). hd-band/hd-wrap/hd-cards oben bleiben die Basis;
   hier kommt nur die Grammatik dazu, die der Baum braucht. */

/* Schlichte Sektion (ohne Band-Hintergrund) — nur Höhen-Rhythmus. */
.hd-section { padding: var(--hd-band-py) 0; }
.hd-wrap--prose { max-width: 48rem; }

/* Abstands-Skala (Gap für stack/grid/columns; SOLL = SPACE_REM in tokens.ts). */
.hd-gap--none { gap: 0; }
.hd-gap--xs { gap: 0.5rem; }
.hd-gap--sm { gap: 0.85rem; }
.hd-gap--md { gap: 1.4rem; }
.hd-gap--lg { gap: 2.2rem; }
.hd-gap--xl { gap: 3.2rem; }
.hd-gap--2xl { gap: 4.5rem; }

/* Vertikaler Strom. */
.hd-stack { display: flex; flex-direction: column; }
.hd-stack.hd-center { align-items: center; }

/* Auto-fit-Raster (gleichwertige Kacheln). */
.hd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Feste Spalten (collapse wie der Empfang bei 820px). */
.hd-cols { display: grid; }
.hd-cols--2 { grid-template-columns: 1.05fr 0.95fr; }
.hd-cols--3 { grid-template-columns: repeat(3, 1fr); }
.hd-cols--vcenter { align-items: center; }
@media (max-width: 820px) {
  .hd-cols--2, .hd-cols--3 { grid-template-columns: 1fr; }
}

/* Leerraum-Primitive. */
.hd-spacer { width: 100%; }
.hd-spacer--none { height: 0; }
.hd-spacer--xs { height: 0.5rem; }
.hd-spacer--sm { height: 0.85rem; }
.hd-spacer--md { height: 1.4rem; }
.hd-spacer--lg { height: 2.2rem; }
.hd-spacer--xl { height: 3.2rem; }
.hd-spacer--2xl { height: 4.5rem; }

/* Fließtext-Töne (ergänzen hd-lead/hd-p). */
.hd-text--muted { color: var(--text-muted, #9a8c72); }
.hd-fine {
  font-family: var(--hd-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted, #9a8c72);
  margin: 0;
}
.hd-band--dark .hd-text--muted, .hd-band--dark .hd-fine { color: var(--text-light-secondary, #bfb4a2); }
.hd-center .hd-fine { text-align: center; }

/* Listen. */
.hd-list { font-family: var(--hd-body); font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary, #4a4138); margin: 0.4rem 0 1rem; padding-left: 1.4rem; max-width: 38rem; }
.hd-list li { margin-bottom: 0.4rem; }
.hd-list li::marker { color: var(--accent, #ad5337); }

/* Knopf-Reihe zentriert (ohne Eltern-.hd-center). */
.hd-cta-row--center { justify-content: center; }

/* Eck-Radien (Token RADII). */
.hd-r--none { border-radius: 0; }
.hd-r--sm { border-radius: 8px; }
.hd-r--md { border-radius: 14px; }
.hd-r--lg { border-radius: 18px; }
.hd-r--pill { border-radius: 999px; }

/* Seitenverhältnisse (Token RATIOS). */
.hd-ratio--empfang { aspect-ratio: 1200 / 876; }
.hd-ratio--wide { aspect-ratio: 16 / 9; }
.hd-ratio--square { aspect-ratio: 1 / 1; }
.hd-ratio--portrait { aspect-ratio: 3 / 4; }

/* Medien. hd-figure = gerahmtes Medienfeld (Radius/Schatten); hd-media = Bild. */
.hd-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cream-dark, #ece3d2);
  box-shadow: 0 24px 60px rgba(31, 27, 22, 0.18), 0 2px 8px rgba(31, 27, 22, 0.05);
}
.hd-video { display: block; width: 100%; height: auto; }
.hd-media { display: block; width: 100%; height: auto; object-fit: cover; }

/* ── Vollbild-Bühne (filmischer Auftakt) ──────────────────────────────────────
   Randloser Hero über den ganzen Viewport: der Begrüßungs-Film deckt die Fläche
   (Cover), die Worte stehen auf einer Glas-Sprechblase IM Bild. Der Schleier
   sichert Lesbarkeit oben (Logo) und unten (Blase) und blendet am Fuß nach Creme,
   damit der Strom nahtlos in die nächste Sektion läuft. */
.hd-stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0e0b08;
  isolation: isolate;
}
.hd-stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 28%;
  z-index: 0;
}
.hd-stage-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(14, 11, 8, 0.36) 0%,
    rgba(14, 11, 8, 0) 22%,
    rgba(14, 11, 8, 0) 40%,
    rgba(14, 11, 8, 0.5) 70%,
    rgba(14, 11, 8, 0.82) 90%,
    rgba(14, 11, 8, 0.96) 100%
  );
}
.hd-stage-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--hd-maxw);
  margin: 0 auto;
  /* Blase ins dunkle untere Bilddrittel heben — über der Creme-Naht am Fuß. */
  padding: 0 var(--hd-px) clamp(3.5rem, 13vh, 8rem);
}
.hd-stage-bubble {
  max-width: 30rem;
  color: #fbf5ea;
  background: linear-gradient(165deg, rgba(16, 12, 8, 0.46) 0%, rgba(16, 12, 8, 0.72) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  border: 1px solid rgba(247, 241, 230, 0.16);
  border-radius: 20px;
  padding: clamp(1.15rem, 2.6vw, 1.7rem) clamp(1.25rem, 2.6vw, 1.8rem) clamp(1.25rem, 2.6vw, 1.7rem);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.72);
}
/* „Die Blase geht auf": erst wenn Hannes aufblickt (WACH_SCRIPT armiert .hd-stage--seq
   und öffnet zeitversetzt). Ohne JS/Crawler/reduced-motion bleibt sie sichtbar. */
.hd-stage--seq .hd-stage-bubble {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transform-origin: 80% 100%;
}
.hd-stage--seq .hd-stage-bubble.is-open {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hd-stage--seq .hd-stage-bubble { opacity: 1; transform: none; }
}
.hd-stage-knock {
  margin: 0 0 0.7rem;
  font-family: var(--hd-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark, #f3bd96);
}
/* Worte hell auf Glas: greeting + Feindruck im Bild überschreiben die Hell-Töne. */
.hd-stage-bubble .hd-greet-bridge { color: #efe6d5; }
.hd-stage-bubble .hd-greet-head { color: #fff; }
.hd-stage-bubble .hd-greet-line { color: #efe6d5; max-width: none; }
.hd-stage-bubble .hd-fine { color: #d9cdb8; }
.hd-stage-bubble .hd-cta-row { margin-top: 1.2rem; }
.hd-stage-bubble .hd-stack { gap: 0.65rem; }
@media (max-width: 640px) {
  .hd-stage-bg { object-position: 38% 24%; }
  .hd-stage-bubble { max-width: none; }
}

/* Langform-Wrapper im Baum (richtext). Erbt den Lesesatz des Tenants. */
.hd-rich { max-width: 48rem; }

/* ── Portrait (Mensch mit Gesicht): Mannschaft (sm) + Bürgen (lg) ──────────────
   sm = gestapelt/zentriert im Raster (illustrierte Mannschaft); lg = Gesicht
   neben dem Text (echte Menschen, die geradestehen). Trägt sich hell wie dunkel. */
.hd-portrait { margin: 0; }
.hd-portrait-face {
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-dark, #ece3d2);
  display: block;
}
.hd-portrait-cap { display: flex; flex-direction: column; gap: 0.18rem; }
.hd-portrait-name { font-family: var(--hd-display); font-weight: 600; color: var(--text, #1f1b16); }
.hd-portrait-role {
  font-family: var(--hd-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #ad5337);
}
.hd-portrait-line {
  font-family: var(--hd-body);
  line-height: 1.5;
  color: var(--text-secondary, #4a4138);
  margin-top: 0.2rem;
}
/* sm — Mannschaft: gestapelt, zentriert, kleiner Avatar mit Akzent-Ring. */
.hd-portrait--sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}
.hd-portrait--sm .hd-portrait-face {
  width: 5.3rem;
  height: 5.3rem;
  box-shadow: 0 0 0 2.5px var(--accent, #ad5337), 0 8px 22px rgba(0, 0, 0, 0.22);
}
.hd-portrait--sm .hd-portrait-name { font-size: 1.12rem; }
.hd-portrait--sm .hd-portrait-role { font-size: 0.78rem; }
.hd-portrait--sm .hd-portrait-line { font-size: 0.84rem; }
/* lg — Bürgen: Gesicht links, Text rechts, gerahmte Kachel. */
.hd-portrait--lg {
  display: flex;
  gap: 1.3rem;
  align-items: center;
  text-align: left;
  padding: 1.5rem 1.7rem;
  background: var(--cream-soft, #faf6ef);
  border: 1px solid var(--line-soft, rgba(31, 27, 22, 0.12));
  border-radius: 16px;
}
.hd-portrait--lg .hd-portrait-face {
  width: 8rem;
  height: 8rem;
  flex: none;
  box-shadow: 0 0 0 3px var(--accent, #ad5337), 0 8px 22px rgba(31, 27, 22, 0.16);
}
.hd-portrait--lg .hd-portrait-name { font-size: 1.2rem; margin-bottom: 0.1rem; }
.hd-portrait--lg .hd-portrait-role { font-size: 0.78rem; margin-bottom: 0.4rem; }
.hd-portrait--lg .hd-portrait-line { font-size: 0.98rem; }
@media (max-width: 520px) {
  .hd-portrait--lg { flex-direction: column; text-align: center; align-items: center; }
}
/* Auf Dunkel (Mannschaft im Studio): heller Name/Zeile, warmer Akzent. */
.hd-band--dark .hd-portrait-name { color: var(--text-light, #f4efe6); }
.hd-band--dark .hd-portrait-role { color: var(--accent-on-dark, #e08a5e); }
.hd-band--dark .hd-portrait-line { color: var(--text-light-secondary, #cdbfa9); }

/* ── Gegenüberstellung (der „Graben"): alt (matt, durchgestrichen) ↔ Hannes ──── */
.hd-contrast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: clamp(1.5rem, 3vw, 2.4rem) 0 0;
}
.hd-contrast--single { grid-template-columns: 1fr; max-width: 38rem; }
.hd-contrast-card {
  padding: 1.4rem 1.6rem;
  border-radius: 14px;
  background: var(--cream-soft, #faf6ef);
  border: 1px solid var(--line-soft, rgba(31, 27, 22, 0.1));
}
.hd-contrast-before {
  margin: 0 0 0.55rem;
  font-family: var(--hd-body);
  font-size: 0.95rem;
  color: var(--text-muted, #9a8c72);
  text-decoration: line-through;
  text-decoration-color: rgba(173, 83, 55, 0.45);
}
.hd-contrast-after {
  margin: 0;
  font-family: var(--hd-body);
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--text, #1f1b16);
  font-weight: 500;
}
.hd-band--dark .hd-contrast-card { background: rgba(244, 239, 230, 0.045); border-color: rgba(244, 239, 230, 0.1); }
.hd-band--dark .hd-contrast-after { color: var(--text-light, #f4efe6); }

/* ── WMK-Frame (S1, Lutz 25.06.: 1:1 webmanufaktur-kamenz — Nav + Footer VERBATIM
   aus meinvito-site/global.css; nur Logo/Domain/Favicon/Newsletter-Endpoint = Hannes).
   WMK-Tokens auf den Frame-Wurzeln gescopt -> exakte Werte, unabhängig von theme.css.
   Lädt NACH /theme.css -> sticht die alte (gescrapte) Nav/Footer-CSS. */
.nav,.nxv-footer,.mobile-drawer{--cream:#F4EFE6;--cream-soft:#FAF6EF;--white:#FFFFFF;--accent:#AD5337;--accent-hover:#8F4026;--accent-soft:#F4E7E1;--accent-on-dark:#E08A5E;--text:#1F1B16;--text-secondary:#4A4138;--text-muted:#7A6F62;--text-light:#F4EFE6;--text-light-secondary:#BFB4A2;--border:#E1D8C6;--font-display:'Source Serif 4',Georgia,'Times New Roman',serif;--font-wordmark:'Fraunces','Source Serif 4',Georgia,serif;--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--container-max:1200px;--container-px:24px;--transition:0.2s ease}
.nav{position:sticky;top:0;z-index:100;background:rgba(245,240,232,0.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(221,213,200,0.6);padding:0 var(--container-px)}
.nav-inner{max-width:var(--container-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:80px}
.nav-logo{font-family:var(--font-wordmark);font-weight:580;font-size:1.7rem;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:7px;letter-spacing:-0.01em}
@media(max-width:768px){.nav-logo{font-size:1.5rem}}
.nav-logo .mark{width:0.82em;height:0.87em;color:var(--accent);flex:none;transform:translateY(-1px);transition:transform 0.3s ease}
.nav-logo:hover .mark{transform:translateY(-3px)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
@media(max-width:1100px){.nav-links{gap:18px}}
@media(max-width:960px){nav.nav .nav-links{display:none!important}nav.nav .nav-hamburger{display:flex!important}}
.nav-links a{font-size:0.95rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:color var(--transition);position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links>li>a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);border-radius:1px;transition:width 0.25s ease}
.nav-links>li>a:hover::after{width:100%}
.nav-cta{padding:12px 28px;border-radius:8px;background:var(--accent);color:var(--white) !important;font-weight:600;font-size:0.95rem;text-decoration:none;transition:all var(--transition);box-shadow:0 2px 8px rgba(173,83,55,0.2)}
.nav-cta:hover{background:var(--accent-hover);color:var(--white) !important;box-shadow:0 4px 16px rgba(173,83,55,0.3);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform 0.2s ease}
.nav-links .nav-item--menu{position:relative}
.nav-item--menu::after{content:'';position:absolute;top:100%;left:-14px;right:-14px;height:22px;pointer-events:auto;background:transparent;z-index:100}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-family:var(--font-body);font-size:0.95rem;font-weight:500;color:var(--text-secondary);cursor:pointer;letter-spacing:inherit;line-height:1;position:relative;transition:color var(--transition)}
.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--text)}
.nav-trigger::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);border-radius:1px;transition:width 0.25s ease}
.nav-trigger:hover::after,.nav-trigger[aria-expanded="true"]::after{width:100%}
.nav-chevron{transition:transform 0.2s ease;flex-shrink:0;color:currentColor;margin-top:1px}
.nav-trigger[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.nav-menu-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);min-width:380px;background:rgba(250,246,239,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 24px 60px rgba(31,27,22,0.12),0 4px 12px rgba(31,27,22,0.06);opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.22s cubic-bezier(0.16,1,0.3,1),transform 0.22s cubic-bezier(0.16,1,0.3,1),visibility 0s linear 0.22s;z-index:101}
.nav-menu-panel::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(250,246,239,0.98);border-top:1px solid var(--border);border-left:1px solid var(--border);border-radius:2px 0 0 0}
.nav-item--menu.is-open .nav-menu-panel,.nav-item--menu:hover .nav-menu-panel{opacity:1;pointer-events:auto;visibility:visible;transform:translate(-50%,0);transition:opacity 0.22s cubic-bezier(0.16,1,0.3,1),transform 0.22s cubic-bezier(0.16,1,0.3,1),visibility 0s linear 0s}
.nav-menu-item{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--text) !important;transition:background var(--transition),transform var(--transition)}
.nav-menu-item:hover{background:var(--accent-soft);color:var(--text) !important;transform:translateX(2px)}
.nav-menu-title{font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--text);letter-spacing:-0.005em;display:flex;align-items:center;gap:8px}
.nav-menu-pill{display:inline-block;font-family:var(--font-body);font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.nav-menu-desc{font-family:var(--font-body);font-size:0.84rem;color:var(--text-muted);line-height:1.45}
.nav-menu-item:hover .nav-menu-desc{color:var(--text-secondary)}
.nav-menu-footer{margin:6px 4px 2px;padding:10px 10px 4px;border-top:1px solid rgba(31,27,22,0.08)}
.nav-menu-foot-link{font-family:var(--font-body);font-size:0.85rem;font-weight:600;color:var(--accent) !important;text-decoration:none;display:inline-block;transition:transform var(--transition),color var(--transition)}
.nav-menu-foot-link:hover{color:var(--accent-hover) !important;transform:translateX(3px)}
@media(max-width:960px){.nav-menu-panel{display:none}}
.nav.is-scrolled{box-shadow:0 4px 24px rgba(31,27,22,0.06);border-bottom-color:rgba(221,213,200,0.85)}
.mobile-drawer{display:none;position:fixed;inset:0;background:rgba(245,240,232,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:99;flex-direction:column;padding:96px 32px 32px;gap:24px;overflow-y:auto}
.mobile-drawer.open{display:flex}
.mobile-drawer a{font-size:1.1rem;color:var(--text);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border);font-weight:500;display:block}
.mobile-drawer a:last-child{border-bottom:none}
.mobile-drawer .nav-cta{text-align:center;margin-top:16px;display:block;padding:14px 24px}
.mobile-drawer .nav-cta.nav-cta-secondary{background:transparent;color:var(--accent) !important;border:1.5px solid var(--accent);box-shadow:none;margin-top:10px}
.mobile-drawer .nav-cta.nav-cta-secondary:hover{background:var(--accent-soft);color:var(--accent) !important;box-shadow:none;transform:translateY(-1px)}
.mobile-drawer-group{display:flex;flex-direction:column}
.mobile-drawer-label{font-family:var(--font-body);font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.16em;color:var(--accent);margin:0 0 4px;padding:0 0 8px;border-bottom:1px solid var(--border)}
.mobile-drawer-group + .mobile-drawer-group{margin-top:12px}
.nxv-footer{background:#100D0A;color:var(--text-light);padding:0;position:relative}
.nxv-footer .footer-divider{height:1px;width:100%;background:linear-gradient(90deg,transparent 0%,rgba(244,239,230,0.18) 25%,rgba(224,138,94,0.32) 50%,rgba(244,239,230,0.18) 75%,transparent 100%);position:relative}
.nxv-footer .footer-divider::after{content:"";position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:8px;height:8px;background:var(--accent-on-dark);border-radius:50%;opacity:0.55;box-shadow:0 0 16px rgba(224,138,94,0.55)}
.nxv-footer .container{max-width:var(--container-max);margin:0 auto;padding:88px var(--container-px) 0}
.nxv-footer .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:48px;margin-bottom:56px;align-items:start}
.nxv-footer .footer-col h4{font-family:var(--font-display);font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-light);margin-bottom:22px;position:relative;padding-bottom:12px}
.nxv-footer .footer-col h4::after{content:'';position:absolute;bottom:0;left:0;width:24px;height:2px;background:var(--accent-on-dark);border-radius:1px}
.footer-brand .footer-logo{color:var(--text-light);margin:0 0 18px;font-size:1.5rem;font-family:var(--font-display);letter-spacing:-0.01em}
.footer-brand .footer-logo .mark{color:var(--accent-on-dark)}
.footer-bio{font-size:0.94rem;color:var(--text-light-secondary);line-height:1.65;margin:0 0 22px;max-width:380px}
.footer-branchen-anker{font-size:0.84rem;color:var(--text-light-secondary);line-height:1.7;margin:0;max-width:380px}
.footer-branchen-anker a{color:var(--text-light-secondary);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(244,239,230,0.25);transition:color var(--transition),text-decoration-color var(--transition)}
.footer-branchen-anker a:hover{color:var(--text-light);text-decoration-color:var(--accent-on-dark)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.footer-links a{font-size:0.92rem;color:var(--text-light-secondary);text-decoration:none;transition:color var(--transition),padding-left var(--transition)}
.footer-links a:hover{color:var(--text-light);padding-left:4px}
.footer-contact-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.footer-contact-list li{font-size:0.92rem;color:var(--text-light-secondary);line-height:1.55}
.footer-contact-list .footer-contact-mail a{color:var(--text-light);text-decoration:none;font-weight:500;border-bottom:1px dotted rgba(244,239,230,0.30);padding-bottom:1px;transition:color var(--transition),border-bottom-color var(--transition)}
.footer-contact-list .footer-contact-mail a:hover{color:var(--accent-on-dark);border-bottom-color:var(--accent-on-dark)}
.footer-contact-trust{font-style:italic;color:rgba(191,180,162,0.78);font-size:0.86rem}
.footer-contact-cta{margin-top:6px}
.footer-contact-cta a{display:inline-block;color:var(--accent-on-dark);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent-on-dark);padding-bottom:2px;font-size:0.92rem;transition:color var(--transition),border-bottom-color var(--transition),transform var(--transition)}
.footer-contact-cta a:hover{color:var(--text-light);border-bottom-color:var(--text-light);transform:translateX(3px)}
.nxv-footer .footer-middle{border-top:1px solid rgba(244,239,230,0.07);border-bottom:1px solid rgba(244,239,230,0.07);padding:36px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.footer-bekenntnis-line{font-family:var(--font-display);font-size:0.96rem;color:rgba(244,239,230,0.78);line-height:1.6;margin:0;font-style:italic;letter-spacing:-0.005em;max-width:520px}
.footer-newsletter-block{display:flex;flex-direction:column;gap:14px;justify-self:end;max-width:480px;width:100%}
.footer-newsletter-text{display:flex;flex-direction:column;gap:2px}
.footer-newsletter-eyebrow{font-family:var(--font-body);font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent-on-dark)}
.footer-newsletter-claim{font-size:0.88rem;color:var(--text-light-secondary);line-height:1.5}
.footer-newsletter{display:flex;gap:8px;flex-wrap:wrap}
.footer-newsletter input{flex:1;min-width:12rem;padding:12px 16px;background:rgba(244,239,230,0.04);border:1px solid rgba(244,239,230,0.14);border-radius:8px;color:var(--text-light);font-family:var(--font-body);font-size:0.9rem;outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.footer-newsletter input::placeholder{color:rgba(191,180,162,0.55)}
.footer-newsletter input:focus{border-color:var(--accent-on-dark);background:rgba(244,239,230,0.07);box-shadow:0 0 0 3px rgba(224,138,94,0.15)}
.footer-newsletter .cf-turnstile{flex-basis:100%}
.footer-newsletter button{padding:12px 22px;background:var(--accent);color:var(--white);border:none;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);white-space:nowrap}
.footer-newsletter button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(173,83,55,0.40)}
.nxv-footer .footer-bottom{padding:22px 0 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nxv-footer .footer-bottom .footer-copy{font-size:0.82rem;color:var(--text-light-secondary);margin:0;justify-self:start}
.nxv-footer .footer-bottom-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(224,138,94,0.10);color:var(--accent-on-dark);font-size:0.85rem;font-weight:600;justify-self:center;overflow:hidden}
.footer-motto{font-family:var(--font-display);font-size:0.92rem;color:var(--accent-on-dark);font-weight:500;font-style:italic;letter-spacing:0.005em;justify-self:end;text-align:right}
@media(max-width:1024px){.nxv-footer .footer-grid{grid-template-columns:1fr 1fr;gap:40px}.nxv-footer .footer-grid .footer-brand{grid-column:1 / -1}.nxv-footer .footer-middle{grid-template-columns:1fr;gap:28px}.footer-newsletter-block{justify-self:start;max-width:100%}}
@media(max-width:768px){nav.nav .nav-links{display:none!important}nav.nav .nav-hamburger{display:flex!important}.nxv-footer .footer-grid{grid-template-columns:1fr;gap:32px}.nxv-footer .footer-grid .footer-brand{grid-column:auto}.nxv-footer .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}.nxv-footer .footer-bottom .footer-copy{justify-self:center}.nxv-footer .footer-bottom-mark{justify-self:center}.footer-motto{justify-self:center;text-align:center}.footer-newsletter{flex-direction:column;gap:10px}.footer-newsletter button{width:100%}}