/* ════════════════════════════════════════════════════════════════
   KETTLACK — Shared Styles (Tokens · Komponenten · Motion-Hooks)
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5efe6; --surface:#fbf8f1; --fg:#16242e; --muted:#5d6b73;
  --line:#e3d9c8; --brand:#1f3a4d; --brass:#b3873f; --brass-soft:#cda35a; --brass-tint:#e9d9b8;
  --brass-rgb:179 135 63;
  --radius:.9rem; --radius-lg:1.4rem;
  --ease:cubic-bezier(.16,1,.3,1);
}
html.dark{
  --bg:#11191f; --surface:#18242c; --fg:#e9e4da; --muted:#9fb0b8;
  --line:#2a3a44; --brand:#22394a; --brass:#cda35a; --brass-soft:#d8b873; --brass-tint:#3a3526;
  --brass-rgb:205 163 90;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:Manrope,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background .4s,color .4s; }
h1,h2,h3,h4{ font-family:Fraunces,serif; font-weight:600; line-height:1.08; text-wrap:balance; }
::selection{ background:var(--brass); color:#fff; }
a{ color:inherit; }
.container{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.h1{ font-size:clamp(2.3rem,6vw,4.4rem); }
.h2{ font-size:clamp(1.7rem,4.2vw,2.9rem); }
.h3{ font-size:clamp(1.2rem,2.4vw,1.6rem); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--muted); }
.eyebrow{ font-family:Manrope,sans-serif; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:.74rem; color:var(--brass); display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass); display:inline-block; }

.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.95rem;
  padding:.92rem 1.5rem; border-radius:.7rem; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; will-change:transform; }
.btn-primary{ background:var(--brass); color:#1a1206; box-shadow:0 12px 30px -14px rgba(179,135,63,.7); }
.btn-primary:hover{ background:var(--brass-soft); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn-light{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(4px); }
.btn-light:hover{ background:rgba(255,255,255,.2); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.divider-line{ height:1px; background:linear-gradient(90deg,transparent,var(--brass),transparent); opacity:.5; }

.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .4s,box-shadow .4s,border-color .4s; border-bottom:1px solid transparent; }
.site-header .nav-link,.site-header .brandtext,.site-header .toolbtn{ color:#f3ede3; }
.site-header.scrolled{ background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(14px) saturate(1.2); border-color:var(--line); box-shadow:0 10px 30px -22px rgba(0,0,0,.5); }
.site-header.scrolled .nav-link,.site-header.scrolled .brandtext,.site-header.scrolled .toolbtn{ color:var(--fg); }
.nav-link{ position:relative; font-weight:600; font-size:.93rem; padding:.4rem .1rem; opacity:.92; text-decoration:none; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--brass); transition:width .35s var(--ease); }
.nav-link:hover{ opacity:1; } .nav-link:hover::after,.nav-link[aria-current="page"]::after{ width:100%; }
.nav-link[aria-current="page"]{ color:var(--brass); }

.hero{ position:relative; background:#16242e; color:#f3ede3; overflow:hidden; isolation:isolate; }
.hero-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; }

/* ── Hero v2: cinematischer Full-Bleed-Foto-Hero ── */
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-kenburns{ animation:kenburns 26s ease-in-out infinite alternate; will-change:transform; transform-origin:60% 40%; }
@keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.18); } }
.hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,24,30,.55) 0%, rgba(16,24,30,.18) 32%, rgba(16,24,30,.72) 78%, rgba(16,24,30,.96) 100%),
    linear-gradient(95deg, rgba(16,24,30,.82) 0%, rgba(16,24,30,.45) 42%, rgba(16,24,30,0) 72%); }
