/* =============================================================
   KI mit Plan, kimitplan.de
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --red: #E42926;
  --red-dark: #c41f1d;

  --black: #14161a;
  --text: #14161a;
  --text-soft: #555b64;
  --muted: #666d77;
  --white: #ffffff;

  --ground: #faf8f4;
  --ground-deep: #f3efe8;
  --ground-tiefer: #ece7dd;
  --card: #ffffff;
  /* Alias, damit bestehende Inline-Styles weiter tragen */
  --paper: var(--ground-deep);

  --line: #e4e0d8;
  --line-strong: #d4cec2;

  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --wide: 1400px;
  --content: 800px;
  --edge: clamp(1.25rem, 5vw, 3rem);

  /* Lesebreite in px, nicht in ch: ch misst die Ziffer Null und ist breiter als der Durchschnittsbuchstabe */
  --lesebreite: 34rem;   /* 544 px */

  /* Lesebreite in px, nicht in ch: ch misst die Ziffer Null und ist breiter als der Durchschnittsbuchstabe */
  --lesebreite-lead: 39rem;   /* 624 px */

  --kartenbreite: 387px;

  /* Kantig statt gerundet: die Variable bleibt, damit Sonderseiten nichts Rundes zurückholen */
  --radius: 0;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --header-h: 4.6rem;

  /* ---------- Schrift-Skala ---------- */
  --t-lead:       1.2rem;    /* 19,2 px  Lead-Absätze, Hero */
  --t-intro:      1.08rem;   /* 17,3 px  Zwischengröße zwischen Lead und Fließtext */
  --t-body:       1.0625rem; /* 17,0 px  Fließtext, die Grundschrift */
  --t-karte:      0.95rem;   /* 15,2 px  Text und Listen in Karten */
  --t-fein:       0.9rem;    /* 14,4 px  Notizen, Fußnoten, Hinweise */
  --t-label:      0.72rem;   /* 11,5 px  Mono-Label: Vorzeilen in Karten */
  --t-mass:       0.8rem;    /* 12,8 px  Maßangaben auf der Kante */
  --t-label-fein: 0.72rem;   /* 11,5 px  kleine Mono-Label in Karten */
  --t-mono-block: 0.84rem;   /* 13,4 px  Prompt- und Codeblöcke in Mono */

  --t-zitat:       1.35rem;  /* 21,6 px  Zitat im Text (Z1) */
  --t-zitat-gross: 2.1rem;   /* 33,6 px  Zitat als Pause (Z2), allein im Abschnitt */

  --t-h3-gross:   1.35rem;   /* 21,6 px  Karten mit eigenem Gewicht */
  --t-h3:         1.2rem;    /* 19,2 px  Karten im Raster */
  --t-h3-klein:   1.1rem;    /* 17,6 px  kompakte Listenkarten */
  --t-h4:         1.02rem;   /* 16,3 px  vierte Ebene */
  --t-knopf:      1rem;      /* 16,0 px  Knöpfe */
  --t-knopf-fein: 0.92rem;   /* 14,7 px  Knöpfe im Kopf und in der Treppe */

  --t-preis:       2.1rem;   /* 33,6 px  Preise in der Angebotstreppe und im PLUS-Block */
  --t-preis-gross: 2.6rem;   /* 41,6 px  Preis der hervorgehobenen Stufe */
  --t-zahl-gross:  3.6rem;   /* 57,6 px  die ganz großen Zahlen */
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden-Attribut gewinnt immer, auch gegen display-Overrides von Klassen */
[hidden] { display: none !important; }

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

/* Anker landen nicht unter dem klebenden Kopf */
[id] { scroll-margin-top: 5.6rem; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

/* height:auto ist Pflicht: sonst schlägt das HTML-Attribut height jedes aspect-ratio */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 0.6em; color: var(--black); }

h1, h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  line-height: 1.08;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -0.03em; }
h3 {
  font-family: var(--font-cond);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

/* pretty verhindert Einzelwörter in der letzten Zeile, balance verteilt
   zweizeilige Überschriften. Browser ohne Unterstützung ignorieren beides. */
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Rot als Textfarbe immer in der dunklen Variante (WCAG AA auf allen drei Flächen) */
a { color: var(--red-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--black); }

::selection { background: var(--red); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 0;
}

/* ---------- Screenreader-only ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Lesestand ---------- */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 2;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Randzonen-Raster ---------- */
/* kein overflow:hidden hier: schaltet jedes position:sticky im Abschnitt ab */
.edge-grid { position: relative; }
.edge-grid > .wrap,
.edge-grid > .wrap-content { position: relative; z-index: 1; }
@media (min-width: 1280px) {
  :root { --edge: 4.5rem; }
  .edge-grid::before, .edge-grid::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(48px, calc((100% - var(--wide)) / 2 - 1.5rem), 11rem);
    background-image:
      linear-gradient(to right, rgba(20, 22, 26, 0.075) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20, 22, 26, 0.075) 1px, transparent 1px);
    background-size: 9px 9px;
    pointer-events: none;
  }
  .edge-grid::before { left: 0; }
  .edge-grid::after { right: 0; }
}

/* ---------- Container ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--edge); }
.wrap-content {
  max-width: var(--content);
  margin-left: max(var(--edge), calc((100% - var(--wide)) / 2 + var(--edge)));
  margin-right: var(--edge);
  padding: 0;
}
#check > .wrap-content {
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--edge);
}

section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }

/* ---------- Das Feldraster: fünf Aufteilungen ---------- */

/* A · Ganze Breite */
.feld-voll { max-width: none; }

/* B · Text links, Beiwerk rechts. Der Regelfall. */
.feld-links {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* C · Gespiegelt: das Große links, der Text rechts */
.feld-rechts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 544px);
  gap: 3rem;
  align-items: start;
}

/* D · Gleichgewicht, nur beim Vergleich */
.feld-gleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
}

/* E · Die Pause, mittig im Feld und allein im Abschnitt */
.feld-pause {
  max-width: 800px;
  margin-inline: auto;
}

.raster-drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .feld-links,
  .feld-rechts,
  .feld-gleich,
  .raster-drei { grid-template-columns: 1fr; gap: 2rem; }
  .feld-pause { max-width: none; margin-inline: 0; }
}

/* ---------- Eyebrow / Etiketten ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--red);
  flex: none;
}

/* ---------- Der rote Strich gehört dem Abschnittskopf ---------- */
.section-head::before,
.about-copy::before,
.contact-grid > div:first-child::before,
.cta-grid > div:first-child::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--red);
  margin-bottom: 0.75rem;
}
:root { --marke-platz: calc(2px + 0.75rem); }   /* 14 px */

