/* Opernplatz Consulting — „Frankfurter Kontor"
   Briefing §7: ruhige, papierähnliche Grundfläche, ein Akzentton sparsam,
   Serife trägt die Seite, Groteske nur für kleine Strukturelemente,
   genau ein bewusst gesetztes gestalterisches Element (§ Register „Passung").
   Keine Verläufe, keine Icons, keine Scroll-Animationen, keine Zähler. */

/* ---------- Schriften, lokal eingebunden (§8: kein Abruf von Google Fonts) ----------
   Statische Schnitte im Gewicht 400, latin-Subset. Bewusst nicht die variablen
   Fassungen: die Seite nutzt nur ein Gewicht, die Variablen kosteten 279 kB
   statt 47 kB — bei Ziel „Ladezeit unter einer Sekunde bei mobiler Verbindung"
   (§8) ist das der Unterschied.
   Lizenz: SIL Open Font License, siehe fonts/OFL-*.txt. */

@font-face {
  font-family: 'Spectral';
  src: url('fonts/spectral.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('fonts/spectral-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('fonts/spectral-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex';
  src: url('fonts/plex-sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex';
  src: url('fonts/plex-sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */

:root {
  --papier: #ece8dd;
  --papier-tief: #e3ded1;
  --tinte: #1b1f1a;
  --gedaempft: #615e54;
  --linie: #d3cdbd;
  /* Formularfelder sind Bedienelemente und brauchen 3:1 (WCAG 1.4.11) —
     die dekorative Haarlinie reicht dafuer nicht. */
  --feldlinie: #847b69;
  --akzent: #1f4433;

  /* Hoehe der klebenden Kopfzeile — Sprungziele rechnen damit */
  --kopf-hoehe: 5rem;

  --serif: 'Spectral', 'Iowan Old Style', 'Charter', 'Bitstream Charter',
    Georgia, 'Times New Roman', serif;
  --grotesk: 'Plex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --mass: 36rem;
  --rand: clamp(1.5rem, 6vw, 7.5rem);
  --takt: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- Grundlage ---------- */

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.26vw, 1.125rem);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Korn: gibt der Flaeche die Anmutung von Papier statt von Bildschirm.
   Kein Verlauf (§2 verbietet Verlaufsflaechen), sondern ein feines Rauschen,
   als Daten-URI eingebettet — kein zusaetzlicher Request. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--akzent);
  color: var(--papier);
}

h1,
h2,
h3 {
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--akzent);
}

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

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinte);
  color: var(--papier);
  padding: 0.75rem 1.25rem;
  font-family: var(--grotesk);
  font-size: 0.8125rem;
  z-index: 10;
}

.sprung:focus {
  left: 0;
}

/* ---------- Raster ---------- */

.bahn {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.mass {
  max-width: var(--mass);
}

main > section {
  padding-block: var(--takt);
}

/* Jeder Abschnitt beginnt mit einer Haarlinie — Rhythmus wie in einem
   gesetzten Dokument, nicht wie auf einer Seite aus lauter Textblöcken. */

main > section[id] {
  border-top: 1px solid var(--linie);
}

.nr {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  color: var(--akzent);
  margin-bottom: 1.25rem;
}

/* Ab 64rem wandern die Nummern in eine eigene Spalte am linken Rand.
   Das fuellt die leere rechte Haelfte nicht mit Dekoration, sondern gibt
   dem Satzspiegel eine zweite Achse. */

@media (min-width: 64rem) {
  main > section[id] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 3.5rem;
  }

  main > section[id] > * {
    grid-column: 2;
  }

  main > section[id] > .nr {
    grid-column: 1;
    grid-row: 1 / span 99;
    margin-bottom: 0;
    padding-top: 0.45rem;
  }
}

/* --- Bewegung beim Erscheinen. Zurueckhaltend: 14px Anhebung, einmalig.
       Abweichung vom Briefing §2 („keine Animationen beim Scrollen") auf
       ausdrueckliche Anweisung. Bei reduzierter Bewegung faellt sie weg. --- */

