/* STABILER KERN · gemeinsame Gestaltung (Startseite, Über mich, Mitgliedschaft) · 08.10.2026
   Oben Nacht (Kopf voll), nach unten Tag (runtergekommen).
   Schriften selbst gehostet: Inter + Space Grotesk (fonts/fonts.css), Newsreader (fonts/newsreader-*.woff2). */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/newsreader-latin.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 600;font-display:swap;src:url('fonts/newsreader-latin-italic.woff2') format('woff2')}
:root{
  --night:#0D1114; --night-2:#151A1E; --night-3:#1D2328;
  --moon:#ECE8E0; --moon-dim:#A7A399; --moon-faint:#6F6C66;
  --gold:#C4A265; --gold-b:#D4B87A; --gold-d:#8C6B32;
  --sand:#F3EEE6; --paper:#FBF9F5; --ink:#1A1D20; --ink-dim:#5A5750; --ink-faint:#8E8A81;
  --line-n:rgba(236,232,224,.12); --line-d:rgba(26,29,32,.12);
  --serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--moon);background:var(--night);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.night{background:var(--night);color:var(--moon)}
.day{background:var(--sand);color:var(--ink)}
.paper{background:var(--paper);color:var(--ink)}
.label{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.label::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}
.night .label{color:var(--gold-b)} .day .label,.paper .label{color:var(--gold-d)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08;margin-top:18px}
h2 em,h1 em{font-style:italic}
.night h2 em,.night h1 em{color:var(--gold-b)}
.day h2 em,.paper h2 em{color:var(--gold-d)}
.sec{padding:130px 0}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;background:var(--gold);color:#14110B;font-weight:600;font-size:.98rem;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:background .25s,transform .25s}
.btn:hover{background:var(--gold-b);transform:translateY(-1px)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}

/* ---------- Navigation (färbt sich mit dem Abschnitt) ---------- */
header{position:sticky;top:0;z-index:40;transition:background .4s,border-color .4s,color .4s;background:rgba(13,17,20,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-n)}
body.nav-day header{background:rgba(251,249,245,.88);color:var(--ink);border-bottom-color:var(--line-d)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .wm{font-family:'Space Grotesk',var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase}
.brand svg .outer{fill:var(--moon);transition:fill .4s} body.nav-day .brand svg .outer{fill:var(--ink)}
.brand svg .cut{stroke:var(--night);transition:stroke .4s} body.nav-day .brand svg .cut{stroke:var(--paper)}
.navlinks{display:flex;align-items:center;gap:30px;font-size:.9rem}
.navlinks a{text-decoration:none;opacity:.72;transition:opacity .2s}
.navlinks a:hover{opacity:1}
.navlinks .nav-cta{opacity:1;padding:10px 18px;border:1px solid var(--gold);color:var(--gold-b)}
body.nav-day .navlinks .nav-cta{color:var(--gold-d)}
.burger{display:none;background:none;border:1px solid currentColor;color:inherit;width:42px;height:42px;cursor:pointer;opacity:.8}

/* ---------- Video mit eigenem Vorschaubild ---------- */
.vid{position:relative;width:100%;aspect-ratio:9/14;background:#111;overflow:hidden;cursor:pointer}
.vid img,.vid video{width:100%;height:100%;object-fit:cover}
.vid img{transition:transform .8s ease}.vid:hover img{transform:scale(1.03)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid rgba(212,184,122,.85);background:rgba(13,17,20,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;transition:background .25s}
.play svg{width:26px;height:26px;fill:var(--gold-b);margin-left:4px}
.vid:hover .play{background:rgba(196,162,101,.9)}.vid:hover .play svg{fill:#14110B}

/* ---------- Footer ---------- */
footer{background:var(--night);color:var(--moon-faint);border-top:1px solid var(--line-n);font-size:.84rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;padding-bottom:34px}
footer a{text-decoration:none}
footer a:hover{color:var(--moon)}

/* ---------- Formular-Overlay ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,10,12,.72);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:var(--paper);color:var(--ink);width:100%;max-width:520px;padding:44px 40px;max-height:92vh;overflow:auto}
.modal-card h2{font-size:2.2rem;margin-top:12px}
.modal-sub{color:var(--ink-dim);margin-top:8px}
.modal-x{position:absolute;top:14px;right:18px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--ink-dim)}
#contactForm{display:grid;gap:14px;margin-top:26px}
#contactForm input[type=text],#contactForm input[type=email],#contactForm textarea{width:100%;border:0;border-bottom:1px solid rgba(26,29,32,.25);background:transparent;font:inherit;padding:12px 2px;color:var(--ink)}
#contactForm input:focus,#contactForm textarea:focus{outline:none;border-bottom-color:var(--gold-d)}
.consent{display:flex;gap:10px;font-size:.84rem;color:var(--ink-dim);align-items:flex-start;margin-top:6px}
.consent input{margin-top:4px}
.form-msg{font-size:.9rem;color:#2E7D4F}.form-msg.err{color:#B3402E}
#contactForm .btn{justify-self:start;margin-top:8px}

/* ---------- Einblenden ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .navlinks{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 28px 22px;background:inherit}
  header{background:rgba(13,17,20,.97)}
  body.nav-day header{background:rgba(251,249,245,.98)}
  body.nav-open .navlinks{display:flex}
  .navlinks a{padding:14px 0;border-bottom:1px solid var(--line-n)}
  body.nav-day .navlinks a{border-bottom-color:var(--line-d)}
  .navlinks .nav-cta{margin-top:14px;text-align:center}
  .burger{display:grid;place-items:center}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .sec{padding:90px 0}
  .modal-card{padding:36px 24px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}