/* Diese drei Tokens braucht ausschließlich dieses Stylesheet – Fußzeile,
   Rechtstexte und die helle Szene. Im kritischen CSS wären sie totes Gewicht
   auf dem ersten Bildschirm, deshalb stehen sie hier. */
:root {
  --surface-sunken: #0b0b0e;
  --text-on-light-dim: #4b4b55;
  --container-text: 720px;
  --z-overlay: 200;
}

/* Endzustand des Seitenkopfs, von app.js nach 1,4 s festgeschrieben.
   Siehe dort: Die Eintritte dürfen nicht an einer stehenden Zeitachse hängen. */
html.entered .fade-up,
html.entered .kinetic > .kw > span {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Keyframes des Hero-Scheins: der Ablauf ist eine Endlosschleife im
   Hintergrund und darf ein paar Millisekunden später eintreffen. */
@keyframes glow-breathe {
  from { opacity: 0.7; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.14); }
}

/* Kapitel- und Rubrikmarke. */
.label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.label::after {
  content: "";
  flex: 1;
  max-width: 72px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left center;
}
body { font-synthesis-weight: none; }

/* Zustände nach dem ersten Bildschirm: geöffnetes Menü, Randnotizen. */
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: rotate(-45deg); }
.hero__note { margin-top: var(--space-5); color: var(--text-dim); font-size: var(--fs-100); }
/* Abschluss des Heros: Kapitelmarke plus die Aussage, die das Kapitel trägt.
   Eine Marke ohne Text stünde sonst allein im Raum. */
.hero__chapter {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.hero__chapter-label {
  color: var(--text-dim);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__chapter-line {
  max-width: 38ch;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Zustände, die erst nach dem ersten Bildschirm gebraucht werden. */
::selection { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-soft); transform: translateY(-2px); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
  .link:hover { color: var(--accent-soft); }
  .nav__link:hover { color: var(--text-on-dark); }
}

/* --- Farbnebel: zwei weiche radiale Flächen, sehr langsame Drift -------- */
.fog {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fog__blob {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.62;
  will-change: transform;
}
/* Drei Flächen, jede mit eigener Dauer: Weil sich die Zyklen nie decken,
   wiederholt sich das Bild nicht sichtbar. Alle Zyklen über 60 s, die Strecke
   ist so gewählt, dass die Bewegung wahrnehmbar bleibt, ohne abzulenken. */
.fog__blob--a {
  top: -14%; left: 38%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  animation: fog-a 66s var(--ease-soft) infinite alternate;
}
.fog__blob--b {
  top: 28%; left: -26%;
  background: radial-gradient(circle, hsl(20 60% 40% / 0.15) 0%, transparent 70%);
  animation: fog-b 84s var(--ease-soft) infinite alternate;
}
.fog__blob--c {
  top: 46%; left: 54%;
  width: 52%;
  background: radial-gradient(circle, hsl(var(--accent-h) 62% 42% / 0.12) 0%, transparent 66%);
  animation: fog-c 108s var(--ease-soft) infinite alternate;
}
@keyframes fog-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-26%, 20%, 0) scale(1.38); }
}
@keyframes fog-b {
  from { transform: translate3d(0, 0, 0) scale(1.22); }
  to { transform: translate3d(30%, -18%, 0) scale(0.86); }
}
@keyframes fog-c {
  from { transform: translate3d(0, 0, 0) scale(0.9); }
  to { transform: translate3d(-18%, -26%, 0) scale(1.3); }
}

@media (max-width: 59.99rem) {
  html.js .nav__panel {
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--surface-1);
    border-block: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-2);
  }
  html.js .nav__panel[hidden] { display: none; }
  html.js .nav__list { flex-direction: column; gap: 2px; }
  html.js .nav__link { font-size: var(--fs-300); padding: 8px 12px; }
  html.js .nav__cta { justify-self: start; }
  /* Ohne JavaScript hat der Umschalter keine Funktion – dann steht das Menü
     offen und der Knopf verschwindet, statt als totes Bedienelement dazustehen. */
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); }
}
/* Scroll-Reveals. Nur mit JS aktiv, damit ohne JS nichts unsichtbar bleibt. */
/* Grundsatz für alle Eintritts-Effekte: Sichtbar ist der Ruhezustand.
   Das Verbergen übernimmt jeweils die Mechanik, die den Eintritt auch wirklich
   fährt. Fällt sie aus – kein Skript, keine Scroll-Timeline, ein Tab, der nie
   gerendert wurde –, steht der Inhalt einfach da. Unsichtbar hängen bleiben
   kann so nichts. */

