/*
  Look: ruhig und seriös, wie die Website einer Beratungsfirma.
  Farben: Weiss #FFFFFF, Text #1B2432, Marineblau #12284B, Grau #516074, Linie #D3DAE3, Flaeche #F4F6F9
  Schriften: Source Serif 4 (Ueberschriften), IBM Plex Sans (Text)
*/
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#FFFFFF;
  --ink:#1B2432;
  --navy:#12284B;
  --muted:#516074;
  --rule:#D3DAE3;
  --tint:#F4F6F9;
  --todo:#FFF1BF;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1em;max-width:66ch}
h1,h2,h3,h4{margin:0;color:var(--navy);line-height:1.2}
h1,h2,h3{font-family:var(--serif);font-weight:650}
ul{margin:0;padding:0}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.wrap{max-width:1040px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:800px}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:var(--gutter);top:8px}
.noscript{padding-block:2rem}

/* Kopfzeile */
.site-header{border-top:5px solid var(--navy);border-bottom:1px solid var(--rule);background:var(--bg)}
.header-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand lang" "nav nav";align-items:center;gap:.5rem 1.5rem;padding-block:1rem}
.brand{grid-area:brand;font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--navy);text-decoration:none}
.nav{grid-area:nav}
.nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none}
.nav a{color:var(--ink);text-decoration:none;font-size:.9688rem}
.nav a:hover{color:var(--navy);text-decoration:underline}
.lang{grid-area:lang;display:flex;border:1px solid var(--navy);border-radius:2px}
.lang button{font:600 .875rem/1 var(--sans);letter-spacing:.04em;min-width:44px;min-height:36px;padding:0 .7rem;border:0;background:var(--bg);color:var(--navy);cursor:pointer}
.lang button+button{border-left:1px solid var(--navy)}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
@media (min-width:760px){
  .header-row{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav lang"}
  .nav ul{justify-content:flex-end;padding-right:.5rem}
}

/* Einstieg */
.hero{display:grid;gap:2rem;padding-block:clamp(2.5rem,6vw,4.5rem)}
.photo{width:160px;aspect-ratio:4/5;border:1px solid var(--rule);background:var(--tint);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .initials{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-family:var(--serif);font-size:3.25rem;font-weight:600;color:var(--navy)}
.hero h1{font-size:clamp(2.25rem,5vw,3.25rem);font-weight:700;letter-spacing:-.01em}
.role{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.65rem);color:var(--ink);margin:.4rem 0 .15rem}
.direction{color:var(--muted);margin:0 0 1.25rem}
.intro{max-width:60ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.5rem}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;padding:.7rem 1.15rem;border-radius:2px}
.btn:hover{background:#0B1B35;color:#fff}
.facts{display:grid;grid-template-columns:1fr;margin:2.25rem 0 0;border-top:1px solid var(--rule)}
.facts div{padding:.85rem 0;border-bottom:1px solid var(--rule)}
.facts dt{font-size:.875rem;color:var(--muted)}
.facts dd{margin:0;font-weight:500}
@media (min-width:600px){.facts{grid-template-columns:1fr 1fr;column-gap:2rem}}
@media (min-width:760px){
  .hero{grid-template-columns:220px 1fr;gap:3rem;align-items:start}
  .photo{width:220px}
}

/* Abschnitte */
section{padding-block:clamp(2.75rem,6vw,4.5rem);border-top:1px solid var(--rule)}
section:nth-of-type(even){background:var(--tint)}
section:nth-of-type(even) .photo{background:var(--bg)}
.sec-head{margin-bottom:2rem}
.sec-head p{color:var(--muted);margin:.5rem 0 0}
h2{font-size:clamp(1.75rem,3.5vw,2.25rem)}
#kontakt h2{margin-bottom:1.25rem}

/* Projekte und Zertifikate */
.item{display:grid;gap:1rem 2.5rem;padding-block:2rem;border-top:1px solid var(--rule)}
.item:first-child{border-top:0;padding-top:0}
.item h3{font-size:clamp(1.35rem,2.6vw,1.65rem);margin-bottom:.35rem}
.item .sub{color:var(--muted);margin:0 0 1rem}
.item ul.points{list-style:none;margin:0 0 1rem;max-width:66ch}
.item ul.points li{position:relative;padding-left:1.1rem;margin-bottom:.4rem}
.item ul.points li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--navy)}
.item .note{color:var(--muted);font-size:.9375rem;border-left:3px solid var(--rule);padding-left:.9rem}
.block{margin-bottom:1.1rem}
.block h4{font-family:var(--sans);font-size:.9375rem;font-weight:600;margin-bottom:.2rem}
.block p{margin:0}
.side{font-size:.9375rem}
.side dl{margin:0}
.side dt{color:var(--muted);font-size:.875rem}
.side dd{margin:0 0 .9rem}
.status{display:inline-flex;align-items:center;gap:.5rem}
.status::before{content:"";width:9px;height:9px;background:var(--navy);flex:none}
.status.open::before{background:transparent;box-shadow:inset 0 0 0 2px var(--navy)}
.verify{display:inline-block;margin-top:.15rem}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.25rem}
.shots figure{margin:0}
.shots img{border:1px solid var(--rule)}
.shots figcaption{font-size:.875rem;color:var(--muted);margin-top:.4rem}
@media (min-width:820px){
  .item{grid-template-columns:minmax(0,1fr) 240px}
  .shots{grid-column:1 / -1}
}

