/* ════════════════════════════════════════════════════════════════
   Spruytenburg GmbH — "Der Kreislauf" · gemeinsame Komponenten-CSS
   Design-Tokens (Single Source of Truth) + Theme + Motion-Prep
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Marke */
  --brand:#0C3F49; --brand-2:#14616E; --cool:#2E8B9E;
  --accent:#E0762E; --accent-2:#F0A35C; --copper:#B0531F;
  /* Flächen */
  --bg:#F6F1E8; --surface:#FFFFFF; --surface-2:#FBF7F0; --elev:#FFFFFF;
  --fg:#142329; --muted:#5C6B70; --border:#E4DBCC; --line:#0C3F49;
  --blueprint:rgba(12,63,73,.07);
  /* Form */
  --radius-sm:.5rem; --radius:.9rem; --radius-lg:1.4rem;
  --shadow-sm:0 1px 2px rgba(20,35,41,.06), 0 1px 1px rgba(20,35,41,.04);
  --shadow:0 18px 50px -20px rgba(12,63,73,.28);
  --shadow-warm:0 22px 60px -24px rgba(176,83,31,.35);
  --space:1rem;
  --dur:.45s; --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
  --header-h:76px;
  color-scheme:light;
}
[data-theme="dark"]{
  --brand:#14616E; --brand-2:#2E8B9E; --cool:#54B3C6;
  --accent:#E88A45; --accent-2:#F4B070; --copper:#C96a2c;
  --bg:#0F181B; --surface:#17242A; --surface-2:#1E2E34; --elev:#22343B;
  --fg:#E7ECEA; --muted:#9DB0B3; --border:#2A3B41; --line:#3a565e;
  --blueprint:rgba(124,176,184,.08);
  --shadow:0 24px 60px -24px rgba(0,0,0,.6);
  --shadow-warm:0 24px 60px -24px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:clip;transition:background .5s var(--ease),color .5s var(--ease);
}
h1,h2,h3,h4,.font-head{font-family:"Bricolage Grotesque","Mulish",sans-serif;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{position:relative;padding-block:clamp(3.5rem,8vw,7rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.74rem;color:var(--accent)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;display:inline-block}
.h-sec{font-size:clamp(1.9rem,4.4vw,3rem);margin:.6rem 0 0}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted);max-width:60ch}

/* ── Blueprint-Hintergrund (atmet) ───────────────────────────── */
.blueprint{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--blueprint) 1px,transparent 1px),
                   linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 120% at 50% 0%,#000 40%,transparent 100%);
  animation:bpdrift 26s ease-in-out infinite}
@keyframes bpdrift{0%,100%{background-position:0 0,0 0}50%{background-position:24px 14px,14px 24px}}
canvas.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.blueprint{animation:none}}

/* ── Header ───────────────────────────────────────────────────── */
/* Hero & Seite teilen das Theme (heller Hero im Light-, dunkler im Dark-Mode) →
   Header-Text immer var(--fg): über dem Hero UND gescrollt lesbar, nie dunkel-auf-dunkel. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--fg);
  background:transparent;transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s}
.site-header.scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--fg);box-shadow:var(--shadow-sm);
  border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:1.4rem;height:var(--header-h)}
.brandmark{display:flex;align-items:center;gap:.6rem;font-family:"Bricolage Grotesque";font-weight:800;
  font-size:1.18rem;letter-spacing:-.02em;white-space:nowrap}
.brandmark svg{height:34px;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.nav-links a.navlink{position:relative;padding:.55rem .8rem;border-radius:var(--radius-sm);font-weight:600;font-size:.97rem;
  color:currentColor;transition:background .25s,color .25s}
.nav-links a.navlink:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.nav-links a.navlink.active{color:var(--accent)}
.has-drop{position:relative}
.dropdown{position:absolute;top:calc(100% + .4rem);left:0;min-width:280px;background:var(--surface);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--radius-sm)}
.dropdown a:hover{background:var(--surface-2)}
.dropdown a svg{color:var(--accent);flex:none;margin-top:2px}
.dropdown a small{display:block;color:var(--muted);font-size:.82rem;font-weight:500;margin-top:1px}
.dropdown a strong{font-weight:700;font-size:.97rem}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 8%,transparent);
  color:currentColor;cursor:pointer;flex:none;transition:.25s}
.theme-toggle:hover{transform:rotate(18deg)}
.menu-btn{display:none;width:46px;height:46px;border:0;background:color-mix(in srgb,currentColor 10%,transparent);
  border-radius:var(--radius-sm);color:currentColor;cursor:pointer;align-items:center;justify-content:center}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:999px;cursor:pointer;border:1px solid transparent;line-height:1;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;will-change:transform}
.btn svg{flex:none}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--copper));color:#fff;box-shadow:var(--shadow-warm)}
.btn-accent:hover{transform:translateY(-2px)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:color-mix(in srgb,currentColor 35%,transparent);color:currentColor}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.btn-block{width:100%}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:700;font-size:.8rem}

/* ── Cards / Bento ────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
  display:flex;flex-direction:column;height:100%}
.card:hover{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.icon-badge{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.icon-badge.warm{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.media{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--copper))}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .media img{transform:scale(1.06)}
.ph-fallback{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 55%,var(--copper) 100%);color:#fff;text-align:center;padding:1rem}

/* ── Flow-Ader (roter Faden) ──────────────────────────────────── */
.flow-ader{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);z-index:0;pointer-events:none;overflow:visible}

