/* Layout: Schwarz und Stein im Wechsel, eine gelbe Fläche als Ausrufezeichen. Versalien mit Luft, Haarlinien statt Karten, eckige Kanten. */
@font-face{font-family:"Jost";src:url("fonts/jost-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  --black:#0A0A0A;
  --stone:#DAD8D2;
  --white:#FFFFFF;
  --taupe:#5E5348;
  --sun:#FDBD59;
  --mute:#B4AFA7;        /* Fließtext auf Schwarz */
  --mute-dark:#3F3A35;   /* Fließtext auf Stein */
  --hair:rgba(255,255,255,.22);
  --hair-dark:rgba(10,10,10,.22);

  --sans:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --w-light:300;--w-normal:400;--w-medium:500;--w-bold:700;

  --wrap:74rem;
  --gutter:clamp(1.1rem,4vw,2.75rem);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --z-head:10;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);font-weight:var(--w-normal);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
h1,h2,h3{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-weight:var(--w-bold);text-transform:uppercase;font-size:clamp(1.85rem,5vw,4rem);line-height:1.16;letter-spacing:.07em}
h2{font-weight:var(--w-medium);text-transform:uppercase;font-size:clamp(1.45rem,3.1vw,2.3rem);line-height:1.22;letter-spacing:.05em}
h3{font-weight:var(--w-medium);font-size:1.4rem;line-height:1.25;letter-spacing:.005em}
p{margin:0;text-wrap:pretty}
em{font-style:normal;color:var(--sun)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:1.15rem}
.stack > *{min-width:0}
.prose{max-width:38rem}
.lead{font-weight:var(--w-light);font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.55;color:var(--mute);max-width:38rem}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.2;color:var(--mute)}

/* Kopf */
.site-head{background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair);position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--z-head)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;flex-wrap:wrap;padding-block:.7rem}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none;background:var(--stone);padding:.15rem .8rem}
.brand img{height:3.1rem;width:auto}
.brand .wordmark{font-weight:var(--w-bold);font-size:1.4rem;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:.1rem .35rem;flex-wrap:wrap;font-size:.82rem;font-weight:var(--w-normal);letter-spacing:.14em;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:none;padding:0 .75rem;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:9px;height:1px;background:var(--sun);transform:scaleX(0);transform-origin:left}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.btn{min-height:42px;margin-left:.6rem;padding:0 1.1rem;font-size:.78rem;background:transparent;box-shadow:inset 0 0 0 1px var(--white)}

/* Knöpfe: eckig, Versalien */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--taupe);color:var(--white);font-size:.84rem;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:0 1.75rem}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.btn:active{transform:scale(.97)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.9rem;align-items:center}

/* Abschnitte: Standard ist Stein, Hero und .dark sind Schwarz, .deep ist Gelb */
main > section{padding-block:clamp(3.5rem,8vw,6.5rem);background:var(--stone);color:var(--black)}
main > section + section:not(.dark):not(.deep):not(.hero){box-shadow:inset 0 1px 0 var(--hair-dark)}
main > section .lead,main > section .eyebrow{color:var(--mute-dark)}
main > section em{color:inherit;box-shadow:inset 0 -.38em 0 var(--sun)}
main > section .btn{background:var(--black)}
main > section .btn.ghost{background:transparent;color:var(--black)}

main > section.hero,main > section.dark{background:var(--black);color:var(--white)}
main > section.hero .lead,main > section.dark .lead,main > section.hero .eyebrow,main > section.dark .eyebrow{color:var(--mute)}
main > section.hero em,main > section.dark em{color:var(--sun);box-shadow:none}
main > section.hero .btn,main > section.dark .btn{background:var(--taupe);color:var(--white)}
main > section.hero .btn.ghost,main > section.dark .btn.ghost{background:transparent;color:var(--white)}

