/* ============================================================
   Romy — Base
   ============================================================ */

/* --- Schriften ---------------------------------------------------------- */

/* Selbst ausgeliefert aus assets/fonts/, kein Aufruf an fonts.googleapis.com
   oder fonts.gstatic.com. Beide Familien sind Variable Fonts: Fraunces mit
   opsz 9–144, wght 100–900, SOFT 0–100 und WONK 0–1, jeweils aufrecht und
   kursiv; Hanken Grotesk mit wght 100–900, ebenfalls beide Schnitte.
   Getrennt nach latin und latin-ext, damit Browser den erweiterten
   Zeichensatz nur laden, wenn er auf der Seite vorkommt. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design Tokens ------------------------------------------------------ */

:root {
  /* Farben */
  --papier: #FAF5EC;
  --honey: #E19B3C;
  --espresso: #3B2408;

  /* Fonts */
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Abstufungen von Espresso — keine eigenständigen Farben */
  --espresso-muted: color-mix(in srgb, var(--espresso) 72%, transparent);
  --espresso-line: color-mix(in srgb, var(--espresso) 10%, transparent);
  --espresso-hover: color-mix(in srgb, var(--espresso) 6%, transparent);

  /* Abstufungen von Papier — für Text auf dunkler Fläche */
  --papier-muted: color-mix(in srgb, var(--papier) 75%, transparent);
  --papier-line: color-mix(in srgb, var(--papier) 18%, transparent);

  /* Ebenen: zurückgesetzt / Grundfläche / erhöht */
  --papier-tief: color-mix(in srgb, var(--espresso) 3%, var(--papier));
  --papier-hoch: color-mix(in srgb, #fff 45%, var(--papier));

  /* Haarlinie — halbe Deckkraft von --espresso-line */
  --espresso-haarlinie: color-mix(in srgb, var(--espresso) 5%, transparent);

  /* warme Fläche: Espresso-Beimischung wirkt hier grau, Honey hält sie im Ton */
  --papier-honey: color-mix(in srgb, var(--honey) 10%, var(--papier));
  --honey-haarlinie: color-mix(in srgb, var(--honey) 22%, transparent);

  /* Warme Schatten — Schattenfarbe immer aus Espresso, nie aus Schwarz */
  --schatten-weich:
    0 1px 2px color-mix(in srgb, var(--espresso) 5%, transparent),
    0 4px 10px color-mix(in srgb, var(--espresso) 5%, transparent),
    0 12px 28px color-mix(in srgb, var(--espresso) 4%, transparent);

  --schatten-tief:
    0 2px 4px color-mix(in srgb, var(--espresso) 6%, transparent),
    0 10px 22px color-mix(in srgb, var(--espresso) 8%, transparent),
    0 28px 56px color-mix(in srgb, var(--espresso) 8%, transparent);

  /* Zwischenstufe für die helle Panel-Seite. Deckkraft je Ebene auf halbem
     Weg zwischen --schatten-weich und --schatten-espresso (5/5/4 → 10/14/12),
     die äußere Ebene übernimmt aber Versatz und Unschärfe der Espresso-Seite:
     die Geometrie bestimmt, wo der Schatten endet, die Deckkraft nur, wie
     schwer er wirkt. Halbe Werte in beidem hätten die Kante 15px zu früh
     auslaufen lassen. */
  --schatten-panel:
    0 2px 4px color-mix(in srgb, var(--espresso) 8%, transparent),
    0 6px 16px color-mix(in srgb, var(--espresso) 10%, transparent),
    0 16px 44px color-mix(in srgb, var(--espresso) 8%, transparent);
  /* Versatz bewusst nah an --schatten-weich, sonst scheint die dunkle
     Seite tiefer zu enden als die helle daneben */
  --schatten-espresso:
    0 2px 6px color-mix(in srgb, var(--espresso) 10%, transparent),
    0 8px 22px color-mix(in srgb, var(--espresso) 14%, transparent),
    0 16px 44px color-mix(in srgb, var(--espresso) 12%, transparent);

  /* Layout */
  --container-max: 1100px;
  --container-padding: 1.5rem;
  --header-h: 4.5rem;
  /* Mindestgröße für Tap-Targets */
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.2, 0.6, 0.2, 1);
  --reveal-dauer: 0.6s;
}

/* --- Reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* opsz folgt der Schriftgröße, sofern nicht explizit gesetzt */
  font-optical-sizing: auto;
}

