/* KAYKU Dachmarken-Seite — gepinnte Welt: dunkel, ruhig, edel; Manrope;
   Markenfarben nur bei den Marken. Signatur: der Vierfarb-Strand der Gruppe. */
@font-face{font-family:'Manrope';src:url('fonts/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --bg:#0b0c0f;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --text:#eceae5; --muted:#a6a6ae; --dim:#84848d;
  --mkm:#ea4d00; --moes:#c9673d; --gut:#ff5b4d; --igvs:#5f8fc0;
  --maxw:1120px;
  --ease:cubic-bezier(.19,1,.22,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-color:#34363e var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Manrope','Helvetica Neue',Arial,sans-serif;
  font-size:16.5px;line-height:1.65;letter-spacing:.004em;-webkit-font-smoothing:antialiased}
::selection{background:rgba(234,77,0,.4);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4.5vw,48px)}

/* ── Kopf ── */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.wordmark{font-weight:800;font-size:1rem;letter-spacing:.44em;text-indent:.44em;transition:color 160ms var(--ease)}
.wordmark:hover{color:#fff}
.mailtop{font-size:.88rem;color:var(--muted);border:1px solid var(--line);padding:.5rem 1.05rem;border-radius:99px;
  transition:color 160ms var(--ease),border-color 160ms var(--ease),transform 160ms var(--ease)}
.mailtop:hover{color:var(--text);border-color:var(--line-2)}
.mailtop:active{transform:scale(.97)}

/* ── Held ── */
.hero{padding:clamp(78px,12vw,150px) 0 clamp(30px,4vw,44px)}
h1{margin:0;font-weight:800;font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1.06;
  letter-spacing:-.025em;text-wrap:balance;max-width:27ch}
h1 .leise{color:var(--dim)}
.hero .stand{margin:1.6rem 0 0;color:var(--muted);max-width:56ch;font-size:1.08rem;text-wrap:pretty}
.hero .stand b{color:var(--text);font-weight:600}
.ort{margin-top:2.6rem;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--dim);font-size:.9rem}
.ort b{color:var(--muted);font-weight:600}

/* Signatur: der Strand der Gruppe — vier Ströme, eine Schiene */
.strand{display:grid;grid-template-columns:repeat(4,1fr);height:3px;margin-top:14px}
.strand i{display:block;transform-origin:left center}
.strand i:nth-child(1){background:var(--mkm)}
.strand i:nth-child(2){background:var(--moes)}
.strand i:nth-child(3){background:var(--gut)}
.strand i:nth-child(4){background:var(--igvs)}
.js .strand i{transform:scaleX(0)}
.js .strand.an i{transform:scaleX(1);transition:transform 800ms var(--ease)}
.js .strand.an i:nth-child(2){transition-delay:110ms}
.js .strand.an i:nth-child(3){transition-delay:220ms}
.js .strand.an i:nth-child(4){transition-delay:330ms}

/* ── Marken-Register ── */
.register{padding:clamp(10px,2vw,26px) 0 clamp(36px,5vw,64px)}
.zeile{position:relative;display:grid;grid-template-columns:minmax(320px,.78fr) 1.22fr auto;
  gap:clamp(18px,3vw,44px);align-items:center;
  padding:clamp(26px,3.4vw,40px) clamp(10px,1.4vw,18px);
  border-top:1px solid var(--line);
  transition:background 200ms var(--ease)}
.register .zeile:last-of-type{border-bottom:1px solid var(--line)}
.zeile:hover{background:color-mix(in srgb,var(--akzent) 6%,transparent)}
.zeile .name{display:flex;flex-direction:column;gap:9px}
.zeile .marke{margin:0;font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;
  transition:color 200ms var(--ease)}
.zeile:hover .marke{color:var(--akzent)}
.zeile .mark{width:52px;height:3px;background:var(--akzent);transform:scaleX(.5);transform-origin:left center;transition:transform 240ms var(--ease)}
.zeile:hover .mark{transform:scaleX(1)}
.zeile p{margin:0;color:var(--muted);font-size:.98rem;max-width:46ch;text-wrap:pretty}
.zeile .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;white-space:nowrap}
.zeile .meta small{color:var(--dim);font-size:.85rem}
.zeile .meta small b{color:var(--muted);font-weight:600}
.zeile .ziel{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:var(--akzent)}
.zeile .ziel svg{width:15px;height:15px;transition:transform 200ms var(--ease)}
.zeile:hover .ziel svg{transform:translateX(4px)}
.zeile:active{transform:none}
.zeile:active .marke{opacity:.85}
a.zeile::after{content:"";position:absolute;inset:0}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;
  color:color-mix(in srgb,var(--akzent) 72%,white);
  border:1px solid color-mix(in srgb,var(--akzent) 45%,transparent);
  background:color-mix(in srgb,var(--akzent) 10%,transparent);border-radius:99px;padding:.18rem .68rem}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--akzent) 72%,white)}

