@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
img{max-width:100%}
[hidden]{display:none!important}
/* Konzept: Edel und ruhig. Tiefes Anthrazit, Elfenbein, Champagner-Gold als einziger Akzent.
   Serifenschrift für Überschriften, schmale Haarlinien, viel Luft. Fotos stehen im Passepartout. */
:root{
  --bg:#0c0c0b;
  --bg2:#12120f;
  --card:#131311;
  --line:rgba(201,169,106,.26);
  --line2:rgba(239,233,220,.12);
  --fg:#f1ebde;
  --muted:#a8a293;
  --accent:#c9a96a;
  --accent-ink:#17120a;
  --display:"Cormorant Garamond","Cormorant","Iowan Old Style",Georgia,serif;
  --body:"Jost",system-ui,"Segoe UI",sans-serif;
  --label:"Jost",system-ui,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:300 1.0625rem/1.75 var(--body);-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:4px}
a:hover{text-decoration-color:var(--accent)}
.wrap{max-width:1160px;margin:0 auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Kopf */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#0c0c0b;border-bottom:1px solid var(--line);
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.bar{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px 32px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%;clip-path:circle(46.5%);flex:none;box-shadow:0 0 0 1px var(--accent)}
.brand b{font:500 1.7rem/1 var(--display);letter-spacing:.01em}
.brand span{font:400 .68rem/1 var(--label);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);padding-left:16px;border-left:1px solid var(--line)}
nav{display:flex;gap:2px;overflow-x:auto;max-width:100%;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{font:400 .74rem/1 var(--label);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:14px 14px;border-bottom:1px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s}
nav a:hover{color:var(--fg)}
nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* Ansichten */
.view{display:none;padding-block:64px 96px}
.view.on{display:block}
.eyebrow{display:flex;align-items:center;gap:16px;font:400 .72rem/1 var(--label);letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin:0 0 26px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.04;font-weight:400}
h1{font-weight:300;font-size:clamp(3rem,8.5vw,6.2rem);letter-spacing:-.012em}
h2{font-weight:400;font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.005em}
h3{font-weight:500;font-size:1.6rem;line-height:1.1}
p{margin:0}
.lead{font:400 1.5rem/1.5 var(--display);max-width:44ch}
.copy{display:grid;gap:20px;max-width:60ch;color:#cdc7b9}
.copy .lead{color:var(--fg)}
.btn{display:inline-block;font:400 .74rem/1 var(--label);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--accent-ink);padding:19px 32px;border:1px solid var(--accent);cursor:pointer;border-radius:0;transition:background .25s,color .25s}
.btn:hover{background:transparent;color:var(--accent)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.row{display:flex;gap:14px;flex-wrap:wrap}

/* Fotos im Passepartout */
.shot{position:relative;margin:0;background:linear-gradient(160deg,#171714,#0e0e0c);box-shadow:0 0 0 1px var(--line2);
  overflow:hidden;min-width:0;aspect-ratio:var(--r,3/2)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;max-width:none}
.shot::before,.shot::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--accent);opacity:.85;z-index:2;pointer-events:none}
.shot::before{top:14px;left:14px;border-right:0;border-bottom:0}
.shot::after{bottom:14px;right:14px;border-left:0;border-top:0}
.shot .ph{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;color:var(--muted);font:400 .68rem/1.3 var(--label);letter-spacing:.3em;text-transform:uppercase}
.shot .ph i{display:block;width:40px;height:40px;margin:0 auto;border:1px solid var(--line);border-radius:50%;position:relative}
.shot .ph i::after{content:"";position:absolute;inset:12px;border:1px solid var(--line);border-radius:50%}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 22px 16px;background:linear-gradient(transparent,rgba(8,8,7,.88));font:400 .68rem/1.2 var(--label);letter-spacing:.28em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px;color:var(--fg)}
.shot figcaption span:last-child{color:var(--accent);font-family:var(--display);font-style:italic;font-size:1rem;letter-spacing:.06em;text-transform:none}