body {
  min-height: 100vh;
  /* fängt den 100vw-Überhang der Full-Bleed-Flächen ab (clip, damit
     position: sticky in der Kopfzeile weiter funktioniert) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Basis-Typografie --------------------------------------------------- */

body {
  background-color: var(--papier);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  hanging-punctuation: first allow-end;
}

/* Fließtext: minimal geöffnet, damit Hanken Grotesk klein nicht zuläuft */
p {
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 7.5vw, 6.5rem);
}

h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* --- Layout ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Nur für Screenreader */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Randlos über die volle Fensterbreite, unabhängig vom Body-Padding */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Sprungziele unter der sticky Kopfzeile freihalten */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* --- Einblenden beim Scrollen ------------------------------------------- */

/* Startzustand hängt an .js — ohne Skript ist die Seite vollständig sichtbar.
   Bewegt wird die translate-Eigenschaft, nicht transform: so behalten
   Elemente mit eigenem transform (Karten-Hover) ihre Bewegung unabhängig. */
.js .reveal {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity var(--reveal-dauer) var(--ease-reveal) var(--reveal-delay, 0s),
    translate var(--reveal-dauer) var(--ease-reveal) var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* Karten haben eine eigene Transition — hier zusammengeführt, sonst
   überschreibt die Kurzschreibweise oben den Hover-Übergang. */
.js .card.reveal {
  transition:
    opacity var(--reveal-dauer) var(--ease-reveal) var(--reveal-delay, 0s),
    translate var(--reveal-dauer) var(--ease-reveal) var(--reveal-delay, 0s),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

/* Staffelung: 60ms pro Element, als Variable am Element statt per Timeout */
.card-grid > .reveal:nth-child(2),
.steps > .reveal:nth-child(2),
.saeulen > .reveal:nth-child(2) { --reveal-delay: 60ms; }

.card-grid > .reveal:nth-child(3),
.steps > .reveal:nth-child(3),
.saeulen > .reveal:nth-child(3) { --reveal-delay: 120ms; }

.card-grid > .reveal:nth-child(4) { --reveal-delay: 180ms; }
.card-grid > .reveal:nth-child(5) { --reveal-delay: 240ms; }
.card-grid > .reveal:nth-child(6) { --reveal-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .card.reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* --- Papierkorn --------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='korn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23korn)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn--primary {
  background-color: var(--honey);
  color: var(--papier);
}

.btn--primary:hover {
  background-color: color-mix(in srgb, var(--honey) 88%, var(--espresso));
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--honey) 28%, transparent),
    0 10px 28px color-mix(in srgb, var(--honey) 20%, transparent);
}

/* Honey-Button auf Espresso-Fläche */
.btn--on-espresso {
  color: var(--espresso);
}

.btn--on-espresso:hover {
  background-color: color-mix(in srgb, var(--honey) 85%, var(--papier));
}

.btn--on-espresso:focus-visible {
  outline-color: var(--papier);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--espresso);
  color: var(--espresso);
}

.btn--secondary:hover {
  background-color: var(--espresso-hover);
}

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--papier) 78%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  /* Linie erscheint erst beim Scrollen, Klasse setzt das Skript */
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--espresso-line);
}

/* Zweiter Zustand: Leiste steht über einer Espresso-Fläche */
.site-header.is-over-dark {
  background-color: color-mix(in srgb, var(--espresso) 78%, transparent);
  color: var(--papier);
}

.site-header.is-over-dark.is-scrolled {
  border-bottom-color: var(--papier-line);
}

.site-header.is-over-dark .wordmark:focus-visible,
.site-header.is-over-dark .site-nav__link:focus-visible {
  outline-color: var(--papier);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}

.site-nav__link:hover {
  opacity: 0.65;
}

.wordmark:focus-visible,
.site-nav__link:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(7.5rem, 14vw, 11rem);
}

@media (min-width: 64rem) {
  /* zweispaltig ist die Hero von sich aus hoch genug */
  .hero {
    padding-block: clamp(4rem, 7vw, 6rem);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 52fr 48fr;
    gap: 4rem;
    align-items: center;
  }
}