/* Locker-Zeile: gleiche Struktur, gedimmt, kein Link */
.zeile.bald{--akzent:#3c3e46;cursor:default}
.zeile.bald:hover{background:transparent}
.zeile.bald .marke,.zeile.bald:hover .marke{color:var(--dim)}
.zeile.bald p{color:var(--dim)}
.zeile.bald .mark{background:#3c3e46}
.zeile.bald:hover .mark{transform:scaleX(.5)}
/* Locker-Zeile aktiv: eigenes Produkt, Slate als stiller Strom */
.zeile.locker-aktiv{--akzent:#3c3e46}
.zeile.locker-aktiv:hover{background:color-mix(in srgb,var(--akzent) 6%,transparent)}
.zeile.locker-aktiv:hover .marke{color:var(--text)}
.zeile.locker-aktiv .ziel{color:var(--muted)}
.tag{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:.34rem .9rem}

/* ── Fakten ── */
.fakten{padding:clamp(30px,4.5vw,54px) 0 clamp(40px,6vw,70px)}
.fakten dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin:0}
.fakten dt{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fakten dd{margin:.45rem 0 0;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.95rem;line-height:1.55}
.fakten dd b{color:var(--text);font-weight:600}
.fakten dd a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;
  transition:text-decoration-color 160ms var(--ease)}
.fakten dd a:hover{text-decoration-color:var(--text)}

/* ── Fuß ── */
footer{border-top:1px solid var(--line);padding:26px 0 36px;font-size:.88rem;color:var(--dim);font-variant-numeric:tabular-nums}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:color 160ms var(--ease),text-decoration-color 160ms var(--ease)}
footer a:hover{color:var(--text);text-decoration-color:var(--line-2)}
footer nav{display:flex;gap:20px}

/* ── Rechtsseiten ── */
.recht{padding:clamp(48px,7vw,84px) 0}
.recht h1{font-size:clamp(1.8rem,4vw,2.5rem);max-width:none}
.recht h2{margin:2.3em 0 .5em;font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.recht p{color:var(--muted);max-width:70ch}
.recht b{color:var(--text)}
.recht a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.recht a:hover{text-decoration-color:var(--text)}
.zurueck{display:inline-block;margin-bottom:30px;color:var(--dim);font-size:.9rem;transition:color 160ms var(--ease)}
.zurueck:hover{color:var(--text)}

/* ── Einblendung (eine Grammatik: von unten, expo-out, gestaffelt) ── */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.an{opacity:1;transform:none;transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .strand i{opacity:1;transform:none;transition:none}
}

/* ── Schöner-Ausbau (Nutzerwunsch 26.09.): Lichtband, Registerziffern, Locker-Miniatur ── */
.hero{position:relative}
.hero .wrap{position:relative}
.lichtband{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38% 30% at 82% 18%, color-mix(in srgb,var(--mkm) 26%,transparent), transparent 70%),
    radial-gradient(30% 26% at 92% 44%, color-mix(in srgb,var(--moes) 22%,transparent), transparent 70%),
    radial-gradient(30% 26% at 80% 68%, color-mix(in srgb,var(--gut) 20%,transparent), transparent 70%),
    radial-gradient(34% 28% at 90% 88%, color-mix(in srgb,var(--igvs) 22%,transparent), transparent 70%)}
.znr{display:block;color:var(--dim);font-size:.72rem;font-weight:600;letter-spacing:.22em;font-variant-numeric:tabular-nums;margin-bottom:2px}
.zeile:hover .znr{color:color-mix(in srgb,var(--akzent) 70%,var(--dim))}
/* 3D-Locker-Miniatur in der Produktzeile */
@media (min-width:1024px){
  .zeile.locker-aktiv{grid-template-columns:minmax(230px,.55fr) 1.45fr auto auto}
  .zeile.locker-aktiv p{max-width:38ch}
}
.zeilen-locker{position:relative;display:block;width:148px;height:158px;perspective:900px;pointer-events:none}
.zeilen-locker .mini-dreher{position:absolute;left:50%;top:50%;display:block;}
.zeilen-locker .pendel{display:block}
.zeilen-locker .mini-dreher{
  transform:translate(-50%,-47%) scale(.29) rotateX(6deg) rotateY(-24deg);transform-style:preserve-3d}
.zeilen-locker .pendel,.zeilen-locker .schrank,.zeilen-locker .saeule,.zeilen-locker .fachraster,
.zeilen-locker .fach,.zeilen-locker .klappe,.zeilen-locker .logo-platte,.zeilen-locker .display,
.zeilen-locker .scanner,.zeilen-locker .tuer,.zeilen-locker .innen{cursor:inherit}
.zeilen-locker .schatten{position:absolute;left:50%;bottom:6px;width:120px;height:16px;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%)}

@media (max-width:1023px){
  .zeile{grid-template-columns:minmax(240px,.7fr) 1.3fr auto}
  .zeile .meta{white-space:normal}
  .zeile .meta small{text-wrap:balance}
  .zeile.locker-aktiv{grid-template-columns:1fr;gap:12px;align-items:start}
  .zeilen-locker{width:210px;height:212px;margin:8px auto 2px}
  .zeilen-locker .mini-dreher{transform:translate(-50%,-47%) scale(.41) rotateX(6deg) rotateY(-24deg)}
  .zeilen-locker .schatten{width:170px;height:20px}
}

/* ── Schmal ── */
@media (max-width:860px){
  .zeile,.zeile.locker-aktiv{grid-template-columns:1fr;gap:12px;align-items:start;padding-block:24px}
  .lichtband{opacity:.4}
  .zeile p{max-width:60ch}
  .zeile .meta{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;text-align:left;white-space:normal;flex-wrap:wrap}
  .fakten dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:440px){
  .fakten dl{grid-template-columns:1fr}
  header .wrap{height:60px}
  .mailtop{font-size:.8rem;padding:.42rem .85rem}
}