/* nils-jahnke.de – statisches Stylesheet. Keine externen Ressourcen, kein JavaScript.
   Gestaltung: Regie-Pult. Monitor-Schwarz für Referenzen und Kennzahlen, Tally-Rot als einziger Signalton,
   Inter für Überschriften und Text, Lower-Third-Bildunterschriften. */

@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Inter-Regular.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Inter-Medium.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/Inter-SemiBold.woff") format("woff")}

:root{
  /* Farben (Marke) */
  --paper:#FBFAF7;      /* warmes Weiß */
  --ink:#141311;        /* Tinte: nur Text und Buttons, nie Trennlinien */
  --text2:#4F4B45;      /* Fließtext sekundär, 8,6:1 auf Paper */
  --mute:#625D54;       /* kleine Beschriftung, 6:1 auf Paper */
  --grey:#8A8478;       /* Deko, Platzhalter */
  --hair:#C9C5BD;       /* Haarlinie: Formularfelder, Link-Unterstrich */
  --line:#E4E0D8;       /* Standard-Trennlinie: Listen, Kopfzeile, Fuß */
  --wash:#F1EEE8;
  --wash2:#E8E4DC;      /* Bildfläche bis das Foto geladen ist */
  --gold:#C9A227;
  --R:#FF0000; --G:#00C800; --B:#0000FF;
  --tally:#E5251B;      /* Programm-Rot: Signal, sparsam */

  /* Monitor-Schwarz (Referenzen, Kennzahlen, Bildunterschriften) */
  --night:#0E0F11;
  --night2:#17191C;     /* Bildfläche bis das Foto geladen ist */
  --on-night:#F2F0EB;   /* 16:1 auf Night */
  --on-night-mute:#A8A398; /* 7,6:1 auf Night */
  --night-line:rgba(255,255,255,.14);

  /* Schrift: Größe / Zeilenhöhe als feste Paare auf dem 8-px-Raster (4-px-Baseline) */
  --display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.75rem;   --lh-xs:1rem;      /* 12 / 16  Meta, Labels */
  --fs-s:.875rem;   --lh-s:1.5rem;     /* 14 / 24  Sekundärtext, Listen, Beschriftung */
  --fs-m:1rem;      --lh-m:1.5rem;     /* 16 / 24  Fließtext */
  --fs-ml:1.125rem; --lh-ml:1.75rem;   /* 18 / 28  Systeme */
  --fs-l:1.25rem;   --lh-l:1.75rem;    /* 20 / 28  Lead, H3 */
  --fs-xl:1.5rem;   --lh-xl:2rem;      /* 24 / 32  Ergebnis, Vita-Lead mobil */
  --fs-2xl:2rem;    --lh-2xl:2.5rem;   /* 32 / 40  Vita-Lead Desktop */
  --fs-3xl:2.5rem;  --lh-3xl:3rem;     /* 40 / 48  Rechtstexte, Formular-H3 */
  --fs-4xl:3rem;    --lh-4xl:3.5rem;   /* 48 / 56  Rechtstexte Desktop */
  /* Display (Inter SemiBold, enge Laufweite): Größe / Zeilenhöhe auf dem 8-px-Raster */
  --d-s:1.5rem;     --dl-s:2rem;       /* 24 / 32  Namen, Zwischenüberschrift */
  --d-m:2rem;       --dl-m:2.5rem;     /* 32 / 40  Firmen, Formulare, Einsatzfelder */
  --d-l:2.5rem;     --dl-l:3rem;       /* 40 / 48  H1 mobil, H3 Leistungen */
  --d-xl:3rem;      --dl-xl:3.5rem;    /* 48 / 56  H2 Desktop, Ziffern */
  --d-2xl:3.5rem;   --dl-2xl:4rem;     /* 56 / 64  H1 Tablet */
  --d-3xl:4.5rem;   --dl-3xl:5rem;     /* 72 / 80  H1 Desktop */

  /* Bewegung */
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* Abstände: nur diese Schritte */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;

  /* Raster: 12 Spalten */
  --gut:clamp(16px,4vw,48px);
  --col-gap:24px;
  --max:1280px;
  --head:56px;          /* Höhe der Kopfzeile (ohne Haarlinie), je Breite überschrieben */
  --sec:64px;           /* Abstand vor jedem Abschnitt */

  --bayer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='46' height='46' fill='%23FF0000'/%3E%3Crect x='54' y='0' width='46' height='46' fill='%2300C800'/%3E%3Crect x='0' y='54' width='46' height='46' fill='%2300C800'/%3E%3Crect x='54' y='54' width='46' height='46' fill='%230000FF'/%3E%3C/svg%3E");
}
@media (min-width:600px){:root{--head:64px;--sec:96px}}
@media (min-width:900px){:root{--head:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 1px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:var(--fs-m);line-height:var(--lh-m);font-weight:400;font-feature-settings:"calt","kern";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
/* Unsichtbares Detail: feine Innenkontur an Fotos, damit helle Bildkanten auf Paper nicht ausfransen */
img{outline:1px solid rgba(20,19,17,.08);outline-offset:-1px}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--ink)}