main > section.hero{padding-block:clamp(4rem,10vw,8rem) clamp(3.5rem,8vw,6.5rem)}
.hero .stack{gap:1.6rem;position:relative}
.hero .stack::before{content:"";width:4.5rem;height:3px;background:var(--sun)}
.hero h1{max-width:20ch}
.hero-grid{display:block}

main > section.deep{background:var(--sun);color:var(--black)}
main > section.deep .lead,main > section.deep .eyebrow{color:var(--black)}
main > section.deep em{box-shadow:inset 0 -.38em 0 rgba(255,255,255,.75)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(2rem,6vw,5rem);align-items:start}
.split > *{min-width:0}
.prose p{color:var(--mute-dark)}

/* Posten mit Haarlinie */
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--hair-dark)}
.menu li{padding:1.3rem 0;border-bottom:1px solid var(--hair-dark);display:flex;flex-direction:column;gap:.35rem}
.dark .menu,.dark .menu li{border-color:var(--hair)}
.menu .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.menu .name{font-weight:var(--w-medium);font-size:1.3rem;line-height:1.25}
.menu .dots{display:none}
.menu .tag{flex:none;font-size:.7rem;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;padding:.25rem .6rem;box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}
.menu p{color:var(--mute-dark);max-width:38rem}
.dark .menu p{color:var(--mute)}
.deep .menu p{color:var(--black)}
.menu a.name{text-decoration:none;display:inline-flex;align-items:baseline;gap:.5em;position:relative}
.menu a.name::before{content:"";position:absolute;inset:-12px -8px}
.menu a.name::after,.arrow::after{content:"⟶";font-weight:var(--w-light)}

/* Kacheln mit Haarlinien-Raster */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3.25rem;border:1px solid var(--hair-dark);border-right:0}
.trio > div{display:flex;flex-direction:column;gap:.9rem;min-width:0;padding:2rem 1.75rem 1.75rem;border-right:1px solid var(--hair-dark)}
.trio h3{font-size:1.55rem}
.trio p{color:var(--mute-dark);flex:1}
.arrow{align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;min-height:44px;font-size:.8rem;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}

