/* ==========================================================================
   MASTERKOOL – Design System
   Apple-inspirierte Reduktion + "Liquid Glass" Akzente
   Markenfarben aus dem offiziellen Logo (Blau #094981 / Rot #D0323F)
   ========================================================================== */

:root{
  --mk-blue:#094981;
  --mk-blue-600:#0b5aa0;
  --mk-blue-400:#3d8fd6;
  --mk-blue-100:#e8f1fa;
  --mk-red:#d0323f;
  --mk-red-600:#b02631;

  --ink:#0a1620;
  --ink-2:#1d2b38;
  --muted:#68788a;
  --line:rgba(10,22,32,.10);
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --bg-deep:#061726;

  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-dark:rgba(12,32,52,.42);
  --glass-brd:rgba(255,255,255,.55);
  --glass-shadow:0 10px 40px rgba(6,23,38,.14), inset 0 1px 0 rgba(255,255,255,.55);

  --r-s:12px; --r-m:20px; --r-l:28px; --r-xl:40px;
  --nav-h:96px;
  --maxw:1180px;

  --f: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
       "Helvetica Neue", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; font-family:var(--f); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--mk-blue-600); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 24px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0 0 .5em; letter-spacing:-.03em; line-height:1.06; font-weight:650;
  overflow-wrap:break-word; hyphens:auto}
.display{font-size:clamp(2.6rem,7.2vw,5.4rem); font-weight:700; letter-spacing:-.045em}
.h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}
.h3{font-size:clamp(1.25rem,2.2vw,1.65rem); letter-spacing:-.025em}
.lead{font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--muted); line-height:1.5; font-weight:400}
.eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mk-blue-400); margin:0 0 14px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.86rem}

