@font-face{font-family:Archivo;src:url(/schriften/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{--grund:#f7f7f5;--tinte:#111;--fliess:#363632;--leise:#8a8a86;--linie:#e2e2de;--markiert:#fff2b8;--erfolg:#e9efe6;--rand:clamp(16px,3vw,44px);--luecke:8px;color-scheme:light dark}
/* Dunkel, wenn der Besucher es im System bzw. Browser so eingestellt hat */
@media (prefers-color-scheme:dark){
 :root{--grund:#0e0e0d;--tinte:#ecebe7;--fliess:#c4c3be;--leise:#7d7c77;--linie:#262624;--markiert:#5a4b12;--erfolg:#1f2b1d}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--grund);color:var(--tinte);font:400 14px/1.6 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit}
/* Download-Schutz: Bilder nicht markieren, ziehen oder per langem Drücken speichern */
.buehne img,.wand img,.serien img,.ueber img,.kontakt img,.ansicht img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.wand img,.serien img{pointer-events:none}
img{display:block;max-width:100%}
.leise{color:var(--leise)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px var(--rand);background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.marke{display:flex;align-items:center;font-weight:600;white-space:nowrap}
.logo{display:block;width:34px;height:19px;margin-right:12px;background:currentColor;-webkit-mask:url(/logo.png) center/contain no-repeat;mask:url(/logo.png) center/contain no-repeat}
.marke span{color:var(--leise);font-weight:400;margin-left:8px}
.menue{display:flex;gap:clamp(14px,2vw,28px)}
.menue a{color:var(--leise);transition:color .25s}
.menue a:hover,.menue a[aria-current]{color:var(--tinte)}
.menue .trenner{width:1px;background:var(--linie)}
.menue .sprache{font-size:12px;letter-spacing:.06em;border:1px solid currentColor;padding:0 6px;border-radius:3px;align-self:center;line-height:18px}
.menue-knopf{display:none;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
/* Kopf über dem Startbild */
.start .kopf{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;transition:background .4s,color .4s}
.start .kopf .marke span,.start .kopf .menue a{color:rgba(255,255,255,.72)}
.start .kopf .menue a:hover{color:#fff}
.start .kopf .menue .trenner{background:rgba(255,255,255,.3)}
.start .kopf.fest{background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--tinte)}
.start .kopf.fest .marke span,.start .kopf.fest .menue a{color:var(--leise)}
.start .kopf.fest .menue .trenner{background:var(--linie)}

/* Startbild */
.buehne{position:relative;height:74vh;height:74svh;min-height:420px;overflow:hidden;background:#000}
.buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.8s ease,transform 8s linear}
.buehne img.an{opacity:1;transform:scale(1)}
.buehne:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 22%,transparent 70%,rgba(0,0,0,.45));pointer-events:none}
.buehne .zeile{position:absolute;left:var(--rand);right:var(--rand);bottom:26px;z-index:2;display:flex;justify-content:space-between;align-items:center;color:#fff}
.buehne .zeile a span{color:rgba(255,255,255,.7);margin-left:12px}
.punkte{display:flex;gap:6px}
.punkte button{width:28px;height:14px;border:0;background:none;cursor:pointer;position:relative}
.punkte button:before,.punkte button:after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.35)}
.punkte button:after{background:#fff;transform:scaleX(0);transform-origin:left}
.punkte button.an:after{animation:lauf 6s linear forwards}
@keyframes lauf{to{transform:scaleX(1)}}

/* Kurztext */
.kurz{display:grid;grid-template-columns:1fr minmax(0,560px);gap:24px;padding:36px var(--rand) 32px}
.kurz h1{font:400 22px/1.25 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.01em}
.kurz p{font-size:15px;line-height:1.65;color:var(--fliess)}

/* Bildwand (Blocksatz-Galerie) */
.wand{display:flex;flex-wrap:wrap;gap:var(--luecke);padding:0 var(--rand)}
.wand:after{content:"";flex-grow:999999}
.wand a{--h:210px;position:relative;flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*var(--h));overflow:hidden;background:var(--linie);cursor:zoom-in}
.wand a i{display:block;padding-bottom:calc(100% / var(--r))}
.wand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .6s;opacity:0}
.wand img.da{opacity:1}
.wand a:hover img{transform:scale(1.025)}
.wand a span{position:absolute;left:12px;bottom:10px;color:#fff;font-size:12px;opacity:0;transform:translateY(4px);transition:.35s;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.wand a:hover span{opacity:1;transform:none}
.wand.gross a{--h:240px}

/* Serien-Übersicht */
.abschnitt{display:flex;justify-content:space-between;align-items:baseline;padding:64px var(--rand) 16px}
.abschnitt h2{font-size:14px;font-weight:500}
.serien{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--luecke);padding:0 var(--rand)}
.serien a .bild{aspect-ratio:3/4;overflow:hidden;background:var(--linie)}
.serien a img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.serien a:hover img{transform:scale(1.03)}
.serien a b{display:block;font-weight:500;margin-top:10px}
.serien a span{color:var(--leise);font-size:13px}

/* Instagram (nur Link, lädt nichts von Meta) */
.insta{padding:64px var(--rand) 0}
.insta-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.insta-kopf h2{font-size:14px;font-weight:500}
.insta-kopf .knopf{text-decoration:none}
.insta-raster{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luecke)}
.insta-raster a{aspect-ratio:1;overflow:hidden;background:var(--linie)}
.insta-raster img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .3s;pointer-events:none}
.insta-raster a:hover img{transform:scale(1.04);opacity:.85}

/* Serienseite */
.serienkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:48px var(--rand) 24px}
.serienkopf h1{font:400 clamp(30px,4vw,52px)/1 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.015em}
.serienkopf p{max-width:420px;color:var(--leise);text-align:right}
.weiter{display:flex;justify-content:space-between;padding:80px var(--rand) 0}
.weiter a{font-size:clamp(22px,3vw,36px);font-stretch:88%;letter-spacing:-.01em}
.weiter a span{display:block;font-size:13px;color:var(--leise);letter-spacing:0}
.weiter a:last-child{text-align:right}

