/* Bedachungen Garnitz GmbH — Design-System "Schicht-Scrub" (Industrial/Beton+Ziegelrot) */
/* Fonts (Bebas Neue / Manrope) werden je Seite per Google-Fonts-<link> geladen (font-display:swap). */

:root{
  color-scheme: light;
  --color-bg:#EAE6DC; --color-surface:#F6F3EC; --color-surface-2:#EFEADC; --color-fg:#221F1C;
  --color-brand:#AE4128; --color-brand-hover:#8F341F; --color-brand-ink:#FBF3EC;
  --color-secondary:#736C60; --color-muted:#8D8577; --color-border:#D3CCBC;
  --focus:#AE4128;
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.25rem; --radius:.5rem; --radius-lg:.9rem;
  --shadow-sm:0 1px 2px rgb(20 15 10/.08); --shadow:0 12px 32px rgb(20 15 10/.16);
  --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,5.4vw,3.5rem);
  --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.6;
  --tracking-tight:-.01em; --tracking-label:.14em;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);
  --bgHue:20; --bgShift:20%; --bgShift2:80%; --bgGrid:1; --bgWarm:0;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --color-bg:#1D1B18; --color-surface:#29271F; --color-surface-2:#232019; --color-fg:#EDE8DD;
  --color-brand:#C85536; --color-brand-hover:#DE643F; --color-brand-ink:#1D1B18;
  --color-secondary:#A79E8E; --color-muted:#8F8879; --color-border:#3A362D;
  --focus:#C85536;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; transition:background .5s ease, color .5s ease;
  overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:"Bebas Neue", ui-sans-serif, sans-serif; font-weight:400;
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); text-wrap:balance;
  margin:0;
}
h1{ font-size:var(--text-h1); }
h2{ font-size:var(--text-h2); }
h3{ font-size:var(--text-h3); }
h4{ font-size:var(--text-h4); }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:75rem; margin-inline:auto; padding-inline:1.25rem; }
.wrap-narrow{ max-width:48rem; margin-inline:auto; padding-inline:1.25rem; }
section{ position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-eyebrow); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-brand);
}
.eyebrow::before{ content:""; width:1.4rem; height:2px; background:currentColor; display:inline-block; }
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-secondary); max-width:60ch; }
.prose p{ max-width:65ch; margin-bottom:1rem; }
: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; }

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm); font-weight:700; font-size:.95rem;
  text-decoration:none; cursor:pointer; border:2px solid transparent; transition:transform .3s var(--ease-out), background .3s, border-color .3s, color .3s;
  touch-action:manipulation;
}
.btn-primary{ background:var(--color-brand); color:var(--color-brand-ink); }
.btn-primary:hover{ background:var(--color-brand-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:currentColor; color:var(--color-fg); }
.btn-ghost:hover{ border-color:var(--color-brand); color:var(--color-brand); transform:translateY(-2px); }
.btn-on-dark{ border-color:#fff; color:#fff; }
.btn-on-dark:hover{ border-color:var(--color-brand); background:var(--color-brand); color:var(--color-brand-ink); }

/* ── Header / Nav ──────────────────────────────────────── */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  color:#fff; background:transparent; transition:background .35s ease, color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
  padding-block:1.1rem;
}
.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); padding-block:.7rem;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-family:"Bebas Neue"; font-size:1.3rem; letter-spacing:.02em; }
.brand svg{ width:2.1rem; height:2.1rem; flex:none; }
.nav-links{ display:none; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; font-size:.95rem; font-weight:600; }
.nav-links a{ text-decoration:none; position:relative; padding-block:.2rem; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--color-brand); transition:right .3s var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.header-actions{ display:flex; align-items:center; gap:.9rem; }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:999px; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
.theme-toggle svg{ width:1.15rem; height:1.15rem; }
.burger{ display:inline-flex; width:2.6rem; height:2.6rem; align-items:center; justify-content:center; border:1.5px solid currentColor; border-radius:var(--radius-sm); background:transparent; color:inherit; cursor:pointer; }
@media (min-width:900px){ .nav-links{ display:flex; } .burger{ display:none; } }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--color-bg); color:var(--color-fg);
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:2rem 1.75rem;
  transform:translateY(-100%); transition:transform .5s var(--ease-out); visibility:hidden;
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{ font-family:"Bebas Neue"; font-size:2.1rem; text-decoration:none; }
.mobile-menu .btn{ align-self:flex-start; margin-top:1rem; }

