/* SYTECH - Run-A "Praezise Waerme" v3. Self-hosted Fonts, OKLCH aus Seed #9b141b.
   Keine Em-Dashes, AAA-Latte 7:1 (verifiziert). Motion: scroll-driven + prefers-reduced-motion.
   Mobile-Nav: <details>-Overlay (no-JS-fest), app.js verbessert (Esc/Close).
   Absolute Asset-Pfade (/fonts, /assets) -> identisch fuer / und die Rechts-Routen. */

@font-face { font-family:"Bricolage"; src:url("/fonts/bricolage.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Hanken"; src:url("/fonts/hanken.woff2") format("woff2"); font-weight:300 800; font-display:swap; }

:root {
  --paper: oklch(0.976 0.006 80);
  --paper-2: oklch(0.945 0.010 80);
  --ink: oklch(0.23 0.018 45);
  --ink-soft: oklch(0.40 0.020 50);
  --rot: oklch(0.505 0.185 27);        /* bright: NUR grosse/fette Display-Akzente (AAA-large) */
  --rot-ink: oklch(0.40 0.16 28);      /* kleiner Rot-Text + Button-Flaeche (AAA 7:1) */
  --rot-deep: oklch(0.33 0.135 28);    /* Button-Hover */
  --korridor: oklch(0.36 0.14 28);     /* getraenkte Rot-Flaeche (weisser Text AAA) */
  --stuetze: oklch(0.55 0.035 235);
  --linie: oklch(0.23 0.018 45 / 0.14);
  --d: "Bricolage","Hanken",system-ui,sans-serif;
  --b: "Hanken",system-ui,-apple-system,sans-serif;
  --step--1: clamp(0.80rem,0.74rem + 0.3vw,0.88rem);
  --step-0: clamp(1.06rem,1.0rem + 0.35vw,1.2rem);
  --step-1: clamp(1.3rem,1.15rem + 0.7vw,1.6rem);
  --step-2: clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3: clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-4: clamp(2.8rem,2.0rem + 4vw,5rem);
  --step-5: clamp(3.4rem,2.2rem + 6vw,7rem);
  --step-6: clamp(4.5rem,2.5rem + 8vw,9.5rem);
  --hero: clamp(2.7rem,1.5rem + 5.4vw,6.4rem);
  --mx: clamp(1.25rem,0.6rem + 3vw,5rem);
  --gap: clamp(2rem,1rem + 3vw,4rem);
  --sec: clamp(5rem,3rem + 8vw,11rem);
}

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--paper); color:var(--ink); font-family:var(--b);
  font-size:var(--step-0); line-height:1.55; font-weight:380; letter-spacing:-0.005em;
  overflow-x:hidden;
  background-image:radial-gradient(120% 80% at 100% 0%, oklch(0.945 0.012 70) 0%, transparent 55%);
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
.wrap { max-width:1320px; margin-inline:auto; padding-inline:var(--mx); position:relative; }
section { padding-block:var(--sec); position:relative; z-index:2; }

body::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.4;
  background-image:url("/assets/grain.png"); background-size:160px 160px;
}

.kicker { font-family:var(--b); font-weight:600; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.22em; color:var(--rot-ink); display:inline-flex; align-items:center; gap:0.7rem; }
.kicker::before { content:""; width:2.2rem; height:2px; background:var(--rot-ink); display:inline-block; }
h1,h2,h3 { font-family:var(--d); font-weight:280; line-height:1.02; letter-spacing:-0.02em; overflow-wrap:break-word; hyphens:auto; }
h2 { font-size:var(--step-4); margin-block:0.6em 0.5em; max-width:18ch; }
h3 { font-size:var(--step-2); font-weight:360; letter-spacing:-0.015em; }
.lead { font-size:var(--step-1); line-height:1.4; max-width:34ch; color:var(--ink-soft); font-weight:360; }
p { max-width:60ch; }
strong,.mk { font-weight:740; letter-spacing:-0.01em; color:var(--ink); }
em { font-style:normal; color:var(--rot); }

