@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* BW-Media – clean, product-page inspired layout */
:root {
  --bg: #fff;
  --bg-alt: #f5f5f7;
  --bg-soft: #fbfbfd;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #707075;
  --line: #d2d2d7;
  --accent: #b3141c;          /* BW-Media red */
  --accent-hover: #93100f;
  --accent-soft: #fbeaea;
  --dark: #1c1d22;
  --dark-2: #25262d;
  --warm: #fbf2ef;           /* light warm tint (replaces black tiles) */
  --dark-ink: #f5f5f7;
  --dark-ink-2: #a1a1a6;
  --radius: 22px;
  --radius-sm: 14px;
  --gn-h: 76px;
  --ease: cubic-bezier(.28, .11, .32, 1);
  --wrap: 1024px;
  --wrap-wide: 1200px;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--gn-h) + 60px) }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.47 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.011em; font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.08 }
p { margin: 0 0 .9em }
:focus-visible { outline: 3px solid rgba(179, 20, 28, .45); outline-offset: 2px; border-radius: 6px }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px }
.skip:focus { left: 8px }

.wrap { width: min(var(--wrap-wide), 100% - 44px); margin-inline: auto }
.narrow { width: min(760px, 100% - 44px); margin-inline: auto }
.mid { width: min(var(--wrap), 100% - 44px); margin-inline: auto }

/* ------------------------------------------------------------------ buttons & links */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--accent); color: #fff; border: 0; border-radius: 980px;
  padding: 12px 24px; font: 500 17px/1.2 inherit; font-family: inherit; letter-spacing: -.01em;
  cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--accent-hover); text-decoration: none }
.btn:active { transform: scale(.98) }
.btn-sm { padding: 6px 14px; font-size: 13px; font-weight: 500 }
.btn-light { background: var(--ink); }
.btn-light:hover { background: #3a3a3c }
.btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.btn-ghost:hover { background: var(--accent); color: #fff }
.link-more { font-size: 17px; font-weight: 400 }
.link-more::after { content: " ›"; font-size: 1.15em; line-height: 0 }
.btns { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; margin-top: 26px }

/* ------------------------------------------------------------------ global nav (header) */
.gn { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .25s }
.gn.is-scrolled { box-shadow: 0 8px 28px -16px rgba(0, 0, 0, .28) }
.gn-inner { height: var(--gn-h); display: flex; align-items: center; gap: 10px }
.gn-logo { flex: 0 0 auto; margin-right: auto; display: flex }
.gn-logo img { height: 42px; width: auto }
.gn-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; height: 100% }
.gn-item { position: relative; display: flex; align-items: center }
.gn-item > a { display: flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: 10px; color: var(--ink); font-size: 16px; font-weight: 500; transition: background .2s, color .2s }
.gn-item > a:hover, .gn-item > a.open { background: var(--bg-alt); color: var(--ink); text-decoration: none }
.gn-item > a[aria-current] { color: var(--accent); font-weight: 600 }
.gn-item .chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; opacity: .7 }
.gn-item > a.open .chev { transform: rotate(180deg) }
.gn-phone { display: flex; align-items: center; gap: 7px; margin-left: 10px; font-size: 15px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: 10px; white-space: nowrap }
.gn-phone:hover { background: var(--bg-alt); text-decoration: none }
.gn-phone svg { width: 16px; height: 16px; fill: var(--accent) }
.gn-remote { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(179, 20, 28, .7); transition: background .2s, transform .2s }
.gn-remote:hover { background: var(--accent-hover); color: #fff; text-decoration: none; transform: translateY(-1px) }
.gn-remote svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.gn-burger { display: none; width: 46px; height: 46px; margin-right: -8px; border: 0; background: none; cursor: pointer; position: relative; border-radius: 10px }
.gn-burger span { position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease) }
.gn-burger span:first-child { top: 18px } .gn-burger span:last-child { top: 26px }
.gn-burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg) }
.gn-burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg) }

/* dropdown cards (anchored under their menu item) */
.flyout { position: absolute; top: calc(100% - 6px); left: 0; z-index: 60; padding-top: 10px; animation: flyIn .22s var(--ease) }
.flyout--wide { left: 50%; transform: translateX(-38%) }
@keyframes flyIn { from { opacity: 0; margin-top: -6px } }
.fly-inner { display: grid; grid-auto-flow: column; gap: 6px 26px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .04) }
.flyout--wide .fly-inner { grid-auto-flow: row; grid-template-columns: repeat(4, 210px) }
.fly-col h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 8px 10px }
.fly-col ul { list-style: none; margin: 0; padding: 0 }
.fly-col a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--ink); min-width: 240px }
.flyout--wide .fly-col a { min-width: 0 }
.fly-col a:hover { background: var(--bg-alt); text-decoration: none }
.fly-t { display: block; font-size: 15px; font-weight: 600 }
.fly-col a:hover .fly-t { color: var(--accent) }
.fly-s { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; line-height: 1.35 }
.fly-t .ext { font-weight: 400; color: var(--ink-3) }
.fly-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(20, 20, 24, .12) }

