/* ═══════════════════════════════════════════════════════════════
   Novelleo Studio — base.css
   Gilt auf JEDER Seite. Schriften, Farben, Kopf, Fuß, Grundtypografie.
   Wird vom Browser einmal geladen und danach gecacht.
   Pfade bewusst absolut (/fonts/…), damit auch Seiten in Unterordnern
   funktionieren, ohne dass hier etwas geändert werden muss.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("/fonts/fraunces-latin-var-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("/fonts/fraunces-latin-var-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("/fonts/manrope-latin-var.woff2") format("woff2");
}

:root{
  --ink:        #0B1310;   /* Nachtgrün-Schwarz, Grundfläche */
  --panel:      #101B16;   /* Karten / Sektionen */
  --panel-2:    #15231D;   /* gehobene Karten */
  --line:       #24352D;   /* Hairlines */
  --gold:       #C9A468;   /* Champagner-Gold, Akzent */
  --gold-soft:  #E4CFA6;   /* helles Gold für Hover/Detail */
  --ivory:      #EEE9DD;   /* Haupttext */
  --muted:      #97A69C;   /* Sekundärtext */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 800px;            /* Unterseiten. home.css überschreibt auf 1120px */
  --radius: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scrollbar-color:#2E4237 var(--ink); scrollbar-width:thin; }
body{
  background:var(--ink); color:var(--ivory);
  font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:var(--ink); }
a{ color:var(--gold-soft); text-decoration:none; }
a:hover{ color:var(--gold); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
em{ font-style:italic; color:var(--gold-soft); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; }

/* Marker-Hervorhebung in Überschriften */
.mark{
  background:linear-gradient(180deg, transparent 58%, rgba(201,164,104,.30) 58%);
  padding:0 .08em; border-radius:2px;
}

.eyebrow{
  display:inline-block; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:600;
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin-right:12px; vertical-align:middle;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  border:1px solid transparent; cursor:pointer; will-change:transform;
}
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-soft); color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); }

/* ---------- Kopfzeile ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,19,16,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; max-width:1120px; margin:0 auto;
  transition:padding .35s ease;
}
header.scrolled .nav{ padding:10px 24px; }
.brand{ font-family:var(--display); font-size:1.3rem; color:var(--ivory); letter-spacing:.01em; }
.brand span{ color:var(--gold); }

.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a:not(.btn){
  color:var(--muted); font-size:.92rem; font-weight:500;
  position:relative; padding:4px 0; transition:color .3s ease;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .35s ease;
}
.nav-links a:not(.btn):hover, .nav-links a.active{ color:var(--gold-soft); }
.nav-links a:not(.btn):hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn{ padding:10px 20px; }

/* Drei-Punkte-Menü — nur mobil */
.menu-dots{
  display:none; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px; border-radius:999px;
  background:none; border:1px solid var(--line); cursor:pointer; flex-shrink:0;
  transition:border-color .3s ease;
}
.menu-dots:hover{ border-color:var(--gold); }
.menu-dots span{ width:4px; height:4px; border-radius:50%; background:var(--gold); display:block; }
.mobile-menu{ display:none; }
@media (max-width:820px){
  .nav-links a:not(.btn){ display:none; }
  .menu-dots{ display:inline-flex; margin-left:10px; }
  .mobile-menu{
    display:block; position:absolute; top:calc(100% + 8px); left:16px; right:16px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:8px 18px; box-shadow:0 24px 60px rgba(0,0,0,.55);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .3s ease, transform .3s ease; z-index:55;
  }
  .mobile-menu.open{ opacity:1; transform:none; pointer-events:auto; }
  .mobile-menu a{
    display:block; padding:14px 2px; color:var(--ivory); font-size:.98rem;
    border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .mobile-menu a:last-child{ border-bottom:none; }
  .mobile-menu a:active{ color:var(--gold-soft); }
}

/* ---------- Fußzeile ---------- */
footer{
  border-top:1px solid var(--line); color:var(--muted); font-size:.9rem;
  margin-top:72px; position:relative; overflow:hidden;
}
.foot{ max-width:var(--max); margin:0 auto; padding:34px 24px calc(34px + 70px); position:relative; z-index:1; }
footer .wrap{ position:relative; z-index:1; }

.seals{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.seal{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  font-size:.8rem; color:var(--ivory); background:var(--panel);
  transition:border-color .3s ease;
}
.seal:hover{ border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); }
.seal .dot{ color:var(--gold); }

.foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; }
.foot-bottom nav{ display:flex; gap:22px; }

/* Mehrspaltiger Fuß (nur Startseite) */
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding:56px 0 10px; }
.foot-brand .brand{ font-size:1.5rem; }
.foot-brand p{ margin-top:14px; font-size:.92rem; max-width:22rem; }
.foot-col h4{
  font-family:var(--body); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; font-weight:600;
}
.foot-col a{ display:block; color:var(--muted); padding:5px 0; font-size:.92rem; }
.foot-col a:hover{ color:var(--gold-soft); }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr; gap:30px; } }

/* Geisterwortmarke im Fuß */
.ghost-brand{
  position:absolute; right:-14px; bottom:44px; z-index:0; line-height:.8;
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(5.5rem, 15vw, 10rem); color:transparent;
  -webkit-text-stroke:1px rgba(201,164,104,.09);
  pointer-events:none; user-select:none;
}

/* ---------- Mobiler Sticky-CTA ---------- */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:none; gap:8px; padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:rgba(11,19,16,.92);
  backdrop-filter:blur(12px); border-top:1px solid var(--line);
}
.sticky-cta .btn{ flex:1; text-align:center; padding:11px 8px; font-size:.88rem; }

/* ---------- Textur, Licht, Lesefortschritt ---------- */
.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#scrollProgress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--gold) 40%, var(--line)); }

/* ---------- Animationen ---------- */
@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:.75; }
  50%{ transform:scale(1.16); opacity:1; }
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* Einstiegs-Animation: gestaffeltes Aufsteigen */
.rise{ opacity:0; transform:translateY(34px); animation:rise .9s cubic-bezier(.22,.8,.3,1) forwards; }
.rise.r2{ animation-delay:.12s; } .rise.r3{ animation-delay:.24s; }
.rise.r4{ animation-delay:.36s; } .rise.r5{ animation-delay:.48s; }

/* Scroll-Reveal (per IntersectionObserver in site.js) */
.reveal{ opacity:0; transform:translateY(44px); transition:opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width:700px){
  body{ font-size:16px; }
  .sticky-cta{ display:flex; }
  .nav{ padding:13px 18px; }
  header.scrolled .nav{ padding:9px 18px; }
  .brand{ font-size:1.12rem; }
  .menu-dots{ width:36px; height:36px; }
}

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .rise, .reveal{ opacity:1 !important; transform:none !important; }
}