/* ════════════════════════════════════════════════════════════════
   Nähmaschinen-Fachgeschäft Hans Kellermann — Design-Tokens & Basis
   Konzept "Der Steppstich" — siehe BAUAUFTRAG.md
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  /* Farben — Light (60/30/10, siehe BAUAUFTRAG §4) */
  --color-bg:#F6F0E4;
  --color-surface:#FBF7EE;
  --color-fg:#241E17;
  --color-muted:#8A7A63;
  --color-border:#DED2B8;
  --color-primary:#B23A2E;
  --color-primary-ink:#FBF3E9;
  --color-secondary:#4B6455;
  --color-gold:#B8863B;
  --focus: var(--color-primary);

  /* Spacing — eigene Namen (nicht mit Tailwind kollidieren) */
  --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(36 30 23/.08);
  --shadow:0 10px 34px rgb(36 30 23/.14);

  /* Typo-Skala (fluid, gedeckelt — REF-F/REF-H) */
  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2.1rem,5vw,3.4rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.62;
  --tracking-tight:-.015em; --tracking-label:.13em;

  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);
}
/* Ohne gespeicherte Wahl folgt der erste Eindruck dem System — mit Wahl gewinnt .dark/.light (höhere Spezifität) */
@media (prefers-color-scheme: dark){
  html:not(.light){
    color-scheme: dark;
    --color-bg:#211B14; --color-surface:#2A231A; --color-fg:#EFE6D3; --color-muted:#B5A78C;
    --color-border:#3B3123; --color-primary:#D65C46; --color-primary-ink:#241108;
    --color-secondary:#6C8873; --color-gold:#CFA35C;
  }
}
html.dark{
  color-scheme: dark;
  --color-bg:#211B14; --color-surface:#2A231A; --color-fg:#EFE6D3; --color-muted:#B5A78C;
  --color-border:#3B3123; --color-primary:#D65C46; --color-primary-ink:#241108;
  --color-secondary:#6C8873; --color-gold:#CFA35C;
}
html.light{
  color-scheme: light;
  --color-bg:#F6F0E4; --color-surface:#FBF7EE; --color-fg:#241E17; --color-muted:#8A7A63;
  --color-border:#DED2B8; --color-primary:#B23A2E; --color-primary-ink:#FBF3E9;
  --color-secondary:#4B6455; --color-gold:#B8863B;
}

*{ box-sizing:border-box; }
/* KEIN CSS scroll-behavior:smooth — Lenis (Desktop) bzw. native scrollIntoView im Anker-Handler
   (Mobile) übernehmen das Easing; CSS-smooth-scroll würde zusätzlich JEDEN programmatischen
   scrollTo()-Aufruf (auch den des Render-/Testskripts) animieren und Endpositionen verfälschen. */
html{ scroll-behavior:auto; }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family:"Mulish","Karla",system-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);
}
h1,h2,h3,h4,.font-heading{ font-family:"Bricolage Grotesque","Fraunces",serif; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; }
h1{ font-size:var(--text-h1); font-weight:800; }
h2{ font-size:var(--text-h2); font-weight:700; }
h3{ font-size:var(--text-h3); font-weight:700; }
h4{ font-size:var(--text-h4); font-weight:600; }
p{ margin:0; }
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-fg); }
a{ color:inherit; }
.eyebrow{ font-size:var(--text-eyebrow); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-primary); }
.prose-measure{ max-width:65ch; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ── Papier-/Konstruktionsgitter-Grund ─────────────────────────────── */
.paper-grid{
  background-image:
    linear-gradient(color-mix(in oklch, var(--color-fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-fg) 5%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: var(--gridShiftX, 0px) var(--gridShiftY, 0px);
}

/* ── Steppstich-Signatur (dashed line als wiederkehrendes Motiv) ──── */
.stitch-rule{ border:none; border-top:2px dashed color-mix(in oklch, var(--color-primary) 55%, var(--color-border)); }
.stitch-border{ border:1.5px dashed var(--color-border); }
.stitch-card{ background:var(--color-surface); border:1.5px dashed var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }

/* fixer Hintergrund-Layer: Konstruktionslinien + Steppstich-Pfad (scroll-gekoppelt via JS) */
.bg-scene{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.bg-scene svg{ position:absolute; inset:0; width:100%; height:100%; }
#stitchPath{ fill:none; stroke:var(--color-primary); stroke-width:2.4; stroke-linecap:round; opacity:.5; }

/* ── Header ─────────────────────────────────────────────────────── */
/* Heller Papier-Hero -> Default-Header-Schrift ist DUNKEL (nicht hell), REF-F Kontrast-Pflicht */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:100; color:var(--color-fg); background:transparent; transition:background .35s,color .35s,box-shadow .35s; }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-bg) 92%, transparent); color:var(--color-fg); box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); }
.header-wrap{ max-width:78rem; margin-inline:auto; padding-inline:max(1.25rem, calc((100% - 78rem)/2 + 1.25rem)); display:flex; align-items:center; justify-content:space-between; height:4.75rem; }
.nav-link{ font-weight:600; font-size:.95rem; padding:.4rem .2rem; position:relative; text-decoration:none; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:currentColor; transition:right .3s var(--ease-out); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ right:0; }
.burger{ display:none; }
@media (max-width: 899px){
  /* !important nötig: Tailwinds Play-CDN injiziert sein Utility-<style> NACH site.css,
     ".flex{display:flex}" käme sonst bei gleicher Spezifität später und würde gewinnen */
  .nav-desktop{ display:none !important; }
  .burger{ display:inline-flex !important; }
}