/* mobile menu */
.gn-mobile { border-top: 1px solid var(--line); height: calc(100dvh - var(--gn-h)); overflow: auto; background: #fff }
.gn-mobile .wrap { padding-top: 18px; padding-bottom: 40px }
.gn-m-remote { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--accent); color: #fff; margin-bottom: 14px }
.gn-m-remote:hover { color: #fff; text-decoration: none; background: var(--accent-hover) }
.gn-m-remote svg { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.gn-m-remote strong { display: block; font-size: 17px }
.gn-m-remote small { display: block; font-size: 13px; opacity: .9 }
.gn-mobile ul { list-style: none; padding: 0; margin: 0 }
.gn-mobile > .wrap > ul > li > a { display: block; font-size: 22px; font-weight: 600; color: var(--ink); padding: 11px 0; letter-spacing: -.01em; border-bottom: 1px solid var(--line) }
.gn-m-group ul { padding: 6px 0 10px 2px !important; border-bottom: 1px solid var(--line) }
.gn-m-group > a { border-bottom: 0 !important }
.gn-m-group ul a { display: block; font-size: 16px; color: var(--ink-2); padding: 7px 0 }
.gn-m-contact { margin: 22px 0 0; display: grid; gap: 10px }
.gn-m-contact a { font-size: 17px; font-weight: 600; color: var(--accent) }

/* local nav (product-page style secondary bar) */
.localnav { position: sticky; top: var(--gn-h); z-index: 30; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08) }
.ln-inner { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.ln-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em }

/* ------------------------------------------------------------------ sections */
.section { padding: 110px 0 }
.section.tight { padding: 70px 0 }
.bg-alt { background: var(--bg-alt) }
.bg-soft { background: var(--bg-soft) }
.dark { background: radial-gradient(900px 420px at 50% -80px, rgba(179, 20, 28, .28), transparent 70%), linear-gradient(180deg, #202127 0%, #17181c 100%); color: var(--dark-ink) }
.dark .lead, .dark p { color: var(--dark-ink-2) }
.dark a { color: #ff6b6b }
.eyebrow { font-size: 21px; font-weight: 600; color: var(--accent); margin: 0 0 8px; letter-spacing: -.01em }
.dark .eyebrow { color: #ff5f57 }
.hl { text-align: center; max-width: 880px; margin: 0 auto 56px }
.hl h2 { font-size: clamp(34px, 5.2vw, 56px) }
.hl.left { text-align: left; margin-left: 0 }
.lead { font-size: clamp(19px, 2vw, 24px); line-height: 1.38; color: var(--ink-2); font-weight: 500; letter-spacing: -.015em; margin: 18px 0 0 }
.hl .lead { margin-inline: auto; max-width: 760px }
.grad { background: linear-gradient(90deg, #b3141c 0%, #e8590c 55%, #f59f00 100%); -webkit-background-clip: text; background-clip: text; color: transparent }

/* hero */
.hero { padding: 90px 0 0; text-align: center; background: var(--bg-soft); overflow: hidden }
.hero h1 { font-size: clamp(44px, 8vw, 96px); letter-spacing: -.035em; line-height: 1.02; max-width: 1000px; margin: 0 auto }
.hero .kicker { font-size: clamp(19px, 2.2vw, 28px); font-weight: 600; margin: 0 0 14px; letter-spacing: -.02em }
.hero .lead { max-width: 780px; margin: 26px auto 0 }
.hero-media { margin: 64px auto 0; width: min(1400px, 100% - 44px); border-radius: 28px 28px 0 0; overflow: hidden; position: relative }
.hero-media img { width: 100%; aspect-ratio: 1920 / 700; object-fit: cover }
.hero-media .chip { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; padding: 12px 22px; border-radius: 980px; font-size: 15px; font-weight: 500; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis }

/* page hero (sub pages) */
.phero { padding: 96px 0 70px; text-align: center }
.phero h1 { font-size: clamp(44px, 7vw, 80px); letter-spacing: -.035em }
.phero .lead { max-width: 780px; margin: 22px auto 0 }
.phero-img { width: min(1200px, 100% - 44px); margin: 0 auto; border-radius: var(--radius); overflow: hidden }
.phero-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover }

/* tiles (home grid) */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(1400px, 100% - 24px); margin: 0 auto }
.tile { background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-align: center; color: var(--ink); min-height: 560px; position: relative; transition: transform .5s var(--ease) }
.tile:hover { text-decoration: none }
.tile-text { padding: 52px 28px 26px }
.tile h3 { font-size: clamp(30px, 3.4vw, 40px) }
.tile .sub { font-size: 19px; color: var(--ink-2); margin: 8px 0 0; font-weight: 500 }
.tile ul { list-style: none; padding: 0; margin: 16px auto 0; color: var(--ink-2); font-size: 15px; line-height: 1.7 }
.tile .tile-links { margin-top: 16px; display: flex; gap: 22px; justify-content: center; font-size: 17px; color: var(--accent) }
.tile .tile-links span::after { content: " ›" }
.tile-img { margin-top: auto; padding: 0 28px; display: flex; justify-content: center }
.tile-img img { border-radius: var(--radius-sm) var(--radius-sm) 0 0; width: 100%; max-width: 540px; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease) }
.tile:hover .tile-img img { transform: scale(1.03) }
.tile.dark { background: linear-gradient(180deg, var(--warm) 0%, #f7e6e2 100%) }
.tile.dark .sub, .tile.dark ul { color: var(--ink-2) }
.tile.new::before { content: "Neu"; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .02em }
.tile.light h3 { color: var(--ink) }

/* cards */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.card { background: var(--bg); border-radius: var(--radius); padding: 34px 30px; box-shadow: 0 2px 12px rgba(0, 0, 0, .04) }
.bg-alt .card { background: #fff }
.dark .card { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .09); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.card h3 { font-size: 24px; margin: 0 0 10px }
.card p { color: var(--ink-2); margin: 0 }
.dark .card p { color: var(--dark-ink-2) }
.card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 22px }
.dark .card .ico { background: rgba(255, 95, 87, .14); color: #ff6b62 }
.card .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.card .kicker { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px }

/* feature rows (service pages) */
.features { display: flex; flex-direction: column; gap: 120px }
.feature { display: grid; grid-template-columns: 1.08fr 1fr; gap: 72px; align-items: center }
.feature:nth-child(even) .f-media { order: 2 }
.f-media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt) }
.f-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease) }
.feature:hover .f-media img { transform: scale(1.02) }
.f-text h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 20px }
.f-text p, .f-text li { color: var(--ink-2); font-size: 17px }
.f-text h3, .f-text h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 20px 0 4px; letter-spacing: -.01em }
.f-text h3 + p, .f-text h4 + p { margin-top: 0 }
.f-text .more { display: none }
.f-text.clamped .more-body { display: none }
.f-text.clamped .more { display: inline-block; margin-top: 4px; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer }
.f-text.clamped .more::after { content: " +"; }
ul.ticks { list-style: none; padding: 0; margin: 10px 0 18px }
ul.ticks li { position: relative; padding-left: 28px; margin: 0 0 8px }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-3px) }
.dark ul.ticks li::before { border-color: #ff5f57 }

/* chip navigation (sub-section jump links) */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px }
.chip-link { background: var(--bg-alt); color: var(--ink); border-radius: 980px; padding: 8px 18px; font-size: 14px; font-weight: 500; transition: background .2s }
.chip-link:hover { background: #e8e8ed; text-decoration: none }
.chip-link.on { background: var(--ink); color: #fff }

/* numbers / stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center }
.stat strong { display: block; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.04em; line-height: 1.05 }
.stat span { color: var(--ink-2); font-size: 15px }
.dark .stat span { color: var(--dark-ink-2) }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step }
.step { border-top: 2px solid var(--ink); padding-top: 22px; counter-increment: step }
.dark .step { border-color: var(--dark-ink) }
.step::before { content: "0" counter(step); display: block; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 14px }
.dark .step::before { color: #ff5f57 }
.step h3 { font-size: 22px; margin-bottom: 8px }
.step p { color: var(--ink-2); font-size: 15px; margin: 0 }

/* project list */
.projects { columns: 2; column-gap: 56px; list-style: none; padding: 0; margin: 0 }
.projects li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; display: flex; gap: 14px }
.projects li::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--accent) }
.dark .projects li { border-color: rgba(255, 255, 255, .14) }

