/* alessandrobehlzanda.com v3: Struktur wie alsdro-solutions (fixer Kopf, Raster-Hero, Label + Spalten, Fuß), hell.
   Inter lokal, kein Google-Request. 24-px-Raster. */
@font-face { font-family:"Inter"; src:url("fonts/Inter-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --paper:#fff; --ink:#0a0a0a; --ink-2:rgba(10,10,10,.76); --muted:#6b6b6b;
  --line:rgba(10,10,10,.14); --grid:rgba(10,10,10,.05); --wash:rgba(10,10,10,.045);
  --gutter:24px; --ease:cubic-bezier(.22,1,.36,1);
  --font:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fw:350; --fw-display:400;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  min-height:100%; background:transparent; color:var(--ink);
  font-family:var(--font); font-weight:var(--fw); font-size:15px; line-height:22px; letter-spacing:-.1px;
  font-kerning:normal; font-feature-settings:"calt" 1,"kern" 1; font-synthesis:none; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-size:inherit; font-weight:inherit; }
a, button { color:inherit; font:inherit; letter-spacing:inherit; background:none; border:0; text-align:left; cursor:pointer; text-decoration:none; }
::selection { background:var(--ink); color:var(--paper); }
:focus-visible { outline:1.5px solid var(--ink); outline-offset:3px; border-radius:2px; }
ul, ol { list-style:none; }

/* Sprache: beide Fassungen im HTML, eine sichtbar */
html[data-lang="de"] [lang="en"], html[data-lang="en"] [lang="de"]:not(.keep) { display:none; }

/* Rollende Links (wie Referenz) */
.slide { position:relative; display:inline-block; vertical-align:baseline; }
.slide .clip { position:relative; display:block; overflow:hidden; height:var(--h,20px); }
.slide .ph { visibility:hidden; display:block; white-space:nowrap; }
.slide .rest, .slide .up { position:absolute; left:0; top:0; white-space:nowrap; transition:transform .3s var(--ease); }
.slide .up { transform:translateY(100%); }
.slide:hover .rest { transform:translateY(-100%); }
.slide:hover .up { transform:translateY(0); }

/* ───── Kopf ───── */
.top {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:var(--gutter); align-items:baseline;
  padding:var(--gutter); font-size:15px; line-height:20px; letter-spacing:-.2px;
}
.top::before {
  content:""; position:absolute; inset:0 0 -28px 0; z-index:-1; pointer-events:none;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent);
  opacity:0; transition:opacity .5s ease;
}
.top.scrolled::before { opacity:1; }
.brand { grid-column:span 2; display:flex; align-items:baseline; gap:8px; min-width:0; }
.brand .mark { white-space:nowrap; }
.suffix { color:var(--muted); font-size:12px; line-height:1; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tz { grid-column:span 1; display:flex; align-items:baseline; gap:6px; color:var(--ink); }
.clock { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; letter-spacing:0; }
.links { grid-column:span 3; display:flex; align-items:center; justify-content:flex-end; gap:20px; }
.nav { display:flex; gap:12px; }
.lang { display:flex; gap:10px; font-size:12px; letter-spacing:.04em; }
.lang button { color:var(--muted); padding:2px 0; transition:color .3s ease; }
.lang button[aria-pressed="true"], .lang button:hover { color:var(--ink); }
.pill {
  position:relative; z-index:1; display:inline-flex; align-items:center; height:28px; padding:0 14px; white-space:nowrap;
  color:var(--paper); font-size:11px; line-height:11px; letter-spacing:.02em; font-weight:450;
}
.pill::after { content:"→"; margin-left:8px; display:inline-block; transition:transform .5s var(--ease); }
.pill:hover::after { transform:translateX(3px); }
.pill::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:999px; background:var(--ink); transition:inset .3s var(--ease); }
.pill:hover::before { inset:-2px; }