:root { --listenstrich: 0.94em; }
.section-head ~ .section-head::before { content: none; }
.section-head > .eyebrow::before,
.about-copy > .eyebrow::before,
.contact-grid > div:first-child > .eyebrow::before,
.cta-grid > div:first-child > .eyebrow::before { content: none; }
.section-head[style*="center"]::before {
  margin-left: auto;
  margin-right: auto;
}

.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.note { font-size: var(--t-fein); color: var(--muted); }

/* ---------- Marker: rotes Schlüsselwort und roter Unterstrich ---------- */
.accent { color: var(--red-dark); }
.mark {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.14em;
  padding-bottom: 0.05em;
}
@supports (animation-timeline: view()) {
  .mark-animate {
    background-size: 0% 0.14em;
    animation: mark-grow 1s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 30% entry 80%;
  }
  @keyframes mark-grow { to { background-size: 100% 0.14em; } }
}

/* ---------- Schnittmarken ---------- */
.angezeichnet { position: relative; }
.angezeichnet > .ecke {
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
  z-index: 3;
}
.angezeichnet > .ecke::before,
.angezeichnet > .ecke::after {
  content: "";
  position: absolute;
  background: var(--red);
  transition: transform 0.45s var(--ease);
}
.angezeichnet > .ecke::before { width: 100%; height: 2px; transform: scaleX(0); }
.angezeichnet > .ecke::after { width: 2px; height: 100%; transform: scaleY(0); }
.angezeichnet.sichtbar > .ecke::before { transform: scaleX(1); }
.angezeichnet.sichtbar > .ecke::after { transform: scaleY(1); }
/* Ohne JavaScript stehen die Marken sofort, sonst wären sie unsichtbar. */
.no-js .angezeichnet > .ecke::before { transform: scaleX(1); }
.no-js .angezeichnet > .ecke::after { transform: scaleY(1); }

.ecke-lo { top: -9px; left: -9px; }
.ecke-lo::before { top: 0; left: 0; transform-origin: left; }
.ecke-lo::after { top: 0; left: 0; transform-origin: top; }
.ecke-ru { bottom: -9px; right: -9px; }
.ecke-ru::before { bottom: 0; right: 0; transform-origin: right; }
.ecke-ru::after { bottom: 0; right: 0; transform-origin: bottom; }

.massmarke {
  position: absolute;
  top: -0.72rem; right: 0.9rem;
  background: var(--ground);
  padding: 0 0.55rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-mass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-dark);
  z-index: 3;
}
.alt .massmarke { background: var(--ground-deep); }
.rung .massmarke, .guarantee .massmarke, .check .massmarke { background: var(--card); }

/* ---------- Buttons ----------
   Roter Knopf trägt weiße Schrift, heller Knopf schwarze. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--t-knopf);
  font-weight: 600;
  line-height: 1.25;
  padding: 0.85rem 1.4rem;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.btn-primary { background: var(--red); color: #ffffff; }
.btn-primary:hover { background: var(--red-dark); color: #ffffff; }

.btn-outline { background: var(--card); color: #14161a; border-color: var(--black); }
.btn-outline:hover { background: #ffffff; border-color: var(--red); color: #14161a; }

.btn-outline-invert { background: transparent; color: #14161a; border-color: var(--black); }
.btn-outline-invert:hover { background: var(--card); border-color: var(--red); color: #14161a; }

.btn-ghost {
  background: transparent;
  color: var(--black);
  padding: 0.85rem 0.5rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  border-color: transparent;
}
.btn-ghost:hover { color: var(--red-dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  position: relative;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { height: 38px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; justify-content: flex-end; }
/* nur direkte Kinder: sonst überschreibt die Regel Farbe und Innenabstand des CTA-Knopfs und des Sprachschalters */
.site-nav > a:not(.btn) {
  font-size: var(--t-karte);
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
}
.site-nav > a:not(.btn):hover { color: var(--black); }

@media (min-width: 1101px) {
  .site-nav > a[href="#methode"]  { min-width: 62px; }
  .site-nav > a[href="#angebote"] { min-width: 68px; }
  .site-nav > a[href="#mario"]    { min-width: 72px; }
  .site-nav > a[href="#faq"]      { min-width: 29px; }
  .site-nav > a:not(.btn) { text-align: center; }
}
.site-nav .btn {
  padding: 0.6rem 1.05rem;
  font-size: var(--t-knopf-fein);
  min-width: 12.5rem;
  justify-content: center;
  text-align: center;
}

/* ---------- Zielgruppen-Schalter ----------
   Feste Segmentbreiten, damit beim Sprachwechsel nichts unter dem Zeiger wegwandert.
   Wer eine Beschriftung ändert, misst neu. */
.zielgruppen-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: auto;
  padding: 0.2rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}
.zielgruppen-switch a {
  font-family: var(--font-cond);
  font-size: var(--t-knopf-fein);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--text-soft);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  min-width: 11.2rem;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.zielgruppen-switch a:hover { color: var(--black); }
.zielgruppen-switch a[aria-current="page"] {
  background: var(--black);
  color: var(--white);
}
.zielgruppen-switch a[aria-current="page"]:hover { color: var(--white); }
html[lang="en"] .zielgruppen-switch a { min-width: 7.6rem; }

/* ---------- Sprachschalter ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.2rem 0.25rem;
}
.lang-switch a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.1rem 0.45rem;
}
.lang-switch a:hover { color: var(--black); }
.lang-switch a[aria-current="true"] {
  background: var(--black);
  color: var(--white);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--black);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .no-js .nav-toggle { display: none; }
  /* Ohne JavaScript bleibt die Navigation sichtbar */
  .no-js .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border: none;
    padding: 0 0 1rem;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--edge) 1.25rem;
    gap: 0;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav > a:not(.btn) {
    padding: 0.85rem 0;
    font-size: var(--t-karte);
    border-bottom: 1px solid var(--line);
  }
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.6rem; padding-block: 0.7rem; }
  .site-header .brand { order: 0; }
  .site-header .nav-toggle { order: 1; }
  .zielgruppen-switch {
    order: 2;
    display: flex;
    flex: 1 0 100%;
    margin: 0;
  }
  .zielgruppen-switch a,
  html[lang="en"] .zielgruppen-switch a {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0.62rem 0.5rem;
    font-size: var(--t-knopf-fein);
  }
  .site-nav .lang-switch {
    align-self: flex-start;
    margin-top: 0.9rem;
    margin-bottom: 0.9rem;
  }
  .site-nav .lang-switch a { padding: 0.2rem 0.65rem; font-size: var(--t-fein); }
  .site-nav .btn { margin-top: 0.25rem; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Einblendung beim Scrollen ----------
   Die Auslöseschwelle steht in main.js und produkt.js, die Dauer hier.
   Wer eine ändert, ändert die andere mit. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.42s ease, transform 0.42s var(--ease);
}
.no-js .reveal, .reduced-motion .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .angezeichnet > .ecke::before { transform: scaleX(1) !important; }
  .angezeichnet > .ecke::after { transform: scaleY(1) !important; }
  .progress { display: none; }
}

