/* Hallmark · macrostructure: home = Stat-Led hero · subpages = Long Document
 * nav: N1b Canonical SaaS three-section (adapted) · footer: Ft6 Letter close + slim contact line
 * theme: custom (client brandboard) · genre: editorial · gates: pass · v2
 * pre-emit critique: P5 H4 E5 S4 R4 V4
 */
@import url("tokens.css");

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }

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

/* ============ Type base ============ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
h1 { font-size: var(--text-display); font-weight: 500; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-md); font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-sm);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 38ch;
}

.people-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.people-split__photos {
  display: flex;
  gap: var(--space-lg);
}
.people-split__person {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.people-split__person img {
  width: 14.5rem;
  height: 18.5rem;
  object-fit: cover;
  border: 1px solid var(--color-rule-dark);
}
.people-split__name {
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 62rem) {
  .people-split { grid-template-columns: 1fr; }
  .people-split__photos { margin-top: var(--space-xl); }
}
@media (max-width: 30rem) {
  .people-split__photos { gap: var(--space-md); }
  /* flex:1 1 0 zwingt beide Spalten auf gleiche Breite — ohne festen Basiswert
     "raten" Browser die Breite anhand des jeweiligen Bild-Seitenverhältnisses,
     bevor aspect-ratio greift, was bei unterschiedlichen Originalfotos zu
     unterschiedlich hohen Portraits führt. */
  .people-split__person { flex: 1 1 0; min-width: 0; }
  .people-split__person img { width: 100%; height: auto; aspect-ratio: 3/4; }
}

p { max-width: var(--measure); }
p + p { margin-top: var(--space-md); }

strong { font-weight: 600; }
em { font-style: italic; }

/* ============ Layout ============ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 46rem; }
.container--prose { max-width: 46rem; }
.hero-prose { max-width: 58rem; }
.hero-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.hero-split__visual {
  width: 22rem;
  aspect-ratio: 3 / 4;
}
/* Für querformatige (3:2) Hero-Bilder — bei gleicher Breite wie das
   Hochformat wirkt ein Querformat sonst deutlich kleiner/flacher. */
.hero-split__visual--wide { width: 32rem; }
.hero-split__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Querformat-Bild über die volle Höhe der Textspalte strecken (statt
   eigener Bildhöhe per aspect-ratio), damit es neben viel Fließtext
   nicht klein/abgeschnitten wirkt. */
.hero-split--stretch { align-items: stretch; }
.hero-split--stretch .hero-split__visual { aspect-ratio: auto; }
@media (max-width: 62rem) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__visual { width: 100%; max-width: 24rem; margin-top: var(--space-xl); }
  .hero-split--stretch .hero-split__visual { aspect-ratio: 3 / 2; }
}

/* Zwei Portraits nebeneinander statt eines einzelnen Hero-Bildes */
.hero-split__people { display: flex; gap: var(--space-md); width: 30rem; }
.hero-split__people .framed { flex: 1; min-width: 0; }
.hero-split__person { flex: 1; min-width: 0; margin: 0; }
.hero-split__person figcaption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
  letter-spacing: 0.02em;
}
.hero-split__people .framed img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
@media (max-width: 62rem) {
  .hero-split__people { width: 100%; max-width: 26rem; margin-top: var(--space-xl); }
}

main { display: block; }

/* Grid-Kinder dürfen unter ihre min-content-Breite schrumpfen. Ohne das
   spannt ein einzelnes langes Wort (oder ein nowrap-Button) die ganze
   Spalte auf und erzeugt verstecktes Overflow. */
.hero__grid > *,
.hero-split > *,
.text-split > *,
.people-split > * { min-width: 0; }

.section {
  padding-block: var(--space-3xl);
}
.section--tight { padding-block: var(--space-2xl); }
.section--roomy { padding-block: var(--space-4xl); }

/* Vertikaler Rhythmus auf kleinen Screens zurücknehmen — die Desktop-Abstände
   fressen sonst rund ein Drittel der Viewport-Höhe, bevor Inhalt erscheint. */
@media (max-width: 48rem) {
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section--roomy { padding-block: var(--space-3xl); }
  .hero { padding-bottom: var(--space-xl); }
}

.section--ink {
  background: var(--color-forest);
  color: var(--color-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--color-on-ink); }