a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.skip{position:absolute;left:var(--gut);top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:var(--s1) var(--s2);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500}
.skip:focus{top:8px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.g{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--col-gap)}
@media (min-width:900px){.g{grid-template-columns:repeat(12,minmax(0,1fr))}}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfzeile: bleibt beim Scrollen stehen (position:sticky, ohne JS) ----------
   Dauerhafte, sehr helle Haarlinie: ohne JS lässt sich "erst beim Scrollen" nicht schalten,
   und Fotos laufen unter der deckenden Leiste durch – die Linie gibt ihr eine ruhige Kante. */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);min-height:var(--head)}
.brand{display:block;line-height:0;flex:none}
.brand img{width:152px;height:auto;outline:0}
.nav{display:flex;gap:0 var(--s3);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;position:relative}
.nav a::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--bayer);opacity:0}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1}
@media (max-width:899px){
  .nav{gap:0}
  .nav a{min-width:44px;padding-inline:2px}
  .nav a::before{display:none}
}
/* Schmale Geräte: Menü statt Link-Leiste (Breakpoint 720 px) */
@media (max-width:719.98px){
  .top .nav{display:none}
  .brand img{width:136px}
}
@media (min-width:600px) and (max-width:899px){.brand img{width:128px}.nav{gap:0 var(--s2)}}
@media (min-width:900px){.brand img{width:176px}}

/* ---------- Überschriften: Inter SemiBold, enge Laufweite ---------- */
h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);font-weight:400;letter-spacing:-.022em;max-width:26ch;text-wrap:balance}
.hero h1,.sec-title,.spec-row h3,.steps .no,.fields h3,.firm h3,.form h3,.vita-cols h3,.tl b,.names span{font-family:var(--display);font-weight:600;font-kerning:normal;letter-spacing:-.03em}
.sec-title{font-size:var(--d-m);line-height:var(--dl-m);letter-spacing:-.03em;text-wrap:balance;margin-bottom:var(--s6)}
@media (min-width:600px){.sec-title{font-size:var(--d-l);line-height:var(--dl-l)}}
@media (min-width:900px){.sec-title{font-size:var(--d-xl);line-height:var(--dl-xl)}}
.sec-head,.sec-body{grid-column:1 / -1}