/* =============================================================
   Komponenten
   ============================================================= */

/* ---------- Hero ---------- */
.hero {
  background: var(--ground);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

  /* ---------- Das Bild beginnt am ersten Absatz, nicht an der Vorzeile ---------- */
  .hero-copy { display: contents; }
  .hero .wrap { row-gap: 0; }
  .hero-status,
  .hero h1,
  .hero-lead,
  .hero-facts,
  .hero-ctas { grid-column: 1; }
  .hero-figure {
    grid-column: 2;
    grid-row: var(--bild-zeile, 1) / span 50;
    align-self: start;
  }
}

/* ---------- --bild-zeile: 1 ist die Vorzeile, 3 der erste Absatz nach der Überschrift ---------- */
.hero .wrap { --bild-zeile: 1; }
/* Einzelfall flaches Bild: die Variable am Bild schlägt die am Behälter */
.hero-figure.ab-copy { --bild-zeile: 3; }

.hero-status {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1.6rem;
}
.hero-status .dot {
  width: 7px; height: 7px;
  background: var(--red);
  flex: none;
}
.hero.loaded .hero-status .dot { animation: pulse 2.4s ease-in-out 1; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 { margin-bottom: 1.4rem; }

.hero-lead {
  font-size: var(--t-lead);
  color: var(--text-soft);
  max-width: 54ch;
  margin: 0 0 0.9rem;
}
.hero-lead:last-of-type {
  margin-bottom: 0;
  color: var(--text);
}
.hero-lead strong { color: var(--text); font-weight: 600; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-ctas .btn { min-width: 15.5rem; }

/* position: relative ist der Bezugsrahmen für die Bildmarke unten rechts */
.hero-figure { margin: 0; position: relative; }
/* Die Schnittmarke gehört um das Bild, nicht um die Bildunterschrift. */
.figure-frame { display: block; position: relative; }
/* ---------- Der Ausschnitt der Porträts ---------- */
img[src*="portraet-fenster"] { --ausschnitt: 0% 50%; }
img[src*="portraet-hero"]    { --ausschnitt: 40% 50%; }

.hero-figure img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: var(--ausschnitt, 50% 50%);
  border: 1px solid var(--line);
}
.hero-figure figcaption,
.figure-note {
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* Stagger beim Laden */
.hero [data-stagger] { opacity: 0; transform: translateY(16px); }
.hero.loaded [data-stagger] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.hero.loaded [data-stagger="2"] { transition-delay: 0.08s; }
.hero.loaded [data-stagger="3"] { transition-delay: 0.14s; }
.hero.loaded [data-stagger="4"] { transition-delay: 0.20s; }
.hero.loaded [data-stagger="5"] { transition-delay: 0.26s; }
.hero.loaded [data-stagger="6"] { transition-delay: 0.32s; }
.hero.loaded [data-stagger="7"] { transition-delay: 0.40s; }
.reduced-motion .hero [data-stagger],
.no-js .hero [data-stagger] { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-figure { max-width: 420px; }
}
@media (max-width: 480px) {
  .hero h1 br { display: none; }
  .hero-ctas .btn { width: 100%; }
}

/* ---------- Vertrauens-Zeile (Referenzlogos) ---------- */
/* ---------- Weiche (die ausführliche Zielgruppen-Wahl unter dem Hero) ---------- */
.weiche {
  background: var(--ground-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.4rem 0;
}
.weiche-frage {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.weiche-optionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.weiche-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.weiche-option:hover { border-color: var(--black); transform: translateY(-2px); }
.weiche-titel { font-weight: 600; font-size: var(--t-h4); line-height: 1.35; }
.weiche-note { color: var(--text-soft); font-size: var(--t-karte); line-height: 1.5; }
.weiche-option[aria-current="page"] {
  border-color: var(--black);
  cursor: default;
}
.weiche-option[aria-current="page"]:hover { transform: none; }
.weiche-option[aria-current="page"]::before,
.weiche-option[aria-current="page"]::after {
  content: "";
  position: absolute;
  background: var(--red);
}
.weiche-option[aria-current="page"]::before {
  top: -9px; left: -9px;
  width: 18px; height: 2px;
}
.weiche-option[aria-current="page"]::after {
  top: -9px; left: -9px;
  width: 2px; height: 18px;
}
.weiche-option:not([aria-current="page"]) .weiche-titel::after {
  content: " \2192";
  color: var(--red-dark);
}
@media (max-width: 700px) {
  .weiche-optionen { grid-template-columns: 1fr; }
}

.trust {
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.trust-logos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* Festes Raster statt Flex-Umbruch */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.25rem 1.5rem;
  align-items: center;
  justify-items: center;
  max-width: 1120px;
}
.trust-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* Höhe je Logo, Deckkraft je Logo: siehe die beiden Tabellen darunter.
   object-fit deckelt die Breite in der Zelle, deshalb feste Höhe statt height:auto. */
.trust-logos img {
  display: block;
  width: 100%;
  height: var(--logo-hoehe, 32px);
  object-fit: contain;
  filter: grayscale(1) brightness(var(--logo-helligkeit, 1)) opacity(var(--logo-deckkraft, 1));
}

.trust-logos img[src$="leica.png"]     { --logo-hoehe: 44px; }  /* 1:1, sonst ein Punkt */
.trust-logos img[src$="saviscon.png"]  { --logo-hoehe: 36px; }  /* filigran, braucht Fläche */
.trust-logos img[src$="basf.png"]      { --logo-hoehe: 33px; }
.trust-logos img[src$="vivantes.png"]  { --logo-hoehe: 33px; }
.trust-logos img[src$="gsw.png"]       { --logo-hoehe: 31px; }
.trust-logos img[src$="telefonica.png"]{ --logo-hoehe: 29px; }
.trust-logos img[src$="helios.png"]    { --logo-hoehe: 29px; }
.trust-logos img[src$="erecht24.png"]  { --logo-hoehe: 29px; }
.trust-logos img[src$="viessmann.png"] { --logo-hoehe: 28px; }  /* 4,6:1, das breiteste */

.trust-logos img[src$="rv-versicherung.png"] { --logo-deckkraft: 0.61; }
.trust-logos img[src$="basf.png"]            { --logo-deckkraft: 0.70; }
.trust-logos img[src$="gsw.png"]             { --logo-deckkraft: 0.74; }
.trust-logos img[src$="viessmann.png"]       { --logo-deckkraft: 0.90; }
.trust-logos img[src$="leica.png"]           { --logo-deckkraft: 1.00; }
.trust-logos img[src$="aok.png"]             { --logo-deckkraft: 1.00; }
.trust-logos img[src$="vivantes.png"]        { --logo-deckkraft: 1.00; }
.trust-logos img[src$="boehringer-ingelheim.png"] { --logo-deckkraft: 1.00; }
.trust-logos img[src$="erecht24.png"]        { --logo-deckkraft: 1.00; }
.trust-logos img[src$="telefonica.png"]      { --logo-deckkraft: 1.00; }
.trust-logos img[src$="saviscon.png"]        { --logo-deckkraft: 1.00; }
.trust-logos img[src$="helios.png"]          { --logo-deckkraft: 1.00; --logo-helligkeit: 0.90; }

/* Vier Spalten ab Tablet-Breite: ergibt drei volle Reihen, wieder ohne Rest. */
@media (max-width: 1023px) {
  .trust-logos { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 660px) {
  .trust { padding: 3.25rem 0 2.5rem; }
  .trust-logos { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1rem; }
  .trust-logos img { --logo-hoehe: 24px; }
  .trust-logos img[src$="leica.png"]     { --logo-hoehe: 34px; }
  .trust-logos img[src$="saviscon.png"]  { --logo-hoehe: 27px; }
  .trust-logos img[src$="basf.png"]      { --logo-hoehe: 25px; }
  .trust-logos img[src$="vivantes.png"]  { --logo-hoehe: 25px; }
  .trust-logos img[src$="gsw.png"]       { --logo-hoehe: 23px; }
  .trust-logos img[src$="telefonica.png"]{ --logo-hoehe: 22px; }
  .trust-logos img[src$="helios.png"]    { --logo-hoehe: 22px; }
  .trust-logos img[src$="erecht24.png"]  { --logo-hoehe: 22px; }
  .trust-logos img[src$="viessmann.png"] { --logo-hoehe: 21px; }
}
@media (max-width: 375px) {
  .trust-logos { gap: 1.4rem 0.9rem; }
  .trust-logos img[src$="saviscon.png"]  { --logo-hoehe: 22px; }
  .trust-logos img[src$="telefonica.png"]{ --logo-hoehe: 19px; }
  .trust-logos img[src$="helios.png"]    { --logo-hoehe: 19px; }
  .trust-logos img[src$="erecht24.png"]  { --logo-hoehe: 18px; }
  .trust-logos img[src$="viessmann.png"] { --logo-hoehe: 17px; }
}

/* ---------- Sektions-Kopf ---------- */
.section-head { max-width: none; margin-bottom: 2.8rem; }
.section-head > h1,
.section-head > h2 { margin-bottom: 1.8rem; }
/* :not([class]) ist der Kern der Regel: ein Absatz ohne Klasse ist der Einleitungstext,
   ein Absatz mit Klasse ist ein Bauteil und bringt seine Größe selbst mit. */
.section-head p:not([class]) {
  color: var(--text-soft);
  font-size: var(--t-lead);
  margin: 0;
  max-width: var(--lesebreite-lead);
}

/* Übergangsform: hier keine neuen Fundstellen anlegen */
.head-grid {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
  gap: 1.8rem 3rem;
  align-items: start;
  margin-bottom: 3rem;
}
.head-grid > .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.head-grid > .head-figure { grid-column: 2; }
.head-grid:not(:has(> .head-figure)) { display: block; }
/* Bezugsrahmen für die Bildmarke */
.head-figure { margin: 0; position: relative; }
.head-figure img {
  border: 1px solid var(--line);
  width: 100%;
  height: auto;
}
.head-figure figcaption {
  font-family: var(--font-sans);   /* Bildunterschrift, siehe .hero-figure figcaption */
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}
@media (max-width: 900px) {
  .head-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Beide Platzierungen zurücknehmen, sonst legt grid-column: 2 in einem
       einspaltigen Raster eine zweite Spalte neben das Fenster. */
  .head-grid > .section-head,
  .head-grid > .head-figure { grid-column: auto; }
  .head-figure { max-width: 480px; }
}

.alt { background-color: var(--ground-deep); }

/* ---------- Zwei gleiche Flächen stoßen nie aneinander ---------- */
.alt + .alt { background-color: var(--ground); }

/* ---------- Bildbahn (breites Bild mit Aufschrift auf der ruhigen Fläche) ---------- */
.band { margin: 3.2rem 0 0; position: relative; }
.band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
}
/* Derzeit ohne Anwendung im Markup, bleibt absichtlich stehen */
.band .band-text {
  position: absolute;
  right: 4%; top: 9%;
  max-width: 34%;
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text);
}
.band-still { margin-top: 3rem; }
/* Mobil verlässt die Aufschrift das Bild, statt am Rand zu kleben */
@media (max-width: 700px) {
  .band .band-text {
    position: static;
    max-width: none;
    margin-top: 0.9rem;
    font-size: var(--t-lead);
  }
}
.band figcaption {
  font-family: var(--font-sans);   /* Bildunterschrift, siehe .hero-figure figcaption */
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* ---------- Meine Top 3 (die drei meistgehörten Sätze) ---------- */
/* 3 rem Rinne, wie in jedem anderen Kartenraster */
.pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2.6rem;
}

/* Fließtext-Blöcke: feste Lesebreite statt eines Rasters */
.fliess { max-width: var(--lesebreite); }
/* :not([class]) statt .fliess p: sonst schlägt der Selektor jede Klasse am Element selbst */
.fliess p:not([class]) { margin: 0 0 1.1rem; }
.fliess p:last-child { margin-bottom: 0; }

.befunde { display: grid; gap: 3rem; margin-top: 2.6rem; }
.befund {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.5rem 1.6rem;
}
/* Achtung, zwei fast gleiche Klassen mit verschiedener Aufgabe: .befund .num trägt
   Wortmarken und steht in Grotesk, .pain .num weiter unten trägt Zahlen und steht in Mono. */
.befund .num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.befund h3 { font-size: var(--t-h3); margin: 0 0 0.6rem; line-height: 1.35; }
.befund p { margin: 0; color: var(--text-soft); max-width: var(--lesebreite); }
.befund { position: relative; }
.befund .massmarke { background: var(--card); }

.aufloesung {
  position: relative;
  margin-top: 2.2rem;
  max-width: var(--lesebreite);
}
.aufloesung::before,
.aufloesung::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.aufloesung::before {
  top: -9px; left: -9px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.aufloesung::after {
  bottom: -9px; right: -9px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
}
/* Sobald das Markup echte Schnittmarken mitbringt, treten diese zurück. */
.aufloesung.angezeichnet::before,
.aufloesung.angezeichnet::after { content: none; }
.aufloesung p { margin: 0 0 0.9rem; }
.aufloesung p:last-child { margin-bottom: 0; color: var(--text-soft); }
.pain {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.75rem;
}
/* Bleibt Mono: die Zeile trägt Rang und Anteil */
.pain .num {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 1rem;
}
/* Dieselbe Bauform, zwei Rollen: trägt das Etikett einen Namen statt einer Zahl,
   bekommt es .wortmarke dazu. Die Klasse steht mit der Bauform im Selektor. */
.pain .num.wortmarke { font-family: var(--font-sans); }
.pain blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-intro);
  color: var(--black);
  line-height: 1.5;
}
.pain p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }
@media (max-width: 900px) { .pains { grid-template-columns: 1fr; } }

/* ---------- Rezeptkarte (Signature) ---------- */
.recipe {
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  max-width: var(--kartenbreite);   /* 387 px, die Zahl oben in :root */
}
.recipe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.8rem 1.25rem;
}
.recipe-head .tag { color: #ff8a88; font-weight: 500; }
.recipe-body { padding: 1.5rem 1.5rem 0.5rem; }
.recipe-body h3 { font-size: var(--t-h3-gross); margin-bottom: 1rem; }
.recipe-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.25rem; }
.recipe-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.recipe ul, .recipe ol { margin: 0; padding-left: 1.1rem; font-size: var(--t-karte); color: var(--text-soft); }
.recipe li { margin-bottom: 0.4rem; }
.recipe-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
  padding: 0.9rem 1.5rem;
}
.recipe-foot strong { color: var(--text); font-weight: 600; }
@media (max-width: 540px) { .recipe-cols { grid-template-columns: 1fr; } }

