/* ============================================================
   Lampen Hoffacker-Heißenberg — Design-System „Golden Hour"
   Tokens, Typografie, Header/Footer, Komponenten, Motion-Basis.
   Geladen auf JEDER Seite (assets/css/site.css). Siehe BAUAUFTRAG.md.
   ============================================================ */

:root{
  color-scheme: light;
  /* ---- Marken-Tokens (Light, Standard) ---- */
  --color-background:#FAF6EE;
  --color-foreground:#2B241E;
  --color-primary:#5C2233;
  --color-secondary:#6B4A34;
  --color-accent:#B9812A;
  --color-muted:#8A7F70;
  --color-card:#FFFDF8;
  --color-border:#E4D9C6;
  --focus: var(--color-accent);

  /* Scroll-gekoppelte "Golden Hour"-Hintergrundreise (per JS gesetzt) */
  --bgHue: 42; --bgSat: 38%; --bgLift: 96%; --bgShift:20%; --bgShift2:80%; --bgGlow:.16;

  /* ---- Spacing (eigene Namen) ---- */
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:.9rem; --radius-lg:1.5rem;
  --shadow-sm:0 1px 2px rgb(43 36 30/.08);
  --shadow:0 12px 34px rgb(43 36 30/.14);

  /* ---- Fluide Typo-Skala ---- */
  --text-eyebrow:.78rem; --text-body:1.0625rem;
  --text-lead:clamp(1.15rem,1.6vw,1.4rem);
  --text-h4:clamp(1.1rem,1.6vw,1.3rem);
  --text-h3:clamp(1.3rem,2.4vw,1.7rem);
  --text-h2:clamp(1.65rem,3.6vw,2.35rem);
  --text-h1:clamp(2.1rem,5vw,3.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.14em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"]{
  color-scheme: dark;
  --color-background:#1C1712;
  --color-foreground:#EDE6D9;
  --color-primary:#D68FA0;
  --color-secondary:#C9A57E;
  --color-accent:#E0B449;
  --color-muted:#A99C89;
  --color-card:#26201A;
  --color-border:#3A2F24;
  --bgHue:32; --bgSat:44%; --bgLift:14%; --bgGlow:.22;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-background); color:var(--color-foreground);
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  transition:background .5s var(--ease-out), color .5s var(--ease-out);
}
[data-theme="dark"] body{ color:#e7e9de; }
h1,h2,h3,h4{ font-family:"Newsreader", Georgia, serif; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; font-weight:600; }
h1{ font-size:var(--text-h1); font-weight:700; }
h2{ font-size:var(--text-h2); font-weight:700; }
h3{ font-size:var(--text-h3); font-weight:600; }
h4{ font-size:var(--text-h4); font-weight:600; }
p{ margin:0; }
.lead{ font-size:var(--text-lead); font-weight:500; max-width:60ch; }
.prose-measure{ max-width:65ch; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.italic-accent{ font-style:italic; color:var(--color-accent); }

.wrap{ max-width:78rem; margin-inline:auto; padding-inline:1.35rem; }
@media(min-width:768px){ .wrap{ padding-inline:2.5rem; } }
section{ padding-block: 4.5rem; }
@media(min-width:768px){ section{ padding-block:7rem; } }

.eyebrow{
  display:inline-block; font-size:var(--text-eyebrow); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tracking-label); color:var(--color-accent); margin-bottom:.9rem;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; border-radius:999px;
  font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s;
  min-height:44px;
}
.btn-primary{ background:var(--color-accent); color:#211405; box-shadow:0 10px 26px rgb(185 129 42/.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgb(185 129 42/.4); }
.btn-ghost{ background:transparent; color:var(--color-foreground); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* ---- Karten ---- */
.card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card-photo{ overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3; background:var(--color-border); }
.card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.card:hover .card-photo img{ transform:scale(1.06); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.arch-img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* ---- Header ---- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:60; color:#fff; background:transparent;
  transition:background .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-header .head-inner{
  max-width:78rem; margin-inline:auto; padding:1.15rem 1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
@media(min-width:768px){ .site-header .head-inner{ padding-inline:2.5rem; } }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-background) 92%, transparent); color:var(--color-foreground); box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-family:"Newsreader",serif; font-weight:600; font-size:1.15rem; }
.brand svg{ flex:none; }
.nav-links{ display:none; gap:1.9rem; font-size:.95rem; font-weight:500; }
@media(min-width:920px){ .nav-links{ display:flex; } }
.nav-links a{ text-decoration:none; position:relative; padding-block:.3rem; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--color-accent); transition:right .35s var(--ease-out); }
.nav-links a:hover::after,.nav-links a[aria-current]::after{ right:0; }
.head-actions{ display:flex; align-items:center; gap:.75rem; }
.theme-toggle{ width:2.5rem; height:2.5rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; opacity:.85; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.theme-toggle:hover{ opacity:1; }
.burger{ display:inline-flex; md-hidden:none; width:2.5rem; height:2.5rem; border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit; align-items:center; justify-content:center; cursor:pointer; }
@media(min-width:920px){ .burger{ display:none; } }
.mobile-menu{
  position:fixed; inset:0; z-index:70; background:var(--color-background); color:var(--color-foreground);
  display:flex; flex-direction:column; padding:1.35rem; transform:translateX(100%); transition:transform .45s var(--ease-out);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu .close-btn{ align-self:flex-end; width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--color-border); background:transparent; color:inherit; cursor:pointer; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:1.4rem; margin-top:3rem; font-family:"Newsreader",serif; font-size:1.6rem; }
.mobile-menu nav a{ text-decoration:none; }
.mobile-menu .cta{ margin-top:auto; }

/* ---- Hintergrund-Szene: permanent + scroll-gekoppelt (Golden Hour) ---- */
.bg-scene{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at var(--bgShift,20%) 26%, hsl(var(--bgHue,42) var(--bgSat,38%) 68% / var(--bgGlow,.16)), transparent 70%),
    radial-gradient(55% 55% at var(--bgShift2,80%) 78%, hsl(calc(var(--bgHue,42) + 22) var(--bgSat,38%) 58% / calc(var(--bgGlow,.16) * .8)), transparent 68%);
  animation: bg-breathe 16s ease-in-out infinite alternate;
}
@keyframes bg-breathe{ from{ filter:brightness(1); } to{ filter:brightness(1.08) saturate(1.08); } }

/* ---- Golden Thread Divider (Signatur-Element) ---- */
.thread-divider{ width:100%; display:flex; justify-content:center; padding-block:1.5rem; }
.thread-divider svg{ width:min(320px,70%); height:auto; overflow:visible; }
.thread-divider path{ fill:none; stroke:var(--color-accent); stroke-width:1.5; stroke-linecap:round; }
.thread-divider circle{ fill:var(--color-accent); }

/* ---- Reveal-Helfer (Start NUR via GSAP gesetzt, siehe site.js) ---- */
[data-split] .word{ display:inline-block; white-space:nowrap; }
[data-split] .char{ display:inline-block; will-change:transform; }
[data-reveal] > *{ display:block; }

/* ---- CDN-Fail-Safe: Inhalt bleibt sichtbar, falls Engine nicht lädt ---- */
.no-anim [data-reveal] > *, .no-anim [data-split] .char, .no-anim [data-depth]{ opacity:1!important; transform:none!important; }

/* ---- Vorher/Nachher (falls genutzt) — hier ungenutzt, Regeln bleiben verfügbar ---- */

/* ---- FAQ Akkordeon ---- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; color:inherit; font-family:"Newsreader",serif; font-size:1.08rem; font-weight:600; }
.faq-q svg{ flex:none; transition:transform .35s var(--ease-out); }
.faq-item[data-open="true"] .faq-q svg{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease-out); }
.faq-a p{ padding-bottom:1.25rem; opacity:.85; max-width:65ch; }

/* ---- Footer ---- */
.site-footer{ position:relative; background:var(--color-primary); color:#F6ECD9; padding-block:4rem 2rem; }
[data-theme="dark"] .site-footer{ background:#150F0B; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:800px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-grid a{ text-decoration:none; opacity:.85; }
.footer-grid a:hover{ opacity:1; }
.footer-nav{ display:flex; flex-direction:column; gap:.6rem; }
.footer-bottom{ margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid rgb(255 255 255/.14); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.footer-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.88rem; opacity:.8; }
.demo-note{ font-size:.78rem; opacity:.55; margin-top:.75rem; max-width:60ch; }

/* ---- Made-by-Badge (footer-badge.html, UNVERÄNDERT — hier nur der CSS-Teil, shared) ---- */
.ns-badge{ --ns-accent:currentColor; --ns-brand:#1DD4AA; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .82rem; border:1px solid currentColor; border-radius:999px; overflow:hidden; text-decoration:none;
  color:inherit; line-height:1; opacity:.9;
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.61,.21,1), opacity .4s ease; margin-bottom:15px; }
.ns-amb{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ns-amb i{ position:absolute; bottom:-4px; border-radius:1px; background:var(--ns-accent); opacity:0;
  animation:ns-up var(--d,5s) var(--delay,0s) linear infinite; will-change:transform,opacity; }
@keyframes ns-up{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:var(--o,.4); } 82%{ opacity:var(--o,.4); } 100%{ transform:translateY(-3rem); opacity:0; } }
.ns-flood{ position:absolute; left:-2%; right:-2%; bottom:0; width:104%; height:150%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, transparent, var(--ns-accent)); opacity:.26;
  border-radius:46% 46% 0 0 / 16px 16px 0 0; transform:translateY(101%); transition:transform .55s cubic-bezier(.5,0,.2,1); }
.ns-logo, .ns-text{ position:relative; z-index:2; }
.ns-logo path, .ns-brand-txt{ transition:stroke .35s ease, fill .35s ease; }
.ns-logo path:nth-child(1){ animation-delay:0s; } .ns-logo path:nth-child(2){ animation-delay:.24s; }
.ns-logo path:nth-child(3){ animation-delay:.48s; } .ns-logo path:nth-child(4){ animation-delay:.72s; } .ns-logo path:nth-child(5){ animation-delay:.96s; }
@keyframes ns-draw{ from{ stroke-dashoffset:var(--len); } to{ stroke-dashoffset:0; } }
.ns-badge:hover, .ns-badge:focus-visible{ opacity:1; border-color:var(--ns-accent); transform:translateY(-1px); }
.ns-badge:hover .ns-flood, .ns-badge:focus-visible .ns-flood{ transform:translateY(0); }
.ns-badge:hover .ns-amb i, .ns-badge:focus-visible .ns-amb i{ animation-duration:1.8s; }
.ns-badge:hover .ns-logo path, .ns-badge:focus-visible .ns-logo path{ stroke:var(--ns-brand); animation:ns-draw .55s cubic-bezier(.45,0,.25,1) both; }
.ns-badge:hover .ns-brand-txt, .ns-badge:focus-visible .ns-brand-txt{ fill:var(--ns-brand); }

/* ---- Seitenübergangs-Vorhang ---- */
.page-veil{ position:fixed; inset:0; z-index:9999; background:var(--color-accent); clip-path:circle(0% at 50% 50%); pointer-events:none; }
.loader{ position:fixed; inset:0; z-index:9997; background:var(--color-background); display:flex; align-items:center; justify-content:center; }
.loader svg{ width:64px; height:64px; }

@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto!important; }
  .bg-scene{ animation-duration:90s!important; }
}

/* ---- Mobile Feinschliff ---- */
@media(max-width:767px){
  section{ padding-block:4rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}