/* ── Ziegel-Traufkante Divider (Signatur-Element) ─────────── */
.tile-divider{
  height:22px; width:100%; background:var(--color-brand);
  -webkit-mask:radial-gradient(circle at 11px 0, transparent 11px, black 11.5px) repeat-x;
  mask:radial-gradient(circle at 11px 0, transparent 11px, black 11.5px) repeat-x;
  -webkit-mask-size:22px 22px; mask-size:22px 22px;
}
.tile-divider.muted{ background:var(--color-secondary); opacity:.5; }
.tile-divider.on-surface{ background:var(--color-surface); }

/* ── Cards / Grid ──────────────────────────────────────── */
.card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--color-border); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-body{ padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.grid-auto{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.md-grid-2{ grid-template-columns:1fr; }
@media (min-width:860px){ .md-grid-2{ grid-template-columns:1fr 1fr; } }

/* ── Section rhythm ────────────────────────────────────── */
.section-pad{ padding-block:4rem; }
@media (min-width:768px){ .section-pad{ padding-block:7rem; } }
.section-dark{ background:var(--color-fg); color:var(--color-bg); }
html[data-theme="dark"] .section-dark{ background:var(--color-surface-2); }

/* ── Global scroll-coupled background scene (Blaupause -> Beton -> Ziegel) ── */
.bg-scene{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(color-mix(in oklch, var(--color-fg) 6%, transparent) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, color-mix(in oklch, var(--color-fg) 6%, transparent) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(65% 55% at var(--bgShift,20%) 25%, color-mix(in oklch, var(--color-brand) calc(var(--bgWarm,0) * 1%), transparent), transparent 70%),
    radial-gradient(55% 50% at var(--bgShift2,80%) 75%, color-mix(in oklch, var(--color-secondary) calc(var(--bgWarm,0) * .8%), transparent), transparent 65%),
    var(--color-bg);
  opacity: calc(.55 + var(--bgWarm,0) * 0);
}
.bg-scene::after{
  content:""; position:absolute; inset:0; opacity:var(--bgGrid,1); transition:opacity .6s;
  background:inherit;
}
canvas.bg-particles{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }

/* ── Motion prep classes ──────────────────────────────── */
[data-split]{ overflow:hidden; display:block; }
[data-tilt]{ transform-style:preserve-3d; }
[data-magnetic]{ display:inline-flex; }
.bg-loop{ animation:drift 16s ease-in-out infinite; will-change:transform; }
@keyframes drift{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(1.5%,-2.5%,0)} 100%{transform:translate3d(0,0,0)} }

/* ── Fail-safe (CDN-Ausfall) ───────────────────────────── */
.no-anim [data-reveal] > *, .no-anim [data-split], .no-anim [data-depth]{ opacity:1 !important; transform:none !important; }

/* ── Accordion (FAQ) ───────────────────────────────────── */
.acc-item{ border-bottom:1px solid var(--color-border); }
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; background:none; border:0; text-align:left; font-family:"Bebas Neue"; font-size:1.25rem;
  letter-spacing:.01em; color:inherit; cursor:pointer;
}
.acc-trigger svg{ flex:none; width:1.4rem; height:1.4rem; transition:transform .4s var(--ease-out); }
.acc-trigger[aria-expanded="true"] svg{ transform:rotate(45deg); }
.acc-panel{ overflow:hidden; height:0; transition:height .4s var(--ease-out); }
.acc-panel p{ padding-bottom:1.25rem; max-width:65ch; color:var(--color-secondary); }

/* ── Vorher/Nachher Slider ─────────────────────────────── */
.ba{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); background:var(--color-border); }
.ba svg{ position:absolute; inset:0; width:100%; height:100%; }
.ba-before{ position:absolute; inset:0; }
.ba-tag{ position:absolute; top:.85rem; z-index:3; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px; background:rgb(20 15 10/.62); color:#fff; pointer-events:none; }
.ba-tag-l{ left:.85rem; } .ba-tag-r{ right:.85rem; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--ba,50%); width:0; z-index:2; pointer-events:none; }
.ba-handle::before{ content:""; position:absolute; inset-block:0; left:-1px; width:2px; background:#fff; box-shadow:0 0 0 3px rgb(255 255 255/.25); }
.ba-handle::after{ content:"⇔"; position:absolute; top:50%; left:50%; translate:-50% -50%; width:2.6rem; height:2.6rem; border-radius:999px; background:#fff; color:var(--color-fg); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:var(--shadow); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }

/* ── Unterseiten-Hero (kompakt, immer echtes Foto) ─────────── */
.page-hero{ position:relative; min-height:62svh; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgb(10 8 6/.84), rgb(10 8 6/.2) 60%, rgb(10 8 6/.4)); }
.page-hero .wrap{ position:relative; color:#fff; padding-block:7.5rem 3.5rem; }

/* ── Leistungs-Detailblock ─────────────────────────────────── */
.leistung-block{ display:grid; gap:2.5rem; align-items:center; padding-block:3.5rem; border-bottom:1px solid var(--color-border); }
@media (min-width:860px){ .leistung-block{ grid-template-columns:1fr 1fr; gap:3.5rem; } .leistung-block.rev .leistung-media{ order:2; } }
.leistung-media{ aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.leistung-media img{ width:100%; height:100%; object-fit:cover; }
.leistung-list{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.65rem; }
.leistung-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem; }
.leistung-list svg{ flex:none; width:1.15rem; height:1.15rem; color:var(--color-brand); margin-top:.15rem; }

/* ── Set-Piece "So bauen wir Ihr Dach" (Sticky-Scrub) ─────── */
.story{ position:relative; height:340vh; }
.story__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; background:var(--color-surface); }
.story__inner{ display:grid; gap:2.5rem; align-items:center; padding-block:2rem; }
@media (min-width:900px){ .story__inner{ grid-template-columns:.85fr 1.15fr; gap:3.5rem; } }
.story__captions{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem; max-width:34ch; }
.story__captions li{ opacity:.35; font-weight:600; transition:opacity .4s; padding-left:1rem; border-left:3px solid var(--color-border); }
.story__captions li.is-active{ opacity:1; border-color:var(--color-brand); }
.story__scene{ width:100%; height:auto; display:block; overflow:visible; }
.story__scene [data-grow], .story__scene [data-tick]{ transform-box:fill-box; }
.story__scene text{ font-family:"Manrope",sans-serif; }
@media (prefers-reduced-motion: reduce){
  .story{ height:auto; }
  .story__stage{ position:relative; height:auto; padding-block:3rem; }
}

/* ── Prozess-Schritte ("So geht's") ────────────────────────── */
.steps{ position:relative; display:grid; gap:2.2rem; counter-reset:step; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1.75rem; } }
.step{ position:relative; padding-top:.5rem; }
.step-num{ font-family:"Bebas Neue"; font-size:2.6rem; color:var(--color-brand); line-height:1; }
.steps-line{ position:absolute; left:0; right:0; top:2.6rem; height:2px; display:none; }
@media (min-width:768px){ .steps-line{ display:block; } }
.steps-line path{ fill:none; stroke:var(--color-border); stroke-width:2; }
.steps-line path.fill{ stroke:var(--color-brand); }

