:root{--bg:#FFFFFF;--ink:#1A1A18;--oxford:#15273F;--oxford-deep:#0E1B2C;--oxford-soft:#EEF2F6;--oxford-line:#D6DEE7;--white:#FFFFFF;--line:#E4E6EA;--pill:#F1F3F6;--muted:#6B7280;--muted-2:#454A52;--maxw:1100px;--r:18px;--r-card:16px}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:rgba(21,39,63,.16)}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
.mono{font-family:"SFMono-Regular",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace}
img{display:block;max-width:100%}
sup{font-size:.6em;vertical-align:super;line-height:0}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
:focus-visible{outline:2px solid var(--oxford);outline-offset:3px;border-radius:4px}
/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(20px,5vw,48px)}
.nav-logo{height:34px}.nav-logo svg{height:100%;width:auto}
.back-link{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);text-decoration:none;transition:color .2s}
.back-link:hover{color:var(--oxford)}
.back-link .arr{width:1.05em;height:1.05em;display:inline-flex}
.back-link .arr svg{width:100%;height:100%}
.pill{display:inline-flex;align-items:center;gap:.6em;background:var(--oxford);color:#fff;border-radius:999px;padding:.75em 1.3em;font-size:14px;text-decoration:none;border:none;cursor:pointer;transition:background .25s}
.pill:hover{background:var(--oxford-deep)}
.pill .arr{width:1.05em;height:1.05em;display:inline-flex}.pill .arr svg{width:100%;height:100%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pill:hover .arr svg{transform:rotate(45deg) translateX(2px)}
.pill--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pill--ghost:hover{background:var(--oxford);color:#fff;border-color:var(--oxford)}
/* ARTICLE */
.art-hero{padding:clamp(40px,6vw,72px) 0 clamp(28px,3vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.04em;color:var(--oxford);font-weight:600;margin-bottom:16px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oxford)}
.art-hero h1{font-size:clamp(32px,5.4vw,60px);font-weight:600;letter-spacing:-.025em;line-height:1.02;max-width:18ch}
.art-lead{font-size:clamp(16px,1.7vw,20px);color:var(--muted-2);line-height:1.6;max-width:60ch;margin-top:20px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tag{font-size:12.5px;background:var(--pill);border-radius:999px;padding:6px 13px;color:var(--muted-2)}
.art-figure{position:relative;border-radius:var(--r);overflow:hidden;margin:clamp(28px,4vw,44px) 0;background:var(--oxford-soft);aspect-ratio:16/8}
.art-figure img{width:100%;height:100%;object-fit:cover}
.art-body{padding-bottom:clamp(50px,7vw,90px)}
.art-body h2{font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:clamp(32px,4vw,48px) 0 14px}
.art-body h3{font-size:clamp(18px,2.2vw,22px);font-weight:600;margin:28px 0 10px}
.art-body p{font-size:16px;color:var(--muted-2);line-height:1.75;margin-bottom:16px;max-width:68ch}
.art-body strong{color:var(--ink);font-weight:600}
.art-body ul{list-style:none;margin:6px 0 20px;display:flex;flex-direction:column;gap:9px;max-width:68ch}
.art-body li{font-size:15.5px;color:var(--muted-2);display:flex;gap:11px;align-items:flex-start;line-height:1.6}
.art-body li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oxford);flex:none;margin-top:9px}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 8px}
.spec{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.spec .sk{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.spec .sv{font-size:17px;font-weight:600;letter-spacing:-.01em}
.callout{background:var(--oxford-soft);border-left:4px solid var(--oxford);border-radius:0 var(--r-card) var(--r-card) 0;padding:22px 26px;margin:28px 0;font-size:16px;color:var(--ink);line-height:1.65}
.art-cta{background:var(--oxford);color:#fff;border-radius:var(--r);padding:clamp(28px,4vw,44px);margin-top:clamp(36px,4vw,52px);margin-bottom:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.art-cta h3{font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-.02em;color:#fff;max-width:24ch;line-height:1.2}
.art-cta .pill{background:#fff;color:var(--oxford)}
.art-cta .pill:hover{background:var(--oxford-soft)}
.more-link{display:inline-flex;align-items:center;gap:8px;color:var(--oxford);font-weight:500;text-decoration:none;font-size:15px;margin-top:8px}
.more-link .arr{width:1.05em;height:1.05em;display:inline-flex}.more-link .arr svg{width:100%;height:100%;transition:transform .3s}
.more-link:hover .arr svg{transform:rotate(45deg) translateX(2px)}
/* FOOTER */
.foot{background:var(--oxford-deep);color:#fff;padding:clamp(36px,5vw,56px) 0 26px;margin-top:0}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot-logo svg{height:26px;width:auto}
.foot p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7}
.foot a{color:#fff;text-decoration:none;opacity:.85}.foot a:hover{opacity:1}
@media(max-width:680px){.specs{grid-template-columns:1fr}.art-cta{flex-direction:column;align-items:flex-start}}

/* BREADCRUMB */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--oxford)}
.crumbs .sep{color:var(--oxford-line);font-size:12px}
.crumbs .current{color:var(--ink);font-weight:500}
/* BACK TO TOP (inline am Seitenende) */
.to-top-wrap{display:flex;justify-content:center;padding:clamp(30px,5vw,56px) 0 clamp(40px,6vw,72px)}
.to-top{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:13px 24px;font-size:14px;color:var(--ink);text-decoration:none;font-family:inherit;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.to-top:hover{background:var(--oxford);color:#fff;border-color:var(--oxford);transform:translateY(-2px)}
.to-top .tt-ic{width:1.15em;height:1.15em;display:inline-flex}
.to-top .tt-ic svg{width:100%;height:100%}
/* BACK TO TOP (floating, erscheint beim Scrollen) */
.to-top-float{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:60;
  width:48px;height:48px;border-radius:50%;background:var(--oxford);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px -10px rgba(14,27,44,.6);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility .3s,transform .3s,background .25s}
.to-top-float.show{opacity:1;visibility:visible;transform:none}
.to-top-float:hover{background:var(--oxford-deep)}
.to-top-float svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.to-top,.to-top-float{transition:none}}


/* Headerbild Crossfade */
.art-figure{cursor:default}
.art-figure .fig-bw,.art-figure .fig-4c{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.art-figure .fig-4c{opacity:0}
.art-figure:hover .fig-4c{opacity:1}
.art-figure:hover .fig-bw{opacity:0}
.fig-hint{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--oxford);font-size:11px;letter-spacing:.03em;padding:6px 12px;border-radius:999px;font-family:ui-monospace,monospace;box-shadow:0 4px 14px -8px rgba(14,27,44,.4);transition:opacity .4s}
.art-figure:hover .fig-hint{opacity:0}
/* 3er-Bildzeile */
.gallery3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin:clamp(28px,4vw,40px) 0}
.gallery3 figure{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--oxford-soft);aspect-ratio:4/3;position:relative}
.gallery3 figure svg,.gallery3 figure img{width:100%;height:100%;object-fit:cover;display:block}
.gallery3 figcaption{position:absolute;left:0;right:0;bottom:0;font-size:12px;color:#fff;background:linear-gradient(0deg,rgba(14,27,44,.78),rgba(14,27,44,0));padding:18px 12px 9px;font-family:ui-monospace,monospace;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.gallery3 figure:hover figcaption,.gallery3 figure:focus-within figcaption{opacity:1;transform:none}
@media(hover:none){.gallery3 figcaption{opacity:1;transform:none}}
@media(max-width:680px){.gallery3{grid-template-columns:1fr}.gallery3 figure{aspect-ratio:16/9}}
/* Produktspezifischer Download-Bereich */
.prod-dl{margin-top:clamp(34px,4vw,48px);background:var(--oxford-soft);border:1px solid var(--oxford-line);border-radius:var(--r);padding:clamp(24px,4vw,40px)}
.prod-dl .pd-label{font-size:13px;letter-spacing:.04em;color:var(--oxford);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.prod-dl .pd-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oxford)}
.prod-dl h2{margin-top:0!important}
.dl-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.dl-row2{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s,border-color .25s}
.dl-row2:hover{transform:translateY(-2px);box-shadow:0 16px 36px -26px rgba(21,39,63,.36);border-color:var(--oxford-line)}
.dl-row2 .dl-thumb{width:46px;flex:none;border-radius:7px;overflow:hidden;box-shadow:0 3px 10px -4px rgba(14,27,44,.35);line-height:0}
.dl-row2 .dl-thumb svg{width:100%;height:auto;display:block}
.dl-row2 .dl-meta{flex:1;min-width:0}
.dl-row2 .dl-meta h4{font-size:15px;font-weight:600;line-height:1.3;margin:0}
.dl-row2 .dl-meta span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px}
.dl-row2 .arr{color:var(--oxford);flex:none;width:1.1em;height:1.1em;display:inline-flex;align-items:center;justify-content:center}
.dl-row2 .arr svg{width:100%;height:100%}
.dl-row2:hover .arr svg{transform:none}
@media(max-width:680px){.dl-grid2{grid-template-columns:1fr}}
/* Fixierter Pfeil: invertiert über Footer */
.to-top-float.on-dark{background:#fff;color:var(--oxford);border:1px solid #fff}

/* === seitenspezifische Zusatzregeln === */
.cmp-wrap{overflow-x:auto;margin:18px 0 8px;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cmp thead th{background:var(--oxford);color:#fff;font-weight:600;text-align:left;padding:14px 16px;font-size:14px;letter-spacing:-.01em}
.cmp thead th:first-child{background:var(--oxford-deep)}
.cmp tbody th{background:var(--oxford-soft);color:var(--ink);font-weight:600;text-align:left;padding:13px 16px;width:22%;vertical-align:top}
.cmp tbody td{padding:13px 16px;color:var(--muted-2);vertical-align:top;line-height:1.55}
.cmp tbody tr+tr th,.cmp tbody tr+tr td{border-top:1px solid var(--line)}
.cmp tbody td+td{border-left:1px solid var(--line)}
.spec-table{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:15px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.spec-table thead th{background:var(--oxford);color:#fff;text-align:left;font-weight:600;font-size:13px;letter-spacing:.02em;padding:13px 16px}
.spec-table td{padding:13px 16px;border-top:1px solid var(--line);color:var(--muted-2);line-height:1.55;vertical-align:top}
.spec-table tbody tr:nth-child(even){background:var(--oxford-soft)}
.spec-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.art-body .p--before-gallery{margin-bottom:0}
.art-body--before-gallery{padding-bottom:0}
.art-body--after-gallery h2:first-child,.art-body--after-gallery h3:first-child{margin-top:0}

/* === Detailseiten: Voll-Nav + Abstände (editierbare Struktur) === */
.nav-links{display:flex;gap:clamp(14px,2.4vw,28px);align-items:center;flex-wrap:wrap;justify-content:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--oxford)}
/* Im Original sind specs/callout INNERHALB eines art-body verschachtelt; hier
   sind sie eigene Blöcke. Daher: art-body bekommt nur dann den Abschnitts-Abstand
   (padding-bottom), wenn KEIN specs/callout/Galerie-Block folgt (die bringen ihren
   eigenen Abstand mit). :has() wird von allen aktuellen Browsern unterstützt. */
.art-body{padding-bottom:clamp(50px,7vw,90px)}
.art-body:has(+ .wrap .specs),
.art-body:has(+ .wrap .callout){padding-bottom:0}
@media(max-width:820px){.nav-links{display:none}}