@media (prefers-reduced-motion: no-preference) {
  .regt[data-warte] {
    opacity: 0;
    transform: translateY(14px);
  }

  .regt {
    transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .positionen article[data-warte],
  .schritte li[data-warte],
  .register li[data-warte] {
    opacity: 0;
    transform: translateY(10px);
  }

  .positionen article,
  .schritte li,
  .register li {
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* ---------- Kopfzeile: Wortmarke, Reiter, Sprachumschalter (§3.1) ----------
   Klebt oben am Rand, bleibt aber still: Papiergrund, eine Haarlinie, sonst
   nichts. Bewusst keine Leiste mit Handlungsaufforderung — die verbietet §4. */

.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2.25rem);
  padding-block: clamp(0.85rem, 1.8vw, 1.15rem);
}

.wortmarke {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.15;
}

.wortmarke span {
  font-family: var(--grotesk);
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  color: var(--gedaempft);
  display: block;
  margin-top: 0.35em;
}

/* Reiter */

.reiter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reiter a {
  color: var(--gedaempft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35em;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.reiter a:hover,
.reiter a:focus-visible {
  color: var(--tinte);
  border-bottom-color: var(--akzent);
}

/* Kontakt-Knopf: laeuft beim Scrollen mit, auf jedem Format sichtbar.
   Abweichung vom Briefing §4 („keine Call-to-Action-Leisten") — ausdrueckliche
   Anforderung des Auftraggebers, bewusst als einzelner Knopf statt als Leiste. */

.kopf-knopf {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--akzent);
  border: 1.5px solid var(--akzent);
  padding: 0.6rem 1.15rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kopf-knopf:hover,
.kopf-knopf:focus-visible {
  background: var(--akzent);
  color: var(--papier);
}

/* Sprachumschalter — echte URLs, kein JavaScript-State (§5) */

.sprachen {
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gedaempft);
  white-space: nowrap;
  display: flex;
  gap: 0.45em;
}

.sprachen [aria-current] {
  color: var(--tinte);
}

.sprachen a {
  color: var(--gedaempft);
  text-decoration: none;
}

.sprachen a:hover {
  color: var(--tinte);
}

/* Unter 900px wandern die Reiter in eine eigene, seitlich schiebbare Zeile.
   Kein Hamburger-Menue: es versteckt genau die Orientierung, die der Leser
   in den ersten Sekunden braucht. */

@media (max-width: 56.25rem) {
  :root {
    --kopf-hoehe: 7rem;
  }

  .kopf-innen {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      'marke sprachen knopf'
      'reiter reiter reiter';
    row-gap: 0.7rem;
    column-gap: 0.85rem;
    padding-bottom: 0;
  }

  .wortmarke {
    grid-area: marke;
    font-size: 0.9375rem;
  }
  .sprachen {
    grid-area: sprachen;
  }
  .kopf-knopf {
    grid-area: knopf;
    padding: 0.5rem 0.85rem;
    font-size: 0.625rem;
  }

  /* Reiter schieben seitlich. Kein Hamburger-Menue: es versteckt genau die
     Orientierung, die der Leser in den ersten Sekunden braucht. */
  .reiter {
    grid-area: reiter;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.55rem;
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    gap: 1.35rem;
  }

  .reiter::-webkit-scrollbar {
    display: none;
  }
}

/* Anker duerfen nicht unter der klebenden Kopfzeile verschwinden */

main > section,
.bestaetigung {
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Einstieg (§3.2) ---------- */

.einstieg {
  padding-top: clamp(3.5rem, 12vw, 9.5rem);
}

.einordnung {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Aussenliniger Zwilling des Absende-Knopfs: dasselbe System, klar zweitrangig */
.marke {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--grotesk);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  padding: 0.9rem 2rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.marke:hover,
.marke:focus-visible {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--papier);
}

.einstieg h1 {
  font-size: clamp(2.25rem, 1.25rem + 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.026em;
  max-width: 19ch;
}

.einstieg .mass {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

.einstieg p + p {
  margin-top: 1.35em;
}

/* ---------- Abschnittsüberschriften ---------- */

main h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

section > h2 + .mass,
section > h2 + .positionen,
section > h2 + .schritte,
section > h2 + .register {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.leitsatz p + p {
  margin-top: 1.35em;
}

/* ---------- Leitspruch: das eine grosse Statement ----------
   Bricht die Textspalte auf und gibt dem Auge einen Halt. Bild durch Schrift
   — fuer dieses Publikum glaubwuerdiger als jedes Bild. */

.leitspruch {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  max-width: 18ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* Was wir nicht machen — Abgrenzung als Liste, ohne Symbole */

.keine {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  max-width: var(--mass);
  font-size: 0.96em;
}

.keine li {
  padding-block: 0.7em;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
}

.keine li:last-child {
  border-bottom: 1px solid var(--linie);
}

/* Aufwand — die Zahl als Vorteil, nicht als Kleingedrucktes */

.aufwand {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-left: 1.25rem;
  border-left: 1.5px solid var(--akzent);
  max-width: var(--mass);
}

.aufwand strong {
  font-weight: 700;
}

/* Ansprechpartner mit Bild */

.person {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
  max-width: 44rem;
}

.person img {
  width: 100%;
  max-width: 13rem;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.04);
}

.person-rolle {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.6em;
}

.person h3 {
  font-size: 1.25em;
  margin-bottom: 0.5em;
}

.person a {
  color: var(--akzent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (min-width: 40rem) {
  .person {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

/* ---------- Zielgruppen: wer, und mit welchem wirtschaftlichen Ziel ----------
   Zwei Spalten pro Zeile, Haarlinie dazwischen — liest sich wie eine Tabelle
   in einem Dokument, nicht wie drei Kacheln. */

.zielgruppen {
  margin: 0;
  display: grid;
  gap: 0;
  max-width: 44rem;
}

.zielgruppen > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 2rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--linie);
}

.zielgruppen > div:last-child {
  border-bottom: 1px solid var(--linie);
}

.zielgruppen dt {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  align-self: baseline;
}

.zielgruppen dd {
  margin: 0;
}

@media (min-width: 40rem) {
  .zielgruppen > div {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ---------- Leistungen (§3.4: Textblöcke, ausdrücklich keine Kacheln) ---------- */

.positionen {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.25rem);
  max-width: var(--mass);
}

.leistung-nr {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  color: var(--akzent);
  margin-bottom: 0.7em;
}

.leistung-frage {
  font-style: italic;
  color: var(--gedaempft);
  margin-bottom: 0.5em;
}

.positionen h3 {
  font-size: 1.1875em;
  margin-bottom: 0.3em;
}

/* ---------- Ablauf als Bahn (§3.5: vier Schritte) ----------
   Statt vier Textabsaetzen eine Zeitachse: vier Knoten auf einer Haarlinie,
   je mit Dauer. Der Leser sieht den Verlauf, statt ihn zu lesen. Gebaut aus
   Linien und Punkten — kein Bild, keine Icons (§2). */

.ablaufbahn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem 1.75rem;
}

.ablaufbahn li {
  position: relative;
  padding-left: 1.75rem;
}

/* Knoten */
.ablaufbahn li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--akzent);
}

/* Senkrechte Bahn zwischen den Knoten */
.ablaufbahn li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0.219rem;
  top: 1.1em;
  bottom: -2.5rem;
  width: 1px;
  background: var(--linie);
}

.ablaufbahn h3 {
  font-size: 1.0625em;
  font-style: italic;
  margin-bottom: 0.2em;
}

.schritt-dauer {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.55em;
}

/* Ab 52rem legt sich die Bahn waagerecht — vier Spalten, eine Linie */

@media (min-width: 52rem) {
  .ablaufbahn {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2rem;
    padding-top: 1.6rem;
    max-width: none;
  }

  .ablaufbahn li {
    padding-left: 0;
  }

  .ablaufbahn li::before {
    top: -1.6rem;
  }

  /* waagerechte Bahn, endet am letzten Knoten */
  .ablaufbahn li:not(:last-child)::after {
    left: 0.5rem;
    right: -2rem;
    top: -1.35rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ---------- Passung: DAS EINE gestalterische Element (§7) ----------
   Einzige Stelle der Seite mit Linienstruktur und Akzentfarbe.
   Begründung: Das Briefing schreibt diesem Abschnitt die gesamte
   Exklusivitätswirkung zu — also bekommt er das gestalterische Gewicht. */

.register {
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  border-top: 1.5px solid var(--akzent);
  border-bottom: 1.5px solid var(--akzent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
}

.register > div {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.register > div + div {
  border-left: 1px solid var(--linie);
  padding-left: clamp(1.75rem, 4vw, 3.5rem);
}

.register h3 {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 1.5em;
}

.register > div + div h3 {
  color: var(--gedaempft);
}

.register ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.96em;
}

.register li + li {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--linie);
}

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

  .register > div + div {
    border-left: 0;
    border-top: 1px solid var(--linie);
    padding-left: 0;
  }
}

/* ---------- Kontakt (§6) ---------- */

/* Der Ansprechpartner steht VOR dem Formular: wer sieht, mit wem er spricht,
   füllt eher aus. Als Textzeile, nicht als Symbolreihe (§4 schließt
   Social-Media-Icons aus). */

.ansprechpartner {
  margin-top: 1.5rem;
  font-family: var(--grotesk);
  font-size: 0.8125rem;
  color: var(--gedaempft);
}

.ansprechpartner a {
  color: var(--akzent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.ansprechpartner a:hover,
.ansprechpartner a:focus-visible {
  color: var(--tinte);
  text-decoration-thickness: 2px;
}

/* Nur für Vorleseprogramme, nicht sichtbar */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.formular {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 33rem;
  display: grid;
  gap: 1.75rem;
}

.feld {
  display: grid;
  gap: 0.45rem;
}

.feld > label,
.zustimmung span {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.feld > label .opt {
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
}

.feld input,
.feld textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--feldlinie);
  border-radius: 0;
  line-height: 1.45;
  padding: 0.3rem 0 0.55rem;
  width: 100%;
  transition: border-color 0.15s ease;
}

.feld textarea {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.55;
}

.feld input:hover,
.feld textarea:hover {
  border-bottom-color: var(--gedaempft);
}

.feld input:focus,
.feld textarea:focus {
  outline: 0;
  border-bottom-color: var(--akzent);
  border-bottom-width: 1.5px;
}

.feld[data-fehler] input,
.feld[data-fehler] textarea {
  border-bottom-color: var(--akzent);
}

.fehler {
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--akzent);
}

.fehler:empty {
  display: none;
}

/* Einwilligung — Checkbox, ausdrücklich nicht vorausgewählt (§6) */

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.zustimmung input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  border: 1px solid var(--feldlinie);
  border-radius: 0;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.zustimmung input::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: var(--akzent);
  transform: scale(0);
}

.zustimmung input:checked {
  border-color: var(--akzent);
}

.zustimmung input:checked::after {
  transform: scale(1);
}

.zustimmung span,
.zustimmung span label {
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gedaempft);
  line-height: 1.5;
}

.zustimmung[data-fehler] input {
  border-color: var(--akzent);
}

/* Honeypot — sichtbar für Bots, unsichtbar und untabbar für Menschen */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[type='submit'] {
  font-family: var(--grotesk);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--tinte);
  border: 1.5px solid var(--tinte);
  border-radius: 0;
  padding: 1rem 2.25rem;
  cursor: pointer;
  justify-self: start;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button[type='submit']:hover {
  background: var(--akzent);
  border-color: var(--akzent);
}

/* Bestätigung auf derselben Seite, keine Dankeseite (§6).
   Über :target statt JavaScript — erscheint damit auch bei abgeschaltetem JS. */

.bestaetigung {
  display: none;
  border-left: 1.5px solid var(--akzent);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--mass);
  scroll-margin-top: 2rem;
}

.bestaetigung:target {
  display: block;
}

/* ---------- Fußzeile (§3.8) ---------- */

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: var(--takt);
  padding-block: 2.5rem 4rem;
  font-family: var(--grotesk);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--gedaempft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.fuss nav {
  display: flex;
  gap: 0.5rem 1.75rem;
  flex-wrap: wrap;
}

/* Die Rechtsverweise muessen als Verweise erkennbar sein, nicht als grauer
   Text: Akzentfarbe, dauerhaft unterstrichen, Trefferflaeche mindestens 44px
   hoch (WCAG 2.5.8). Sie sind laut §9 Pflichtangaben — wer sie sucht, muss
   sie auf den ersten Blick sehen. */

.fuss a {
  color: var(--akzent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.fuss a:hover,
.fuss a:focus-visible {
  color: var(--tinte);
  text-decoration-thickness: 2px;
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  padding-block: clamp(2rem, 5vw, 4rem) var(--takt);
  max-width: 40rem;
}

.rechtstext h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rechtstext h2 {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  max-width: none;
}

.rechtstext p + p {
  margin-top: 0.7em;
}

.rechtstext .offen {
  border-left: 1.5px solid var(--akzent);
  padding-left: 1rem;
  color: var(--akzent);
  font-style: italic;
}

/* ---------- Bewegung nur, wenn erwünscht (§8) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Vorspann ----------
   Dunkle Buehne, ein Punkt, aus dem die Wortmarke nach links herauswaechst.
   Dann geht ein Vorhang aus waagerechten Lamellen auf: sie fahren abwechselnd
   nach links und rechts heraus und geben die helle Seite frei, waehrend die
   Wortmarke auf ihren Platz in der Kopfzeile schrumpft und ins Dunkle umfaerbt.

   Opernplatz — also ein Vorhang. Das ist der einzige Grund, warum diese
   Bewegung hier steht.

   Die Schicht ist standardmaessig aus und wird erst durch die Klasse `intro`
   sichtbar, die assets/intro.js setzt. Ohne JavaScript sieht der Leser sofort
   die fertige Seite — nichts haengt, nichts bleibt verdeckt.

   Abweichung vom Briefing §7/§8 (JavaScript nur fuer Sprache und Formular,
   „eher zu nuechtern als zu bemueht") — ausdrueckliche Anforderung des
   Auftraggebers. `prefers-reduced-motion` bleibt respektiert: dann laeuft
   ueberhaupt nichts. */

.intro-schicht {
  display: none;
}

.intro .intro-schicht {
  display: grid;
  /* Wortmarke sitzt im unteren Drittel, damit die Inschrift am Gebaeude
     frei bleibt — sie traegt das Bild. */
  align-content: end;
  justify-items: center;
  padding-bottom: clamp(3.5rem, 14vh, 10rem);
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}

.intro body {
  overflow: hidden;
}

/* Die echte Wortmarke in der Kopfzeile bleibt verborgen, solange der Vorspann
   laeuft — sonst stuenden zwei „Opernplatz" gleichzeitig da, waehrend das eine
   noch unterwegs ist. `visibility` statt `display`, damit die Position messbar
   bleibt: darauf faehrt das Lockup. Der Wechsel passiert in dem Augenblick, in
   dem die Schicht entfernt wird, und ist deckungsgleich. */

.intro:not(.uebergeben) .kopf .wortmarke {
  visibility: hidden;
}

/* Der Vorhang: deckt die Seite, faehrt zeilenweise auseinander */

.intro-lamellen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  overflow: hidden;
}

/* Der Vorhang traegt das Bild: jede Lamelle zeigt ihren Streifen davon.
   Groesse und Versatz setzt assets/intro.js in Pixeln — nur so bleibt das
   Seitenverhaeltnis erhalten. `background-attachment: fixed` waere die
   kuerzere Loesung, wird aber von iOS Safari nicht unterstuetzt, und die
   Seite wird laut Briefing §7 haeufig auf dem Telefon geoeffnet.

   Ohne Bild bleibt der Vorhang einfach dunkel — nichts bricht. */

.intro-lamellen span {
  background-color: var(--tinte);
  background-repeat: no-repeat;
  /* Innerer Schatten dunkelt das Bild ab, damit die Wortmarke traegt.
     Kein Verlauf (§2) — eine flaechige Abdunklung. */
  box-shadow: inset 0 0 0 9999px rgba(27, 31, 26, 0.66),
    0 1px 0 0 var(--tinte), 0 -1px 0 0 var(--tinte);
  transform-origin: top center;
  transform: scaleY(1);
  transition: transform 560ms cubic-bezier(0.5, 0, 0.25, 1);
}

/* Vorhang hoch: die unterste Lamelle zuerst, dann nach oben durch — wie im
   Theater, wo man zuerst die Buehne unten sieht. */

.intro-schicht.verschmilzt .intro-lamellen span {
  transform: scaleY(0);
}

.intro-lamellen span:nth-child(12) { transition-delay: 0ms; }
.intro-lamellen span:nth-child(11) { transition-delay: 48ms; }
.intro-lamellen span:nth-child(10) { transition-delay: 96ms; }
.intro-lamellen span:nth-child( 9) { transition-delay: 144ms; }
.intro-lamellen span:nth-child( 8) { transition-delay: 192ms; }
.intro-lamellen span:nth-child( 7) { transition-delay: 240ms; }
.intro-lamellen span:nth-child( 6) { transition-delay: 288ms; }
.intro-lamellen span:nth-child( 5) { transition-delay: 336ms; }
.intro-lamellen span:nth-child( 4) { transition-delay: 384ms; }
.intro-lamellen span:nth-child( 3) { transition-delay: 432ms; }
.intro-lamellen span:nth-child( 2) { transition-delay: 480ms; }
.intro-lamellen span:nth-child( 1) { transition-delay: 528ms; }

/* Die Wortmarke liegt ueber dem Vorhang */

.intro-marke {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: left;
  color: var(--papier);
  will-change: transform;
}

.intro-zeile {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 8.5vw, 4.75rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

/* Das Wort waechst vom Punkt aus nach links heraus */
.intro-wort {
  display: inline-block;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 880ms cubic-bezier(0.22, 0.7, 0.2, 1) 520ms;
}

.intro-punkt {
  display: inline-block;
  color: var(--akzent);
  opacity: 0;
  transform: scale(0.25);
  transition: opacity 420ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.intro-unter {
  display: block;
  font-family: var(--grotesk);
  font-size: clamp(0.5rem, 1.5vw, 0.75rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8d8a7c;
  margin-top: 0.55em;
  opacity: 0;
  transition: opacity 500ms ease 1450ms;
}

.intro-schicht.laeuft .intro-punkt {
  opacity: 1;
  transform: none;
}

.intro-schicht.laeuft .intro-wort {
  clip-path: inset(0 0 0 0);
}

.intro-schicht.laeuft .intro-unter {
  opacity: 1;
}

/* Vorhang auf: schrumpfen, umfaerben, verschwinden — alles in einer Bewegung */

/* Keine Farb-Interpolation: der Zwischenton (helles Grau) stuende kurz auf
   hellem Grund und faellt mit 2:1 durch die Kontrastpruefung. Die Wortmarke
   landet oben in der Kopfzeile — und die oberste Lamelle geht zuletzt auf,
   also liegt sie bis zuletzt auf Dunkel. Der Wechsel auf die echte, dunkle
   Wortmarke passiert deshalb hart, in dem Moment, in dem die Schicht faellt. */

.intro-schicht.verschmilzt .intro-marke {
  transition: transform 700ms cubic-bezier(0.55, 0, 0.2, 1) 60ms;
}

/* Abloesen: das Lockup blendet ab, WAEHREND die oberste Lamelle noch deckt.
   Danach steht dort die echte, dunkle Wortmarke — sie wird erst sichtbar,
   wenn der Vorhang auch oben faellt. So entsteht kein einziges Bild mit
   hellem Text auf hellem Grund. */

.intro-schicht.abloesen .intro-marke {
  opacity: 0;
  transition: opacity 140ms ease;
}

.intro-schicht.verschmilzt .intro-punkt,
.intro-schicht.verschmilzt .intro-unter {
  opacity: 0;
  transition: opacity 260ms ease;
}

.intro-schicht.weg {
  pointer-events: none;
}

/* ---------- Druck ----------
   Diese Leser drucken und leiten weiter. Das Blatt soll dann aussehen wie ein
   Dokument, nicht wie eine abfotografierte Website. */

@media print {
  :root {
    --papier: #fff;
    --tinte: #000;
    --gedaempft: #444;
    --linie: #999;
    --akzent: #000;
  }

  body::before,
  .intro-schicht,
  .kopf-knopf,
  .reiter,
  .sprachen,
  .marke,
  .formular,
  .bestaetigung,
  .sprung {
    display: none !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .kopf {
    position: static;
    border-bottom: 1pt solid #000;
  }

  .bahn {
    max-width: none;
    padding-inline: 0;
  }

  main > section {
    padding-block: 18pt;
    break-inside: avoid;
  }

  main > section[id] {
    display: block;
  }

  h1 {
    font-size: 22pt;
  }

  main h2 {
    font-size: 13pt;
  }

  .register {
    break-inside: avoid;
  }

  /* Erscheinungs-Bewegung darf im Druck nichts verstecken */
  .regt[data-warte],
  .positionen article[data-warte],
  .schritte li[data-warte],
  .register li[data-warte] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Kontaktweg im Druck als Text statt als Formular */
  #kontakt::after {
    content: 'Anfragen über opernplatz-consulting.de';
    font-family: var(--grotesk);
    font-size: 9pt;
    letter-spacing: 0.08em;
  }
}