/* logo marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marquee-track { display: flex; gap: 22px; width: max-content; animation: marquee 60s linear infinite }
.marquee:hover .marquee-track { animation-play-state: paused }
@keyframes marquee { to { transform: translateX(-50%) } }
.logo-box { flex: 0 0 auto; width: 170px; height: 104px; background: #fff; border-radius: var(--radius-sm); display: grid; place-items: center; padding: 18px }
.logo-box img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s }
.logo-box:hover img { filter: none; opacity: 1 }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center } .marquee { -webkit-mask-image: none; mask-image: none } }

/* references */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px }
.ref { color: var(--ink); display: block }
.ref:hover { text-decoration: none }
.ref-img { border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-alt); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 0, 0, .18) }
.ref-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; transition: transform .8s var(--ease) }
.ref:hover .ref-img img { transform: scale(1.04) }
.ref h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 14px 0 2px; line-height: 1.3 }
.ref .url { font-size: 13px; color: var(--ink-3) }
.ref .url.ext::after { content: " ↗" }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px }
.logo-wall .logo-box { width: auto; height: 110px }
.ref-group { padding-top: 90px }
.ref-group:first-child { padding-top: 0 }
.ref-group > h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 30px }

/* team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; text-align: center }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; max-width: 260px; margin: 0 auto 20px; background: var(--bg-alt) }
.person h3 { font-size: 24px }
.person p { color: var(--ink-2); margin: 4px 0 0 }

/* split intro */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center }
.split .media { border-radius: var(--radius); overflow: hidden }
.split h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 20px }
.split p { color: var(--ink-2) }