/* Ablauf (echte Reihenfolge) */
.steps{list-style:none;counter-reset:s;margin:2.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));border:1px solid var(--hair-dark);border-right:0}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.6rem;min-width:0;padding:1.75rem;border-right:1px solid var(--hair-dark)}
.steps li::before{content:"0" counter(s);font-weight:var(--w-light);font-size:3rem;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.steps p{color:var(--mute-dark)}

.note{font-size:.98rem;padding:.9rem 1.1rem;max-width:38rem;box-shadow:inset 3px 0 0 var(--black);background:rgba(255,255,255,.4)}

/* Fragen und Antworten */
.faq .lead{max-width:46rem}
.faq-list{display:flex;flex-direction:column;margin-top:2.25rem;max-width:54rem;border-top:1px solid var(--hair-dark)}
.faq-list details{border-bottom:1px solid var(--hair-dark)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;min-height:64px;padding:1rem 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary h3{font-size:1.2rem}
.faq-list summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;background-image:linear-gradient(var(--black),var(--black)),linear-gradient(var(--black),var(--black));background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 2.5rem 1.4rem 0;max-width:46rem;color:var(--mute-dark)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.25rem;border:1px solid var(--hair-dark);border-right:0}
.contact-grid > div{display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.75rem;border-right:1px solid var(--hair-dark)}
.contact-grid p{color:var(--mute-dark)}
.big-link{font-weight:var(--w-medium);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.35;overflow-wrap:anywhere}
address{font-style:normal}

/* Fuß */
.site-foot{background:var(--black);color:var(--mute);padding-block:3.25rem;font-size:.95rem;box-shadow:inset 0 1px 0 var(--hair)}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem}
.site-foot .cols > div{display:flex;flex-direction:column;gap:.1rem;min-width:0;align-items:flex-start}
.site-foot a{color:var(--white);display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.site-foot .eyebrow{color:var(--sun);margin-bottom:.5rem}
.site-foot .fine{margin-top:2.75rem;padding-top:1.25rem;box-shadow:inset 0 1px 0 var(--hair);font-size:.85rem}

.legal h2{font-size:1.25rem;margin-top:1.5rem}
main > section.hero.legal-wrap{background:var(--black)}

/* Bewegung: kurz, ease-out, nur transform/opacity. Aus bei reduzierter Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease}
  .nav a:not(.btn)::after{transition:transform 220ms var(--ease-out)}
  .menu a.name::after,.arrow::after{transition:translate 220ms var(--ease-out)}
  .faq-list summary::after{transition:transform 220ms var(--ease-out)}
  .faq-list details[open] p{animation:reveal 240ms var(--ease-out)}
  .intro .hero .stack > *{animation:enter 700ms var(--ease-out) backwards}
  .intro .hero .stack > :nth-child(2){animation-delay:80ms}
  .intro .hero .stack > :nth-child(3){animation-delay:160ms}
  .intro .hero .stack > :nth-child(4){animation-delay:240ms}
  .intro .hero .stack::before{animation:rule 700ms var(--ease-out) backwards;transform-origin:left}
}
@keyframes enter{from{opacity:0;translate:0 14px;filter:blur(6px)}}
@keyframes rule{from{transform:scaleX(0)}}
@keyframes reveal{from{opacity:0;translate:0 -4px}}

/* Hover nur für Geräte mit Maus */
@media (hover:hover) and (pointer:fine){
  .nav a:not(.btn):hover::after{transform:scaleX(1)}
  .nav a.btn:hover{background:var(--white);color:var(--black)}
  main > section .btn:hover{background:var(--taupe);color:var(--white)}
  main > section.hero .btn:hover,main > section.dark .btn:hover{background:var(--sun);color:var(--black)}
  main > section .btn.ghost:hover{background:var(--black);color:var(--white)}
  main > section.hero .btn.ghost:hover,main > section.dark .btn.ghost:hover{background:var(--white);color:var(--black)}
  main > section.deep .btn:hover{background:var(--white);color:var(--black)}
  .menu a.name:hover::after,.arrow:hover::after{translate:6px 0}
  .site-foot a:hover{color:var(--sun)}
  p a:hover,address a:hover,.big-link:hover{text-decoration-thickness:2px}
}

@media (max-width:56rem){
  .split{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr);border-right:1px solid var(--hair-dark);border-bottom:0}
  .trio > div{border-right:0;border-bottom:1px solid var(--hair-dark)}
  .site-head{position:static}
  .brand img{height:2.7rem}
  .nav{font-size:.76rem;letter-spacing:.1em}
  .nav a{padding:0 .55rem}
  .nav a:not(.btn)::after{left:.55rem;right:.55rem}
  .nav a.btn{margin-left:.3rem}
  .menu .row{flex-wrap:wrap}
}

/* Einstieg mit Portrait: links abgedunkelt für den Text, rechts bleibt das Gesicht frei */
main > section.hero.has-photo{display:flex;align-items:center;min-height:clamp(34rem,52vw,48rem);background:linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.88) 34%,rgba(10,10,10,.45) 58%,rgba(10,10,10,0) 82%),url("img/portrait.jpg") right 22%/cover no-repeat var(--black)}
main > section.hero.has-photo > .wrap{width:100%}
main > section.hero.has-photo h1{max-width:15ch}
main > section.hero.has-photo .lead{color:#E4E0DA;max-width:30rem}
main > section.hero.has-photo .eyebrow{color:#E4E0DA}
@media (max-width:56rem){
  main > section.hero.has-photo{display:block;min-height:0;padding-top:min(78vw,26rem);background:linear-gradient(180deg,rgba(10,10,10,0) 0,rgba(10,10,10,0) min(52vw,17rem),var(--black) min(78vw,26rem)),url("img/portrait-klein.jpg") 72% top/auto min(84vw,28rem) no-repeat var(--black)}
}