/* pascal.ceo · hell und typografisch. Schriften selbst gehostet, keine Anfrage an Dritte. */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/schriften/instrument-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/schriften/instrument-serif-400-kursiv.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/schriften/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier: #faf8f3;
  --papier-2: #f1ede4;
  --tinte: #141311;
  --leise: #5e5a53;
  --linie: #dbd6cb;
  --gelb: #ffd60a;
  /* Blaugrün wie die Augen des Owners: runder Punkt im P. (E-88) und Akzent überall (E-89, vorher Blau --tuerkis) */
  --auge: #44c7f8; /* Türkis aus dem Foto des Owners, 31.10.2026 (E-131); vorher #359b95 (E-88) */
  --punkte: #2052ff; /* Blau der drei Punkte in Favicon und Bannern, blauer als --unterschrift (E-178, vorher #4467f8, E-175, E-176) */
  --unterschrift: var(--punkte); /* Blau der Unterschrift am Ende: seit E-190 dasselbe Blau wie die Punkte, vorher #4467f8 (E-161, E-162) */
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1280px;
  --weich: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

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

html {
  background: var(--papier);
  color: var(--tinte);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--papier);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Trennen nur lange Wörter, nie „Je-den“ oder „ge-baut“ */
p, li {
  hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
  hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
.nw { white-space: nowrap; }
.hm { hyphens: manual; -webkit-hyphens: manual; }
::selection { background: var(--gelb); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 2px; }

em { font-family: var(--serif); font-style: italic; font-weight: 400; }
mark {
  color: inherit;
  background: linear-gradient(transparent 0 56%, var(--gelb) 56% 92%, transparent 92%);
  padding: 0 .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.springen {
  position: absolute; left: var(--rand); top: -64px; z-index: 50;
  background: var(--tinte); color: var(--papier); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.springen:focus { top: 12px; }

.innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 248, 243, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 28px; height: 64px; }
.marke { font-family: var(--serif); font-size: 25px; line-height: 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
/* Status unter dem Namen: Hallo, dann der Abschnitt, in dem man gerade ist (E-72) */
.marke-block { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* Der Status ist ein Knopf mit großer Trefferfläche (E-91): Polster ringsum, per negativem Rand ohne Einfluss aufs Layout */
.kopf-status { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 32px 14px 0; margin: -10px -32px -14px 0;
  border: 0; background: none; cursor: default; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; color: var(--leise); transition: opacity .2s ease; }
.kopf-status.wechselt { opacity: 0; }
/* Hinter dem Status ein runder Punkt in der Farbe des Punkts (E-141): „Hallo.“, dann der Abschnitt mit Punkt; Größe .44em (K-08, K-09): erst .5em, dann .36em, jetzt dazwischen */
.kopf-status .status-text::after { content: ''; display: inline-block; width: .44em; height: .44em; margin-left: .12em; border-radius: 50%; background: var(--auge); vertical-align: 0; }
.kopf-status .hoch { display: none; letter-spacing: 0; color: var(--auge); transition: transform .25s var(--weich); }
.kopf-status.kann-hoch { cursor: pointer; }
.kopf-status.kann-hoch .hoch { display: inline; }
@media (hover: hover) { .kopf-status.kann-hoch:hover { color: var(--tinte); } .kopf-status.kann-hoch:hover .hoch { transform: translateY(-2px); } }
.kopf-status:focus-visible { outline: 2px solid var(--auge); outline-offset: -4px; border-radius: 4px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-size: 14.5px; color: var(--leise); text-decoration: none; transition: color .2s ease; }
.nav a:hover { color: var(--tinte); }
.sprache { display: inline-flex; padding: 3px; border: 1px solid var(--linie); border-radius: 999px; }
.sprache a, .sprache span {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1;
  padding: 6px 10px; border-radius: 999px; color: var(--leise); text-decoration: none;
}
.sprache a:hover { color: var(--tinte); }
.sprache [aria-current='page'] { background: var(--tinte); color: var(--papier); }
.zurueck { margin-left: auto; font-size: 14.5px; color: var(--leise); text-decoration: none; }
.zurueck:hover { color: var(--tinte); }
@media (max-width: 860px) {
  .nav { display: none; }
  .sprache { margin-left: auto; }
}

/* Titel mit Porträt */
.held {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: 'titel bild' 'text bild';
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 88px);
  padding-top: clamp(40px, 6.5vw, 96px);
}
.held-titel { grid-area: titel; align-self: end; }
.held-text { grid-area: text; }
.held .bild { grid-area: bild; }
.rolle {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise); margin: 0 0 22px;
}
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(72px, 12.4vw, 192px); line-height: .84; letter-spacing: -.04em;
  margin: 0 0 0 -.045em;
}
h1 .maske { display: block; overflow: hidden; padding: 0 .04em .05em 0; }
h1 .zeile { display: block; }
.lead {
  font-size: clamp(21px, 2.05vw, 28px); line-height: 1.36; letter-spacing: -.006em;
  max-width: 26ch; margin: clamp(28px, 3.4vw, 44px) 0 34px;
}
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px 15px 26px; border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none;
  transition: transform .25s var(--weich), box-shadow .25s var(--weich), background-color .25s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(20, 19, 17, .55); }