/* pricing */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto }
.price-card { background: #fff; border-radius: var(--radius); padding: 40px 34px; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0, 0, 0, .04) }
.price-card.hi { box-shadow: inset 0 0 0 2px var(--accent) }
.price-card .kicker { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .06em }
.price { font-size: 56px; font-weight: 700; letter-spacing: -.04em; margin: 14px 0 0; line-height: 1 }
.price small { font-size: 17px; font-weight: 500; color: var(--ink-2); letter-spacing: -.01em }
.price-card .note { color: var(--ink-2); font-size: 15px; margin: 8px 0 18px }
.price-card .btn { margin-top: auto; align-self: flex-start }

/* accordion (FAQ) */
.faq { border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-size: 21px; font-weight: 600; letter-spacing: -.018em; position: relative }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease) }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg) }
.faq .ans { padding: 0 0 26px; color: var(--ink-2); max-width: 760px }

/* tabs (mail settings) */
.tabs { display: inline-flex; background: #e8e8ed; border-radius: 980px; padding: 4px; gap: 2px; margin: 0 auto 50px; flex-wrap: wrap; justify-content: center }
.tab { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; padding: 9px 22px; border-radius: 980px; cursor: pointer; color: var(--ink) }
.tab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) }
.guide { max-width: 820px; margin: 0 auto }
.guide h2, .guide h3 { font-size: 26px; margin: 46px 0 12px }
.guide h2:first-child, .guide h3:first-child { margin-top: 0 }
.guide p, .guide li { color: var(--ink-2) }
.guide img { border-radius: var(--radius-sm); margin: 18px 0 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 12px 32px -14px rgba(0, 0, 0, .2); max-height: 640px; width: auto }
.server-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 auto 64px; max-width: 820px }
.server-box div { background: #fff; border-radius: var(--radius-sm); padding: 22px 24px }
.server-box b { display: block; font-size: 13px; color: var(--ink-3); font-weight: 500 }
.server-box code { font: 600 21px/1.3 inherit; font-family: inherit; letter-spacing: -.015em }
.server-box span { display: block; color: var(--ink-2); font-size: 15px; margin-top: 4px }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.field { position: relative }
.field.full { grid-column: 1 / -1 }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 26px 16px 10px; font: inherit; font-size: 17px; color: var(--ink); transition: border-color .2s, box-shadow .2s }
.field textarea { min-height: 170px; resize: vertical }
.field label { position: absolute; left: 17px; top: 18px; color: var(--ink-3); pointer-events: none; transition: all .2s var(--ease); font-size: 17px }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(179, 20, 28, .12) }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 8px; font-size: 12px }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2) }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-msg { grid-column: 1 / -1; padding: 14px 18px; border-radius: 12px; font-size: 15px }
.form-msg.ok { background: #e3f4e8; color: #1c5b30 }
.form-msg.err { background: var(--accent-soft); color: #7d0f14 }
.form .btn { justify-self: start }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start }
.info-list { list-style: none; padding: 0; margin: 0 }
.info-list li { padding: 18px 0; border-bottom: 1px solid var(--line) }
.info-list li:first-child { padding-top: 0 }
.info-list b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 2px }
.info-list a { color: var(--ink) }

