/* DTM Startseite – Hero "Together Window" Fassung 2 (Prototyp). Auftakt → Transition → Hero mit laufender Tapete; Spotlight als eigener Abschnitt.
   Schriften im Prototyp über Fontshare; Produktion selbst gehostet. */
:root {
  --u: clamp(1px, min(100vw / 1440, 100svh / 800), 3.56px);   /* Skala (Paket 3 + 19.10.2026): nach der knapperen Seite (Breite/1440, Höhe/800) – bis 1440 px Breite = 1 px (Design unverändert); darüber wächst alles proportional, auf Ultrawide/niedrigen Fenstern begrenzt die Höhe (Abschnitte passen ins Fenster). Neue Maße: calc(N * var(--u)) */
  --offwhite: #fbf9f5;
  --cream: #f3eee6;
  --sand: #e8dfd1;
  --beige: #cdbfab;
  --ink: #252220;       /* Anthrazit */
  --ink-2: #5f5850;
  --line: rgb(37 34 32 / .14);
  --display: "Zodiak", "Georgia", serif;
  --sans: "Satoshi", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pad: clamp(calc(16 * var(--u)), 3vw, calc(44 * var(--u)));
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: max(100%, calc(16 * var(--u))); -webkit-font-smoothing: antialiased; }   /* Grundschrift wächst mit der Skala (ch/em-Breiten), Browser-Einstellung bleibt Untergrenze */
img, video { display: block; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(3 * var(--u)); }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(72 * var(--u)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); transition: background .4s, box-shadow .4s; }
.nav.is-solid { background: rgb(243 238 230 / .9); backdrop-filter: blur(calc(14 * var(--u))) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 767px) { .nav.is-solid { background: rgb(243 238 230 / .97); backdrop-filter: none; } }   /* Handy: Weichzeichner hinter der Leiste ist beim Scrollen über Videos teuer (iPhone) */
.nav__logo img { height: calc(52 * var(--u)); width: auto; }
.nav__links { display: flex; gap: calc(30 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; padding: 0 calc(26 * var(--u)); height: calc(48 * var(--u)); align-items: center; border-radius: calc(999 * var(--u)); background: rgb(251 249 245 / .82); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(calc(10 * var(--u))); }
.nav__links a { position: relative; padding: calc(6 * var(--u)) 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__cta { justify-self: end; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: calc(999 * var(--u)); font: 500 calc(15 * var(--u))/1 var(--sans); white-space: nowrap; transition: transform .16s var(--ease-out), background .25s, color .25s; cursor: pointer; border: 0; }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); color: var(--offwhite); }
.btn--ghost { background: rgb(251 249 245 / .7); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(37 34 32 / .5); backdrop-filter: blur(calc(8 * var(--u))); }
@media (hover: hover) { .btn--ghost:hover { background: var(--offwhite); } }
.burger { display: none; }