/* ── Forms ────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-weight:700;font-size:.9rem}
.field input,.field textarea,.field select{font:inherit;padding:.8rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--fg);transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.field .err{color:#d6453f;font-size:.82rem;font-weight:600;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:#d6453f}
.form-note{font-size:.85rem;color:var(--muted)}
.form-ok{display:none;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-weight:700}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.faq-item+.faq-item{margin-top:.8rem}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;
  padding:1.15rem 1.3rem;background:none;border:0;cursor:pointer;font:700 1.05rem/1.3 "Bricolage Grotesque";color:var(--fg)}
.faq-q .pm{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);transition:transform .35s var(--ease)}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 1.3rem 1.2rem;color:var(--muted)}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer{background:var(--brand);color:#eaf3f4;position:relative;overflow:hidden}
[data-theme="dark"] .site-footer{background:#0c161a}
.site-footer a{color:#cfe2e4}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.88rem;color:#b8d0d2}

/* ── Notdienst-Leiste ─────────────────────────────────────────── */
.notruf{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--accent)}

/* ── Char/Word Split ──────────────────────────────────────────── */
[data-split]{overflow:hidden;display:block}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;will-change:transform}

/* ── Preloader ────────────────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--brand)}
#preloader .pl-inner{text-align:center;color:#fff}
#preloader svg{width:120px;height:120px}
#preloader .pl-name{margin-top:1rem;font-family:"Bricolage Grotesque";font-weight:800;letter-spacing:.04em;
  font-size:1.1rem;opacity:.92}

/* ── Reveal-Prep (KEINE opacity:0 hier! Startzustände kommen aus GSAP) ── */
.no-anim [data-reveal] > *,.no-anim [data-split] .char,.no-anim [data-depth],
.no-anim [data-fade]{opacity:1 !important;transform:none !important}

/* ── Utility ──────────────────────────────────────────────────── */
.grid{display:grid;gap:1.4rem}
.eq{display:grid;gap:1.4rem;align-items:stretch}
.skip-link{position:absolute;left:-999px;top:.5rem;z-index:200;background:var(--accent);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--radius-sm);font-weight:700}
.skip-link:focus{left:.5rem}
.divider{height:1px;background:var(--border);border:0;margin:0}
.tag{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.kpi{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(2rem,5vw,3.2rem);color:var(--accent);line-height:1}

/* ── Mobile menu ──────────────────────────────────────────────── */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--surface);color:var(--fg);
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;
  padding:1.2rem clamp(1.1rem,5vw,2rem) 2rem;overflow-y:auto}
.mobile-menu.open{transform:none}
.mobile-menu a{padding:1rem .4rem;border-bottom:1px solid var(--border);font-family:"Bricolage Grotesque";
  font-weight:700;font-size:1.25rem;display:flex;align-items:center;justify-content:space-between}

/* ── Responsive ───────────────────────────────────────────────── */
/* ── Responsive Grid-Override (Inline-Grids kollabieren lassen) ──────────
   Seiten setzen Grids per Inline-`style`; Inline schlägt Klassen-Regeln,
   daher hier per Attribut-Selektor + !important global umbrechen. */
@media (max-width:980px){
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-column:span"],[style*="grid-column: span"]{grid-column:auto!important}
  [style*="grid-row:span"],[style*="grid-row: span"]{grid-row:auto!important}
}
@media (max-width:680px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}
/* 3-Karten-Raster: im Tablet-Fenster 3-spaltig halten (statt 2+1 Waise), erst ≤680 stapeln */
@media (min-width:681px) and (max-width:980px){
  .eq3[style*="grid-template-columns"]{grid-template-columns:repeat(3,1fr)!important}
}

@media (max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta-desktop{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:680px){
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .section{padding-block:clamp(3rem,9vw,4.5rem)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .media img{transition:none}
}