/* Über mich */
.ueber{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:40px var(--rand) 0;align-items:start}
.ueber .bilder{display:grid;grid-template-columns:1fr 1fr;gap:var(--luecke);position:sticky;top:90px}
.ueber .bilder img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ueber .bilder img:first-child{grid-column:1/-1;aspect-ratio:3/2}
.ueber .text h1{font:400 clamp(30px,4vw,52px)/1 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.015em;margin-bottom:18px}
.ueber .text p{font-size:15px;line-height:1.7;color:var(--fliess);margin-bottom:1em;max-width:62ch}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:40px var(--rand) 0}
.kontakt .bild img{width:100%;height:calc(100vh - 200px);min-height:420px;object-fit:cover}
.kontakt h1{font:400 clamp(30px,4vw,52px)/1 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.015em;margin-bottom:12px}
.kontakt .daten{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;margin:26px 0 34px}
.kontakt .daten dt{color:var(--leise)}
form{display:grid;gap:14px;max-width:460px}
label{display:grid;gap:4px;color:var(--leise);font-size:13px}
input,textarea{font:inherit;color:var(--tinte);background:transparent;border:0;border-bottom:1px solid var(--linie);padding:8px 0;outline:none;transition:border-color .25s}
input:focus,textarea:focus{border-color:var(--tinte)}
textarea{min-height:120px;resize:vertical}
.knopf{justify-self:start;font:inherit;font-weight:500;background:var(--tinte);color:var(--grund);border:0;padding:11px 22px;cursor:pointer}
.hinweis{padding:10px 14px;background:var(--erfolg);margin-bottom:16px}
.falle{position:absolute;left:-9999px}

/* Rechtliches */
.recht{max-width:720px;padding:48px var(--rand) 0}
.recht h1{font:400 clamp(30px,4vw,52px)/1 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.015em;margin-bottom:24px}
.recht h2{font-size:15px;font-weight:600;margin:28px 0 6px}
.recht p,.recht li{color:var(--fliess);margin-bottom:.6em}
.recht ul{padding-left:18px}
.offen{background:var(--markiert);padding:0 4px}

/* Fuß */
.fuss{display:grid;grid-template-columns:1fr auto auto;gap:clamp(20px,4vw,60px);align-items:end;margin:120px var(--rand) 0;padding:28px 0 30px;border-top:1px solid var(--linie)}
.fuss .satz{font:400 20px/1.25 Archivo,system-ui,sans-serif;font-stretch:88%;letter-spacing:-.01em}
.fuss div span{display:block;color:var(--leise)}
.fuss nav{display:flex;gap:18px;color:var(--leise)}
.fuss nav a:hover{color:var(--tinte)}

/* Großansicht */
.ansicht{position:fixed;inset:0;z-index:50;background:#0b0b0b;color:#eee;display:grid;grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .35s}
.ansicht.offen{opacity:1;pointer-events:auto}
.ansicht .oben,.ansicht .unten{display:flex;justify-content:space-between;align-items:center;padding:18px var(--rand);font-size:13px;color:#999}
.ansicht .oben b{color:#eee;font-weight:500}
.ansicht button{background:none;border:0;color:#ddd;font:inherit;cursor:pointer;padding:6px 4px}
.ansicht button:hover{color:#fff}
.ansicht .mitte{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 var(--rand)}
.ansicht .mitte img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .3s}
.ansicht .mitte img.laedt{opacity:.25}
.ansicht .zurueck,.ansicht .vor{position:absolute;top:0;bottom:0;width:30%;cursor:w-resize}
.ansicht .zurueck{left:0}.ansicht .vor{right:0;cursor:e-resize}

/* Handy */
@media (max-width:860px){
 .menue-knopf{display:block}
 .menue{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;padding:0 28px;gap:10px;background:var(--grund);font-size:28px;font-stretch:88%;opacity:0;pointer-events:none;transition:opacity .3s}
 .menue a,.start .kopf .menue a,.start .kopf.fest .menue a{color:var(--tinte)}
 .menue .trenner{width:40px;height:1px;margin:10px 0}
 .menue .sprache{align-self:flex-start;font-size:16px;line-height:28px;padding:0 10px;margin-top:14px}
 .menue-offen .menue{opacity:1;pointer-events:auto}
 /* Unschärfe-Effekt beim offenen Menü abschalten, sonst wird das Menü in die Kopfzeile gesperrt */
 .menue-offen .kopf,.start.menue-offen .kopf.fest{color:var(--tinte)!important;background:var(--grund);backdrop-filter:none;-webkit-backdrop-filter:none}
 .menue-offen{overflow:hidden}
 .kurz{grid-template-columns:1fr;padding-top:48px}
 :root{--luecke:4px}
 .wand a{--h:84px}.wand.gross a{--h:92px}
 .serien{grid-template-columns:1fr 1fr}
 .insta-raster{grid-template-columns:repeat(3,1fr)}
 .insta-kopf .knopf{padding:9px 14px}
 .serienkopf{flex-direction:column;align-items:flex-start}.serienkopf p{text-align:left}
 .ueber,.kontakt{grid-template-columns:1fr}
 .ueber .bilder{position:static}
 .kontakt .bild img{height:auto;min-height:0;aspect-ratio:4/3}
 .fuss{grid-template-columns:1fr}
 .ansicht .zurueck,.ansicht .vor{width:50%}
}