/* Gemeinsame Typografie und Abstände für alle Inhaltsseiten.
   H1 > Abschnitt/Lead > Lesetext > kleine Angaben; Wortmarke und Kamera-UI bleiben eigenständig. */
:root{
 --type-title:clamp(38px,5.2vw,88px);
 --type-section:clamp(26px,2.6vw,44px);
 --type-body:clamp(16px,1.15vw,18px);
 --type-small:13px;
 --leading-title:1.12;
 --leading-section:1.3;
 --leading-body:1.65;
 --space-small:16px;
 --space-medium:24px;
 --space-block:clamp(32px,4vw,64px);
 --space-section:clamp(64px,7vw,112px);
 --content-gap:clamp(24px,4vw,64px);
 --content-columns:minmax(0,1fr) minmax(0,2fr);
 --editorial-indent:18%;
 --editorial-countershift:24%;
 --editorial-inset:16%;
}
/* Gleiche Inhaltskante und gleiche Abstände unter den Kapitelmarken. */
#about .page-content,#contact .page-content{margin-top:var(--space-block);padding-bottom:0}
#about .editorial-about > .personal-title,#contact #contact-title,#viewer #viewer-title{
 font-family:var(--font);font-size:var(--type-title);font-weight:500;
 line-height:var(--leading-title);letter-spacing:-.05em;
}
#about .editorial-about > .personal-title{margin:var(--space-block) 0;max-width:none}
#about .personal-title-intro,#about .personal-title-bridge{font:inherit;letter-spacing:inherit;line-height:inherit;margin:0}
#about .personal-title-intro{margin-bottom:0}
#about .personal-title-bridge{padding-left:0}
#about .personal-title-middle{display:block;margin-left:calc(var(--editorial-inset) / 2)}
#about .personal-title-name{font-size:1em;margin:0}
#about .personal-title-name .brand-n,#about .personal-title-name:hover .brand-n,#about .personal-title-name .brand-star{animation:none;transition:none;transform:none}
#about .personal-title-last{white-space:normal;margin-left:var(--editorial-inset)}
#about .personal-title-signoff,.personal-given-name{white-space:nowrap}
#about .reading-text,#about .editorial-section h2,#about .service-stories article>p,.contact-card .contact-card-title,#viewer .stills-header h2{
 font-family:var(--font);font-size:var(--type-section);font-weight:500;
 line-height:var(--leading-section);letter-spacing:-.035em;
}
/* Rhythmus: eingerückte erste Zeile, versetzte Bild-/Textspalten und alternierende Blöcke. */
#about .reading-text{
 font-size:clamp(22px,2vw,32px);line-height:1.45;letter-spacing:-.025em;
 max-width:46ch;text-indent:0;margin-left:var(--editorial-inset);text-wrap:pretty;
}
#about .editorial-intro,#about .editorial-section{display:grid;grid-template-columns:var(--content-columns);gap:var(--content-gap);margin:var(--space-section) 0;align-items:start}
#about .editorial-intro{grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,2.2fr);gap:6vw}
#about .editorial-intro>.side-label{grid-column:1}
#about .editorial-copy{grid-column:2;max-width:65ch;font-size:var(--type-body);line-height:var(--leading-body)}
#about .editorial-copy p+p{margin-top:var(--space-medium)}
#about .small-portrait{grid-column:3;width:100%;justify-self:end;margin:calc(var(--space-block) * 1.5) 0 0}
#about .career dd,#viewer .viewer-copy,#contact .contact-person,.contact-card .contact-card-detail{font-size:var(--type-body);line-height:var(--leading-body)}
#about .career h2{margin-bottom:var(--space-block)}
/* Mein Weg folgt dem nach links versetzten Rhythmus der Inhaltsblöcke. */
@media(min-width:1001px){
 #about .career>div{margin-left:calc(-1 * var(--editorial-countershift));margin-right:var(--editorial-inset)}
}
#about .career dd{margin-bottom:var(--space-medium);padding-bottom:var(--space-medium);max-width:65ch}
#about .section-sidebar h2{margin-top:var(--space-small)}
#about .service-stories article{margin:0 0 var(--space-section)}
#about .service-stories article:nth-child(odd){margin-left:calc(-1 * var(--editorial-countershift));margin-right:var(--editorial-inset)}
#about .service-stories article:nth-child(even){margin-left:0;margin-right:0}
#about .service-stories article>p{margin:var(--space-medium) 0;max-width:40ch}
#about .service-stories article:last-child{margin-bottom:0}
#about .editorial-section.practice{margin-bottom:var(--about-space)}
#about .tags span{font-size:var(--type-small);line-height:1.4}
#contact .contact-layout{margin-top:var(--space-block);gap:var(--content-gap);align-items:start}
#contact #contact-title{margin:0}
#contact .contact-prelude,#contact .contact-hello,#contact .contact-ending{font:inherit;letter-spacing:inherit;line-height:inherit;margin:0}
#contact .contact-person{margin-top:var(--space-block)}
@media(min-width:801px){#contact .contact-intro{padding-bottom:clamp(24px,4svh,48px)}}
#contact .contact-person>span{font-size:inherit;line-height:inherit}
/* Kontakt bleibt bündig: Headline links, beide Kontaktkarten rechts. */
#contact .contact-ending{margin-left:0}
.contact-options{gap:var(--space-medium);padding-top:0}
.contact-options .contact-card{width:100%;margin-left:0}
/* Projektansichten greifen denselben Einzug auf; die Fotostrecken bleiben versetzt. */
#viewer #viewer-title{margin-left:var(--editorial-indent);max-width:calc(100% - var(--editorial-indent))}
#viewer .viewer-copy{align-self:start;padding-top:var(--space-block)}
#viewer .stills-header{margin-left:var(--editorial-indent)}
.contact-card{padding:var(--space-medium)}
.contact-card .contact-card-top{margin-bottom:var(--space-medium)}
.contact-card .contact-card-detail{margin-top:var(--space-medium)}
/* Ein identischer Footer: gleiche Zeilenboxen für Name, Navigation und Kontaktlinks. */
#about .page-footer,#contact .page-footer,#viewer .page-footer{
 margin:var(--space-section) 0 0;padding:0 0 56px;border:0;
}
#about .footer-columns,#contact .footer-columns,#viewer .footer-columns{
 display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-medium);
 font:400 var(--type-small)/1.7 var(--font);padding:var(--space-medium) 0;
 border-top:1px solid var(--line);
}
.footer-columns>p,.footer-columns>nav,.footer-columns>.footer-social{margin:0;display:flex;flex-direction:column;gap:0;align-items:flex-start;grid-column:auto}
.footer-columns a,.footer-columns span{display:block;font:inherit;line-height:inherit}
#about .page-footer>.mono,#contact .page-footer>.mono,#viewer .page-footer>.mono{margin:0;padding:0;font:400 10px/1.7 var(--mono);letter-spacing:.055em;text-transform:uppercase;color:var(--muted)}
/* Auch auf kurzen Unterseiten bleibt dieselbe Breite wie auf Seiten mit Scrollleiste. */
html:has(body.subpage){scrollbar-gutter:stable}
.footer .identity{font-size:var(--type-small);line-height:1.7}
/* Kontakt: der Inhalt füllt die freie Höhe, der gemeinsame Footer schliesst die Seite ab. */
#contact{display:flex;flex-direction:column}
#contact>.panel-header{flex-shrink:0}
#contact .contact-content{display:flex;flex-direction:column;flex:1;width:100%;min-width:0}
#contact .contact-content>.eyebrow{margin-bottom:0}
#contact .contact-layout{
 flex:1;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;
 width:100%;max-width:none;margin:0;padding:var(--space-block) 0;
 gap:clamp(40px,6vw,96px);
}
#contact #contact-title{font-size:clamp(52px,7vw,112px);line-height:1.04}
#contact .contact-intro{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
#contact .contact-person{margin-top:var(--space-block)}
#contact .contact-options{width:100%;max-width:none;justify-self:end;gap:var(--space-medium);grid-auto-rows:1fr}
#contact .contact-card{padding:clamp(24px,2.8vw,44px);min-height:clamp(200px,23svh,280px)}
#contact .contact-card-title{font-size:clamp(28px,2.6vw,44px);line-height:1.2}
#contact .contact-card-top{margin-bottom:16px}
#contact .contact-card-detail{margin-top:20px;font-size:var(--type-body)}
#contact .page-footer{margin-top:var(--space-medium);flex-shrink:0}
@media(min-width:801px) and (max-height:850px){
 #contact .contact-content{margin-top:var(--space-medium)}
 #contact .contact-layout{padding-block:var(--space-medium)}
 #contact #contact-title{font-size:clamp(52px,6vw,88px)}
 #contact .contact-card{padding:var(--space-medium);min-height:0}
 #contact .contact-card-top{margin-bottom:12px}
 #contact .contact-card-detail{margin-top:16px}
}
@media(max-width:800px){
 #contact .contact-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-block)}
 #contact .contact-options{max-width:none;justify-self:stretch}
 #contact .contact-card{min-height:0}
 #contact .contact-card-title{font-size:clamp(26px,4.2vw,32px)}
 #contact #contact-title{font-size:clamp(52px,9vw,72px)}
}
@media(min-width:701px) and (max-width:1000px){
 #about .editorial-intro{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--content-gap)}
 #about .editorial-intro>.side-label{grid-column:1/-1}
 #about .editorial-copy{grid-column:1}
 #about .small-portrait{grid-column:2}
 #about .service-stories article:nth-child(odd){margin-left:0;margin-right:var(--editorial-inset)}
 #about .service-stories article:nth-child(even){margin-left:var(--editorial-inset);margin-right:0}
}
@media(max-width:800px){.contact-options{grid-template-columns:1fr}}
@media(max-width:700px){
 :root{--editorial-indent:12%;--editorial-inset:8%}
 #about .service-stories article:nth-child(odd){margin-left:0;margin-right:var(--editorial-inset)}
 #about .service-stories article:nth-child(even){margin-left:var(--editorial-inset);margin-right:0}
 #about .small-portrait{width:calc(100% - var(--editorial-indent))}
 #viewer .viewer-copy{padding-top:var(--space-medium)}
 .contact-options{padding-top:0}
 #about .editorial-about>.personal-title{font-size:clamp(30px,8.2vw,38px)}
 #about .reading-text{margin-left:var(--editorial-inset)}
 #about .editorial-intro,#about .editorial-section{grid-template-columns:minmax(0,1fr)}
 #about .editorial-intro>.side-label,#about .editorial-copy,#about .small-portrait{grid-column:1}
 #about .section-sidebar{position:static}
 #about .footer-columns,#contact .footer-columns,#viewer .footer-columns{grid-template-columns:1fr 1fr;row-gap:var(--space-medium)}
 .footer-columns>p{grid-column:1/-1}
}

