/* =========================================================
   judithstorm.de – Designsystem „Die Wand“

   Jede Fläche trägt die Wandfarbe des Fotos, das auf ihr sitzt:
   Studiowand (hell) und Praxiswand (mauve). Text in Indigo-Tinte.
   Orange (der Sessel) gehört dem Conscious Career Club, gedecktes
   Rost (der Sessel im Schatten) setzt ruhige Akzente.
   Eine Schriftfamilie: 72.
   ========================================================= */

@font-face { font-family: "72"; src: url("../fonts/72-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "72"; src: url("../fonts/72-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "72"; src: url("../fonts/72-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "72"; src: url("../fonts/72-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "72"; src: url("../fonts/72-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --wand: #eceaeb;      /* Studiowand, Foto 16 */
  --praxis: #c9c3c2;    /* Praxiswand, Fotos 1, 6-A, 8 */
  --tinte: #181b4b;     /* Text (AA auch auf Orange) */
  --orange: #ee5a28;    /* nur Conscious Career Club */
  --rost: #b84d26;      /* gedecktes Orange: der Sessel im Schatten */
  --zitrone: #ece6a6;   /* Judiths gelbes Top: Newsletter */
  --wand-paar: #bdb5b3; /* Wand in Foto 08, Flächen der Paartherapie */
  --weiss: #ffffff;
  --focus: var(--tinte);

  --font: "72", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --step-3: clamp(2rem, 1.4rem + 3vw, 4.25rem);
  --step-4: clamp(2.6rem, 1.2rem + 6.2vw, 7.5rem);
  --step-5: clamp(3rem, 0.6rem + 9.5vw, 10rem);

  --space-s: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  --space-m: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
  --space-l: clamp(3.5rem, 2rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 4.5rem);

  /* Maximale Seitenbreite: Inhalte wachsen nicht über 1440 px hinaus,
     Hintergründe laufen trotzdem über die ganze Breite. */
  --max: 1440px;
  --inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));

  --measure: 34em;
  --header-h: 4.5rem;
}

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--wand);
  color: var(--tinte);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

/* Lange deutsche Wörter wie "Geschäftsbedingungen" passen auf schmalen
   Handys nicht in eine Zeile und liefen sonst aus dem Bild. */
:where(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { color: var(--rost); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--tinte); color: var(--wand); }

.no-scroll { overflow: hidden; }

.skip-link {
  position: absolute;
  top: -5rem;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--tinte);
  color: var(--wand);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons und Links ---------- */

