/* ============================================================
   KÜHLERBAU KOWALLA — editorial / hanzo-style redesign
   Cream base · black + spark-orange accent · dark imagery pops
   ============================================================ */

:root{
  --cream:#0b0a08;          /* page background (dark) */
  --cream-2:#13110d;
  --paper:#15130e;          /* card */
  --paper-2:#1c1914;        /* elevated card / pill */
  --ink:#f2efe8;            /* primary text (light) */
  --ink-2:#b7b1a6;          /* secondary text */
  --muted:#8c867b;
  --muted-2:#5f594e;        /* dim — soft headline word / scroll-highlight off */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);

  --accent:#ff5a1f;
  --accent-2:#ff8a4f;
  --accent-soft:rgba(255,90,31,.16);

  --black:#0e0c0a;
  --black-2:#15130e;
  --on-dark:#f3f1ec;
  --on-dark-2:#b7b2a8;

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --container:1320px;
  --gutter:clamp(20px,4vw,64px);

  --font-display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:"Inter", system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --header-h:80px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow-md:0 24px 50px -22px rgba(0,0,0,.75), 0 8px 18px -10px rgba(0,0,0,.55);
  --shadow-lg:0 60px 110px -44px rgba(0,0,0,.9), 0 22px 44px -20px rgba(0,0,0,.65);
  --shadow-pill:0 12px 30px -10px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font-body);background:var(--cream);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* soft light rays + grain */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.55) 0%,transparent 22%),
    linear-gradient(155deg,rgba(255,255,255,.4) 6%,transparent 30%),
    radial-gradient(120% 80% at 85% -5%,rgba(255,255,255,.5),transparent 55%);
  mix-blend-mode:soft-light}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}
.section{padding-block:clamp(70px,10vw,150px);position:relative;z-index:1}
.section--tight{padding-block:clamp(48px,6vw,90px)}
section[id],[id]{scroll-margin-top:96px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:680;line-height:1.0;letter-spacing:-.025em;color:var(--ink)}
.display{font-size:clamp(2.9rem,8.2vw,6.4rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.h2{font-size:clamp(2.1rem,5vw,4rem);font-weight:680;letter-spacing:-.035em;line-height:1.0}
.h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);color:var(--ink-2);line-height:1.5}
p{color:var(--ink-2)}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400}
.kicker{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-serif);font-style:italic;font-size:1.25rem;color:var(--muted)}
.kicker::before,.kicker::after{content:"";width:34px;height:1px;background:var(--line-2)}
.kicker--left::before{display:none}
.section-head{max-width:780px;margin-bottom:clamp(40px,5vw,68px)}
.section-head.center{margin-inline:auto;text-align:center}
.muted-strong{color:var(--muted-2)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.05em 1.7em;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);will-change:transform}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform .3s var(--ease)}
.btn--dark{background:var(--black);color:var(--on-dark);box-shadow:var(--shadow-pill),inset 0 1px 0 rgba(255,255,255,.14)}
.btn--dark:hover{box-shadow:0 16px 36px -12px rgba(14,13,11,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--dark:hover svg{transform:translateX(3px)}
.btn--light{background:var(--paper-2);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.btn--light:hover{box-shadow:var(--shadow-md)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 12px 28px -10px rgba(255,90,31,.55)}
.btn--accent:hover svg{transform:translateX(3px)}
.btn--lg{font-size:1.08rem;padding:1.2em 2.1em}
.btn--block{display:flex;width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink)}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:.55em;padding:.5em .95em;border-radius:var(--r-pill);
  background:var(--paper-2);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.6);font-size:.85rem;font-weight:600;color:var(--ink)}
.pill svg,.pill .ic{width:1.15em;height:1.15em;color:var(--accent)}
.pill .ic{display:inline-flex;border-radius:7px;overflow:hidden}
.badge{display:inline-flex;align-items:center;gap:.55em;padding:.5em 1.05em;border-radius:var(--r-pill);
  background:var(--paper-2);box-shadow:var(--shadow-sm);font-size:.84rem;font-weight:600;color:var(--ink)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* media chip (inline in headline) */
/* Groesser als vorher: bei .94em waren die Chips rund 110 px breit, und das
   geschweisste Kuehlereck darin war nur noch ein dunkler Fleck. Die Bilder
   sind jetzt zusaetzlich enger auf das Motiv geschnitten. */
.chip-media{display:inline-flex;vertical-align:middle;width:1.12em;height:.93em;border-radius:.18em;overflow:hidden;
  box-shadow:var(--shadow-md);margin:0 .12em;transform:rotate(-3deg);background:var(--black)}
.chip-media img{width:100%;height:100%;object-fit:cover}
.chip-media--dark{background:var(--black);display:inline-flex;align-items:center;justify-content:center}
.chip-media--dark svg{width:60%;height:60%}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor.is-hover{width:64px;height:64px;background:rgba(255,255,255,.1)}
.cursor.is-label{width:84px;height:84px;background:#fff;mix-blend-mode:normal;border-color:transparent}
.cursor__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--black);opacity:0;transition:opacity .3s}
.cursor.is-label .cursor__label{opacity:1}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none!important}body.has-cursor{cursor:auto}}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;z-index:80;padding-top:18px;transition:transform .35s var(--ease)}
.header.is-hidden{transform:translateY(-130%)}
.header__inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.brand-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--r-pill);background:var(--paper-2);box-shadow:var(--shadow-sm);transition:box-shadow .3s,transform .3s var(--ease)}
.brand-pill:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.brand-pill__mark{width:24px;height:24px;flex:none}
.brand-pill__name{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--ink)}
.brand-pill__name b{color:var(--ink)} .brand-pill__name span{color:var(--muted);font-weight:600}
.menu-btn{width:54px;height:54px;border-radius:50%;background:var(--paper-2);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;transition:box-shadow .3s,transform .3s var(--ease)}
.menu-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.menu-btn span{position:relative;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
body.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}

/* fullscreen menu */
.menu{position:fixed;inset:0;z-index:75;background:var(--black);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;padding:var(--header-h) var(--gutter) 40px;
  clip-path:circle(0% at calc(100% - 50px) 50px);transition:clip-path .7s var(--ease-out);visibility:hidden}
body.menu-open .menu{clip-path:circle(150% at calc(100% - 50px) 50px);visibility:visible}
.menu__nav{display:flex;flex-direction:column;gap:6px;max-width:var(--container);margin-inline:auto;width:100%}
.menu__nav a{font-family:var(--font-display);font-weight:680;font-size:clamp(2.4rem,8vw,5.5rem);letter-spacing:-.03em;color:var(--on-dark);
  line-height:1.05;padding:.06em 0;display:flex;align-items:center;gap:.4em;transition:color .3s;opacity:0;transform:translateY(40px)}