/* Über mich, Kontakt */
.contact-mail{font-family:var(--serif);font-size:clamp(1.3rem,3.5vw,1.75rem);font-weight:600;word-break:break-word}
.contact-list{list-style:none;margin-top:1rem;display:grid;gap:.35rem}

.site-footer{border-top:1px solid var(--rule);padding-block:1.5rem 2.5rem;color:var(--muted);font-size:.9375rem}
.site-footer p{margin:0;max-width:none}

/* Über mich mit Pfad */
.about{background-color:var(--bg);background-image:radial-gradient(#C9D2DD 1px,transparent 1.2px);background-size:24px 24px}
.about-grid{display:grid;gap:2.5rem}
.about-text p{font-size:1.125rem}
.about-text p+p{color:var(--muted);font-size:1rem}
@media (min-width:900px){
  .about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem;align-items:start}
  .about-text{position:sticky;top:2rem}
}

.path{position:relative;padding:2rem 0 2rem 2.75rem}
.path-end{position:absolute;left:0;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.path-top{top:0}
.path-bottom{bottom:0}
.rail{position:absolute;left:10px;top:1.75rem;bottom:1.75rem;width:2px;background:var(--rule)}
.rail-fill{position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:top;transition:transform .12s linear}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.step{position:relative}
.step .dot{position:absolute;left:calc(-2.75rem + 4px);top:1.3rem;width:14px;height:14px;background:var(--bg);border:2px solid var(--rule);transition:background .3s ease,border-color .3s ease}
.step .card{position:relative;background:var(--bg);border:1px solid var(--rule);padding:1rem 1.25rem 1.1rem;transition:border-color .3s ease,box-shadow .3s ease}
.step .card::before{content:"";position:absolute;left:calc(-2.75rem + 18px);width:calc(2.75rem - 19px);top:1.75rem;height:2px;background:var(--rule);transition:background .3s ease}
.step.on .dot{background:var(--navy);border-color:var(--navy)}
.step.on .card{border-color:#8FA2BC;box-shadow:inset 3px 0 0 var(--navy)}
.step.on .card::before{background:var(--navy)}
.step.open .card{border-style:dashed;background:var(--tint)}
.step.open .dot{border-style:dashed}
.step.open.on .dot{background:var(--bg)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin-bottom:.35rem;font-size:.8125rem}
.card-head .when{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.card-head .tag{color:var(--muted);border:1px solid var(--rule);padding:.05rem .45rem;border-radius:2px;background:var(--bg)}
.step h3{font-size:1.2rem;margin-bottom:.25rem}
.step p{margin:0;color:var(--ink);font-size:.9688rem}

/* Sanftes Einblenden beim Scrollen (nur wenn Bewegung erlaubt) */
.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.anim .reveal.in{opacity:1;transform:none}
.anim .step.reveal{transform:translateX(14px)}
.anim .step.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.step .dot,.step .card,.step .card::before,.rail-fill{transition:none!important;opacity:1!important;transform:none!important}
}

/* Bearbeitungsmodus: nur mit ?edit in der Adresse sichtbar */
.todo{background:var(--todo);outline:1px dashed #8A6A00;outline-offset:2px;color:var(--ink)}
.edit-banner{position:sticky;top:0;z-index:15;background:#8A6A00;color:#fff;padding:.5rem var(--gutter);font-size:.9375rem;text-align:center}

@media print{
  .site-header .nav,.lang,.skip,.edit-banner,.actions{display:none!important}
  section{background:none!important;break-inside:avoid-page}
  a{color:var(--ink)}
}