/* support tiles */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px }
.s-tile { background: #fff; border-radius: var(--radius); padding: 30px 26px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease) }
.s-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .3) }
.s-tile .ico { width: 42px; height: 42px; color: var(--accent); margin-bottom: 12px }
.s-tile .ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.s-tile h3 { font-size: 21px }
.s-tile p { color: var(--ink-2); font-size: 15px; margin: 0 }
.s-tile .go { margin-top: auto; padding-top: 12px; color: var(--accent); font-size: 15px }

/* legal text */
.legal { max-width: 760px; margin: 0 auto }
.legal h2 { font-size: 28px; margin: 54px 0 14px }
.legal h3 { font-size: 19px; margin: 30px 0 8px; letter-spacing: -.015em }
.legal p, .legal li { color: #424245; font-size: 16px }
.legal a { word-break: break-word }

/* cta band */
.cta-band { text-align: center; background: var(--bg-alt) }
.cta-band h2 { font-size: clamp(32px, 4.6vw, 52px) }

/* notice box */
.notice { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 22px 26px; color: var(--ink-2); font-size: 15px }
.notice b { color: var(--ink) }

/* ------------------------------------------------------------------ footer */
.ft { background: var(--bg-alt); color: var(--ink-2); font-size: 12px; line-height: 1.5; padding: 22px 0 26px }
.ft a { color: #424245 }
.ft-lead { border-bottom: 1px solid var(--line); padding: 4px 0 18px; margin: 0 }
.ft-lead a { color: var(--accent) }
.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 0 }
.ft-col h2, .ft-col h3 { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0; margin: 0 0 8px; line-height: 1.5 }
.ft-col ul { list-style: none; margin: 0; padding: 0 }
.ft-col li { margin: 0 0 7px }
.ft-bottom { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.ft-bottom p { margin: 0 }
.ft-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 }
.ft-bottom li + li::before { content: "|"; margin: 0 9px; color: var(--line) }

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.no-js .reveal { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none } html { scroll-behavior: auto } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1068px) {
  .flyout--wide .fly-inner { grid-template-columns: repeat(2, 230px) }
  .gn-phone span { display: none }
  .feature { gap: 44px }
  .features { gap: 90px }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px }
}
@media (max-width: 900px) {
  :root { --gn-h: 64px }
  .gn-list, .gn-phone { display: none }
  .gn-logo img { height: 34px }
  .gn-remote { padding: 9px 14px; font-size: 14px }
  .gn-burger { display: block }
  .flyout, .fly-backdrop { display: none !important }
  .tiles { grid-template-columns: 1fr }
  .tile { min-height: 500px }
  .feature { grid-template-columns: 1fr; gap: 28px }
  .feature:nth-child(even) .f-media { order: 0 }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 34px }
  .projects { columns: 1 }
  .team { grid-template-columns: 1fr; gap: 50px }
  .ft-cols { grid-template-columns: repeat(2, 1fr) }
  .section { padding: 80px 0 }
  .hero-media img { aspect-ratio: 4 / 3 }
}
@media (max-width: 600px) {
  body { font-size: 16px }
  .wrap, .narrow, .mid { width: calc(100% - 32px) }
  .tiles { width: 100% ; gap: 12px }
  .tile { border-radius: 0 }
  .steps { grid-template-columns: 1fr }
  .form, .server-box { grid-template-columns: 1fr }
  .ln-title { font-size: 19px }
  .hero { padding-top: 64px }
  .hero-media { width: 100%; border-radius: 0 }
  .hero-media .chip { font-size: 13px; bottom: 18px }
  .phero { padding: 64px 0 48px }
  .phero-img { width: 100%; border-radius: 0 }
  .phero-img img { aspect-ratio: 4 / 3 }
  .ref-grid { grid-template-columns: 1fr 1fr; gap: 18px }
  .ref h3 { font-size: 15px }
  .logo-wall { grid-template-columns: repeat(3, 1fr) }
  .logo-wall .logo-box { height: 84px; padding: 12px }
  .faq summary { font-size: 18px }
  .ft-bottom { flex-direction: column }
}
@media (max-width: 400px) { .ref-grid { grid-template-columns: 1fr } }
.f-text .eyebrow { color: var(--accent); font-size: 17px; margin-bottom: 6px }
/* fixes after first visual review */
.tile.dark { color: var(--ink) }
.tile.dark .tile-links { color: var(--accent) }
.dark .btn, .dark .btn:hover { color: #fff }
.split .eyebrow { color: var(--accent) }
.dark .split .eyebrow { color: #ff5f57 }
.projects { margin: 0 auto }
.cta-band { background: var(--bg) }
h1, h2, h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto }
@media (max-width: 600px) {
  .hero-media .chip { white-space: normal; text-align: center; border-radius: 16px; width: calc(100% - 32px); line-height: 1.35 }
  .tile h3 { font-size: 28px }
}

/* still image + looping video (video_media() / site.js) */
.vmedia { position: relative; overflow: hidden }
.vmedia img { display: block }
.vmedia-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none }
.vmedia.is-playing .vmedia-video { opacity: 1 }
.hero-media .vmedia img { width: 100%; aspect-ratio: 1920 / 700; object-fit: cover }
.hero-media .chip { z-index: 1 }