body.menu-open .menu__nav a{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s}
body.menu-open .menu__nav a:nth-child(1){transition-delay:.15s}
body.menu-open .menu__nav a:nth-child(2){transition-delay:.22s}
body.menu-open .menu__nav a:nth-child(3){transition-delay:.29s}
body.menu-open .menu__nav a:nth-child(4){transition-delay:.36s}
body.menu-open .menu__nav a:nth-child(5){transition-delay:.43s}
.menu__nav a:hover{color:var(--accent)}
.menu__nav a .n{font-family:var(--font-serif);font-style:italic;font-size:.3em;color:var(--muted)}
.menu__foot{max-width:var(--container);margin:48px auto 0;width:100%;display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;color:var(--on-dark-2);font-size:.92rem;opacity:0;transition:opacity .6s .5s}
body.menu-open .menu__foot{opacity:1}
.menu__foot a{color:var(--on-dark)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--header-h) + 30px);padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.hero__inner{text-align:center;max-width:1180px;margin-inline:auto}
/* line-height .95 aus .display reicht fuer die Chips nicht: der zweite lag
   sichtbar AUF den Buchstaben von KOMPROMISSLOS. Mehr Durchschuss nur hier,
   damit andere Display-Ueberschriften eng bleiben. */
.hero h1{margin:.4em auto .5em;max-width:14ch;line-height:1.08}
.hero h1 .soft{color:var(--muted-2)}
.hero__sub{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--ink-2);max-width:42ch;margin:0 auto 2em}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-bottom:1.6em}
.hero__trust{display:inline-flex;align-items:center;gap:12px;font-size:.92rem;color:var(--muted)}
.hero__avatars{display:flex}
.hero__avatars span{width:30px;height:30px;border-radius:50%;border:2px solid var(--cream);margin-left:-9px;background-size:cover;background-position:center;box-shadow:var(--shadow-sm)}
.hero__avatars span:first-child{margin-left:0}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px}
.marquee__track{display:flex;gap:42px;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.marquee__track i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   SCROLL-HIGHLIGHT (about / quotes)
   ============================================================ */
.reveal-text{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(1.6rem,3.6vw,3rem)}
.reveal-text .w{color:var(--muted-2);transition:color .25s var(--ease)}
.reveal-text .w.on{color:var(--ink)}
html.nomotion .reveal-text .w{color:var(--ink)}

.about{position:relative}
.about__wrap{max-width:1000px;margin-inline:auto;text-align:center;position:relative}
.floaty{position:absolute;z-index:2}
.floaty .pill{animation:float 6s var(--ease) infinite}
.floaty:nth-child(2) .pill{animation-delay:-2s}
.floaty:nth-child(3) .pill{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
html.nomotion .floaty .pill{animation:none}

/* ============================================================
   CAPABILITIES (feature list, hanzo why-us style)
   ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,64px)}
.feat{display:flex;gap:14px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.feat__ic{width:30px;height:30px;flex:none;color:var(--accent);margin-top:2px}
.feat__ic svg{width:100%;height:100%}
.feat b{display:block;font-family:var(--font-display);font-weight:680;font-size:1.18rem;color:var(--ink);margin-bottom:.25em;letter-spacing:-.01em}
.feat span{font-size:.96rem;color:var(--ink-2);line-height:1.5}

/* ============================================================
   HOW IT WORKS (tilted cards)
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);position:relative}
.stepcard{position:relative;background:var(--paper-2);border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  padding:26px 24px 28px;min-height:300px;display:flex;flex-direction:column}
.stepcard:nth-child(odd){transform:rotate(-1.6deg)}
.stepcard:nth-child(even){transform:rotate(1.4deg) translateY(14px)}
.stepcard__n{font-family:var(--font-display);font-weight:700;font-size:3.4rem;letter-spacing:-.04em;color:var(--ink);line-height:1}
.stepcard h3{margin-top:auto;font-size:1.35rem;margin-bottom:.35em}
.stepcard p{font-size:.95rem;color:var(--muted)}
.stepcard__arrow{position:absolute;color:var(--accent);z-index:2;width:42px;height:42px}
html.nomotion .stepcard{transform:none!important}
@media (max-width:900px){.stepcard{transform:none!important}}

/* ============================================================
   WORK / Referenz grid
   ============================================================ */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.work{position:relative;cursor:pointer}
.work__media{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--black);box-shadow:var(--shadow-md)}
.work__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover .work__media img{transform:scale(1.05)}
.work__top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.work__tags{display:flex;gap:8px;flex-wrap:wrap}
.work__tag{font-size:.76rem;font-weight:600;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:.35em .8em;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2)}
.work__foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding:0 4px}
.work__foot b{font-family:var(--font-display);font-weight:680;font-size:1.4rem;color:var(--ink);letter-spacing:-.02em}
.work__foot span{font-size:.92rem;color:var(--muted)}

/* ============================================================
   CASE STUDY band (dark)
   ============================================================ */