/* Lower Third: Bildunterschrift als schwarzer Balken am Bildrand, wie eine Einblendung */
.lt,.hero-fig figcaption,.band figcaption,.portrait figcaption{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:var(--s1);max-width:100%;padding:var(--s1) var(--s2);background:var(--night);color:var(--on-night);font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;margin:0}
.lt::before,.hero-fig figcaption::before,.band figcaption::before,.portrait figcaption::before{content:"";flex:none;width:8px;height:8px;background:var(--bayer)}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s6) var(--s8)}
.hero-main{display:block}
.byline{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mute);font-weight:500;margin-bottom:var(--s3)}
.hero h1{font-size:var(--d-l);line-height:var(--dl-l);max-width:none;letter-spacing:-.03em;text-wrap:pretty;margin-bottom:var(--s4)}
.nb{white-space:nowrap}
.lead{font-size:var(--fs-l);line-height:var(--lh-l);color:var(--text2);max-width:44ch}
.roles{margin-top:var(--s4);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.roles li{display:contents}
.roles a{position:relative;display:flex;align-items:flex-end;min-height:56px;padding:var(--s2);background:var(--wash);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500}
.roles .sq{position:absolute;left:0;top:0;right:0;width:auto;height:4px}
.sq{flex:none;width:12px;height:12px;display:block}
.sq.r{background:var(--R)}.sq.g{background:var(--G)}.sq.b{background:var(--B)}
.hero-fig{position:relative;margin:var(--s6) 0 0}
.hero-fig picture{position:relative;display:block}
/* Tally-Rahmen: das Bild "auf Sendung" */
.hero-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--wash2);outline:0}
.hero-fig figcaption::before{background:var(--tally)}
.hero-fig figcaption{left:3px;bottom:3px}
.hero-fig figcaption{margin:0}
@media (max-width:399.98px){.hero h1{font-size:2.75rem;line-height:2.75rem}.hero .lead{font-size:var(--fs-m);line-height:var(--lh-m)}}
@media (min-width:600px){.hero h1{font-size:var(--d-2xl);line-height:var(--dl-2xl)}.hero-fig img{aspect-ratio:16/9}.roles{grid-template-columns:repeat(3,minmax(0,1fr))}.roles a{min-height:96px}}
@media (min-width:900px){
  .hero{padding-block:var(--s8) var(--s12)}
  .hero .g{align-items:end}
  .hero-main{display:contents}
  .byline{grid-column:1 / -1;grid-row:1}
  .hero h1{grid-column:1 / -1;grid-row:2;margin-bottom:var(--s6)}
  .lead{grid-column:1 / span 5;grid-row:3;align-self:start;font-size:var(--fs-xl);line-height:var(--lh-xl)}
  .roles{grid-column:1 / span 5;grid-row:4;margin-top:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
  .roles a{min-height:96px}
  .hero-fig{grid-column:6 / -1;grid-row:3 / span 2;margin:0}
  .hero-fig img{aspect-ratio:16/10}
}
@media (min-width:1100px){.hero h1{font-size:var(--d-3xl);line-height:var(--dl-3xl)}}
@media (hover:hover) and (pointer:fine){.roles a:hover{background:var(--wash2)}}
.roles a:active{background:var(--wash2)}

/* ---------- Kennzahlen: Statusleiste im Monitor-Schwarz ---------- */
.facts{background:var(--night);color:var(--on-night);padding-block:var(--s4)}
.facts-row{display:grid;grid-template-columns:minmax(0,1fr)}
.facts-row>div{padding-block:var(--s2);border-top:1px solid var(--night-line)}
.facts-row>div:first-child{border-top:0}
.facts dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--on-night-mute);font-weight:500;margin-bottom:var(--s1)}
.facts dd{font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500;max-width:30ch}
@media (min-width:700px){.facts-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}.facts-row>div:nth-child(2){border-top:0}}
@media (min-width:900px){
  .facts{padding-block:var(--s6)}
  .facts-row{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}
  .facts-row>div{padding-block:0;padding-inline:var(--s3);border-top:0;border-left:1px solid var(--night-line)}
  .facts-row>div:first-child{padding-left:0;border-left:0}
}

/* ---------- Abschnitte ---------- */
.sec{padding-top:var(--sec)}
main>.sec:last-child{padding-bottom:var(--sec)}

/* ---------- Referenzen: Multiviewer auf Monitor-Schwarz ---------- */
.refs{background:var(--night);color:var(--on-night);padding-block:var(--s8) var(--s8)}
.refs .sec-title{margin-bottom:var(--s3)}
.refs-intro{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--on-night-mute);max-width:44ch}
.refs img{outline-color:rgba(255,255,255,.1);background:var(--night2)}
.ref-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s2);margin-top:var(--s6)}
.ref{display:block;min-width:0}
.frame{position:relative;overflow:hidden;background:var(--night2)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.land .frame{aspect-ratio:5/3}
.port .frame{aspect-ratio:1/1}
/* Beschriftung: Projekt als Titel, Kunde und Rolle leise darunter (Bezeichner bleiben für Screenreader) */
.cap{margin-top:var(--s2)}
.cap dt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap dd{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--on-night-mute);font-weight:400}
.cap>div:first-child dd{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--on-night);font-weight:500;margin-bottom:0}
@media (min-width:600px){
  .refs{padding-block:var(--s12)}
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s2)}
  .port .frame{aspect-ratio:4/5}
}
@media (min-width:900px){
  .refs>.wrap>.g{align-items:end}
  .refs .sec-head{grid-column:1 / span 7;grid-row:1}
  .refs .sec-title{margin-bottom:0}
  .refs-intro{grid-column:9 / -1;grid-row:1;padding-bottom:var(--s1)}
  .ref-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6) var(--s2);margin-top:var(--s8)}
  .ref-1,.ref-8{grid-column:span 7}
  .ref-2,.ref-7{grid-column:span 5}
  .ref-3,.ref-4,.ref-5,.ref-6{grid-column:span 3}
  .ref .frame{aspect-ratio:auto;width:100%}
  .ref-1 .frame,.ref-2 .frame{height:clamp(320px,29vw,420px)}
  .ref.port .frame{height:clamp(300px,28vw,400px)}
  .ref-7 .frame,.ref-8 .frame{height:clamp(300px,27vw,400px)}
}
@media (min-width:900px) and (max-width:1279.98px){.cap dd{overflow-wrap:anywhere}}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .frame img{transition:transform 400ms var(--ease-out)}
  .ref:hover .frame img{transform:scale(1.025)}
}