/* Weg 1: Scroll-Timeline. Der Ausgangszustand steht ausschließlich in den
   Keyframes, nie als Grundregel. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 16%;
    }
    html.js .work.reveal,
    html.js .asks li.reveal { animation-name: reveal-in-card; }

    /* Staffelung: Jede Stufe startet und endet etwas später auf derselben
       Bahn. Das ersetzt die Verzögerung, die es bei Scroll-Timelines nicht gibt. */
    html.js .reveal[data-i="1"] { animation-range: cover 4% cover 20%; }
    html.js .reveal[data-i="2"] { animation-range: cover 8% cover 24%; }
    html.js .reveal[data-i="3"] { animation-range: cover 12% cover 28%; }
    html.js .reveal[data-i="4"] { animation-range: cover 16% cover 32%; }
    html.js .reveal[data-i="5"] { animation-range: cover 20% cover 36%; }
  }
}

/* Weg 2: Nur für Browser ohne Scroll-Timelines. Hier verbirgt die Grundregel,
   und der Beobachter in app.js blendet ein. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .reveal { opacity: 0; transform: translateY(26px); }
    html.js .work.reveal,
    html.js .asks li.reveal { transform: translateY(26px) scale(0.98); }
    html.js .reveal.is-in {
      opacity: 1;
      transform: none;
      transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
      transition-delay: calc(var(--i, 0) * var(--stagger));
    }
    html.no-io .reveal { opacity: 1; transform: none; transition: none; }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes reveal-in-card {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
}


/* ==========================================================================
   Sarah Reichert – Autorin. Hauptstylesheet.
   Tokens und Kopfzeile liegen als kritisches CSS inline in jeder Seite.
   Alle Werte stammen aus den Tokens in :root – keine Magic Numbers.
   ========================================================================== */

/* --- Seitenübergänge: nur dort, wo der Browser sie nativ beherrscht. ----- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- Fortschritt der Scroll-Story. Reines CSS über die Scroll-Timeline. -- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      z-index: calc(var(--z-nav) + 1);
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* --- Typografie -------------------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.h-page {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h-sub { font-size: var(--fs-400); font-family: var(--font-display); line-height: 1.2; }
.lead {
  max-width: var(--measure);
  margin-top: var(--space-3);
  color: var(--text-dim);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-3); }
.prose strong { font-weight: 600; color: var(--text-on-dark); }

.band { position: relative; padding-block: var(--space-section); }
.band--raised { background: var(--surface-1); border-block: 1px solid var(--border-subtle); }
.band__head { max-width: var(--measure); margin-bottom: var(--space-8); }

/* --- Szene mit stehender Spalte (Bücher, Über mich) --------------------- */
.scene--split { display: grid; gap: var(--space-8) var(--space-8); }
.scene__side { align-self: start; }
@media (min-width: 62rem) {
  .scene--split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); }
  .scene--split .scene__side { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .scene--flip .scene__side { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .scene--split .scene__side { position: static; }
}

/* --- Werkliste --------------------------------------------------------- */
.works { display: grid; gap: var(--space-3); }
.work {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* Bewusst translate statt transform: Die Karte trägt beim Eintreten eine
     scrollgebundene transform-Animation, und Animationen schlagen normale
     Deklarationen. Über die eigenständige Eigenschaft setzen sich Eintritt
     und Hover zusammen, statt sich gegenseitig auszuschalten. */
  transition: translate var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) linear;
}
.work__cover {
  position: relative;
  grid-row: span 2;
  align-self: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
}
.work__cover img { width: 100%; height: auto; }
.work__flag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  background: rgb(11 11 14 / 0.82);
  color: var(--text-on-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-2);
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: var(--fs-100);
}
.work__meta b { color: var(--accent); font-weight: 600; }
.work__title { font-family: var(--font-display); font-size: var(--fs-400); }
.work__sub {
  margin-top: 2px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fs-200);
}
.work__text { margin-top: var(--space-2); color: var(--text-dim); max-width: 56ch; }
.work__for { margin-top: var(--space-2); font-size: var(--fs-100); color: var(--text-dim); }
.work__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
}
.work__btn {
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-100);
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
html:not(.js) .work__btn { display: none; }
@media (max-width: 34rem) {
  .work { grid-template-columns: 88px minmax(0, 1fr); }
  .work__actions { grid-column: 1 / -1; }
}
@media (hover: hover) and (pointer: fine) {
  .work:hover { translate: 0 -6px; box-shadow: var(--shadow-2); border-color: var(--border-strong); }
  .work__btn:hover { border-color: var(--accent); background: rgb(230 230 233 / 0.06); }
}
.work:focus-within { border-color: var(--accent); }