.recipe-tipp { max-width: 72ch; color: var(--text-soft); font-size: var(--t-karte); margin: 1.2rem 0 0.5rem; }
.recipe-tipp strong { color: var(--text); font-weight: 600; }

.prompt-block { position: relative; }
.prompt-block pre {
  margin: 0;
  padding: 1.2rem 1.35rem;
  background: var(--ground-deep);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-mono-block);
  line-height: 1.65;
  color: var(--text);
  /* Prompts tragen Zeilenumbrüche als Bedeutung, deshalb pre-wrap statt
     Seitwärtsrollen: was hier abgeschnitten wird, ist beim Kopieren weg. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
@media (max-width: 540px) {
  .prompt-block pre { padding: 1rem; }
}

/* ---------- Methode: die drei Säulen ---------- */
/* Zitat links, Rezeptkarte rechts, vertikal zentriert */
.method-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
.method-grid .pullquote { margin: 0; }
/* 3 rem Rinne, wie in jedem anderen Kartenraster */
.pillars { display: grid; gap: 3rem; }
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  padding-top: 1.4rem;
  border-top: 2px solid var(--black);
}
/* Bleibt Mono: 01, 02, 03 ist eine Reihenfolge */
.pillar .num {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.6rem;
}
.pillar h3 { margin-bottom: 0.4rem; }
.pillar p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }
@media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Ablauf (3 Schritte) ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.step {
  counter-increment: step;
  border-top: 2px solid var(--black);
  padding: 1.4rem 0.5rem 0 0;
  position: relative;
}
:lang(en) .step::before { content: "Step 0" counter(step); }
.step::before {
  content: "Schritt 0" counter(step);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.6rem;
}
.step h3 { font-size: var(--t-h3); }
.step p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Der Prozess: eine mehrzeilige Schritt-Tabelle ---------- */
.prozess-schritt,
.ablauf-schritt,
.arc-phase {
  background-image: linear-gradient(var(--black), var(--black));
  background-size: 8px 8px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.prozess-kennung,
.ablauf-schritt::before,
.arc-phase .arc-when {
  font-family: var(--font-mono);
  font-size: var(--t-karte);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

/* ---------- Ablauf im Unternehmens-Zweig (Zeilen statt Spalten) ---------- */
.ablauf-liste {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  counter-reset: ablauf;
  border-top: 1px solid var(--line);
}
/* Die mittlere Spalte ist bewusst fest und nicht 1fr: 1fr ergäbe rund 118 Zeichen je Zeile */
.ablauf-schritt {
  counter-increment: ablauf;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 34rem) 1fr;
  gap: 0 2.5rem;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0;
}
.ablauf-schritt::before {
  content: "Schritt 0" counter(ablauf);
  padding-top: 0.35rem;
}
:lang(en) .ablauf-schritt::before { content: "Step 0" counter(ablauf); }
.ablauf-schritt h3 { font-size: var(--t-h3); margin: 0 0 0.5rem; }
.ablauf-text p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }
.ablauf-zeit { margin: 0; }
.ablauf-zeit > * { display: block; }
.ablauf-zeit-titel {
  font-size: var(--t-fein);
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.ablauf-zeit strong {
  font-size: var(--t-karte);
  font-weight: 600;
  color: var(--black);
}
.ablauf-zeit-wer {
  font-size: var(--t-fein);
  color: var(--text-soft);
  margin-top: 0.2rem;
}
/* Unter 1000 Pixeln fällt die Zeitspalte unter den Text und bekommt dort eine
   eigene Kante, sonst hängt sie ohne Bezug am Absatz. */
@media (max-width: 1000px) {
  .ablauf-schritt {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ablauf-schritt::before { padding-top: 0; margin-bottom: 0.6rem; }
  .ablauf-zeit {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    width: auto;
    justify-self: stretch;
  }
}

/* Knopf direkt unter einem Kartenraster, ohne Inline-Stil */
.cta-unter-karten { margin: 2.5rem 0 0; }

/* ---------- Ergebnis-Beispiele ---------- */
.cases {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 1000px) {
  .cases { grid-template-columns: repeat(6, 1fr); }
  .case { grid-column: span 2; }
}
.case {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.case-handlung,
.case:has(.btn) {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
}
.case-handlung > :last-child,
.case:has(.btn) > :last-child { margin-bottom: 0; }
.case .who {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cases-legende {
  font-family: var(--font-mono);
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
/* Bewusst kein Flex-Container: dort wäre jeder Textknoten daneben ein eigenes,
   anonymes Element, und der Abstand käme aus verteiltem Platz statt aus einer Zahl. */
.cases-legende .pfeil { margin: 0 0.55em; color: var(--red-dark); }
.case dl { margin: 0; display: grid; gap: 0.7rem; }
.case dd { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }
.case .out { color: var(--text); font-weight: 500; }
.cases-note { color: var(--muted); font-size: var(--t-fein); margin: -1.4rem 0 2rem; }

/* ---------- Über-mich-Abschnitt ---------- */
.about-grid,
.mini-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 544px);
  gap: 3rem;
  align-items: start;
}
/* bleibt sticky bzw. relative: static würde die Bildmarke an die nächste positionierte Kachel hängen */
.about-grid > figure,
.mini-about > figure,
.about-figure { margin: 0; position: sticky; top: 6.5rem; max-width: none; }
.about-grid > figure { margin-top: var(--marke-platz); }
/* 5 zu 7: bei gleichem Verhältnis von Rahmen und Datei bliebe object-position wirkungslos */
.about-figure img {
  border: 1px solid var(--line);
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: var(--ausschnitt, 50% 50%);
  width: 100%;
}
.about-figure figcaption {
  font-family: var(--font-sans);   /* Bildunterschrift, siehe .hero-figure figcaption */
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}
.about-copy .lead { font-size: var(--t-lead); font-weight: 500; color: var(--black); }

.about-copy h3 {
  font-size: var(--t-h3-gross);
  margin: 2.6rem 0 0.9rem;
}
.about-copy h3:first-of-type { margin-top: 2.2rem; }
.zwischentitel {
  font-size: var(--t-h3-gross);
  margin: 3.5rem 0 1.6rem;
}
.note-klein { font-size: var(--t-fein); color: var(--text-soft); }
.about-uebergang { margin-top: 2.2rem; font-weight: 500; color: var(--black); }

.argumente {
  display: grid;
  gap: 3rem;
  margin: 2.5rem 0 0;
}
@media (min-width: 720px) { .argumente { grid-template-columns: 1fr 1fr; } }
.argument { border-top: 2px solid var(--black); padding-top: 0.9rem; }
.argument h4 {
  margin: 0 0 0.4rem;
  font-size: var(--t-h4);
  line-height: 1.3;
}
.argument p { margin: 0; color: var(--text-soft); font-size: var(--t-karte); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}
.fact {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  border: 1px solid var(--line-strong);
  padding: 0.4rem 0.75rem;
  color: var(--text-soft);
  background: var(--card);
}
@media (max-width: 900px) {
  .about-grid,
  .mini-about { grid-template-columns: 1fr; gap: 2rem; }
  /* bleibt sticky bzw. relative: static würde die Bildmarke an die nächste positionierte Kachel hängen */
  .about-grid > figure,
  .mini-about > figure,
  .about-figure { position: relative; top: auto; max-width: 420px; }
}

/* ---------- Zitat, zwei Fassungen ---------- */
.zitat,
.pullquote,
.mario-zitat,
.zitat-fremd {
  border-left: 2px solid var(--red);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 6rem 0;
  max-width: var(--lesebreite);
}
.zitat blockquote, .zitat p,
.pullquote blockquote, .pullquote p,
.mario-zitat blockquote, .mario-zitat p,
.zitat-fremd blockquote, .zitat-fremd p {
  margin: 0;
  font-family: var(--font-cond);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-zitat);
  line-height: 1.3;
  color: var(--black);
}
/* Die Zuschreibung: drei Auszeichnungen im Bestand, eine Regel dafür */
.zitat cite, .zitat figcaption,
.pullquote cite, .pullquote figcaption,
.mario-zitat cite, .mario-zitat figcaption,
.zitat-fremd cite, .zitat-fremd figcaption {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.zitat-pause {
  max-width: 800px;
  margin: 6rem auto;
  text-align: center;
  border: 0;
  padding: 0;
}
.zitat-pause blockquote, .zitat-pause p {
  margin: 0;
  font-family: var(--font-cond);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-zitat-gross);
  line-height: 1.25;
  color: var(--black);
}
.zitat-pause cite, .zitat-pause figcaption {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Kleiner auf schmalen Geräten, am Bauteil statt als clamp im Token:
   ein clamp-Token käme nie in die Schrift-Skala. */
@media (max-width: 700px) {
  .zitat-pause { margin: 3.5rem auto; }
  .zitat-pause blockquote, .zitat-pause p { font-size: var(--t-zitat); }
}

/* ---------- Angebots-Treppe ---------- */
.ladder { display: grid; gap: 0.9rem; }
.rung {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.6rem;
  display: grid;
  gap: 1rem;
  position: relative;
  transition: border-color 0.25s var(--ease);
}
.rung:hover { border-color: var(--line-strong); }
@media (min-width: 900px) {
  .rung { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3rem; }
  .rung-body {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: minmax(0, var(--lesebreite)) minmax(0, 1fr);
    column-gap: 3rem;
  }
  .rung .stage    { grid-area: 1 / 1; }
  .rung-body > h3 { grid-area: 2 / 1; }
  .rung .desc     { grid-area: 3 / 1; }
  .rung .includes { grid-area: 1 / 2 / 4 / 3; align-self: start; }
}
.rung .stage {
  font-family: var(--font-mono);
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.35rem;
}
.rung h3 { font-size: var(--t-h3-gross); margin-bottom: 0.5rem; }
.rung h3 .teilname { color: var(--red-dark); letter-spacing: 0.04em; }
.rung .desc { color: var(--text-soft); margin: 0 0 0.8rem; font-size: var(--t-karte); max-width: var(--lesebreite); }
.rung .includes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-karte);
  color: var(--text-soft);
}
.rung .includes li { padding-left: 1.1rem; position: relative; margin-bottom: 0.28rem; }
.rung .includes li::before {
  content: "";
  position: absolute;
  left: 0; top: var(--listenstrich);
  width: 6px; height: 1px;
  background: var(--line-strong);
}
.rung-price { text-align: left; }
@media (min-width: 900px) { .rung-price { text-align: right; } }
.rung-price .price {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: var(--t-preis);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
  color: var(--black);
}
/* Bleibt Mono: der Beisatz gehört zum Preis wie die Einheit zur Zahl */
.rung-price small {
  font-family: var(--font-mono);
  font-size: var(--t-label-fein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 0.35rem;
}
/* Kleinere Schrift im Preisstreifen: sonst brechen "Per E-Mail bestellen" und
   "Kompass-Call buchen" zweizeilig um, während die anderen einzeilig bleiben. */
.rung-price .btn {
  margin-top: 1rem;
  width: 100%;
  font-size: var(--t-knopf-fein);
  padding: 0.75rem 1.4rem;
}
@media (min-width: 900px) {
  .rung-price .btn { width: auto; }
}
.rung-mehr {
  display: block;
  margin-top: 0;
  padding: 0.75rem 0;
  font-family: var(--font-sans);
  font-size: var(--t-karte);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text);
  text-decoration: none;
}
.rung-mehr::after { content: " \2192"; color: var(--red); }
.rung-mehr:hover { color: var(--red-dark); }
.rung-mehr:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Die hervorgehobene Stufe: Kante statt Fläche ---------- */
.rung.featured {
  background: var(--card);
  border: 3px solid var(--red);
  padding: 1.9rem 1.5rem 1.7rem;
}
.rung.featured:hover { border-color: var(--red); }
.rung.featured .price { font-size: var(--t-preis-gross); }
.rung.featured .badge {
  position: absolute;
  top: 0; left: 1.6rem;
  transform: translateY(-50%);
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  z-index: 3;
}
.ladder .rung:not(.featured) .rung-price .btn-primary {
  background: var(--card);
  color: #14161a;
  border-color: var(--black);
}
.ladder .rung:not(.featured) .rung-price .btn-primary:hover {
  background: #ffffff;
  border-color: var(--red);
  color: #14161a;
}
@media (max-width: 899px) {
  .rung.featured .badge { left: 1.2rem; }
  .rung .massmarke { right: auto; left: 1.2rem; }
  .rung.featured .massmarke { top: auto; bottom: -0.72rem; }
}

/* ---------- Garantie ---------- */
.guarantee {
  margin-top: 3rem;
  margin-right: auto;
  max-width: 800px;
  border-top: 2px solid var(--black);
  padding: 1.4rem 0 0;
  position: relative;
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
.guarantee > .ecke { display: none; }
@media (min-width: 760px) { .guarantee { grid-template-columns: 7.5rem 1fr; } }
.guarantee .figure-number {
  font-family: var(--font-cond);
  font-weight: 700;
  line-height: 0.9;
  font-size: var(--t-zahl-gross);
  letter-spacing: -0.04em;
  color: var(--red-dark);
  margin: 0;
}
.guarantee .figure-number small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  margin-top: 0.35rem;
}
.guarantee h3 { font-size: var(--t-h3-gross); margin-bottom: 0.35rem; }
.guarantee p { margin: 0; color: var(--text-soft); font-size: var(--t-body); max-width: var(--lesebreite); }

/* ---------- B2B-Sektion ---------- */
/* 3 rem Rinne, wie in jedem anderen Kartenraster */
.b2b-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.b2b-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.75rem;
}
.b2b-card h3 { font-size: var(--t-h3); }
/* :not([class]) aus demselben Grund wie im Sektions-Kopf weiter oben */
.b2b-card p:not([class]) { color: var(--text-soft); font-size: var(--t-karte); margin: 0; }
@media (max-width: 900px) { .b2b-grid { grid-template-columns: 1fr; } }