.btn { display:inline-flex; align-items:center; gap:0.6rem; background:var(--rot-ink); color:oklch(0.985 0.005 80); font-family:var(--b); font-weight:640; font-size:var(--step-0); padding:0.95rem 1.6rem; border-radius:2px; text-decoration:none; letter-spacing:-0.01em; transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s; min-height:48px; }
.btn:hover { transform:translateY(-2px); background:var(--rot-deep); }
.arr { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr { transform:translateX(5px); }
.btn--ghost { background:transparent; color:var(--ink); border:1.5px solid var(--linie); }
.btn--ghost:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ============ HEADER ============ */
.top { position:sticky; top:0; z-index:100; }
.top::before { content:""; position:absolute; inset:0; background:oklch(0.976 0.006 80 / 0.92); border-bottom:1px solid transparent; opacity:0; }
@supports (animation-timeline: scroll()) {
  .top::before { animation:hdr linear both; animation-timeline:scroll(root); animation-range:40px 160px; }
}
@keyframes hdr { to { opacity:1; border-bottom-color:var(--linie); } }
.top-row { display:flex; align-items:center; justify-content:space-between; padding-block:clamp(1rem,0.7rem + 0.8vw,1.5rem); position:relative; z-index:2; }
.brand { font-family:var(--d); font-weight:760; font-size:var(--step-1); letter-spacing:-0.03em; text-decoration:none; display:inline-flex; align-items:center; }
.brand b { color:var(--rot); font-weight:760; }
.brand .dot { width:0.42rem; height:0.42rem; border-radius:50%; background:var(--rot); display:inline-block; margin-left:0.35rem; margin-bottom:-0.05rem; }

.desk-nav { display:flex; gap:clamp(1.2rem,0.6rem + 1.4vw,2.4rem); align-items:center; }
.desk-nav a { text-decoration:none; font-size:var(--step--1); letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); position:relative; padding-block:0.45rem; }
.desk-nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--rot-ink); transition:right .3s cubic-bezier(.2,.7,.2,1); }
.desk-nav a:not(.nav-cta):hover { color:var(--ink); }
.desk-nav a:not(.nav-cta):hover::after { right:0; }
.nav-cta { color:var(--rot-ink) !important; border:1.5px solid var(--rot-ink); border-radius:2px; padding:0.55rem 1rem !important; display:inline-flex; gap:0.4rem; align-items:center; transition:background .3s,color .3s; }
.nav-cta:hover { background:var(--rot-ink); color:oklch(0.99 0.005 80) !important; }
.nav-cta .arr { font-size:0.9em; }

/* Mobile-Nav (details) - default versteckt, ab <=900 sichtbar */
.m-nav { display:none; }
.m-nav summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.6rem; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--ink); position:relative; z-index:210; padding:0.5rem 0.2rem; min-height:24px; }
.m-nav summary::-webkit-details-marker { display:none; }
.bars, .bars::before, .bars::after { content:""; display:block; width:26px; height:2.5px; background:var(--ink); transition:transform .3s,opacity .2s; }
.bars { position:relative; }
.bars::before { position:absolute; top:-8px; left:0; } .bars::after { position:absolute; top:8px; left:0; }
.m-nav[open] .bars { background:transparent; }
.m-nav[open] .bars::before { transform:translateY(8px) rotate(45deg); }
.m-nav[open] .bars::after { transform:translateY(-8px) rotate(-45deg); }
.m-panel { position:fixed; inset:0; z-index:200; background:var(--paper); padding:clamp(5rem,18vw,7rem) var(--mx) 2.5rem; display:none; flex-direction:column; gap:0.4rem; background-image:radial-gradient(100% 60% at 100% 0%, oklch(0.94 0.014 65), transparent 60%); }
.m-nav[open] .m-panel { display:flex; animation:panelin .35s cubic-bezier(.2,.7,.2,1); }
@keyframes panelin { from { opacity:0; } to { opacity:1; } }
.m-panel nav { display:flex; flex-direction:column; }
.m-panel nav a { font-family:var(--d); font-weight:300; font-size:clamp(2.2rem,11vw,3.2rem); letter-spacing:-0.02em; text-decoration:none; padding:0.5rem 0; border-bottom:1px solid var(--linie); }
.m-panel nav a:active { color:var(--rot-ink); }
.m-panel-cta { margin-top:1.6rem; justify-content:center; font-size:var(--step-1); }
.m-panel-foot { margin-top:auto; padding-top:2rem; display:flex; justify-content:space-between; align-items:center; font-size:var(--step--1); letter-spacing:0.04em; color:var(--ink-soft); }
.m-panel-foot a { font-family:var(--d); font-weight:700; color:var(--rot-ink); text-decoration:none; font-size:var(--step-1); }