/* --- Detailansicht als Dialog ------------------------------------------ */
.sheet {
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  padding: 0;
  color: var(--text-on-dark);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.sheet::backdrop { background: rgb(8 8 10 / 0.76); }
.sheet__body { padding: var(--space-5) var(--space-5) var(--space-4); }
.sheet__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px; height: 44px;
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  line-height: 1;
}
.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-5);
}

/* --- Szene „Die Stimme“: helle Fläche, wechselnde Tafeln --------------- */
.voice {
  --steps: 3;
  position: relative;
  background: var(--surface-light);
  color: var(--text-on-light);
}
.voice__track { height: auto; }
.voice__stage {
  display: grid;
  align-content: center;
  padding-block: var(--space-8);
  overflow: hidden;
}
.voice .label { color: var(--accent-deep); }
.voice__panels { display: grid; gap: var(--space-8); margin-top: var(--space-4); }
.voice__panel {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.voice__panel p { text-wrap: balance; }
.voice__panel footer,
.voice__note {
  margin-top: var(--space-3);
  max-width: 46ch;
  color: var(--text-on-light-dim);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}
.voice__panel--prose { max-width: var(--measure); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; letter-spacing: 0; }
.voice__panel--prose .h-sub { color: var(--text-on-light); margin-bottom: var(--space-2); }
.voice__mark { color: var(--accent-deep); }
.voice__sentinels { position: absolute; inset: 0; pointer-events: none; }
/* Zonen statt Punkte: Die Mittellinie des Fensters liegt immer in genau einer
   Zone. Ein schneller Wisch oder ein Sprung zum Anker kann also keine Etappe
   überspringen – nach jedem Sprung meldet sich die zuständige Zone. */
.voice__sentinels span {
  position: absolute;
  left: 0;
  width: 1px;
  height: calc(100% / var(--steps));
}
.voice__sentinels span:nth-child(2) { top: calc(100% / var(--steps)); }
.voice__sentinels span:nth-child(3) { top: calc(200% / var(--steps)); }
.voice .link { color: var(--accent-deep); }
.voice :focus-visible { outline-color: var(--accent-deep); }
.voice .btn { background: var(--accent-deep); color: var(--surface-light); }
.voice__steps { display: none; gap: 8px; margin-top: var(--space-6); }
.voice__steps li {
  width: 40px; height: 3px;
  background: rgb(16 16 20 / 0.48);
  border-radius: 2px;
  transition: background-color var(--dur-base) linear;
}
.voice__steps li[data-done] { background: var(--accent-deep); }

/* Die stehende Bühne schaltet sich erst ein, wenn das Skript die Szene
   nachweislich fährt: app.js setzt data-scene-live erst, nachdem sich der
   Beobachter das erste Mal gemeldet hat. Bleibt er stumm – kein Skript, ein nie
   gerenderter Tab, ein Browser ohne die nötige Technik –, bleibt es bei der
   Abfolge oben, in der alle drei Tafeln vollständig lesbar untereinander
   stehen. Es gibt keinen Zustand, in dem Text hinter der Bühne verschwindet. */
@media (prefers-reduced-motion: no-preference) {
  html.js .voice[data-scene-live] .voice__track { height: calc(100svh * var(--steps)); }
  html.js .voice[data-scene-live] .voice__stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
  }
  html.js .voice[data-scene-live] .voice__panels { gap: 0; }
  html.js .voice[data-scene-live] .voice__panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    transform-origin: left center;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  html.js .voice[data-scene-live] .voice__panel[data-active] { opacity: 1; transform: none; }
  html.js .voice[data-scene-live] .voice__steps { display: flex; }
}

}

/* --- Porträt-Platzhalter ----------------------------------------------- */
/* Das Porträt bekommt dieselbe Behandlung wie das Hero-Motiv: oben und an den
   Seiten eine klare Kante, nach unten ein Auslaufen in die dunkle Fläche. Der
   dunkle Pullover vor der dunklen Bücherwand trägt den Übergang von selbst. */
.portrait {
  position: relative;
  isolation: isolate;
  max-width: 26rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.6) 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.6) 86%,
    transparent 100%
  );
}
.portrait img { width: 100%; height: auto; }