/* ---------- Klarheits-Check ---------- */
.check {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(1.7rem, 4vw, 2.6rem);
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.check-bar {
  position: relative;
  height: 10px;
  margin-bottom: 0.55rem;
  border-bottom: 2px solid var(--black);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}
.check-bar .fill {
  position: absolute;
  left: 0; bottom: 0; top: 0;
  width: 100%;
  transform: scaleX(0.2);
  transform-origin: left center;
  background: var(--red);
  transition: transform 0.35s var(--ease);
}
.check-bar .tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--card);
  opacity: 0.9;
}
.check-progress {
  font-family: var(--font-mono);
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.check-step h3 { font-size: var(--t-h3-gross); margin-bottom: 1.2rem; }
.check-options { display: grid; gap: 0.55rem; }
.check-options button {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--t-knopf);
  color: #14161a;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.check-options button:hover { border-color: var(--red); background: #ffffff; }
.check-result:focus { outline: none; }
.check-result:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
.check-result h3 { font-size: var(--t-h3-gross); }
.check-result p { color: var(--text-soft); }
.check-result .btn { margin-top: 1rem; }
.check-restart,
.check-back {
  background: none;
  border: none;
  /* Bedienelement, deshalb Grundschrift */
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1.3rem;
  padding: 0;
}
.check-back {
  display: block;
  margin-top: 0.9rem;
  padding: 1rem 0;
}
.check-back::before { content: "\2190\00a0"; text-decoration: none; }
.check-restart:hover,
.check-back:hover { color: var(--black); }

/* ---------- Lead-Magnet ---------- */
.magnets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 560px;
  margin: 0 auto;
}
.magnet {
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.magnet-head {
  background: var(--black);
  color: var(--white);
  padding: 0.9rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.magnet-head .free { color: #ff8a88; font-family: var(--font-mono); }
.magnet-body { padding: 1.75rem 1.5rem; flex: 1; }
.magnet-body h3 { font-size: var(--t-h3-gross); }
.magnet-body > p { color: var(--text-soft); }
.magnet-body ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-karte);
  color: var(--text-soft);
  display: grid;
  gap: 0.35rem;
}
.magnet-body ul li { padding-left: 1.1rem; position: relative; }
.magnet-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: var(--listenstrich);
  width: 6px; height: 1px;
  background: var(--line-strong);
}
.magnet form { padding: 0 1.5rem 1.75rem; }