/* ---------- Leistungen ---------- */
.spec{border-top:1px solid var(--line)}
.spec-row{padding-block:var(--s6);border-bottom:1px solid var(--line);scroll-margin-top:var(--s2)}
.spec-row h3{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);font-size:var(--d-l);line-height:var(--dl-l);letter-spacing:-.03em;margin-bottom:var(--s3);text-wrap:balance}
.spec-row h3 .sq{width:16px;height:16px}
.spec dl{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
.spec dl>div{display:grid;grid-template-columns:minmax(0,1fr)}
.spec dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--mute);font-weight:500}
.spec dd{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text2);max-width:52ch}
.spec dd.out{color:var(--ink);font-weight:500;font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:-.012em;max-width:28ch;text-wrap:balance;padding-top:var(--s1)}
@media (min-width:600px){.spec dl>div{grid-template-columns:104px minmax(0,1fr);column-gap:var(--s2);align-items:baseline}}
@media (min-width:900px){
  .spec-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .spec-row h3{grid-column:1 / span 6;margin-bottom:0;font-size:var(--d-m);line-height:var(--dl-m)}
  .spec dl{grid-column:7 / -1}
}
@media (min-width:1200px){.spec-row h3{font-size:var(--d-l);line-height:var(--dl-l)}}
.spec-note{margin-top:var(--s4);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--mute);max-width:60ch}
.also-roles{margin-top:var(--s6)}
.also-roles h3{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:600;color:var(--mute);margin-bottom:var(--s1)}
.also-roles li{position:relative;padding:var(--s1) 0 var(--s1) var(--s3);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:60ch}
.also-roles li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--bayer)}
.also-roles strong{color:var(--ink);font-weight:600}
@media (min-width:900px){#leistungen .spec-note,#leistungen .also-roles{margin-left:calc((100% + var(--col-gap)) / 2)}}

/* ---------- Bildbänder: volle Breite, Bildunterschrift als Lower Third ---------- */
.bleed{padding-top:var(--sec)}
.band{position:relative;margin:0}
.band picture{display:block}
.band img{width:100%;height:clamp(240px,52vw,560px);object-fit:cover;object-position:50% 40%;background:var(--night2);outline:0}
.band figcaption{left:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));margin:0}
@media (min-width:900px){.band img{height:clamp(400px,36vw,560px)}}
.band figcaption{position:absolute;bottom:0}
.band img[src*="violett"]{object-position:50% 50%}

/* ---------- Ablauf: vier Schritte als Fahrplan, der letzte ist "Live" ---------- */
.sec-lead{font-size:var(--fs-l);line-height:var(--lh-l);color:var(--ink);max-width:36ch;margin-bottom:var(--s6)}
.steps{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
.steps li{padding-top:var(--s2);border-top:3px solid var(--line)}
.steps li:last-child{border-top-color:var(--tally)}
.steps .no{display:flex;align-items:flex-start;justify-content:space-between;font-size:var(--d-l);line-height:var(--dl-l);color:var(--mute);font-variant-numeric:tabular-nums lining-nums;margin-bottom:var(--s2)}
.steps li:last-child .no{color:var(--tally)}
.steps .sq{order:2;width:12px;height:12px;margin-top:var(--s1)}
.sq.on{background:var(--bayer)}
.steps h3{font-size:var(--fs-l);line-height:var(--lh-l);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s1)}
.steps p{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:34ch}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s6)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}.steps .no{font-size:var(--d-xl);line-height:var(--dl-xl)}}
@media (min-width:900px){.sec-lead{font-size:var(--fs-xl);line-height:var(--lh-xl)}}

/* ---------- Einsatzfelder: vier Hochformate, versetzt ---------- */
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6) var(--s2)}
.fields figure{margin:0}
.fields img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--wash2)}
.fields figcaption{margin-top:var(--s2)}
.fields h3{font-size:var(--d-s);line-height:var(--dl-s);margin-bottom:var(--s1);text-wrap:balance}
.fields p{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:36ch}
@media (min-width:600px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields img{aspect-ratio:3/4}}
@media (min-width:900px){
  .fields{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
  .fields li:nth-child(even){margin-top:var(--s8)}
}

/* ---------- Systeme (Raster) und Auftraggeber (Zeilen) ---------- */
.ledger{border-bottom:1px solid var(--line)}
.ledger>div{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding-block:var(--s2);border-top:1px solid var(--line)}
.ledger dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--mute);font-weight:500;margin-bottom:var(--s1)}
.ledger dd{font-size:var(--fs-ml);line-height:var(--lh-ml);font-weight:500}
@media (min-width:600px){
  #systeme .ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);border-bottom:0}
  #systeme .ledger>div{padding-block:var(--s3) var(--s4)}
}
@media (min-width:900px){#systeme .ledger{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  #auftraggeber .ledger>div{grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--col-gap);align-items:baseline;padding-block:var(--s3)}
  #auftraggeber .ledger dt{margin-bottom:0}
}
.names{display:flex;flex-wrap:wrap}
.names span:not(:last-child)::after{content:"/";margin-inline:var(--s1);color:var(--grey);font-weight:400}
.names span{max-width:100%;font-size:1.5rem;line-height:var(--dl-s);letter-spacing:.005em}
@media (min-width:900px){.names span{font-size:var(--d-s)}}