.section--ink .lede { color: var(--color-on-ink); }
.section--ink .eyebrow { color: var(--color-accent-on-dark); }
.section--sand { background: var(--color-paper-2); }

.rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}
.section--ink .rule { border-top-color: var(--color-rule-dark); }

.hairline-above { border-top: 1px solid var(--color-rule); padding-top: var(--space-2xl); }

/* ============ Skip link ============ */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-on-ink);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

/* ============ Nav — N1b Canonical SaaS three-section (adapted, CTA-only) ============ */
.masthead {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}
.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.masthead__mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}
.masthead__wordmark {
  text-align: left;
  line-height: 1.2;
}
.masthead__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
  display: block;
}
.masthead__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.masthead__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.masthead__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}
.masthead__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.masthead__link:hover { border-color: var(--color-forest); }
.masthead__link[aria-current="page"] {
  color: var(--color-forest);
  border-color: var(--color-forest);
}

.masthead__cta { flex-shrink: 0; }
.masthead__cta-mobile { display: none; }

.masthead__menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ink);
}
.masthead__menu-toggle span,
.masthead__menu-toggle span::before,
.masthead__menu-toggle span::after {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.masthead__menu-toggle span::before { position: absolute; top: -6px; }
.masthead__menu-toggle span::after { position: absolute; top: 6px; }
.masthead[data-nav-open="true"] .masthead__menu-toggle span { background: transparent; }
.masthead[data-nav-open="true"] .masthead__menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.masthead[data-nav-open="true"] .masthead__menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile-Nav greift beim Header früher (sechs Menüpunkte + CTA passen erst ab ~1200px) */
@media (max-width: 75rem) {
  .masthead__row { flex-wrap: wrap; }
  .masthead__nav {
    flex-basis: 100%;
    order: 3;
    justify-content: stretch;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-long) var(--ease-in-out);
  }
  .masthead__nav > .masthead__list-wrap { overflow: hidden; }
  .masthead[data-nav-open="true"] .masthead__nav {
    grid-template-rows: 1fr;
  }
  .masthead[data-nav-open="true"] .masthead__row { border-top: 1px solid var(--color-rule); }
  .masthead__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-sm);
  }
  .masthead__link { padding-block: var(--space-sm); min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .masthead .masthead__cta { display: none; }
  .masthead__cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
  }
  .masthead__menu-toggle { display: flex; margin-left: auto; }
}

@media (max-width: 40rem) {
  .masthead__mark { width: 2rem; height: 2rem; }
  .masthead__name { font-size: var(--text-base); }
}

/* ============ Buttons / CTAs ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-forest);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-forest);
  background: transparent;
  min-height: 44px;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn:hover { background: var(--color-forest); color: var(--color-on-ink); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-forest); color: var(--color-on-ink); border-color: var(--color-forest); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); }
.section--ink .btn { border-color: var(--color-on-ink); color: var(--color-on-ink); }
.section--ink .btn:hover { background: var(--color-on-ink); color: var(--color-ink); }
.section--ink .btn--primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.section--ink .btn--primary:hover { background: var(--color-paper); color: var(--color-ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--color-forest);
  padding-bottom: 0.15em;
  white-space: nowrap;
  transition: gap var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.link-arrow:hover { gap: 0.65em; border-color: var(--color-ink); }
.link-arrow__glyph { transition: transform var(--dur-short) var(--ease-out); }

/* ============ Text + sticky image split ============ */
.text-split {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: var(--space-3xl);
  align-items: start;
}
.text-split__visual {
  position: sticky;
  top: calc(var(--space-sm) + 5.25rem);
  aspect-ratio: 3 / 4;
}
.text-split__visual.framed { position: sticky; }
.text-split__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zwei Portraits nebeneinander statt eines einzelnen Bildes —
   für Sektionen, die konkret Yasmin & Christoph erwähnen. */