/* Mobile Beschriftungen: lesbare Metadaten und eine eigene Fläche für den Timecode. */
.card-caption{display:contents}
/* Projektfilme erhalten ihren eigenen Rahmen: 9:16, 4:5 oder Querformat. */
#viewer{--film-ratio:1.7777777778;--film-height:clamp(480px,68svh,760px)}
#viewer.real-project .viewer-media{
 width:100%;height:auto;max-height:none;aspect-ratio:var(--film-ratio);background:var(--photo-ink);
}
#viewer.portrait-project .viewer-layout{
 grid-template-columns:minmax(0,calc(var(--film-height) * var(--film-ratio))) minmax(0,1fr);
 max-width:1100px;margin-inline:auto;gap:clamp(32px,6vw,96px);align-items:start;
}
#viewer.portrait-project .viewer-copy{padding-top:var(--space-medium)}
#viewer.portrait-project .player-controls{padding-inline:12px}
#viewer.portrait-project .player-toolbar{gap:6px}
#viewer.portrait-project .player-volume{display:none}
@media(min-width:801px) and (hover:hover){
 #viewer.portrait-project .player-audio{position:relative}
 #viewer.portrait-project .player-volume{
  display:block;position:absolute;right:0;bottom:100%;width:84px;
  background:var(--photo-ink);padding-inline:8px;opacity:0;pointer-events:none;
 }
 #viewer.portrait-project .player-audio:hover .player-volume,
 #viewer.portrait-project .player-audio:focus-within .player-volume{opacity:1;pointer-events:auto}
}
#viewer .film-playlist{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#viewer .film-playlist span{font-size:12px;line-height:1.5}
@media(max-width:800px){
 #viewer.real-project .viewer-layout,#viewer.portrait-project .viewer-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-medium)}
 #viewer.portrait-project .viewer-media{max-width:calc(var(--film-height) * var(--film-ratio));justify-self:center}
 #viewer .viewer-copy{padding-top:0}
 #viewer .viewer-copy dd{font-size:var(--type-body);line-height:var(--leading-body)}
 #viewer .film-playlist{grid-template-columns:repeat(2,minmax(0,1fr))}
 .player-volume{display:none}
 #viewer:not(.portrait-project) .player-start{top:calc((100% - 86px) / 2);padding:8px 12px}
}
@media(max-width:700px){
 :root{--type-label:11px;--record-bar:36px}
 .mono,#about .mono,.eyebrow,.close,.menu-toggle{font-size:var(--type-label);line-height:1.6}
 .intro .intro-kicker,.intro .intro-aside{font-size:var(--type-label);line-height:1.7}
 .enter-work{font-size:var(--type-label)}
 .card-top{font-size:var(--type-label);left:10px;right:10px;gap:6px}
 .card-top span{padding:3px 5px}
 .card-note{font-size:var(--type-mono);line-height:1.5;left:13px;right:13px;bottom:12px;width:fit-content;max-width:calc(100% - 26px)}
 .card-caption{display:flex;flex-direction:column;align-items:flex-start;gap:7px;position:absolute;left:10px;right:10px;bottom:12px}
 .card-caption .card-title,.card-caption .card-note{position:static;width:fit-content;max-width:100%}
 .view-switch,.theme-switch button,.browse>.mono{font-size:var(--type-label)}
 .theme-switch button,.arrows button{min-height:44px}
 .arrows button{min-width:44px}
 .menu-foot{font-size:var(--type-label);bottom:56px;max-width:calc(100% - 40px)}
 .menu-links .mono,.film-playlist .mono,.film-title,.embed-play span{font-size:var(--type-label)}
 #about dt,#viewer dt{font-size:var(--type-label);line-height:1.6}
 #about .panel-chapter,#contact .panel-chapter{font-size:var(--type-mono)}
 #about .page-footer>.mono,#contact .page-footer>.mono{font-size:var(--type-label)}
 .site-shell>.session-rec,.page-panel>.session-rec,#about>.session-rec,#menu>.session-rec{
  left:0;right:0;bottom:0;min-height:var(--record-bar);width:100%;
  padding:8px 20px calc(8px + env(safe-area-inset-bottom));margin:0;
  justify-content:flex-end;font-size:var(--type-mono);line-height:20px;gap:10px;
  background:var(--paper);color:var(--ink);border-top:1px solid var(--line);
 }
 #menu>.session-rec{background:var(--photo-ink);color:var(--photo-paper);border-color:rgb(236 232 225 / 15%)}
 .intro-active .site-shell>.session-rec{background:transparent;border-color:transparent;color:var(--photo-paper)}
 .footer{bottom:calc(48px + env(safe-area-inset-bottom))}
 .footer .identity{font-size:13px;max-width:100%;line-height:1.55}
 .footer .draft-note{display:none}
 #about .page-footer,#contact .page-footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 #viewer .project-content{padding-bottom:calc(var(--record-bar) + env(safe-area-inset-bottom))}
 .player-time{font-size:11px}
 .player-start .mono,.player-status{font-size:var(--type-label)}
}
/* Kurze Handy-Displays: Raum für die Filme; alle Galerie-Bedienelemente bleiben erreichbar. */
@media(max-width:540px) and (max-height:660px){
 :root{--card-height:min(56svh,calc(100svh - 292px))}
 .stage{inset:112px 0 170px}
 .card-caption .card-title{font-size:22px;overflow-wrap:anywhere}
 .footer{display:none}
 .view-switch{bottom:106px}
 .right-rail{bottom:50px;height:96px}
}