/* Willkommen */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px 72px;align-items:center}
.hero > *{min-width:0}
.hero h1 span{display:block;color:var(--accent);font-style:italic}
.hero .copy{margin-block:34px 38px}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stack .shot:first-child{grid-column:1/-1}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:96px;border-top:1px solid var(--line);counter-reset:p}
.pillar{padding:34px 32px 8px 0;display:grid;gap:14px;align-content:start}
.pillar + .pillar{padding-left:32px;border-left:1px solid var(--line)}
.pillar h3::before{counter-increment:p;content:"0" counter(p);display:block;font:400 .72rem/1 var(--label);letter-spacing:.34em;color:var(--accent);margin-bottom:16px}
.pillar p{color:var(--muted)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin:110px 0 32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sec-head .eyebrow{margin:0}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.grid .shot{grid-column:span 2}
.grid .w3{grid-column:span 3}
.grid .w4{grid-column:span 4}
.cta{margin-top:110px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:48px 44px;background:var(--bg2);border:1px solid var(--line);position:relative}
.cta::before{content:"";position:absolute;inset:7px;border:1px solid var(--line2);pointer-events:none}
.cta h2{font-size:clamp(1.9rem,4vw,2.7rem);font-style:italic}

/* Sportberichte */
.page-head{display:grid;gap:22px;margin-bottom:60px;max-width:70ch}
.note{display:inline-block;font:400 .66rem/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:9px 12px;width:fit-content}
.report{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;padding-bottom:72px;border-bottom:1px solid var(--line)}
.report > *{min-width:0}
.meta{font:400 .72rem/1.3 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.score{display:flex;align-items:center;gap:22px;font:400 clamp(1.6rem,4vw,2.3rem)/1.1 var(--display);margin-block:22px 26px;flex-wrap:wrap}
.score small{font:400 1rem/1.2 var(--label);letter-spacing:.14em;color:var(--muted);display:block}
.score em{font-style:italic;color:var(--accent);font-size:1.5em;font-weight:300}
.report .copy{max-width:58ch}
.report blockquote{margin:8px 0 0;padding-left:22px;border-left:1px solid var(--accent);font:italic 400 1.45rem/1.45 var(--display);color:var(--fg)}
.more{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.card{background:transparent;border:1px solid var(--line);padding:28px;display:grid;gap:14px;align-content:start;min-width:0}
.card p{color:var(--muted)}

/* Referenzen und Feedback */
.fbs{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 56px;align-items:start}
.fb{display:grid;gap:26px;min-width:0}
.fb .frame{margin:0;padding:12px;background:var(--bg2);border:1px solid var(--line);position:relative}
.fb .frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line2);pointer-events:none}
.fb .frame img{display:block;width:100%;height:auto;position:relative}
.fb blockquote{margin:0;display:grid;gap:14px}
.fb blockquote p{font:italic 400 clamp(1.5rem,2.6vw,1.9rem)/1.35 var(--display);color:var(--fg);text-wrap:balance}
.fb blockquote p::before{content:"\201E";color:var(--accent)}
.fb blockquote p::after{content:"\201C";color:var(--accent)}
.fb cite{font:400 .72rem/1.5 var(--label);letter-spacing:.26em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.fb cite b{font-weight:500;color:var(--accent);display:block}
.work{margin-top:100px}
.work ul{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.work li{padding:28px 28px 28px 0;display:grid;gap:10px;align-content:start}
.work li + li{padding-left:28px;border-left:1px solid var(--line)}
.work li p{color:var(--muted)}

/* Über mich */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.about > *{min-width:0}
.todo{border:1px dashed var(--line);padding:18px 20px;color:var(--muted);font-size:1rem}
.facts{list-style:none;margin:36px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.facts span:first-child{font:400 .7rem/1.6 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.contact{margin-top:104px;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.contact > *{min-width:0}
form{display:grid;gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:grid;gap:10px;font:400 .7rem/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:300 1.05rem/1.4 var(--body);color:var(--fg);background:var(--bg2);border:1px solid var(--line2);border-radius:0;padding:15px 14px;width:100%;letter-spacing:0;text-transform:none}
textarea{min-height:160px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}
#state{color:var(--accent);min-height:1.5em}

footer.site{border-top:1px solid var(--line);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:32px max(16px,env(safe-area-inset-left,0px)) calc(32px + env(safe-area-inset-bottom,0px))}
footer.site div{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;color:var(--muted);font:400 .68rem/1.6 var(--label);letter-spacing:.24em;text-transform:uppercase}

@media (max-width:900px){
  .hero,.report,.about,.contact,.cta,.fbs{grid-template-columns:1fr}
  .pillars,.work ul{grid-template-columns:1fr}
  .pillar,.pillar + .pillar,.work li,.work li + li{padding:28px 0;border-left:0}
  .pillar + .pillar,.work li + li{border-top:1px solid var(--line)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid .shot,.grid .w3,.grid .w4{grid-column:span 1}
  .grid .w4{grid-column:1/-1}
  .more,.two{grid-template-columns:1fr}
  .cta{padding:34px 24px}
  .fbs{gap:56px}
  .fb{max-width:520px}
}
.grid .shot.full{grid-column:1/-1}
@media (max-width:900px){.grid .shot.m-full{grid-column:1/-1}}
.grid .full{aspect-ratio:21/9}
.story{max-width:880px;display:grid;gap:26px}
.story-head{display:grid;gap:6px;padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:8px}
.story-head h2{font-weight:300;font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-.012em}
.deck{font:italic 400 1.4rem/1.45 var(--display);color:var(--muted);max-width:52ch}
.story h3{margin-top:30px;font-size:clamp(1.55rem,3vw,2rem);color:var(--accent);font-weight:400}
.credit{font:400 .72rem/1.5 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);padding-top:18px;border-top:1px solid var(--line)}
.pull{margin:10px 0 0;padding-left:24px;border-left:1px solid var(--accent);font:italic 400 1.6rem/1.45 var(--display);color:var(--fg)}
.hobby{border:1px solid var(--line);padding:16px 18px;color:var(--muted);font-size:.98rem;line-height:1.6}
.hobby b{color:var(--accent);font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;display:block;margin-bottom:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:.9rem;color:var(--muted)}
.legal{max-width:760px;display:grid;gap:18px;color:#cdc7b9}
.legal h2{font-size:1.7rem;margin-top:22px;color:var(--fg)}
.legal a,.fine a,footer.site a{color:var(--fg)}
@media (max-width:560px){
  .grid .full{aspect-ratio:4/3}
  header{position:sticky}
  .bar{padding-block:8px;gap:2px}
  .brand{gap:12px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:1.3rem}
  nav{width:100%}
  nav a{padding:10px 12px;font-size:.68rem;letter-spacing:.2em}
  .eyebrow{letter-spacing:.26em}
  .view{padding-block:40px 64px}
  .brand span{display:none}
  .grid{grid-template-columns:1fr}
  .grid .w4{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}