/* ---------- Navigation (Liquid Glass) ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--nav-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(10,22,32,.07);
  transition:background .3s, border-color .3s;
}
.nav-inner{max-width:var(--maxw); margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; gap:8px}
.nav-logo{display:flex; align-items:center; height:100%; margin-right:auto; padding:4px 0}
.nav-logo img{height:64px; width:auto; image-rendering:auto}
@media (max-width:900px){
  :root{--nav-h:80px}
  .nav-logo img{height:52px}
}
@media (max-width:520px){
  :root{--nav-h:70px}
  .nav-logo img{height:42px}
}
.nav-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-links a{
  display:block; padding:8px 13px; border-radius:999px; font-size:.875rem; font-weight:500;
  color:var(--ink-2); text-decoration:none; transition:background .2s, color .2s; white-space:nowrap;
}
.nav-links a:hover{background:rgba(9,73,129,.08); color:var(--mk-blue); text-decoration:none}
.nav-links a.active{color:var(--mk-blue); background:rgba(9,73,129,.10)}
.nav-cta{
  padding:8px 16px !important; background:var(--mk-blue); color:#fff !important;
  border-radius:999px; font-weight:600;
}
.nav-cta:hover{background:var(--mk-blue-600) !important; color:#fff !important}
.nav-cart{position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; font-size:.875rem; font-weight:600;
  background:rgba(9,73,129,.09); color:var(--mk-blue)}
.nav-cart:hover{background:rgba(9,73,129,.16); text-decoration:none}
.cart-count{min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--mk-red);
  color:#fff; font-size:.7rem; font-weight:700; display:inline-grid; place-items:center; line-height:1}
.burger{display:none; margin-left:6px; width:40px; height:36px; border:0; background:transparent;
  border-radius:10px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:19px; height:1.6px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.6px;
  background:var(--ink); transition:.25s}
.burger span::before{top:-6px} .burger span::after{top:6px}

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:880; display:none;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  padding:18px 24px 60px; overflow:auto;
}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:14px 4px; font-size:1.2rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line); text-decoration:none}
.mobile-menu .sub{font-size:.95rem; font-weight:500; color:var(--muted); padding-left:16px}

@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:inline-flex}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; font-size:1rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .2s, box-shadow .2s, color .2s;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Sichtbarer Fokus für Tastatur und Screenreader */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--mk-blue-400); outline-offset:3px; border-radius:6px;
}
.section-deep a:focus-visible,.hero a:focus-visible,.temp-scroll a:focus-visible,
.sz-stage :focus-visible{outline-color:#8fc9ff}
/* Fingerfreundliche Flächen auf Touchgeräten */
@media (hover:none){
  .btn{min-height:46px}
  .chip{min-height:44px; display:inline-flex; align-items:center}
  .nav-links a, .mobile-menu a{min-height:44px; display:flex; align-items:center}
}
.btn-primary{background:var(--mk-blue); color:#fff; box-shadow:0 8px 26px rgba(9,73,129,.30)}
.btn-primary:hover{background:var(--mk-blue-600); color:#fff}
.btn-accent{background:var(--mk-red); color:#fff; box-shadow:0 8px 26px rgba(208,50,63,.28)}
.btn-accent:hover{background:var(--mk-red-600); color:#fff}
.btn-ghost{background:transparent; color:var(--mk-blue-600); border-color:rgba(9,73,129,.28)}
.btn-ghost:hover{background:rgba(9,73,129,.07); color:var(--mk-blue)}
.btn-glass{
  background:var(--glass-bg); border:1px solid var(--glass-brd); color:var(--ink);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--glass-shadow);
}
.btn-glass:hover{background:rgba(255,255,255,.82); color:var(--ink)}
.btn-sm{padding:10px 20px; font-size:.9rem}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.btn-row.center{justify-content:center}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mk-blue-600)}
.link-arrow::after{content:"›"; font-size:1.25em; line-height:1; transition:transform .2s}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- Glass Surfaces ---------- */
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--r-l);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--glass-shadow); position:relative; overflow:hidden;
}
.glass::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(140deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%);
}
.glass-dark{
  background:var(--glass-bg-dark); border:1px solid rgba(255,255,255,.20); color:#fff;
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 16px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------- Sections ---------- */
.section{padding:clamp(70px,9vw,130px) 0}
.section-sm{padding:clamp(46px,6vw,80px) 0}
.section-soft{background:var(--bg-soft)}
.section-deep{background:var(--bg-deep); color:#fff}
.section-deep .lead,.section-deep .muted{color:rgba(255,255,255,.68)}
.section-deep .eyebrow{color:var(--mk-blue-400)}
.section-head{max-width:760px; margin:0 auto clamp(38px,5vw,64px); text-align:center}

/* ---------- Hero ---------- */
/* Höhe folgt dem Inhalt – so wird das freigestellte Gerät nie angeschnitten */
.hero{
  position:relative; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 56px) 0 84px; overflow:hidden; text-align:center; color:#fff;
  background:radial-gradient(120% 90% at 50% 0%, #14406b 0%, #061726 62%, #03101c 100%);
}
.hero::before{
  content:""; position:absolute; width:120vw; height:120vw; left:50%; top:-52vw; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(61,143,214,.32) 0%, rgba(61,143,214,0) 62%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:960px; padding:0 24px}
.hero .display{color:#fff; margin-bottom:.28em}
.hero .lead{color:rgba(255,255,255,.76); max-width:640px; margin:0 auto 34px}
/* Freigestelltes Gerät im Hero: nie beschnitten, immer vollständig sichtbar */
.hero-media{position:relative; z-index:2; margin:44px auto 0; padding:0 24px;
  display:flex; justify-content:center}
.hero-media img{
  width:auto; height:auto; max-width:min(330px,72vw); max-height:min(35vh,360px);
  object-fit:contain; filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
}
.gradient-text{
  background:linear-gradient(96deg,#7fc4ff 0%,#ffffff 45%,#9fd4ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; margin-bottom:26px; color:#cfe6ff;
}

/* Page hero (Unterseiten) */
.page-hero{
  padding:calc(var(--nav-h) + 76px) 0 clamp(48px,6vw,84px);
  background:radial-gradient(115% 100% at 50% 0%, #10375d 0%, #061726 70%);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.page-hero .lead{color:rgba(255,255,255,.72); max-width:660px; margin:0 auto}
.page-hero .eyebrow{color:var(--mk-blue-400)}

/* ---------- Temperatur-Scroll-Modul ---------- */
.temp-scroll{position:relative; height:420vh; background:#0b0f14}
.temp-stage{
  position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  transition:background-color .12s linear;
}
.temp-grad{position:absolute; inset:0; transition:opacity .2s linear}
.temp-noise{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
}
.temp-content{position:relative; z-index:3; text-align:center; color:#fff; padding:0 24px; width:100%}
.temp-label{
  font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:20px;
}
.temp-value{
  font-size:clamp(5.5rem,20vw,16rem); font-weight:700; line-height:.86; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums; text-shadow:0 20px 70px rgba(0,0,0,.35);
}
.temp-value sup{font-size:.34em; vertical-align:super; letter-spacing:-.02em; margin-left:.06em}
.temp-caption{
  margin:26px auto 0; max-width:520px; font-size:clamp(1.05rem,2.2vw,1.5rem);
  font-weight:500; color:rgba(255,255,255,.9); min-height:3.2em;
}
.temp-caption span{display:block; transition:opacity .4s, transform .4s}
.temp-meta{
  margin:34px auto 0; display:inline-flex; gap:0; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.temp-meta div{padding:14px 24px; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.72);
  border-right:1px solid rgba(255,255,255,.16); text-align:center}
.temp-meta div:last-child{border-right:0}
.temp-meta b{display:block; font-size:1.28rem; font-weight:700; letter-spacing:-.02em;
  color:#fff; margin-bottom:2px}
.temp-note{margin:20px auto 0; max-width:520px; font-size:.8rem; line-height:1.5;
  color:rgba(255,255,255,.62)}

/* nur für Screenreader, z. B. Bildnachweise */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- Vergleich MASTERKOOL / Klimaanlage ---------- */
.compare{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:820px){.compare{grid-template-columns:1fr; gap:16px}}
.compare-item{
  padding:30px 26px; border-radius:var(--r-l); text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.compare-item .lbl{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mk-blue-400); margin-bottom:14px}
.compare-item .big{
  display:block; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; letter-spacing:-.045em;
  line-height:1; color:#fff;
}
.compare-item .big span{font-size:.42em; font-weight:600; letter-spacing:-.02em; margin-left:.15em}
.compare-item .vs{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem; color:rgba(255,255,255,.55);
}
.compare-item .vs b{display:block; font-weight:600; color:rgba(255,255,255,.72); font-size:.95rem}
.temp-progress{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%); z-index:4;
  width:min(300px,60vw); height:3px; border-radius:999px; background:rgba(255,255,255,.22);
}
.temp-progress i{display:block; height:100%; border-radius:999px; background:#fff; width:0}
.temp-hint{position:absolute; left:50%; bottom:58px; transform:translateX(-50%); z-index:4;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55)}

@media (max-width:600px){
  .temp-scroll{height:360vh}
  .temp-meta{display:flex; flex-wrap:wrap; justify-content:center; border-radius:22px; max-width:340px}
  .temp-meta div{padding:10px 16px; font-size:.7rem; flex:1 1 auto; text-align:center}
  .temp-meta b{font-size:1rem}
  .temp-caption{font-size:1rem; min-height:4.4em}
  .temp-label{font-size:.7rem; letter-spacing:.14em}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .85s cubic-bezier(.16,.84,.32,1), transform .85s cubic-bezier(.16,.84,.32,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.09s} .reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s} .reveal.d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Grids & Cards ---------- */
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:30px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.card:hover{transform:translateY(-5px); box-shadow:0 18px 46px rgba(6,23,38,.11)}
.card-icon{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--mk-blue-400),var(--mk-blue)); color:#fff;
  font-size:1.5rem; margin-bottom:20px}
.card h3{margin-bottom:10px}
.card p{margin:0; color:var(--muted); font-size:.97rem}

/* Produktkarte */
.p-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.p-card:hover{transform:translateY(-6px); box-shadow:0 22px 54px rgba(6,23,38,.18)}
.p-card a{text-decoration:none; color:inherit}
/* Produktbilder werden nie beschnitten: freigestelltes Gerät schwebt im Rahmen */
.p-media{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(70% 54% at 50% 16%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(162deg,#cfe0ef 0%, #9dbcd8 46%, #5d89b4 100%);
}
.p-media::after{               /* weicher Bodenschatten unter dem Gerät */
  content:""; position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  width:58%; height:10%; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(6,24,44,.48) 0%, rgba(6,24,44,0) 72%);
}
.p-media img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:contain; padding:26px 26px 32px;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.p-card:hover .p-media img{transform:translateY(-6px) scale(1.03)}
.p-badge{
  position:absolute; top:14px; left:14px; z-index:2; padding:5px 12px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--mk-blue);
}
.p-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1}
.p-body h3{margin:0; font-size:1.28rem}
.p-body .p-desc{margin:0; color:var(--muted); font-size:.93rem; flex:1}
.p-specs{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; padding:0; list-style:none}
.p-specs li{font-size:.75rem; font-weight:600; color:var(--mk-blue); background:var(--mk-blue-100);
  padding:4px 10px; border-radius:999px}
.p-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--line); margin-top:6px}
.p-price{font-size:1.12rem; font-weight:700; letter-spacing:-.02em}
.p-price small{display:block; font-size:.7rem; font-weight:500; color:var(--muted); letter-spacing:0}
/* Auf schmalen Karten bleibt der Kaufknopf einzeilig, statt zu brechen */
@media (max-width:520px){
  .p-foot{gap:10px}
  .p-foot .btn{padding:12px 18px; font-size:.92rem; white-space:nowrap}
}

/* Bild-Platzhalter */
.ph{
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:24px;
  background:transparent; color:#3f5f80;
}
.ph b{display:block; font-size:.95rem; color:#0b3a63; margin-bottom:6px}
.ph span{font-size:.75rem; line-height:1.4; display:block; max-width:200px}

/* ---------- Feature-Split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center}
.split.rev .split-media{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr} .split.rev .split-media{order:0}}
.split-media{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3;
  background:
    radial-gradient(70% 54% at 50% 16%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(162deg,#cfe0ef,#7ea6ca);
}
.split-media img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:28px}
/* Stimmungsfotos dürfen formatfüllend sein – Produkte nie */
.split-media.photo{background:linear-gradient(168deg,#12395f,#061726)}
.split-media.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; padding:0}

/* Externe Stimmungsbilder mit Bildnachweis */
.photo-figure{position:relative; margin:0; width:100%; height:100%}
.photo-figure img{width:100%; height:100%; object-fit:cover; display:block}
.photo-credit{
  position:absolute; right:10px; bottom:10px; z-index:2;
  padding:4px 10px; border-radius:999px; font-size:.66rem; letter-spacing:.02em;
  background:rgba(6,23,38,.48); color:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.photo-credit a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.photo-band{
  position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:340px;
  background:linear-gradient(168deg,#12395f,#061726);
}
.photo-band .photo-figure img{filter:saturate(.92)}
.photo-band .band-overlay{
  position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; padding:34px;
  background:linear-gradient(0deg, rgba(4,16,27,.86) 0%, rgba(4,16,27,.30) 48%, rgba(4,16,27,.05) 100%);
  color:#fff;
}
.photo-band .band-overlay h3{margin:0 0 6px}
.photo-band .band-overlay p{margin:0; font-size:.94rem; color:rgba(255,255,255,.8); max-width:46ch}
.feature-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:1rem}
.feature-list li::before{
  content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; margin-top:2px;
  background:var(--mk-blue-100); color:var(--mk-blue); display:grid; place-items:center;
  font-size:.72rem; font-weight:800;
}
.section-deep .feature-list li::before{background:rgba(255,255,255,.14); color:#8fc9ff}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.stats-3{grid-template-columns:1fr}}

/* Kasse: Formular und Zusammenfassung, auf kleinen Geräten untereinander */
.checkout-grid{grid-template-columns:1.4fr 1fr; gap:34px; align-items:start}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr; gap:24px}}
.stat b{display:block; font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; letter-spacing:-.04em;
  background:linear-gradient(96deg,var(--mk-blue-400),var(--mk-blue)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.section-deep .stat b{background:linear-gradient(96deg,#8fc9ff,#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:.9rem; color:var(--muted)}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.gallery figure{
  position:relative; margin:0; border-radius:var(--r-m); overflow:hidden; aspect-ratio:1/1;
  background:
    radial-gradient(70% 54% at 50% 18%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(162deg,#cfe0ef,#7ea6ca);
}
/* nichts wird beschnitten – auch Detailaufnahmen bleiben vollständig sichtbar */
.gallery img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:18px;
  transition:transform .5s cubic-bezier(.2,.8,.3,1); cursor:zoom-in;
}
.gallery img:hover{transform:scale(1.05)}
/* Studiofotos mit hellem Hintergrund: ruhige weiße Fläche statt Blauverlauf */
.gallery figure.plain{background:#f4f7fa; border:1px solid var(--line)}
.gallery figure.plain img{padding:8px; object-fit:contain}

.lightbox{position:fixed; inset:0; z-index:1000; display:none; place-items:center; padding:5vw;
  background:rgba(4,14,24,.86); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.lightbox.open{display:grid}
.lightbox img{max-width:100%; max-height:88vh; border-radius:var(--r-m); object-fit:contain}
.lightbox-close{position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;
  font-size:1.3rem; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:#fff}
table.data{width:100%; border-collapse:collapse; font-size:.95rem}
table.data th,table.data td{padding:14px 20px; text-align:left; border-bottom:1px solid var(--line)}
table.data th{font-weight:600; color:var(--muted); width:46%; font-size:.9rem}
table.data tr:last-child th,table.data tr:last-child td{border-bottom:0}
table.data td{font-weight:550}
table.data tbody tr:nth-child(even){background:rgba(9,73,129,.026)}
/* Auf schmalen Geräten passt die Tabelle ohne seitliches Schieben ins Bild */
@media (max-width:620px){
  table.data{font-size:.9rem}
  table.data th,table.data td{padding:11px 12px; overflow-wrap:anywhere}
  table.data th{width:44%; font-size:.84rem}
}

/* ---------- Accordion / FAQ ---------- */
.acc{border:1px solid var(--line); border-radius:var(--r-m); background:#fff; overflow:hidden}
.acc + .acc{margin-top:12px}
.acc summary{
  list-style:none; cursor:pointer; padding:22px 26px; font-weight:600; font-size:1.05rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; font-size:1.5rem; font-weight:300; color:var(--mk-blue); transition:transform .25s; line-height:1}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 26px 24px; color:var(--muted); font-size:.98rem}
.acc .acc-body p{margin:0 0 12px}
.acc .acc-body p:last-child{margin:0}

/* ---------- KoolGuide (Produkt-Finder) ---------- */
.finder{
  border-radius:var(--r-xl); padding:clamp(26px,4vw,46px);
  background:var(--glass-bg); border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--glass-shadow);
}
.section-deep .finder{background:var(--glass-bg-dark); border-color:rgba(255,255,255,.2); color:#fff}
.finder-step + .finder-step{margin-top:30px; padding-top:30px; border-top:1px solid var(--line)}
.section-deep .finder-step + .finder-step{border-color:rgba(255,255,255,.16)}
.finder-step h3{font-size:1.1rem; margin-bottom:14px; display:flex; align-items:center; gap:10px}
.finder-step h3 i{
  width:26px; height:26px; border-radius:50%; background:var(--mk-blue); color:#fff; font-style:normal;
  font-size:.8rem; font-weight:700; display:grid; place-items:center; flex:none;
}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  padding:10px 18px; border-radius:999px; font-size:.9rem; font-weight:600; cursor:pointer;
  border:1px solid rgba(9,73,129,.22); background:rgba(255,255,255,.6); color:var(--ink-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .18s, background .2s, color .2s, border-color .2s;
}
.chip:hover{transform:translateY(-2px); border-color:rgba(9,73,129,.45)}
.chip.on{background:var(--mk-blue); border-color:var(--mk-blue); color:#fff}
.section-deep .chip{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff}
.section-deep .chip.on{background:#fff; color:var(--mk-blue); border-color:#fff}
.finder-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px;
  padding-top:26px; border-top:1px solid var(--line)}
.section-deep .finder-actions{border-color:rgba(255,255,255,.16)}
.finder-result{margin-top:34px}
.finder-empty{padding:36px; text-align:center; color:var(--muted); font-size:.98rem}

/* ---------- Shop ---------- */
.shop-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-bottom:34px}
.notice{
  padding:16px 22px; border-radius:var(--r-m); background:rgba(208,50,63,.07);
  border:1px solid rgba(208,50,63,.20); color:var(--mk-red-600); font-size:.92rem; font-weight:550;
}
.cart-table{width:100%; border-collapse:collapse}
.cart-table th{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  text-align:left; padding:0 12px 14px; font-weight:700}
.cart-table td{padding:16px 12px; border-top:1px solid var(--line); vertical-align:middle}
.cart-item{display:flex; align-items:center; gap:16px}
.cart-item .thumb{width:64px; height:64px; border-radius:14px; flex:none; object-fit:contain;
  background:linear-gradient(160deg,#eef3f8,#dce8f3); padding:6px}
.cart-item b{display:block; font-size:1rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.qty button{width:32px; height:32px; border:0; background:transparent; cursor:pointer; font-size:1.05rem; color:var(--mk-blue)}
.qty button:hover{background:var(--mk-blue-100)}
.qty span{min-width:32px; text-align:center; font-weight:650; font-size:.92rem}
.rm{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.85rem; text-decoration:underline}
.rm:hover{color:var(--mk-red)}
.sum{display:grid; gap:10px; font-size:.98rem}
.sum div{display:flex; justify-content:space-between; gap:20px}
.sum .total{padding-top:12px; border-top:1px solid var(--line); font-size:1.3rem; font-weight:700; letter-spacing:-.02em}

/* Forms */
.field{display:grid; gap:7px; margin-bottom:16px}
.field label{font-size:.84rem; font-weight:650; color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px; border-radius:14px; border:1px solid rgba(10,22,32,.16);
  font-family:inherit; font-size:.97rem; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--mk-blue-400); box-shadow:0 0 0 4px rgba(61,143,214,.16);
}
.field textarea{min-height:140px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.checkline{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--muted); margin-bottom:18px}
.checkline input{margin-top:3px; flex:none; width:16px; height:16px}

/* ---------- Downloads ---------- */
.dl-nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px}
.dl-list{display:grid; gap:12px}
.dl-item{
  display:flex; align-items:center; gap:18px; padding:18px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-m); transition:transform .25s, box-shadow .25s;
}
.dl-item:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(6,23,38,.10)}
.dl-ico{width:42px; height:52px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--mk-blue-400),var(--mk-blue)); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.04em}
.dl-meta{flex:1; min-width:0}
.dl-meta b{display:block; font-size:1rem; font-weight:650}
.dl-meta span{font-size:.84rem; color:var(--muted)}
.dl-item .btn{flex:none}
@media (max-width:600px){
  .dl-item{flex-wrap:wrap}
  .dl-item .btn{width:100%}
}

/* ---------- Anwendungen ---------- */
.use-card{position:relative; border-radius:var(--r-l); overflow:hidden; min-height:310px;
  display:flex; align-items:flex-end; padding:28px; color:#fff;
  background:linear-gradient(160deg,#12395f,#061726);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s}
.use-card:hover{transform:translateY(-5px); box-shadow:0 22px 54px rgba(6,23,38,.24)}
.use-card .photo-figure{position:absolute; inset:0; z-index:0}
.use-card .photo-figure img{transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.use-card:hover .photo-figure img{transform:scale(1.06)}
.use-card::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(4,16,27,.90) 0%, rgba(4,16,27,.42) 52%, rgba(4,16,27,.10) 100%)}
.use-card > .use-body{position:relative; z-index:2}
.use-card .photo-credit{z-index:3}
.use-card h3{margin-bottom:8px}
.use-card p{margin:0; font-size:.94rem; color:rgba(255,255,255,.74)}

/* ---------- Footer ---------- */
.footer{background:#f5f7fa; border-top:1px solid var(--line); padding:64px 0 28px; font-size:.9rem}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; margin-bottom:44px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:16px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a{color:var(--ink-2); text-decoration:none}
.footer a:hover{color:var(--mk-blue); text-decoration:none}
.footer-logo img{height:44px; width:auto; margin-bottom:18px}
.footer-legal{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}
.footer-legal a{color:var(--muted)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); z-index:1200;
  padding:14px 26px; border-radius:999px; font-size:.92rem; font-weight:600; color:#fff;
  background:rgba(9,73,129,.92); box-shadow:0 14px 40px rgba(6,23,38,.32);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .45s cubic-bezier(.16,.84,.32,1);
}
.toast.show{transform:translate(-50%,0)}

/* ---------- Prose (Rechtstexte) ---------- */
.prose{font-size:1rem; line-height:1.72; color:var(--ink-2)}
.prose h2{font-size:1.5rem; margin:44px 0 14px}
.prose h3{font-size:1.15rem; margin:30px 0 10px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{font-weight:650; color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin:38px 0}
.source-note{
  margin-top:46px; padding:18px 22px; border-radius:var(--r-m); background:var(--bg-soft);
  border:1px solid var(--line); font-size:.85rem; color:var(--muted);
}

/* Breadcrumb */
.crumb{font-size:.82rem; color:rgba(255,255,255,.6); margin-bottom:16px}
.crumb a{color:rgba(255,255,255,.82)}
.crumb span{opacity:.5; margin:0 7px}

/* Sticky Produkt-Bar */
.buybar{
  position:sticky; top:var(--nav-h); z-index:700; padding:12px 0;
  background:rgba(255,255,255,.76); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
}
.buybar-inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex;
  align-items:center; gap:16px; flex-wrap:wrap}
.buybar b{font-size:1.02rem}
.buybar .price{margin-left:auto; font-weight:700; font-size:1.05rem}
.buybar .price small{font-weight:500; color:var(--muted); font-size:.72rem; display:block}
/* Auf schmalen Geräten bleibt die Leiste eine einzige, flache Zeile:
   Name, Preis und Kaufknopf. Die Kurzdaten stehen ohnehin darunter im Text. */
@media (max-width:760px){
  .buybar{padding:8px 0}
  .buybar-inner{padding:0 16px; gap:10px; flex-wrap:nowrap}
  .buybar b{font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .buybar .specs, .buybar .buybar-specs, .buybar .bb-brand{display:none}
  .buybar .price{font-size:.98rem; white-space:nowrap}
  .buybar .price small{display:none}
  .buybar .btn{padding:9px 15px; font-size:.86rem; white-space:nowrap}
}

/* ---------- Bildnachweis ---------- */
.credit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px}
.credit-card{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden}
.credit-media{position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  overflow:hidden; background:linear-gradient(168deg,#f2f6fa,#dbe7f2)}
.credit-media img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:10px}
.credit-fail{font-size:.78rem; color:var(--muted); padding:14px; text-align:center}
.credit-card figcaption{padding:14px 16px 16px; display:grid; gap:4px; font-size:.8rem}
.credit-card figcaption b{font-size:.9rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--mk-blue)}

/* ---------- Konfigurator (Varianten und Zubehör) ---------- */
.cfg{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(24px,4vw,48px);
  align-items:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(22px,3vw,36px);
}
@media (max-width:860px){.cfg{grid-template-columns:1fr}}
.cfg-media{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-l); overflow:hidden;
  position:sticky; top:calc(var(--nav-h) + 90px);
  background:
    radial-gradient(70% 54% at 50% 16%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(162deg,#d4e3f1,#7ea6ca);
}
@media (max-width:860px){.cfg-media{position:relative; top:auto; aspect-ratio:4/3}}
.cfg-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  padding:26px; transition:opacity .3s}
.cfg-step + .cfg-step{margin-top:28px; padding-top:26px; border-top:1px solid var(--line)}
.cfg-step h3{font-size:1.05rem; margin-bottom:12px; display:flex; align-items:center; gap:10px}
.cfg-step h3 i{width:26px; height:26px; border-radius:50%; background:var(--mk-blue); color:#fff;
  font-style:normal; font-size:.8rem; font-weight:700; display:grid; place-items:center; flex:none}
.opt-list{display:grid; gap:10px}
.opt{
  display:flex; align-items:flex-start; gap:14px; padding:15px 18px; cursor:pointer;
  border:1.5px solid rgba(10,22,32,.12); border-radius:var(--r-m); background:#fff;
  transition:border-color .2s, background .2s, transform .18s;
}
.opt:hover{border-color:rgba(9,73,129,.4); transform:translateY(-1px)}
.opt input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--mk-blue)}
.opt:has(input:checked){border-color:var(--mk-blue); background:rgba(9,73,129,.045)}
.opt-body{flex:1; min-width:0; display:grid; gap:3px}
.opt-body b{font-size:1rem; font-weight:600}
.opt-desc{font-size:.85rem; color:var(--muted); line-height:1.45}
.opt-price{font-weight:650; font-size:.95rem; white-space:nowrap; color:var(--mk-blue)}
.cfg-foot{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px;
  padding-top:24px; border-top:1px solid var(--line)}
.cfg-sum{display:grid; gap:2px; margin-right:auto}
.cfg-label{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}
.cfg-total{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.03em; line-height:1.1}
.cfg-list{min-height:1.2em}

/* Platzhalter liegt hinter dem Bild und wird sichtbar, wenn es nicht lädt */
.p-media .ph{position:absolute; inset:0; z-index:0}

/* ---------- Hero: drei Kernargumente ---------- */
.hero-points{
  list-style:none; margin:30px auto 34px; padding:0; max-width:1020px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:720px){.hero-points{grid-template-columns:1fr; max-width:380px}}
.hero-points li{
  padding:16px 18px; border-radius:var(--r-m); text-align:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.hero-points b{display:block; font-size:1.02rem; font-weight:650; color:#fff; margin-bottom:3px}
.hero-points span{font-size:.84rem; color:rgba(255,255,255,.68); line-height:1.4}

/* Scroll-Hinweis am Ende des Heros */
.scroll-cue{
  position:relative; z-index:3; margin-top:38px; display:inline-flex; flex-direction:column;
  align-items:center; gap:10px; color:rgba(255,255,255,.66); text-decoration:none;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
}
.scroll-cue:hover{color:#fff; text-decoration:none}
.scroll-cue i{
  width:24px; height:38px; border-radius:999px; border:1.5px solid rgba(255,255,255,.4);
  position:relative; display:block;
}
.scroll-cue i::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:#fff; transform:translateX(-50%); animation:cue 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}
  70%{opacity:1;transform:translate(-50%,14px)}100%{opacity:0;transform:translate(-50%,16px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue i::after{animation:none}}

/* ---------- Produktvideo ---------- */
.video-stage{
  position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:16/9; background:linear-gradient(168deg,#0e2c48,#061726);
  box-shadow:0 30px 80px rgba(6,23,38,.28); display:grid; place-items:center;
}
.video-stage video{width:100%; height:100%; object-fit:cover; display:block}
.video-stage.no-src video{opacity:.28}
.video-fallback{
  position:absolute; inset:auto 0 0 0; z-index:2; display:none; padding:24px 28px;
  background:linear-gradient(0deg,rgba(4,16,27,.94),rgba(4,16,27,0));
  color:#fff; text-align:center;
}
.video-stage.no-src .video-fallback{display:block}
.video-fallback b{display:block; font-size:1rem; margin-bottom:4px}
.video-fallback span{font-size:.86rem; color:rgba(255,255,255,.72)}
.video-fallback code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  background:rgba(255,255,255,.12); padding:2px 7px; border-radius:6px;
}
.video-btn{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0;
  background:transparent; cursor:pointer; display:grid; place-items:center;
}
.video-btn::after{
  content:""; width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path d='M10 6l14 9-14 9z' fill='white'/></svg>");
  background-repeat:no-repeat; background-position:56% 50%;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), background-color .25s;
}
.video-btn:hover::after{transform:scale(1.07); background-color:rgba(255,255,255,.34)}
.video-stage.playing .video-btn::after{opacity:0}
.video-stage.no-src .video-btn{display:none}

/* ---------- Zurück nach oben ---------- */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:850; width:48px; height:48px;
  border-radius:50%; border:1px solid var(--glass-brd); cursor:pointer;
  background:var(--glass-bg); color:var(--mk-blue);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--glass-shadow); display:grid; place-items:center;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.3,1), background .2s;
}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{background:rgba(255,255,255,.9)}
.to-top::after{
  content:""; width:11px; height:11px; border-left:2px solid currentColor;
  border-top:2px solid currentColor; transform:rotate(45deg) translate(2px,2px);
}
@media (max-width:600px){.to-top{right:16px; bottom:16px; width:44px; height:44px}}

/* kompaktere Variante des Bildbandes */
.photo-band-sm{min-height:260px}
.photo-band-sm .band-overlay{padding:26px 28px}
.photo-band-sm .band-overlay h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.photo-band-sm .band-overlay p{font-size:.9rem}
@media (max-width:620px){.photo-band-sm{min-height:300px}}
.compare-item .big-text{font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.03em}
.photo-band-sm .band-overlay p{font-size:.95rem; line-height:1.5}

/* ==========================================================================
   Szenario-Tool
   ========================================================================== */
.sz-stage{
  --flow-in:#c85a2a; --flow-out:#2d80c8; --fan-speed:1.6s;
  display:grid; grid-template-columns:minmax(0,138px) minmax(0,1.7fr) minmax(0,138px);
  gap:clamp(12px,2.2vw,30px);
  align-items:center; padding:clamp(20px,3.4vw,40px) clamp(14px,2.4vw,30px);
  border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #14406b 0%, #071c2e 65%, #04101b 100%);
  box-shadow:0 30px 80px rgba(6,23,38,.3);
}
.sz-col{display:grid; gap:14px}
.sz-bubble{
  position:relative; border-radius:50%; aspect-ratio:1/1; width:100%; max-width:132px;
  margin:0 auto; display:grid; place-items:center; text-align:center; color:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.34), inset 0 2px 14px rgba(255,255,255,.34);
  transition:background .45s ease;
}
.sz-bubble::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 46%);
}
.sz-bubble .v{display:block; font-size:clamp(1.25rem,2.3vw,1.72rem); font-weight:700;
  letter-spacing:-.04em; line-height:1}
.sz-bubble .v small{font-size:.44em; font-weight:600; margin-left:.1em}
.sz-bubble .k{display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; opacity:.85; margin-top:6px}
.sz-caption{text-align:center; font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55)}

/* Gerät als Skizze */
.sz-device{position:relative; display:grid; place-items:center; min-height:300px}
.sz-svg{width:100%; max-width:520px; height:auto; overflow:visible}
.sz-fan{transform-box:fill-box; transform-origin:center;
  animation:sz-spin var(--fan-speed) linear infinite}
@keyframes sz-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sz-fan{animation:none}}
.sz-flow line{stroke-linecap:round}
.sz-flow-in line{stroke:var(--flow-in); animation:sz-flow 1.5s linear infinite}
.sz-flow-out line{stroke:var(--flow-out); animation:sz-flow 1.5s linear infinite}
@keyframes sz-flow{0%{stroke-dashoffset:26;opacity:0}20%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.sz-flow line{animation:none;opacity:.75}}

/* Regler */
.sz-controls{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:clamp(26px,4vw,40px)}
@media (max-width:720px){.sz-controls{grid-template-columns:1fr}}
.sz-control{
  padding:22px 24px; border-radius:var(--r-l); background:#fff;
  border:1px solid var(--line); box-shadow:0 8px 30px rgba(6,23,38,.06);
}
.sz-control header{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:14px}
.sz-control h3{margin:0; font-size:1.02rem}
.sz-control .out{font-size:1.35rem; font-weight:700; letter-spacing:-.03em; color:var(--mk-blue)}
.sz-control input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(90deg,#2d80c8,#d64a26); outline:none; cursor:pointer;
}
.sz-control.hum input[type=range]{background:linear-gradient(90deg,#b0becd,#1a84c4)}
.sz-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff;
  border:2px solid var(--mk-blue); box-shadow:0 3px 12px rgba(6,23,38,.28); cursor:grab;
}
.sz-control input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--mk-blue);
  box-shadow:0 3px 12px rgba(6,23,38,.28); cursor:grab;
}
.sz-scale{display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted);
  margin-top:8px}
.sz-presets{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:clamp(22px,3vw,32px) 0 0}
.sz-result{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:clamp(24px,4vw,36px)}
@media (max-width:720px){.sz-result{grid-template-columns:1fr}}
.sz-result div{padding:20px; border-radius:var(--r-m); background:var(--bg-soft);
  border:1px solid var(--line); text-align:center}
.sz-result b{display:block; font-size:1.6rem; font-weight:700; letter-spacing:-.03em;
  color:var(--mk-blue)}
.sz-result span{font-size:.84rem; color:var(--muted)}
.sz-warn{
  margin-top:22px; padding:16px 22px; border-radius:var(--r-m); font-size:.92rem;
  background:rgba(208,50,63,.07); border:1px solid rgba(208,50,63,.22); color:var(--mk-red-600);
}

/* Kundenlogos */
.logo-wall{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px}
.logo-cell{
  position:relative; display:grid; place-items:center; padding:22px 18px; min-height:104px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.logo-cell:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(6,23,38,.10)}
.logo-cell img{max-height:52px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:filter .25s, opacity .25s}
.logo-cell:hover img{filter:none; opacity:1}
.logo-cell .wordmark{
  font-size:1.05rem; font-weight:700; letter-spacing:-.02em; color:var(--ink-2); text-align:center;
}
.logo-cell .wordmark small{display:block; font-size:.68rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-top:4px}

/* Kontakt: große Telefonnummer */
.call-block{text-align:center; padding:clamp(30px,5vw,56px) 24px; border-radius:var(--r-xl);
  background:var(--bg-soft); border:1px solid var(--line)}
.call-num{
  display:inline-block; font-size:clamp(2.1rem,6vw,3.8rem); font-weight:700; letter-spacing:-.045em;
  color:var(--mk-blue); text-decoration:none; line-height:1.05;
}
.call-num:hover{color:var(--mk-blue-600); text-decoration:none}
.call-mail{
  display:inline-block; margin-top:14px; font-size:clamp(1.05rem,2.4vw,1.5rem); font-weight:600;
  color:var(--ink-2); text-decoration:none; letter-spacing:-.02em;
}
.call-mail:hover{color:var(--mk-blue)}

/* Referenzkarten auf Über uns */
.ref-card{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(20px,3vw,42px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(20px,3vw,34px); align-items:start;
}
@media (max-width:860px){.ref-card{grid-template-columns:1fr}}
.ref-media{
  position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(168deg,#12395f,#061726); position:sticky;
  top:calc(var(--nav-h) + 24px);
}
@media (max-width:860px){.ref-media{position:relative; top:auto}}
.ref-body .prose{font-size:.96rem}
.ref-meta{margin:-6px 0 18px; font-size:.9rem; font-weight:600; color:var(--mk-blue)}
.temp-rh{margin:14px 0 0; font-size:.95rem; color:rgba(255,255,255,.68)}
.temp-rh b{color:#fff; font-weight:650}
@media (max-width:980px){.hero-points{grid-template-columns:1fr 1fr; max-width:560px}}
@media (max-width:460px){.hero-points{grid-template-columns:1fr; max-width:380px}}
.sz-note{
  margin-top:22px; padding:16px 22px; border-radius:var(--r-m); font-size:.92rem;
  background:rgba(9,73,129,.06); border:1px solid rgba(9,73,129,.18); color:var(--ink-2);
}
.sz-hint{
  margin:2px auto 0; max-width:210px; padding:12px 14px; border-radius:var(--r-m);
  font-size:.76rem; line-height:1.45; text-align:left; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}

/* Luftfeuchte-Zeile im Temperatur-Modul weiter nach unten */
.temp-value{margin-bottom:6px}
.temp-rh{margin:26px 0 0}

/* KoolGuide: Zusatzoptionen */
.finder-extra{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.section-deep .finder-extra{border-color:rgba(255,255,255,.16)}
.finder-extra summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  font-size:1.02rem; font-weight:650;
}
.finder-extra summary::-webkit-details-marker{display:none}
.finder-extra summary::before{
  content:"+"; width:24px; height:24px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:rgba(9,73,129,.10); color:var(--mk-blue);
  font-size:1.05rem; font-weight:400; line-height:1;
}
.finder-extra[open] summary::before{content:"−"}
.finder-extra summary span{font-size:.84rem; font-weight:400; color:var(--muted)}

/* KoolView-Teaser auf der Startseite */
.lab-promo{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(22px,4vw,48px); align-items:center;
  padding:clamp(26px,4vw,44px); border-radius:var(--r-xl);
  background:linear-gradient(150deg,#eef4fa,#dbe8f4); border:1px solid var(--line);
}
@media (max-width:820px){.lab-promo{grid-template-columns:1fr}}
.lab-preview{display:flex; align-items:center; justify-content:center; gap:14px}
.lab-bubble{
  width:104px; height:104px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 14px 34px rgba(6,23,38,.22), inset 0 2px 12px rgba(255,255,255,.35);
}
.lab-bubble.warm{background:linear-gradient(150deg,#d9603a,#b23b1e)}
.lab-bubble.cool{background:linear-gradient(150deg,#3d94d8,#0b5aa0)}
.lab-bubble b{font-size:1.55rem; font-weight:700; letter-spacing:-.04em; line-height:1}
.lab-bubble span{font-size:.72rem; opacity:.85}
.lab-arrow{width:44px; height:2px; background:var(--mk-blue-400); position:relative; flex:none}
.lab-arrow::after{
  content:""; position:absolute; right:-1px; top:50%; width:9px; height:9px;
  border-top:2px solid var(--mk-blue-400); border-right:2px solid var(--mk-blue-400);
  transform:translateY(-50%) rotate(45deg);
}

/* Echtes Logo auf der Geräteblende im KoolView */
.sz-frame{position:relative; width:100%; max-width:520px; margin:0 auto}
.sz-frame .sz-svg{max-width:100%}
.sz-logo{
  position:absolute; left:34.5%; top:57.2%; width:31%; height:auto;
  pointer-events:none; filter:drop-shadow(0 1px 1px rgba(255,255,255,.6));
}

/* Porträt vollständig zeigen, nicht beschneiden */
.split-media.portrait{background:linear-gradient(168deg,#eaf1f8,#cfdeed); aspect-ratio:4/5}
.split-media.portrait .photo-figure{position:absolute; inset:0}
.split-media.portrait img{width:100%; height:100%; object-fit:contain; padding:18px}
@media (max-width:880px){.split-media.portrait{aspect-ratio:4/4}}
.sz-result-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.sz-result-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sz-result-4{grid-template-columns:1fr}}

/* ==========================================================================
   KoolView: Einstellungen links, Ergebnis rechts
   ========================================================================== */
.sz-lab{
  display:grid; grid-template-columns:minmax(280px,340px) 1fr;
  gap:clamp(18px,2.6vw,32px); align-items:stretch;
}
@media (max-width:1000px){.sz-lab{grid-template-columns:1fr}}
.sz-panel{
  padding:clamp(20px,2.4vw,26px); border-radius:var(--r-xl); background:#fff;
  border:1px solid var(--line); box-shadow:0 14px 44px rgba(6,23,38,.08);
  display:flex; flex-direction:column; gap:18px; align-self:start;
}
.sz-panel-head{
  margin:0; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mk-blue);
}
.sz-panel-sub{
  margin:6px 0 -4px; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.sz-panel .sz-control{
  padding:0; border:0; box-shadow:none; background:none; border-radius:0;
}
.sz-panel .sz-control + .sz-control{padding-top:16px; border-top:1px solid var(--line)}
.sz-panel .sz-presets{
  display:grid; grid-template-columns:1fr; gap:8px; justify-content:stretch; margin:0;
}
.sz-panel .sz-presets .chip{text-align:left; justify-content:flex-start; width:100%}
.sz-view{display:flex; flex-direction:column; gap:12px; min-width:0}
.sz-view .sz-stage{flex:1}

/* Schmale Geräte: Eingangsluft oben, dann das Gerät, dann die Ausgangsluft.
   Die beiden Werte einer Stufe stehen nebeneinander, damit die Kette lesbar bleibt. */
@media (max-width:900px){
  .sz-stage{grid-template-columns:1fr; gap:18px}
  .sz-col{grid-template-columns:1fr 1fr; gap:12px; align-items:start}
  .sz-col .sz-caption{grid-column:1 / -1; margin:0}
  .sz-col .sz-hint{grid-column:1 / -1; max-width:none}
  .sz-bubble{max-width:124px}
  .sz-device{min-height:0}
  .sz-svg, .sz-frame{max-width:340px}
  .sz-in{position:relative; padding-bottom:16px}
  .sz-in::after{
    content:"↓"; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
    font-size:1.1rem; line-height:1; color:rgba(255,255,255,.42);
  }
  .sz-out{position:relative; padding-top:16px}
  .sz-out .sz-caption::before{
    content:"↓"; display:block; font-size:1.1rem; line-height:1; margin-bottom:10px;
    color:rgba(255,255,255,.42);
  }
}
@media (max-width:380px){
  .sz-bubble{max-width:108px}
  .sz-bubble .k{font-size:.66rem; letter-spacing:.05em}
}
.sz-disclaimer{
  margin:0; padding:0 4px; font-size:.76rem; line-height:1.5; color:var(--muted);
  text-align:center;
}

/* Ergebniszahlen deutlich prominenter */
.sz-result div{padding:24px 18px}
.sz-result b{
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.05; letter-spacing:-.04em;
  margin-bottom:8px;
}
.sz-result div > span{font-size:.9rem; line-height:1.4; display:block}
.sz-result b span{display:inline; font-size:inherit; font-weight:inherit; color:inherit}

/* ==========================================================================
   Cookie-Einwilligung
   ========================================================================== */
.cc{
  position:fixed; inset:auto 0 0 0; z-index:1200; padding:clamp(12px,2vw,22px);
  display:flex; justify-content:center; pointer-events:none;
}
.cc[hidden]{display:none}
.cc-card{
  pointer-events:auto; width:min(920px,100%); border-radius:var(--r-xl);
  padding:clamp(20px,2.6vw,28px);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 70px rgba(6,23,38,.28);
  display:grid; gap:18px;
  animation:cc-in .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cc-in{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.cc-card{animation:none}}
.cc-title{margin:0 0 8px; font-size:1.12rem; letter-spacing:-.02em}
.cc-text{margin:0; font-size:.94rem; color:var(--ink-2); line-height:1.55; max-width:66ch}
.cc-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cc-actions .btn{padding:12px 22px; font-size:.94rem}
.cc-detail{display:grid; gap:12px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line)}
.cc-opt{display:flex; gap:12px; align-items:flex-start; font-size:.9rem; line-height:1.5}
.cc-opt input{margin-top:3px; width:18px; height:18px; accent-color:var(--mk-blue); flex:none}
.cc-opt b{display:block; font-weight:650; margin-bottom:2px}
.cc-opt span{color:var(--muted)}
@media (max-width:560px){
  .cc{padding:10px}
  .cc-actions{display:grid; grid-template-columns:1fr}
  .cc-actions .btn{width:100%}
}
.linklike{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.linklike:hover{color:var(--mk-blue)}

/* Honigtopf: für Menschen unsichtbar, für Programme sichtbar und verlockend */
.hp-wrap{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* Das hidden-Attribut muss stärker sein als Klassen mit display */
[hidden]{display:none !important}

/* Sprungmarke für Tastatur und Screenreader */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1300;
  background:var(--mk-blue); color:#fff; padding:14px 22px; border-radius:0 0 12px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{left:0; color:#fff}

/* ==========================================================================
   Kasse und Bestellbestätigung
   ========================================================================== */
.field-hint{display:block; margin-top:6px; font-size:.8rem; color:var(--muted)}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--mk-red); background:rgba(208,50,63,.04);
}
.checkline.has-error label{color:var(--mk-red-600)}
.field-error{display:block; margin-top:6px; font-size:.82rem; color:var(--mk-red-600)}
.form-error{
  margin:20px 0 0; padding:14px 18px; border-radius:var(--r-m); font-size:.92rem;
  background:rgba(208,50,63,.07); border:1px solid rgba(208,50,63,.22); color:var(--mk-red-600);
}
.pay-note{
  margin-top:34px; padding:20px 22px; border-radius:var(--r-l);
  background:linear-gradient(150deg,#eef4fa,#dfeaf5); border:1px solid var(--line);
  display:grid; gap:6px;
}
.pay-note b{font-size:1.02rem}
.pay-note span{font-size:.9rem; color:var(--muted); line-height:1.55}
.checkout-sum-card{position:sticky; top:calc(var(--nav-h) + 22px)}
@media (max-width:900px){.checkout-sum-card{position:static}}

.order-done{display:grid; place-items:center; padding:clamp(20px,4vw,50px) 0}
.order-done-card{
  width:min(660px,100%); text-align:center; padding:clamp(30px,5vw,56px);
  border-radius:var(--r-xl); background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 26px 70px rgba(6,23,38,.14);
  animation:order-in .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes order-in{from{opacity:0; transform:translateY(18px) scale(.98)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.order-done-card{animation:none}}
.order-check{color:var(--mk-blue); margin-bottom:22px}
.order-check path{
  stroke-dasharray:44; stroke-dashoffset:44; animation:order-check .6s .25s ease forwards;
}
@keyframes order-check{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.order-check path{animation:none; stroke-dashoffset:0}}
.order-nr{
  margin:6px 0 18px; font-size:clamp(1.6rem,3.6vw,2.3rem); font-weight:700;
  letter-spacing:-.02em; color:var(--mk-blue);
}
.order-done .lead{max-width:52ch; margin-left:auto; margin-right:auto}