.text-split__people { display: flex; gap: var(--space-md); }
.text-split__people .framed { flex: 1; min-width: 0; }
.text-split__people .framed img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.text-split--reverse { grid-template-columns: 0.85fr 1.3fr; }
.text-split--reverse .text-split__visual { order: 1; }
.text-split--reverse .text-split__text { order: 2; }
@media (max-width: 62rem) {
  .text-split, .text-split--reverse { grid-template-columns: 1fr; gap: var(--space-xl); }
  .text-split__visual, .text-split__visual.framed {
    position: static;
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

/* ============ Prose (Long Document) ============ */
.prose {
  max-width: var(--measure);
}
.prose > * + * { margin-top: var(--space-md); }
.prose h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xs);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
}
.prose blockquote {
  margin: var(--space-xl) 0;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: normal;
  line-height: 1.5;
  color: var(--color-ink-2);
}
ul.checks { margin-top: var(--space-md); }
ul.checks li {
  position: relative;
  padding-left: 1.5em;
  margin-top: var(--space-xs);
}
ul.checks li::before {
  content: "";
  position: absolute;
  left: 0.05em;
  top: 0.55em;
  width: 0.4em;
  height: 0.4em;
  background: var(--color-accent);
  transform: rotate(45deg);
}
ul.checks--on-dark li::before { background: var(--color-accent-on-dark); }

/* ============ Section head ============ */
.head { max-width: 42rem; }
.head + * { margin-top: var(--space-xl); }
.head--wide { max-width: 56rem; }

.numbered-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2xs);
  display: block;
}

/* ============ Two-tile CTA (Offen / Inhouse) ============ */
.paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}
.paths > * { min-width: 0; }
.path-tile {
  background: linear-gradient(135deg, var(--color-forest) 0%, var(--color-ink) 100%);
  color: var(--color-on-ink);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--dur-short) var(--ease-out);
}
.path-tile--dark2 { background: linear-gradient(135deg, #16302d 0%, var(--color-ink) 100%); }
.path-tile:hover { transform: translateY(-3px); }
.path-tile__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}
.path-tile h3 { font-size: var(--text-2xl); font-weight: 500; color: var(--color-on-ink); }
.path-tile p { color: var(--color-on-ink-muted); }
.path-tile__facts {
  border-top: 1px solid var(--color-rule-dark);
  border-bottom: 1px solid var(--color-rule-dark);
  padding-block: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.path-tile__facts li {
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
  padding-left: 1em;
  position: relative;
}
.path-tile__facts li::before { content: "·"; color: var(--color-accent); position: absolute; left: 0; }
.path-tile .link-arrow {
  margin-top: auto;
  padding-top: var(--space-sm);
  color: var(--color-on-ink);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 48rem) {
  .paths { grid-template-columns: 1fr; }
}

/* ============ Dark stripe (Persönlich · Praxisnah · Entwicklung) ============ */
.stripe { background: var(--color-forest); color: var(--color-on-ink); }
.stripe__list { border-top: 1px solid var(--color-rule-dark); }
.stripe__list li {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule-dark);
}
.stripe__word { color: var(--color-accent); }

@media (max-width: 40rem) {
  .stripe__list li { font-size: var(--text-lg); }
}

/* ============ Sieben Entwicklungsfelder — aufklappbare Editorial-Liste ============ */
.framework { border-top: 1px solid var(--color-rule); margin-top: var(--space-2xl); }
.framework-item { border-bottom: 1px solid var(--color-rule); }
/* --color-rule ist identisch mit dem Sand-Hintergrund von .section--sand —
   dort auf einen sichtbaren, dunkleren Ton wechseln, sonst verschwinden die Linien. */
.section--sand .framework,
.section--sand .framework-item { border-color: var(--color-sage); }
.framework-item__head {
  width: 100%;
  display: grid;
  grid-template-columns: 5rem 1fr 2rem;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  text-align: left;
  min-height: 44px;
}
.framework-item__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-rule-dark);
  transition: color var(--dur-short) var(--ease-out);
}
.framework-item[data-open="true"] .framework-item__num,
.framework-item__head:hover .framework-item__num { color: var(--color-accent-dark); }
.framework-item__heading { display: flex; flex-direction: column; gap: 0.3rem; }
.framework-item__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.framework-item__question {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}
.framework-item__toggle-icon {
  justify-self: end;
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
  flex-shrink: 0;
}
.framework-item__toggle-icon::before,
.framework-item__toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--color-forest);
  transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-short) var(--ease-in-out);
}
.framework-item__toggle-icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.framework-item__toggle-icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.framework-item[data-open="true"] .framework-item__toggle-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.framework-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.framework-item[data-open="true"] .framework-item__panel { grid-template-rows: 1fr; }
.framework-item__panel-inner { overflow: hidden; }
.framework-item__panel-inner-pad {
  padding-left: calc(5rem + var(--space-lg));
  padding-bottom: var(--space-xl);
  max-width: 62ch;
}
.framework-item__panel-inner-pad p { color: var(--color-ink-2); }
.framework-item__panel-inner-pad p + p { margin-top: var(--space-md); }
.framework-item__focus {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.framework-item__focus-label {
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  margin-right: var(--space-sm);
}

@media (max-width: 40rem) {
  .framework-item__head { grid-template-columns: 3rem 1fr 1.5rem; gap: var(--space-md); }
  .framework-item__num { font-size: var(--text-xl); }
  .framework-item__panel-inner-pad { padding-left: 0; }
}

/* ============ Hero (two-column) ============ */
.hero { padding-bottom: var(--space-2xl); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr;
  gap: var(--space-2xl);
  align-items: start;
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-lg);
}
.hero__kicker-rule { width: 1.5rem; height: 1px; background: var(--color-accent-dark); display: inline-block; flex-shrink: 0; }
.hero__headline {
  max-width: 21ch;
  text-wrap: balance;
}
.hero__headline em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent-dark);
  font-family: var(--font-display);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}