/* ───── Hero ───── */
.first {
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gutter); padding-bottom:calc(var(--gutter) * 3);
}
.glow { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.glow i { position:absolute; border-radius:50%; filter:blur(90px); opacity:.32; will-change:transform; }
.glow i:nth-child(1) { width:46vw; height:46vw; left:-8vw; top:6vh; background:#ece9e2; animation:drift-a 22s ease-in-out infinite alternate; }
.glow i:nth-child(2) { width:38vw; height:38vw; right:-6vw; top:22vh; background:#e6eaee; animation:drift-b 28s ease-in-out infinite alternate; }
.glow i:nth-child(3) { width:30vw; height:30vw; left:38vw; bottom:-8vh; background:#efe9ea; animation:drift-c 25s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform:translate3d(10vw,6vh,0) scale(1.15); } }
@keyframes drift-b { to { transform:translate3d(-9vw,10vh,0) scale(.9); } }
@keyframes drift-c { to { transform:translate3d(-12vw,-8vh,0) scale(1.2); } }
.eyebrow { margin-bottom:16px; color:var(--muted); font-size:12px; line-height:14px; letter-spacing:0; }
.first h1 {
  max-width:16ch; font-weight:var(--fw-display); font-size:clamp(34px,6.2vw,92px); line-height:1.02; letter-spacing:-.04em;
}
.first h1 span { display:block; }
.first .sub { max-width:44ch; margin-top:clamp(24px,3vw,40px); color:var(--ink-2); font-size:clamp(16px,1.35vw,20px); line-height:1.45; letter-spacing:-.2px; text-wrap:pretty; }

/* ───── Blöcke ───── */
.block { padding:clamp(120px,16vw,220px) var(--gutter) 0; }
.label { margin-bottom:16px; color:var(--muted); font-size:13px; line-height:17px; font-weight:var(--fw); letter-spacing:0; }
.say { max-width:26ch; font-size:clamp(24px,3.2vw,44px); line-height:1.1; letter-spacing:-.035em; font-weight:var(--fw-display); text-wrap:balance; }
.say-sm { margin-bottom:clamp(64px,8vw,112px); }
.cols, .steps { display:grid; gap:clamp(40px,5vw,72px) var(--gutter); grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
article, .steps li { padding-top:0; }
.n { display:block; margin-bottom:20px; color:var(--muted); font-size:13px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:0; }
h3 { margin-bottom:8px; font-size:18px; line-height:23px; letter-spacing:-.02em; font-weight:var(--fw-display); text-wrap:balance; }
h3 .und { color:var(--muted); font-weight:var(--fw); }
article p, .steps p { max-width:34ch; color:var(--ink-2); text-wrap:pretty; }
.steps p { max-width:40ch; }
.note { max-width:46ch; margin-top:32px; color:var(--muted); font-size:14px; line-height:21px; text-wrap:pretty; }
.inline { color:var(--ink); opacity:.9; transition:opacity .4s ease; }
.inline:hover { opacity:.55; }

/* Über mich */
.me-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:var(--gutter); }
.me-grid .say { grid-column:1 / span 5; margin-bottom:clamp(48px,6vw,88px); }
.me-text { grid-column:3 / span 3; }
.me-text p { max-width:52ch; margin-bottom:20px; font-size:17px; line-height:26px; letter-spacing:-.15px; color:var(--ink-2); text-wrap:pretty; }
.me-qual { grid-column:3 / span 3; max-width:52ch; margin-top:36px; color:var(--muted); font-size:13px; line-height:20px; letter-spacing:0; }

/* Kontakt */
.contact { padding-bottom:0; }
.contact .say { margin-bottom:40px; }
.contact .lead { max-width:64ch; margin-bottom:32px; color:var(--ink-2); font-size:17px; line-height:26px; text-align:left; hyphens:manual; -webkit-hyphens:manual; text-wrap:wrap; }
.mail { position:relative; display:inline-block; font-weight:var(--fw-display); font-size:clamp(17px,2.9vw,36px); letter-spacing:-.03em; line-height:1.15; overflow-wrap:anywhere; padding-bottom:6px; }
.mail::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .7s var(--ease); }
.mail:hover::after { transform:scaleX(1); transform-origin:left; }

/* ───── Fuß + Rechtliches ───── */
.foot { position:fixed; left:0; right:0; bottom:0; z-index:11; display:flex; flex-direction:column-reverse; padding:0; }
html:not(.pager) body { padding-bottom:88px; }
.foot-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; padding:40px var(--gutter) 18px; background:linear-gradient(to top,var(--paper) 62%,rgba(255,255,255,0)); color:var(--muted); font-size:12px; line-height:16px; letter-spacing:0; }
.legal-nav { display:flex; flex-wrap:wrap; gap:4px 24px; }
.legal-btn { padding:4px 0; color:var(--muted); font-size:12px; transition:color .3s ease; }
.legal-btn:hover, .legal-btn[aria-expanded="true"] { color:var(--ink); }

.panel { background:var(--paper); display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .8s var(--ease), visibility 0s linear .8s; }
.panel.open { grid-template-rows:1fr; visibility:visible; transition-delay:0s; }
.panel-in { overflow:hidden; min-height:0; }
.panel.open .panel-in { overflow-y:auto; max-height:calc(100svh - 200px); overscroll-behavior:contain; }
.js .panel-in > div { opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; }
.js .panel.open .panel-in > div { opacity:1; transform:none; transition:opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s; }
.legal { max-width:66ch; padding:32px var(--gutter) 48px; color:var(--ink-2); font-size:14px; line-height:22px; text-wrap:pretty; }
.legal h3 { margin:28px 0 6px; color:var(--muted); font-size:12px; line-height:18px; font-weight:var(--fw); letter-spacing:0; }
.legal h3:first-child { margin-top:0; }
.legal p { margin-bottom:10px; }

.dl-list { display:grid; gap:12px; margin:12px 0 24px; max-width:36rem; }
.dl-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:14px 18px; background:var(--wash); cursor:grab; transition:background .4s ease; }
.dl-card:hover { background:rgba(10,10,10,.08); }
.dl-ico { position:relative; width:26px; height:34px; background:#fff; clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%); }
.dl-ico::after { content:""; position:absolute; left:6px; right:6px; top:15px; height:2px; background:rgba(10,10,10,.18); box-shadow:0 6px 0 rgba(10,10,10,.18),0 12px 0 rgba(10,10,10,.18); }
.dl-meta { display:grid; }
.dl-name { color:var(--ink); }
.dl-sub, .dl-go, .dl-note { font-size:12px; line-height:18px; color:var(--muted); }
.dl-go { white-space:nowrap; }

/* ───── Bewegung ───── */
.first h1 span.ln { overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.js .first h1 .ln > i { display:block; font-style:normal; transform:translateY(112%); transition:transform 1.5s var(--ease); transition-delay:var(--d,0s); }
.js .first h1 .ln.in > i { transform:none; }
.js .w { display:inline-block; opacity:0; transform:translateY(.5em); filter:blur(6px); transition:opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay:calc(var(--i,0) * 55ms); }
.js .words.in .w { opacity:1; transform:none; filter:none; }
.cols > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { --d:.12s; }
.cols > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { --d:.24s; }
.cols > .reveal:nth-child(4) { --d:.36s; }
article h3, .steps h3 { transition:transform .7s var(--ease); }
article:hover h3, .steps li:hover h3 { transform:translateX(6px); }
.mail { transition:letter-spacing .9s var(--ease); }
.js .reveal { opacity:0; transform:translateY(14px); filter:blur(5px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay:var(--d,0s); }
.js .reveal.in { opacity:1; transform:none; filter:none; }
.d1 { --d:.15s; } .d2 { --d:.3s; } .d3 { --d:.45s; } .d4 { --d:1s; }
.js .top { animation:soft-in 1.4s var(--ease) .1s both; }
@keyframes soft-in { from { opacity:0; } to { opacity:1; } }

/* ───── schmal ───── */
@media (max-width:1100px) {
  .tz { display:none; }
  .brand { grid-column:span 3; } .links { grid-column:span 3; }
  .suffix { display:none; }
  .nav { display:none; }
}
@media (max-width:900px) {
  .cols, .cols.three, .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .me-text, .me-qual { grid-column:1 / -1; }
  .me-grid .say { grid-column:1 / -1; }
}
@media (max-width:640px) {
  :root { --gutter:20px; }
  .top { grid-template-columns:1fr auto; row-gap:6px; font-size:14px; }
  .brand { grid-area:1 / 1; } .links { display:contents; }
  .lang { grid-area:1 / 2; justify-self:end; }
  .pill { grid-area:2 / 1 / 3 / 3; justify-self:start; }
  .block { padding-top:88px; }
  .cols, .cols.three, .steps { grid-template-columns:1fr; gap:28px; }
  .first h1 { max-width:none; }
  .say-sm { margin-bottom:40px; }
  .dl-card { grid-template-columns:auto 1fr; } .dl-go { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important; }
  .js .reveal, .js .panel-in > div, .js .w { opacity:1; transform:none; filter:none; }
  .js .first h1 .ln > i { transform:none; }
  .glow i { animation:none; }
}

/* ───── Vollbild-Seiten (aktiv, sobald das Skript läuft: html.pager) ───── */
.hint { position:absolute; right:var(--gutter); bottom:84px; width:40px; height:40px; display:grid; place-items:center; color:var(--muted); font-size:18px; }
.hint i { font-style:normal; animation:bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(5px); } }
.dots { display:none; }
html.pager, html.pager body { height:100%; overflow:hidden; }
.pager main { position:fixed; inset:0; }
.pager .pg {
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; outline:0; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; padding:calc(var(--gutter) * 3 + 20px) var(--gutter) 104px;
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translate3d(0,var(--ty,0),0) scale(var(--sc,1)); filter:blur(var(--bl,0px));
  transition:opacity .9s var(--ease), transform 1.2s var(--ease), filter .9s var(--ease), visibility 0s linear 1.2s;
}
.pager .pg.active { visibility:visible; opacity:1; pointer-events:auto; transform:none; filter:none; transition-delay:0s; }
.pager .pg.block::before, .pager .pg.block::after { content:""; flex:1 0 0; }
.pager .block.pg { padding-top:calc(var(--gutter) * 3 + 20px); }
.pager .first.pg { padding-bottom:128px; }
.pager .contact .say { margin-bottom:28px; }
.pager .pg > .note { margin-top:clamp(28px,5vh,56px); }
.pager .cols, .pager .steps { gap:clamp(32px,5vh,64px) var(--gutter); }
.pager .say-sm { margin-bottom:clamp(40px,8vh,96px); }
.pager .me-grid .say { margin-bottom:clamp(32px,6vh,72px); }

/* Inhalt einer Seite erscheint gestaffelt, nachdem die Seite steht; beim Verlassen zurückgesetzt */
.pager .reveal.in { transition-delay:calc(var(--d,0s) + .35s); }
.pager .words.in .w { transition-delay:calc(var(--i,0) * 55ms + .3s); }
.pager .first h1 .ln.in > i { transition-delay:calc(var(--d,0s) + .3s); }

.pager .dots { display:flex; flex-direction:column; align-items:flex-end; gap:2px; position:fixed; right:var(--gutter); top:50%; z-index:9; transform:translateY(-50%); }
.dots a { position:relative; height:20px; min-width:44px; display:flex; align-items:center; justify-content:flex-end; }
.dots .tick { display:block; width:10px; height:1px; background:var(--ink); opacity:.28; transform-origin:right center; transition:width .6s var(--ease), opacity .4s ease; }
.dots a:hover .tick { width:20px; opacity:.7; }
.dots a[aria-current="true"] .tick { width:34px; opacity:1; }
.dots .lab { position:absolute; right:48px; white-space:nowrap; font-size:11px; letter-spacing:.01em; color:var(--ink); opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity .45s ease, transform .6s var(--ease); }
.dots a:hover .lab, .dots a:focus-visible .lab { opacity:1; transform:none; }
.dots a:focus-visible { outline-offset:0; }
@media (max-width:640px) { .pager .dots { right:10px; } .dots .lab { display:none; } .dots a { min-width:36px; } .pager .pg { padding-left:var(--gutter); padding-right:calc(var(--gutter) + 8px); } }
@media (prefers-reduced-motion:reduce) { .hint i { animation:none; } }

/* Porträt auf der Seite „Über mich": klein, ohne Rahmen, wird weich aus dem Weiß scharf */
.me-photo { grid-column:1 / span 2; grid-row:2 / span 2; align-self:start; margin:0; max-width:min(100%,280px); }
.me-photo img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; mix-blend-mode:multiply; transform:scale(1.08); transition:transform 3.2s var(--ease); }
.me-photo.in img { transform:scale(1); }
.me-grid .me-text { grid-row:2; } .me-grid .me-qual { grid-row:3; }
@media (max-width:900px) {
  .me-photo { grid-column:1 / -1; grid-row:auto; max-width:200px; margin-bottom:32px; }
  .me-grid .me-text, .me-grid .me-qual { grid-row:auto; }
}
@media (prefers-reduced-motion:reduce) { .me-photo img { transform:none; } }

/* Fließtexte im Blocksatz (mit Silbentrennung gegen Löcher); Kontakttext bleibt Flattersatz */
article p, .steps p, .me-text p, .legal p { text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; text-wrap:wrap; overflow-wrap:break-word; }
.legal p:has(+ h3), .legal .dl-note { text-align:left; }

@media (max-width:640px) {
  .legal-nav { gap:2px 16px; }
  .pager .pg { padding-bottom:150px; }
  .pager .first.pg { padding-bottom:160px; }
  .hint { bottom:132px; }
}

/* Links in Spaltenüberschriften */
.tlink { background:none; transition:opacity .4s ease; }
.tlink::after { content:" →"; opacity:0; display:inline-block; transform:translateX(-4px); transition:opacity .4s ease, transform .5s var(--ease); }
.tlink:hover::after, .tlink:focus-visible::after { opacity:.6; transform:none; }

/* Unterseiten (SEO-Landingpages): ruhig, ohne Vollbild-Seiten */
body.subpage { padding:0; }
.subpage .top { grid-template-columns:1fr auto; }
.subpage .brand, .subpage .links { grid-column:auto; }
.subm { max-width:760px; margin:0 auto; padding:clamp(120px,18vh,200px) var(--gutter) 48px; animation:soft-in 1.2s var(--ease) both; }
.crumb { margin-bottom:28px; color:var(--muted); font-size:13px; letter-spacing:0; }
.crumb a:hover { color:var(--ink); }
.crumb span { margin:0 6px; }
.subm h1 { max-width:18ch; font-size:clamp(32px,6vw,64px); line-height:1.04; letter-spacing:-.04em; font-weight:var(--fw-display); text-wrap:balance; }
.subm .lede { max-width:46ch; margin:28px 0 0; color:var(--ink-2); font-size:clamp(17px,1.6vw,21px); line-height:1.5; letter-spacing:-.2px; }
.sec { margin-top:clamp(56px,9vh,96px); }
.sec h2 { margin-bottom:14px; font-size:clamp(20px,2.4vw,26px); line-height:1.2; letter-spacing:-.025em; font-weight:var(--fw-display); text-wrap:balance; }
.sec p { max-width:62ch; margin-bottom:12px; color:var(--ink-2); font-size:17px; line-height:27px; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.subm .cta { margin-top:clamp(64px,10vh,110px); max-width:40ch; font-size:clamp(20px,2.4vw,28px); line-height:1.2; letter-spacing:-.03em; }
.pill-lg { height:40px; padding:0 22px; font-size:13px; margin-top:8px; }
.subm .related { margin-top:56px; max-width:60ch; color:var(--muted); font-size:14px; line-height:22px; }
.subm .related a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(10,10,10,.3); }
.subfoot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; max-width:760px; margin:0 auto; padding:32px var(--gutter) 40px; color:var(--muted); font-size:12px; }
.subfoot .legal-nav a { color:var(--muted); transition:color .3s ease; }
.subfoot .legal-nav a:hover { color:var(--ink); }
@media (max-width:640px) { .subpage .top { grid-template-columns:1fr auto; } .sec p { text-align:left; } }

.sec .inline, .subm .inline { background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat; }

/* ───── Mobile first: fester Rhythmus (8er-Raster), Kopf und Fuß als eigene Zonen ───── */
@media (max-width:640px) {
  :root { --gutter:22px; --mhdr:92px; --mfoot:76px; }
  body { font-size:16px; line-height:26px; }

  /* Kopf: zwei ruhige Zeilen, Sicherheitsabstand oben (Notch) */
  .top { padding:max(env(safe-area-inset-top),14px) var(--gutter) 12px; row-gap:12px; }
  .top::before { inset:0 0 -20px 0; }

  /* Fuß: eigene Zone, deckend, Seiten enden darüber */
  .foot { padding-bottom:env(safe-area-inset-bottom); background:var(--paper); }
  .foot-bar { padding:14px var(--gutter) 12px; background:var(--paper); gap:6px 20px; }
  .legal-nav { gap:2px 18px; }
  .legal-btn { padding:6px 0; }
  .panel.open .panel-in { max-height:calc(100svh - var(--mhdr) - var(--mfoot) - 8px); }
  .legal { padding:28px var(--gutter) 36px; }

  /* Seiten: zwischen Kopf und Fuß, mit Luft; unten weich ausblenden */
  .pager .pg, .pager .block.pg, .pager .first.pg {
    top:0; bottom:calc(var(--mfoot) + env(safe-area-inset-bottom));
    padding:calc(var(--mhdr) + 36px) 30px 40px var(--gutter);
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);
  }
  .pager .first.pg { padding-top:var(--mhdr); padding-bottom:36px; }
  .hint { bottom:20px; right:22px; }

  /* Seitenstriche: kleiner, überdecken keinen Text */
  .pager .dots { right:8px; gap:0; }
  .dots a { height:22px; min-width:26px; }
  .dots .tick { width:6px; }
  .dots a:hover .tick { width:10px; }
  .dots a[aria-current="true"] .tick { width:14px; }

  /* Hero */
  .first h1 { font-size:clamp(36px,11vw,46px); line-height:1.04; }
  .eyebrow { margin-bottom:20px; font-size:13px; line-height:18px; }
  .first .sub { margin-top:28px; font-size:17px; line-height:26px; max-width:30ch; }

  /* Rhythmus: Label 32 · Satz 40 · Spalten 48 · Nummer 12 · Titel 12 · Text */
  .label { margin-bottom:32px; font-size:13px; line-height:18px; }
  .say { font-size:26px; line-height:1.16; letter-spacing:-.03em; max-width:none; }
  .say-sm { margin-bottom:44px; }
  .cols, .cols.three, .steps { grid-template-columns:1fr; gap:48px; }
  .n { margin-bottom:12px; font-size:13px; }
  h3 { margin-bottom:12px; font-size:20px; line-height:26px; letter-spacing:-.02em; }
  article p, .steps p, .me-text p { max-width:none; font-size:16px; line-height:26px; text-align:left; hyphens:manual; -webkit-hyphens:manual; text-wrap:pretty; }
  .note { margin-top:44px; font-size:14px; line-height:22px; max-width:none; }
  .pager .pg > .note { margin-top:44px; }
  .pager .cols, .pager .steps { gap:48px; }
  .pager .say-sm { margin-bottom:44px; }

  /* Über mich */
  .me-grid { display:block; }
  .me-grid .say { margin-bottom:36px; }
  .me-photo { max-width:176px; margin:0 0 36px; }
  .me-text p { font-size:17px; line-height:27px; margin-bottom:24px; }
  .me-qual { margin-top:36px; font-size:13px; line-height:20px; max-width:none; }

  /* Kontakt */
  .contact .say { margin-bottom:28px; }
  .contact .lead { font-size:17px; line-height:27px; margin-bottom:36px; max-width:none; }
  .mail { font-size:clamp(17px,5.2vw,22px); }

  /* Rechtstexte lesbar */
  .legal p { text-align:left; hyphens:manual; -webkit-hyphens:manual; font-size:15px; line-height:24px; margin-bottom:12px; }
  .legal h3 { margin:32px 0 8px; font-size:12px; line-height:18px; }

  /* Unterseiten */
  .subm { padding:calc(var(--mhdr) + 28px) var(--gutter) 40px; }
  .subm h1 { font-size:clamp(30px,9vw,40px); }
  .subm .lede { font-size:18px; line-height:28px; margin-top:24px; }
  .sec { margin-top:48px; }
  .sec h2 { font-size:21px; margin-bottom:12px; }
  .sec p { font-size:16px; line-height:27px; text-align:left; hyphens:manual; }
  .subm .cta { margin-top:56px; font-size:22px; line-height:1.25; }
  .subm .related { margin-top:40px; }
  .subfoot { padding:28px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .crumb { margin-bottom:24px; }
}

/* Hero passt sich der verfügbaren Fläche an (Fuß ist eigene Zone) */
.pager .first.pg { min-height:0; }

@media (max-width:640px) {
  .top::before { inset:0 0 -12px 0; background:rgba(255,255,255,.97); -webkit-mask-image:linear-gradient(#000 84%,transparent); mask-image:linear-gradient(#000 84%,transparent); }
}
@media (max-width:360px) {
  :root { --gutter:18px; --mfoot:96px; }
  .legal-nav { gap:2px 12px; }
  .foot-bar, .legal-btn { font-size:11px; }
  .first h1 { font-size:34px; }
}