.hero-annot{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
/* Blueprint-Zone rechts: aufwendige Fassaden-Animation, sauber positioniert + Kontrast-Backdrop */
.hero-blueprint{ position:absolute; top:74px; right:0; bottom:118px; width:46%; max-width:560px; z-index:2;
  pointer-events:none; display:flex; align-items:center; justify-content:center; }
.hero-blueprint::before{ content:""; position:absolute; inset:-8%;
  background:radial-gradient(ellipse 62% 58% at 58% 46%, rgba(16,24,30,.72), rgba(16,24,30,.22) 58%, transparent 80%); }
.hero-blueprint svg{ position:relative; width:min(92%,440px); height:auto; filter:drop-shadow(0 14px 38px rgba(0,0,0,.5)); }
@media (max-width:960px){ .hero-blueprint{ display:none; } }
.quickcard{ background:rgba(18,28,35,.55); border:1px solid rgba(205,163,90,.28); border-radius:var(--radius);
  backdrop-filter:blur(10px) saturate(1.2); transition:border-color .35s var(--ease), background .35s, transform .4s var(--ease); }
.quickcard:hover{ border-color:var(--brass); background:rgba(18,28,35,.72); transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .hero-kenburns{ animation:none; } }

.blue-grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(205,163,90,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(205,163,90,.07) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 70% 35%,#000,transparent 78%); -webkit-mask-image:radial-gradient(circle at 70% 35%,#000,transparent 78%); }

[data-reveal]>*{ will-change:transform,opacity; }
[data-tilt]{ transform-style:preserve-3d; }
[data-split] .word{ display:inline-block; white-space:nowrap; }
[data-split] .char{ display:inline-block; will-change:transform; }
[data-spin],[data-grow]{ transform-box:fill-box; transform-origin:50% 50%; }

.draw{ stroke-dasharray:1; stroke-dashoffset:1; }
.win{ opacity:0; }

/* CDN-/reduced-motion fail-safe: ALLES deckend & gezeichnet sichtbar */
.no-anim [data-reveal]>*, .no-anim [data-split] .char, .no-anim [data-depth], .no-anim [data-fade]{ opacity:1 !important; transform:none !important; }
.no-anim .draw{ stroke-dashoffset:0 !important; }
.no-anim .win{ opacity:1 !important; }
.no-anim #preloader{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]>*,[data-depth],[data-fade]{ opacity:1 !important; transform:none !important; }
  .draw{ stroke-dashoffset:0 !important; }
  .win{ opacity:1 !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

#preloader{ position:fixed; inset:0; z-index:200; background:#16242e; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.1rem; }
#preloader .pre-sub{ font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--brass-soft); opacity:0; }

#mobile-menu{ position:fixed; inset:0; z-index:80; background:#16242e; color:#f3ede3; transform:translateY(-100%); transition:transform .55s var(--ease); display:flex; flex-direction:column; }
#mobile-menu.open{ transform:translateY(0); }
#mobile-menu a{ text-decoration:none; }

.float-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 24px 60px -28px rgba(22,36,46,.5); }
.ratio{ position:relative; overflow:hidden; }
.ratio>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgwrap{ overflow:hidden; border-radius:var(--radius-lg); }
.imgwrap img{ transition:transform .9s var(--ease); display:block; width:100%; }
.imgwrap:hover img{ transform:scale(1.06); }

@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }
.stat-num{ font-variant-numeric:tabular-nums; }
mark.hl{ background:linear-gradient(transparent 62%, var(--brass-tint) 62%); color:inherit; padding:0 .1em; }

/* Formulare */
.field{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:.7rem; padding:.85rem 1rem;
  font:inherit; color:var(--fg); transition:border-color .3s, box-shadow .3s; }
.field:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(179,135,63,.18); }
.field::placeholder{ color:var(--muted); opacity:.7; }
label.lbl{ font-size:.82rem; font-weight:700; margin-bottom:.4rem; display:block; }

/* Accordion */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-btn{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.3rem 0; font-weight:700; font-size:1.05rem; cursor:pointer; background:none; border:0; color:inherit; font-family:inherit; }
.acc-icon{ transition:transform .35s var(--ease); flex-shrink:0; }
.acc-item.open .acc-icon{ transform:rotate(45deg); }
.acc-body{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.acc-body-inner{ padding-bottom:1.3rem; color:var(--muted); }