/* julianpeter.com · Runde v15 · gemeinsame Basis für die Entwürfe A–E
   Creme + Dunkelrot (wie v6-flux-weiss). Keine Kästen/Karten: Gliederung nur über Schrift, Haarlinien, Weißraum.
   Nur relative Einheiten (rem/em/%/vw/vh/fr), Breakpoints in em. Schriften lokal (SIL OFL 1.1). */

@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-var.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-weight:100 900;font-display:swap;src:url(fonts/inter-tight-latin-var.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-latin-normal-400.woff2) format('woff2')}

:root{
  color-scheme:light;
  --cream:#F8F3EA; --cream2:#F1EADF; --paper:#FCFAF5;
  --fg:#1D1814; --tx:#3E352D; --mute:#6F6256;
  --line:rgb(61 46 32 / .14); --line2:rgb(61 46 32 / .28);
  --red:#B42A31; --redt:#9E242B; --redd:#861D23;
  --max:72rem; --pad:clamp(1.25rem,5vw,3.5rem);
  --ease:cubic-bezier(.2,.75,.15,1);
  /* Schrift-Tokens: fd = Überschriften, ft = Text, hw/ht/hz = Gewicht/Laufweite/Größenfaktor der Überschriften */
  --ft:'Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fd:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fm:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --hw:600; --ht:-.04em; --hz:1; --hs:normal;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--cream);color:var(--tx);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;overflow-x:hidden;overflow-x:clip;font:400 1.0625rem/1.65 var(--ft)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:inherit;text-wrap:balance;color:var(--fg)}
ol,ul{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:.125rem solid var(--redt);outline-offset:.25rem;border-radius:.3rem}
::selection{background:rgb(180 42 49 / .16);color:var(--fg)}

.disp{font-family:var(--fd);font-weight:var(--hw);letter-spacing:var(--ht);font-style:var(--hs)}
.wrap{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}

.skip{position:absolute;left:-100vw;top:.75rem;z-index:200;background:var(--fg);color:var(--cream);padding:.6rem 1rem;border-radius:62rem;font-size:.875rem;text-decoration:none}
.skip:focus{left:.75rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3rem;padding:.8rem 1.4rem;border-radius:62rem;
  border:.0625rem solid transparent;font:500 1rem/1.1 var(--ft);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .35s var(--ease)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--redd)}
.btn--line{color:var(--fg);border-color:var(--line2);background:transparent}
.btn--line:hover{border-color:var(--fg);background:rgb(29 24 20 / .035)}
.btn--sm{min-height:2.25rem;padding:.45rem 1rem;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* externe Links mit Pfeil */
.ext{display:inline-flex;align-items:center;gap:.3em;color:var(--redt);text-decoration:none;font-weight:500}
.ext svg{width:.85em;height:.85em;transition:transform .3s var(--ease)}
.ext:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.06em}
.ext:hover svg{transform:translate(.12em,-.12em)}

/* Kontaktzeile */
.cline{display:flex;flex-wrap:wrap;gap:.25rem 1rem;color:var(--mute);font-size:.9375rem}
.cline a{text-decoration:none;color:var(--tx)}
.cline a:hover{color:var(--redt)}

/* Fuß */
.foot{padding:2rem 0 2.5rem;font-size:.8125rem;color:var(--mute)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;border-top:.0625rem solid var(--line);padding-top:1.25rem}
.foot nav{display:flex;gap:1.5rem}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--fg)}

/* Einblenden (nur mit JS, nie bei reduzierter Bewegung) */
.mo .rv{opacity:0;transform:translateY(1.25rem);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.mo .rv.in{opacity:1;transform:none}

/* Rechtstexte */
.legal{padding:clamp(7rem,12vw,9rem) 0 clamp(4rem,8vw,6rem)}
.legal .wrap{max-width:46rem}
.legal h1{font-size:calc(clamp(2.5rem,6vw,3.75rem)*var(--hz));line-height:1.05;margin-bottom:.75rem}
.legal .intro{color:var(--mute);font-size:1.1875rem;margin-bottom:2.5rem}
.legal h2{font-size:1.3125rem;letter-spacing:-.02em;margin:2.25rem 0 .5rem;font-weight:600}
.legal p,.legal ul{margin:0 0 .875rem}
.legal ul{padding-left:1.2em;list-style:disc}
.legal li{margin-bottom:.375rem}
.legal address{font-style:normal}
.legal a{color:var(--redt)}
.legal .stand{margin-top:2.5rem;color:var(--mute);font-size:.9375rem}
.lnav{position:absolute;top:0;left:0;right:0;padding:1.4rem 0}
.lnav .wrap{display:flex;justify-content:space-between;align-items:center}
.lnav a{text-decoration:none;color:var(--fg)}
.lnav .brand{font-family:var(--fd);font-weight:var(--hw);letter-spacing:-.02em;font-size:1.125rem}


/* Navigation (Standard für alle Entwürfe) */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:.0625rem solid transparent;transition:background-color .4s,border-color .4s}
.scrolled .nav{background:rgb(248 243 234 / .8);-webkit-backdrop-filter:saturate(150%) blur(1rem);backdrop-filter:saturate(150%) blur(1rem);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.25rem}
.brand{font-size:1.1875rem;text-decoration:none;color:var(--fg)}
.nav__links{display:flex;gap:2.1rem}
.nav__links a{position:relative;font-size:.9375rem;text-decoration:none;color:var(--tx)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:.0625rem;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
@media (max-width:52em){.nav__links{display:none}}
.nav__cta{flex:none}

/* Typografie-Grundlagen der Abschnitte */
.sec{padding:clamp(5rem,11vw,9rem) 0}
.kick{display:flex;align-items:center;gap:.7rem;font:500 .8125rem/1 var(--fm);text-transform:uppercase;letter-spacing:.09em;color:var(--redt);margin-bottom:1.1rem}
.h2{font-size:calc(clamp(2.5rem,6vw,4.75rem)*var(--hz));line-height:1;margin-bottom:clamp(2rem,4vw,3rem)}
.prose p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.68;margin-bottom:1em}
.prose p.lead{font-family:var(--fd);font-weight:var(--hw);letter-spacing:calc(var(--ht)*.6);font-size:calc(clamp(1.75rem,3.4vw,2.625rem)*var(--hz));line-height:1.12;color:var(--fg);margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.glead{font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.5;color:var(--fg);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.ktxt{font-size:clamp(1.125rem,1.9vw,1.4375rem);line-height:1.5;color:var(--fg);margin-bottom:2rem}
.mrow__txt{max-width:36rem;color:var(--tx)}
.mrow__txt--sub{font-size:.9375rem;color:var(--mute)}