/* Kontakt im Stil der Galerie: offene Textzeilen mit Linien statt gerundeter Boxen. */
#contact .contact-options{gap:0;grid-auto-rows:auto;border-top:1px solid var(--line)}
#contact .contact-card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;min-height:0;padding:clamp(22px,2.6vw,36px) 0;transition:padding .35s cubic-bezier(.2,.7,.1,1),color .2s}
#contact .contact-card-title{font-size:clamp(34px,3.6vw,60px);line-height:1.08;letter-spacing:-.045em}
#contact .contact-card-detail{margin-top:12px;color:var(--muted)}
#contact .contact-card:hover,#contact .contact-card:focus-visible{padding-left:clamp(12px,1.4vw,24px)}
#contact .contact-card:hover .contact-card-title,#contact .contact-card:hover .contact-arrow{color:var(--accent)}
@media(prefers-reduced-motion:reduce){#contact .contact-card{transition:none}}
/* Hover ohne orange Fläche: Text bleibt lesbar, nur Pfeil und Einzug reagieren. */
#contact .contact-card:hover,#contact .contact-card:focus-visible{background:none;border-color:var(--line);color:var(--ink)}
#contact .contact-card:hover .contact-card-title{color:var(--ink)}
#contact .contact-card:hover .contact-arrow,#contact .contact-card:focus-visible .contact-arrow{color:var(--accent)}

/* «Was ich mache» im Rhythmus der Projekt-Fotostrecke: 12er-Raster, versetzte Blöcke, Mono-Zähler. */
#about .practice{grid-template-columns:minmax(0,1fr)}
#about .practice .service-stories{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,7vw,120px) clamp(14px,2.5vw,38px);align-items:start;padding-top:clamp(12px,2vw,30px)}
#about .practice .service-stories article{margin:0;min-width:0}
#about .practice .service-stories article:nth-child(1){grid-column:1/7;grid-row:1}
#about .practice .service-stories article:nth-child(2){grid-column:8/13;grid-row:1;margin-top:clamp(80px,12vw,220px)}
#about .practice .service-stories article:nth-child(3){grid-column:2/8;grid-row:2}
#about .practice .service-stories article:nth-child(4){grid-column:7/13;grid-row:3;margin-top:calc(-1 * clamp(0px,4vw,70px))}
#about .practice .service-stories article>p{font-size:clamp(26px,2.4vw,44px);line-height:1.25;margin:18px 0 22px}
#about .practice .service-stories article>.mono{display:block;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);letter-spacing:.08em}
@media(max-width:800px){
 #about .practice .service-stories{grid-template-columns:repeat(6,minmax(0,1fr));gap:56px 10px}
 #about .practice .service-stories article:nth-child(odd){grid-column:1/6;grid-row:auto;margin-top:0}
 #about .practice .service-stories article:nth-child(even){grid-column:2/7;grid-row:auto;margin-top:0}
 #about .practice .service-stories article>p{font-size:26px}
}

/* Einstieg «Über mich»: keine Treppe mehr. Titel bündig links, Lead versetzt rechts wie in der Fotostrecke. */
#about .personal-title-middle,#about .personal-title-last{margin-left:0}
#about .personal-title-bridge{display:block}
#about .personal-title-middle{display:inline}
#about .reading-text{margin-left:calc(100% * 7 / 12);max-width:none;padding-top:clamp(14px,1.4vw,22px);border-top:1px solid var(--line)}
@media(max-width:800px){#about .reading-text{margin-left:calc(100% / 6)}}
/* Zwei Sätze, zwei Zeilen; Lead rückt näher an den Titel. */
#about .personal-title-last{display:inline}
#about .editorial-about > .personal-title{margin-bottom:clamp(20px,2.4vw,40px)}

/* ===== Über mich: ein gemeinsames 12er-Raster für alle Abschnitte =====
   Achse A = Spalte 1 (Kapitelmarken), Achse B = Spalte 4 (alle Inhalte beginnen hier).
   Gleicher Abstand zwischen allen Abschnitten. */
#about{--about-gap:clamp(14px,2.5vw,38px);--about-col:calc((100% - 11 * var(--about-gap)) / 12);--about-space:clamp(110px,12vw,210px)}
@media(min-width:801px){
 #about .reading-text{margin-left:calc(3 * (var(--about-col) + var(--about-gap)));width:calc(6 * var(--about-col) + 5 * var(--about-gap));margin-bottom:var(--about-space)}
 #about .editorial-intro,#about .editorial-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--about-gap);row-gap:0;margin:0 0 var(--about-space);align-items:start}
 #about .editorial-intro>.side-label,#about .career>.side-label,#about .practice>.section-sidebar{grid-column:1/4;grid-row:1}
 #about .editorial-copy{grid-column:4/8;grid-row:1}
 #about .small-portrait{grid-column:9/13;grid-row:1;width:100%;max-width:none;margin:clamp(40px,6vw,110px) 0 0;justify-self:stretch}
 #about .career>div{grid-column:4/11;grid-row:1;margin-left:0}
 #about .practice>.service-stories{grid-column:4/13;grid-row:1;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--about-gap);row-gap:clamp(56px,7vw,120px);padding-top:0}
 #about .practice .service-stories article:nth-child(1){grid-column:1/6;grid-row:1;margin-top:0}
 #about .practice .service-stories article:nth-child(2){grid-column:6/10;grid-row:1;margin-top:clamp(90px,11vw,200px)}
 #about .practice .service-stories article:nth-child(3){grid-column:2/7;grid-row:2;margin-top:0}
 #about .practice .service-stories article:nth-child(4){grid-column:5/10;grid-row:3;margin-top:0}
 #about .practice .service-stories article>p{font-size:clamp(24px,2.1vw,38px)}
 #about .page-footer{margin-top:var(--about-space)}
}
@media(max-width:800px){
 #about .reading-text{margin-left:0;margin-bottom:var(--about-space)}
 #about .editorial-intro,#about .editorial-section{margin:0 0 var(--about-space)}
}
#about .practice{margin-bottom:0}@media(max-width:800px){#about .page-footer{margin-top:var(--about-space)}}
/* «Neben der Arbeit»: gleiches Raster wie «Stationen». */
#about .practice{margin-bottom:var(--about-space)}
#about .personal .reading-copy{font-size:var(--type-body);line-height:var(--leading-body);max-width:52ch;margin:0 0 1em}
@media(min-width:801px){#about .personal>.side-label{grid-column:1/4;grid-row:1}#about .personal>div{grid-column:4/10;grid-row:1}#about .personal{margin-bottom:0}}

/* Pfeile als feine Linie (SVG) statt Schriftzeichen: auf allen Geräten gleich, kein Emoji auf iOS. */
.arrow{display:inline-block;width:.62em;height:.62em;margin-left:.12em;vertical-align:.02em;fill:none;stroke:currentColor;stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linecap:square;overflow:visible}
.arrow path{vector-effect:non-scaling-stroke}
.contact-arrow{font-size:0;line-height:0}
.contact-arrow .arrow{width:18px;height:18px;margin:0;stroke-width:1.5px}

/* Kein oranger Fokusrahmen nach Tippen/Klicken (v. a. iOS); Tastaturnutzer behalten ihn. */
html:not(.keyboard-nav) :focus,html:not(.keyboard-nav) :focus-visible{outline:none}

/* Impressum & Datenschutz */
.legal-page .career dd a,.legal-page .career dd a:visited{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-page .career dd{font-size:var(--type-body);line-height:var(--leading-body);max-width:62ch}
.legal-page .personal-title{margin-bottom:var(--about-space)}
.page-footer > .mono a,.menu-legal{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.menu-legal{display:inline-block;margin-top:10px;color:rgb(236 232 225 / 55%)}

/* Startbild (gianni-hero-v3): wenig Luft über dem Kopf – Ausschnitt oben ausrichten. */
.intro .intro-portrait img{top:0;height:max(104svh,56.28vw);object-position:50% 0%}
@media(max-width:540px){.intro .intro-portrait img{object-position:calc(50% + 2vw) 0%}}
.legal-page .reading-text{margin-bottom:var(--about-space)}
.legal-page .personal-title{margin-bottom:clamp(20px,2.4vw,40px)}
.menu-legal + .menu-legal{margin-left:0}

/* Über mich – Leistungen als ruhige Liste, Stationen als Zeitstrahl, Kontaktaufruf. */
#about .practice-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
#about .practice-list li{display:flex;align-items:baseline;gap:clamp(16px,2vw,32px);padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line);font-size:clamp(24px,2.6vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.15}
#about .practice-list li .mono{font-size:var(--type-mono);color:var(--muted);letter-spacing:.08em;min-width:2.5em}
#about .timeline dt{font-family:var(--mono);font-size:var(--type-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#about .timeline dd strong{display:block;font-weight:500;margin-bottom:6px}
#about .cta-link{font-size:clamp(34px,4.4vw,80px);font-weight:500;letter-spacing:-.045em;line-height:1.08;color:var(--ink);text-decoration:none;display:inline-block;transition:color .2s}
#about .cta-link:hover{color:var(--accent)}
#about .cta-link .arrow{width:.5em;height:.5em;stroke-width:2px}
#about .practice.approach .service-stories article:nth-child(3){grid-column:3/8;grid-row:2;margin-top:0}
@media(min-width:801px){
 #about .practice-section>.side-label,#about .about-cta>.side-label{grid-column:1/4;grid-row:1}
 #about .practice-section>.practice-list{grid-column:4/13;grid-row:1}
 #about .about-cta>.cta-link{grid-column:4/13;grid-row:1}
}
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Startseite: mittlere Rasterlinie entfernt, nur die Linien bei 25 % und 75 % bleiben. */
.intro-grid{background-image:linear-gradient(rgb(236 232 225 / 10%),rgb(236 232 225 / 10%)),linear-gradient(rgb(236 232 225 / 10%),rgb(236 232 225 / 10%));background-size:1px 100%;background-position:25% 0,75% 0;background-repeat:no-repeat}

/* Projektansicht: lange Titel umbrechen statt seitlich aus dem Bild zu laufen (v. a. auf dem Handy). */
#viewer #viewer-title{overflow-wrap:break-word;hyphens:auto}
#viewer.page-panel{overflow-x:hidden}