.btn {
  display: inline-block;
  padding: 0.95em 1.6em;
  border: 0;
  border-radius: 999px;
  font: 700 var(--step-0)/1.1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn--tinte { background: var(--tinte); color: var(--wand); }
.btn--tinte:hover { background: var(--rost); color: var(--weiss); }

.link-strong {
  font-weight: 700;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

/* ---------- Header: ruhige Navigation in Kapitälchen ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  /* Die Seitenspalten sind mindestens so breit wie ihr Inhalt. Dadurch bleibt
     die Wortmarke mittig, solange Platz ist, und rutscht bei Enge zur Seite,
     statt von der Navigation überlagert zu werden. Eine Überlappung wie
     früher kann so gar nicht mehr entstehen. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-s);
  padding: 1.1rem var(--inline);
  background: var(--wand);
}
.site-header a { text-decoration: none; }

.nav-business,
.menu,
.btn-kontakt,
.menu-toggle {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.nav-business { grid-column: 1; justify-self: start; }

.wordmark {
  grid-column: 2;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-main {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 1.75rem);
}

.menu {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-business { display: none; }

.site-header [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
}

/* Der einzige hervorgehobene Knopf im Kopf führt zum Kontakt. Er gilt für
   alle Angebote, deshalb ist er nicht mehr dem Career Club vorbehalten. */
.btn-kontakt {
  padding: 0.5em 1.4em 0.6em;
  border-radius: 999px;
  background: var(--orange);
  color: var(--tinte);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.btn-kontakt:hover { background: var(--tinte); color: var(--orange); }
.site-header .btn-kontakt[aria-current="page"] { text-decoration: none; box-shadow: inset 0 0 0 2px var(--tinte); }

.menu-toggle {
  display: none;
  padding: 0.45em 1em 0.55em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 1040px) {
  .site-header { grid-template-columns: auto 1fr; }
  .nav-business { display: none; }
  .wordmark { grid-column: 1; font-size: 1.125rem; }
  .nav-main { grid-column: 2; gap: 0.75rem; }
  .menu-toggle { display: inline-block; }
  .menu-business { display: list-item; }
  .js .menu { display: none; }
  /* Ohne JavaScript gibt es kein Aufklappen: Der Menüknopf wäre wirkungslos,
     deshalb bleibt er weg und die Navigation steht in einer eigenen Zeile. */
  .no-js .menu-toggle { display: none; }
  .no-js .nav-main { grid-column: 1 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; }
  .no-js .menu { flex-wrap: wrap; gap: 0.6rem 1.25rem; }
  .js .menu-open .menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--space-m) var(--gutter);
    background: var(--wand);
    font-size: 1.625rem;
    letter-spacing: 0.08em;
  }
}

/* Zwischen Handy-Menü und voller Breite wird es eng: Dort passt der lange
   Clubname nicht mehr neben die mittige Wortmarke, die Navigation lief
   sonst in die Wortmarke hinein. Also kurze Fassung und engere Abstände. */
/* Dicht über der Umschaltschwelle sitzt die Navigation am engsten.
   Dort die Abstände verkleinern, damit Luft zur Wortmarke bleibt. */
@media (min-width: 1041px) and (max-width: 1300px) {
  .nav-main { gap: 0.8rem; }
  .menu { gap: 0.8rem; }
}

@media (max-width: 520px) {
  .site-header { gap: 0.5rem; }
  .wordmark { font-size: 1rem; letter-spacing: 0.01em; }
  .nav-main { gap: 0.5rem; }
  .btn-kontakt { padding: 0.45em 1em 0.55em; }
  .menu-toggle { padding: 0.4em 0.8em 0.5em; }
}

/* ---------- Abschnitte ---------- */

.section { padding: var(--space-l) var(--inline); }
.section--praxis { background: var(--praxis); }
/* Die Paartherapie-Abschnitte tragen die Wandfarbe aus Foto 08 (#bdb5b3,
   gemessen) statt der Praxisfarbe. Nur so läuft das weich ausgeblendete Foto
   in eine gleiche Fläche aus, statt an einer Farbkante zu enden. Wird das
   Foto getauscht, muss diese Farbe neu gemessen werden. */
.section--paarwand { background: var(--wand-paar); }

.section-title { margin-bottom: var(--space-s); font-size: var(--step-3); }

.lead {
  margin-bottom: 0.75em;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18em;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---------- Hero: ein inszenierter Einstieg ---------- */

.hero {
  position: relative;
  max-width: var(--max);
  min-height: calc(100svh - var(--header-h));
  margin-inline: auto;
  overflow: clip;
}

.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  max-width: 64%;
  padding: var(--space-l) var(--gutter);
}

.hero-title { font-size: var(--step-5); line-height: 0.9; letter-spacing: -0.04em; }
.hero-title .line { display: block; white-space: nowrap; }

.hero-roles {
  margin: var(--space-m) 0 0;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.12;
  max-width: 16em;
}

.hero-lead { margin: var(--space-s) 0 0; font-size: var(--step-1); line-height: 1.45; max-width: 24em; }

.hero-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

.js .hero-title .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .hero-title .line > span { display: block; transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .hero-title .line + .line > span { transition-delay: 0.09s; }
.js .hero-roles,
.js .hero-lead { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.8s 0.4s, transform 0.8s 0.4s; }
.js .hero-photo { opacity: 0; transition: opacity 1.4s 0.1s; }
.js.is-ready .hero-title .line > span,
.js.is-ready .hero-roles,
.js.is-ready .hero-lead { opacity: 1; transform: none; }
.js.is-ready .hero-photo { opacity: 1; }

@media (max-width: 800px) {
  .hero { min-height: 0; }
  .hero-text { min-height: 0; max-width: none; padding-bottom: 0; }
  .hero-photo { position: relative; height: auto; width: 100%; aspect-ratio: auto; margin-top: var(--space-m); }
  .hero-photo img {
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }
}

/* ---------- Parallax und Drift ---------- */

.parallax { overflow: hidden; }
.parallax img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.08); }
[data-drift] { transform: translate3d(var(--drift, 0px), 0, 0); }