/* --- Fakten und Kennzahlen --------------------------------------------- */
.facts { display: grid; gap: 0; margin-top: var(--space-4); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.facts__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.facts__key { color: var(--accent); font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.facts__val { color: var(--text-dim); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.stat { padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.stat__num {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__label { display: block; margin-top: var(--space-1); color: var(--text-dim); font-size: var(--fs-100); }

.claims { max-width: var(--measure); margin-top: var(--space-4); }
.claims li { position: relative; padding-left: var(--space-4); margin-top: var(--space-2); color: var(--text-dim); }
.claims li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--accent);
}

/* --- FAQ --------------------------------------------------------------- */
.faq { max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__item:first-child { border-top: 1px solid var(--border-subtle); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding-block: var(--space-2);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.faq__q { font-family: var(--font-display); font-size: var(--fs-300); font-weight: 700; }
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) linear;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1px;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity var(--dur-fast) linear; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { opacity: 0; }
.faq__a { padding-bottom: var(--space-3); color: var(--text-dim); max-width: 64ch; }
.faq__a > * + * { margin-top: var(--space-2); }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover .faq__icon { border-color: var(--accent); }
}

/* --- Kontaktformular. Deckende Fläche, kein Milchglas. ------------------ */
.contact { display: grid; gap: var(--space-8); }
@media (min-width: 62rem) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-12); } }

.form {
  display: grid;
  gap: var(--space-3);
  padding: clamp(20px, 3vw, 40px);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.form__row { display: grid; gap: var(--space-3); }
@media (min-width: 34rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.04em; }
.field__req { color: var(--accent); }
.field__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--text-on-dark);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.field__control::placeholder { color: rgb(230 230 233 / 0.55); }
textarea.field__control { min-height: 9rem; resize: vertical; line-height: 1.6; }
select.field__control {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) center, calc(100% - 16px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__control:focus-visible { border-color: var(--accent); outline-offset: 0; }
.field__hint { color: var(--text-dim); font-size: var(--fs-100); }
.field__error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  color: var(--accent-soft);
  font-size: var(--fs-100);
  font-weight: 600;
}
.field__error svg { flex: 0 0 auto; margin-top: 3px; }
.field__error:not(:empty) { display: flex; }
.field__control[aria-invalid="true"] { border-color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-soft); }

.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.field--check input {
  width: 24px; height: 24px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.field--check label { font-size: var(--fs-100); color: var(--text-dim); line-height: 1.55; }
.field--check .field__error { grid-column: 1 / -1; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status:not(:empty) {
  display: grid;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-100);
}
.form__legal { color: var(--text-dim); font-size: var(--fs-100); }
.form__submit { justify-self: start; margin-top: var(--space-1); }

.done {
  display: grid;
  gap: var(--space-3);
  padding: clamp(24px, 4vw, 48px);
  background: var(--surface-1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
}
.done:focus-visible { outline-offset: 4px; }
.done__mark {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
}

.channels { margin-top: var(--space-5); }
.channels__row { padding-block: var(--space-2); border-top: 1px solid var(--border-subtle); }
.channels__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.channels dt { color: var(--accent); font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.channels dd { margin: 4px 0 0; color: var(--text-dim); }

/* --- Überleitung zum Kontakt ------------------------------------------- */
.closer {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.closer__title { font-family: var(--font-display); font-size: var(--fs-400); }
.closer__text { color: var(--text-dim); }

/* --- Fußzeile ---------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-10) var(--space-6);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
}
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__tagline { margin-top: var(--space-2); max-width: 34ch; color: var(--text-dim); font-size: var(--fs-100); }
.site-footer__title { margin-bottom: var(--space-2); font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark); }
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: var(--fs-100);
}
.site-footer__bottom a { color: var(--text-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__list a:hover { color: var(--text-on-dark); border-bottom-color: var(--accent); }
}

/* --- Seitenkopf der Unterseiten ---------------------------------------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) var(--space-8); }
.page-head__inner { position: relative; z-index: 1; max-width: var(--measure); }
.page-head .lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); }

.breadcrumb { margin-bottom: var(--space-2); color: var(--text-dim); font-size: var(--fs-100); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); opacity: 0.5; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); }

/* --- Rechtstexte ------------------------------------------------------- */
.legal { padding-block: var(--space-8) var(--space-section); }
.legal__inner { max-width: var(--container-text); }
.legal h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-bottom: var(--space-5); }
.legal h2 { font-family: var(--font-display); font-size: var(--fs-400); margin-top: var(--space-8); margin-bottom: var(--space-2); }
.legal h3 { font-size: var(--fs-300); margin-top: var(--space-5); margin-bottom: var(--space-1); }
.legal p, .legal address, .legal__inner > ul, .legal__inner > ol { color: var(--text-dim); margin-top: var(--space-2); }
.legal address { font-style: normal; }
/* Nur die Inhaltslisten der Rechtstexte, nicht die Brotkrümelnavigation:
   die steht in einem eigenen <nav> und behält ihre Trennzeichen. */
.legal__inner > ul li, .legal__inner > ol li { position: relative; padding-left: var(--space-3); margin-top: 6px; }
.legal__inner > ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--accent); }
.legal__inner > ol { counter-reset: n; }
.legal__inner > ol li { counter-increment: n; }
.legal__inner > ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--accent); font-size: var(--fs-100); }
.legal strong { color: var(--text-on-dark); font-weight: 600; }