.hero__lede { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }
.hero__stats {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  flex-wrap: wrap;
}
.hero__stats > div { display: flex; flex-direction: column; gap: 0.2rem; }
.hero__stats dt {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero__stats dd { font-size: var(--text-xs); color: var(--color-muted); max-width: 22ch; }

.hero__visual { position: relative; }
.hero__frame {
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: 1.5rem;
  left: 1.5rem;
  border: 1px solid var(--color-accent);
  z-index: 0;
}

/* ============ Framed image — offset accent-rule frame, use on every image ============ */
.framed {
  position: relative;
}
.framed::before {
  content: "";
  position: absolute;
  inset: -1rem -1rem 1.5rem 1.5rem;
  border: 1px solid var(--color-accent);
  z-index: 0;
  pointer-events: none;
}
.framed > img {
  position: relative;
  z-index: 1;
  display: block;
}
.framed--tight::before { inset: -0.6rem -0.6rem 0.9rem 0.9rem; }
.hero__card {
  position: relative;
  z-index: 1;
  background: var(--color-ink);
  color: var(--color-on-ink);
  padding: var(--space-2xl) var(--space-xl);
  min-height: 31rem;
  display: flex;
  flex-direction: column;
}
.hero__card-mark { width: 3.25rem; height: 3.25rem; color: var(--color-on-ink); margin-bottom: var(--space-2xl); }
.hero__card-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-md);
}
.hero__card-kicker .hero__kicker-rule { background: var(--color-accent-on-dark); }
.hero__card-text { color: var(--color-on-ink-muted); max-width: 32ch; }
.hero__card-people {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.hero__card-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hero__card-photo {
  width: 7.25rem;
  height: 9.4rem;
  object-fit: cover;
  border: 1px solid var(--color-rule-dark);
}
.hero__card-person-name {
  font-size: var(--text-xs);
  color: var(--color-on-ink-muted);
  max-width: 12ch;
  line-height: 1.3;
}
.hero__card-statement {
  margin-top: auto;
  padding-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-on-ink);
}
.hero__card-statement em { font-style: italic; color: var(--color-accent); }

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { margin-top: var(--space-2xl); max-width: 28rem; }
  .hero__frame { display: none; }
}
@media (max-width: 40rem) {
  .hero__stats { gap: var(--space-lg); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__card { min-height: 0; }
}

/* Sehr schmale Geräte (320px): der lange deutsche CTA-Text kann wegen
   white-space:nowrap nicht umbrechen und würde sonst das ganze Grid
   aufspannen. Enger setzen statt umbrechen — Buttons bleiben einzeilig. */
@media (max-width: 24rem) {
  .btn {
    padding-inline: var(--space-md);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
  }
}

/* ============ Differentiator list ============ */
.trait-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-2xl);
}
.trait {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
}
.section--ink .trait { border-top-color: var(--color-rule-dark); }
.section--sand .trait { border-top-color: var(--color-sage); }
.trait h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
  padding-left: 1.25rem;
  position: relative;
}
.trait h3::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}
.trait p { color: var(--color-ink-2); font-size: var(--text-sm); padding-left: 1.25rem; }
.section--ink .trait p { color: var(--color-on-ink-muted); }