.hero__title {
  max-width: 18ch;
  /* fängt lange Komposita auf schmalen Displays ab */
  hyphens: auto;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  /* opsz ans Display-Ende, SOFT auf 0 für scharfe Kanten */
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Ab Tablet ohne Trennstrich; 17ch erzwingt den Umbruch nach "Recruiter-Stelle".
   Gemessen aus den Fraunces-Metriken (wght 600, Tracking -0.03em):
   Zeile 1 = 9.89em = 16.1ch, Zeile 1 + "als" = 11.02em = 18.0ch. */
@media (min-width: 48rem) {
  .hero__title {
    max-width: 17ch;
    hyphens: none;
    /* balance würde am Bindestrich in "Recruiter-Stelle" umbrechen */
    text-wrap: wrap;
  }
}

/* Ab Desktop steht die Headline in der 52%-Spalte, rund 474–514px breit.
   Dreizeiliger Umbruch: "Eine ganze" / "Recruiter-Stelle" / "als KI-Kollegin."
   Gemessen: 3.96em / 5.79em / 5.62em. Für diesen Umbruch muss die Breite
   über 5.79em (längste Zeile) und unter 7.30em ("Eine ganze Recruiter-")
   liegen — 10.5ch entspricht 6.44em und trifft die Mitte. */
@media (min-width: 64rem) {
  .hero__title {
    max-width: 10.5ch;
    font-size: clamp(3rem, 4.75vw, 4.5rem);
  }
}

/* Einziger kursiver Akzent der Seite.
   Ohne WONK: die Achse arbeitet in Fraunces nicht über Konturvarianten,
   sondern über eine Glyphenersetzung, und die betrifft nur b d h k l v w &
   im Kursiven (h m n s & ñ im Aufrechten). "ganze" enthält keinen davon —
   die Achse hätte hier keine Wirkung. Den Akzent trägt der Kursivschnitt. */
.akzent {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 0;
}

.hero__subline {
  max-width: 60ch;
  margin-top: 1.75rem;
  color: var(--espresso-muted);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}

.hero__note {
  margin-top: 2rem;
  color: var(--espresso-muted);
  font-size: 0.9375rem;
}

/* --- Produktansicht (Hero) ---------------------------------------------- */

.ansicht {
  margin-top: 4rem;
}

@media (min-width: 64rem) {
  .ansicht {
    margin-top: 0;
  }
}

.ansicht__label {
  margin-bottom: 0.75rem;
  color: var(--espresso-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.fenster {
  display: flex;
  flex-direction: column;
  height: 30rem;
  overflow: hidden;
  background-color: var(--papier-hoch);
  border: 1px solid var(--espresso-haarlinie);
  border-radius: 18px;
  box-shadow: var(--schatten-tief);
  /* Bezugsgröße für den gesamten Fensterinhalt */
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Einspaltig ist das Fenster schmaler, die Nachrichten brauchen mehr Zeilen
   und der letzte Beitrag — die Pointe des Verlaufs — fiel unter die Kante.
   Vier zusätzliche rem statt kleinerer Schrift: das Fenster ist ohnehin klein. */
@media (max-width: 63.9375rem) {
  .fenster {
    height: 34rem;
  }
}

@media (min-width: 64rem) {
  .fenster {
    height: 32rem;
  }
}

/* Kopfleiste */
.fenster__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex: none;
  padding: 0.9em 1.15em;
  border-bottom: 1px solid var(--espresso-line);
}

.fenster__marke {
  font-family: var(--font-headline);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.fenster__kontext {
  color: var(--espresso-muted);
  font-size: 0.78em;
  text-align: right;
}

/* Verlauf — feste Höhe, unten abgeschnitten */
.fenster__verlauf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15em;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1.15em;
}

.nachricht--nutzer {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.7em 0.95em;
  background-color: var(--papier-honey);
  border: 1px solid var(--honey-haarlinie);
  border-radius: 14px 14px 4px 14px;
  text-align: left;
}

.nachricht--romy {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  max-width: 100%;
}

.nachricht__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.85em;
  height: 1.85em;
  margin-top: 0.1em;
  background-color: var(--honey);
  border-radius: 50%;
  color: var(--papier);
  font-family: var(--font-headline);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1;
}

/* verhindert, dass der Textblock breiter wird als der Platz neben dem Feld */
.nachricht__inhalt {
  min-width: 0;
}

/* Ergebnisliste innerhalb der Romy-Nachricht */
.treffer {
  margin-top: 0.9em;
  list-style: none;
  padding: 0;
}

.treffer li {
  padding-block: 0.6em;
  border-top: 1px solid var(--espresso-haarlinie);
}

.treffer li:last-child {
  padding-bottom: 0;
}

.treffer__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.treffer__name {
  font-weight: 600;
}

.treffer__score {
  color: var(--honey);
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.treffer__notiz {
  margin-top: 0.1em;
  color: var(--espresso-muted);
  font-size: 0.86em;
}

/* Eingabezeile — rein optisch, nichts ist fokussierbar */
.fenster__eingabe {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex: none;
  padding: 0.8em 1.15em;
  border-top: 1px solid var(--espresso-haarlinie);
}

.fenster__feld {
  flex: 1;
  min-width: 0;
  padding: 0.55em 0.9em;
  background-color: var(--papier-tief);
  border-radius: 999px;
  color: var(--espresso-muted);
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fenster__senden {
  flex: none;
  padding: 0.55em 1.1em;
  background-color: var(--honey);
  border-radius: 999px;
  color: var(--papier);
  font-size: 0.85em;
  font-weight: 600;
}

/* --- Dokumentenblatt (Das Ergebnis) ------------------------------------- */

/* Umgekehrt zu den übrigen Sektionsköpfen: Ansicht links, Text rechts.
   Im Markup steht der Text zuerst, damit er mobil oben landet. */
@media (min-width: 64rem) {
  .ergebnis {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 4rem;
    align-items: center;
  }

  .ergebnis__ansicht {
    grid-column: 1;
    grid-row: 1;
  }

  .ergebnis__text {
    grid-column: 2;
    grid-row: 1;
  }

}

/* Bezugsrahmen für die cqi-Schriftgröße des Blatts: 1cqi = 1% der
   Blattbreite. Gilt in beiden Layouts, deshalb außerhalb der Media Query. */
.ergebnis__ansicht {
  container-type: inline-size;
}

.ergebnis__text .section__lead {
  max-width: 55ch;
}

.blatt {
  /* Spaltenfluss, damit die Fußzeile per margin-top: auto an die Unterkante
     rückt. Kein Element darf schrumpfen — sonst quetscht der Flexalgorithmus
     die Textblöcke, statt den Überhang unten sauber abzuschneiden. */
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.3;
  overflow: hidden;
  padding: 2.2em;
  background-color: var(--papier-hoch);
  /* auf der hellen Fläche trägt --espresso-haarlinie die Kante nicht mehr,
     deshalb hier die doppelte Deckkraft */
  border: 1px solid var(--espresso-line);
  /* fast rechtwinklig: soll wie Papier lesen, nicht wie ein Interface */
  border-radius: 4px;
  box-shadow: var(--schatten-tief);
  /* Bezugsgröße für den gesamten Blattinhalt */
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Zweispaltig folgt die Blatthöhe über aspect-ratio der Spaltenbreite, der
   Inhalt aber nicht: bei 1024px Viewport ist das Blatt 410px breit, ab 1148px
   445px. Eine feste Bezugsgröße läuft am schmalen Ende über. cqi bindet die
   Schrift an die Blattbreite, damit der Füllgrad konstant bleibt —
   2.8cqi ergibt 11,5px (410px) bis 12,5px (445px). Muss nach der Basisregel
   stehen, gleiche Spezifität. */
@media (min-width: 64rem) {
  .blatt {
    font-size: 2.8cqi;
  }
}

/* Einspaltig ist das Blatt so breit wie der Container: bei 375px Viewport
   327px breit und damit nur 425px hoch. Der Block "Einschätzung" entfällt
   hier — Seitenverhältnis und Fußzeile bleiben unangetastet. Die Bezugsgröße
   folgt wie zweispaltig der Blattbreite, gedeckelt auf 0.875rem: fest wäre
   sie am schmalen Ende zu groß und am breiten zu klein. */
@media (max-width: 63.9375rem) {
  /* 3.2 statt 3.6: die Kenntnisse-Pillen bleiben jetzt sichtbar und brauchen
     ihre Höhe. Darüber kippen sie auf zwei Reihen und das Blatt läuft über —
     die Grenze liegt zwischen 3.21 und 3.23, deshalb hier Abstand davon. */
  .blatt {
    font-size: min(3.2cqi, 0.875rem);
  }

  .blatt__einschaetzung {
    display: none;
  }
}

/* Überschrift und Inhalt eines Blattabschnitts liegen in einem Element.
   Vorher trugen h4 und ul dieselbe Klasse und wurden einzeln geschaltet —
   .pillen { display: flex } stand später bei gleicher Spezifität und hat das
   Ausblenden der Liste überstimmt, während die Überschrift verschwand. Über
   einen gemeinsamen Elternknoten kann der Zustand nicht mehr auseinanderlaufen,
   unabhängig von der Reihenfolge der Regeln. Der Block selbst braucht keine
   eigenen Werte — als Flex-Element trägt er die Ränder seiner Kinder innen. */

.blatt > * {
  flex: none;
}

.blatt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--espresso-haarlinie);
}

.blatt__firma {
  font-family: var(--font-headline);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.blatt__vermerk {
  color: var(--espresso-muted);
  font-size: 0.8em;
  text-align: right;
  white-space: nowrap;
}

.blatt__titel {
  margin-top: 1.6em;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.blatt__person {
  margin-top: 0.35em;
  color: var(--espresso-muted);
  font-size: 0.86em;
}

/* Datenraster: Label links, Wert rechtsbündig, Zeilen durch Haarlinien */
.blatt__daten {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 1.6em;
  font-size: 0.9em;
}

.blatt__daten dt,
.blatt__daten dd {
  padding-block: 0.55em;
  border-top: 1px solid var(--espresso-haarlinie);
}

.blatt__daten dt:first-of-type,
.blatt__daten dd:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.blatt__daten dt {
  color: var(--espresso-muted);
  padding-right: 1.5em;
}

.blatt__daten dd {
  text-align: right;
}

.blatt__zwischen {
  margin-top: 1.6em;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.blatt__text {
  margin-top: 0.5em;
  font-size: 0.9em;
  line-height: 1.55;
}

.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  margin-top: 0.75em;
  padding: 0;
  list-style: none;
}

.pillen li {
  padding: 0.35em 0.8em;
  background-color: var(--papier-tief);
  border: 1px solid var(--espresso-haarlinie);
  border-radius: 999px;
  font-size: 0.82em;
  white-space: nowrap;
}

/* Fußzeile: margin-top: auto schiebt sie an die Blattunterkante, der
   Zwischenraum darüber bleibt damit variabel statt fest gesetzt. */
.blatt__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-top: auto;
  padding-top: 0.9em;
  border-top: 1px solid var(--espresso-haarlinie);
  color: var(--espresso-muted);
  font-size: 0.78em;
}

.blatt__fuss span:last-child {
  white-space: nowrap;
}

/* --- Sections ----------------------------------------------------------- */

.section {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

/* Zurückgesetzte Ebene — erzeugt die Kante zur Papier-Section darüber */
.section--tief {
  background-color: var(--papier-tief);
}

.overline {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--honey);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.overline::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background-color: var(--honey);
  /* optischer Ausgleich: mittig auf die Versalhöhe, nicht auf die Zeilenmitte */
  margin-top: -0.08em;
}

.section__title {
  max-width: 24ch;
  margin-top: 1.25rem;
  /* Untergrenze von 2.25rem auf 2.125rem: bei 375px braucht die längste Zeile
     sonst mehr Platz, als das neue Rechtsmaß hergibt, und der Umbruch kippt. */
  font-size: clamp(2.125rem, 4.5vw, 3.5rem);
  font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 10, "WONK" 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Ab Desktop zweispaltig: links Overline + H2, rechts der Vorspann.
   Darunter laufen Grid, Panels und Schritte weiter über die volle Breite. */
@media (min-width: 64rem) {
  .section__head {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 0 3.5rem;
    /* Rückfall, falls "last baseline" nicht unterstützt wird */
    align-items: end;
    align-items: last baseline;
  }

  .section__head .section__lead {
    margin-top: 0;
  }
}

/* --- Überschriften einspaltig ------------------------------------------- */

/* Einspaltig sind die ch-Obergrenzen wirkungslos — sie liegen weit über der
   Containerbreite, die Überschriften laufen bis auf wenige Pixel an den
   Innenrand. Ein prozentuales Maß hält an jeder Überschrift dieselbe Luft
   rechts frei, unabhängig von Schriftgrad und Textlänge. */
@media (max-width: 63.9375rem) {
  .hero__title,
  .section__title,
  .band__title,
  .cta__title {
    max-width: calc(100% - 1.5rem);
  }

  /* Engeres Maß, wo der Umbruch an einer Satzgrenze fallen muss statt
     dort, wo die Zeilen zufällig gleich lang werden. */
  .section__title--schmal {
    max-width: min(calc(100% - 1.5rem), 17rem);
  }

  /* balance gleicht Zeilenlängen an und zerschneidet dabei den ersten Satz:
     "Ein Lebenslauf / rein. Das hier raus." ist gleichmäßiger als
     "Ein Lebenslauf rein. / Das hier raus.", aber sinnlos. pretty füllt
     zeilenweise und trifft die Satzgrenze. */
  .section__title--satzweise {
    text-wrap: pretty;
  }
}

/* Zweispaltig gilt dieselbe Logik, nur mit anderem Maß. Kein rem-Wert trifft:
   der Schriftgrad springt zwischen 1024px (46px) und 1244px (56px), ein festes
   Maß passt immer nur für einen der beiden. ch skaliert mit — der Bereich, in
   dem der Umbruch an der Satzgrenze fällt, liegt zwischen 12ch und 14.5ch. */
@media (min-width: 64rem) {
  .section__title--satzweise {
    max-width: 13ch;
    text-wrap: pretty;
  }
}

.section__lead {
  max-width: 60ch;
  margin-top: 1.5rem;
  color: var(--espresso-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Karten-Grid -------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3.5rem;
}

@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  /* Höhe kommt aus align-items: stretch des Grids, nicht aus height: 100% —
     sonst greift margin-top: auto im Kartenfuß nicht zuverlässig */
  padding: 1.75rem;
  background-color: var(--papier-hoch);
  border: 1px solid var(--espresso-haarlinie);
  border-radius: 18px;
  box-shadow: var(--schatten-weich);
  transition:
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.card:hover {
  border-color: color-mix(in srgb, var(--espresso) 12%, transparent);
  box-shadow: var(--schatten-tief);
  transform: translateY(-3px);
}

.card__nr {
  margin-bottom: 0.75rem;
  color: var(--honey);
  font-size: 0.75rem;
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.08em;
  line-height: 1;
}

.card__title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card__io {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.625rem;
  /* schiebt das Paar an den unteren Kartenrand, die Luft liegt dazwischen */
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.card__io dt {
  color: var(--honey);
  font-weight: 600;
  white-space: nowrap;
}

.card__io dd {
  color: var(--espresso);
  text-wrap: pretty;
}

/* --- Zwei-Spalten-Block (Arbeitsteilung) -------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3.5rem;
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: repeat(2, 1fr);
  }
}

.panel {
  /* kein height: 100% — eine definite Höhe hebelt align-items: stretch aus */
  padding: 2.25rem;
  border: 1px solid transparent;
  border-radius: 20px;
}

.panel--dark {
  background-color: var(--espresso);
  color: var(--papier);
  box-shadow: var(--schatten-espresso);
}

.panel--light {
  background-color: var(--papier-hoch);
  border-color: var(--espresso-haarlinie);
  box-shadow: var(--schatten-panel);
}

.panel__title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel__list {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.panel__list li {
  padding-block: 0.875rem;
  text-wrap: pretty;
}

.panel__list li + li {
  border-top: 1px solid var(--espresso-line);
}

.panel--dark .panel__list li + li {
  border-top-color: var(--papier-line);
}

.panel__list li:first-child {
  padding-top: 0;
}

.panel__list li:last-child {
  padding-bottom: 0;
}

/* --- Schritte (So starten Sie) ------------------------------------------ */

.steps {
  --steps-gap: 2.5rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem var(--steps-gap);
  margin-top: 3.5rem;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step__num {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--honey);
  font-family: var(--font-headline);
  font-size: clamp(3.5rem, 6vw, 4.5rem);
  /* gesetzte Ziffern: Display-opsz, Versalziffern, feste Dickte */
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 0, "WONK" 0;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Durchlaufende Linie auf Höhe der Ziffern, nur zwischen den Schritten */
@media (min-width: 48rem) {
  .step:not(:last-child) .step__num::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-right: calc(-1 * var(--steps-gap));
    background-color: var(--espresso-line);
  }

  /* Linie zeichnet sich von links nach rechts, gemeinsam mit ihrem Schritt */
  .js .step.reveal:not(:last-child) .step__num::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--reveal-dauer) var(--ease-reveal) var(--reveal-delay, 0s);
  }

  .js .step.reveal.is-visible .step__num::after {
    transform: scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .js .step.reveal:not(:last-child) .step__num::after {
      transform: none;
      transition: none;
    }
  }
}

.step__title {
  margin-top: 1.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step__text {
  max-width: 34ch;
  margin-top: 0.75rem;
  color: var(--espresso-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Datenschutz-Band --------------------------------------------------- */

/* Knapper als eine Section: rund die Hälfte des Innenabstands, kein Vorspann,
   keine Ansicht. Soll als Band zwischen den Sections lesen, nicht als eigene
   Station. Fläche kommt über .section--tief, damit die Alternation hält. */
.band {
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
}

/* Eine Stufe unter .section__title: kleinerer Bereich, weniger optische
   Größe, entsprechend niedrigeres opsz. */
.band__title {
  max-width: 30ch;
  margin-top: 1.25rem;
  /* Untergrenze gesenkt, damit "Sie geben uns Bewerberdaten." bei 375px als
     ganzer Satz auf die erste Zeile passt statt auf zwei zu zerfallen */
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-variation-settings: "opsz" 96, "wght" 600, "SOFT" 10, "WONK" 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.saeulen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.75rem;
}

@media (min-width: 48rem) {
  .saeulen {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* Kurze Honey-Linie über dem Titel, gleiche Maße wie an der Overline.
   Trägt die Gliederung allein — keine Karte, kein Rahmen, keine Fläche. */
.saeule::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background-color: var(--honey);
}

/* Eine Stufe unter Karten-, Panel- und Schritt-Titeln (alle 1.375rem), aber
   über dem 1.125rem Fließtext — bei 1.125rem wäre der Titel exakt so groß
   wie sein Text und die Hierarchie hinge allein an Schnitt und Farbe. */
.saeule__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.saeule__text {
  max-width: 34ch;
  margin-top: 0.625rem;
  color: var(--espresso-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Abschluss-CTA ------------------------------------------------------ */

.cta {
  --cta-luft: clamp(6rem, 17vw, 13rem);

  /* Oben schließt die Overline mit line-height 1 bündig ab, unten der Button
     mit seiner eigenen Kante — beide Seiten tragen keine halbe Zeilenschaltung
     mit, der Abstand ist deshalb auf beiden Seiten derselbe Wert. */
  padding-block: var(--cta-luft);
  background-color: var(--espresso);
  color: var(--papier);
  text-align: center;
}

/* Overline ist ein Flex-Container — text-align zentriert sie nicht */
.cta .overline {
  justify-content: center;
}

.cta__title {
  max-width: 20ch;
  margin-top: 1.25rem;
  margin-inline: auto;
  /* gleiche Untergrenze wie .section__title — beide sind dieselbe Stufe */
  font-size: clamp(2.125rem, 4.5vw, 3.5rem);
  font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 10, "WONK" 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.cta__lead {
  max-width: 55ch;
  margin-top: 1.5rem;
  margin-inline: auto;
  color: var(--papier-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Flex statt inline-flex im Textfluss: die Zeilenbox um den Button herum würde
   sonst je nach Schriftmetrik unten ein paar Pixel Unterlänge mittragen und den
   Ausgleich zur Oberkante wieder verziehen. */
.cta__actions {
  display: flex;
  justify-content: center;
  margin-top: 2.75rem;
}

/* Das display: flex oben schlägt das [hidden] des Browsers — ohne diese
   Regel bliebe der Button nach dem Klick stehen. */
.cta__actions[hidden] {
  display: none;
}

/* Der Satz zur Datenübermittlung steht unter dem Button, nicht daneben:
   er gehört zur Entscheidung, nicht zur Handlung. */
.cta__hinweis {
  max-width: 44ch;
  margin-top: 1rem;
  margin-inline: auto;
  color: var(--papier-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Kalender (Zwei-Klick) ---------------------------------------------- */

/* Der Behälter trägt weder Fläche noch Rahmen. Zwei Gründe: Cal.com folgt
   der Systemeinstellung des Besuchers und liefert den iframe mal hell, mal
   dunkel — jede feste Füllung wäre in einem der beiden Fälle falsch. Und der
   Kalender bringt seine eigene gerundete Kante mit; ein zweiter Rahmen davor
   ergäbe einen doppelten Rand. Hier steht deshalb nur Maß und Platzhalter. */
.kalender {
  max-width: 60rem;
  /* dieselbe Luft, die vorher der Button hatte — der Abschnitt behält
     seinen Rhythmus, wenn das eine das andere ersetzt */
  margin-top: 2.75rem;
  margin-inline: auto;
  /* Reserviert die Höhe der Monatsansicht, bevor Cal.com antwortet. Ohne
     sie klappt der Abschnitt zweimal auf: einmal beim Einblenden des
     leeren Behälters, einmal wenn der iframe seine Höhe meldet. Gemessen
     an der fertigen Einbettung, eine Winzigkeit darüber. */
  min-height: 30rem;
  overflow: hidden;
  /* die CTA zentriert ihren Text, der Kalender setzt seinen eigenen */
  text-align: left;
}

.kalender[hidden] {
  display: none;
}

/* Der Behälter bekommt nach dem Klick den Fokus — auf dunkler Fläche
   zeichnet der Ring in Papier, wie beim .btn--on-espresso. */
.kalender:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

/* Cal.com setzt die Höhe seines iframes selbst, die Breite aber nicht:
   ohne diese Regel schiebt er sich über die Kante der Karte. */
.kalender > * {
  max-width: 100%;
}

/* Auf dem Desktop stehen Monatsgitter und Uhrzeiten nebeneinander und
   bauen höher als die gestapelte Ansicht des Telefons. */
@media (min-width: 48rem) {
  .kalender {
    min-height: 37rem;
  }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  padding-block: 2.5rem;
  background-color: var(--papier);
  border-top: 1px solid var(--espresso-line);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark--small {
  font-size: 1.25rem;
}

.footer-nav {
  display: flex;
  gap: 1.75rem;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}

.footer-nav a:hover {
  opacity: 0.65;
}

.footer-nav a:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer__legal {
  margin-top: 1.75rem;
  color: var(--espresso-muted);
  font-size: 0.875rem;
}

/* --- Unterseiten -------------------------------------------------------- */

/* Impressum und Datenschutz tragen zu wenig Inhalt, um das Fenster zu füllen —
   ohne diese Regel hinge der Footer mitten im Bild und darunter stünde eine
   leere Papierfläche. Der Body wird zur Spalte, der Inhalt nimmt den Rest.
   Auf der Landingpage greift nichts davon, die Klasse steht nur dort. */
.unterseite {
  display: flex;
  flex-direction: column;
}

.unterseite > main {
  flex: 1;
}

/* Rechtstexte sind Dokumente zum Lesen, keine Sektionen zum Überfliegen:
   eine schmale Spalte, eine einzige Zwischenüberschrift-Stufe, sonst nichts.
   Die H2 sitzt bewusst auf der H3-Stufe der Startseite (.card__title,
   .step__title, .saeule__title) — eine eigene Größe hätte den Satz der Seite
   ohne Not um eine Stufe erweitert. */
.rechtstext {
  max-width: 70ch;
  margin-top: 2.75rem;
}

.rechtstext h2 {
  margin-top: 2.75rem;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  /* 1.1 aus der Grundregel ist für die mehrzeiligen Überschriften dieses
     Dokuments zu eng — dort steht ein Satzteil, kein Schlagwort. */
  line-height: 1.2;
}

.rechtstext > h2:first-child {
  margin-top: 0;
}

.rechtstext p,
.rechtstext address {
  margin-top: 1rem;
  color: var(--espresso-muted);
  text-wrap: pretty;
}

/* Der erste Absatz bindet enger an seine Überschrift, als die Absätze
   untereinander stehen — sonst schwimmt die Überschrift zwischen den Blöcken. */
.rechtstext h2 + p,
.rechtstext h2 + address {
  margin-top: 0.75rem;
}

.rechtstext address {
  font-style: normal;
}

/* Volle Espresso-Deckung gegen den gedämpften Fließtext: die Farbdifferenz
   trägt hier die Auszeichnung mit, nicht nur die Unterstreichung. */
.rechtstext a {
  color: var(--espresso);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.25s var(--ease);
}

.rechtstext a:hover {
  opacity: 0.65;
}

.rechtstext a:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 34rem) {
  :root {
    --header-h: 3.75rem;
  }

  .wordmark {
    font-size: 1.3125rem;
  }

  .hero {
    padding-top: clamp(6rem, 14vw, 11rem);
    padding-bottom: 3.75rem;
  }

  /* Jede Tonwertkante bekommt oben wie unten denselben Abstand: 60px zu 60px,
     die Kante liegt damit mittig in der Lücke statt schief darin. */
  .section,
  .band {
    padding-block: 3.75rem;
  }

  .cta {
    --cta-luft: 3.75rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Blöcke rücken näher an ihren Vorspann */
  .card-grid,
  .split,
  .steps {
    margin-top: 2.5rem;
  }

  .panel {
    padding: 1.625rem;
  }

  /* Fenster und Blatt nicht quetschen — nur die Schrift darin etwas kleiner */
  .fenster {
    font-size: 0.875rem;
  }

  /* Schriftgröße kommt hier aus min(3.6cqi, 0.875rem), nur der Rand rückt ein */
  .blatt {
    padding: 1.9em;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer-nav {
    flex-direction: column;
    gap: 0.75rem;
  }
}