/* ---------- Meine Unternehmen ---------- */
.sec-note{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text2);max-width:60ch;margin-bottom:var(--s4)}
.firms{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--col-gap)}
.firm{padding-top:var(--s2);border-top:3px solid var(--line)}
.firm h3{font-size:var(--d-m);line-height:var(--dl-m);margin-bottom:var(--s1);text-wrap:balance}
.firm p{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:46ch}
.firm .firm-role{margin-top:var(--s1);color:var(--mute)}
.ext{display:inline-flex;align-items:center;gap:var(--s1);min-height:48px;margin-top:var(--s1);font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;color:var(--ink)}
.ext span{border-bottom:1px solid var(--hair)}
.ext:hover span{border-bottom-color:var(--ink)}
.ext::after{content:"\2192";font-weight:400}
@media (min-width:600px){.firms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){.ext::after{transition:transform 160ms var(--ease-out)}.ext:hover::after{transform:translateX(4px)}}

/* ---------- Vita ---------- */
.vita{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:-.015em;max-width:40ch;color:var(--ink);text-wrap:pretty}
@media (min-width:900px){.vita{font-size:var(--fs-2xl);line-height:var(--lh-2xl);max-width:36ch}}
.vita-grid{margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6) var(--col-gap)}
.portrait{position:relative;margin:0;max-width:480px}
.portrait img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:85% 50%;background:var(--wash2)}
.vita-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.vita-cols h3{font-size:var(--d-s);line-height:var(--dl-s);margin-bottom:var(--s2)}
.tl li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s2);padding-block:var(--s1);border-top:1px solid var(--line);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2)}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl b{font-size:var(--fs-xl);line-height:var(--lh-xl);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.plain li{padding-block:var(--s1);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2)}
.link-u{color:var(--ink);font-weight:500;border-bottom:1px solid var(--hair)}
.link-u:hover{border-bottom-color:var(--ink)}
@media (min-width:900px){
  .vita-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .portrait{grid-column:1 / span 5;max-width:none;align-self:start;position:sticky;top:calc(var(--head) + var(--s3))}
  .portrait img{aspect-ratio:4/5}
  .vita-cols{grid-column:7 / -1}
}

/* ---------- Häufige Fragen: Frage links groß, Antwort rechts ---------- */
#fragen .spec-row h3{font-family:"Inter",system-ui,sans-serif;font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:500;letter-spacing:-.012em;max-width:22ch}
#fragen .spec dt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fragen .spec dl>div{display:block}
#fragen .spec dd{font-size:var(--fs-m);line-height:var(--lh-m)}
#fragen .spec-row{padding-block:var(--s4)}
#fragen .spec-row h3{margin-bottom:var(--s2)}

/* ---------- Kontakt ---------- */
.ask{margin-top:var(--s3);font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text2);max-width:48ch}
.ask a{border-bottom:1px solid var(--hair);color:var(--ink)}
.ask a:hover{border-bottom-color:var(--ink)}
.contact{margin-top:var(--s6);border-bottom:1px solid var(--line)}
.contact div{display:grid;grid-template-columns:minmax(0,1fr);padding-block:var(--s2);border-top:1px solid var(--line)}
.contact dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--mute);font-weight:500;margin-bottom:var(--s1)}
.contact dd{font-size:var(--fs-l);line-height:var(--lh-l);font-weight:500}
.contact a{display:inline-flex;align-items:center;min-height:44px}
.contact a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (min-width:600px){.contact div{grid-template-columns:200px minmax(0,1fr);column-gap:var(--s3);align-items:baseline}.contact dt{margin-bottom:0}}