/* ============ HERO ============ */
.hero { padding-top:clamp(7rem,5rem + 7vw,11rem); padding-bottom:0; }
.hero-claim { font-family:var(--d); font-weight:240; font-size:var(--hero); line-height:0.99; letter-spacing:-0.035em; margin-block:1.4rem 0; font-variation-settings:"wght" 250; animation:settle 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-claim .pop { font-weight:800; color:var(--rot); font-variation-settings:"wght" 800; }
@keyframes settle { from { transform:translateY(0.28em); } to { transform:none; } }
.hero-bottom { display:flex; gap:var(--gap); align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin-top:2.6rem; }
.hero-bottom .lead { margin:0; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-meta { display:flex; gap:clamp(1.6rem,1rem + 2vw,3.4rem); margin-top:3rem; border-top:1px solid var(--linie); padding-top:1.4rem; flex-wrap:wrap; }
.hero-meta div { display:flex; flex-direction:column; }
.hero-meta b { font-family:var(--d); font-size:var(--step-2); font-weight:760; color:var(--rot); line-height:1; }
.hero-meta span { font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin-top:0.4rem; }
.hero-band { margin-top:clamp(3rem,2rem + 4vw,6rem); position:relative; max-width:1620px; margin-inline:auto; padding-inline:clamp(0rem,-1rem + 2vw,1rem); }
.hero-band img { width:100%; aspect-ratio:16/6.2; object-fit:cover; border-radius:3px; box-shadow:0 24px 50px -40px oklch(0.23 0.018 45 / 0.55); }
.hero-band::after { content:""; position:absolute; left:clamp(0rem,-1rem + 2vw,1rem); right:clamp(0rem,-1rem + 2vw,1rem); bottom:0; height:45%; background:linear-gradient(transparent, oklch(0.18 0.02 40 / 0.62)); border-radius:0 0 3px 3px; pointer-events:none; }
.hero-band figcaption { position:absolute; left:clamp(1.5rem,3vw,3rem); bottom:clamp(1.2rem,3vw,2.4rem); z-index:2; color:oklch(0.99 0.006 80); font-size:var(--step--1); letter-spacing:0.04em; text-shadow:0 2px 14px oklch(0.18 0.02 45 / 0.85); }
.hero-band figcaption span { display:block; font-family:var(--d); font-weight:700; font-size:var(--step-1); text-transform:none; letter-spacing:-0.01em; }

/* ============ KORRIDOR ============ */
.korridor { background:var(--korridor); color:oklch(0.97 0.008 80); border-radius:4px; }
.korridor .kicker, .korridor .kicker::before { color:oklch(0.97 0.008 80); background-color:oklch(0.97 0.008 80); }
.korridor .kicker { background:none; }
.korridor h2 { color:oklch(0.98 0.006 80); max-width:22ch; }
.korridor .lead { color:oklch(0.95 0.02 60); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.5rem; counter-reset:s; }
.step { padding:0 1.6rem; border-left:1px solid oklch(0.97 0.008 80 / 0.30); counter-increment:s; }
.step:first-child { padding-left:0; border-left:0; }
.step .num::before { content:"0" counter(s); font-family:var(--d); font-weight:800; font-size:var(--step-4); line-height:1; opacity:0.96; }
.step h3 { color:oklch(0.98 0.006 80); margin-top:0.7rem; font-size:var(--step-1); font-weight:600; }
.step p { color:oklch(0.95 0.02 60); font-size:var(--step-0); margin-top:0.55rem; max-width:26ch; }
.faden { height:3px; background:oklch(0.97 0.008 80 / 0.3); margin-top:3.5rem; position:relative; overflow:hidden; }
.faden::after { content:""; position:absolute; inset:0; background:oklch(0.98 0.006 80); transform:scaleX(0); transform-origin:left; }
@supports (animation-timeline: view()) { .faden::after { animation:grow linear both; animation-timeline:view(); animation-range:entry 10% cover 55%; } }
@keyframes grow { to { transform:scaleX(1); } }

/* ============ PRODUKTWELTEN ============ */
.welten { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:3.5rem; }
.welt { display:flex; flex-direction:column; }
.welt-head { aspect-ratio:4/3; border-radius:3px; overflow:hidden; position:relative; display:grid; place-items:end start; padding:1.4rem; }
.welt--a .welt-head { background:linear-gradient(135deg, oklch(0.94 0.012 70), oklch(0.90 0.018 65)); }
.welt--c .welt-head { background:linear-gradient(135deg, oklch(0.58 0.035 235 / 0.22), oklch(0.55 0.04 250 / 0.30)); }
.welt-foto { padding:0; }
.welt-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.welt-ix { font-family:var(--d); font-weight:800; font-size:var(--step-3); line-height:1; color:var(--ink); position:relative; z-index:2; }
.welt-foto .welt-ix { color:oklch(0.99 0.005 80); text-shadow:0 2px 12px oklch(0.18 0.02 45 / 0.8); }
.welt h3 { margin-top:1.3rem; }
.welt p { color:var(--ink-soft); margin-top:0.5rem; font-size:var(--step-0); }

/* ============ NUTZEN ============ */
.nutzen { background:var(--ink); color:var(--paper); border-radius:4px; }
.nutzen .kicker, .nutzen .kicker::before { color:oklch(0.82 0.10 50); background-color:oklch(0.82 0.10 50); }
.nutzen .kicker { background:none; }
.nutzen h2 { color:var(--paper); max-width:24ch; }
.nutzen .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:3rem; }
.nutzen .grid3 p { color:oklch(0.88 0.01 80); }
.nutzen .grid3 b { display:block; font-family:var(--d); font-weight:700; font-size:var(--step-2); color:var(--paper); margin-bottom:0.5rem; }

/* ============ MENSCH ============ */
.mensch-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; }
.mensch-img { border-radius:3px; overflow:hidden; box-shadow:0 18px 40px -28px oklch(0.23 0.018 45 / 0.45); }
.mensch-img img { aspect-ratio:5/4; object-fit:cover; width:100%; }
.jahr { font-family:var(--d); font-weight:800; color:var(--rot); font-size:var(--step-2); margin-top:1rem; }