@media (max-width: 40rem) {
  .trait-list { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============ Phase / step sequence (Werkstattphasen) ============ */
.phases { margin-top: var(--space-xl); }

/* Kick-off bleibt ein eigener Auftakt außerhalb der nummerierten Pfad-Kette */
.phase-intro {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}
.phase-intro__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-forest);
  line-height: 1;
}
.phase-intro__body h3 { font-size: var(--text-lg); font-weight: 500; font-family: var(--font-display); margin-bottom: var(--space-xs); }

/* Der Pfad: 3 Stationen oben, 2 darunter — die SVG-Linie läuft von Station 3
   gerade nach unten zu Station 4 und von dort weiter nach links zu Station 5,
   sodass die Leserichtung im Zickzack sichtbar fortgesetzt wird. */
.phase-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-3xl);
}
.phase-path__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.phase-path__line path {
  fill: none;
  stroke: var(--color-sage);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}
.phase-path__item {
  position: relative;
  z-index: 1;
}
.phase-path__item:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.phase-path__item:nth-of-type(5) { grid-column: 1; grid-row: 2; }

.phase-path__dot {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1.5px solid var(--color-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-forest);
  margin-bottom: var(--space-md);
}
.section--sand .phase-path__dot { background: var(--color-paper-2); }

.phase-path__item h3 { font-size: var(--text-lg); font-weight: 500; font-family: var(--font-display); margin-bottom: var(--space-xs); }
.phase-path__topics {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.phase-path__topics li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.phase-path__topics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.35em;
  height: 0.35em;
  background: var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}

/* Aufklappbares "Mehr erfahren" — gleiche grid-rows-Technik wie das FAQ-Accordion */
.phase-path__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border: 1.5px solid var(--color-forest);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-forest);
  color: var(--color-on-ink);
  min-height: 32px;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.phase-path__toggle:hover {
  background: transparent;
  color: var(--color-forest);
}
.phase-path__toggle-icon {
  width: 0.9rem;
  height: 0.9rem;
  position: relative;
  flex-shrink: 0;
}
.phase-path__toggle-icon::before,
.phase-path__toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--color-on-ink);
  transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-short) var(--ease-in-out), background-color var(--dur-short) var(--ease-out);
}
.phase-path__toggle-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.phase-path__toggle-icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.phase-path__item[data-open="true"] .phase-path__toggle-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.phase-path__toggle:hover .phase-path__toggle-icon::before,
.phase-path__toggle:hover .phase-path__toggle-icon::after { background: var(--color-forest); }

.phase-path__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.phase-path__item[data-open="true"] .phase-path__panel { grid-template-rows: 1fr; }
.phase-path__panel-inner { overflow: hidden; }
.phase-path__panel-inner p {
  padding-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

@media (max-width: 56rem) {
  .phase-path { grid-template-columns: 1fr; row-gap: var(--space-2xl); }
  .phase-path__item:nth-of-type(4), .phase-path__item:nth-of-type(5) { grid-column: 1; grid-row: auto; }
  .phase-path__line { display: none; }
}
@media (max-width: 40rem) {
  .phase-intro { grid-template-columns: 1fr; gap: var(--space-xs); }
}

/* ============ Spec sheet (Rahmenbedingungen) ============ */
.spec-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.section--ink .spec-row { border-color: var(--color-rule-dark); }
.spec-row {
  border: 1px solid var(--color-forest);
  padding: var(--space-lg);
}
.spec-row dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-forest);
  margin-bottom: var(--space-2xs);
}
.spec-row dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

