/* ==========================================================================
   USC Germany UG — Design-System
   Farben und Rhythmus sind aus dem gedruckten Flyer abgeleitet:
   Akzent #77b845 (gemessen), dunkelgrüne Anker, cremefarbener Hauptteil.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  /* Marke */
  --accent: #77b845;
  /* Dunkler als #578f41 — 4,5:1 auf Papier/Weiß (Lighthouse Kontrast). */
  --accent-deep: #3f6629;
  --accent-glow: #8fd35a;

  /* Dunkle Flächen (Flyer-Außenseite) */
  --ink: #0f1512;
  --ink-soft: #182119;
  --ink-line: #2a3a2e;
  --on-ink: #f2f5ef;
  --on-ink-muted: #c4cfc4;

  /* Helle Flächen (Flyer-Innenseite) */
  --paper: #f6f5f0;
  --paper-card: #ffffff;
  --paper-line: #e2e0d6;
  --on-paper: #16201a;
  --on-paper-muted: #5b6a5e;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(22 32 26 / 6%), 0 12px 32px -12px rgb(22 32 26 / 18%);
  --shadow-lift: 0 2px 4px rgb(22 32 26 / 8%), 0 24px 48px -20px rgb(22 32 26 / 28%);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Großzügiger Sektionsrhythmus: 112 px auf dem Desktop. Enge Abstände sind
     der Hauptgrund, warum Seiten gedrängt und schablonenhaft wirken. */
  --section-y: clamp(4rem, 9vw, 7rem);

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Bewegung: eine Kurve für alles Ruhige, eine mit leichtem Überschwingen
     für Elemente, die "ankommen" sollen. Federkurven statt ease-out. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* Bewusst KEIN scroll-behavior: smooth.
     Sprungmarken werden in app.js weich angesteuert. Global gesetzt würde die
     Eigenschaft jeden programmatischen Scroll-Aufruf in eine eigene Animation
     verwandeln — der Rad-Ausgleich in app.js käme dann gegen sich selbst an
     und die Seite ließe sich gar nicht mehr bewegen. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--on-paper);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* figure trägt im Browser von Haus aus 40 px Seitenrand — das schnitt den
   Vorher/Nachher-Vergleich auf dem Telefon um ein Viertel zusammen. */
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h3 { font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #0f1512;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

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

.wrap {
  width: min(100% - (2 * var(--gutter)), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink h2, .section--ink h3 { color: #fff; }

.section--paper { background: var(--paper); }

.section--edge {
  /* schmaler Grünkeil wie die Trennlinien im Flyer */
  border-top: 3px solid var(--accent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.section--ink .eyebrow { color: var(--accent); }
.eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p {
  font-size: 1.0625rem;
  color: var(--on-paper-muted);
}
.section--ink .section-head p { color: var(--on-ink-muted); }

.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* display: inline-flex sticht das UA-Verhalten von [hidden] aus. */
.btn[hidden] { display: none; }

.btn--primary { background: var(--accent); color: #0f1512; }
.btn--primary:hover { background: var(--accent-glow); }

.btn--ghost-light { border-color: rgb(255 255 255 / 28%); color: #fff; }
.btn--ghost-light:hover { border-color: var(--accent); color: var(--accent); }

.btn--ghost-dark { border-color: rgb(22 32 26 / 20%); color: var(--on-paper); }
.btn--ghost-dark:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }

.btn svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(15 21 18 / 92%);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 76px;
  padding-block: 0.75rem;
}

/* Marke: freigestelltes Symbol plus echter Schriftzug.
   Die Bilddatei enthielt den Namen als dünne Kontur mit — bei 60 px
   Gesamthöhe wurde daraus eine 8 px hohe, unleserliche Zeile, und der Name
   stand doppelt da. Jetzt trägt das Bild nur noch das Zeichen, den Namen setzt
   die Schrift: scharf auf jedem Bildschirm und ohne Wiederholung. */
.brand { display: flex; align-items: center; gap: 0.55rem; flex: none; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand__name {
  display: block;
  font-size: 0.9688rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
}
.brand__name small {
  display: block;
  margin-top: 1px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 420px) {
  .brand__name { font-size: 0.9063rem; }
  .brand__name small { display: none; }
}

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin: 0; padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  padding-block: 0.4rem;
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--on-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 0.2s ease;
}
.nav a:hover::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone svg { width: 20px; height: 20px; color: var(--accent); }
.header-phone:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav[data-open="true"] {
    display: block;
    position: absolute;
    inset: 100% 0 auto;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
  }
  .nav[data-open="true"] ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .nav[data-open="true"] a { display: block; padding: 0.7rem 0; font-size: 1.0625rem; }
}

@media (max-width: 680px) {
  /* Auf dem Telefon zählt nur eines: anrufen. Der Angebots-Knopf steht im
     Seitenkopf und im Formular — im Kopfbereich nimmt er nur Platz weg und
     drängt Logo und Nummer an den Rand.
     Früher: Logo auf 46 px hochgezogen — zusammen mit voller Nummer und
     „Menü“ sprengte das den 390-px-Rahmen (scrollWidth 466). */
  .site-header__inner { gap: 0.5rem; }
  .header-actions { gap: 0.4rem; margin-left: auto; }
  .header-actions .btn { display: none; }
  .header-phone {
    padding: 0.55rem 0.85rem;
    background: var(--accent);
    color: #0f1512;
    border-radius: var(--radius-pill);
  }
  .header-phone svg { color: #0f1512; }
  .header-phone:hover { color: #0f1512; }
  .brand img { height: 32px; }
  .nav-toggle { padding: 0.55rem 0.75rem; font-size: 0.875rem; }
}

@media (max-width: 480px) {
  /* Nummer + Logo + Menü passen nicht nebeneinander. Icon-Anruf behält
     die Telefon-Funktion, der sichtbare Text wandert in aria-label. */
  .header-phone {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .header-phone span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .brand img { height: 28px; }
}

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

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  align-items: center;
}
@media (min-width: 940px) {
  /* Bewusst asymmetrisch: der Text führt, das Foto ist die zweite Stimme
     und läuft nach rechts aus dem Raster heraus. */
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
}

.hero h1 { margin-bottom: 0.35em; color: #fff; }
.hero h1 .accent { color: var(--accent); }
.hero .eyebrow { color: var(--accent-glow); }
.hero__lead { max-width: 54ch; color: var(--on-ink-muted); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--on-ink-muted);
}
.hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  /* Deckel gegen ein Bild, das den Bildschirm auffrisst: Auf einem 1920er
     Schirm ergab das Hochformat sonst 1072 px Höhe — 99 vh, der Seitenkopf
     ragte über die Kante hinaus und nichts lud zum Weiterlesen ein. 76 vh
     lassen den nächsten Abschnitt anklingen. */
  max-height: min(76vh, 700px);
}
/* Das Foto läuft auf großen Schirmen aus dem Raster heraus — ein Bild, das den
   Rand berührt, wirkt wie eine Aufnahme und nicht wie eine Kachel. Der
   Überstand ist begrenzt, sonst wird das Bild breiter als der Text daneben und
   die Gewichtung kippt. */
@media (min-width: 1240px) {
  .hero__media { margin-right: max(calc((100vw - var(--wrap)) / -2 + var(--gutter)), -140px); }
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Etwas tiefer angeschnitten, damit der eingeschäumte Boden im Bild bleibt —
     er ist der eigentliche Beleg der Aufnahme. */
  object-position: center 58%;
  /* Abendaufnahme im dunklen Hero: leicht aufhellen, sonst verschwimmt sie. */
  filter: brightness(1.14) saturate(1.04);
}

.badge {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: 0.45rem 0.9rem;
  background: rgb(15 21 18 / 88%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* ------------------------------------------------------- Versprechen --- */

.promise-band { background: var(--ink-soft); color: var(--on-ink); }
.promise-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.promise {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}
.promise__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: rgb(119 184 69 / 14%);
  border-radius: 12px;
  color: var(--accent);
}
.promise__icon svg { width: 24px; height: 24px; }
.promise h3 { margin-bottom: 0.25em; font-size: 1.125rem; color: #fff; }
.promise p { font-size: 0.9375rem; color: var(--on-ink-muted); }

/* -------------------------------------------------------- Zielgruppen --- */

.audience-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.audience {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.audience:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.audience__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  background: rgb(119 184 69 / 14%);
  border-radius: 14px;
  color: var(--accent-deep);
}
.audience__icon svg { width: 27px; height: 27px; }
.audience h3 { margin-bottom: 0.4em; }
.audience p { color: var(--on-paper-muted); font-size: 0.9688rem; }
.audience ul {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.audience li {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.3rem;
  color: var(--on-paper-muted);
}
.audience li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  background: var(--accent);
  border-radius: 50%;
}
.audience__more {
  margin-top: auto;
  font-weight: 650;
  color: var(--accent-deep);
}
.audience__more::after { content: " →"; }

/* --------------------------------------------------------- Leistungen --- */

.service-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  /* Fünf Leistungen sollen auf großen Schirmen in einer Reihe stehen —
     wie die Zeile "Fünf Leistungen" auf dem Flyer. */
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
}
@media (min-width: 700px) and (max-width: 1099px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}

.service {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.service:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.service__icon { color: var(--accent-deep); }
.service__icon svg { width: 34px; height: 34px; }
.service h3 { margin: 0.35rem 0 0; font-size: 1.1875rem; }
.service p { font-size: 0.9375rem; color: var(--on-paper-muted); }
.service__link { margin-top: auto; padding-top: 0.75rem; font-weight: 650; font-size: 0.9375rem; color: var(--accent-deep); }
.service__link::after { content: " →"; }

/* ------------------------------------------------------------- Praxis --- */

.proof-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.proof {
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.proof__media { position: relative; aspect-ratio: 4 / 3; background: #dcdad2; }
.proof__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
.proof__body { padding: 1.25rem 1.5rem 1.5rem; }
.proof__body h3 { margin-bottom: 0.3em; font-size: 1.125rem; }
.proof__body p { font-size: 0.9375rem; color: var(--on-paper-muted); }

/* ------------------------------------------------------------ Ablauf --- */

.steps {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: step;
  margin: 0; padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}
.step__num {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 0.3em; font-size: 1.125rem; color: #fff; }
.step p { font-size: 0.9375rem; color: var(--on-ink-muted); }

/* ------------------------------------------------------- Einsatzgebiet --- */

.area-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) { .area-layout { grid-template-columns: 1fr 1fr; } }

.area-list { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.area-item {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-item:hover { border-color: var(--accent); transform: translateX(3px); }
.area-item svg { flex: none; width: 22px; height: 22px; color: var(--accent-deep); margin-top: 3px; }
.area-item strong { display: block; font-size: 1.0625rem; }
.area-item span { font-size: 0.9375rem; color: var(--on-paper-muted); }

.area-note {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
}
.area-note h3 { color: #fff; }
.area-note p { color: var(--on-ink-muted); font-size: 0.9688rem; }

/* ---------------------------------------------------------------- FAQ --- */

.faq { display: grid; gap: 0.75rem; max-width: 860px; margin-inline: auto; }

.faq details {
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--accent); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-weight: 650;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--accent-deep);
  border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
/* Während das Zuklappen läuft, ist das Element technisch noch offen. Pfeil und
   Rahmen sollen trotzdem sofort zurückgehen, sonst hinken sie der Bewegung
   hinterher. Muss nach den [open]-Regeln stehen, um sie zu überschreiben. */
.faq details[data-zu] { border-color: var(--paper-line); }
.faq details[data-zu] summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.faq .faq__answer { padding: 0 1.35rem 1.35rem; color: var(--on-paper-muted); }

/* ------------------------------------------------------------ Kontakt --- */

.contact-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) { .contact-layout { grid-template-columns: 0.95fr 1.05fr; } }

.contact-facts { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.contact-facts li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-facts svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 4px; }
.contact-facts strong { display: block; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.contact-facts a, .contact-facts span { color: var(--on-ink); text-decoration: none; font-size: 1.0625rem; }
.contact-facts a:hover { color: var(--accent); }

.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--paper-card);
  color: var(--on-paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
/* Helle Karte in dunkler Sektion: die .section--ink-Regel würde die
   Überschrift sonst weiß auf weiß setzen. */
.form-card h3 { margin-bottom: 0.35em; color: var(--on-paper); }
.form-card > p { color: var(--on-paper-muted); font-size: 0.9375rem; }

.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: block; margin-top: 1rem; }
fieldset.field { min-inline-size: 0; margin-top: 1.5rem; padding: 0; border: 0; }

/* Drei Bauformen für dieselbe Beschriftung: das Kontaktformular umschließt das
   Feld mit <label> und beschriftet per <span>, der Bewerbungsassistent nutzt
   <label for> beziehungsweise <legend>. Nur direkte Kinder — sonst greift die
   Regel auch auf die Auswahlchips tief im Feld zu. */
.field > span,
.field > label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
}
/* Legenden sind hier ganze Fragen, keine Feldnamen. Versalien über eine
   Satzlänge kosten Lesegeschwindigkeit, deshalb normale Schreibung. */
.field > legend {
  display: block;
  margin-bottom: 0.55rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--on-paper);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; border-color: var(--accent); }

.field input[type="file"] { padding: 0.55rem 0.6rem; }
.field input[type="file"]::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.4rem 0.95rem;
  font: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--on-paper);
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.field input[type="file"]::file-selector-button:hover {
  color: var(--accent-deep); border-color: var(--accent);
}

.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  padding: 0.6rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 550;
  background: var(--paper);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-pill);
  transition: all 0.16s ease;
}
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: #0f1512; }
.choice input:focus-visible + span { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

.form-note { margin-top: 1rem; font-size: 0.8125rem; color: var(--on-paper-muted); }
.form-note a { color: var(--accent-deep); }

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

.site-footer {
  background: var(--ink);
  color: var(--on-ink-muted);
  border-top: 3px solid var(--accent);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.site-footer h4 {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-brand p { max-width: 34ch; }
.footer-brand__mark { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.footer-brand__mark img { height: 34px; width: auto; }
.footer-brand__mark span {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.footer-brand__mark small {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.875rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }

/* ==========================================================================
   Unterseiten (Leistungen, Zielgruppen, Einsatzgebiet)
   ========================================================================== */

.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.page-hero__inner { position: relative; max-width: 62ch; }
.page-hero h1 { color: #fff; }
.page-hero__lead { color: var(--on-ink-muted); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.breadcrumb { margin-bottom: 1.25rem; font-size: 0.875rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  margin: 0; padding: 0; list-style: none;
  color: var(--on-ink-muted);
}
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.45rem; opacity: 0.55; }
.breadcrumb a { color: var(--on-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: #fff; }

/* Fließtext-Bereich */
.prose { max-width: 68ch; }
.prose h2 { margin-top: clamp(2rem, 4vw, 3rem); }
.prose h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 0; list-style: none; }
.prose ul li {
  display: flex; gap: 0.7rem; padding-block: 0.35rem;
  color: var(--on-paper-muted);
}
.prose ul li::before {
  content: "";
  flex: none; width: 8px; height: 8px; margin-top: 0.62em;
  background: var(--accent); border-radius: 50%;
}
.prose ol { counter-reset: pl; }
.prose ol li {
  display: flex; gap: 0.8rem; padding-block: 0.4rem;
  counter-increment: pl;
  color: var(--on-paper-muted);
}
.prose ol li::before {
  content: counter(pl, decimal-leading-zero);
  flex: none;
  font-weight: 700; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.prose strong { color: var(--on-paper); }
.prose a { color: var(--accent-deep); text-underline-offset: 3px; }

/* Zweispaltiges Layout mit Randspalte */
.with-aside { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .with-aside { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); } }

/* Bewusst nicht klebend: position: sticky nimmt das Element nicht aus dem
   Fluss. Klebte die erste Karte, wanderten die nachfolgenden beim Scrollen
   darunter durch und wurden verdeckt — ab etwa 1400 px Scrollhöhe sichtbar.
   Da die Randspalte ohnehin nur ein Drittel so hoch ist wie der Haupttext,
   bringt das Kleben keinen Gewinn. */
.aside-card {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.aside-card + .aside-card { margin-top: 1.25rem; }
.aside-card h3 { font-size: 1.125rem; }
.aside-card p, .aside-card li { font-size: 0.9375rem; color: var(--on-paper-muted); }
.aside-card ul { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.aside-card ul li { display: flex; gap: 0.6rem; }
.aside-card ul li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.55em;
  background: var(--accent); border-radius: 50%;
}
.aside-card .btn { width: 100%; margin-top: 1.1rem; }

/* Leistungsumfang als Kachelraster.
   Die Mindestbreite ist bewusst hoch: Bei 260 px zerfiel der Fließtext in
   Zeilen mit drei Wörtern, was sich stockend liest. 360 px ergeben etwa 45 bis
   55 Zeichen je Zeile — das ist der lesbare Bereich. Lieber zwei ruhige
   Spalten als vier zerhackte. */
.scope-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
.scope {
  padding: 1.5rem;
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.scope h3 { margin-bottom: 0.35em; font-size: 1.125rem; }
.scope p { font-size: 0.9375rem; color: var(--on-paper-muted); }

/* Abschließendes Handlungsband */
.cta-band {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 3px solid var(--accent);
}
.cta-band__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { margin-bottom: 0.3em; color: #fff; }
.cta-band p { color: var(--on-ink-muted); margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Querverweise auf verwandte Seiten */
.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.related {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  font-weight: 600;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.related:hover { border-color: var(--accent); transform: translateY(-2px); }
.related svg { flex: none; width: 24px; height: 24px; color: var(--accent-deep); }

/* Faktentabelle */
.facts-table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; }
.facts-table th, .facts-table td { padding: 0.85rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-line); }
.facts-table th { width: 38%; font-weight: 650; color: var(--on-paper); }
.facts-table td { color: var(--on-paper-muted); }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   Sektionsmuster der Startseite

   Bewusst KEINE gleichförmigen Kartenraster. Gleich große Kacheln mit kleinem
   Icon obendrauf sind das Erkennungszeichen generischer Baukastenseiten: alles
   wirkt gleich wichtig, also nichts. Jede Sektion hat hier stattdessen genau
   eine Hauptfigur, der Rest ordnet sich unter.
   ========================================================================== */

/* --- Versprechen: drei typografische Blöcke, getrennt durch Linien -------- */

.promise-band { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--ink-line); }
.promise-band .wrap { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

.promise-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.promise-item { position: relative; }
@media (min-width: 780px) {
  .promise-item + .promise-item { padding-left: clamp(1.75rem, 3vw, 3rem); }
  .promise-item + .promise-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0.15em; bottom: 0.15em;
    width: 1px;
    background: var(--ink-line);
  }
}
.promise-item h2 {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.4em;
  font-size: 1.0625rem;
  color: #fff;
}
.promise-item h2 svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.promise-item p { font-size: 0.9375rem; color: var(--on-ink-muted); }

/* --- Zielgruppen: eine Hauptkarte, zwei Nebenkarten ---------------------- */

.audience-split {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 900px) {
  .audience-split { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
}

.audience-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(340px, 44vw, 460px);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
}
/* Statt eines zweiten Fotos (das Einsatzbild steht schon im Seitenkopf) trägt
   ein aufgezogener Anfangsbuchstabe die Fläche — er kommt aus der Wortmarke
   und wiederholt kein Bild. */
.audience-lead::before {
  content: "USC";
  position: absolute;
  top: -0.22em; right: -0.04em;
  font-size: clamp(7rem, 16vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgb(119 184 69 / 13%);
  pointer-events: none;
}
.audience-lead h3 { position: relative; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: #fff; }
.audience-lead p, .audience-lead .audience__more { position: relative; }
.audience-lead p { color: rgb(255 255 255 / 82%); max-width: 42ch; }
.audience-lead .audience__more { color: var(--accent); margin-top: 1rem; }

.audience-stack { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }

.audience-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.audience-side:hover { border-color: var(--accent); background: #fff; }
.audience-side h3 { margin-bottom: 0.3em; font-size: 1.25rem; }
.audience-side p { font-size: 0.9375rem; color: var(--on-paper-muted); }
.audience-side .audience__more { margin-top: 0.9rem; }

/* --- Leistungen: redaktionelle Zeilenliste statt Kachelraster ------------ */

.service-list { border-top: 1px solid var(--paper-line); }

.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--paper-line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 820px) {
  .service-row { grid-template-columns: 4.5rem minmax(0, 15rem) 1fr auto; align-items: center; }
}
.service-row:hover { background: rgb(119 184 69 / 7%); }

.service-row__num {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.service-row__name {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  letter-spacing: -0.025em;
  transition: color var(--dur-fast) var(--ease-out);
}
.service-row:hover .service-row__name { color: var(--accent-deep); }
.service-row__text {
  grid-column: 2;
  margin: 0;
  max-width: 46ch;
  font-size: 0.9688rem;
  color: var(--on-paper-muted);
}
@media (min-width: 820px) {
  .service-row__text { grid-column: 3; }
}
.service-row__go {
  display: none;
  justify-self: end;
  width: 42px; height: 42px;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent-deep);
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 820px) { .service-row__go { display: grid; } }
.service-row:hover .service-row__go {
  transform: translateX(5px);
  border-color: var(--accent);
  background: var(--accent);
  color: #0f1512;
}
.service-row__go svg { width: 19px; height: 19px; }

/* --- Vorher/Nachher: ein großer Vergleich statt drei Kärtchen ------------ */

.compare-widget {
  --pos: 50%;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.compare {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-height: 74vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: #dcdad2;
  /* none, nicht pan-y: sonst deutet der Browser eine leicht schräge
     Wischbewegung als Seitenscroll, bricht die Geste mit pointercancel ab
     und der Regler bleibt unter dem Finger stehen. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 760px) { .compare { aspect-ratio: 16 / 10; } }

.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.compare__before { z-index: 0; }
/* Das Nachher-Bild liegt darüber und wird von links freigegeben. Der Beschnitt
   sitzt auf dem Wrapper, damit das Bild darin unabhängig ausgerichtet werden
   kann, ohne dass die Trennlinie mitwandert. */
.compare__after {
  position: absolute; inset: 0;
  z-index: 1;
  clip-path: inset(0 0 0 var(--pos));
  overflow: hidden;
}
/* Die beiden Fotos entstanden aus unterschiedlichem Abstand. Das Nachher-Bild
   wird auf die Rahmung des Vorher-Bilds gezogen (Kanten-Abgleich, 23.08.2026:
   Skalierung 1,15, Inhalt nach unten), damit der Trennwandfuß an der Naht
   auf beiden Seiten auf gleicher Höhe sitzt. */
.compare__after > img {
  position: absolute;
  inset: auto;
  left: 50%; top: 50%;
  width: 115%; height: 115%;
  transform: translate(-50%, -43.5%);
  object-fit: cover;
}

/* Jedes Etikett gehört zu seiner Bildhälfte und wird mit ihr auf- und
   zugedeckt: das Nachher-Etikett liegt im Nachher-Wrapper (erbt dessen
   Beschnitt), das Vorher-Etikett in einer eigenen Ebene, die spiegelbildlich
   von rechts beschnitten wird. So beschriftet nie ein Etikett das falsche Bild. */
.compare__beforetag {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  pointer-events: none;
}

.compare__line {
  position: absolute;
  z-index: 2; /* über beiden Bildhälften — sonst verdeckt das Nachher-Bild (z 1) die rechte Seite */
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--accent);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgb(15 21 18 / 25%);
}
.compare__grip {
  position: absolute;
  z-index: 3; /* ganz oben, sonst ist der Kreis nur zur Hälfte sichtbar */
  top: 50%;
  /* Am Rand anhalten statt aus der Bühne zu ragen: die Linie folgt --pos
     exakt weiter, nur der Kreis bleibt vollständig sichtbar und greifbar. */
  left: clamp(30px, var(--pos), calc(100% - 30px));
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #0f1512;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 6px 20px -6px rgb(15 21 18 / 55%);
}
.compare__grip svg { width: 24px; height: 24px; }

/* Bedient wird im Bild: ziehen oder irgendwohin tippen, der Griff folgt.
   Ein zweites sichtbares Bedienelement darunter wäre doppelt — das
   range-Element bleibt daher unsichtbar, aber fokussierbar und trägt so
   Tastatur (Pfeiltasten, Pos1/Ende) und Screenreader. */
.compare__range {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.compare { cursor: ew-resize; }

/* Fokussiert jemand per Tastatur, muss der Griff das zeigen. */
.compare-widget:has(.compare__range:focus-visible) .compare__grip {
  outline: 3px solid #fff;
  outline-offset: 3px;
}


.compare__tag {
  position: absolute;
  bottom: 1rem;
  padding: 0.4rem 0.85rem;
  background: rgb(15 21 18 / 88%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.compare__tag--before { left: 1rem; }
.compare__tag--after { right: 1rem; }

.compare-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--on-paper-muted);
}
.compare-caption strong { color: var(--on-paper); }

/* --- Ablauf: Achse mit großen Zahlen statt vier Kacheln ------------------ */

.flow {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 780px) { .flow { grid-template-columns: repeat(4, 1fr); } }

.flow li { position: relative; padding-top: 2.25rem; }
.flow li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.flow li::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out);
}
.flow__num {
  display: block;
  margin-bottom: 0.4rem;
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  /* Deutlich genug, um die Reihenfolge zu tragen, zurückhaltend genug, um der
     Überschrift nicht die Aufmerksamkeit wegzunehmen. */
  color: rgb(255 255 255 / 48%);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.flow h3 { margin-bottom: 0.3em; font-size: 1.125rem; color: #fff; }
.flow p { font-size: 0.9375rem; color: var(--on-ink-muted); }

/* Hover gilt für den ganzen Schritt, nicht nur die Zahl: sonst wirkt der
   Rest tot. Die Achse färbt sich mit, der Punkt bekommt einen Hof — das
   ist die Spur, auf der man gerade steht. */
.flow li:hover .flow__num,
.flow li:focus-within .flow__num { color: var(--accent); }
.flow li:hover::before,
.flow li:focus-within::before { background: var(--accent); }
.flow li:hover::after,
.flow li:focus-within::after {
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgb(119 184 69 / 22%);
}

/* --- Einsatzgebiet: Liste ohne Kartenrahmen ------------------------------ */

.area-plain { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--paper-line); }
.area-plain a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.25rem 1rem;
  align-items: center;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--paper-line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.area-plain a:hover { background: rgb(119 184 69 / 7%); }
.area-plain svg { width: 22px; height: 22px; color: var(--accent-deep); }
.area-plain strong { font-size: 1.125rem; }
.area-plain span { grid-column: 2; font-size: 0.9375rem; color: var(--on-paper-muted); }

/* ==========================================================================
   Bewegung

   Eine Regie statt vieler kleiner Effekte: der Seitenkopf läuft beim Laden
   gestaffelt ein, alles Weitere reagiert auf die Scrollposition. Nur opacity
   und transform, damit nichts ruckelt.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .stagger > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
  }
}

/* Scroll-gesteuert, wo der Browser es kann — sonst ist alles sofort sichtbar.
   Inhalte werden nie per Skript versteckt, damit Crawler alles sehen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translate3d(0, 26px, 0); }
      to { opacity: 1; transform: none; }
    }

    /* Das Hero-Foto wandert beim Scrollen leicht mit — Tiefe ohne Parallax-Kitsch. */
    .hero__media img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes drift {
      from { transform: scale(1.06) translate3d(0, -1.5%, 0); }
      to { transform: scale(1.06) translate3d(0, 1.5%, 0); }
    }
  }
}

/* Lesefortschritt am oberen Rand */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: fortschritt linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fortschritt {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .flow li:hover::after,
  .flow li:focus-within::after {
    transform: none;
  }
}

/* ----------------------------------------------------------- Karriere --- */

.wizard { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .wizard { grid-template-columns: 220px 1fr; } }

/* Die Überschriften stehen hier in einem Formular, nicht in einem Fließtext.
   Ohne eigene Stufe erben sie die Sektionsgröße und erschlagen die Frage. */
.wizard h2 {
  font-size: clamp(1.3125rem, 1.1rem + 0.85vw, 1.6875rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
}
/* Der Schrittwechsel setzt den Fokus auf die Überschrift, damit Screenreader
   den neuen Abschnitt ansagen. Sichtbar markiert werden muss das nicht — die
   Überschrift ist nicht bedienbar, und der Standardring des Browsers ist
   orange und bricht die Farbwelt. */
.wizard h2:focus { outline: none; }
.wizard__step > p, .wizard__step > fieldset > p {
  max-width: 60ch; margin-bottom: 1.35rem;
  font-size: 0.9375rem; line-height: 1.75; color: var(--on-paper-muted);
}

.wizard__rail { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
/* Durchgehende Linie hinter den Ziffernkreisen; die Kreise decken sie ab. */
.wizard__rail::before {
  content: ""; position: absolute;
  left: 0.9375rem; top: 1.3rem; bottom: 1.3rem;
  width: 2px; background: var(--paper-line);
}
.wizard__rail li {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center;
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  color: var(--on-paper-muted);
}
.wizard__rail li b {
  width: 1.875rem; height: 1.875rem;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--paper);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wizard__rail li[data-done="ja"] { color: var(--on-paper); }
.wizard__rail li[data-done="ja"] b {
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
}
.wizard__rail li[aria-current="step"] { color: var(--on-paper); font-weight: 600; }
.wizard__rail li[aria-current="step"] b {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
  box-shadow: 0 0 0 4px rgb(119 184 69 / 18%);
}

.wizard__step[hidden] { display: none; }
.wizard__count {
  margin-bottom: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep);
}
.wizard__nav {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--paper-line);
}
.wizard__nav .btn[disabled] { opacity: 0.5; pointer-events: none; }

.choice-list { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.choice-block { position: relative; display: block; cursor: pointer; }
.choice-block input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Ohne sichtbaren Punkt lasen sich die Optionen wie Absätze und nicht
   wie etwas, das man anklicken kann. */
.choice-block span {
  position: relative;
  display: block;
  padding: 0.9rem 1.15rem 0.9rem 2.95rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  background: var(--paper);
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.choice-block span::before {
  content: "";
  position: absolute; left: 1.15rem; top: 1.05rem;
  width: 1.125rem; height: 1.125rem;
  border: 2px solid var(--paper-line);
  border-radius: var(--radius-pill);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.choice-block span b { font-weight: 700; color: var(--on-paper); }
.choice-block:hover span { border-color: #c9cbbd; background: #fff; }
.choice-block input:checked + span {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-card);
}
.choice-block input:checked + span::before {
  border-color: var(--accent-deep);
  box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 1rem var(--accent-deep);
}
.choice-block input:focus-visible + span { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

.consent { display: flex; gap: 0.8rem; align-items: flex-start; margin-top: 1rem; font-size: 0.9375rem; line-height: 1.7; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex: none; accent-color: var(--accent-deep); }

.alert {
  margin-top: 1.25rem; padding: 0.9rem 1.1rem;
  font-size: 0.9375rem; line-height: 1.7;
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-line);
  background: var(--paper);
}
.alert[data-art="fehler"] { border-color: #c2413a; color: #8c2b25; background: rgb(194 65 58 / 8%); }
.alert[data-art="gut"] { border-color: var(--accent-deep); color: var(--accent-deep); background: rgb(119 184 69 / 10%); }
.alert[data-art="laeuft"] { border-color: var(--paper-line); color: var(--on-paper-muted); }
.alert[hidden] { display: none; }

.alert--kompakt {
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin-top: 0.7rem; padding: 0.7rem 0.9rem;
  font-size: 0.875rem; line-height: 1.55;
}
.alert--kompakt::before {
  content: ""; flex: none;
  inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.08rem;
  border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 0.66rem;
}
.alert--kompakt[data-art="gut"]::before {
  background-color: var(--accent-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.alert--kompakt[data-art="fehler"]::before {
  background-color: #c2413a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 5.5v9'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E");
}
.alert--kompakt[data-art="laeuft"]::before {
  border: 2px solid var(--paper-line);
  border-block-start-color: var(--accent-deep);
  animation: pruef-dreh 0.8s linear infinite;
}
@keyframes pruef-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .alert--kompakt[data-art="laeuft"]::before { animation: none; }
}

.field__hinweis {
  margin-top: 0.5rem;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--on-paper-muted);
}

/* Bewusst keine Kästchen: zehn gerahmte Felder nebeneinander sehen aus wie
   eine Datenbankmaske. Haarlinien reichen, um Paare zu trennen. */
.summary-grid {
  display: grid; margin-top: 0.5rem;
  border-top: 1px solid var(--paper-line);
}
.summary-grid div {
  display: grid; gap: 0.15rem 1.25rem; align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--paper-line);
}
/* Zwei Spalten erst, wenn der Wert danach noch breit genug bleibt — sonst
   bricht schon „Renovierung, Rückbau und Montage" über drei Zeilen. */
@media (min-width: 560px) { .summary-grid div { grid-template-columns: 9.5rem 1fr; } }
.summary-grid dt { font-size: 0.8125rem; font-weight: 600; color: var(--on-paper-muted); }
.summary-grid dd { margin: 0; font-size: 0.9375rem; font-weight: 550; }

.track { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.track li { display: flex; gap: 0.9rem; align-items: flex-start; }
.track b {
  flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-size: 0.875rem; font-weight: 550;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-pill);
  color: var(--on-paper-muted);
}
.track li[data-stand="erledigt"] b { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.track li[data-stand="aktuell"] b { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.track li[data-stand="aktuell"] strong { color: var(--accent-deep); }
.track p { margin: 0.15rem 0 0; font-size: 0.9375rem; color: var(--on-paper-muted); }

/* ------------------------------------------------------------- Print --- */

@media print {
  .site-header, .hero__media, .form-card, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .section--ink, .promise-band, .site-footer { background: #fff !important; color: #000 !important; }
}

/* Hilfsklassen statt Inline-Stile.
   Inline-Stile zwingen die Inhaltsrichtlinie zu style-src 'unsafe-inline' —
   und damit zu einer Ausnahme, die genau das erlaubt, was ein Angreifer
   einschleusen wollen würde. Die Werte sind unverändert übernommen; die
   Klassen stehen am Dateiende, damit sie bei gleicher Spezifität gewinnen
   (etwa .u-mt-0 gegen .field { margin-top: 1rem }), so wie es der Inline-Stil
   vorher tat. */
.u-offscreen-sprite { position: absolute; }
.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-125 { margin-top: 1.25rem; }
.u-mb-125 { margin-bottom: 1.25rem; }
.u-text-muted-ink { color: var(--on-ink-muted); }
.u-fieldset-plain { border: 0; padding: 0; margin: 1.25rem 0 0; }
.u-legend-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-paper-muted); }
.u-btn-block { width: 100%; margin-top: 1.25rem; }
.u-focus-lower { --focus: center 72%; }
.u-step-0 { --i: 0; }
.u-step-1 { --i: 1; }
.u-step-2 { --i: 2; }
.u-step-3 { --i: 3; }
.u-step-4 { --i: 4; }