.todo {
  display: inline;
  padding: 2px 8px;
  background: var(--accent-glow);
  color: var(--text-on-dark);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.9375em;
}

/* --- 404 --------------------------------------------------------------- */
.notfound { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; min-height: 60svh; padding-block: var(--space-section); }
.notfound__code { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-300); letter-spacing: 0.2em; }

/* --- Anfragearten ------------------------------------------------------- */
.asks { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.asks li {
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.asks h3 { font-family: var(--font-display); font-size: var(--fs-300); }
.asks p { margin-top: 6px; color: var(--text-dim); font-size: var(--fs-100); }
.asks p + p { margin-top: 4px; color: var(--accent); }

/* --- Buchseite: großer Werkeintrag -------------------------------------- */
.feature { display: grid; gap: var(--space-6); }
@media (min-width: 62rem) {
  .feature { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .feature__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.feature__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.feature__media img { width: 100%; }
.feature__block { max-width: var(--measure); }
.feature__block + .feature__block { margin-top: var(--space-8); }
.feature__block h3 { font-family: var(--font-display); font-size: var(--fs-400); margin-bottom: var(--space-2); }
.feature__block p { color: var(--text-dim); }
.feature__block p + p { margin-top: var(--space-2); }

.note {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: var(--fs-100);
}
.note b { color: var(--accent); font-weight: 600; }

.quote {
  max-width: var(--measure);
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: 1.3;
}
.quote footer { margin-top: var(--space-2); color: var(--text-dim); font-family: var(--font-body); font-size: var(--fs-100); }

.about { display: grid; gap: var(--space-8); }
@media (min-width: 62rem) { .about { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); } }

/* --- Hilfsklassen ------------------------------------------------------- */
.u-mt { margin-top: var(--space-4); }
.mark {
  color: var(--accent);
  background: linear-gradient(96deg, var(--accent-soft), var(--accent) 58%, hsl(24 62% 48%));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .mark { -webkit-text-fill-color: transparent; }
}

/* Links, die allein in einer Zeile stehen, brauchen eine echte Trefferfläche.
   Links mitten im Fließtext sind davon ausgenommen (WCAG 2.2, 2.5.8 „inline“). */
.link--standalone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
}
/* In Definitionslisten bleibt der Link umbruchfähig; die Trefferfläche wächst
   hier über senkrechte Innenabstände statt über eine feste Höhe. */
.facts__val > .link,
.channels dd > .link {
  padding-block: 12px;
}

/* --- Scrollgebundene Bewegung -------------------------------------------
   Alles hier ist Zutat: Wo der Browser Scroll-Timelines nicht kennt, fehlt
   nur die Bewegung, nie ein Inhalt. Läuft ohne JavaScript und ohne
   Layout-Lesungen, ausschließlich über transform. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Das Hero-Motiv wandert langsamer als die Seite und gibt ihr Tiefe. */
    .hero__frame img {
      animation: media-depth linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* Dieselbe Bewegung, ruhiger, für Cover und Porträt. */
    .work__cover img,
    .feature__media img,
    .portrait img {
      animation: media-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* Die Linie neben dem Kapitel-Label zieht sich beim Eintreten auf.
       Der Ausgangszustand steht bewusst nur in den Keyframes: Läuft die
       Zeitachse aus irgendeinem Grund nicht, greift die Grundregel unten und
       die Linie ist einfach da, statt unsichtbar zu bleiben. */
    .label::after {
      animation: line-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
  }
}
@keyframes media-depth {
  from { transform: translateY(-3%) scale(1.08); }
  to { transform: translateY(5%) scale(1); }
}
@keyframes media-drift {
  from { transform: translateY(-2.5%) scale(1.1); }
  to { transform: translateY(2.5%) scale(1.1); }
}
@keyframes line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Das Porträt braucht dafür einen beschnittenen Rahmen wie das Hero-Motiv. */

/* --- Scroll-Hinweis: eine Linie, die ruhig pulsiert ---------------------- */
.hero__chapter-label::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 2.4em;
  margin-right: 0.9em;
  vertical-align: -0.8em;
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top center;
  animation: scroll-pulse 2.8s var(--ease-soft) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chapter-label::before { animation: none; transform: scaleY(1); opacity: 1; }
}

/* --- Hero-Motiv: großflächig und randlos --------------------------------
   Das Bild sitzt nicht als Kachel in seiner Spalte, sondern läuft nach rechts
   und nach oben über die Kanten hinaus – bis hinter die Kopfzeile, die dort
   durchsichtig ist. Eine Maske löst alle vier Ränder auf, sodass kein Schnitt
   entsteht, sondern ein Übergang. Fehlt die Unterstützung für Masken, bleibt
   ein sauber beschnittenes Bild übrig – kein Fehlerbild. */
.hero__frame {
  -webkit-mask-image: radial-gradient(
    ellipse 62% 64% at 66% 52%,
    #000 14%,
    rgba(0, 0, 0, 0.8) 34%,
    rgba(0, 0, 0, 0.38) 54%,
    rgba(0, 0, 0, 0.1) 72%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 62% 64% at 66% 52%,
    #000 14%,
    rgba(0, 0, 0, 0.8) 34%,
    rgba(0, 0, 0, 0.38) 54%,
    rgba(0, 0, 0, 0.1) 72%,
    transparent 88%
  );
}

@media (min-width: 60rem) {
  /* Das Motiv verlässt den Textfluss und legt sich als Ebene in die rechte
     Hälfte – bis über den oberen Rand hinaus hinter die Kopfzeile. Der Text
     behält dadurch seine volle Spaltenbreite. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__text { position: relative; z-index: 2; max-width: 40rem; }
  .hero__figure {
    position: absolute;
    top: calc((var(--header-h) + 5vw) * -1);
    right: calc((var(--gutter) + 3vw) * -1);
    z-index: 0;
    width: min(50vw, 740px);
    max-width: none;
    opacity: 0.9;
  }
  .hero__figure::after { inset: -16% -12% -20% -8%; }
}

@media (max-width: 59.99rem) {
  .hero__figure { max-width: 26rem; margin-block: calc(var(--space-4) * -1) calc(var(--space-3) * -1); }
  .hero__figure::after { inset: -20%; }
}

/* --- Bausteine der Buchseite -------------------------------------------- */
.feature__sub {
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fs-300);
}
p.feature__hook {
  margin-top: var(--space-2);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  line-height: 1.3;
  text-wrap: balance;
}
.work__meta + .feature__block { margin-top: var(--space-6); }
.feature__block .claims { margin-top: var(--space-2); }
.feature__block .facts { margin-top: var(--space-3); }

.page-head__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-3);
}