/* Mobile-Menü */
#mobileMenu{ position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg); display:flex; flex-direction:column; gap:1.5rem; padding:6.5rem 1.75rem 2rem; transform:translateY(-100%); transition:transform .45s var(--ease-out); }
#mobileMenu.open{ transform:translateY(0); }
#mobileMenu a{ font-size:1.5rem; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; text-decoration:none; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .3s var(--ease-out), background .3s, color .3s, border-color .3s; }
.btn-primary{ background:var(--color-primary); color:var(--color-primary-ink); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:currentColor; color:inherit; }
.btn-ghost:hover{ background:color-mix(in oklch, currentColor 10%, transparent); }

/* ── Sektionen ──────────────────────────────────────────────────── */
main{ position:relative; z-index:1; }
.section{ padding-block: clamp(3.5rem,7vw,7rem); }
.wrap{ max-width:78rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:640px){ .wrap{ padding-inline:1.75rem; } }

/* Karten-Grid — REF-H konform (items-stretch, gap, keine verwaisten Boxen) */
.grid-cards{ display:grid; gap:1.5rem; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:768px){ .grid-cards.cols-3{ grid-template-columns:repeat(3,1fr); } .grid-cards.cols-2{ grid-template-columns:repeat(2,1fr); } }

.card-photo{ aspect-ratio:4/3; width:100%; object-fit:cover; border-radius:var(--radius); display:block; }
.arc-photo{ border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 3rem; box-shadow:var(--shadow); }

/* ── Reveal-Basiszustände (NUR via GSAP gesetzt, hier keine Start-Opazität!) ── */
[data-split]{ overflow:hidden; display:block; }
[data-tilt]{ transform-style:preserve-3d; }

/* ── Fail-safe: falls GSAP/CDN blockiert ist ── */
.no-anim [data-reveal] > *, .no-anim [data-split], .no-anim [data-depth]{ opacity:1 !important; transform:none !important; }
.no-anim #preloader{ display:none !important; }

/* ── Loading-Preloader ── */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
#preloader svg{ width:120px; height:auto; }
#preloader path{ fill:none; stroke:var(--color-primary); stroke-width:3; }

/* ── FAQ Akkordeon ── */
.faq-item{ border-bottom:1.5px dashed var(--color-border); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; background:none; border:none; text-align:left; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.05rem; color:inherit; cursor:pointer; }
.faq-q .chev{ transition:transform .35s var(--ease-out); flex:none; }
.faq-item[data-open="true"] .chev{ transform:rotate(180deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease-out); }
.faq-a p{ padding-bottom:1.25rem; color:var(--color-muted); }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer{ background:var(--color-surface); border-top:1.5px dashed var(--color-border); padding-block:var(--space-2xl) var(--space-lg); }
.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-bottom{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--color-border); padding-bottom:15px; }
.footer-legal-links{ display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.85rem; opacity:.8; }
.footer-legal-links a{ text-decoration:none; }
.footer-legal-links a:hover{ text-decoration:underline; }
.demo-note{ font-size:.78rem; opacity:.55; margin-top:1rem; }

/* ── Theme-Toggle ── */
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; }

/* ── 🏷️ Made-by-Badge (aus Vorlagen/footer-badge.html, 1:1, --ns-accent = Marken-Primär) ── */
.ns-badge{ --ns-accent:var(--color-primary); --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; }
.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); }
@media (prefers-reduced-motion:reduce){
  .ns-badge,.ns-badge *{ transition:none !important; animation:none !important; }
  .ns-amb{ display:none; }
  .ns-badge:hover .ns-flood,.ns-badge:focus-visible .ns-flood{ transform:translateY(0); }
  .ns-badge:hover,.ns-badge:focus-visible{ border-color:var(--ns-accent); }
  .ns-badge:hover .ns-logo path,.ns-badge:focus-visible .ns-logo path{ stroke:var(--ns-brand); }
  .ns-badge:hover .ns-brand-txt,.ns-badge:focus-visible .ns-brand-txt{ fill:var(--ns-brand); }
}

/* ── Reduced-Motion: NUR vestibulär Schweres still, Rest gedämpft (siehe REF-C) ── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee,[data-parallax],[data-depth]{ animation:none!important; }
  .bg-loop,.aurora,[data-ambient]{ animation-duration:90s!important; }
}

/* ── Mobile-Feinschliff ── */
@media (max-width:480px){
  .header-wrap{ height:4.25rem; }
}