/* Hans Walz – Chemische Erzeugnisse GmbH · Relaunch
   Marineblau + Limette, extrafette Grotesk. Schriften liegen lokal in assets/fonts (Inter, SIL OFL 1.1). */

@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/inter-display-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/inter-display-900.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --navy: #27338c;
  --navy-d: #19215f;
  --navy-dd: #0f1546;
  --cobalt: #3646e0;
  --lime: #cff23c;
  --lime-d: #b6da1c;
  --ink: #12173f;
  --muted: #566086;
  --paper: #f2f4fb;
  --card: #ffffff;
  --line: #dbe0f0;
  --ok: #17703f;
  --err: #b3261e;
  --r: 14px;
  --r-s: 9px;
  --shadow: 0 1px 2px rgba(15, 21, 70, .06), 0 14px 30px -18px rgba(15, 21, 70, .35);
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-disp: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--cobalt); text-underline-offset: .18em; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .announce :focus-visible { outline-color: var(--lime); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--lime); color: var(--navy-dd); padding: 10px 16px; border-radius: var(--r-s); font-weight: 700; }
.skip:focus { left: 8px; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; cursor: pointer;
  font: 700 .98rem/1 var(--f-body); padding: .95em 1.25em; border-radius: var(--r-s); border: 2px solid transparent;
  text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn--lime { background: var(--lime); color: var(--navy-dd); }
.btn--lime:hover { background: #dcfa59; color: var(--navy-dd); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-d); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--line { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--line:hover { border-color: var(--navy); color: var(--navy); }
.btn--sm { padding: .7em 1em; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Hinweisleiste ---------- */
.announce { background: var(--cobalt); color: #fff; font-size: .88rem; }
.announce__in { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px max(var(--gutter), 44px); position: relative; text-align: center; }
.announce b { font-weight: 700; }
.announce__x { position: absolute; right: calc(var(--gutter) - 8px); top: 50%; translate: 0 -50%; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 6px; opacity: .85; }
.announce__x:hover { opacity: 1; background: rgba(255, 255, 255, .15); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--navy); color: #fff; }
.site-header.is-stuck { box-shadow: 0 10px 24px -14px rgba(8, 11, 40, .7); }
/* Kopfzeile hat dieselbe Breite wie .container: so steht das Logo bündig mit dem Seitentext darunter */
.hdr { --hdr-gap: clamp(14px, 2.4vw, 34px); display: flex; align-items: center; flex-wrap: wrap; gap: 8px var(--hdr-gap); min-height: 72px; padding-block: 8px; width: min(100% - 2 * var(--gutter), 1240px); }
/* Logo: --logo-h = Höhe samt weißem Rand (Standard 84px); --logo-maxw = Platz, der neben Menü und Werkzeugen bleibt. Ist das Logo breiter als erwartet, wird es verkleinert (object-fit), statt die Kopfzeile umzubrechen. */
.logo { --logo-h: 84px; --logo-maxw: calc(min(100vw - 16px - 2 * var(--gutter), 1240px) - 576px - 243px - 2 * var(--hdr-gap) - 24px); display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.logo__img { height: var(--logo-h); width: auto; max-width: var(--logo-maxw); object-fit: contain; background: #fff; padding: 6px 12px; border-radius: 12px; }
.logo__txt { display: none; line-height: 1.05; }
.logo.is-fallback .logo__img { display: none; }
.logo.is-fallback .logo__txt { display: block; }
.logo__txt b { font: 900 1.25rem/1 var(--f-disp); letter-spacing: -.02em; display: block; }
.logo__txt small { font-size: .75rem; letter-spacing: .02em; opacity: .85; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto 0; }
.nav > a, .nav__btn {
  color: #fff; text-decoration: none; font: 600 .95rem/1 var(--f-body); padding: 12px 12px; border-radius: 8px;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav > a:hover, .nav__btn:hover, .nav__item.is-open > .nav__btn { background: rgba(255, 255, 255, .12); color: #fff; }
.nav a[aria-current="page"], .nav__btn[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lime); border-radius: 8px 8px 0 0; }
.nav__item { position: relative; }
.nav__btn .ic { width: 1em; height: 1em; transition: rotate .15s; }
.nav__item.is-open .nav__btn .ic { rotate: 180deg; }
.menu {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 330px; background: #fff; color: var(--ink);
  border-radius: var(--r); box-shadow: 0 24px 50px -16px rgba(8, 11, 40, .55); padding: 10px; display: none;
}
.nav__item.is-open .menu { display: block; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.menu a:hover { background: var(--paper); color: var(--navy); }
.menu a.menu__all { color: var(--cobalt); border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.tools { display: flex; align-items: center; gap: 10px; }
.search-btn {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 10px 14px; font: 500 .9rem/1 var(--f-body); cursor: pointer; min-width: 170px;
}
.search-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.search-btn kbd { margin-left: auto; font: 600 .72rem/1 var(--f-body); border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; padding: 3px 6px; }
.tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; padding: 8px; border-radius: 8px; }
.tel:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cart-btn { position: relative; }
.badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--navy-dd); color: var(--lime); font-size: .78rem; font-weight: 800;
}
.badge.bump { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { scale: 1; } 40% { scale: 1.5; } 100% { scale: 1; } }
.burger { display: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; width: 46px; height: 46px; border-radius: 10px; cursor: pointer; place-items: center; }
.icon-only { display: none; }

/* Suche und Telefon sind in der Kopfzeile immer als Symbol dargestellt (mit Beschriftung für Screenreader), damit das große Logo Platz hat und die Kopfzeile genau so breit bleibt wie der Seiteninhalt */
.search-btn span, .search-btn kbd { display: none; }
.search-btn { min-width: 0; width: 46px; height: 46px; padding: 0; justify-content: center; }
.tel span { display: none; }
@media (max-width: 90em) {
  .logo { --logo-h: 78px; }
}
@media (max-width: 82em) {
  .logo { --logo-maxw: calc(100vw - 16px - 2 * var(--gutter) - 205px - var(--hdr-gap)); --logo-h: clamp(44px, calc((var(--logo-maxw) - 24px) / 4.4 + 12px), 72px); }
  .burger { display: inline-grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy-d);
    padding: 8px var(--gutter) 18px; display: none; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto; margin: 0;
  }
  .nav.is-open { display: flex; }
  .nav > a, .nav__btn { padding: 15px 8px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); justify-content: space-between; font-size: 1.05rem; }
  .nav a[aria-current="page"], .nav__btn[aria-current="page"] { box-shadow: none; color: var(--lime); }
  .nav__item { position: static; width: 100%; }
  .nav__btn { width: 100%; }
  .menu { position: static; min-width: 0; box-shadow: none; background: transparent; padding: 0 0 6px 10px; }
  .menu a { color: #fff; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .menu a.menu__all { color: var(--lime); border-bottom-color: rgba(255, 255, 255, .08); }
  .tools { margin-left: auto; }
  .cart-btn .cart-btn__txt { display: none; }
}
/* Handy: ohne Telefonnummer; Logohöhe passt sich dem Platz neben Suche, Anfrageliste und Menü an (Annahme: Logo ca. 4,4 : 1 breit; breitere Logos werden verkleinert) */
@media (max-width: 32.5em) { .tel { display: none; } .tools { gap: 6px; } .logo { --logo-maxw: calc(100vw - 2 * var(--gutter) - 153px - var(--hdr-gap) - 8px); --logo-h: clamp(36px, calc((var(--logo-maxw) - 16px) / 4.4 + 8px), 54px); } .logo__img { padding: 4px 8px; } }

/* ---------- Hero (Startseite) ---------- */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 75% at 82% 58%, rgba(80, 100, 255, .38), transparent 65%), radial-gradient(40% 50% at 5% 100%, rgba(15, 21, 70, .55), transparent 70%);
}
.hero__mark { position: absolute; z-index: -1; right: -6%; top: 50%; translate: 0 -50%; width: min(62vw, 860px); color: #fff; opacity: .07; pointer-events: none; }
.hero__video { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0b0d1f; pointer-events: none; }
.hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__video video::-webkit-media-controls, .hero__video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 8, 24, .86) 0%, rgba(6, 8, 24, .68) 52%, rgba(6, 8, 24, .5) 100%); }
.hero__vctl { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; background: rgba(15, 21, 70, .62); color: #fff; font: 600 .85rem var(--f-body); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__vctl:hover { background: rgba(15, 21, 70, .9); border-color: #fff; }
.hero__vctl:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.hero__vctl[hidden] { display: none; }
.hero__in > * { min-width: 0; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: clamp(520px, 80vh, 800px); min-height: clamp(520px, 80svh, 800px); padding-block: clamp(48px, 7vw, 96px); }
.hero__in > div { max-width: 46rem; }
.eyebrow-hero { display: inline-flex; align-items: center; gap: 10px; color: var(--lime); font: 700 .875rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.eyebrow-hero::before { content: ""; width: 12px; height: 12px; background: var(--lime); border-radius: 3px; flex: none; }
.hero h1 { font-size: clamp(3.2rem, 9.4vw, 8rem); line-height: .93; letter-spacing: -.038em; margin: 0 0 .32em; text-wrap: initial; }
.hero h1 span { display: block; }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(255, 255, 255, .88); max-width: 34em; margin-bottom: 28px; }
.hero-search { display: flex; background: #fff; border-radius: 12px; padding: 6px; max-width: 560px; box-shadow: 0 20px 40px -20px rgba(6, 9, 40, .8); }
.hero-search input { flex: 1; width: 100%; min-width: 0; border: 0; background: none; font: 500 1rem var(--f-body); padding: 14px 16px; color: var(--ink); border-radius: 8px; }
.hero-search input:focus-visible { outline: none; }
.hero-search:focus-within { outline: 3px solid var(--lime); outline-offset: 2px; }
.hero-search button { border: 0; background: var(--navy-dd); color: #fff; font: 700 .98rem var(--f-body); padding: 0 24px; border-radius: 8px; cursor: pointer; }
.hero-search button:hover { background: #000; }
.hero__links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; max-width: 600px; }
.hero__links a { color: #fff; text-decoration: none; font-size: .9rem; font-weight: 600; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.hero__links a:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 56.25em) {
  .hero__in { min-height: 0; padding-bottom: 84px; }
  .hero__video::after { background: rgba(6, 8, 24, .74); }
    .hero__mark { width: 110vw; right: -30%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 span:nth-child(2) { animation-delay: .09s; }
  .hero h1 span:nth-child(3) { animation-delay: .18s; }
  @keyframes rise { from { opacity: 0; translate: 0 .35em; } to { opacity: 1; translate: 0 0; } }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--white { background: #fff; }
.section--navy { background: var(--navy-d); color: #fff; }
.section-head { display: grid; gap: 6px; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.section--navy .section-head p { color: rgba(255, 255, 255, .8); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.tile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.tile:focus-within { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.tile__img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #e5e9f8, #cfd6f0); overflow: hidden; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile :is(h2, h3) { margin: 0; font-size: 1.28rem; }
.tile :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.tile :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.tile :is(h2, h3) a:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--lime-d); text-underline-offset: .2em; }
.tile ul { list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: .93rem; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.tile__count { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .88rem; color: var(--navy); display: flex; align-items: center; gap: 8px; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); }
.steps li { counter-increment: s; position: relative; padding-top: 70px; }
.steps li::before {
  content: counter(s); position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--navy-dd);
  display: grid; place-items: center; font: 900 1.5rem/1 var(--f-disp);
}
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 66px; right: -10px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 6px, transparent 6px 12px); }
.steps h3 { font-size: 1.35rem; margin-bottom: .35em; }
.steps p { color: rgba(255, 255, 255, .82); margin: 0; }
@media (max-width: 48.75em) { .steps { grid-template-columns: minmax(0, 1fr); } .steps li:not(:last-child)::after { display: none; } .steps li { padding: 0 0 0 70px; min-height: 52px; } }

.company { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.company p { font-size: 1.08rem; }
.facts { margin: 0; border-top: 3px solid var(--navy); }
.facts div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; font: 800 1.3rem/1.2 var(--f-disp); letter-spacing: -.02em; color: var(--navy); }
@media (max-width: 53.75em) { .company { grid-template-columns: minmax(0, 1fr); } .facts div { grid-template-columns: 9em minmax(0, 1fr); } }
.video-box { margin-top: 28px; border-radius: var(--r); overflow: hidden; background: var(--navy-d); }
.video-box video { width: 100%; display: block; }

.cta-band { background: radial-gradient(70% 140% at 88% 0%, rgba(80, 100, 255, .32), transparent 62%), linear-gradient(135deg, var(--navy) 0%, var(--navy-d) 100%); color: #fff; }
.cta-band__in { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; padding-block: clamp(36px, 5vw, 64px); }
.cta-band h2 { margin: 0 0 .25em; font-size: clamp(1.9rem, 4vw, 3rem); }
.cta-band p { margin: 0; font-size: 1.1rem; }
.cta-band .big-tel { font: 900 clamp(1.8rem, 3.6vw, 2.7rem)/1 var(--f-disp); color: #fff; text-decoration: none; letter-spacing: -.03em; white-space: nowrap; }
.cta-band .big-tel:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .15em; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); }
.cta-band :focus-visible { outline-color: var(--lime); }
.cta-band__side { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 48.75em) { .cta-band__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Unterseiten ---------- */
.page-head { background: var(--navy); color: #fff; padding-block: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 90% 60%, rgba(80, 100, 255, .32), transparent 70%); }
.page-head h1 { margin: 0 0 .3em; }
.page-head p { color: rgba(255, 255, 255, .85); margin: 0; font-size: 1.08rem; max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; padding: 0; margin: 0 0 18px; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.crumbs a { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .55; }
.page-head__row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; }
.filter { position: relative; flex: 0 1 380px; width: 100%; }
.filter input { width: 100%; border: 0; border-radius: 10px; padding: 14px 16px 14px 46px; font: 500 1rem var(--f-body); color: var(--ink); background: #fff; }
.filter .ic { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: var(--muted); width: 1.2em; height: 1.2em; }
.filter input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.subnav { position: sticky; top: 72px; z-index: 40; background: #f2f4fb; border-bottom: 1px solid var(--line); }
.subnav__in { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: thin; }
.subnav a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.subnav a:hover { border-color: var(--navy); color: var(--navy); }
.subnav a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cat-body { padding-block: 32px 80px; }
.cat-section { margin-bottom: 46px; scroll-margin-top: 150px; }
.cat-section > h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); padding-bottom: 12px; border-bottom: 3px solid var(--navy); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.cat-section > h2 small { font: 600 .88rem var(--f-body); color: var(--muted); letter-spacing: 0; }
.price-note { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--lime-d); border-radius: var(--r-s); padding: 14px 18px; margin-bottom: 28px; font-size: .96rem; display: flex; gap: 12px; align-items: flex-start; }
.price-note p { margin: 0; max-width: none; }
.no-results { padding: 40px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: var(--r); }

/* ---------- Artikel-Karten ---------- */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 18px; align-items: start; }
.item { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); scroll-margin-top: 150px; }
.item:target { animation: ring 1.8s ease-out 1; }
@keyframes ring { 0%, 55% { box-shadow: 0 0 0 4px var(--lime-d), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.item__img { width: 148px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0; cursor: zoom-in; overflow: hidden; align-self: start; display: grid; place-items: center; }
.item__img img { width: 100%; height: 100%; object-fit: contain; }
.item__img.is-empty { cursor: default; background: linear-gradient(135deg, #eef1fb, #dfe5f7); color: var(--navy); opacity: .85; }
.item__img.is-empty .ic { width: 38px; height: 38px; opacity: .55; }
.item h3 { margin: 0 0 .5em; font-size: 1.1rem; line-height: 1.25; }
.specs { margin: 0 0 12px; padding: 0; list-style: none; font-size: .92rem; color: var(--ink); }
.specs li { position: relative; padding-left: 18px; margin: 2px 0; }
.specs li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--lime-d); }
.specs-more { margin: -4px 0 12px; font-size: .88rem; }
.specs-more summary { cursor: pointer; color: var(--cobalt); font-weight: 600; width: max-content; padding: 2px 0; }
.specs-more .specs { margin: 6px 0 0; }
.hint { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.variants { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.variants legend { font-weight: 700; font-size: .9rem; color: var(--muted); padding: 0; margin-bottom: 7px; }
.variants__list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  font: 600 .88rem/1.2 var(--f-body); padding: 8px 12px; border-radius: 999px; transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--navy); }
.chip[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15, 21, 70, .35); flex: none; }
.variants.has-error .chip { border-color: var(--err); }
.variants__err { color: var(--err); font-weight: 600; font-size: .9rem; margin: 8px 0 0; }
.detail { background: var(--paper); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; }
.detail:empty { display: none; }
.detail .specs { margin-bottom: 8px; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.detail__meta b { font-weight: 700; }
.art { font-variant-numeric: tabular-nums; }
.item__foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
.lead-time { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--muted); }
.lead-time .ic { color: var(--navy); }
.buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-s); background: #fff; overflow: hidden; }
.qty button { width: 38px; height: 44px; border: 0; background: none; font: 700 1.2rem var(--f-body); color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.qty button:hover { background: var(--paper); }
.qty input { width: 54px; text-align: center; border: 0; font: 700 1rem var(--f-body); height: 44px; -moz-appearance: textfield; appearance: textfield; background: none; color: var(--ink); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-unit { font-size: .9rem; color: var(--muted); }
.item__note { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.ds-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; min-height: 28px; }
@media (max-width: 35em) {
  .item { grid-template-columns: minmax(0, 1fr); }
  .item__img { width: 132px; }
  .items { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Anfrageliste ---------- */
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(22px, 4vw, 48px); align-items: start; padding-block: 36px 90px; }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cart-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.cart-row__img { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: #fff; display: grid; place-items: center; color: var(--navy); opacity: .9; }
.cart-row h3 { margin: 0 0 2px; font-size: 1rem; line-height: 1.25; }
.cart-row .sub { color: var(--muted); font-size: .88rem; }
.cart-row__ctl { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-s); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.icon-btn:hover { border-color: var(--err); color: var(--err); }
.cart-empty { background: #fff; border: 2px dashed var(--line); border-radius: var(--r); padding: clamp(28px, 5vw, 56px); text-align: center; }
.cart-empty h2 { font-size: 1.6rem; }
.cart-empty p { margin-inline: auto; color: var(--muted); }
.cart-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: space-between; align-items: center; }
.link-btn { background: none; border: 0; color: var(--cobalt); font: 600 .92rem var(--f-body); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; padding: 8px 0; }
.link-btn:hover { color: var(--err); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.form-card--sticky { position: sticky; top: 96px; }
.form-card h2 { font-size: 1.5rem; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label, .field .lbl { font-weight: 700; font-size: .9rem; }
.field .req { color: var(--err); }
.field input, .field select, .field textarea {
  width: 100%; font: 500 1rem var(--f-body); color: var(--ink); padding: 12px 14px; border: 1.5px solid #c8cfe6; border-radius: var(--r-s); background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }
.field .err { color: var(--err); font-weight: 600; font-size: .88rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 32.5em) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin-bottom: 16px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.form-actions { display: grid; gap: 10px; }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-s); background: #eaf7ef; color: #11502c; font-weight: 600; font-size: .95rem; }
.form-status.is-err { background: #fdecea; color: #7f1b15; }
.form-status p { margin: 0 0 8px; max-width: none; }
.form-status p:last-child { margin: 0; }
.form-status .row-btn { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.form-status .dev-hint { font-weight: 500; border: 1px dashed currentColor; border-radius: 8px; padding: 8px 10px; }
@media (max-width: 60em) { .cart-grid { grid-template-columns: minmax(0, 1fr); } .form-card--sticky { position: static; } }
@media (max-width: 32.5em) { .cart-row { grid-template-columns: 60px minmax(0, 1fr); } .cart-row__img { width: 60px; height: 60px; } .cart-row__ctl { grid-column: 1 / -1; justify-content: space-between; } }

/* ---------- Text- und Infoseiten ---------- */
.prose { padding-block: 40px 90px; }
.prose .container > * { max-width: 78ch; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; padding-top: .2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.3em; }
.prose address { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin: 0 0 1.2em; line-height: 1.7; }
.prose .callout { background: #fff; border-left: 6px solid var(--lime-d); border-radius: var(--r-s); padding: 16px 20px; margin: 0 0 1.4em; }
.prose .callout p:last-child { margin: 0; }
.prose dl { margin: 0 0 1.4em; }
.prose dt { font-weight: 700; margin-top: .8em; }
.prose dd { margin: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 48px); padding-block: 40px 90px; align-items: start; }
@media (max-width: 60em) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.contact-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.contact-list .ic { width: 24px; height: 24px; color: var(--navy); margin-top: 2px; }
.contact-list b { display: block; }
.hours { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin-bottom: 24px; }
.hours h3 { margin-bottom: .3em; }
.hours p { margin: 0; }
.gate { background: var(--navy-d); color: #fff; border-radius: var(--r); padding: clamp(22px, 4vw, 40px); }
.gate p { color: rgba(255, 255, 255, .88); max-width: 62ch; }
.gate a:not(.btn) { color: var(--lime); }
.gate .btn { margin-top: 6px; }
.embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.embed iframe { width: 100%; height: 380px; border: 0; display: block; }
.embed--tall iframe { height: min(80vh, 900px); }
.catalog-hero { border-radius: var(--r); overflow: hidden; margin-bottom: 28px; max-height: 340px; }
.catalog-hero img { width: 100%; height: 100%; object-fit: cover; max-height: 340px; }
.pay-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 32px; }
.pay-cards > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.pay-cards .ic { width: 30px; height: 30px; color: var(--navy); margin-bottom: 10px; }
.pay-cards :is(h2, h3) { margin: 1.3em 0 .2em; font-size: 1.12rem; letter-spacing: -.01em; }
.pay-cards p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 48.75em) { .pay-cards { grid-template-columns: minmax(0, 1fr); } }
.sitemap-list { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 6px; }
.sitemap-list ul { list-style: none; padding-left: 20px; margin: 6px 0 0; display: grid; gap: 6px; border-left: 3px solid var(--line); }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.result { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 14px; text-decoration: none; color: var(--ink); }
.result:hover { border-color: var(--navy); color: var(--ink); }
.result img, .result .ph { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--navy); }
.result b { display: block; line-height: 1.25; }
.result small { color: var(--muted); }
.result .go { color: var(--navy); }
.search-page { padding-block: 36px 90px; }
.search-page .hero-search { box-shadow: none; border: 2px solid var(--navy); max-width: 680px; margin-bottom: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dd); color: rgba(255, 255, 255, .86); font-size: .95rem; }
.foot-top { background: var(--navy-d); }
.foot-top__in { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; padding-block: 28px; }
.foot-top h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: #fff; max-width: 28ch; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 48px 36px; }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8em; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.site-footer a:hover { color: var(--lime); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.foot-link-btn { background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .86); font: inherit; cursor: pointer; text-align: left; }
.foot-link-btn:hover { color: var(--lime); text-decoration: underline; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; display: grid; place-items: center; }
.socials a:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-dd); text-decoration: none; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.foot-bottom__in { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding-block: 18px; font-size: .9rem; color: rgba(255, 255, 255, .7); }
@media (max-width: 56.25em) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32.5em) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dialoge, Toast ---------- */
dialog { border: 0; padding: 0; border-radius: 18px; max-width: min(92vw, 720px); width: 100%; color: var(--ink); background: #fff; box-shadow: 0 40px 90px -20px rgba(6, 9, 40, .7); }
dialog::backdrop { background: rgba(10, 14, 52, .62); backdrop-filter: blur(3px); }
.dlg { padding: clamp(18px, 3vw, 28px); }
.dlg__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dlg__head h2 { margin: 0; font-size: 1.4rem; }
.dlg__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.dlg__x:hover { background: var(--line); }
#dlg-search { align-self: start; margin-top: 8vh; }
#dlg-search .hero-search { box-shadow: none; border: 2px solid var(--navy); max-width: none; }
.search-results { list-style: none; padding: 0; margin: 14px 0 0; max-height: 55vh; overflow: auto; display: grid; gap: 6px; }
.search-results a { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a:focus-visible, .search-results a.is-sel { background: var(--paper); }
.search-results img, .search-results .ph { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: grid; place-items: center; color: var(--navy); }
.search-results b { display: block; line-height: 1.25; font-size: .95rem; }
.search-results small { color: var(--muted); }
.search-empty { color: var(--muted); padding: 12px 6px; }
#dlg-zoom { max-width: min(94vw, 980px); background: #fff; }
#dlg-zoom img { max-height: 78vh; max-height: min(78vh, calc(100dvh - 9rem)); width: 100%; object-fit: contain; }   /* Querformat am Handy: Kopfzeile des Fensters bleibt Platz */
.consent-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.consent-row p { margin: 0; font-size: .92rem; color: var(--muted); max-width: 52ch; }
.consent-row b { color: var(--ink); display: block; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #b8c0dc; border-radius: 999px; transition: background-color .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: translate .15s; }
.switch input:checked + span { background: var(--navy); }
.switch input:checked + span::after { translate: 22px 0; }
.switch input:disabled { cursor: not-allowed; }
.switch input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.toast-wrap { position: fixed; z-index: 120; left: 0; right: 0; bottom: 18px; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 12px; }
.toast { pointer-events: auto; background: var(--navy-dd); color: #fff; border-radius: 12px; padding: 12px 14px 12px 18px; display: flex; gap: 16px; align-items: center; box-shadow: 0 20px 40px -14px rgba(6, 9, 40, .8); font-size: .95rem; max-width: min(100%, 560px); animation: toast-in .3s cubic-bezier(.2, .8, .2, 1); }
.toast a { color: var(--lime); font-weight: 700; white-space: nowrap; }
.toast .ic { color: var(--lime); }
@keyframes toast-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .announce, .site-header, .site-footer, .toast-wrap, .form-card, .cart-tools, .icon-btn, .qty button, .hero__video, .hero__vctl { display: none !important; }
  body { background: #fff; }
  .cart-grid { display: block; padding: 0; }
  .cart-row { break-inside: avoid; }
}

/* Platzhalter-Symbole, wenn ein Bild nicht geladen werden kann */
.ph-ic { display: none; }
.is-empty > .ph-ic, .is-empty .ph-ic { display: block; }
.tile__img.is-empty, .cart-row__img img, .result img, .search-results img { background: #fff; }
.ph .ic { width: 26px; height: 26px; opacity: .6; }

.field--check { margin-bottom: 16px; }
.field--check .check { margin: 0; }
.field--check input { width: 20px; height: 20px; padding: 0; border: 0; }
.more-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.more-cats a { display: inline-block; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.more-cats a:hover { border-color: var(--navy); color: var(--navy); }
.more-wrap { padding-block: 0 80px; }
.more-wrap h2 { font-size: 1.3rem; }

.site-footer .btn--lime, .site-footer .btn--lime:hover { color: var(--navy-dd); text-decoration: none; }
.logo.is-fallback .logo__txt { color: #fff; }


/* ======================================================================
   Barrierefreiheit, Lesbarkeit und CSP-Verträglichkeit (Stand: Härtung)
   Keine Inline-Styles mehr im HTML: Hilfsklassen statt style="…".
   ====================================================================== */
body { overflow-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.sprite { position: absolute; }
.mb-1 { margin: 0 0 1em; }
.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin: 32px 0 0; }
.mx-auto { margin-inline: auto; }
.strong-ink { color: var(--ink); font-weight: 700; }
.on-navy { color: #fff; }
.pay-cards--wide { max-width: none; }
.zoom-title { font-size: 1.05rem; }
.consent-note { color: var(--muted); font-size: .95rem; }
.dlg__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.cart-row__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-row__name { color: inherit; text-decoration: none; }
.cart-row__name:hover { text-decoration: underline; }
.site-footer address a, .contact-list a, .site-footer .socials a { display: inline-block; padding-block: 4px; }
.site-footer .socials a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
.privacy-note { font-size: .92rem; color: var(--muted); margin: 14px 0 18px; max-width: none; }
.field .err { display: block; margin-top: 6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-width: 2px; }

/* Entwurfs-Hinweis auf rechtlichen Seiten, die noch nicht freigegeben sind */
.draft-banner { background: #fff3cd; color: #3f3000; border: 2px solid #b78a00; border-radius: var(--r-s); padding: 16px 20px; margin: 0 0 28px; max-width: none; font-weight: 600; }
.draft-banner b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.todo { background: #fff3cd; color: #3f3000; padding: 0 .25em; border-radius: 3px; font-weight: 700; }

/* Sehr schmale Darstellung (kleines Fenster oder stark vergrößerte Schrift): einspaltig, nichts läuft über den Rand.
   Die Grenzen sind in em angegeben und folgen damit der Schriftgröße, die Besucher im Browser eingestellt haben. */
@media (max-width: 22em) {
  .logo { min-width: 0; flex: 0 1 auto; }
  .logo__txt { min-width: 0; overflow-wrap: anywhere; }
  .qty-unit { flex-basis: 100%; }
  .js-buy { white-space: normal; max-width: 100%; }
  .btn { white-space: normal; max-width: 100%; text-align: center; padding-inline: .6em; }
  .hero h1 { font-size: min(3.2rem, 17vw); }
  .chip { white-space: normal; max-width: 100%; text-align: left; }
  .big-tel, .contact-list a, .site-footer a { overflow-wrap: anywhere; max-width: 100%; }
  .cta-band__side { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
  .cta-band .big-tel { white-space: normal; font-size: min(1.8rem, 9vw); }
  .buy { max-width: 100%; }
  .item { grid-template-columns: minmax(0, 1fr); }
  .item__img { width: min(148px, 100%); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* Bei sehr wenig Platz (schmal und stark vergrößert, oder Querformat am Handy) bleibt die Kopfzeile nicht am oberen Rand haften,
   damit sie den Inhalt und den Tastaturfokus nicht verdeckt. „relative“ statt „static“: Das aufklappbare Menü (position: absolute; top: 100%)
   braucht die Kopfzeile als Bezugsrahmen, sonst erscheint es unterhalb des sichtbaren Bereichs (Fehler bei 320 px Breite und im Querformat, 27.10.2026). */
@media (max-width: 22em), (max-height: 30em) {
  .site-header { position: relative; }
}
@media (max-width: 40em) {
  h1, h2, h3, h4, p, li, dt, dd, summary, address, b, .lead-time { overflow-wrap: anywhere; }
}

/* Fokus-Rahmen der Suchfelder auf hellem Grund: Limette wäre dort kaum sichtbar, deshalb dunkles Blau */
.search-page .hero-search:focus-within, #dlg-search .hero-search:focus-within { outline-color: var(--cobalt); }

@media (forced-colors: active) {
  .btn, .chip, .search-btn, .burger, .hero__vctl { border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* Katalogseite (PDF-Katalog) */
.kat-main { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.kat-cover { display: block; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: #fff; box-shadow: 0 18px 40px -22px rgba(8, 11, 40, .55); }
.kat-cover img { display: block; width: 100%; height: auto; }
.kat-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5em; }
.kat-info p { max-width: 62ch; }
.kat-facts { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0 0 1.2em; padding: 14px 0; border-block: 1px solid var(--line); }
.kat-facts div { display: grid; gap: 2px; }
.kat-facts dt { color: var(--muted); font-weight: 600; font-size: .9rem; }
.kat-facts dd { margin: 0; font-weight: 800; color: var(--navy); font-size: 1.15rem; }
.kat-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.2em; }
.kat-h { font-size: 1.5rem; margin: 0 0 .4em; }
.kat-groups { list-style: none; margin: 18px 0 0; padding: 0; border-top: 3px solid var(--navy); }
.kat-groups li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.kat-groups li > a { font-weight: 800; font-size: 1.12rem; color: var(--navy); text-underline-offset: 3px; }
.kat-group__pg { margin-left: 12px; color: var(--muted); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.kat-groups p { margin: 4px 0 0; color: var(--muted); max-width: 70ch; }
.kat-note { margin-top: 32px; background: var(--paper); border-left: 6px solid var(--lime-d); border-radius: var(--r-s); padding: 16px 20px; max-width: 78ch; }
@media (max-width: 40em) {
  .kat-main { grid-template-columns: minmax(0, 1fr); }
  .kat-cover { width: min(220px, 70%); }
}

/* ---------------------------------------------------------------- KI-Assistent (Chat) – assets/chat.js
   Schaltfläche unten rechts, Fenster ohne Abdunklung der Seite (die Seite bleibt benutzbar). Maße in rem/em, damit Schriftvergrößerung greift.
   Auf dem Handy füllt das Fenster die Breite; bei 400 % Zoom passt es in den Bildschirm und scrollt innen. */
.has-chat { scroll-padding-bottom: 96px; }
.has-chat .foot-bottom__in { padding-bottom: 84px; }
.chat-launch {
  position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .7em 1.25em .7em 1.05em;
  border: 2px solid #fff; border-radius: 999px; background: var(--navy); color: #fff; font: 700 1rem/1.1 var(--f-body); cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(10, 14, 52, .65);
}
.chat-launch:hover { background: var(--navy-d); }
.chat-launch .ic { width: 1.5em; height: 1.5em; color: var(--lime); }
/* Fokus: weißer Ring innen, dunkler Ring außen – auf hellem und dunklem Untergrund sichtbar */
.chat-launch:focus-visible, .chat-panel :focus-visible { outline: 3px solid var(--navy-dd); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.chat-panel .chat-head :focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--navy-dd); }
.chat-panel {
  position: fixed; z-index: 100; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(25rem, calc(100vw - 32px)); height: min(44rem, calc(100vh - 32px)); height: min(44rem, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ink);
  border-radius: 18px; box-shadow: 0 40px 90px -20px rgba(6, 9, 40, .7), 0 0 0 1px var(--line);
}
.chat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 12px 12px 12px 18px; background: var(--navy-d); color: #fff; }
.chat-head__t { flex: 1 1 9rem; min-width: 0; }
.chat-head h2 { margin: 0; font-size: 1.1rem; color: #fff; }
.chat-sub { margin: 2px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .86); }
.chat-head__b { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.chat-hbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; min-width: 44px; padding: 0 .8em; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent; color: #fff; font: 600 .85rem var(--f-body); cursor: pointer; }
.chat-hbtn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.chat-hbtn--icon { padding: 0; border-radius: 50%; }
.chat-hbtn .ic { width: 1.25em; height: 1.25em; }
.chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-intro { flex: 1; overflow-y: auto; padding: 18px; font-size: 1rem; line-height: 1.5; }
.chat-intro p { margin: 0 0 .6em; }
.chat-intro__pre { margin-bottom: .35em; }
.chat-intro__lead { font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.chat-intro ul { margin: 0 0 1em; padding-left: 1.2em; display: grid; gap: .45em; }
.chat-intro__act { margin: 1.1em 0; }
.chat-intro__more { font-size: .9rem; color: var(--muted); }
.chat-conv { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.chat-log { flex: 1 1 auto; min-height: 5em; overflow-y: auto; padding: 14px; background: var(--paper); display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.chat-msg { display: grid; gap: 3px; max-width: 92%; }
.chat-msg--user { align-self: flex-end; justify-items: end; }
.chat-msg--bot { align-self: flex-start; }
.chat-who { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.chat-bubble { padding: .65em .9em; border-radius: 14px; line-height: 1.5; font-size: 1rem; overflow-wrap: anywhere; }
.chat-bubble p { margin: 0; }
.chat-msg--user .chat-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.chat-msg--bot .chat-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-rich p + p, .chat-rich p + ul, .chat-rich ul + p, .chat-rich ul + ul { margin-top: .6em; }
.chat-rich ul { margin: 0; padding-left: 1.2em; display: grid; gap: .25em; }
.chat-rich a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chat-note { align-self: stretch; padding: .55em .8em; border-radius: 10px; background: #fff; border: 1px dashed var(--muted); color: var(--ink); font-size: .95rem; line-height: 1.45; }
.chat-note p { margin: 0; }
.chat-note--err { border: 1px solid var(--err); border-left-width: 5px; color: #7c1710; background: #fff7f6; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; background: var(--paper); }
.chat-chip { min-height: 44px; padding: .45em .9em; border: 1px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: 600 .9rem/1.25 var(--f-body); cursor: pointer; text-align: left; }
.chat-chip:hover { background: var(--navy); color: #fff; }
.chat-form { padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-form__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.chat-form textarea { flex: 1 1 12em; min-width: 0; min-height: 2.9em; max-height: 8em; resize: none; padding: .6em .75em; border: 2px solid #8993b8; border-radius: 12px; font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: #fff; }
.chat-form textarea::placeholder { color: var(--muted); opacity: 1; }
.chat-panel .chat-form textarea:focus-visible { border-color: var(--cobalt); outline: 3px solid var(--cobalt); outline-offset: 1px; box-shadow: none; }
.chat-send { flex: 1 1 auto; min-height: 44px; padding-inline: 1em; }
.chat-send .ic { width: 1.2em; height: 1.2em; }
.chat-hint { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 32.5em) {
  .chat-panel { left: 0; right: 0; bottom: 0; width: auto; height: min(44rem, calc(100vh - 8px)); height: min(44rem, calc(100dvh - 8px)); border-radius: 18px 18px 0 0; }
  .chat-msg { max-width: 96%; }
  .chat-launch span { display: none; }
  .chat-launch { padding: .7em; min-width: 52px; justify-content: center; }
}
/* Wenig Platz (niedriger Bildschirm oder große Schrift – em-Werte wachsen mit der Schrift): Beispielfragen weg, Eingabe einzeilig */
@media (max-height: 40em) {
  .chat-chips { display: none; }
  .chat-form textarea { height: 2.9em; }
  .chat-sub { font-size: .8rem; }
}
@media (max-height: 30em) and (orientation: landscape) {
  .chat-panel { height: calc(100vh - 8px); height: calc(100dvh - 8px); bottom: 4px; }
}
@media print { .chat { display: none !important; } }
@media (forced-colors: active) {
  .chat-launch, .chat-hbtn, .chat-chip { border: 2px solid ButtonText; }
  .chat-panel { border: 2px solid CanvasText; }
  .chat-msg--bot .chat-bubble, .chat-msg--user .chat-bubble { border: 1px solid CanvasText; }
}