/* ── Testimonials ─────────────────────────────────────────── */
.testi{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:1.6rem; display:flex; flex-direction:column; gap:1rem; height:100%; }
.testi-stars{ display:flex; gap:.15rem; color:var(--color-brand); }
.testi-stars svg{ width:1rem; height:1rem; }

/* ── Footer ────────────────────────────────────────────── */
.site-footer{ background:var(--color-fg); color:var(--color-bg); padding-block:4rem 2rem; }
html[data-theme="dark"] .site-footer{ background:#151310; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:3rem; } }
.footer-grid h4{ font-family:"Bebas Neue"; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in oklch, var(--color-bg) 65%, transparent); margin-bottom:1rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-grid a{ text-decoration:none; opacity:.85; }
.footer-grid a:hover{ opacity:1; color:var(--color-brand); }
.footer-bottom{ margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgb(255 255 255/.12); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:15px; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.85rem; opacity:.75; }
.footer-legal a{ text-decoration:none; } .footer-legal a:hover{ opacity:1; text-decoration:underline; }
.demo-note{ font-size:.78rem; opacity:.55; max-width:60ch; margin-top:1rem; }

/* ── Preloader ─────────────────────────────────────────── */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-bg); display:flex; align-items:center; justify-content:center; }
#preloader svg{ width:5rem; height:5rem; color:var(--color-brand); }

/* ── Responsive helpers ────────────────────────────────── */
.only-mobile{ display:block; } .only-desktop{ display:none; }
@media (min-width:768px){ .only-mobile{ display:none; } .only-desktop{ display:block; } }

@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; }
}