/* ---------- Hero ---------- */
/* svh statt dvh (19.10.2026): Höhen bleiben beim Ein-/Ausblenden der Browserleiste gleich – sonst springen Hero, Spotlight und iPhone-Szene (iPhone) */
.hero { position: relative; height: 100svh; min-height: calc(600 * var(--u)); overflow: hidden; background: #d6c9b6; }   /* Fugen der Wall: warmes Sand */
.wall { position: absolute; inset: -14vh -2vw; display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: calc(12 * var(--u)); z-index: 1; will-change: transform; }
.col { display: grid; gap: calc(12 * var(--u)); align-content: start; align-self: start; will-change: transform; }   /* Höhe = Inhalt: -33,3 % = genau ein Satz */
.tile { position: relative; border-radius: calc(14 * var(--u)); overflow: hidden; background: var(--sand); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.9) contrast(1.03) sepia(.06); }
.tile--shot img { object-position: top; filter: saturate(.92); }
.tile--p { aspect-ratio: 4 / 5; }
.tile--t { aspect-ratio: 3 / 5; }
.tile--s { aspect-ratio: 9 / 15; }
/* Handle als Beschriftung – erst in der Tapete sichtbar, nicht im Auftakt-Wort */
.tile__who { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(12 * var(--u)); z-index: 2; color: #fff; font: 700 calc(15 * var(--u))/1.2 var(--sans); letter-spacing: -0.01em; text-shadow: 0 1px calc(10 * var(--u)) rgb(0 0 0 / .45); opacity: 0; transition: opacity .8s .2s; }
.tile:has(.tile__who)::after { content: ""; position: absolute; inset: 62% 0 0 0; background: linear-gradient(transparent, rgb(37 34 32 / .38)); opacity: 0; transition: opacity .8s .2s; }
.is-final .col--tapete .tile__who, .is-final .col--tapete .tile:has(.tile__who)::after { opacity: 1; }

.mask { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.mask .paper { fill: var(--cream); }
.mask text { font-family: var(--display); font-weight: 900; letter-spacing: -0.035em; }
.mask .outline text { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; transition: opacity .8s; }
.is-final .mask .outline text { opacity: .8; }                     /* kleines Wort: Kontur trägt die Lesbarkeit */

/* Aussage: im Auftakt stehen die Zeilen über dem großen Wort, in der Tapete links (Positionen per JS) */
/* Bis das Skript Auftakt bzw. Endzustand gesetzt hat (wartet auf die Schrift), Hero-Text verbergen – sonst blitzt erst der Endzustand auf (Nutzer 20.10.2026).
   Notfall: nach 5 s trotzdem zeigen, falls das Skript nicht startet. */
.js .hero:not(.is-ready) .hero-copy, .js .hero:not(.is-ready) .pause--hero { visibility: hidden; animation: hero-zeigen 0s 5s forwards; }
@keyframes hero-zeigen { to { visibility: visible; } }
.hero-copy { position: absolute; z-index: 5; left: var(--pad); bottom: var(--copyB, calc(56 * var(--u))); width: var(--copyW, calc(560 * var(--u))); }
.claim { margin: 0 0 calc(26 * var(--u)); font: 400 var(--claimF, calc(96 * var(--u)))/.98 var(--display); letter-spacing: -0.025em; }
.claim__l { display: block; width: max-content; transform-origin: 0 0; }
.claim__slot { display: block; width: var(--slotW, auto); height: var(--slotH, auto); margin-top: .06em; font: 900 var(--slotF, 1em)/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; }
.js .claim__slot { color: transparent; }                         /* sichtbar ist das Wort-Fenster der SVG-Maske */
.lead { margin: 0 0 calc(26 * var(--u)); max-width: 34ch; font-size: calc(18 * var(--u)); line-height: 1.5; color: var(--ink-2); }
.ctas { display: flex; gap: calc(12 * var(--u)); flex-wrap: wrap; }
.meta { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin: calc(28 * var(--u)) 0 0; }
.pill { font-size: calc(13 * var(--u)); font-weight: 500; padding: calc(9 * var(--u)) calc(15 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(251 249 245 / .8); box-shadow: inset 0 0 0 1px var(--line); }
.pill b { font-weight: 700; }

/* Pause (WCAG 2.2.2) */
.pause { z-index: 6; height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(999 * var(--u)); border: 0; background: rgb(251 249 245 / .85); box-shadow: inset 0 0 0 1px var(--line); font: 500 calc(12 * var(--u))/1 var(--sans); color: var(--ink); display: inline-flex; gap: calc(8 * var(--u)); align-items: center; cursor: pointer; }
.pause--hero { position: absolute; right: var(--pad); bottom: calc(22 * var(--u)); }
.pause[hidden] { display: none; }
.pause i { width: calc(8 * var(--u)); height: calc(10 * var(--u)); border-left: calc(2.5 * var(--u)) solid var(--ink); border-right: calc(2.5 * var(--u)) solid var(--ink); }
.pause[aria-pressed="true"] i { border: 0; width: 0; height: 0; border-left: calc(9 * var(--u)) solid var(--ink); border-top: calc(5.5 * var(--u)) solid transparent; border-bottom: calc(5.5 * var(--u)) solid transparent; }
.rm .pause { display: none; }

/* ---------- Talent Spotlight (eigener Abschnitt) ---------- */
.spot { position: relative; overflow-x: clip; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(36 * var(--u)) 6vw; align-items: center; padding: clamp(calc(88 * var(--u)), 11vh, calc(120 * var(--u))) var(--pad) calc(48 * var(--u)); background: var(--cream); }
.spot__frame { position: relative; z-index: 2; width: min(100%, calc((100svh - calc(330 * var(--u))) * .8));   /* Porträt + Band passen in einen Bildschirm */ aspect-ratio: 4 / 5; border-radius: calc(18 * var(--u)); overflow: hidden; background: var(--sand); box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-34 * var(--u)) rgb(37 34 32 / .45); }
.spot__frame > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot__frame img { object-fit: cover; object-position: 50% 22%; filter: saturate(.92) contrast(1.03) sepia(.05); }
/* Platzhalter für Talents ohne Porträt (A-02): typografische Karte, kein KI-Gesicht, kein Screenshot */
.ph { display: grid; place-content: center; justify-items: center; text-align: center; padding: calc(24 * var(--u)); background: linear-gradient(165deg, var(--sand), #dccfbb); }
.ph__i { font: 900 clamp(calc(120 * var(--u)), 16vw, calc(240 * var(--u)))/.9 var(--display); letter-spacing: -0.05em; }
.ph__h { margin-top: calc(8 * var(--u)); font: italic 400 clamp(calc(18 * var(--u)), 1.8vw, calc(24 * var(--u)))/1.2 var(--display); }
.ph__n { margin-top: calc(16 * var(--u)); padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.spot__text { min-width: 0; }
/* Auftakt: großer Titel über dem Band (Position per JS), fliegt in die Kennzeile */
.spot__intro { position: absolute; left: 0; right: 0; top: var(--introTop, 18vh); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); pointer-events: none; }
.spot__introSub { font: 500 calc(13 * var(--u))/1 var(--sans); color: var(--ink-2); letter-spacing: .02em; }
.spot__introT { font: 400 clamp(calc(48 * var(--u)), min(7.4vw, 13vh), calc(124 * var(--u)))/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; transform-origin: 0 0; }
.rm .spot__intro, .no-js .spot__intro { display: none; }
#spotKicker { margin-right: .3em; }                                  /* Flex verschluckt das Leerzeichen vor dem Punkt */
/* Während des Auftakts hat das Gesicht seinen Platz im Band verlassen (es wird zum Porträt); am Ende füllt er sich wieder */
.js:not(.rm) .spot:not(.is-ready):not(.is-lauf) .band__item[aria-current] { opacity: 0; }
/* Band läuft im Auftakt (is-lauf): alle Bilder gleich, kein Porträt darüber, wischbar; sobald das Porträt wächst, steht das Band */
.js:not(.rm) .spot.is-lauf .spot__frame { visibility: hidden; }
.js:not(.rm) .spot.is-lauf .band__item { opacity: 1; transition: transform .35s var(--ease-out); }
.js:not(.rm) .spot.is-lauf .band__item[aria-current]::after { box-shadow: none; transition: none; }
.js:not(.rm) .spot:not(.is-ready):not(.is-lauf) .band__scroller { overflow-x: hidden; touch-action: pan-y; }
.js:not(.rm) .spot:not(.is-ready) .spot__text, .js:not(.rm) .spot:not(.is-ready) .band__head { pointer-events: none; }
.js:not(.rm) .spot:not(.is-ready) .spot__frame { cursor: pointer; }
.band__item { transition: transform .35s var(--ease-out), opacity .45s; }
.spot__over { display: flex; align-items: center; font: 500 calc(13 * var(--u))/1 var(--sans); color: var(--ink-2); margin: 0 0 calc(18 * var(--u)); font-variant-numeric: tabular-nums; }
.spot__over [data-f="num"] { margin: 0 .3em; color: var(--ink); }
.spot__prog { position: relative; width: calc(72 * var(--u)); height: 1px; margin-left: calc(16 * var(--u)); background: var(--line); overflow: hidden; }
.spot__prog i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.rm .spot__prog, .no-js .spot__prog { display: none; }
.spot__name { margin: 0; font: 900 clamp(calc(56 * var(--u)), min(10vw, 17vh), calc(160 * var(--u)))/0.86 var(--display); letter-spacing: -0.045em; white-space: nowrap; }
.spot__name .row { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.1em; }   /* Platz für Unterlängen (g, y) */
.spot__name .row > span, .sw, .sw-n { display: inline-block; }
.spot__handle { margin: calc(10 * var(--u)) 0 0; font: italic 400 clamp(calc(22 * var(--u)), 2.2vw, calc(32 * var(--u)))/1.2 var(--display); }
.spot__quote { margin: calc(26 * var(--u)) 0 0; max-width: 46ch; min-height: 3.1em; font-size: calc(17 * var(--u)); line-height: 1.55; color: var(--ink-2); }
.spot__stats { display: flex; margin: calc(30 * var(--u)) 0 calc(6 * var(--u)); max-width: calc(560 * var(--u)); }
.spot__stats div { flex: 1; padding: calc(14 * var(--u)) calc(18 * var(--u)) 0 0; border-top: 1px solid var(--ink); }
.spot__stats div + div { padding-left: calc(18 * var(--u)); border-left: 1px solid var(--line); }
.spot__stats b { display: block; font: 700 clamp(calc(26 * var(--u)), 2.4vw, calc(36 * var(--u)))/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.spot__stats span { font-size: calc(12 * var(--u)); color: var(--ink-2); }
.spot__stand { font-size: calc(11 * var(--u)); color: var(--ink-2); margin: calc(8 * var(--u)) 0 calc(26 * var(--u)); }
.spot__ctas { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.tags, .tags__in { display: flex; gap: calc(8 * var(--u)); }
.tags { margin-top: calc(14 * var(--u)); min-height: calc(28 * var(--u)); }
.tag { font-size: calc(12 * var(--u)); font-weight: 500; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); box-shadow: inset 0 0 0 1px var(--line); }

/* Talent-Band: läuft langsam endlos; Klick/Tippen holt ein Talent ins Spotlight */
.band { grid-column: 1 / -1; min-width: 0; margin: 0 calc(-1 * var(--pad)); --bandH: calc(104 * var(--u)); }
.band__head { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); margin: 0 var(--pad) calc(12 * var(--u)); }
.band__cap { margin: 0; font: 500 calc(12 * var(--u))/1 var(--sans); color: var(--ink-2); }
.no-js .band { display: none; }
.band__scroller { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent); }
.band__scroller::-webkit-scrollbar { display: none; }
.rm .band__scroller { padding: 0 var(--pad); }
.band__track, .band__set { display: flex; gap: calc(10 * var(--u)); width: max-content; }
.band__track { padding: calc(4 * var(--u)) 0; }
.band__item { position: relative; flex: none; height: var(--bandH); width: calc(var(--bandH) * .8); aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: calc(10 * var(--u)); overflow: hidden; background: var(--sand); cursor: pointer; transition: transform .35s var(--ease-out), opacity .35s; opacity: .78; }
.band__item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.9) contrast(1.03) sepia(.06); }
.band__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .35s; }
.band__item[aria-current="true"] { opacity: 1; }
.band__item[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 calc(4 * var(--u)) var(--offwhite); }
.band__item:focus-visible { outline-offset: 2px; opacity: 1; }
@media (hover: hover) { .band__item:hover { opacity: 1; transform: translateY(calc(-3 * var(--u))); } }
.band__item:active { transform: scale(.96); }
.band__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(3 * var(--u)); background: linear-gradient(165deg, var(--sand), #dccfbb); color: var(--ink); }
.band__ph b { font: 900 calc(var(--bandH) * .44)/.9 var(--display); letter-spacing: -0.04em; }
.band__ph small { font-size: calc(9 * var(--u)); font-weight: 500; color: var(--ink-2); }

/* ---------- Leistungen für Talents: iPhone-Szene ---------- */
/* Blatt: schiebt sich mit runden Ecken über den Hero */
.svc { position: relative; z-index: 10; overflow-x: clip; background: var(--cream); border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; box-shadow: 0 calc(-40 * var(--u)) calc(80 * var(--u)) calc(-40 * var(--u)) rgb(37 34 32 / .35); }
.svc__stage { --phoneH: min(62svh, calc(600 * var(--u))); --phoneW: calc(var(--phoneH) * .49);
  position: relative; height: 100svh; min-height: calc(620 * var(--u)); display: grid;
  grid-template-columns: minmax(0, 1fr) var(--phoneW) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "hl phone hr" "c1 phone c3" "c2 phone c4" "foot foot foot";
  column-gap: clamp(calc(32 * var(--u)), 4.4vw, calc(72 * var(--u))); row-gap: calc(14 * var(--u)); padding: calc(92 * var(--u)) var(--pad) calc(28 * var(--u)); }
.svc__head { align-self: end; }
.svc__head--l { grid-area: hl; }
.svc__head--r { grid-area: hr; text-align: right; }
.svc__over { margin: 0 0 calc(18 * var(--u)); font: 500 calc(13 * var(--u))/1.3 var(--sans); color: var(--ink-2); }
.svc__quote { margin: 0; font: 400 clamp(calc(40 * var(--u)), min(4.7vw, 9vh), calc(80 * var(--u)))/.98 var(--display); letter-spacing: -0.03em; }
.svc__quote .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.svc__quote .ln > span { display: inline-block; }
.svc__quote--r .w { display: inline-block; white-space: nowrap; }   /* Buchstaben-Spans dürfen nicht umbrechen */
.svc__quote--r em { display: block; font-style: italic; }
.svc__quote .ch { display: inline-block; will-change: transform; }

/* iPhone (reines CSS): Titanrahmen, schwarzer Rand, Dynamic Island, Tasten, Spiegelung */
.svc__phone { grid-area: phone; align-self: center; justify-self: center; position: relative; width: var(--phoneW); height: var(--phoneH); perspective: calc(1600 * var(--u)); }
.phone { --W: var(--phoneW); position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.phone__frame { position: absolute; inset: 0; border-radius: calc(var(--W) * .17); padding: calc(3 * var(--u));
  background: linear-gradient(140deg, #b7aea4 0%, #5a544e 22%, #8f867d 48%, #3e3a36 74%, #a59b91 100%);
  box-shadow: 0 calc(60 * var(--u)) calc(90 * var(--u)) calc(-50 * var(--u)) rgb(37 34 32 / .6), 0 calc(26 * var(--u)) calc(40 * var(--u)) calc(-26 * var(--u)) rgb(37 34 32 / .4); }
.phone__frame::before { content: ""; position: absolute; inset: calc(3 * var(--u)); border-radius: calc(var(--W) * .17 - calc(3 * var(--u))); background: #0b0a0a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.phone__screen { position: absolute; inset: calc(calc(3 * var(--u)) + var(--W) * .036); border-radius: calc(var(--W) * .135); overflow: hidden; background: #111; }
.phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.phone__island { position: absolute; top: calc(calc(3 * var(--u)) + var(--W) * .066); left: 50%; width: calc(var(--W) * .3); height: calc(var(--W) * .088); border-radius: calc(999 * var(--u)); background: #000; transform: translateX(-50%); }
.phone__status { position: absolute; inset: 0 0 auto; height: calc(var(--W) * .155); padding: 0 calc(var(--W) * .085); display: flex; justify-content: space-between; align-items: center;
  color: #fff; font: 600 calc(var(--W) * .047)/1 var(--sans); text-shadow: 0 1px calc(4 * var(--u)) rgb(0 0 0 / .35); }
.phone__icons { display: flex; gap: calc(var(--W) * .012); align-items: flex-end; }
.phone__icons i { width: calc(var(--W) * .011); background: #fff; border-radius: 1px; }
.phone__icons i:nth-child(1) { height: calc(var(--W) * .018); } .phone__icons i:nth-child(2) { height: calc(var(--W) * .026); } .phone__icons i:nth-child(3) { height: calc(var(--W) * .034); }
.phone__icons b { width: calc(var(--W) * .07); height: calc(var(--W) * .033); margin-left: calc(var(--W) * .02); border-radius: calc(3 * var(--u)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); background: linear-gradient(90deg, #fff 72%, transparent 72%) no-repeat center / calc(100% - calc(4 * var(--u))) calc(100% - calc(4 * var(--u))); }
.phone__glare { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / .07) 26%, transparent 42%); transform: translateX(var(--glare, 0%)); mix-blend-mode: screen; }
.phone__btn { position: absolute; width: calc(3 * var(--u)); border-radius: 2px; background: linear-gradient(90deg, #4a4540, #a39a90); }
.phone__btn--a { left: -2px; top: 18%; height: 5%; } .phone__btn--b { left: -2px; top: 26%; height: 9%; } .phone__btn--c { left: -2px; top: 37%; height: 9%; }
.phone__btn--p { right: -2px; top: 29%; height: 14%; background: linear-gradient(90deg, #a39a90, #4a4540); }
.phone__shadow { position: absolute; left: 12%; right: 12%; bottom: -5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(37 34 32 / .32), transparent); filter: blur(calc(6 * var(--u))); z-index: -1; }

/* Leistungen als Karten (eine Liste, im Raster links/rechts verteilt) */
.svc__cards { display: contents; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(calc(16 * var(--u)), 1.6vw, calc(26 * var(--u))) clamp(calc(20 * var(--u)), 1.9vw, calc(30 * var(--u)));
  border-radius: calc(22 * var(--u)); background: var(--offwhite); box-shadow: inset 0 0 0 1px var(--line), 0 calc(26 * var(--u)) calc(44 * var(--u)) calc(-34 * var(--u)) rgb(37 34 32 / .4); will-change: transform; }
.card:nth-child(1) { grid-area: c1; } .card:nth-child(2) { grid-area: c2; } .card:nth-child(3) { grid-area: c3; } .card:nth-child(4) { grid-area: c4; }
.card__no { position: absolute; top: calc(12 * var(--u)); right: calc(20 * var(--u)); font: italic 400 clamp(calc(34 * var(--u)), 3.2vw, calc(54 * var(--u)))/1 var(--display); color: rgb(37 34 32 / .16); }
.card h3 { margin: 0 0 calc(8 * var(--u)); padding-right: calc(56 * var(--u)); font: 700 clamp(calc(18 * var(--u)), min(1.6vw, 2.8vh), calc(25 * var(--u)))/1.15 var(--display); letter-spacing: -0.015em; }
.card p { margin: 0; font-size: clamp(calc(13 * var(--u)), min(1.05vw, 1.8vh), calc(15.5 * var(--u))); line-height: 1.5; color: var(--ink-2); }

.svc__foot { grid-area: foot; display: flex; justify-content: center; align-items: center; gap: calc(28 * var(--u)); padding-top: calc(12 * var(--u)); }
.svc__text { margin: 0; max-width: 52ch; font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--ink-2); }

/* ---------- Darum DTM – "Alles dreht sich um dich": Bogen-Porträt + Schriftring in der Mitte, Vorteile als editoriale Zeilen (Sand) ---------- */
.why { position: relative; overflow-x: clip; background: var(--sand); }
.why__stage { position: relative; height: 100svh; min-height: calc(640 * var(--u)); display: flex; flex-direction: column; padding: calc(96 * var(--u)) var(--pad) calc(32 * var(--u)); }
.why__head { text-align: center; }
.why__over { margin: 0 0 calc(14 * var(--u)); font: 500 calc(13 * var(--u))/1.3 var(--sans); color: var(--ink-2); }
.why__h { margin: 0; font: 400 clamp(calc(32 * var(--u)), min(3.6vw, 6.4vh), calc(58 * var(--u)))/1.05 var(--display); letter-spacing: -0.025em; }
.why__sub { margin: calc(12 * var(--u)) auto 0; max-width: 60ch; font-size: calc(17 * var(--u)); line-height: 1.5; color: var(--ink-2); }
.spread { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(calc(32 * var(--u)), 4.5vw, calc(80 * var(--u))); margin-top: clamp(calc(8 * var(--u)), 2vh, calc(24 * var(--u))); }
/* Mitte: Bogen-Porträt mit wechselnden echten Gesichtern, Schriftring, Knopf */
.center { --R: clamp(calc(130 * var(--u)), min(13vw, 22vh), calc(220 * var(--u))); display: flex; flex-direction: column; align-items: center; gap: clamp(calc(8 * var(--u)), 1.6vh, calc(16 * var(--u))); }
.center__ring { position: relative; width: calc(var(--R) * 2.36); aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; pointer-events: none; }   /* Ring darf die Vorteil-Zeilen nicht verdecken */
.ring text { font: 500 calc(12.5 * var(--u))/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; fill: rgb(37 34 32 / .62); }
.arch { position: relative; width: calc(var(--R) * 1.22); height: calc(var(--R) * 1.6); border-radius: calc(999 * var(--u)) calc(999 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)); overflow: hidden; background: #d6c9b6;
  box-shadow: 0 calc(40 * var(--u)) calc(70 * var(--u)) calc(-40 * var(--u)) rgb(37 34 32 / .55), 0 0 0 calc(6 * var(--u)) rgb(251 249 245 / .55); will-change: transform; }
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.9) contrast(1.03) sepia(.06); opacity: 0; }
.arch img.is-on { opacity: 1; }
.arch__du { position: absolute; z-index: 2; left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); font: italic 400 clamp(calc(18 * var(--u)), min(1.5vw, 2.6vh), calc(24 * var(--u)))/1 var(--display);
  background: rgb(251 249 245 / .82); backdrop-filter: blur(calc(12 * var(--u))) saturate(1.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.center__foot { display: flex; align-items: center; gap: calc(22 * var(--u)); width: calc(var(--R) * 2.8); }   /* feste Breite: wechselnde Sätze dürfen die Mittelspalte nicht verbreitern/verschmälern (sonst brechen die Vorteile neu um) */
.center__text { margin: 0; flex: 1; min-height: 4.35em; font-size: clamp(calc(13 * var(--u)), min(1vw, 1.75vh), calc(14.5 * var(--u))); line-height: 1.45; color: var(--ink-2); text-align: left; }
.center__text b { display: block; margin-bottom: 2px; font: italic 400 1.35em/1.15 var(--display); color: var(--ink); }
.center__cta { height: calc(46 * var(--u)); padding: 0 calc(24 * var(--u)); }
/* Vorteile: editoriale Zeilen mit Haarlinien; links gespiegelt (Nummer zur Mitte) */
.spread__col { list-style: none; margin: 0; padding: 0; }
.ben { position: relative; border-top: 1px solid rgb(37 34 32 / .16); }
.ben:last-child { border-bottom: 1px solid rgb(37 34 32 / .16); }
.ben::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .5s var(--ease-out); }
.spread__col--l .ben::before { transform-origin: 100% 50%; } .spread__col--r .ben::before { transform-origin: 0 50%; }
.ben__btn { width: 100%; display: flex; align-items: baseline; gap: calc(16 * var(--u)); padding: clamp(calc(12 * var(--u)), 2.3vh, calc(24 * var(--u))) 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: opacity .4s; }
.spread__col--l .ben__btn { flex-direction: row-reverse; text-align: right; }
.ben__no { flex: none; min-width: 2ch; font: italic 400 calc(15 * var(--u))/1 var(--display); color: var(--ink-2); }
.ben__body { display: flex; flex-direction: column; }
.ben__t { display: grid; font: 400 clamp(calc(19 * var(--u)), min(1.85vw, 3.3vh), calc(30 * var(--u)))/1.12 var(--display); letter-spacing: -0.015em; }
.ben__t > span { grid-area: 1 / 1; }
.ben__ghost { font-style: italic; visibility: hidden; }             /* Platzhalter: Zeile ist immer so hoch wie ihre Kursivfassung */
.ben__d { display: none; margin-top: calc(8 * var(--u)); font: 400 calc(14.5 * var(--u))/1.5 var(--sans); color: var(--ink-2); }
.spread.has-on .ben__btn { opacity: .36; }
.ben.is-on .ben__btn { opacity: 1; }
.ben.is-on .ben__t { font-style: italic; }
.ben.is-on::before { transform: scaleX(1); }
@media (hover: hover) { .ben__btn:hover .ben__t { font-style: italic; } }
.rm .ring { transform: none; }

/* ---------- Stimmen der Talents – Cover-Schlagzeile: Kernzeile riesig, Porträt darüber (wie das Model vor dem Magazintitel) ---------- */
.voices { --photoW: clamp(calc(220 * var(--u)), 21vw, calc(330 * var(--u))); position: relative; overflow-x: clip; background: var(--cream); padding: clamp(calc(64 * var(--u)), 9vh, calc(110 * var(--u))) var(--pad) clamp(calc(60 * var(--u)), 8vh, calc(96 * var(--u))); }
.voices__top { text-align: center; margin-bottom: clamp(calc(10 * var(--u)), 2vh, calc(22 * var(--u))); }
.voices__over { margin: 0 0 calc(8 * var(--u)); font: 500 calc(13 * var(--u))/1.3 var(--sans); color: var(--ink-2); }
.voices__h { margin: 0; font: italic 400 clamp(calc(19 * var(--u)), 1.6vw, calc(24 * var(--u)))/1.2 var(--display); color: var(--ink-2); }
.cover { position: relative; z-index: 1; }
.cover__line { margin: 0; text-align: center; white-space: nowrap; font: italic 400 var(--coverF, calc(200 * var(--u)))/.95 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.cover__line .ch { display: inline-block; text-align: center; transition: width .5s var(--ease-out); }
.cover__row { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) var(--photoW) minmax(0, 1fr); column-gap: clamp(calc(28 * var(--u)), 4vw, calc(64 * var(--u))); max-width: calc(1360 * var(--u)); margin: 0 auto; }
/* Porträt steht unter der Schlagzeile (wie auf dem Handy), Abstand hält die Unterlängen (p, y, g) frei */
.cover__photo { position: relative; margin: calc(var(--coverF, calc(200 * var(--u))) * 0.28) 0 0; width: var(--photoW); aspect-ratio: 4 / 5; border-radius: calc(24 * var(--u)); overflow: hidden; background: var(--sand);
  box-shadow: 0 0 0 calc(9 * var(--u)) var(--cream), 0 calc(50 * var(--u)) calc(80 * var(--u)) calc(-44 * var(--u)) rgb(37 34 32 / .55); }
.cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.92) contrast(1.03) sepia(.05); }
.cover__side { align-self: end; padding-bottom: calc(6 * var(--u)); }
.cover__side--l { display: flex; justify-content: flex-end; }
.voice__q { margin: 0; }
.voice__q p { margin: 0; max-width: 36ch; font: 400 clamp(calc(17 * var(--u)), min(1.4vw, 2.5vh), calc(22 * var(--u)))/1.45 var(--display); letter-spacing: -0.01em; }
.voice__q .vw { display: inline-block; will-change: filter, opacity; }
.voice__who { margin: calc(16 * var(--u)) 0 0; font-size: calc(14 * var(--u)); color: var(--ink-2); }
.voice__who b { margin-right: calc(6 * var(--u)); font: 700 calc(17 * var(--u)) var(--display); color: var(--ink); }
.voice__tabs { display: flex; gap: calc(12 * var(--u)); }
.vtab { position: relative; width: calc(58 * var(--u)); height: calc(58 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: .55; transition: opacity .35s, transform .35s var(--ease-out); }
.vtab img { position: absolute; inset: calc(5 * var(--u)); width: calc(100% - calc(10 * var(--u))); height: calc(100% - calc(10 * var(--u))); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.vtab svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vtab circle { fill: none; stroke-width: 1.5; }
.vtab .bg { stroke: rgb(37 34 32 / .15); }
.vtab .fg { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 1; }
.vtab[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { .vtab:hover { opacity: 1; transform: translateY(-2px); } }

/* ---------- Fragen: editoriale Liste mit Haarlinien ---------- */
.faq { background: var(--cream); padding: clamp(calc(72 * var(--u)), 10vh, calc(116 * var(--u))) var(--pad) clamp(calc(48 * var(--u)), 7vh, calc(84 * var(--u))); border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6vw; max-width: calc(1360 * var(--u)); margin: 0 auto; align-items: start; }
.faq__head { position: sticky; top: calc(110 * var(--u)); }
.faq__over { margin: 0 0 calc(12 * var(--u)); font: 500 calc(13 * var(--u))/1.3 var(--sans); color: var(--ink-2); }
.faq__h { margin: 0; font: 400 clamp(calc(44 * var(--u)), 5vw, calc(84 * var(--u)))/.98 var(--display); letter-spacing: -0.03em; }
.faq__more { margin: calc(22 * var(--u)) 0 0; font-size: calc(15 * var(--u)); color: var(--ink-2); }
.faq__more a { color: var(--ink); border-bottom: 1px solid rgb(37 34 32 / .35); padding-bottom: 1px; }
.faq__list { border-top: 1px solid rgb(37 34 32 / .18); }
.qa { position: relative; border-bottom: 1px solid rgb(37 34 32 / .18); }
.qa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.qa.is-open::after { transform: scaleX(1); }
.qa__h { margin: 0; }
.qa__q { width: 100%; display: flex; align-items: center; gap: calc(22 * var(--u)); padding: clamp(calc(18 * var(--u)), 2.8vh, calc(28 * var(--u))) 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.qa__no { flex: none; width: 2.2ch; font: italic 400 calc(16 * var(--u))/1 var(--display); color: var(--ink-2); }
.qa__t { flex: 1; font: 400 clamp(calc(20 * var(--u)), 1.9vw, calc(30 * var(--u)))/1.2 var(--display); letter-spacing: -0.015em; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .qa__q:hover .qa__t { transform: translateX(calc(6 * var(--u))); } }
.qa__icon { position: relative; flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(37 34 32 / .25); transition: transform .45s var(--ease-out), background .3s, box-shadow .3s; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(12 * var(--u)); height: 1.5px; margin: -.75px 0 0 calc(-6 * var(--u)); background: var(--ink); transition: background .3s; }
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon { transform: rotate(135deg); background: var(--ink); box-shadow: none; }
.qa.is-open .qa__icon::before, .qa.is-open .qa__icon::after { background: var(--offwhite); }
.qa__a { overflow: hidden; }
.qa__a p { margin: 0; padding: 0 calc(56 * var(--u)) clamp(calc(20 * var(--u)), 3vh, calc(30 * var(--u))) calc(2.2ch + calc(22 * var(--u))); font-size: calc(16 * var(--u)); line-height: 1.6; color: var(--ink-2); }
.qa__ph { font-style: italic; }

/* ---------- Finale: "together." mit den Gesichtern in den Buchstaben (Klammer zum Hero), dann "Werde Talent" ---------- */
.finale { position: relative; overflow-x: clip; background: var(--cream); padding: clamp(calc(44 * var(--u)), 6vh, calc(80 * var(--u))) var(--pad) clamp(calc(72 * var(--u)), 10vh, calc(116 * var(--u))); text-align: center; }
.finale__kick { margin: 0 0 calc(4 * var(--u)); font: 400 clamp(calc(34 * var(--u)), 4.4vw, calc(72 * var(--u)))/1 var(--display); letter-spacing: -0.025em; }
.finale__word { position: relative; height: var(--fH, calc(220 * var(--u))); margin: 0 auto; }
.finale__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--fCols, 8), 1fr); gap: calc(8 * var(--u)); overflow: hidden; clip-path: url(#finaleClip); background: #d6c9b6; }
.finale__wall .fcol { display: grid; gap: calc(8 * var(--u)); align-content: start; align-self: start; will-change: transform; }
.finale__wall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: calc(8 * var(--u)); filter: saturate(.9) contrast(1.03) sepia(.06); }
.finale__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.finale__outline text, .finale__defs text { font-family: var(--display); font-weight: 900; letter-spacing: -0.035em; }
.finale__outline text { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.finale__defs { position: absolute; }
.finale__lead { max-width: 46ch; margin: clamp(calc(22 * var(--u)), 4vh, calc(40 * var(--u))) auto 0; font-size: calc(17 * var(--u)); line-height: 1.55; color: var(--ink-2); }
.finale__ctas { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(28 * var(--u)); }
.finale__cta { height: calc(64 * var(--u)); padding: 0 calc(42 * var(--u)); font-size: calc(18 * var(--u)); }
.finale__brand { font-size: calc(14 * var(--u)); color: var(--ink-2); border-bottom: 1px solid rgb(37 34 32 / .3); padding-bottom: 2px; transition: color .3s, border-color .3s; }
@media (hover: hover) { .finale__brand:hover { color: var(--ink); border-color: var(--ink); } }
.no-js .finale__word { height: auto; }
.no-js .finale__wall { display: none; }
.no-js .finale__word::before { content: "together."; font: 900 clamp(calc(64 * var(--u)), 14vw, calc(240 * var(--u)))/1 var(--display); letter-spacing: -0.035em; }

/* ---------- Header: wird beim Scrollen zur schlanken Glasleiste, versteckt sich beim Runterscrollen ---------- */
.nav { transition: background .4s, box-shadow .4s, height .45s var(--ease-out), transform .55s var(--ease-out); }
.nav.is-solid { height: calc(62 * var(--u)); }
.nav.is-hidden { transform: translateY(-105%); }
.nav__logo img { transition: height .45s var(--ease-out); }
.nav.is-solid .nav__logo img { height: calc(42 * var(--u)); }
.nav__cta { transition: height .45s var(--ease-out), transform .16s var(--ease-out), background .25s; }
.nav.is-solid .nav__cta { height: calc(42 * var(--u)); }
.nav.is-solid .nav__links { height: calc(42 * var(--u)); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
/* Handy-Menü: Vollbild, große Links in Zodiak */
.menu { position: fixed; inset: 0; z-index: 39; display: flex; flex-direction: column; padding: calc(92 * var(--u)) var(--pad) calc(26 * var(--u)); background: var(--cream); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; border-top: 1px solid rgb(37 34 32 / .14); }
.menu__nav a { display: flex; align-items: baseline; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) 0 calc(17 * var(--u)); border-bottom: 1px solid rgb(37 34 32 / .14); font: 400 clamp(calc(30 * var(--u)), 9vw, calc(38 * var(--u)))/1.1 var(--display); letter-spacing: -0.02em; }
.menu__no { flex: none; width: 2.2ch; font: italic 400 calc(14 * var(--u))/1 var(--display); color: var(--ink-2); }
.menu__cta { margin-top: calc(28 * var(--u)); height: calc(54 * var(--u)); font-size: calc(16 * var(--u)); }
.menu__foot { margin: auto 0 0; padding-top: calc(28 * var(--u)); display: flex; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--ink-2); }
.menu__foot a { margin-left: calc(14 * var(--u)); color: var(--ink); }
html.menu-open { overflow: hidden; }
.burger { gap: calc(5 * var(--u)); align-content: center; cursor: pointer; }
.burger span { margin: 0 !important; transition: transform .45s var(--ease-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(calc(3.25 * var(--u))) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(calc(-3.25 * var(--u))) rotate(-45deg); }

/* ---------- Fuß: nur das Nötigste – Logo, Rechtliches, nach oben, Copyright ---------- */
.foot { background: var(--sand); padding: calc(34 * var(--u)) var(--pad) calc(22 * var(--u)); }
.foot__row { display: flex; align-items: center; gap: calc(32 * var(--u)); max-width: calc(1360 * var(--u)); margin: 0 auto; padding-bottom: calc(22 * var(--u)); border-bottom: 1px solid rgb(37 34 32 / .16); }
.foot__logo img { height: calc(58 * var(--u)); width: auto; }
.foot__legal { display: flex; gap: calc(28 * var(--u)); margin-left: auto; font-size: calc(14.5 * var(--u)); }
.foot__legal a, .foot__up { position: relative; }
.foot__legal a::after, .foot__up::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .foot__legal a:hover::after, .foot__up:hover::after { transform: scaleX(1); transform-origin: left; } }
.foot__legal a[aria-current="page"]::after { transform: scaleX(1); }
.foot__up { font-size: calc(14 * var(--u)); white-space: nowrap; }
.foot__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px calc(8 * var(--u)); max-width: calc(1360 * var(--u)); margin: calc(16 * var(--u)) auto 0; font-size: calc(12 * var(--u)); color: var(--ink-2); }   /* eine Zeile: © · Design by (Link) */
.foot__meta > span { white-space: nowrap; }
.foot__meta a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(3 * var(--u)); text-decoration-color: rgb(37 34 32 / .35); transition: text-decoration-color .3s; }
@media (hover: hover) { .foot__meta a:hover { text-decoration-color: currentColor; } }
.finale__lead em { font-family: var(--display); font-style: italic; color: var(--ink); }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal-page { background: var(--cream); }
.legal { max-width: calc(860 * var(--u)); margin: 0 auto; padding: clamp(calc(130 * var(--u)), 18vh, calc(190 * var(--u))) var(--pad) clamp(calc(80 * var(--u)), 12vh, calc(130 * var(--u))); }
.legal__over { margin: 0 0 calc(10 * var(--u)); font: 500 calc(13 * var(--u))/1.3 var(--sans); color: var(--ink-2); }
.legal__h { margin: 0 0 clamp(calc(30 * var(--u)), 5vh, calc(52 * var(--u))); font: 400 clamp(calc(54 * var(--u)), 7vw, calc(104 * var(--u)))/.95 var(--display); letter-spacing: -0.035em; }
.legal__body { border-top: 1px solid rgb(37 34 32 / .16); }
.legal__body h2 { margin: calc(34 * var(--u)) 0 calc(10 * var(--u)); font: 500 calc(11.5 * var(--u))/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.legal__body p { margin: 0 0 calc(14 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.65; }
.legal__body a { border-bottom: 1px solid rgb(37 34 32 / .35); }
.legal__list { margin: 0; padding-left: 1.3em; font-size: calc(16 * var(--u)); line-height: 1.8; color: var(--ink-2); }
.legal__check { display: inline-block; margin-top: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgb(205 191 171 / .35); font-size: calc(14 * var(--u)); color: var(--ink); }
.legal__note { margin-top: calc(44 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--sand); font-size: calc(14 * var(--u)); line-height: 1.55; color: var(--ink-2); }
.legal__note b { color: var(--ink); font-weight: 700; }
.legal__note b:first-child { display: block; margin-bottom: calc(4 * var(--u)); }
.legal__note--top { margin: 0 0 calc(34 * var(--u)); }

/* ---------- Hauptknöpfe („Werde Talent“ u. a.): Füllung folgt der Maus, Federn; Klick: Welle + Ring. Kein Pfeil (Knopf soll beim Zeigen nicht breiter werden, 18.10.2026) ---------- */
.btn--ink { position: relative; isolation: isolate; overflow: hidden; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .35s, box-shadow .35s; }
.btn--ink::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 0; aspect-ratio: 1; border-radius: 50%;
  background: var(--offwhite); transform: translate(-50%, -50%); transition: width .6s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) {
  .btn--ink:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(1.04); }
  .btn--ink:hover::before { width: calc(300% + calc(120 * var(--u))); }
}
.btn--ink:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ink:focus-visible::before { width: calc(300% + calc(120 * var(--u))); }
.btn--ink:active { transform: scale(.95); transition-duration: .12s; }
.btn__ripple { position: absolute; z-index: -1; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: calc(-12 * var(--u)) 0 0 calc(-12 * var(--u)); border-radius: 50%; background: rgb(205 191 171 / .75);
  pointer-events: none; animation: btnRipple .7s cubic-bezier(.23, 1, .32, 1) forwards; }
@keyframes btnRipple { from { transform: scale(0); opacity: 1; } to { transform: scale(16); opacity: 0; } }
.btn--ink.is-pulse { animation: btnPulse .7s cubic-bezier(.23, 1, .32, 1); }
@keyframes btnPulse { from { box-shadow: 0 0 0 0 rgb(37 34 32 / .35); } to { box-shadow: 0 0 0 calc(16 * var(--u)) rgb(37 34 32 / 0); } }
.rm .btn--ink, .rm .btn--ink::before { transition: color .2s, width .01s; }
.rm .btn--ink:hover { transform: none; }
.nav__cta.btn--ink { transition: height .45s var(--ease-out), transform .5s cubic-bezier(.34, 1.56, .64, 1), color .35s, box-shadow .35s; }

/* Nächster Abschnitt (Platzhalter) */
.after { min-height: 60vh; display: grid; place-items: center; padding: calc(80 * var(--u)) var(--pad); color: var(--ink-2); text-align: center; border-top: 1px solid var(--line); background: var(--cream); }
.after b { display: block; font: 400 calc(34 * var(--u))/1.2 var(--display); color: var(--ink); margin-bottom: calc(10 * var(--u)); }

/* Ohne JavaScript: Hero als einfache Fläche mit Text */
.no-js .mask, .no-js .wall { display: none; }
.no-js .hero { background: var(--cream); }
.no-js .hero-copy { bottom: calc(64 * var(--u)); width: min(calc(640 * var(--u)), calc(100% - 2 * var(--pad))); }
.no-js .claim { font-size: clamp(calc(48 * var(--u)), 7vw, calc(96 * var(--u))); }


/* ---------- Laptop (niedrige Höhe) ---------- */
@media (min-width: 768px) and (max-height: 760px) {
  .nav__links { height: calc(44 * var(--u)); }
  .lead { font-size: calc(16 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .claim { margin-bottom: calc(20 * var(--u)); }
  .meta { display: none; }
  .spot { padding-top: calc(84 * var(--u)); gap: calc(24 * var(--u)) 5vw; }
  .svc__stage { --phoneH: min(60svh, calc(600 * var(--u))); padding-top: calc(84 * var(--u)); row-gap: calc(10 * var(--u)); }
  .svc__over { margin-bottom: calc(10 * var(--u)); }
  .card__no { font-size: calc(30 * var(--u)); top: calc(8 * var(--u)); }
  .why__stage { padding-top: calc(88 * var(--u)); }
  .why__sub { font-size: calc(15.5 * var(--u)); margin-top: calc(8 * var(--u)); }
  .spot__frame { width: min(100%, calc((100svh - calc(250 * var(--u))) * .8)); }
  .spot__name { font-size: clamp(calc(56 * var(--u)), min(9vw, 15vh), calc(120 * var(--u))); }
  .spot__quote { margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
  .spot__stats { margin-top: calc(18 * var(--u)); }
  .spot__stand { margin-bottom: calc(16 * var(--u)); }
  .band { --bandH: calc(84 * var(--u)); }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
  .nav { height: calc(60 * var(--u)); grid-template-columns: 1fr auto; }
  .nav__logo img { height: calc(42 * var(--u)); }
  .nav__links, .nav__cta { display: none; }
  .burger { display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; border: 0; background: rgb(251 249 245 / .8); box-shadow: inset 0 0 0 1px var(--line); }
  .burger span { display: block; width: calc(16 * var(--u)); height: 1.5px; background: var(--ink); margin: 2px 0; }
  .wall { gap: calc(8 * var(--u)); inset: -10vh -10vw; }
  .col { gap: calc(8 * var(--u)); }
  .tile { border-radius: calc(10 * var(--u)); }
  .tile__who { font-size: calc(12 * var(--u)); left: calc(10 * var(--u)); bottom: calc(9 * var(--u)); }
  .hero-copy { top: var(--copyT, calc(84 * var(--u))); bottom: auto; width: auto; right: var(--pad); }
  .claim { margin-bottom: calc(14 * var(--u)); }
  .lead { font-size: calc(15 * var(--u)); margin-bottom: calc(16 * var(--u)); }
  .ctas .btn { height: calc(48 * var(--u)); padding: 0 calc(28 * var(--u)); }                     /* ein Hauptknopf (E-022): natürliche Breite statt Balken */
  .meta { display: none; }
  .pause--hero { right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); }
  .why__stage { height: auto; min-height: 0; padding: calc(76 * var(--u)) var(--pad) calc(56 * var(--u)); }
  .why__head { text-align: left; }
  .why__h { font-size: clamp(calc(30 * var(--u)), 8.4vw, calc(36 * var(--u))); }
  .why__sub { font-size: calc(15.5 * var(--u)); }
  .spread { display: flex; flex-direction: column; align-items: stretch; margin-top: calc(30 * var(--u)); }
  .center { --R: min(36vw, calc(150 * var(--u))); order: -1; margin-bottom: calc(26 * var(--u)); }
  .center__foot { flex-direction: column; gap: calc(16 * var(--u)); width: auto; }
  .center__text { text-align: center; min-height: 0; font-size: calc(14.5 * var(--u)); }
  .spread__col--l .ben__btn { flex-direction: row; text-align: left; }
  .spread__col--r .ben:first-child { border-top: 0; }
  .ben__btn { padding: calc(16 * var(--u)) 0; gap: calc(14 * var(--u)); }
  .ben__t { font-size: calc(20 * var(--u)); }
  .ben__btn[data-d]::after { content: "+"; margin-left: auto; font: 300 calc(22 * var(--u))/1 var(--sans); color: var(--ink-2); transition: transform .35s var(--ease-out); }
  .ben.is-open .ben__btn::after { transform: rotate(45deg); }
  .ben.is-open .ben__d { display: block; }
  .spread.has-on .ben__btn { opacity: 1; }
  .voices { --photoW: min(62vw, calc(250 * var(--u))); padding: calc(68 * var(--u)) var(--pad) calc(60 * var(--u)); }
  .cover__row { grid-template-columns: minmax(0, 1fr); row-gap: calc(22 * var(--u)); justify-items: center; }
  .cover__photo { grid-row: 1; margin-top: calc(14 * var(--u)); }
  .cover__side--r { grid-row: 2; text-align: center; }
  .cover__side--l { grid-row: 3; justify-content: center; }
  .voice__q p { font-size: calc(18 * var(--u)); margin: 0 auto; }
  .faq { padding: calc(68 * var(--u)) var(--pad) calc(48 * var(--u)); }
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: calc(28 * var(--u)); }
  .faq__head { position: static; }
  .faq__h { font-size: calc(44 * var(--u)); }
  .qa__q { gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) 0; }
  .qa__t { font-size: calc(19 * var(--u)); }
  .qa__icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .qa__a p { padding: 0 0 calc(20 * var(--u)) calc(2.2ch + calc(14 * var(--u))); font-size: calc(15 * var(--u)); }
  .finale { padding: calc(40 * var(--u)) var(--pad) calc(72 * var(--u)); }
  .finale__kick { font-size: calc(34 * var(--u)); }
  .finale__lead { font-size: calc(15.5 * var(--u)); }
  .finale__cta { height: calc(56 * var(--u)); width: 100%; }
  .nav.is-solid { height: calc(56 * var(--u)); }
  .nav.is-solid .nav__logo img { height: calc(36 * var(--u)); }
  .burger { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .foot { padding: calc(28 * var(--u)) var(--pad) calc(20 * var(--u)); }
  .foot__row { flex-wrap: wrap; gap: calc(18 * var(--u)) calc(20 * var(--u)); padding-bottom: calc(18 * var(--u)); }
  .foot__logo img { height: calc(48 * var(--u)); }
  .foot__up { margin-left: auto; }
  .foot__legal { order: 3; flex-basis: 100%; margin-left: 0; gap: calc(24 * var(--u)); font-size: calc(14.5 * var(--u)); }
  .foot__meta { margin-top: calc(14 * var(--u)); font-size: min(calc(12 * var(--u)), 2.9vw); gap: 2px calc(6 * var(--u)); }   /* Handy: weiter eine Zeile (ab 360 px) */
  .svc { border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0; }
  .svc__stage { --phoneH: clamp(calc(270 * var(--u)), calc(100svh - calc(375 * var(--u))), calc(430 * var(--u))); --phoneW: calc(var(--phoneH) * .49); height: auto;   /* Überschrift + iPhone passen beim Festhalten in einen Bildschirm */ min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "hl" "hr" "phone" "foot" "c1" "c2" "c3" "c4"; row-gap: calc(14 * var(--u)); padding: calc(64 * var(--u)) var(--pad) calc(52 * var(--u)); }
  .svc__head--r { text-align: left; margin-top: calc(-4 * var(--u)); }
  .svc__quote { font-size: clamp(calc(44 * var(--u)), 12.5vw, calc(58 * var(--u))); }
  .svc__quote--r em { display: inline-block; }
  .svc__phone { margin: calc(30 * var(--u)) 0 calc(22 * var(--u)); }
  .svc__foot { flex-direction: column; align-items: stretch; gap: calc(18 * var(--u)); padding: 0 0 calc(22 * var(--u)); }
  .svc__foot .btn { height: calc(48 * var(--u)); }
  .card { padding: calc(20 * var(--u)) calc(22 * var(--u)); }
  .spot { grid-template-columns: minmax(0, 1fr); gap: calc(18 * var(--u)); padding: calc(76 * var(--u)) var(--pad) calc(44 * var(--u)); }
  /* Handy: Porträt schmal und ganz im 4:5 (Rückmeldung David 05.11.2026: Bild kleiner), Band darunter, dann Hinweiszeile, Pause und Name;
     so passt der Abschnitt samt Knopf bei 390 × 844 in einen Bildschirm */
  .spot { grid-template-areas: "frame" "band" "text"; }
  .spot__frame { grid-area: frame; justify-self: center; width: clamp(calc(200 * var(--u)), calc((100svh - calc(565 * var(--u))) * .8), 72vw); }
  .spot__text { grid-area: text; }
  .spot .band { --bandH: calc(68 * var(--u)); grid-area: band; position: relative; z-index: 3; display: flex; flex-direction: column; }
  .spot .band__head { order: 2; margin-top: calc(12 * var(--u)); margin-bottom: 0; }
  .spot .band__item { box-shadow: 0 0 0 1.5px rgb(251 249 245 / .9); border-radius: calc(9 * var(--u)); }
  .spot .band__cap { font-size: calc(11.5 * var(--u)); }
  .spot .pause--inline { height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); }
  .ph__i { font-size: calc(150 * var(--u)); }
  .spot__name { font-size: calc(64 * var(--u)); }
  .spot__over { margin-bottom: calc(10 * var(--u)); }
  .spot__quote { display: none; }
  .spot__stats { margin-top: calc(20 * var(--u)); }
  .spot__stats div { min-width: 0; padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) 0; } .spot__stats div + div { padding-left: calc(12 * var(--u)); } .spot__stats div:last-child { padding-right: 0; }
  .spot__stats b { font-size: clamp(calc(18 * var(--u)), 5.2vw, calc(21 * var(--u))); }
  .spot__stats div > span { display: block; margin-top: calc(8 * var(--u)); line-height: 1.35; }
  .spot__stand { margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); }
  .spot__ctas .btn { flex: 1; height: calc(46 * var(--u)); padding: 0 calc(14 * var(--u)); }
  .tags { display: none; }
  .band__head { margin-bottom: calc(10 * var(--u)); }
}
@media (max-width: 767px) and (max-height: 700px) {
  .lead { display: none; }
}