/* links inside running text: underline, not colour only (WCAG 1.4.1) */
.ft-lead a, .legal a, .form a, .narrow p a, .f-text p a, .guide p a, .contact-info a { text-decoration: underline; text-underline-offset: 2px }

/* headline typography: balanced lines, no orphans (2026-10-01) */
h1, h2, .phero h1, .hl h2 { text-wrap: balance }
.lead, .hero .lead, .hl .lead { text-wrap: pretty }
.nowrap { white-space: nowrap }
@media (max-width: 700px) {
  .hero-media .vmedia--tall img { aspect-ratio: 4 / 3 }
}
@media (max-width: 600px) {
  .hero { padding-top: 48px }
  .hero h1 { font-size: clamp(34px, 10.4vw, 48px) }
  .hero .kicker { font-size: 17px }
  .hero-media { margin-top: 44px }
  .hero-media .chip { bottom: 14px; font-size: 13px; padding: 9px 16px; width: calc(100% - 40px); max-width: 360px; text-wrap: balance }
}
p, li { text-wrap: pretty }
.ln-inner .btn { white-space: nowrap; flex: 0 0 auto }
.ln-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 420px) { .ln-title { font-size: 16px } .ln-inner .btn { font-size: 13px; padding: 7px 12px } .ln-inner { gap: 12px } }

/* Landingpages (Werbekampagnen) */
.lp-hero .btns { justify-content: center; margin-top: 30px }
.lp-trust { margin-top: 26px; font-size: 14px; color: var(--ink-2) }
.lp-steps { list-style: none; padding: 0; margin: 38px auto 0; max-width: 820px; display: grid; gap: 18px }
.lp-steps li { display: flex; gap: 20px; align-items: flex-start; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px }
.lp-steps li > b { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px }
.lp-steps h3 { margin: 0 0 6px; font-size: 20px }
.lp-steps p { margin: 0; color: var(--ink-2) }
.field select { width: 100%; padding: 16px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; color: var(--ink) }

/* second hero: Förderportal */
.hero-foerder { padding: 100px 0 110px; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); border-top: 1px solid rgba(0,0,0,.06) }
.hero-foerder h2 { font-size: clamp(36px, 6vw, 72px); letter-spacing: -.035em; line-height: 1.04; max-width: 980px; margin: 0 auto }
.f-stats { list-style: none; padding: 0; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px }
.f-stats li { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 20px; padding: 24px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.04) }
.f-stats b { display: block; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.03em; color: var(--accent, #b3141c); line-height: 1.1 }
.f-stats span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2) }
.hero-foerder .btns { margin-top: 40px }
.f-note { margin: 22px auto 0; font-size: 14px; color: var(--ink-2); max-width: 640px }
@media (max-width: 700px) {
  .hero-foerder { padding: 64px 0 72px }
  .f-stats { grid-template-columns: 1fr; gap: 10px; margin-top: 32px }
  .f-stats li { padding: 16px; display: flex; align-items: baseline; gap: 14px; text-align: left }
  .f-stats b { font-size: 28px; flex: 0 0 auto; min-width: 118px }
  .f-stats span { margin: 0 }
}

/* ---------------------------------------------------------------- Live-Demos */
.d-hero { padding-bottom: 70px }
.d-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 36px }
.d-filter button { font: inherit; font-size: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 980px; padding: 7px 14px; cursor: pointer }
.d-filter button span { color: var(--ink-2); font-size: 12px; margin-left: 2px }
.d-filter button.on { background: var(--ink); color: #fff; border-color: var(--ink) }
.d-filter button.on span { color: #c7c7cc }
.d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px }
.d-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.04); transition: transform .4s var(--ease), box-shadow .4s var(--ease) }
.d-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.08) }
.d-card[hidden] { display: none }
.d-shot { aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.06) }
.d-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.d-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 }
.d-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px }
.d-head h3 { font-size: 19px; line-height: 1.25; margin: 0 }
.d-kat { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 2px }
.d-logo { flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) }
.d-kurz { font-size: 15px; color: var(--ink-2); margin: 0 0 12px }
.d-feat { list-style: none; padding: 0; margin: 0 0 14px; font-size: 14px }
.d-feat li { padding: 3px 0 3px 18px; position: relative }
.d-feat li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent) }
.d-zugang { font-size: 13px; background: var(--bg-soft); border-radius: 10px; padding: 8px 10px; margin: 0 0 14px }
.d-zugang span { font-weight: 600 }
.d-go { margin-top: auto; align-self: flex-start }
.d-hinweis { text-align: center; color: var(--ink-2); font-size: 13px; margin: 26px auto 0; max-width: 760px }