/* ============ STIMMEN ============ */
.stimmen .rate { display:flex; align-items:baseline; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.stimmen .rate b { font-family:var(--d); font-weight:800; font-size:var(--step-6); color:var(--rot); line-height:0.92; }
.stimmen .sterne { color:var(--rot); font-size:var(--step-2); letter-spacing:0.1em; }
.stimmen .rate-n { color:var(--ink-soft); }
.zitate { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:3rem; }
.zitat { border-top:2px solid var(--rot-ink); padding-top:1.6rem; }
.zitat blockquote { font-family:var(--d); font-weight:300; font-size:var(--step-2); line-height:1.2; letter-spacing:-0.015em; color:var(--ink); }
.zitat cite { display:block; margin-top:1.2rem; font-style:normal; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); }

/* ============ KONTAKT ============ */
.kontakt .big { font-family:var(--d); font-weight:240; font-size:var(--step-5); line-height:1.0; max-width:16ch; letter-spacing:-0.03em; }
.kontakt .big em { font-weight:800; }
.kontakt .hero-cta { margin-top:2rem; }
.napwrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:3rem; border-top:1px solid var(--linie); padding-top:2rem; }
.nap a { text-decoration:none; }
.nap .row { display:block; font-size:var(--step-1); margin-bottom:0.6rem; }
.nap a.row:hover { color:var(--rot-ink); }
.nap .lbl { font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-soft); display:block; margin-bottom:0.6rem; }