.knopf .pfeil { flex: none; transition: transform .25s var(--weich); }
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf.rahmen { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.knopf.rahmen:hover { background: var(--tinte); color: var(--papier); box-shadow: 0 12px 26px -14px rgba(20, 19, 17, .55); }
.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size .35s var(--weich);
}
.textlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.bild { margin: 0; position: relative; aspect-ratio: 1 / 1; background: #050505; overflow: hidden; }
.bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 900px) {
  .held { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'titel' 'bild' 'text'; padding-top: 24px; }
  .rolle { margin-bottom: 16px; }
  /* 4:5 statt quadratisch, damit Kinn und Kragen ganz zu sehen sind; oben fällt fast nur Schwarz weg (K-01) */
  .held .bild { margin-top: 22px; aspect-ratio: 1 / 1; max-width: 520px; }
  .held .bild img { object-position: 50% 50%; }
  .lead { max-width: 30ch; margin: 24px 0 26px; }
}

/* Zahlen */
.zahlen { margin-top: clamp(56px, 8vw, 120px); }
.zahlen dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--tinte); }
/* Das Datum ist zehn Zeichen breit und läuft kleiner als die Zahlen (E-100) */
.zahl dd.datum { font-size: clamp(30px, 3.3vw, 54px); }
/* „seit“ vor dem Datum klein, wie die Beschriftung (E-99) */
.zahl dd .vor { font-family: var(--sans); font-size: 15px; letter-spacing: 0; color: var(--leise); margin-right: .15em; }
.zahl { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 22px 24px 8px 0; }
.zahl + .zahl { padding-left: 24px; border-left: 1px solid var(--linie); }
.zahl dd {
  margin: 0; font-family: var(--serif); font-size: clamp(52px, 6.4vw, 96px); line-height: .9; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.zahl dt { font-size: 14.5px; line-height: 1.35; color: var(--leise); max-width: 20ch; }
.stand { margin: 14px 0 0; font-size: 13px; color: var(--leise); }
@media (max-width: 720px) {
  /* Am Handy zwei mal zwei (E-103) */
  .zahlen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahl { padding-bottom: 22px; }
  .zahl dd.datum { font-size: clamp(26px, 7.6vw, 54px); }
  .zahl:nth-child(3) { padding-left: 0; border-left: 0; }
  .zahl:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}

/* Satz zur Umsetzung (E-29) */
.jetzt { padding-top: clamp(88px, 11vw, 160px); }
.jetzt p {
  margin: 0; max-width: 25ch; font-family: var(--serif); font-size: clamp(42px, 5.8vw, 88px);
  line-height: 1.02; letter-spacing: -.024em; text-wrap: balance;
}
.jetzt p > span { display: block; }
/* Ab hier skaliert die Schrift mit der Breite: jeder Sinnabschnitt eine Zeile, jede passt in 25ch */
@media (min-width: 725px) { .jetzt .teil { display: block; } }

/* Abschnitte */
/* Anker landen auf der Linie des Abschnitts, nicht auf seinem Innenabstand darüber (E-68) */
.abschnitt { --oben: clamp(96px, 12vw, 176px); padding-top: var(--oben); scroll-margin-top: calc(-1 * var(--oben)); }
.abschnitt-kopf {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 32px;
  border-top: 1px solid var(--tinte); padding-top: 20px; margin-bottom: clamp(44px, 6vw, 88px);
}
.etikett {
  margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise);
}
.etikett .nr { color: var(--tinte); margin-right: 12px; font-variant-numeric: tabular-nums; }
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 6.6vw, 100px); line-height: .95; letter-spacing: -.03em;
  margin: 0; text-wrap: balance;
}
.unterzeile { margin: 20px 0 0; font-size: 18px; color: var(--leise); }
h3 {
  margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise);
}
@media (max-width: 720px) { .abschnitt-kopf { grid-template-columns: minmax(0, 1fr); } }