/* ---------------------------------------------------------------- KI-Hardware-Konfigurator */
.k-finder { background: var(--bg-soft); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 26px }
.k-finder-t { font-weight: 600; font-size: 18px; margin: 0 0 14px }
.k-finder-t small { font-weight: 400; color: var(--ink-2); font-size: 14px; margin-left: 6px }
.k-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.k-q4 { grid-template-columns: repeat(4, 1fr); margin: 18px 0 }
.k-q label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); position: relative }
.k-q output { position: absolute; right: 0; top: 0; font-weight: 700; color: var(--ink) }
.k-q select, .k-q input[type=number] { font: inherit; font-size: 15px; color: var(--ink); padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff }
.k-q input[type=range] { accent-color: var(--accent); margin-top: 8px }
.k-empf { margin: 14px 0 0; font-size: 15px }
.k-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch }
.k-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; transition: box-shadow .3s, border-color .3s, transform .3s }
.k-card.is-empf { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 20px 40px rgba(179,20,28,.12) }
.k-badge { position: absolute; top: -12px; left: 24px; margin: 0; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 980px }
.k-card h3 { font-size: 22px; margin: 0 0 6px }
.k-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; min-height: 3em }
.k-preis { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 }
.k-preis small { font-size: 14px; font-weight: 500; color: var(--ink-2) }
.k-inkl { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 10px }
.k-lager { font-size: 13px; font-weight: 600; color: #8a6d00; margin: 0 0 14px }
.k-lager::before { content: "● "; }
.k-lager.ok { color: #1f7a3a }
.k-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px }
.k-facts div { background: var(--bg-soft); border-radius: 12px; padding: 10px 12px }
.k-facts dt { font-size: 12px; color: var(--ink-2) }
.k-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 17px }
.k-modelle { font-size: 14px; margin: 0 0 8px }
.k-card .ticks { font-size: 14px; margin: 0 0 16px }
.k-monat { font-size: 14px; margin: auto 0 16px; padding-top: 12px; border-top: 1px solid var(--line) }
.k-monat small { color: var(--ink-2) }
.k-card .btn { align-self: stretch; text-align: center }
.k-details { margin-top: 34px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px; background: #fff }
.k-details summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px }
.k-details summary small { font-weight: 400; color: var(--ink-2) }
.k-details[open] { padding-bottom: 22px }
.k-table-wrap { overflow-x: auto }
.k-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px }
.k-table th, .k-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right }
.k-table th:first-child, .k-table td:first-child { text-align: left; color: var(--ink-2) }
.k-table td[data-r=cloud] { text-align: center; font-weight: 600 }
.k-table tr.sum td { font-weight: 700; color: var(--ink) }
@media (max-width: 980px) { .k-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto } .k-q4 { grid-template-columns: 1fr 1fr } }
@media (max-width: 700px) { .k-q { grid-template-columns: 1fr } .k-q4 { grid-template-columns: 1fr 1fr } .k-sub { min-height: 0 } .d-grid { grid-template-columns: 1fr } }
.d-indiv { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px) }
.d-indiv b { color: var(--ink) }