/* ---------- Formulare ---------- */
.forms{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8) var(--col-gap);margin-bottom:var(--s6)}
.form{display:grid;gap:var(--s3);align-content:start}
.form h3{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:500;letter-spacing:-.012em}
.form-note{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:46ch;margin-top:calc(-1*var(--s1))}
.form label{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--mute)}
.form label>input,.form label>select,.form label>textarea{display:block;margin-top:var(--s1)}
.form .opt{font-weight:400}
.form input,.form select,.form textarea{width:100%;height:48px;padding:0 var(--s2);font:inherit;font-size:var(--fs-m);line-height:var(--lh-m);font-weight:400;color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:0;appearance:none;-webkit-appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.form textarea{height:auto;min-height:144px;padding:12px var(--s2);resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#8A8478;opacity:1}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--grey)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:end}
.slots{border:0;padding:0;margin:0;display:grid;gap:var(--s2)}
.slots legend{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--mute);margin-bottom:var(--s1);padding:0}
.slot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s2);align-items:end}
.form .check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s2);align-items:start;font-size:var(--fs-s);line-height:var(--lh-s);font-weight:400;color:var(--text2)}
.form .check input{margin-top:2px;height:20px;width:20px;padding:0;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--ink)}
.btn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--s4);font:inherit;font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;cursor:pointer}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.direct{margin-top:0}
.direct a{border-bottom:1px solid var(--hair);color:var(--ink);font-weight:500}
.direct a:hover{border-bottom-color:var(--ink)}
@media (min-width:600px){.row2{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s8) var(--s6);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2)}
.foot-logo{width:min(100%,560px);height:auto;margin-bottom:var(--s8)}
.foot-cols{row-gap:var(--s4)}
.foot .also,.foot .addr,.foot .legal{grid-column:1 / -1}
.foot address{font-style:normal}
.foot a.link{display:inline-flex;align-items:center;min-height:48px;margin-block:-12px;color:var(--ink);font-weight:500;position:relative}
.foot a.link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot .legal{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.foot .also p{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s1)}
.foot .soc{grid-column:1 / -1}
.social{display:flex;flex-wrap:wrap;gap:0 var(--s2)}
.social a.link{gap:var(--s1)}
.ico{flex:none;display:block}
.foot .small{color:var(--mute);font-size:var(--fs-xs);line-height:var(--lh-xs);margin-top:var(--s2);grid-column:1 / -1}
@media (min-width:900px){
  .foot{padding-block:var(--s12) var(--s8)}
  .foot-logo{margin-bottom:var(--s12)}
  .foot .addr{grid-column:1 / span 3}
  .foot .also{grid-column:4 / span 3}
  .foot .soc{grid-column:4 / span 4}
  .foot .legal{grid-column:10 / -1;grid-row:1;justify-content:flex-end}
}