.mono { font-family: var(--font-mono); font-size: 0.94em; letter-spacing: 0.02em; }

/* --- Hinweisleiste -------------------------------------------------------
   Bewusst kein Einwilligungsdialog: Es gibt nichts einzuwilligen, weil nichts
   gespeichert und nichts geladen wird. Die Leiste informiert, blockiert den
   Inhalt nicht und verschwindet nach einer Bestätigung dauerhaft. Sie liegt
   fest am unteren Rand, verschiebt also kein Layout. */
.notice {
  position: fixed;
  inset: auto var(--gutter) var(--space-3);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: calc(var(--container-max) - 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.notice[hidden] { display: none; }
.notice__text {
  flex: 1 1 22rem;
  color: var(--text-dim);
  font-size: var(--fs-100);
  line-height: 1.6;
}
.notice__ok { flex: 0 0 auto; }

/* Fußraum, solange die Leiste steht. Die Zugabe liegt unter der Fußzeile und
   verschiebt nichts Sichtbares – sie verlängert nur den Scrollbereich. */
html[data-hinweis] .site-footer { padding-bottom: calc(var(--space-6) + 10rem); }
@media (min-width: 48rem) {
  html[data-hinweis] .site-footer { padding-bottom: calc(var(--space-6) + 6rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .notice {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .notice[data-sichtbar] { opacity: 1; transform: none; }
}