/* Wartungsvertrag: Startseiten-Abschnitt + Konfigurator (/wartungsvertrag.html) */
.wv-hl { max-width: 960px }
.wv-hl h2 { font-size: clamp(32px, 4.6vw, 52px) }
.wv-split { align-items: center }
.wv-h3 { font-size: 22px; margin: 0 0 6px }
.wv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start }
.wv-step { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--ink); margin: 40px 0 16px; letter-spacing: -.01em }
.wv-step:first-child { margin-top: 0 }
.wv-step span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 16px }
.wv-group { border: 1px solid rgba(0,0,0,.07); background: var(--bg-soft); border-radius: var(--radius); padding: 8px 24px 12px; margin: 0 0 16px; min-width: 0 }
.wv-group legend { float: left; width: 100%; padding: 14px 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3) }
.wv-r { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.06); cursor: pointer }
.wv-group legend + .wv-r { border-top: 0 }
.wv-l b { display: block; font-size: 16px; color: var(--ink) }
.wv-l small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px }
.wv-r output { align-self: center; min-width: 48px; text-align: center; font-weight: 700; font-size: 18px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; font-variant-numeric: tabular-nums }
.wv-r output.on { border-color: var(--accent); color: var(--accent) }
.wv-r input[type=range] { grid-column: 1 / -1; width: 100%; margin: 12px 0 2px; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; --p: 0% }
.wv-r input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--p), #dcdce1 var(--p)) }
.wv-r input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #dcdce1 }
.wv-r input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent) }
.wv-r input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s }
.wv-r input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.18) }
.wv-r input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12) }
.wv-r input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px }
.wv-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.wv-opt, .wv-chip { position: relative; cursor: pointer }
.wv-opt input, .wv-chip input { position: absolute; opacity: 0; pointer-events: none }
.wv-opt span { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; background: #fff; transition: border-color .2s, box-shadow .2s }
.wv-opt b { display: block; font-size: 16px; color: var(--ink) }
.wv-opt small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.45 }
.wv-opt input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179, 20, 28, .14) }
.wv-chips { display: flex; flex-wrap: wrap; gap: 10px }
.wv-chip span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 15px; background: #fff; color: var(--ink); transition: all .2s }
.wv-chip span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; transition: all .2s }
.wv-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft) }
.wv-chip input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat }
.wv-opt input:focus-visible + span, .wv-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
.wv .form { margin-top: 4px }
.wv-side { position: sticky; top: calc(var(--gn-h) + 24px); background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding: 24px; box-shadow: 0 18px 50px -24px rgba(0,0,0,.25) }
.wv-side-t { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 }
.wv-total { margin: 6px 0 14px; color: var(--ink-2) }
.wv-total b { font-size: 46px; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-right: 4px }
.wv-list { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; max-height: 300px; overflow: auto }
.wv-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06) }
.wv-list li b { font-variant-numeric: tabular-nums }
.wv-list .leer { color: var(--ink-2); border: 0 }
.wv-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 18px; font-size: 14px }
.wv-meta dt { color: var(--ink-2) }
.wv-meta dd { margin: 0; font-weight: 600; text-align: right }
.wv-side .btn { width: 100%; text-align: center; justify-content: center }
.wv-note { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; text-align: center }
.wv-bar { display: none }
@media (max-width: 980px) {
  .wv { grid-template-columns: 1fr }
  .wv-side { display: none }
  .wv-bar:not([hidden]) { display: flex; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 12px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,.08); border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.3); font-size: 14px; color: var(--ink-2) }
  .wv-bar b { font-size: 20px; color: var(--ink) }
  .wv-bar .btn { padding: 11px 18px; font-size: 15px }
  .wv-opts { grid-template-columns: 1fr }
}
@media (max-width: 700px) { .wv-group { padding: 6px 16px 10px } .wv-step { font-size: 19px } }
/* Wartungsvertrag: Richtpreise */
.wv-l .wv-pr, .wv-opt .wv-pr { display: block; font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--accent); margin-top: 4px }
.wv-opt .wv-pr { margin-top: 8px }
.wv-inkl { font-size: 15px; color: var(--ink-2); background: #e9f5ec; border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 14px }
.wv-inkl b { color: #1c5b30 }
.wv-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.wv-add { position: relative; cursor: pointer }
.wv-add input { position: absolute; opacity: 0; pointer-events: none }
.wv-add span { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px 13px 46px; background: #fff; position: relative; transition: border-color .2s, background .2s }
.wv-add span::before { content: ""; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line); transition: all .2s }
.wv-add b { display: block; font-size: 15px; color: var(--ink) }
.wv-add small { display: block; font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 3px }
.wv-add input:checked + span { border-color: var(--accent); background: var(--accent-soft) }
.wv-add input:checked + span::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat }
.wv-add input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
.wv-preis { margin: 6px 0 2px; color: var(--ink-2); font-size: 14px }
.wv-preis b { font-size: 42px; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.wv-side .wv-total { margin: 0 0 14px; font-size: 13px }
.wv-side .wv-total b { font-size: inherit; margin: 0 }
.wv-list li span { color: var(--ink-2) }
.wv-min { font-size: 13px; color: var(--accent); margin: -6px 0 14px }
.wv-bar small { display: block; font-size: 12px }
.wv-bar small b { font-size: 12px }
@media (max-width: 700px) { .wv-adds { grid-template-columns: 1fr } }
.wv-list { max-height: none; overflow: visible }
.wv-side { max-height: calc(100vh - var(--gn-h) - 48px); overflow: auto; overscroll-behavior: contain }
.wv-list li { padding: 5px 0 }
.wv-list li b { white-space: nowrap }