.case{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--black);color:var(--on-dark);box-shadow:var(--shadow-lg)}
.case__media{position:absolute;inset:0;z-index:0}
.case__media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.case__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 8%,rgba(14,13,11,.6) 55%,rgba(14,13,11,.25) 100%)}
.case__body{position:relative;z-index:2;padding:clamp(34px,5vw,76px);max-width:680px}
.case__body .h2{color:#fff;margin:.3em 0 .55em}
.case__body p{color:var(--on-dark-2)}
.case__body .lead{color:var(--on-dark)}
.case__quote{margin-top:26px;padding-left:20px;border-left:3px solid var(--accent);font-family:var(--font-display);font-size:1.25rem;color:#fff;line-height:1.35;font-weight:600}
.case__tag{display:inline-flex;gap:.5em;align-items:center;font-family:var(--font-serif);font-style:italic;font-size:1.15rem;color:var(--accent-2)}

/* ============================================================
   QUOTES
   ============================================================ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.quote{position:relative}
.quote__mark{font-family:var(--font-serif);font-size:4rem;line-height:.6;color:var(--line-2)}
.quote__body{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.32;color:var(--ink);margin:.2em 0 1.2em}
.quote__by{display:flex;align-items:center;gap:13px}
.quote__av{width:46px;height:46px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);flex:none}
.quote__by b{display:block;font-family:var(--font-display);font-weight:680;color:var(--ink);font-size:1rem}
.quote__by span{font-size:.88rem;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:start}
.faq-card{background:var(--paper-2);border-radius:var(--r-xl);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-md)}
.faq-card__top{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.faq-card__av{width:54px;height:54px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex:none}
.faq-card__top b{font-family:var(--font-display);font-weight:680;font-size:1.2rem;color:var(--ink);line-height:1.2}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;padding:22px 4px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink)}
.faq-q .ic{width:24px;height:24px;flex:none;color:var(--accent);transition:transform .35s var(--ease)}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 4px 22px;color:var(--ink-2);max-width:60ch}

/* ============================================================
   LET'S CONNECT (dark)
   ============================================================ */
.connect{position:relative;background:var(--black);color:var(--on-dark);overflow:hidden}
.connect::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 30%),radial-gradient(80% 60% at 80% 0%,rgba(255,90,31,.12),transparent 60%)}
.connect__inner{position:relative;z-index:2;text-align:center;padding-block:clamp(80px,12vw,170px)}
.connect .kicker{color:var(--on-dark-2)}.connect .kicker::before,.connect .kicker::after{background:rgba(255,255,255,.2)}
.connect h2{color:#fff;font-size:clamp(3rem,10vw,8rem);letter-spacing:-.04em;margin:.18em 0 .35em}
.connect h2 .soft{color:#5a564e}
.connect__sub{color:var(--on-dark-2);font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:42ch;margin:0 auto 2.2em}
.connect__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* connect primary CTA = bright white pill (clearly visible on dark) + soft glow */
.connect .btn--dark{box-shadow:var(--shadow-pill),inset 0 1px 0 rgba(255,255,255,.5),0 0 36px -6px rgba(255,255,255,.28)}
.connect .btn--dark:hover{box-shadow:0 18px 40px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6),0 0 44px -4px rgba(255,255,255,.4)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:var(--on-dark-2);border-top:1px solid rgba(255,255,255,.08)}
.footer__inner{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-block:30px}
.footer__links{display:flex;gap:8px}
.footer__links a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:var(--on-dark);transition:background .3s,border-color .3s}
.footer__links a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.footer__links a svg{width:18px;height:18px}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.footer__legal a:hover{color:#fff}

/* ============================================================
   CONTACT FORM (inside modal + connect)
   ============================================================ */
.form-card{background:var(--paper-2);border-radius:var(--r-xl);padding:clamp(24px,3.2vw,40px);box-shadow:var(--shadow-lg);text-align:left}
.form-card h3{font-size:1.5rem;margin-bottom:.2em}
.form-card .sub{color:var(--muted);margin-bottom:22px;font-size:.95rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.88rem;color:var(--ink)}
.field label .opt{color:var(--muted);font-weight:500;font-size:.85em}
.field label .req{color:var(--accent)}
.field input,.field textarea{width:100%;padding:.85em 1em;border-radius:var(--r-sm);border:1px solid var(--line-2);background:#fff;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:116px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field.invalid input,.field.invalid textarea{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field__err{font-size:.8rem;color:#dc2626;font-weight:600;display:none}
.field.invalid .field__err{display:block}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px;display:flex;gap:.5em;align-items:flex-start}
.form-note svg{width:1.05em;height:1.05em;flex:none;margin-top:.16em;color:var(--accent)}
.form-success{display:none;text-align:center;padding:26px 8px}
.form-success.show{display:block;animation:popin .5s var(--ease-out)}
.form-success .ok{width:70px;height:70px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success .ok svg{width:34px;height:34px}
@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ============================================================
   MODAL
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(14,13,11,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.modal.is-open .modal__backdrop{opacity:1}
.modal__dialog{position:relative;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;border-radius:var(--r-xl);
  transform:translateY(20px) scale(.97);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.modal.is-open .modal__dialog{transform:none;opacity:1}
.modal__close{position:absolute;top:16px;right:16px;z-index:3;width:42px;height:42px;border-radius:50%;background:var(--cream);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .25s,background .25s}
.modal__close:hover{transform:rotate(90deg);background:var(--cream-2)}
.modal__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.modal__slot .form-card{width:100%}
body.modal-open{overflow:hidden}
@media (max-width:560px){.modal{padding:0;align-items:stretch}.modal__dialog{max-width:none;max-height:100vh;border-radius:0}.modal__slot .form-card{border-radius:0;min-height:100vh}}

/* ============================================================
   REVEALS
   ============================================================ */
.is-js [data-reveal]{opacity:0;transform:translateY(46px)}
.is-js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.is-js [data-reveal-stagger]>*{opacity:0;transform:translateY(46px)}
.is-js [data-reveal-stagger].is-in>*{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.is-js [data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.08s}
.is-js [data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.16s}
.is-js [data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.24s}
.is-js [data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.32s}
.is-js [data-reveal-stagger].is-in>*:nth-child(6){transition-delay:.4s}
.is-js [data-reveal-img]{overflow:hidden}
.is-js [data-reveal-img] img{transform:scale(1.16);transition:transform 1.4s var(--ease-out)}
.is-js [data-reveal-img].is-in img{transform:scale(1)}
html.nomotion [data-reveal],html.nomotion [data-reveal-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
html.nomotion [data-reveal-img] img{transform:none!important}
html.nomotion .marquee__track{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .marquee__track,.floaty .pill{animation:none!important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  [data-reveal-img] img{transform:none!important}
  .reveal-text .w{color:var(--ink)!important}
}

/* ============================================================
   LEGAL
   ============================================================ */
.legal-top{position:sticky;top:0;z-index:50;background:rgba(235,232,226,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.legal-top .container{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.legal-wrap{max-width:820px;margin-inline:auto;padding:clamp(40px,7vw,80px) var(--gutter) clamp(56px,8vw,96px)}
.legal-wrap h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.6em}
.legal-wrap h2{font-size:1.25rem;margin:2em 0 .5em}
.legal-wrap p,.legal-wrap li{color:var(--ink-2);margin-bottom:.7em}
.legal-wrap a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-wrap address{font-style:normal;line-height:1.8}
.legal-wrap .muted{color:var(--muted);font-size:.9rem}
.legal-flag{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;font-size:.9rem;color:var(--ink-2)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:30px}
  .faq{grid-template-columns:1fr}
}
@media (max-width:760px){
  .quotes{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__inner{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .chip-media{width:1.3em;height:1.08em}
}

/* ============================================================
   DARK THEME TREATMENTS (badass) — re-skin components for dark
   ============================================================ */
body::before{background:
    radial-gradient(120% 80% at 84% -10%,rgba(255,138,79,.12),transparent 55%),
    radial-gradient(90% 60% at 4% -4%,rgba(255,255,255,.06),transparent 52%);
  mix-blend-mode:screen}
body::after{opacity:.35;mix-blend-mode:overlay}

/* buttons */
.btn--dark{background:var(--ink);color:#15120d;box-shadow:var(--shadow-pill),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--dark:hover{box-shadow:0 18px 38px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--light{background:rgba(255,255,255,.045);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--light:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--ink)}

/* pills, badges, header pills */
.pill,.badge{border:1px solid var(--line)}
.brand-pill,.menu-btn{border:1px solid var(--line)}
.brand-pill:hover,.menu-btn:hover{border-color:var(--line-2)}

/* inline media chips pop on dark */
.chip-media{border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 34px -10px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4)}

/* cards get a hairline so they read on dark */
.stepcard,.faq-card,.form-card{border:1px solid var(--line)}
.feat{border-top-color:var(--line)}
.quote__av{border:1px solid var(--line-2);background:var(--paper)}
.faq-card__av{background:var(--accent);color:#15120d}

/* form fields */
.field input,.field textarea{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--ink)}
.field input:focus,.field textarea:focus{background:rgba(255,255,255,.06)}

/* modal */
.modal__backdrop{background:rgba(0,0,0,.66)}
.modal__close{background:var(--paper-2);border:1px solid var(--line);color:var(--ink)}
.modal__close:hover{background:var(--cream-2)}

/* dark feature sections separate from page with hairline + stronger imagery */
.case{border:1px solid var(--line)}
.case__media img{opacity:.46}
.connect{border-block:1px solid var(--line)}
.connect h2 .soft{color:#544f46}

/* work card tag chips */
.work__tag{background:rgba(0,0,0,.5)}

/* hero avatars border matches dark bg (unused but safe) */
.hero__avatars span{border-color:var(--cream)}

/* legal pages dark bar */
.legal-top{background:rgba(11,10,8,.82)}

/* marquee subtle */
.marquee{background:var(--cream-2)}

/* ============================================================
   MORE MOTION — preloader, heading masks, progress, tilt, parallax
   ============================================================ */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.wmi{display:inline-block;will-change:transform}
html.nomotion .wmi{transform:none!important}

.scroll-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;z-index:90;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px rgba(255,90,31,.5)}
html.nomotion .scroll-prog{display:none}

.preloader{position:fixed;inset:0;z-index:300;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;will-change:transform}
.preloader__mark{width:62px;height:62px;opacity:0;transform:scale(.7);animation:preMark .7s var(--ease-out) .05s forwards}
@keyframes preMark{to{opacity:1;transform:none}}
.preloader__txt{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;color:var(--ink);font-size:1.15rem;display:inline-flex;gap:.6em;align-items:baseline;opacity:0;animation:preMark .7s var(--ease-out) .18s forwards}
.preloader__txt b{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem}
.preloader__bar{width:210px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
body.loading{overflow:hidden}
html.nomotion .preloader{display:none}

.work{perspective:1100px}
.work__media{will-change:transform;transform-style:preserve-3d}
.case__media img{height:116%;top:-8%}

/* ============================================================
   V5 REFINEMENTS — edler font, hero bg + glow, footer, lightbox, mobile
   ============================================================ */
/* Archivo — industrial, breit & fett (gewählt: „industriell & wuchtig") */
h1,h2,h3,h4{font-optical-sizing:auto;font-weight:700;font-variation-settings:"wdth" 108;letter-spacing:0}
.display,.h2,.connect h2{text-transform:uppercase;font-weight:800}
.display{font-variation-settings:"wdth" 116;line-height:.93;letter-spacing:0}
.h2,.connect h2{font-variation-settings:"wdth" 110;line-height:1.02;letter-spacing:.004em}
.kicker{font-family:var(--font-body);font-style:normal;text-transform:uppercase;font-weight:600;font-size:.82rem;letter-spacing:.2em;color:var(--muted)}

/* heading word-mask reveal (class-based, fail-open) */
.is-js [data-split-heading] .wmi{transform:translateY(118%)}
.is-js [data-split-heading].is-in .wmi{transform:none;transition:transform .85s var(--ease-out)}

/* ---- HERO background: welding workshop + ember glow ---- */
.hero{overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.26;filter:contrast(1.05) saturate(1.05)}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 80% at 50% 22%,transparent 0%,rgba(11,10,8,.55) 62%,var(--cream) 100%),
             linear-gradient(180deg,rgba(11,10,8,.55) 0%,rgba(11,10,8,.35) 40%,var(--cream) 100%)}
.hero__ember{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.hero__ember span{position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,45,.45),transparent 68%);filter:blur(34px);animation:ember 8s ease-in-out infinite}
.hero__ember span:nth-child(1){left:8%;top:30%;animation-delay:0s}
.hero__ember span:nth-child(2){right:12%;top:18%;width:260px;height:260px;background:radial-gradient(circle,rgba(255,90,31,.4),transparent 68%);animation-delay:-3s}
.hero__ember span:nth-child(3){left:46%;bottom:8%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,150,70,.3),transparent 68%);animation-delay:-5s}
@keyframes ember{0%,100%{opacity:.35;transform:translateY(0) scale(1)}50%{opacity:.75;transform:translateY(-34px) scale(1.18)}}
html.nomotion .hero__ember span{animation:none}
.hero__inner{position:relative;z-index:2}
.hero h1{text-shadow:0 2px 60px rgba(255,90,31,.14),0 1px 30px rgba(0,0,0,.5)}

/* ---- GLOW touches (edler) ---- */
.btn--accent{box-shadow:0 14px 34px -10px rgba(255,90,31,.6),0 0 0 1px rgba(255,138,79,.25) inset}
.btn--accent:hover{box-shadow:0 20px 50px -10px rgba(255,90,31,.75),0 0 0 1px rgba(255,138,79,.4) inset}
.brand-pill__mark svg,.preloader__mark svg,.faq-card__av{filter:drop-shadow(0 0 10px rgba(255,90,31,.35))}
.chip-media{box-shadow:0 18px 40px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12),0 0 40px -6px rgba(255,90,31,.25)}
.badge{box-shadow:var(--shadow-sm),0 0 26px -6px rgba(255,90,31,.3)}
.case__tag,.kicker{text-shadow:0 0 20px rgba(255,90,31,.18)}

/* ---- FLOATING pills: move clear of the text ---- */
.floaty{z-index:3}

/* ---- WORK lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lightbox[hidden]{display:none}
.lightbox__bd{position:absolute;inset:0;background:rgba(2,3,6,.82);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.lightbox.is-open .lightbox__bd{opacity:1}
.lightbox__dialog{position:relative;max-width:1080px;width:100%;max-height:90vh;overflow:auto;display:grid;grid-template-columns:1.1fr .9fr;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  transform:scale(.95) translateY(14px);opacity:0;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out)}
.lightbox.is-open .lightbox__dialog{transform:none;opacity:1}
.lightbox__media{position:relative;min-height:320px;background:var(--paper)}
.lightbox__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lightbox__cap{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:clamp(26px,3vw,42px)}
.lightbox__cap .tag{font-family:var(--font-body);font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-weight:600;color:var(--accent-2);font-size:.78rem}
.lightbox__cap h3{font-size:clamp(1.6rem,2.6vw,2.3rem);color:#fff;line-height:1.04;text-transform:uppercase;font-variation-settings:"wdth" 108}
.lightbox__cap p{color:var(--ink-2);font-size:1rem;line-height:1.6}
.lightbox__specs{list-style:none;margin:2px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;width:100%}
.lightbox__specs li{position:relative;padding-left:20px;font-size:.9rem;color:var(--ink-2)}
.lightbox__specs li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.lightbox__cta{margin-top:8px;align-self:flex-start}
@media (max-width:760px){.lightbox__dialog{grid-template-columns:1fr;max-width:520px}.lightbox__media{min-height:230px;max-height:36vh}.lightbox__specs{grid-template-columns:1fr}}
.lightbox__close{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(10,12,16,.6);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s,background .25s}
.lightbox__close:hover{transform:rotate(90deg);background:rgba(10,12,16,.85)}
.lightbox__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.lb-open{overflow:hidden}

/* ---- PREMIUM footer ---- */
.footer{padding-top:clamp(60px,8vw,110px);position:relative;overflow:hidden}
.footer__main{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:clamp(40px,5vw,64px)}
.footer__brand .brand{display:inline-flex;align-items:center;gap:11px}
.footer__brand .brand-pill__mark{width:40px;height:40px}
.footer__bname{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff;letter-spacing:-.01em}
.footer__about2{max-width:34ch;margin-top:18px;color:var(--muted);font-size:.95rem;line-height:1.55}
.footer__col h4{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.15rem;color:var(--accent-2);margin-bottom:16px}
.footer__col a,.footer__col span{display:block;padding:6px 0;color:var(--ink-2);transition:color .25s;font-size:.98rem}
.footer__col a:hover{color:#fff}
.footer__big{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,17vw,15rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);text-stroke:1px rgba(255,255,255,.10);
  white-space:nowrap;overflow:hidden;margin-top:10px;user-select:none}
.footer__bottom2{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);margin-top:8px}
.footer__bottom2 nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__bottom2 a:hover{color:#fff}
.footer__socials{display:flex;gap:8px}
.footer__socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border-color .25s,background .25s}
.footer__socials a:hover{border-color:var(--accent);background:var(--accent-soft)}
.footer__socials svg{width:17px;height:17px}
@media (max-width:760px){.footer__main{grid-template-columns:1fr;gap:30px}}

/* ---- MOBILE refinements ---- */
@media (max-width:560px){
  .stepcard{min-height:auto;padding:22px 22px 24px}
  .stepcard__n{font-size:2.6rem}
  .steps{gap:14px}
  .floaty{display:none}            /* pills clutter the narrow about text */
  .about{padding-block:clamp(40px,8vw,70px)}
  /* long uppercase German words must fit narrow screens whole (no mid-word break) */
  .hero h1,.hero .display{font-size:clamp(1.5rem,6.9vw,2.5rem);font-variation-settings:"wdth" 100;line-height:1.04;letter-spacing:-.01em;overflow-wrap:normal;word-break:keep-all}
  .h2,.connect h2{font-variation-settings:"wdth" 100;font-size:clamp(1.7rem,7vw,2.6rem)}
  .chip-media{width:1em;height:.82em}
  .footer__big{font-size:22vw}
}

/* small bits */
.faq-card__call{display:block;text-align:center;margin-top:14px;color:var(--ink-2);font-size:.92rem;transition:color .25s}
.faq-card__call:hover{color:#fff}
.faq-card__call b{color:#fff;font-weight:600}
.work[role="button"]{cursor:pointer}
.footer__brand .brand{color:#fff}

/* floating pills only have gutter room on wide desktop — hide below */
@media (max-width:1100px){.floaty{display:none}}

/* ============================================================
   V7 — Nissens/Material split, footer wordmark fit, stronger step stagger
   ============================================================ */
.section-head__lead{max-width:62ch;margin-top:1em;color:var(--muted);font-size:1.06rem;line-height:1.62}
.section-head.center .section-head__lead{margin-left:auto;margin-right:auto}

/* Material & Qualität (Nissens) split */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(26px,3vw,44px)}
.dual__card{position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-md)}
.dual__card--accent{border-color:rgba(255,90,31,.32)}
.dual__card--accent::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(255,90,31,.10),transparent 60%);pointer-events:none}
.dual__ic{width:50px;height:50px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--accent);margin-bottom:18px}
.dual__ic svg{width:25px;height:25px}
.dual__card h3{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:.45em;color:var(--ink);letter-spacing:-.01em}
.dual__brand{color:var(--accent)}
.dual__card p{color:var(--muted);line-height:1.62;font-size:1rem;margin-bottom:1.1em}
.dual__card p strong{color:var(--ink);font-weight:600}
.dual__link{display:inline-flex;align-items:center;gap:.4em;color:var(--accent-2);font-weight:600;font-size:.96rem;transition:color .25s}
.dual__link:hover{color:#fff}
@media (max-width:760px){.dual{grid-template-columns:1fr}}

/* footer wordmark — show the FULL word KÜHLERBAU (with Ü), not clipped */
.footer__big{font-size:clamp(2.4rem,13vw,12rem);letter-spacing:-.03em;line-height:1.02;overflow:visible;padding-top:.06em}
@media (max-width:760px){.footer__big{font-size:16.5vw}}

/* stronger, clearly one-by-one reveal for the process steps */
.is-js .steps>*{transform:translateY(60px) scale(.94)}
.is-js .steps.is-in>*{transition:opacity .6s var(--ease-out),transform .72s cubic-bezier(.34,1.42,.5,1)}
.is-js .steps.is-in>*:nth-child(1){transition-delay:0s}
.is-js .steps.is-in>*:nth-child(2){transition-delay:.17s}
.is-js .steps.is-in>*:nth-child(3){transition-delay:.34s}
.is-js .steps.is-in>*:nth-child(4){transition-delay:.51s}
.is-js .steps.is-in>*:nth-child(odd){transform:rotate(-1.5deg)}
.is-js .steps.is-in>*:nth-child(even){transform:rotate(1.3deg)}
@media (max-width:900px){.is-js .steps>*{transform:translateY(40px)}.is-js .steps.is-in>*{transform:none}}

/* ---- Multi-step Anfrage-Funnel ---- */
.funnel__head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.funnel__count{font-family:var(--font-serif);font-style:italic;font-size:1.02rem;color:var(--accent-2);white-space:nowrap}
.funnel__bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.funnel__bar i{display:block;height:100%;width:25%;border-radius:4px;background:linear-gradient(90deg,var(--accent),#ff8a4f);transition:width .45s var(--ease-out)}
.fstep{display:none}
.fstep.is-active{display:block;animation:fstepIn .42s var(--ease-out)}
@keyframes fstepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.fstep h3{font-size:1.5rem;margin-bottom:.15em}
.fstep .sub{color:var(--muted);margin-bottom:20px;font-size:.95rem}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:15px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.choice:hover{border-color:var(--line-2);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.choice.is-sel{border-color:var(--accent);background:rgba(255,90,31,.10);box-shadow:0 0 0 3px var(--accent-soft)}
.choice__ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:var(--accent);margin-bottom:7px}
.choice__ic svg{width:20px;height:20px}
.choice__t{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.choice__d{font-size:.82rem;color:var(--muted)}
.fstep__err{display:none;font-size:.84rem;color:#f87171;font-weight:600;margin-top:12px}
.fstep__err.show{display:block}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  padding:32px 20px;border:1.5px dashed var(--line-2);border-radius:16px;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.is-drag{border-color:var(--accent);background:rgba(255,90,31,.06)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.dropzone__ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:var(--accent)}
.dropzone__ic svg{width:23px;height:23px}
.dropzone__t{font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--ink)}
.dropzone__d{font-size:.85rem;color:var(--muted)}
.filelist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.filelist li{font-size:.85rem;color:var(--ink-2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:8px;padding:8px 12px;word-break:break-all}
.funnel__nav{display:flex;gap:12px;align-items:center;margin-top:26px}
.funnel__nav #funnelNext,.funnel__nav #funnelSubmit{margin-left:auto}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2);padding:1.05em 1.4em}
.btn--ghost:hover{border-color:var(--line-2);color:#fff;background:rgba(255,255,255,.04)}
@media (max-width:420px){.choice-grid{grid-template-columns:1fr}}

/* FAQ avatar as photo (placeholder for Tim) */
.faq-card__av--img{padding:0;overflow:hidden;background:none}
.faq-card__av--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* .btn sets display, which would override the hidden attribute — restore it */
.btn[hidden]{display:none}

/* ---- real form backend (FormSubmit) ---- */
.funnel__honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---- Danke / thank-you page ---- */
.thanks{min-height:68vh;display:flex;align-items:center;text-align:center;padding:clamp(48px,9vw,110px) 0}
.thanks__inner{max-width:680px;margin:0 auto}
.thanks__ok{width:86px;height:86px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 0 44px rgba(255,90,31,.28)}
.thanks__ok svg{width:42px;height:42px}
.thanks .kicker{justify-content:center;margin-bottom:.5em}
.thanks h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:.1em 0 .35em;letter-spacing:-.015em}
.thanks__lead{color:var(--ink-2);font-size:1.12rem;line-height:1.62;max-width:54ch;margin:0 auto 1.9em}
.thanks__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.thanks__note{margin-top:1.7em;color:var(--muted);font-size:.92rem}

/* ============================================================
   V9 — dark↔light scroll rhythm, Nissens navy brand block, industrial type
   ============================================================ */
/* LIGHT sections: flip the tokens so token-based components adapt automatically */
.theme-light{
  position:relative;z-index:1;
  --cream:#f4f0e8; --cream-2:#e7e0d3;
  --paper:#ffffff; --paper-2:#ffffff;
  --ink:#17130d; --ink-2:#524a3f; --muted:#766d60; --muted-2:#a8a093;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
  color:var(--ink); background:var(--cream);
}
/* smooth fade at the dark↔light seams (the colour „wechselt" beim Scrollen) */
.theme-light--in{background:linear-gradient(180deg,#0b0a08 0,var(--cream) 120px)}
.theme-light--out{background:linear-gradient(180deg,var(--cream) calc(100% - 120px),#0b0a08 100%)}
.theme-light--both{background:linear-gradient(180deg,#0b0a08 0,var(--cream) 120px,var(--cream) calc(100% - 120px),#0b0a08 100%)}
/* component fixes inside light sections */
.theme-light .feat__ic{background:rgba(0,0,0,.045)}
.theme-light .faq-card__call b,.theme-light .faq-card__call:hover{color:var(--ink)}
.theme-light .faq-q{color:var(--ink)}
.theme-light .btn--dark{background:#17130d;color:#fbf9f5}
.theme-light .btn--dark:hover{background:#000}
.theme-light .stepcard,.theme-light .feat,.theme-light .faq-card{box-shadow:0 30px 60px -30px rgba(40,30,15,.28),0 8px 20px -12px rgba(40,30,15,.18)}

/* ===== Nissens navy brand block (cyan + white logo) ===== */
.theme-nissens{position:relative;z-index:1;overflow:hidden;isolation:isolate;
  --ink:#ffffff; --ink-2:#bcd6e8; --muted:#8aa9c0; --line:rgba(255,255,255,.14)}
.theme-nissens .kicker{color:#5fc4ee}
.theme-nissens .kicker::before,.theme-nissens .kicker::after{background:rgba(95,196,238,.45)}
.theme-nissens .h2{color:#fff}
.theme-nissens .section-head__lead{color:#cfe1ee}
.nissens-glow{position:absolute;top:32%;left:50%;width:min(900px,92%);height:360px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,172,236,.30),transparent 70%);filter:blur(50px);pointer-events:none;z-index:0}
.nissens-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.5vw,46px)}
.ncard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),border-color .35s,background .35s,box-shadow .35s}
.ncard:hover{transform:translateY(-5px);border-color:rgba(0,172,236,.5);box-shadow:0 30px 60px -28px rgba(0,0,0,.6),0 0 0 1px rgba(0,172,236,.22)}
.ncard--nissens{background:linear-gradient(180deg,rgba(0,172,236,.13),rgba(255,255,255,.03));border-color:rgba(0,172,236,.4)}
.ncard__tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#5fc4ee}
.ncard__tag--accent{color:var(--accent-2)}
.ncard__use{font-size:.78rem;color:var(--ink-2);margin-top:-6px}
.ncard__logo{height:44px;width:auto;margin:6px 0 4px;display:block}
.ncard__ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(0,172,236,.14);color:#5fc4ee;margin-bottom:2px}
.ncard__ic svg{width:25px;height:25px}
.ncard__ic--accent{background:var(--accent-soft);color:var(--accent-2)}
.ncard h3{color:#fff;font-size:clamp(1.4rem,2vw,1.8rem)}
.ncard p{color:#c7ddec;line-height:1.6;font-size:.98rem}
.ncard__link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:.4em;color:#5fc4ee;font-weight:600;font-size:.95rem;transition:color .25s}
.ncard__link:hover{color:#fff}
.ncard__link--accent{color:var(--accent-2)}
.ncard__link--accent:hover{color:#fff}
@media (max-width:860px){.nissens-grid{grid-template-columns:1fr}}

/* ============================================================
   V10 — Fathom-style light→dark scroll flow
   ============================================================ */
/* clean cream hero — colours come from the global scroll-theme; the dark photo-chips carry the imagery */
.hero__bg{display:none}
.hero__ember{display:none}
.hero .badge{box-shadow:var(--shadow-sm)}
.hero .display .soft{color:var(--accent)}        /* „Kompromisslos." als Akzent statt Grau */
.marquee{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee .marquee__track span{color:var(--ink)}
.marquee .marquee__track i{background:var(--accent)}

/* the morph statement: bg + text are driven by the global scroll-theme (cream→dark); the text „writes" */
.morph{position:relative;height:230vh;background:var(--cream);z-index:1}
.morph__pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:12vh;gap:1.1em}
.morph .about{text-align:center;max-width:none}
.morph__kicker{color:var(--muted-2)}
.morph__text{font-family:var(--font-display);font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:-.01em;
  font-size:clamp(1.35rem,3vw,2.7rem);line-height:1.3;text-align:center;margin:0 auto;max-width:min(92vw,21em)}
.morph__text .w{color:var(--muted-2);transition:color .18s var(--ease)}
.morph__text .w.on{color:var(--ink)}

/* nomotion / no-JS: static per-section themes (no scroll morph), cream hero, dark statement */
html.nomotion .hero,html.nomotion #ablauf,html.nomotion #referenz{
  --cream:#ece7da;--cream-2:#e2dccd;--paper:#fff;--paper-2:#fff;--ink:#1a1714;--ink-2:#544d42;--muted:#7a7163;--muted-2:#b3aa99;--line:rgba(22,18,12,.12);--line-2:rgba(22,18,12,.20);
  background:var(--cream);color:var(--ink)}
html.nomotion #qualitaet{background:#05263d}
html.nomotion .morph{height:auto;background:#13100c}
html.nomotion .morph__pin{position:static;min-height:auto;padding-block:clamp(70px,12vw,150px)}
@media (max-width:560px){.morph{height:200vh}.morph__text{font-size:clamp(1.2rem,5.6vw,1.9rem)}}

/* overlays stay dark regardless of the scrolled theme */
.modal,.lightbox,.menu{--cream:#0b0a08;--cream-2:#13110d;--paper:#15130e;--paper-2:#1c1914;--ink:#f2efe8;--ink-2:#b7b1a6;--muted:#8c867b;--muted-2:#5f594e;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.17)}
/* the page background morphs, so keep the fixed grain subtle on light too */
body::after{opacity:.32}

/* ============================================================
   ANFAHRT — Karte, die erst auf Klick zu Google geht
   Begruendung in sales-hq/vorlagen/karte/README.md
   ============================================================ */
.karte{margin:clamp(2.2rem,5vw,3.4rem) auto 0;max-width:860px;width:100%}
.karte__rahmen{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/2;
  background:var(--black);box-shadow:var(--shadow-md);isolation:isolate}
.karte__rahmen img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95) contrast(1.02)}
.karte__rahmen .karte__frame{width:100%;height:100%;border:0;display:block}
/* Der Ueberzug nur so dunkel, dass die Schrift sitzt - sonst sieht die Karte
   darunter aus wie ausgeblichen und der Pin verschwindet. Knopf unten, damit
   der Kartenausschnitt und die Nadel frei bleiben. */
.karte__laden{position:absolute;inset:0;display:flex;flex-direction:column;gap:.4rem;
  align-items:center;justify-content:flex-end;width:100%;border:0;cursor:pointer;
  background:linear-gradient(rgba(10,8,7,0) 42%,rgba(10,8,7,.72));color:#fff;
  font-family:inherit;text-align:center;padding:1.4rem;transition:background .25s}
.karte__laden:hover,.karte__laden:focus-visible{background:linear-gradient(rgba(10,8,7,.08) 36%,rgba(10,8,7,.82))}
.karte__laden-titel{display:inline-block;background:var(--accent,#ff5a1f);color:#fff;
  font-weight:700;letter-spacing:.01em;padding:.7rem 1.4rem;border-radius:999px;
  min-height:46px;display:inline-flex;align-items:center}
.karte__laden-klein{font-size:.84rem;max-width:34ch;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.karte__quelle{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;
  justify-content:space-between;margin-top:.9rem;font-size:.86rem;color:var(--muted,#8b8378)}
.karte__route{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-weight:700;text-decoration:none;color:var(--accent,#ff5a1f)}
.karte__route svg{width:17px;height:17px}
.karte__route:hover{text-decoration:underline}

/* ============================================================
   V11 — Hero mit Werkstattfoto, Hauptknopf sichtbar
   ------------------------------------------------------------
   Zwei Befunde vom 02.10.2026:

   1) Der Hero war eine leere creme Flaeche. V10 hatte .hero__bg
      abgeschaltet ("clean cream hero"); das Werkstattfoto lag
      ungenutzt im Markup. Auf den ersten Blick trug die Seite damit
      nichts — und der erste Blick ist das, was im Termin zaehlt.
      Jetzt liegt das Foto wieder darunter, hell genug fuer schwarze
      Schrift, dunkel genug, um als Werkstatt lesbar zu sein.

   2) Der Hauptknopf war UNSICHTBAR: .btn--dark setzt in Zeile 450
      color:#15120d auf background:var(--ink) — gemessen
      rgb(21,18,13) auf rgb(26,23,20), Kontrast 1,03:1. Der Hero
      liegt nicht in .theme-light, wo das repariert wird.
      Der Hauptknopf ist jetzt orange: sichtbar, markengerecht, und
      er zieht den Blick genau dorthin, wo er hin soll.
   ============================================================ */
.hero__bg{display:block}
.hero__bg img{opacity:.42;filter:contrast(1.04) saturate(.9) brightness(.98)}
/* Verlauf von oben nach unten, damit Kopfzeile und Flietext ruhig bleiben
   und das Foto nur das untere Drittel traegt. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,240,232,.94) 0%,rgba(244,240,232,.80) 30%,rgba(244,240,232,.42) 68%,rgba(244,240,232,.70) 100%)}

/* Niemals dunkel auf dunkel - unabhaengig davon, welches Theme gerade gilt. */
.btn--dark{color:#f6f3ee}
.hero__cta .btn--dark,
.connect__cta .btn--dark{background:var(--accent);color:#12100c;
  box-shadow:0 14px 34px -12px rgba(255,90,31,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.hero__cta .btn--dark:hover,
.connect__cta .btn--dark:hover{background:#ff6f3c;color:#12100c;
  box-shadow:0 18px 40px -12px rgba(255,90,31,.85),inset 0 1px 0 rgba(255,255,255,.36)}

/* Karte laedt direkt - der Rahmen braucht nur noch eine Hoehe. */
.karte__rahmen--direkt{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#e9e5dc}
.karte__rahmen--direkt .karte__frame{width:100%;height:100%;border:0;display:block}


/* ===== Der Mann dahinter, Video, Schwesterseite (V12) ===== */
.timband{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
.timband__photo{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1/1;background:var(--paper)}
.timband__photo img{width:100%;height:100%;object-fit:cover}
.timband__body p{color:var(--ink-2)}
.timband__body .lead{color:var(--ink)}
.timvideo{margin:clamp(28px,4vw,48px) auto 0;max-width:880px}
.timvideo figcaption{margin-top:14px;font-family:var(--font-serif);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--ink-2)}
.timvideo figcaption span{display:block;margin-top:4px;font-style:normal;font-size:.86rem;color:var(--muted)}
@media (max-width:820px){.timband{grid-template-columns:1fr}}
.schwester{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(22px,3vw,34px) clamp(24px,3.4vw,44px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line-2)}
.schwester div{display:grid;gap:5px;max-width:660px}
.schwester b{font-family:var(--font-display);font-size:1.2rem;color:var(--ink)}
.schwester span{color:var(--ink-2)}

/* ===== Karte: Platzhalter und Einwilligung (V12) ===== */
.karte__rahmen--direkt{position:relative}
.karte__platzhalter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.karte__platzhalter[hidden]{display:none}
.karte__platzhalter p{margin:0;max-width:30ch;font-size:.95rem;line-height:1.45}
.karte__frame[hidden]{display:none}
.kw-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.karte__platzhalter{background:linear-gradient(160deg,#1c1914,#13110d);color:var(--ink)}
.karte__btn{font:inherit;font-weight:700;border:0;border-radius:999px;padding:12px 22px;min-height:44px;cursor:pointer;background:var(--accent);color:#12100c}
.karte__platzhalter a{color:var(--accent-2);font-weight:600;font-size:.92rem}


/* ===== Oldtimer & Restauration (V13) ===== */
.oldband{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:linear-gradient(135deg,var(--paper-2),var(--paper));border:1px solid var(--line-2);position:relative;overflow:hidden}
.oldband::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,90,31,.16),transparent);pointer-events:none}
.oldband__body{position:relative;z-index:1}
.oldband__body p{color:var(--ink-2)}
.oldband__body .lead{color:var(--ink)}
.oldband__chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.oldband__chips span{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:.88rem;color:var(--ink-2)}
.oldband__steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.oldband__steps li{display:grid;gap:3px;padding:16px 20px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.oldband__steps b{font-family:var(--font-display);color:var(--accent-2);letter-spacing:.02em}
.oldband__steps span{color:var(--ink-2);font-size:.95rem;line-height:1.45}
@media (max-width:860px){.oldband{grid-template-columns:1fr}}
.oldband__body .lead{margin-top:.9em}



/* ===== Video-Popup und Vorschaubilder (V18) ===== */
.vmodal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px}
.vmodal[hidden]{display:none}
.vmodal__bd{position:absolute;inset:0;background:rgba(6,7,20,.86);backdrop-filter:blur(4px)}
.vmodal__box{position:relative;width:min(980px,100%)}
.vmodal__stage{display:block}
.vmodal__box video{display:block;width:100%;max-height:calc(100vh - 96px);margin:0 auto;background:#000;border-radius:14px}
.vmodal__x{position:absolute;right:0;top:-46px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.4);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.vmodal__x:hover{background:#fff;color:#111}
html.vmodal-offen{overflow:hidden}
.vthumb{position:relative;display:block;width:100%;padding:0;border:0;background:#111;border-radius:var(--r-lg,22px);overflow:hidden;cursor:pointer;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.vthumb:hover img{transform:scale(1.04)}
.vthumb__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s}
.vthumb__play::before{content:"";position:absolute;left:25px;top:20px;border-left:19px solid #111;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vthumb:hover .vthumb__play{transform:scale(1.08)}
.vthumb__dauer{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.68);color:#fff;font:600 .75rem/1 system-ui,sans-serif;padding:5px 9px;border-radius:99px}

.vthumb--breit{aspect-ratio:848/478;max-width:880px;margin-inline:auto}
.timvideo .vthumb{box-shadow:var(--shadow-lg)}


/* ===== Cookie-Hinweis (V20) ===== */
.kw-banner{position:fixed;z-index:9999;left:50%;bottom:20px;transform:translateX(-50%);width:min(720px,calc(100% - 32px));box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center;padding:22px 24px;border-radius:20px;background:#16130e;color:#f2efe8;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px -18px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.4);font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;animation:kwHoch .35s cubic-bezier(.2,.8,.2,1) both}
.kw-banner--zu{opacity:0;transform:translateX(-50%) translateY(12px);transition:opacity .2s,transform .2s}
@keyframes kwHoch{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){.kw-banner{animation:none}}
.kw-banner [hidden]{display:none!important}
.kw-banner__kopf{display:flex;gap:14px;align-items:flex-start;grid-column:1}
.kw-banner__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,90,31,.14);color:#ff5a1f}
.kw-banner__titel{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 2px}
.kw-banner__text{margin:0;color:#a8a29e}
.kw-banner__text a{color:#f2efe8;text-decoration:underline;text-underline-offset:3px}
.kw-banner__btn{display:flex;gap:10px;grid-column:2;grid-row:1}
.kw-b{font:inherit;font-weight:700;font-size:14px;min-height:44px;padding:0 20px;border-radius:12px;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.kw-b:active{transform:scale(.97)}
.kw-b--nein{background:transparent;color:#f2efe8;border:1.5px solid rgba(255,255,255,.3)}
.kw-b--nein:hover{border-color:#f2efe8}
.kw-b--ja{background:#ff5a1f;color:#14100b;border:1.5px solid #ff5a1f}
.kw-b--ja:hover{box-shadow:0 8px 20px -8px #ff5a1f}
.kw-b:focus-visible,.kw-banner__mehr:focus-visible,.kw-schalter input:focus-visible+i{outline:3px solid rgba(255,90,31,.45);outline-offset:2px}
.kw-banner__mehr{grid-column:2;justify-self:end;margin:-6px 4px 0 0;background:none;border:0;padding:4px 0;font:inherit;font-size:13px;color:#a8a29e;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kw-banner__mehr:hover{color:#f2efe8}
.kw-banner__opt{grid-column:1 / -1;display:grid;gap:10px;margin:2px 0}
.kw-opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;background:rgba(255,90,31,.14);cursor:pointer}
.kw-opt__t{display:grid;gap:2px}
.kw-opt__t b{font-size:14px}
.kw-opt__t span{font-size:13px;color:#a8a29e}
.kw-schalter{position:relative;flex:none;width:46px;height:26px}
.kw-schalter input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kw-schalter i{position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.3);transition:background .2s}
.kw-schalter i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.kw-schalter input:checked+i{background:#ff5a1f}
.kw-schalter input:checked+i::after{transform:translateX(20px)}
.kw-banner--offen .kw-banner__btn{grid-column:1 / -1;grid-row:auto;justify-content:flex-end}
@media (max-width:640px){
  .kw-banner{left:0;right:0;bottom:0;transform:none;width:auto;border-radius:22px 22px 0 0;grid-template-columns:1fr;padding:20px 18px calc(20px + env(safe-area-inset-bottom));animation-name:kwHochM}
  @keyframes kwHochM{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .kw-banner--zu{transform:translateY(12px)}
  .kw-banner__btn{grid-column:1;grid-row:auto}
  .kw-b{flex:1;padding:0 12px}
  .kw-banner__mehr{grid-column:1;justify-self:center;margin:0}
}


/* ===== Knopf zur Schwesterseite unter dem Hero-Text (V21) ===== */
.bereichsknopf{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:22px auto 0;padding:12px 20px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,9,8,.32);backdrop-filter:blur(6px);text-decoration:none;color:var(--ink-2);font-size:.92rem;transition:border-color .2s,background .2s}
.bereichsknopf b{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.bereichsknopf:hover{border-color:var(--ink);background:rgba(10,9,8,.5)}