/* Warum ich */
.saetze { list-style: none; margin: 0; padding: 0; }
.saetze li {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 32px;
  padding: 32px 0 40px; border-top: 1px solid var(--linie);
}
.saetze li:first-child { border-top: 0; padding-top: 0; }
.saetze .stichwort { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); padding-top: 1.1em; }
.satz {
  margin: 0; font-family: var(--serif); font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.022em;
  text-wrap: balance; hyphens: manual;
}
.darum { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--leise); max-width: 46ch; }
@media (max-width: 720px) {
  .saetze li { grid-template-columns: minmax(0, 1fr); }
  .saetze .stichwort { padding-top: 0; }
}

/* Werdegang */
.stationen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.stationen li {
  display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr); gap: 6px 28px; align-items: baseline;
  padding: 24px 0 26px; border-top: 1px solid var(--linie);
}
.stationen li:first-child { border-top-color: var(--tinte); }
.stationen .nr { font-size: 14px; color: var(--leise); font-variant-numeric: tabular-nums; }
.stationen .titel {
  font-family: var(--serif); font-size: clamp(30px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.016em;
  transition: transform .4s var(--weich);
}
.stationen .text { font-size: 17px; line-height: 1.5; color: var(--leise); max-width: 50ch; }
@media (hover: hover) { .stationen li:hover .titel { transform: translateX(10px); } }
@media (max-width: 720px) {
  .stationen li { grid-template-columns: 40px minmax(0, 1fr); }
  .stationen .text { grid-column: 2; }
}

/* LT Ventures */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.zweispaltig .rechts > p { margin: 0 0 1em; font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; max-width: 52ch; }
.prinzipien {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px;
  list-style: none; margin: 0; padding: 0;
}
.prinzipien li { border-top: 1px solid var(--linie); padding: 26px 0 34px; }
.prinzipien .titel { margin: 0 0 12px; color: var(--tinte); font-family: var(--serif); font-size: clamp(30px, 2.9vw, 40px); line-height: 1.05; letter-spacing: -.016em; text-wrap: balance; }
.prinzipien p { margin: 0; font-size: 17px; color: var(--leise); max-width: 46ch; }
.block { margin-top: clamp(64px, 8vw, 112px); }
@media (max-width: 1020px) { .prinzipien { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .zweispaltig, .prinzipien { grid-template-columns: minmax(0, 1fr); } }

/* Liste der Ventures */
.register-intro { margin: 0 0 26px; color: var(--leise); max-width: 64ch; }
.register { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.register li {
  display: grid; grid-template-columns: 96px minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 4px 28px; align-items: baseline;
  padding: 17px 0 19px; border-top: 1px solid var(--linie);
}
.register li:first-child { border-top-color: var(--tinte); }
.register li.aus { opacity: .55; }
.kennung { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.register .name { font-family: var(--serif); font-size: 27px; line-height: 1.1; letter-spacing: -.01em; }
.register .name a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.register .name a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size .35s var(--weich); }
.register .stealth { font-style: italic; color: var(--leise); }
.register .was { font-size: 16px; line-height: 1.45; color: var(--leise); }
/* Die Frist als kleine Zeile in Versalien, so stand sie seit E-72 da; seit E-100 ohne die Stufe darüber */
.register .status { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.45; }
.legende { margin: 18px 0 0; font-size: 14px; color: var(--leise); max-width: 90ch; }
.weiter { margin: 30px 0 0; }
.motto { margin: clamp(56px, 7vw, 96px) 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; max-width: 46ch; }
.motto em { font-size: 1.3em; letter-spacing: -.01em; }
@media (max-width: 900px) {
  .register li { grid-template-columns: 84px minmax(0, 1fr); }
  .register .was, .register .status { grid-column: 2; }
}

/* Investoren */
.band { margin-top: clamp(96px, 12vw, 176px); background: var(--papier-2); padding-bottom: clamp(80px, 10vw, 136px); }
.band .abschnitt { --oben: clamp(72px, 9vw, 120px); }
.band { scroll-margin-top: calc(-1 * clamp(72px, 9vw, 120px)); } /* der Anker sitzt am Band, die Linie im Abschnitt darin (E-68) */
.band .abschnitt-kopf { border-top-color: var(--tinte); }
.investoren .rechts > p { margin: 0 0 1em; font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; max-width: 52ch; }
.investoren .knoepfe { margin-top: 38px; }

/* Kontakt */
.mail {
  display: inline-block; margin-top: 8px;
  font-family: var(--serif); font-size: clamp(38px, 7.4vw, 112px); line-height: 1.05; letter-spacing: -.03em;
  text-decoration: none; overflow-wrap: anywhere;
}
/* Die Linie liegt nur unter der Adresse; dahinter Pfeil und Herz (E-104) */
.mail-text { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: .06em; transition: background-size .45s var(--weich); }
.mail:hover .mail-text { background-size: 0 2px; background-position: 100% 100%; }
.mail-zeichen { display: inline-flex; align-items: center; gap: .08em; margin-left: .12em; vertical-align: .1em; white-space: nowrap; }
.mail-zeichen svg { width: .3em; height: .3em; }
.mail-zeichen .pfeil { transition: transform .25s var(--weich); }
.mail-zeichen .herz { color: var(--auge); }
.mail:hover .mail-zeichen .pfeil { transform: translateX(.08em); }
.kontakt-text { margin: 40px 0 0; font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; color: var(--leise); max-width: 46ch; }
/* WhatsApp unter der Mail-Adresse (E-16); .zweispaltig .rechts > p setzt den Abstand zum Text sonst oben auf 0 */
.kanal { margin-top: clamp(24px, 2.6vw, 34px); }
.kanal .nummer { font-weight: 400; }
/* LinkedIn und X unter dem WhatsApp-Knopf (E-27) */
.profile { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; font-size: 17px; }
.zweispaltig .rechts > .profile + .kontakt-text, .zweispaltig .rechts > .kanaele + .kontakt-text { margin-top: 40px; }
/* Kontakt näher an „Schreib mir.“ (E-73): weniger Abstand unter der Überschrift, am Handy ohne die leere linke Spalte */
#contact .abschnitt-kopf { margin-bottom: clamp(20px, 3vw, 40px); }
@media (max-width: 720px) { #contact .zweispaltig > div:empty { display: none; } }
/* Mail, WhatsApp-Knopf, LinkedIn und X auf einer gemeinsamen Mitte (E-70) */
.kanaele { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; }
.kanaele .profile { justify-content: center; }
.kontakt-text a {
  color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.kontakt-text a:hover { text-decoration-color: var(--auge); }

/* Fuß */
.fuss { margin-top: clamp(104px, 13vw, 184px); border-top: 1px solid var(--tinte); }
.fuss .innen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding-top: 22px; padding-bottom: 44px; font-size: 14px; color: var(--leise); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-left: auto; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tinte); }

/* Unterschrift am Ende (E-132): Schreibschrift in der Farbe des Punkts auf Papier; vorher der schwarze Balken mit dem P. (E-56).
   Mr De Haviland (OFL), Wahl des Owners (E-143) aus der Auswahl in F-17: schlanke, erwachsene Unterschrift mit kleiner x-Höhe; Caveat wirkte kindisch (K-07).
   Die Schrift ist schmal, darum größer als Caveat und Ms Madi; am Handy passt der Name bei 82 px gerade in eine Zeile */
@font-face {
  font-family: 'Mr De Haviland';
  src: url('/assets/schriften/mr-de-haviland-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.schluss { margin-top: clamp(64px, 8vw, 120px); } /* etwas weniger Luft um die Unterschrift (E-173, vorher clamp(96px, 12vw, 176px)) */
.schluss .innen { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(36px, 5.6vw, 71px); } /* unten so viel Luft wie oben, gemessen an der Schrift (E-170) */
.unterschrift {
  margin: 0; font-family: 'Mr De Haviland', 'Snell Roundhand', 'Segoe Script', cursive; font-weight: 400;
  font-size: clamp(62px, 7.5vw, 108px); line-height: 1; /* ein Viertel kleiner (E-193, vorher clamp(82px, 10vw, 144px)) */ color: var(--unterschrift);
  transform: rotate(-2deg); transform-origin: left bottom;
}
main:has(.schluss) + .fuss { margin-top: 0; border-top: 0; }

/* Impressum, Datenschutz, 404 */
.recht { padding-top: clamp(40px, 6vw, 88px); }
.recht > * { max-width: 820px; }
.recht h1 { font-size: clamp(60px, 9vw, 120px); margin-bottom: clamp(28px, 4vw, 48px); }
.recht h2 { font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; margin: 36px 0 8px; }
.recht p { margin: 0 0 12px; max-width: 68ch; }
.recht .kurz { font-size: 20px; line-height: 1.5; }
.recht .stand { margin-top: 40px; }
.fehlt-seite h1 { font-size: clamp(52px, 8vw, 104px); line-height: .95; }
.fehlt-seite .knoepfe { margin-top: 40px; }

/* Bewegung: nur, wenn niemand sie abgeschaltet hat; ohne Unterstützung steht alles sofort da */
@media (prefers-reduced-motion: no-preference) {
  .rolle { animation: einblenden .8s ease both; }
  h1 .zeile { animation: hoch 1.05s var(--weich) both .05s; }
  h1 .maske + .maske .zeile { animation-delay: .14s; }
  .lead { animation: einblenden .9s ease both .38s; }
  .held .knoepfe { animation: einblenden .9s ease both .48s; }
  .held .bild img { animation: bild 1.5s var(--weich) both .1s; }
  @keyframes hoch { from { transform: translateY(105%); } }
  @keyframes einblenden { from { opacity: 0; transform: translateY(12px); } }
  @keyframes bild { from { opacity: 0; transform: scale(1.06); } }

  @supports (animation-timeline: view()) {
    .auftauchen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes auftauchen { from { opacity: 0; transform: translateY(28px); } }
  }
}

/* Liste der Ventures zum Aufklappen (Gegenprüfung 28.10.2026) */
.register-auf > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin: 0 0 22px; font-weight: 600; }
.register-auf > summary::-webkit-details-marker { display: none; }
.register-auf[open] > summary .pfeil { transform: rotate(180deg); }