/* ==========================================================================
   Thermfenster GmbH — Stylesheet
   Fonts are self-hosted (fonts/) so all url() paths here are resolved
   relative to THIS file and work identically from any page depth.
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;src:url("fonts/plex-sans-var.woff2") format("woff2");font-display:swap;}

:root{
  --ink:#16232c;
  --navy:#0d2f47;
  --navy-2:#123a56;
  --glass:#0078bf;
  --glass-deep:#005f96;
  --glass-pale:#eaf3fa;
  --paper:#ffffff;
  --paper-2:#f4f8fb;
  --metal:#7c8a94;
  --metal-line: rgba(13,47,71,.12);
  --text:#1c2b35;
  --text-soft:#5b6c76;
  --maxw:1280px;
  --header-h:84px;
  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:720px){.wrap{padding:0 20px;}}

h1,h2,h3{
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
  color:var(--text);
}
p{margin:0 0 16px;}
.eyebrow{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--glass);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--glass);display:inline-block;flex-shrink:0;}

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13px;}
.skip-link:focus{left:16px;top:16px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid var(--metal-line);
  transition:box-shadow .25s ease;
}
header.is-scrolled{box-shadow:0 10px 30px -18px rgba(13,47,71,.18);}
.navrow{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:24px;}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.logo img{height:38px;width:auto;display:block;}
nav.primary{display:flex;align-items:center;gap:34px;}
nav.primary > ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
nav.primary a{text-decoration:none;font-size:14.5px;color:var(--text);position:relative;padding:6px 0;}
nav.primary > ul > li > a:hover{color:var(--glass);}
nav.primary > ul > li.is-active > a{color:var(--glass);}
.has-dropdown{position:relative;}
.has-dropdown>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-left:6px;position:relative;top:-2px;}
.dropdown{
  position:absolute;top:100%;left:-18px;margin-top:0;
  background:var(--paper);border:1px solid var(--metal-line);
  min-width:230px;padding:18px 10px 10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 18px 40px -18px rgba(13,47,71,.25);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:9px 10px;font-size:13.5px;white-space:nowrap;}
.dropdown a:hover{background:var(--glass-pale);color:var(--glass-deep);}
.dropdown a.is-current{color:var(--glass-deep);font-weight:600;}
.mobile-sub a.is-current{color:#fff;font-weight:600;}
.navcta{
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.03em;
  text-decoration:none;white-space:nowrap;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;
  transition:color .18s ease;
}
.navcta:hover{color:var(--glass);}
.navcta .icon-phone{flex-shrink:0;}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:120;position:relative;}
.burger span{width:24px;height:1.5px;background:var(--text);display:block;transition:transform .25s ease, opacity .25s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- mobile menu panel ---------- */
.mobile-panel{
  position:fixed;inset:0;z-index:110;
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 20px) 28px 40px;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.mobile-panel.is-open{transform:translateX(0);}
.mobile-panel ul{list-style:none;margin:0;padding:0;}
.mobile-panel > ul > li{border-bottom:1px solid rgba(255,255,255,.14);}
.mobile-panel > ul > li > a{display:block;padding:18px 0;font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:22px;text-decoration:none;color:#fff;}
.mobile-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile-sub.is-open{max-height:600px;}
.mobile-sub li a{padding:10px 0 10px 16px;font-family:"IBM Plex Sans",sans-serif;font-size:15px;color:#b9c5cc;display:block;text-decoration:none;border-bottom:0;}
.mobile-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.mobile-toggle .car{transition:transform .25s ease;font-size:13px;color:#9fc2da;}
.mobile-toggle.is-open .car{transform:rotate(90deg);}
.mobile-panel .navcta{margin-top:24px;align-self:flex-start;color:#fff;border-color:rgba(255,255,255,.5);}
@media (max-width:900px){
  nav.primary{display:none;}
  .burger{display:flex;}
}

/* ---------- buttons ---------- */
.btn{
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.03em;
  padding:14px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  border:1px solid transparent;cursor:pointer;
}
.btn-solid{background:var(--glass);color:#fff;border-color:var(--glass);}
.btn-solid:hover{background:var(--glass-deep);border-color:var(--glass-deep);transform:translateY(-1px);}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-dark:hover{background:#000;transform:translateY(-1px);}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.btn-ghost:hover{border-color:#fff;transform:translateY(-1px);}
.btn-outline{border-color:var(--text);color:var(--text);}
.btn-outline:hover{background:var(--text);color:var(--paper);}

/* ---------- hero (homepage, full) ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero img,.hero .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#dfe3e6;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.4) 30%, rgba(255,255,255,0) 58%),
             linear-gradient(90deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 40%);
}
.hero-inner{position:relative;z-index:2;padding:0 32px 76px;width:100%;}
.hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:end;}
.hero .eyebrow{color:var(--glass);}
.hero .eyebrow::before{background:var(--glass);}
.hero h1{color:var(--text);font-size:clamp(34px,5.4vw,60px);max-width:15ch;}
.hero p.lead{color:var(--text-soft);max-width:46ch;font-size:17px;margin:20px 0 0;}
/* Dedicated translucent backdrop behind the hero copy (not just the
   full-bleed gradient) so eyebrow/h1/lead stay legible against any video
   frame, bright or busy, without having to darken the whole hero. */
.hero-copy{
  display:inline-block;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(1.3);
  border-radius:14px;
  padding:22px 26px;
  margin:0 -26px;
}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-card{
  background:rgba(255,255,255,.7);
  border:1px solid var(--metal-line);
  backdrop-filter:blur(14px) saturate(1.3);
  padding:26px 26px 24px;color:var(--text);
  box-shadow:0 24px 50px -30px rgba(13,47,71,.25);
}
.hero-card .hc-label{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--glass-deep);margin-bottom:12px;}
.hero-card .hc-phone{font-family:"IBM Plex Sans",sans-serif;font-size:24px;font-weight:700;color:var(--text);text-decoration:none;display:block;}
.hero-card .hc-phone:hover{color:var(--glass);}
.hero-card .hc-email{font-family:"IBM Plex Sans",sans-serif;font-size:15px;font-weight:600;color:var(--glass);text-decoration:none;display:inline-block;margin-top:4px;}
.hero-card .hc-email:hover{text-decoration:underline;}
.hero-card .hc-sub{font-size:13.5px;color:var(--text-soft);margin-top:6px;}
.hero-card hr{border:none;border-top:1px solid var(--metal-line);margin:18px 0;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-card{max-width:420px;}
}

/* ---------- hero (subpages, consistent height) ---------- */
.hero-sub{
  position:relative;
  height:52vh;
  min-height:380px;
  max-height:560px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-sub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-sub::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.36) 32%, rgba(255,255,255,0) 62%);
}
.hero-sub-inner{position:relative;z-index:2;padding:0 32px 46px;width:100%;max-width:var(--maxw);margin:0 auto;}
.hero-sub .eyebrow{color:var(--glass);}
.hero-sub .eyebrow::before{background:var(--glass);}
.hero-sub h1{color:var(--text);font-size:clamp(30px,4.4vw,46px);}
.hero-sub p.lead{color:var(--text-soft);max-width:56ch;font-size:16px;margin:14px 0 0;}
@media (max-width:640px){.hero-sub{height:44vh;min-height:320px;}}

/* hero-sub variant for categories without high-resolution source photography:
   a soft brand-blue gradient hero (no image) so the heading is never obscured */
.hero-sub.hero-sub--framed{
  align-items:center;
  background:
    repeating-linear-gradient(90deg, rgba(13,47,71,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(13,47,71,.05) 0 1px, transparent 1px 64px),
    linear-gradient(135deg, var(--glass-pale) 0%, #ffffff 100%);
}
.hero-sub.hero-sub--framed::after{display:none;}
.hero-sub.hero-sub--framed .hero-sub-inner{padding-bottom:0;}
.hero-sub.hero-sub--framed h1{color:var(--text);}
.hero-sub.hero-sub--framed p.lead{color:var(--text-soft);}

/* ---------- sections generic ---------- */
section{padding:112px 0;}
@media (max-width:720px){section{padding:64px 0;}}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(26px,3.6vw,38px);}
.section-head p{color:var(--text-soft);font-size:16px;margin-top:16px;max-width:52ch;}
.section-tight{padding-top:0;}

/* Visible by default, no JS required. JS only ever adds "js-animate" right
   before it starts observing an element, and that state only offsets
   position (never opacity) so content stays visible even if the
   IntersectionObserver never fires (e.g. deferred by the browser's
   lazy-image-loading intervention on slow mobile connections). */
.reveal{opacity:1;}
.reveal.js-animate{transform:translateY(22px);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.js-animate.is-visible{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal.js-animate{transform:none;transition:none;}}

/* ---------- intro (homepage) ---------- */
.intro{background:var(--paper);}
.intro-grid{display:grid;grid-template-columns:.85fr 1fr;gap:80px;align-items:start;}
.intro p{color:var(--text-soft);font-size:16.5px;margin:0 0 16px;}
.intro-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 24px;font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:14px;}
.intro-list li{padding:10px 0;border-top:1px solid var(--metal-line);color:var(--text-soft);}
.intro-note{margin:20px 0 0;color:var(--text-soft);font-size:14.5px;}
@media (max-width:820px){.intro-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- Leistungsgrafik / spider (homepage) ---------- */
.leistungen{background:var(--paper);}
.leistungen-head{margin-left:auto;margin-right:auto;text-align:center;max-width:640px;}
.leistungen-head .eyebrow{display:block;text-indent:.14em;}
.leistungen-head .eyebrow::before{display:none;}
.leistungen-head p{margin-left:auto;margin-right:auto;}
.spider{position:relative;width:100%;max-width:640px;aspect-ratio:1/1;margin:0 auto;}
.spider-lines{position:absolute;inset:0;width:100%;height:100%;}
.spider-lines line{stroke:var(--glass);stroke-opacity:.4;stroke-width:.5;stroke-dasharray:1.6 2.4;stroke-linecap:round;}
.spider-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42%;max-width:280px;
  background:#fff;border:1px solid var(--metal-line);border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(13,47,71,.28);
  display:flex;align-items:center;justify-content:center;
  padding:18px 22px;z-index:2;box-sizing:border-box;
}
.spider-center img{width:100%;height:auto;display:block;}
.spider-node{
  position:absolute;left:var(--nx);top:var(--ny);transform:translate(-50%,-50%);z-index:2;
  box-sizing:border-box;text-align:center;white-space:nowrap;hyphens:none;
  background:#fff;border:1.5px solid var(--glass);color:var(--glass-deep);
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13.5px;line-height:1.3;
  padding:10px 16px;box-shadow:0 10px 24px -14px rgba(13,47,71,.3);
  text-decoration:none;display:block;cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spider-node:hover,
.spider-node:focus-visible{
  transform:translate(-50%,-50%) translateY(-4px);
  background:var(--glass);color:#fff;border-color:var(--glass);
  box-shadow:0 16px 32px -12px rgba(0,120,191,.45);
}
.spider-node:focus-visible{outline:2px solid var(--glass-deep);outline-offset:3px;}
@media (max-width:900px){
  .spider{max-width:520px;}
  .spider-node{font-size:12px;padding:8px 12px;}
  .spider-center{padding:14px 18px;}
}
/* Below 768px the circular layout stays circular (logo centered, dashed
   lines, labels on a ring) — script.js swaps in a recalculated set of
   --nx/--ny positions (reordered so long and short labels alternate
   around the ring, long labels on a slightly larger radius) so that
   every label pair clears at this font-size/padding within a
   ~320–390px-wide container. This block only needs to shrink the font,
   tighten the padding and cap the container width; the actual
   positioning math lives in script.js and is restored to the untouched
   desktop values above 768px. */
@media (max-width:767px){
  .spider{max-width:400px;}
  .spider-center{width:36%;max-width:150px;padding:10px 13px;border-radius:12px;}
  .spider-node{
    font-size:10px;padding:6px 8px;letter-spacing:-.01em;
    border-width:1px;line-height:1.2;
  }
  .spider-lines line{stroke-width:.4;}
}
.spider-note{text-align:center;color:var(--text-soft);font-size:14.5px;margin:36px 0 0;}

/* ---------- product pane grid (homepage overview) ---------- */
.panes{background:var(--paper-2);}
.pane-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--metal-line);}
.pane{position:relative;aspect-ratio:4/3.1;overflow:hidden;border-right:1px solid var(--metal-line);border-bottom:1px solid var(--metal-line);text-decoration:none;display:block;}
.pane-grid .pane:nth-child(4n){border-right:none;}
.pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.pane::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(16,24,31,0) 42%, rgba(16,24,31,.82) 100%);}
.pane:hover img{transform:scale(1.06);}
.pane-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pane-label .pn{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:11px;color:#9fc2da;}
.pane-label h3{color:#fff;font-size:19px;font-weight:700;margin-top:4px;}
.pane-arrow{width:30px;height:30px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;transition:background .2s ease, border-color .2s ease, color .2s ease;}
.pane:hover .pane-arrow{background:var(--glass);border-color:var(--glass);}

/* pane variant for categories without product photos yet */
.pane.pane--placeholder .pane-placeholder-bg{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, var(--paper) 0 14px, var(--paper-2) 14px 28px);
}
.pane.pane--placeholder::after{display:none;}
.pane.pane--placeholder .pane-label{background:linear-gradient(0deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.6) 65%, rgba(255,255,255,0) 100%);}
.pane.pane--placeholder .pane-label .pn{color:var(--glass);}
.pane.pane--placeholder .pane-label h3{color:var(--text);}
.pane.pane--placeholder .pane-arrow{border-color:var(--metal-line);color:var(--text);}
.pane.pane--placeholder:hover .pane-arrow{background:var(--glass);border-color:var(--glass);color:#fff;}
@media (max-width:980px){
  .pane-grid{grid-template-columns:repeat(2,1fr);}
  .pane-grid .pane:nth-child(4n){border-right:1px solid var(--metal-line);}
  .pane-grid .pane:nth-child(2n){border-right:none;}
}
@media (max-width:560px){
  .pane-grid{grid-template-columns:1fr;}
  .pane-grid .pane{border-right:none !important;aspect-ratio:4/2.6;}
}

/* ---------- service / vorteile ---------- */
.service{background:var(--paper-2);color:var(--text);}
.service .eyebrow{color:var(--glass);}
.service .eyebrow::before{background:var(--glass);}
.service h2{color:var(--text);}
.service .section-head p{color:var(--text-soft);}
.service-list{list-style:none;margin:52px 0 0;padding:0;border-top:1px solid var(--metal-line);}
.service-item{display:grid;grid-template-columns:70px 1fr 2fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--metal-line);align-items:baseline;}
.service-item .si-num{font-family:"IBM Plex Sans",sans-serif;font-weight:700;color:var(--glass);font-size:14px;}
.service-item h4{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:21px;margin:0;color:var(--text);}
.service-item p{margin:0;color:var(--text-soft);font-size:15px;max-width:60ch;}
@media (max-width:720px){.service-item{grid-template-columns:34px 1fr;}.service-item p{grid-column:2;margin-top:6px;}}

/* ---------- contact teaser (homepage) ---------- */
.teaser{background:var(--glass-pale);}
.teaser-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.teaser h2{font-size:clamp(24px,3.2vw,32px);}
.teaser-addr{font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:14.5px;color:var(--text-soft);margin-top:18px;line-height:1.9;}
.teaser-addr b{color:var(--text);}
.teaser-addr a{text-decoration:none;}
.teaser-addr a:hover{text-decoration:underline;}
@media (max-width:760px){.teaser-grid{grid-template-columns:1fr;text-align:left;}}

/* ---------- Google reviews (homepage) ---------- */
.reviews{background:var(--paper-2);}
.reviews-summary{display:flex;align-items:center;gap:28px;margin-bottom:56px;flex-wrap:wrap;}
.reviews-score{font-family:"IBM Plex Sans",sans-serif;font-size:56px;font-weight:700;color:var(--text);line-height:1;}
.stars{position:relative;display:inline-block;font-size:20px;line-height:1;letter-spacing:3px;}
.stars-track{color:#dbe1e5;}
.stars-fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#f5b400;}
.star-row{display:inline-flex;font-size:16px;letter-spacing:2px;line-height:1;}
.star-row .star{color:#dbe1e5;}
.star-row .star--on{color:#f5b400;}
.reviews-count{margin:8px 0 0;font-size:14px;color:var(--text-soft);}
.reviews-carousel{position:relative;display:flex;align-items:center;gap:16px;}
.reviews-track{
  display:flex;gap:24px;overflow-x:auto;
  flex:1 1 0;min-width:0;
  scroll-snap-type:x mandatory;scroll-padding-left:0;scroll-padding-right:0;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews-track::-webkit-scrollbar{display:none;}
.review-card{
  scroll-snap-align:start;flex:0 0 calc(33.333% - 16px);
  background:#fff;border:1px solid var(--metal-line);padding:28px;display:flex;flex-direction:column;gap:16px;
}
.review-card .stars{font-size:16px;letter-spacing:2px;}
.review-text{margin:0;color:var(--text);font-size:15px;line-height:1.65;flex-grow:1;}
.review-author{display:flex;align-items:center;gap:12px;}
.review-avatar{width:38px;height:38px;border-radius:50%;background:var(--glass-pale);color:var(--glass-deep);display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:14px;flex-shrink:0;}
.review-name{display:block;font-size:14px;font-weight:600;color:var(--text);}
.review-date{display:block;font-size:12.5px;color:var(--metal);margin-top:2px;}
.carousel-arrow{
  position:relative;z-index:2;pointer-events:auto;
  flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid var(--metal-line);background:#fff;color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.carousel-arrow:hover{background:var(--glass);border-color:var(--glass);color:#fff;}
.reviews-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:48px;}
@media (max-width:900px){.review-card{flex-basis:calc(50% - 12px);}}
@media (max-width:640px){
  .reviews-summary{gap:18px;}.reviews-score{font-size:44px;}
  .review-card{flex-basis:85%;}
  .reviews-carousel{gap:8px;}
  .carousel-arrow{font-size:18px;}
}

/* ---------- product page: description + gallery ---------- */
.product-intro{background:var(--paper);}
.product-intro-grid{display:grid;grid-template-columns:.8fr 1fr;gap:70px;}
.product-intro p{color:var(--text-soft);font-size:16.5px;}
@media (max-width:820px){.product-intro-grid{grid-template-columns:1fr;gap:20px;}}

.gallery{background:var(--paper-2);}
.gallery-heading{margin-bottom:34px;}
.gallery-heading h3{font-family:"IBM Plex Sans",sans-serif;font-size:22px;font-weight:700;color:var(--text);}
.gallery-heading .eyebrow{margin-bottom:10px;}
.gallery-heading p{color:var(--text-soft);font-size:16px;margin-top:10px;max-width:60ch;}
/* Flexbox (not Grid) on purpose: an incomplete last row must end where the
   images end, not stretch a background-filled track across the empty columns. */
.g-grid{display:flex;flex-wrap:wrap;border-left:1px solid var(--metal-line);border-top:1px solid var(--metal-line);margin-bottom:64px;}
.g-grid:last-child{margin-bottom:0;}
.g-grid a{
  position:relative;display:block;overflow:hidden;background:var(--paper);
  box-sizing:border-box;flex:0 0 25%;max-width:25%;aspect-ratio:1/1;
  border-right:1px solid var(--metal-line);border-bottom:1px solid var(--metal-line);
}
.g-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .45s ease;padding:6px;}
.g-grid a:hover img{transform:scale(1.08);}
@media (max-width:900px){.g-grid a{flex-basis:33.333%;max-width:33.333%;}}
@media (max-width:600px){.g-grid a{flex-basis:50%;max-width:50%;}}

.gallery-placeholder-note{font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:12px;color:var(--metal);margin:-6px 0 0;}
.g-grid--placeholder .g-placeholder{
  position:relative;flex:0 0 25%;max-width:25%;aspect-ratio:1/1;box-sizing:border-box;
  border-right:1px solid var(--metal-line);border-bottom:1px solid var(--metal-line);
  background:repeating-linear-gradient(45deg, var(--paper) 0 10px, var(--paper-2) 10px 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.g-grid--placeholder .g-placeholder span{
  font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:12px;color:var(--metal);
  border:1px dashed var(--metal-line);padding:6px 10px;background:var(--paper);
}
@media (max-width:900px){.g-grid--placeholder .g-placeholder{flex-basis:33.333%;max-width:33.333%;}}
@media (max-width:600px){.g-grid--placeholder .g-placeholder{flex-basis:50%;max-width:50%;}}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(9,14,18,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:40px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lightbox-close{position:absolute;top:24px;right:28px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;}
.lightbox-close:hover{background:rgba(255,255,255,.12);}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:52px;height:52px;border-radius:50%;font-size:20px;cursor:pointer;}
.lightbox-nav:hover{background:rgba(255,255,255,.12);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
@media (max-width:640px){.lightbox-nav{width:42px;height:42px;}.lightbox-prev{left:8px;}.lightbox-next{right:8px;}}

/* ---------- CTA band (product pages) ---------- */
.cta-band{background:var(--glass);color:#fff;text-align:center;}
.cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,36px);max-width:22ch;margin:0 auto;}
.cta-band p{color:#eaf3fa;max-width:52ch;margin:18px auto 32px;}
.cta-band .eyebrow{display:block;text-indent:.14em;color:#eaf3fa;}
.cta-band .eyebrow::before{display:none;}
.cta-band-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- legal pages (Impressum / Datenschutz / AGB) ---------- */
.legal{background:var(--paper);}
.legal-body{max-width:760px;}
.legal-body h2{font-size:24px;margin:48px 0 16px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-size:18px;margin:30px 0 12px;}
.legal-body p{color:var(--text-soft);font-size:15.5px;margin:0 0 14px;}
.legal-body a{color:var(--glass);text-decoration:underline;}
.legal-body ul,.legal-body ol{color:var(--text-soft);font-size:15.5px;padding-left:22px;margin:0 0 14px;}
.legal-body li{margin-bottom:6px;}
.legal-toc{list-style:none;margin:0 0 50px;padding:0;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--metal-line);border-bottom:1px solid var(--metal-line);padding:18px 0;}
.legal-toc a{text-decoration:none;color:var(--text-soft);}
.legal-toc a:hover{color:var(--glass);}
.legal-body table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14.5px;}
.legal-body table caption{text-align:left;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--metal);margin-bottom:8px;}
.legal-body th,.legal-body td{border:1px solid var(--metal-line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--text-soft);}
.legal-body th{background:var(--paper-2);color:var(--text);font-weight:600;}
.legal-body strong{color:var(--text);}

/* ---------- kontakt page ---------- */
.kontakt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start;}
.kontakt-card{border:1px solid var(--metal-line);padding:36px;background:var(--paper-2);}
.kontakt-card .k-row{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--metal-line);font-size:15px;}
.kontakt-card .k-row:first-of-type{border-top:none;}
.kontakt-card .k-label{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--metal);width:84px;flex-shrink:0;padding-top:2px;}
.kontakt-card a{text-decoration:none;color:var(--glass);}
.kontakt-card a:hover{text-decoration:underline;}
.map-frame{border:1px solid var(--metal-line);width:100%;aspect-ratio:4/3.4;}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15) contrast(1.02);}
.map-placeholder{
  width:100%;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:32px;background:var(--paper-2);
}
.map-placeholder-addr{font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:14px;color:var(--text);margin:0;line-height:1.7;}
.map-placeholder-hint{font-size:12.5px;color:var(--metal);max-width:34ch;margin:0;line-height:1.6;}
@media (max-width:900px){.kontakt-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- kontakt page: contact form ---------- */
.kontakt-form{display:grid;gap:20px;max-width:820px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-row--plz{grid-template-columns:140px 1fr;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-full{grid-column:1/-1;}
.form-field label{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.04em;color:var(--text-soft);}
.form-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--metal);}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field textarea{
  font:15px/1.5 "IBM Plex Sans",sans-serif;color:var(--text);
  background:#fff;border:1px solid var(--metal-line);padding:12px 14px;width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-field input:focus,.form-field textarea:focus{
  outline:none;border-color:var(--glass);box-shadow:0 0 0 3px var(--glass-pale);
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-field input[type="file"]{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--text-soft);
  background:var(--paper-2);border:1px dashed var(--metal-line);padding:14px;width:100%;
}
.form-botcheck{position:absolute;left:-9999px;}
.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px;}
.form-note{margin:0;font-size:13px;color:var(--metal);max-width:44ch;}
.form-note a{color:var(--glass);text-decoration:underline;}
.form-status{font-size:14.5px;padding:0;}
.form-status:empty{display:none;}
.form-status.is-success{color:#1a7a4c;background:#eaf7f0;border:1px solid #bfe6d1;padding:14px 18px;}
.form-status.is-error{color:#b3261e;background:#fdeceb;border:1px solid #f3c6c2;padding:14px 18px;}
@media (max-width:600px){
  .form-row,.form-row--plz{grid-template-columns:1fr;}
}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#b9cddb;padding:70px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-grid h5{font-family:"IBM Plex Sans",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fb3d9;margin:0 0 18px;}
.foot-grid .foot-logo{display:inline-block;margin-bottom:14px;text-decoration:none;}
.foot-grid .foot-logo img{height:34px;width:auto;display:block;filter:brightness(0) invert(1);}
.foot-grid p, .foot-grid a{font-size:14px;line-height:1.9;color:#b9cddb;text-decoration:none;}
.foot-grid a:hover{color:#fff;}
.foot-links{list-style:none;padding:0;margin:0;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:12.5px;font-family:"IBM Plex Sans",sans-serif;font-weight:500;color:#7691a3;flex-wrap:wrap;gap:10px;}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr;gap:30px;}}

/* ---------- click-to-play video (product demo clips) ---------- */
.clickplay{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 20px 46px -22px rgba(13,47,71,.4);}
.clickplay-video{width:100%;height:100%;display:block;object-fit:cover;background:#000;}
.clickplay-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
  transition:transform .18s ease, background .18s ease;
}
.clickplay-btn:hover,.clickplay-btn:focus-visible{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
.clickplay-btn:focus-visible{outline:2px solid var(--glass-deep);outline-offset:3px;}
.clickplay-icon{width:26px;height:26px;fill:var(--glass-deep);margin-left:4px;}
.clickplay.is-playing .clickplay-btn{display:none;}
@media (max-width:480px){
  .clickplay-btn{width:60px;height:60px;}
  .clickplay-icon{width:20px;height:20px;margin-left:3px;}
}