/* ============ Timeline (Termine) ============ */
.timeline { border-top: 1px solid var(--color-rule); }
.section--sand .timeline { border-top-color: var(--color-sage); }
.timeline-item {
  position: relative;
  padding: var(--space-lg) 0 var(--space-lg) 1.4rem;
  border-bottom: 1px solid var(--color-rule);
}
.section--sand .timeline-item { border-bottom-color: var(--color-sage); }
.timeline-item__meta {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2xs);
}
.timeline-item__meta::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.timeline-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
}
.timeline-item p { color: var(--color-ink-2); font-size: var(--text-sm); }
.timeline-item p.timeline-item__title { color: var(--color-ink); font-size: var(--text-lg); }
.timeline-item p.timeline-item__date {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-md);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--color-forest);
  color: var(--color-on-ink);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.timeline-item__date + .timeline-item__date { margin-left: var(--space-sm); }

@media (max-width: 40rem) {
  .spec-sheet { grid-template-columns: 1fr; }
}

/* ============ Team / bio ============ */
.bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}
.bio__photo { width: 9rem; height: 11.5rem; margin-bottom: var(--space-lg); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio h2 { font-size: var(--text-2xl); font-weight: 500; }
.bio__role {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  letter-spacing: 0.03em;
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.bio p { color: var(--color-ink-2); }
.bio__focus {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
}
.bio__focus dt { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2xs); }
.bio__site { display: inline-block; margin-top: var(--space-sm); font-size: var(--text-sm); }

@media (max-width: 48rem) {
  .bios { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* ============ Accordion (FAQ) ============ */
.accordion { border-top: 1px solid var(--color-rule); }
.accordion-item { border-bottom: 1px solid var(--color-rule); }
.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  min-height: 44px;
}
.accordion-item__icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
}
.accordion-item__icon::before,
.accordion-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-forest);
  transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-short) var(--ease-in-out);
}
.accordion-item__icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.accordion-item__icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.accordion-item[data-open="true"] .accordion-item__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.accordion-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.accordion-item[data-open="true"] .accordion-item__panel { grid-template-rows: 1fr; }
.accordion-item__panel-inner { overflow: hidden; }
.accordion-item__panel-inner p {
  padding-bottom: var(--space-lg);
  color: var(--color-ink-2);
  max-width: 60ch;
}

/* ============ Forms ============ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.field input,
.field textarea,
.field select {
  border: none;
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  padding-block: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--color-forest);
  outline: none;
}
.field textarea { resize: vertical; min-height: 6rem; }

.radio-group { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
}
.radio-option input { accent-color: var(--color-forest); width: 1rem; height: 1rem; }

.btn:disabled { opacity: 0.6; cursor: default; }
.btn:disabled:hover { background: var(--color-forest); }

.form-status {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  min-height: 1.5em;
}
.form-status[data-tone="success"] { color: var(--color-forest); }
.form-status[data-tone="error"] { color: #9a3f2f; }

.form-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============ Footer — dark quote close, logo row, 3-column sitemap, legal bar ============ */
.site-footer {
  background: var(--color-paper);
  color: var(--color-ink);
}

/* Großes zentriertes Zitat, wie ursprünglich — eigener voller Hintergrund,
   damit die dunkle Fläche über die ganze Breite geht, nicht nur den Container. */