/* Zwei Wege direkt unter der Vorstellung: Wer auf die Startseite kommt, soll
   ohne Scrollen sehen, dass es Angebote für Privatpersonen und für Unternehmen
   gibt. Haarlinien statt Karten, damit es zum Rest der Seite passt. */
.wege { row-gap: var(--space-m); }
.weg {
  grid-column: span 6;
  padding-top: var(--space-s);
  border-top: 1px solid rgb(24 27 75 / 0.2);
}
.weg h2 {
  margin-bottom: 0.4em;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.weg p { margin-bottom: 0.8em; }
.weg-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0; }

/* ---------- Statement ---------- */

.statement { padding: var(--space-l) var(--inline); overflow: clip; }

.statement-big {
  max-width: 13em;
  margin: 0;
  font-size: var(--step-4);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.statement-turn {
  max-width: 12em;
  margin: var(--space-m) 0 0 auto;
  color: var(--rost);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ---------- Fenster: ein Foto bleibt stehen, die Seite scrollt darüber ---------- */

.window {
  position: relative;
  height: 85vh;
  clip-path: inset(0);
}
.window img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Bild und Text nebeneinander ---------- */

.split { align-items: center; }
/* Für lange Textspalten: Foto oben anschlagen statt mittig zentrieren. */
.split--top { align-items: start; }
/* Feste Zeile, damit die Reihenfolge im Quelltext frei wählbar ist. Auf
   /paartherapie/ und /about/ steht der Text zuerst, damit Suchmaschinen die
   Überschrift finden statt der Bildbeschreibung. Ohne grid-row würde das
   Foto in eine zweite Zeile rutschen. */
.split-photo { grid-column: 1 / span 6; grid-row: 1; }
.split-text { grid-column: 8 / span 5; grid-row: 1; }
.split--reverse .split-photo { grid-column: 7 / span 6; grid-row: 1; }
.split--reverse .split-text { grid-column: 1 / span 5; grid-row: 1; }
.split-photo--bleed-left { margin-left: calc(-1 * var(--gutter)); }
.split-photo--bleed-right { margin-right: calc(-1 * var(--gutter)); }
.split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Foto läuft links und oben weich in die Wandfarbe aus */
.split-photo--soft img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 12%);
  mask-composite: intersect;
}
/* Gleiche Behandlung, aber die weiche Kante liegt rechts. Nötig, wenn das Foto
   nach links aus dem Bild läuft und die sichtbare Kante zum Text zeigt. */
.split-photo--soft-rechts img {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 12%);
  mask-composite: intersect;
}

/* ---------- Conscious Career Club ---------- */

.ccc {
  position: relative;
  padding: calc(var(--space-l) + 1.75rem) var(--inline) var(--space-l);
  background: var(--orange);
  color: var(--tinte);
  overflow: clip;
}
.ccc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.75rem;
  background: repeating-linear-gradient(90deg, var(--tinte) 0 1.1rem, var(--wand) 1.1rem 2.2rem);
}
.ccc a:not(.btn):hover { color: var(--weiss); }
.ccc-inner { align-items: end; }
.ccc-text { grid-column: 1 / span 7; }
.ccc-title { margin-bottom: var(--space-m); font-size: var(--step-4); line-height: 0.88; letter-spacing: -0.045em; }
.ccc-claim { font-size: var(--step-2); font-weight: 700; line-height: 1.12; max-width: 19em; }
.ccc-kicker { margin-bottom: var(--space-s); font-size: var(--step--1); font-variant-caps: all-small-caps; letter-spacing: 0.1em; }
.ccc-photo { grid-column: 9 / span 4; }

/* ---------- Für Unternehmen ---------- */

.teaser-b2b { align-items: baseline; }
.teaser-b2b .section-title { grid-column: 1 / span 6; }
.teaser-b2b-text { grid-column: 7 / span 6; }

/* ---------- Newsletter ---------- */