/* ---------- Formulare ---------- */
.lead-form .fields { display: grid; gap: 0.6rem; margin-bottom: 0.9rem; }
.lead-form input[type="text"],
.lead-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--t-knopf);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--ground);
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
.lead-form input[type="text"]:focus,
.lead-form input[type="email"]:focus { border-color: var(--black); }
.lead-form input::placeholder { color: var(--muted); opacity: 1; }
.lead-form .consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--t-fein);
  color: var(--muted);
  margin-bottom: 1rem;
}
.lead-form .consent input { margin-top: 0.25rem; flex: none; }
.lead-form .form-status { font-size: var(--t-fein); min-height: 1.4em; margin-top: 0.6rem; }
.lead-form .form-status.is-error { color: var(--red-dark); font-weight: 500; }
.lead-form .form-status.is-success { color: #1a7f37; font-weight: 500; }
.lead-form button[type="submit"] { width: 100%; }

.lead-form .success-view { display: none; }
.lead-form[data-state="success"] .default-view { display: none; }
.lead-form[data-state="success"] .success-view { display: block; }
.lead-form[data-state="loading"] button[type="submit"] { opacity: 0.6; pointer-events: none; }
.success-view .success-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--black);
  font-size: var(--t-body);
  margin-bottom: 0.4rem;
}
.success-view .success-title::before {
  content: "OK";
  /* Grotesk: zwei Buchstaben in einem grünen Feld sind eine Meldung, keine Messung */
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.08em;
  color: var(--white);
  background: #1a7f37;
  padding: 0.15rem 0.4rem;
  flex: none;
}
.success-view p { font-size: var(--t-fein); color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq-groups { display: grid; gap: 3rem; }
@media (max-width: 999px) {
  .faq-groups:not(:has(.faq-group h3)) { gap: 0; }
  .faq-groups:not(:has(.faq-group h3)) .faq-group + .faq-group .faq-item:first-of-type { border-top: 0; }
}
/* Desktop: zwei Gruppen nebeneinander, halbiert die Sektionslänge */
@media (min-width: 1000px) {
  .faq-groups {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 4.5rem;
    align-items: start;
  }
  .faq-eine-gruppe { grid-template-columns: minmax(0, var(--content)); }
}
.faq-nach-text { margin-top: 2.25rem; }
.faq-group h3 {
  font-size: var(--t-h3-klein);
  font-weight: 600;
  color: var(--black);
  margin-bottom: 1rem;
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  font-size: var(--t-h4);
  color: var(--black);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Ausnahme von der Schrift-Skala: das Pluszeichen ist ein Bediensymbol, keine Textgröße */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 1.3rem;   /* Ausnahme von der Skala, siehe oben */
  line-height: 1.3;
  color: var(--muted);
  transition: transform 0.25s var(--ease), color 0.2s var(--ease);
}
.faq-item summary:hover::after,
.faq-item summary:focus-visible::after,
.faq-item[open] summary::after { color: var(--red-dark); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 0 1.5rem; color: var(--text-soft); max-width: var(--lesebreite); }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Kontakt / Finale ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 544px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.kontakt-cta { margin: 2.2rem 0 0.9rem; }
.kontakt-cta-note { font-size: var(--t-fein); color: var(--muted); margin: 0; max-width: var(--lesebreite); }
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.contact-list li { border-top: 1px solid var(--line-strong); padding-top: 1.4rem; }
.contact-list a { color: var(--black); font-weight: 500; }
.contact-list a:hover { color: var(--red-dark); }
/* "E-Mail" und "LinkedIn" sind Wortmarken, deshalb Grotesk */
.contact-list .label {
  font-family: var(--font-sans);
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.2rem;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-photo { margin: 0; align-self: start; }
.contact-grid > .contact-photo { margin-top: var(--marke-platz); }
.contact-photo img {
  width: 100%;
  border: 1px solid var(--line);
}

/* ---------- Wien-Band (Inhaltsbreite, ohne Beschnitt) ---------- */
.divider-band { margin: 0; position: relative; }
.divider-band img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.band-abschnitt { padding: 0; }

/* ---------- Bildmarke ---------- */
figure > figcaption.bildmarke {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  max-width: calc(100% - 1.8rem);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-sans);   /* Bildunterschrift, siehe .hero-figure figcaption */
  font-size: var(--t-label-fein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(20, 22, 26, 0.62);
  pointer-events: none;
}

.band:has(> figcaption.bildmarke) { display: grid; }
.band:has(> figcaption.bildmarke) > img,
.band:has(> figcaption.bildmarke) > .figure-frame,
.band:has(> figcaption.bildmarke) > figcaption.bildmarke { grid-area: 1 / 1; }
.band > figcaption.bildmarke {
  position: relative;
  right: auto;
  bottom: auto;
  justify-self: end;
  align-self: end;
  margin: 0 0.9rem 0.9rem 0;
}

.head-figure:has(> .bild-satz) { display: grid; }
.head-figure:has(> .bild-satz) > .figure-frame,
.head-figure:has(> .bild-satz) > figcaption.bildmarke { grid-area: 1 / 1; }
.head-figure:has(> .bild-satz) > .bild-satz { grid-area: 2 / 1; }
.head-figure:has(> .bild-satz) > figcaption.bildmarke {
  position: relative;
  right: auto;
  bottom: auto;
  justify-self: end;
  align-self: end;
  margin: 0 0.9rem 0.9rem 0;
}
/* Auf dem Handy wird der Satz sonst zweizeilig: die Sperrung geht zurück, die Schriftgröße bleibt */
@media (max-width: 480px) {
  figure > figcaption.bildmarke { letter-spacing: 0.06em; padding: 0.4rem 0.7rem; }
}

/* ---------- Satz unter einem Bild ---------- */
.bild-satz {
  margin: 0.8rem 0 0;
  font-size: var(--t-fein);
  color: var(--muted);
  max-width: var(--lesebreite);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.6);
  padding: 2.5rem 0;
  font-size: var(--t-fein);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.site-footer img { height: 32px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
/* Bleibt Mono: Datumsangabe */
.footer-updated {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
}

/* ---------- Druck ---------- */
@media print {
  .recipe-head, .magnet-head, .site-footer {
    background: none !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }
  .site-footer a, .recipe-head, .magnet-head { color: var(--text) !important; }
  .site-header, .progress, .nav-toggle, .check { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .angezeichnet > .ecke { display: none !important; }
  /* Den dunklen Grund der Bildmarke druckt der Browser nicht mit: die Marke geht
       deshalb unter das Bild zurück. */
  .band:has(> figcaption.bildmarke) { display: block; }
  figure > figcaption.bildmarke,
  .band > figcaption.bildmarke {
    position: static;
    max-width: none;
    margin: 0.4rem 0 0;
    padding: 0;
    justify-self: start;
    align-self: auto;
    color: var(--muted) !important;
    background: none !important;
  }
  .faq-item, .rung, .case { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--muted); }
}

/* ---------- Hinweis unter der Angebotstreppe ---------- */
.ladder-b2b {
  margin: 1.75rem 0 0;
  font-size: var(--t-fein);
  color: var(--text-soft);
}

/* Der Hinweis auf die nächste Workshop-Reihe in der Angebotstreppe.
   Rot als Textfarbe, weil es genau die Stelle ist, an der etwas Neues steht;
   Text-Rot auf hellem Grund, nicht die Signalfarbe der Knöpfe. */
.termin-marke {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin: 0.35rem 0 0;
}