footer { border-top:1px solid var(--linie); }
footer .wrap { display:flex; justify-content:space-between; padding-block:2.4rem; font-size:var(--step--1); color:var(--ink-soft); flex-wrap:wrap; gap:1rem 2rem; align-items:baseline; }
footer .foot-links { display:flex; gap:0.4rem 1.4rem; flex-wrap:wrap; }
footer a { display:inline-block; padding:0.4rem 0.1rem; text-decoration:underline; text-underline-offset:3px; min-height:24px; }
footer a:hover { color:var(--ink); }

/* ============ RECHTS-SEITEN (Impressum/Datenschutz) ============ */
.legal { padding-top:clamp(7rem,5rem + 7vw,10rem); max-width:760px; }
.legal h1 { font-size:var(--step-4); margin-block:1rem 0.4rem; }
.legal h2 { font-size:var(--step-2); max-width:none; margin-block:2.2rem 0.6rem; }
.legal p, .legal address { font-size:var(--step-0); color:var(--ink-soft); margin-bottom:0.9rem; max-width:64ch; font-style:normal; }
.legal p strong { color:var(--ink); }
.legal a { color:var(--rot-ink); text-decoration:underline; text-underline-offset:3px; }
.legal-kontakt { margin:1.4rem 0 0.9rem; }
.legal-kontakt p { margin-bottom:0.6rem; }
.legal-kontakt a { display:inline-block; padding:0.35rem 0.1rem; }
.legal .zurueck { display:inline-block; margin-top:2.5rem; font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); text-decoration:none; padding:0.3rem 0; }
.legal dl { margin:0 0 0.9rem; }
.legal dt { font-weight:740; color:var(--ink); font-size:var(--step-0); margin-top:0.8rem; }
.legal dd { margin:0; color:var(--ink-soft); font-size:var(--step-0); }

/* ============ 404 ============ */
.nf { min-height:80vh; display:grid; place-items:center; text-align:center; }
.nf .kicker { justify-content:center; }
.nf h1 { font-size:var(--step-4); margin-block:1rem 0.6rem; max-width:14ch; }
.nf p { margin:0 auto 1.6rem; max-width:40ch; color:var(--ink-soft); }
.nf .tel { margin-top:1.6rem; font-size:var(--step--1); }
.nf .tel a { color:var(--rot-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:0.3rem 0.1rem; }

/* ============ REVEALS ============ */
/* Bewusst statisch: scroll-getriebene Per-Sektion-Reveals kosteten ~0.9s styleLayout auf
   Mobil (LH-Befund) und drueckten Perf unter 90. Die Signatur-Motion bleibt: Hero-Settle,
   der Korridor-Faden als Scroll-Fortschritt und die Hover-Crafts. */
.reveal { opacity:1; }
.hero-claim, .kontakt .big { overflow-wrap:break-word; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px) {
  .desk-nav { display:none; }
  .m-nav { display:block; }
  .hero-bottom { flex-direction:column; align-items:flex-start; }
  .steps { grid-template-columns:1fr 1fr; gap:2.4rem 1.4rem; }
  .welten, .nutzen .grid3, .mensch-grid, .zitate, .napwrap { grid-template-columns:1fr; }
  .hero-band img { aspect-ratio:3/2.4; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}