.newsletter {
  --nl-bg: var(--zitrone);
  --nl-fg: var(--tinte);
  --nl-btn-bg: var(--tinte);
  --nl-btn-fg: var(--wand);
  padding: var(--space-l) var(--inline);
  background: var(--nl-bg);
  color: var(--nl-fg);
}
.newsletter .btn { background: var(--nl-btn-bg); color: var(--nl-btn-fg); }
.newsletter .btn:hover { background: var(--rost); color: var(--weiss); }
.newsletter a:hover { color: inherit; opacity: 0.75; }
.newsletter-title { grid-column: 1 / span 5; }
.newsletter-body { grid-column: 7 / span 6; }
.newsletter-substack { margin: var(--space-m) 0 0; }

/* ---------- Formulare ---------- */

.signup { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 36rem; margin-top: var(--space-s); }
.signup-label { flex-basis: 100%; font-weight: 700; }
.signup-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.95em 1.2em;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 var(--step-0)/1.1 var(--font);
}
.signup-note { flex-basis: 100%; margin: 0.25rem 0 0; font-size: var(--step--1); line-height: 1.5; }
.signup-note a { font-weight: 700; }
.signup-status { flex-basis: 100%; min-height: 1.5em; margin: 0; font-weight: 700; }
.signup-status:empty { display: none; }
.signup-check { flex-basis: 100%; margin: 0; }
.signup-check label { display: flex; gap: 0.6rem; align-items: baseline; font-size: var(--step--1); line-height: 1.5; cursor: pointer; }
.signup-check input { flex: none; width: 1.1em; height: 1.1em; accent-color: var(--tinte); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

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

.site-footer {
  --focus: var(--orange);
  padding: var(--space-l) var(--inline) var(--space-m);
  background: var(--tinte);
  color: var(--wand);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; }
.footer-grid { row-gap: var(--space-m); }
.footer-mark {
  grid-column: 1 / span 5;
  margin: 0;
  font-size: var(--step-3);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.footer-col { grid-column: span 2; }
.footer-col--wide { grid-column: span 3; }
.footer-heading { margin-bottom: 0.75em; font-size: var(--step-0); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: var(--space-l);
  font-size: var(--step--1);
}

/* ---------- Unterseiten (Platzhalter) ---------- */

.page-intro { min-height: 60vh; }

/* ---------- /alle-links ---------- */

.page-links { background: var(--wand); }

.links-page { width: min(100%, 34rem); margin: 0 auto; padding-bottom: var(--space-l); }

.links-cover { position: relative; }
.links-cover img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.links-name {
  position: absolute;
  top: 1.25rem;
  left: var(--gutter);
  font-size: clamp(2.75rem, 13vw, 4.5rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.links-claim {
  position: relative;
  margin: -1.5rem var(--gutter) var(--space-m);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.12;
}

.link-block {
  display: block;
  margin: 0 var(--gutter) 0.85rem;
  padding: 1.3rem 1.4rem 1.45rem;
  border-radius: 1.5rem;
  font-size: var(--step-2);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.link-block small,
.link-row small {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
.link-block--tinte { background: var(--tinte); color: var(--wand); }
.link-block--tinte:hover { background: var(--rost); color: var(--weiss); }
.link-block--orange { background: var(--orange); color: var(--tinte); }

.link-list { margin: var(--space-m) var(--gutter) 0; padding: 0; list-style: none; }
.link-list li + li { margin-top: 1.1rem; }
.link-row {
  display: block;
  font-size: var(--step-2);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.link-row-label {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.22em;
}

details > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; flex: none; font-weight: 400; }
details[open] > summary::after { content: "–"; }
details .signup { margin-top: 1.1rem; font-size: var(--step-0); font-weight: 400; line-height: 1.5; letter-spacing: 0; }

.bare-footer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 var(--gutter) var(--space-m);
  font-size: var(--step--1);
}

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

@media (max-width: 800px) {
  [data-drift] { transform: none; }
  .window { height: 70vh; }
}

@media (max-width: 800px) {
  .ablauf--spalten { grid-template-columns: minmax(0, 1fr); }
  .grid-12 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-m); }
  .grid-12 > * { grid-column: 1 / -1; }
  /* Beide Schreibweisen müssen stehen bleiben: die schlichte Klasse allein
     überstimmt die spezifischere Reverse-Regel nicht. */
  .split-photo,
  .split-text,
  .split--reverse .split-photo,
  .split--reverse .split-text { grid-row: auto; grid-column: 1 / -1; }
  .split-photo { margin-inline: calc(-1 * var(--gutter)); }
  .split-photo--soft img,
  .split-photo--soft-rechts img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
    mask-image: linear-gradient(to bottom, transparent, #000 10%);
  }
  .ccc-photo { max-width: 22rem; }
  .teaser-b2b .section-title,
  .teaser-b2b-text,
  .newsletter-title,
  .newsletter-body,
  .footer-mark,
  .footer-col,
  .footer-col--wide { grid-column: 1 / -1; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .parallax img,
  [data-drift],
  .u-formate .spalte[data-parallax] { transform: none; }
  .window { height: auto; clip-path: none; }
  .window img { position: static; height: 60vh; }
  .js .hero-title .line > span,
  .js .hero-roles,
  .js .hero-lead,
  .js .hero-photo { opacity: 1; transform: none; transition: none; }
}

/* ---------- Angebotsseiten: Fakten, Ablauf, Fragen, Kalender ---------- */

.fakten { max-width: var(--measure); margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.fakten li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid rgb(24 27 75 / 0.2); }
.fakten li:first-child { border-top: 1px solid rgb(24 27 75 / 0.2); }
.fakten .wert { font-weight: 700; text-align: right; }
.fakten-hinweis { margin-top: var(--space-s); font-size: var(--step--1); line-height: 1.5; }

.ablauf { display: grid; gap: var(--space-m); max-width: 44rem; margin: var(--space-s) 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf > li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.ablauf > li::before { counter-increment: schritt; content: counter(schritt); color: var(--rost); font-size: var(--step-1); font-weight: 900; line-height: 1.1; }
.ablauf h3 { margin-bottom: 0.35em; font-size: var(--step-1); }

/* Abfolge nebeneinander statt untereinander: die Schritte stehen als Spalten
   mit Linie darüber, damit der Weg als Weg lesbar ist. */
.ablauf--spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); max-width: none; }
.ablauf--spalten > li { display: block; padding-top: var(--space-s); border-top: 2px solid var(--rost); }
.ablauf--spalten > li::before { display: block; margin-bottom: 0.3em; font-size: var(--step-2); }
.ablauf p { margin: 0; }

.faq { max-width: var(--measure); margin-top: var(--space-s); }
.faq details { border-bottom: 1px solid rgb(24 27 75 / 0.2); }
.faq details:first-of-type { border-top: 1px solid rgb(24 27 75 / 0.2); }
.faq summary { padding: 0.9rem 0; font-weight: 700; }
.faq p { margin: 0 0 1.1rem; }

.kalender { margin-top: var(--space-s); }
.kalender-hinweis { max-width: var(--measure); margin-top: var(--space-s); font-size: var(--step--1); line-height: 1.5; }
.kalender-eingebettet { margin-top: var(--space-m); min-height: 30rem; }

.spalten { row-gap: var(--space-m); margin-top: var(--space-s); }
.spalte { grid-column: span 4; }
.spalte h3 { margin-bottom: 0.4em; font-size: var(--step-1); }
.spalte p { margin: 0; }
@media (max-width: 800px) { .spalte { grid-column: 1 / -1; } }

/* ---------- Kontaktformular ---------- */

.kontakt { max-width: 34rem; margin-top: var(--space-s); }
.feld { margin: 0 0 var(--space-s); max-width: none; }
.feld label { display: block; margin-bottom: 0.35em; font-weight: 700; }
.feld input,
.feld textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 2px solid var(--tinte);
  border-radius: 1rem;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 var(--step-0)/1.5 var(--font);
}
.feld input { border-radius: 999px; }

/* ---------- Seitenbausteine aus Runde 3 ---------- */

q { quotes: "„" "“" "‚" "‘"; }

.split--wide-text .split-text { grid-column: 1 / span 7; }
.split--wide-text .split-photo { grid-column: 9 / span 4; }

.caps-heading { font-size: var(--step-2); letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase; }
.caps-klein { margin: var(--space-m) 0 0.6em; font-size: var(--step--1); font-variant-caps: all-small-caps; letter-spacing: 0.1em; }

/* Große, luftige Absätze: wenig Text pro Zeile, der Teil soll treffen. */
.gross { max-width: 22em; margin-bottom: 1.1em; font-size: var(--step-1); line-height: 1.35; }

/* Hervorgehobener Satz am Ende eines Abschnitts. */
.hervor {
  max-width: 26em;
  margin-top: var(--space-m);
  padding-left: var(--space-s);
  border-left: 3px solid var(--rost);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}

.cta-zeile { max-width: none; margin-top: var(--space-m); }
.statement-cta { max-width: none; margin: var(--space-m) 0 0; text-align: right; }
.formate-cta { margin-top: var(--space-m); }
.spalten--2 .spalte { grid-column: span 6; }

.liste { max-width: var(--measure); margin: 0 0 1em; padding-left: 1.2em; }
.liste li { margin: 0.4em 0; }
.liste li::marker { color: var(--rost); }
.liste--ja,
.liste--nein { padding-left: 0; list-style: none; }
.liste--ja li,
.liste--nein li { position: relative; padding-left: 1.6em; }
.liste--ja li::before,
.liste--nein li::before { position: absolute; left: 0; font-weight: 700; }
.liste--ja li::before { content: "✓"; color: var(--tinte); }
.liste--nein li::before { content: "✗"; color: var(--rost); }

.gegenueber { display: grid; gap: 1.1rem; max-width: 56rem; margin: var(--space-s) 0 var(--space-m); padding: 0; list-style: none; }
.gegenueber li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: baseline; font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
.gegenueber .vs { color: var(--rost); font-size: var(--step--1); font-weight: 400; }

@media (max-width: 800px) {
  .split--wide-text .split-text,
  .split--wide-text .split-photo,
  .spalten--2 .spalte { grid-column: 1 / -1; }
  .statement-cta { text-align: left; }
  .gegenueber li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Header auf schmalen Handys: alles bleibt in einer Zeile ---------- */

@media (max-width: 520px) {
  .btn-kontakt,
  .menu-toggle { letter-spacing: 0.04em; }
}

@media (max-width: 380px) {
  .site-header { gap: 0.375rem; }
  .wordmark { font-size: 0.875rem; letter-spacing: 0; }
  .nav-main { gap: 0.375rem; }
  .btn-kontakt { padding: 0.4em 0.8em 0.5em; font-size: 0.9375rem; }
  .menu-toggle { padding: 0.35em 0.6em 0.45em; font-size: 0.9375rem; }
}

/* ---------- Angebote mit Preis und Button: Einzeltermin und Paket untereinander ---------- */

.optionen { max-width: 48rem; margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.option { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 2rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid rgb(24 27 75 / 0.2); }
.option:first-child { border-top: 1px solid rgb(24 27 75 / 0.2); }
.option h3 { margin-bottom: 0.25em; font-size: var(--step-1); }
.option-text p { margin: 0; }
.option-aktion { display: flex; align-items: center; gap: 1.25rem; }
.option-preis { margin: 0; font-size: var(--step-1); font-weight: 900; line-height: 1.1; white-space: nowrap; text-align: right; }
.option-statt { display: block; font-size: var(--step--1); font-weight: 400; }
.btn--linie { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); white-space: nowrap; }
.btn--linie:hover { background: var(--tinte); color: var(--wand); }

@media (max-width: 800px) {
  .option { grid-template-columns: 1fr; }
  .option-aktion { justify-content: space-between; }
  .option-preis { text-align: left; }
}

/* Preis und Knopf passen auf schmalen Handys nicht nebeneinander */
@media (max-width: 520px) {
  .option-aktion { flex-wrap: wrap; gap: 0.75rem; }
  .btn--linie { white-space: normal; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ---------- */

.rechtstext { max-width: calc(var(--max) + 2 * var(--gutter)); }
.rechtstext h2 { margin: 2.2em 0 0.5em; font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.2; }
.rechtstext h3 { margin: 1.6em 0 0.4em; font-size: var(--step-0); letter-spacing: 0; line-height: 1.3; }
.rechtstext ul { max-width: var(--measure); padding-left: 1.2em; }
.rechtstext .hinweis {
  max-width: var(--measure);
  margin-top: 1.4em;
  padding: var(--space-s);
  border-left: 3px solid var(--rost);
  background: rgb(24 27 75 / 0.04);
}
.formular-muster {
  max-width: var(--measure);
  margin-top: var(--space-s);
  padding: var(--space-s);
  border: 1px solid rgb(24 27 75 / 0.3);
}
.formular-muster p { margin: 0 0 0.9em; }
.formular-muster .feldlinie { height: 1.8em; margin: 0 0 0.9em; border-bottom: 1px solid rgb(24 27 75 / 0.4); }
.formular-muster .muster-fussnote { margin-bottom: 0; font-size: var(--step--1); }

/* ---------- Für Unternehmen: der Marker-Look der alten Seite ----------
   Rollenübersetzung der Squarespace-Seite in die Palette der Wand:
   Weiß → Wand, Grau → Praxis, Orange → Orange, Schwarz → Tinte.
   Soll der Akzent gedeckter werden, hier auf var(--rost) umstellen. */

.page-unternehmen { --akzent: var(--orange); --wandfoto: #9a9891; }

/* Unterzeilen tragen hier weniger Gewicht als auf den anderen Seiten */
.page-unternehmen .lead { font-weight: 400; }
.page-unternehmen .lead strong { font-weight: 700; }

/* Zarter Knopf in Kapitälchen, wie der Club-Knopf in der Navigation */
.btn--zart {
  padding: 0.55em 1.4em 0.65em;
  background: var(--akzent, var(--orange));
  color: var(--tinte);
  font-size: 1.0625rem;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}
.btn--zart:hover { background: var(--tinte); color: var(--akzent, var(--orange)); }

.page-unternehmen .btn--akzent { background: var(--akzent); color: var(--tinte); }
.page-unternehmen .btn--akzent:hover { background: var(--tinte); color: var(--akzent); }
.page-unternehmen .btn--hell { background: var(--weiss); color: var(--tinte); }
.page-unternehmen .btn--hell:hover { background: var(--tinte); color: var(--weiss); }

.page-unternehmen .caps-heading { color: var(--akzent); }
.page-unternehmen .u-formate h3 { color: var(--akzent); }
.page-unternehmen .u-einleitung { color: var(--akzent); }

/* Absätze, die weiter über die Seite laufen sollen */
.u-breit { max-width: 48em; }

/* Textmarker: der charakteristischste Griff der alten Seite */
.page-unternehmen mark {
  padding: 0 0.12em;
  background: var(--akzent);
  color: var(--tinte);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.u-strich { background: linear-gradient(var(--akzent), var(--akzent)) 0 86% / 100% 0.14em no-repeat; }
.u-unterstrich { background: linear-gradient(var(--akzent), var(--akzent)) 0 92% / 100% 0.1em no-repeat; }

/* Das große Statement steht mittig, wie auf der alten Seite */
.page-unternehmen .u-statement { text-align: center; }
.page-unternehmen .u-gross {
  max-width: 17em;
  margin: 0 auto 0.5em;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.page-unternehmen .u-mitte { max-width: none; margin-top: var(--space-m); text-align: center; }

.page-unternehmen .u-riesig {
  font-size: var(--step-3);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Handgezeichnete Welle als Trenner zwischen den Blöcken */
.u-welle { color: var(--orange); line-height: 0; }
.u-welle svg { display: block; width: 100%; height: clamp(1.25rem, 2.5vw, 2.25rem); }

/* Hero mit der Wand aus Foto 12 (siehe Erklärung weiter unten). */
.u-hero {
  padding: var(--space-l) var(--inline);
  background: var(--wandfoto);
  color: var(--tinte);
  overflow: clip;
}
/* Der Hero trägt die Wand aus Foto 12. Das Bild ist nach links verlängert,
   indem ein Streifen vom Bildrand über die Fläche gezogen und an der
   Nahtstelle weich eingeblendet wurde. Auf schmalen Geräten steht
   stattdessen die Grundfarbe der Wand und das Foto darunter. */
/* Auf schmalen Geräten steht der Hero nicht im Zwölferraster, dort
   verschlucken die Spaltenabstände sonst die ganze Breite. */
.u-hero-inner { display: block; }
.u-hero-text { grid-column: 1 / span 12; }
.u-hero-text > p:last-child { margin-bottom: 0; }
.u-hero-foto { grid-column: 1 / -1; margin: var(--space-m) calc(-1 * var(--gutter)) calc(-1 * var(--space-l)); }
.u-hero-foto img { display: block; width: 100%; height: auto; }

@media (min-width: 801px) {
  .u-hero-inner { display: grid; align-items: center; }
  .u-hero {
    min-height: min(46vw, 40rem);
    background-image: url("/assets/img/hero-wand-2400.jpg");
    background-image: image-set(url("/assets/img/hero-wand-1600.jpg") 1x, url("/assets/img/hero-wand-3200.jpg") 2x);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    align-content: center;
  }
  .u-hero-text { grid-column: 1 / span 6; }
  .u-hero-foto { display: none; }
}

/* Foto links mit gewischtem Rand, Text rechts */
.u-foto-text { align-items: center; row-gap: var(--space-m); margin-top: var(--space-m); }
.u-foto { grid-column: 1 / span 6; margin: 0; }
.u-foto-neben { grid-column: 8 / span 5; }
.u-foto img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(
    1.5% 4%, 14% 1%, 27% 3.5%, 40% 0.5%, 53% 3%, 66% 0.8%, 79% 3.5%, 92% 1%, 98.5% 3%,
    97% 17%, 99% 32%, 97.5% 47%, 99% 62%, 97% 77%, 98.5% 92%,
    88% 96%, 75% 98.5%, 62% 96%, 49% 99%, 36% 96.5%, 23% 99%, 10% 96%, 2% 97.5%,
    3.5% 82%, 1.5% 67%, 3% 52%, 1% 37%, 2.5% 22%
  );
}

/* Die sechs Formate bekommen eigene Flächen und driften beim Scrollen
   spaltenweise unterschiedlich schnell, damit das Raster leicht atmet. */
.page-unternehmen .u-formate .spalte[data-parallax] { transform: translate3d(0, var(--parallax, 0px), 0); }
.page-unternehmen .u-formate .spalte {
  padding: var(--space-s);
  border-radius: 1.25rem;
  background: var(--weiss);
}

/* Überschrift links in Orange, Text rechts im Blocksatz */
.u-paar { margin-top: var(--space-m); row-gap: var(--space-s); align-items: start; }
.u-paar-titel {
  grid-column: 1 / span 4;
  margin: 0;
  color: var(--akzent);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.u-paar-text { grid-column: 6 / span 7; }

/* Jedes zweite Paar dreht sich: Text links, Überschrift rechts */
.u-paar--rechts .u-paar-titel { grid-column: 8 / span 5; grid-row: 1; }
.u-paar--rechts .u-paar-text { grid-column: 1 / span 6; grid-row: 1; }
.u-paar-text p { margin: 0 0 1em; text-align: justify; hyphens: auto; }
.u-paar-text p:last-child { margin-bottom: 0; }

/* Profil anfordern: der Knopf klappt das Feld für die Adresse auf */
.u-profil { margin-top: var(--space-m); }
.u-profil > summary { display: inline-flex; width: auto; }
.u-profil > summary::after,
.u-profil[open] > summary::after { content: none; }
.u-profil[open] > summary { margin-bottom: var(--space-s); }
.u-profil-form { max-width: 30rem; margin-top: 0; }

/* Kontakt auf voller Orangefläche, Schrift in Tinte wegen des Kontrasts */
.u-kontakt { padding: var(--space-l) var(--inline); background: var(--akzent); color: var(--tinte); }
.u-kontakt-inner { row-gap: var(--space-m); align-items: start; }
.u-kontakt-text { grid-column: 1 / span 5; }
.u-kontakt .u-riesig { margin-bottom: var(--space-s); text-transform: none; }
.u-kontakt-form { grid-column: 7 / span 6; max-width: none; margin-top: 0; }
.u-kontakt .feld label { color: var(--weiss); font-weight: 400; }
.u-kontakt .feld input,
.u-kontakt .feld textarea { border-color: var(--tinte); }
.u-kontakt .signup-note a { color: var(--tinte); }
.u-absenden { margin-top: var(--space-m); }

@media (max-width: 800px) {
  .u-paar--rechts .u-paar-titel { grid-row: auto; }
  .u-paar--rechts .u-paar-text { grid-row: auto; }
  .u-foto,
  .u-foto-neben,
  .u-paar-titel,
  .u-paar-text,
  .u-paar--rechts .u-paar-titel,
  .u-paar--rechts .u-paar-text,
  .u-kontakt-text,
  .u-kontakt-form { grid-column: 1 / -1; }
  .u-paar-text p { text-align: left; }
}