/* ---------- Rechtstexte ---------- */
.legal-page{padding-block:var(--s6) var(--s12)}
.legal-page h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);max-width:none;margin-bottom:var(--s6)}
@media (min-width:900px){.legal-page h1{font-size:var(--fs-3xl);line-height:var(--lh-3xl)}}
.prose{max-width:66ch}
.prose h2{font-size:var(--fs-l);line-height:var(--lh-l);font-weight:600;margin:var(--s6) 0 var(--s2);letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:var(--fs-m);line-height:var(--lh-m);color:var(--text2);margin-bottom:var(--s2)}
.prose ul{margin:0 0 var(--s2)}
.prose li{position:relative;padding-left:var(--s3);margin-bottom:var(--s1)}
.prose li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--bayer)}
.prose a{color:var(--ink);border-bottom:1px solid var(--hair)}
.prose a:hover{border-bottom-color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- Bewegung / Druck ---------- */
@media (prefers-reduced-motion:no-preference){
  a{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
}
@media print{.top{position:static}.top .nav,.skip{display:none}}

/* ---------- Terminkalender ---------- */
.forms{gap:var(--s12) var(--col-gap)}
.cal-wrap{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.cal{border:1px solid var(--line);background:#fff;padding:var(--s2)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s1)}
.cal-title{font-size:var(--fs-m);line-height:var(--lh-m);font-weight:500}
.cal-nav{width:48px;height:48px;border:0;background:none;font:inherit;font-size:var(--fs-xl);line-height:1;color:var(--ink);cursor:pointer}
.cal-nav:disabled{color:var(--hair);cursor:default}
.cal-nav:hover:not(:disabled){background:var(--paper)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal .wd{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--mute);font-weight:500;text-align:center;padding-block:var(--s1)}
.cal .day{height:44px;border:0;background:none;font:inherit;font-size:var(--fs-s);line-height:var(--lh-s);color:var(--ink);cursor:pointer;position:relative;font-variant-numeric:tabular-nums}
.cal .day:hover:not(:disabled){background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.cal .day:disabled{color:var(--hair);cursor:default}
.cal .day.today{font-weight:600}
.cal .day.has::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;background:var(--ink)}
.cal .day.on{background:var(--ink);color:var(--paper)}
.cal .day.on.has::after{background:var(--paper)}
.cal button:focus-visible,.times button:focus-visible,.picks button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cal-side{display:grid;gap:var(--s2);align-content:start}
.cal-sub{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--mute)}
.cal-hint{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--s1)}
.times .time{height:44px;border:1px solid var(--line);background:#fff;font:inherit;font-size:var(--fs-s);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.times .time:hover{border-color:var(--ink)}
.times .time.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.picks{border-top:1px solid var(--line)}
.picks li{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-size:var(--fs-s);line-height:var(--lh-s)}
.picks li.empty{color:var(--text2)}
.picks .rm{border:0;background:none;font:inherit;font-size:var(--fs-xs);color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:48px;padding-inline:var(--s1)}
.cal-msg{font-size:var(--fs-s);line-height:var(--lh-s);color:var(--ink);min-height:24px}
@media (min-width:900px){.cal-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}.cal .day{height:48px}}

.plain-p{padding-block:var(--s1);font-size:var(--fs-s);line-height:var(--lh-s);color:var(--text2);max-width:46ch}

/* ---------- Mobiles Menü: <details>, ohne JS bedienbar (menu.js schließt es nach Antippen) ---------- */
.menu{display:none}
@media (max-width:719.98px){
  .menu{display:block}
  .menu summary{list-style:none;display:flex;align-items:center;gap:var(--s1);min-height:48px;padding-inline:var(--s1);margin-right:calc(-1*var(--s1));font-size:var(--fs-s);line-height:var(--lh-s);font-weight:500;cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:"";width:18px;height:10px;border-block:2px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat}
  .menu[open] summary::after{height:18px;border:0;background:linear-gradient(45deg,transparent 46%,var(--ink) 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,var(--ink) 46% 54%,transparent 54%)}
  .menu summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .menu-list{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s1) var(--gut) var(--s3)}
  .menu-list a{display:flex;align-items:center;min-height:56px;border-top:1px solid var(--line);font-size:var(--fs-l);line-height:var(--lh-l);font-weight:500;color:var(--ink)}
  .menu-list a:first-child{border-top:0}
  .top{position:sticky}
}

/* ---------- Feinschliff: Zustände und Bewegung (nur transform, opacity, Farbe) ---------- */
.form h3{font-family:var(--display);font-weight:600;font-size:var(--d-m);line-height:var(--dl-m);letter-spacing:0}
.contact dd{font-size:var(--fs-l);line-height:var(--lh-l)}
@media (min-width:600px){.ask.direct{font-size:var(--fs-xl);line-height:var(--lh-xl);max-width:none;color:var(--ink)}}
.btn{transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.btn:active{transform:scale(.97)}
.form input,.form select,.form textarea{transition:border-color 150ms ease}
.cal .day:active:not(:disabled),.times .time:active{transform:scale(.97)}
.cal .day,.times .time{transition:transform 120ms var(--ease-out),background-color 120ms ease,border-color 120ms ease}
.ext:active{transform:scale(.98)}
.roles a{transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.roles a:active{transform:scale(.97)}
.nav a::before{transition:opacity 150ms ease}
@media (hover:none){.btn:hover{background:var(--ink);color:var(--paper)}}

/* Einmaliger Auftakt im Kopfbereich (nur ohne Bewegungs-Einschränkung) */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .hero .byline,.hero h1,.hero .lead,.hero .roles,.hero-fig{animation:rise 360ms var(--ease-out) both}
  .hero h1{animation-delay:40ms}
  .hero .lead{animation-delay:100ms}
  .hero .roles{animation-delay:140ms}
  .hero-fig{animation-delay:180ms}
  @keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .menu[open] .menu-list{animation:menu-in 180ms var(--ease-out)}
}
@media (max-width:359px){.nb{white-space:normal;hyphens:auto}.hero h1{font-size:2.5rem;line-height:3rem}}

/* ---------- Kontakt auf Monitor-Schwarz ---------- */
#kontakt{--ink:var(--on-night);--paper:var(--night);--text:var(--on-night);--text2:var(--on-night-mute);--mute:var(--on-night-mute);--line:var(--night-line);--hair:rgba(255,255,255,.42);--grey:rgba(255,255,255,.6);background:var(--night);color:var(--on-night);margin-top:var(--s12);padding-bottom:var(--s8)}
@media (min-width:900px){#kontakt{padding-bottom:var(--s12)}}
#kontakt .form input,#kontakt .form select,#kontakt .form textarea{background:var(--night2);color:var(--on-night)}
#kontakt .form input::placeholder,#kontakt .form textarea::placeholder{color:#8F8A80}
#kontakt .cal,#kontakt .times .time{background:var(--night2)}
#kontakt .cal .day:hover:not(:disabled){background:var(--night)}
#kontakt .cal .day:disabled,#kontakt .cal-nav:disabled{color:rgba(255,255,255,.28)}
#kontakt .cal .day.on,#kontakt .times .time.on{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
#kontakt .btn{color:var(--night);background:var(--on-night);border-color:var(--on-night)}
#kontakt .btn:hover{background:var(--night);color:var(--on-night)}
#kontakt a{color:inherit}

/* ---------- Fußzeile: eine Grundlinie, klare Linien ---------- */
.foot{border-top:0;padding-block:var(--s8) var(--s4)}
.foot-logo{outline:0;margin-bottom:var(--s6)}
.foot-cols{row-gap:0;border-top:1px solid var(--ink);padding-top:var(--s3);align-items:start}
.foot .addr,.foot .soc,.foot .legal{grid-column:1 / -1;padding-block:var(--s2);border-top:1px solid var(--line)}
.foot .addr{border-top:0;padding-top:0}
.foot a.link{margin-block:0;min-height:44px}
.foot .social,.foot .legal{margin:0}
.foot .small{grid-column:1 / -1;margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}
@media (min-width:900px){
  .foot{padding-block:var(--s12) var(--s4)}
  .foot-logo{margin-bottom:var(--s8)}
  .foot .addr,.foot .soc,.foot .legal{border-top:0;padding-block:0}
  .foot .addr{grid-column:1 / span 3;grid-row:1}
  .foot .soc{grid-column:4 / span 5;grid-row:1}
  .foot .legal{grid-column:9 / -1;grid-row:1;justify-content:flex-end;align-items:flex-start}
  .foot .social a.link,.foot .legal a.link{min-height:24px;padding-block:0}
  .foot .small{margin-top:var(--s8)}
}

/* ---------- Abnahme-Korrekturen ---------- */
/* Kalender: Hover nur mit Maus, „gewählt“ gewinnt immer */
#kontakt .cal .day:hover:not(:disabled){background:none}
@media (hover:hover) and (pointer:fine){#kontakt .cal .day:hover:not(:disabled):not(.on){background:var(--night)}}
#kontakt .cal .day.on,#kontakt .cal .day.on:hover{background:var(--on-night);color:var(--night);box-shadow:none}
#kontakt .times .time.on,#kontakt .times .time.on:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
#kontakt .cal-nav:hover:not(:disabled){background:none}
@media (hover:hover) and (pointer:fine){#kontakt .cal-nav:hover:not(:disabled){background:var(--night)}}
.cal-hint{max-width:none}
.cal-side{gap:var(--s3)}
.ask.direct{color:var(--ink)}
/* Hierarchie: Leistungen-h3 nie größer als Abschnittstitel */
@media (max-width:899.98px){.spec-row h3{font-size:var(--d-m);line-height:var(--dl-m)}}
/* Auftraggeber: kein hängender Schrägstrich */
.names{gap:0 var(--s3)}
.names span:not(:last-child)::after{content:none}
.names span{white-space:nowrap;max-width:100%}
@media (max-width:599px){.names span{font-size:1.125rem;line-height:1.5rem;font-weight:500;white-space:normal}}
/* FAQ */
#fragen .spec-row h3{max-width:none;text-wrap:balance}
/* Hero */
.hero h1{text-wrap:balance}
@media (max-width:399.98px){.hero h1{line-height:3rem}}
/* Fußzeile */
.foot-cols{border-top-color:var(--hair)}
@media (min-width:900px){.foot .addr{grid-column:1 / span 6}.foot .soc{grid-column:7 / span 3}.foot .legal{grid-column:10 / -1}}
@media (max-width:599.98px){.foot-logo{width:auto;height:auto;max-width:100%}}
/* Tap-Ziele */
@media (max-width:719.98px){.form .link-u,.ask a,.direct a,.contact a,.form-note a{display:inline-block;padding-block:12px;margin-block:-12px}}
@media (max-width:359.98px){.cal{padding:var(--s1)}.cal-grid{gap:0}}
/* Druck */
@media print{
  :root{--on-night:#141311;--on-night-mute:#4F4B45;--night-line:rgba(0,0,0,.2)}
  .facts,.refs,#kontakt{background:none!important;color:#141311!important}
  #kontakt .forms,#kontakt .form,.band,.bleed,.hero-fig{display:none}
  figure,.ref,.spec-row,.tl>*,.steps>*{break-inside:avoid}
  h2,h3{break-after:avoid}
  img{max-width:100%}
}
.foot-tag{display:none}
@media (max-width:599.98px){.foot-logo{width:min(100%,320px);height:auto;aspect-ratio:38.139/3.738;margin-bottom:var(--s2)}.foot-tag{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--mute);margin:0 0 var(--s6);letter-spacing:.04em;text-transform:uppercase}}