.footer-close-wrap { background: var(--color-forest); }
.footer-close {
  padding-block: var(--space-2xl);
  text-align: center;
}
.footer-close blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, var(--text-3xl));
  line-height: 1.35;
  max-width: 30ch;
  margin-inline: auto;
  font-style: normal;
  color: var(--color-on-ink);
}
.footer-close__sign {
  margin-top: var(--space-xl);
  margin-inline: auto;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-on-ink-muted);
}
.footer-close__sign span { color: var(--color-accent-on-dark); }
.footer-close .btn {
  margin-top: var(--space-xl);
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.footer-close .btn:hover { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

.footer-top { padding-block: var(--space-2xl) var(--space-lg); }

.footer-rule { border: none; border-top: 1px solid var(--color-rule); margin: 0; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col__label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-xs);
}
.footer-col a, .footer-col__plain {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.footer-col a:hover { color: var(--color-forest); }
.footer-col a[aria-current="page"] { color: var(--color-forest); font-weight: 500; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.footer-bottom__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-align: center;
  flex: 1 1 auto;
  min-width: 16rem;
}
.footer-bottom__legal { display: flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.footer-bottom__legal a { color: var(--color-muted); min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom__legal a:hover { color: var(--color-ink); }

@media (max-width: 48rem) {
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-bottom__tagline { text-align: left; order: 3; }
}
@media (max-width: 30rem) {
  .footer-cols { grid-template-columns: 1fr; }
}

.footer-brand { display: flex; align-items: center; gap: var(--space-sm); }
.footer-mark { width: 2.5rem; height: 2.5rem; object-fit: contain; flex-shrink: 0; }
.footer-brand__wordmark { line-height: 1.2; }
.footer-brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  white-space: nowrap;
}
.footer-brand__tag {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-top: 0.1rem;
  white-space: nowrap;
}

/* ============ Reveal (single orchestrated entrance) ============ */
.reveal {
  opacity: 0;
  transform: translateY(10px);
}
.reveal.is-visible {
  animation: reveal var(--dur-long) var(--ease-out) forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ============ Utility ============ */
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
.u-center { text-align: center; margin-inline: auto; }
.u-muted { color: var(--color-muted); }
.u-accent { color: var(--color-forest); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============ Responsive type ============ */
@media (max-width: 40rem) {
  h1, h2, h3 { overflow-wrap: anywhere; }
  .lede { font-size: var(--text-lg); max-width: 100%; }
  h2 { font-size: var(--text-2xl); }
}

/* Inline-Textlinks (z. B. LINC-Verweis) */
.text-link {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-micro) ease, text-decoration-color var(--dur-micro) ease;
}
.text-link:hover { color: var(--color-accent-dark); text-decoration-color: currentColor; }

/* LinkedIn-Button im Footer */
.footer-col a.footer-social {
  gap: var(--space-xs);
  align-self: flex-start;
  margin-top: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  min-height: 36px;
}
.footer-col a.footer-social:hover { border-color: var(--color-forest); color: var(--color-forest); }

/* ============ Infotermine: Leiste, Footer-Block, Hero-Hinweis ============ */
.infobar {
  background: var(--color-forest);
  color: var(--color-on-ink);
  font-size: var(--text-xs, 0.8125rem);
  letter-spacing: 0.02em;
}
.infobar[hidden], [data-infotermine][hidden] { display: none; }
.infobar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 2.5rem;
  padding-block: var(--space-2xs);
}
.infobar__text { margin: 0; color: var(--color-on-ink); }
.infobar__sep { margin-inline: var(--space-xs); color: var(--color-accent-on-dark); }
.infobar__link {
  color: var(--color-accent-on-dark);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.infobar__link:hover { border-color: currentColor; }
.infobar__close {
  margin-left: var(--space-sm);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-ink-muted);
  font-size: 1.1rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
}
.infobar__close:hover { color: var(--color-on-ink); }
@media (max-width: 40rem) {
  .infobar__row { justify-content: space-between; gap: var(--space-sm); }
  .infobar { font-size: 0.75rem; }
  .infobar__text { white-space: nowrap; }
  .infobar__sep, .infobar__next, .infobar__long { display: none; }
  .infobar__close { margin-left: 0; }
}

.footer-info-wrap { padding-bottom: var(--space-xl); }
.footer-info {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) 1fr auto;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}
.footer-info p.footer-info__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-ink);
  margin: 0;
}
.footer-info p.footer-info__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-3xs) 0 0;
}
/* Termine als 2er-Raster, ab breitem Desktop alle in einer Reihe — so gibt es nie "3 + 1" */
.footer-info__dates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-xs);
  justify-content: center;
}
@media (min-width: 78rem) {
  .footer-info__dates { grid-template-columns: repeat(4, max-content); }
}
.footer-info__dates li {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-forest);
  color: var(--color-on-ink);
}
.footer-info .footer-info__link { font-size: var(--text-sm); white-space: nowrap; justify-self: end; }
@media (max-width: 48rem) {
  .footer-info { grid-template-columns: 1fr; padding: var(--space-md); }
  .footer-info .footer-info__link { justify-self: start; }
  .footer-info__dates { justify-content: start; }
}

.hero p.hero__info {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.hero__info a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1px;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.hero__info a::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.hero__info a:hover { color: var(--color-forest); border-color: var(--color-forest); }

/* Sprungziel unter dem Sticky-Header nicht verstecken */
#infotermine, #contact-form { scroll-margin-top: 6rem; }