/* =========================================================
   BRERO – Startseite
   Design-Tokens: Alle Farben, Schriften und Abstände
   sind hier zentral definiert. Bitte nur hier anpassen.
   ========================================================= */
:root {
  /* Farben */
  --blue: #0070c0;          /* Primärblau: Buttons, Links, Icons */
  --blue-hover: #005a9c;
  --blue-deep: #23415c;     /* Kontakt-Band (CTA) */
  --navy: #0b2d4b;          /* Überschriften, Navigation */
  --text: #3d586b;          /* Fliesstext */
  --muted: #6b8091;         /* Sekundärtext */
  --line: #e4ecf0;          /* Rahmen, Trennlinien */
  --bg: #ffffff;
  --bg-soft: #f5f9fb;       /* Hellblaue Sektionshintergründe */
  --white: #ffffff;

  /* Typografie */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;
  --fs-hero: clamp(1.875rem, 3.4vw, 3rem);   /* 30–48px */
  --fs-h2: clamp(1.75rem, 2.6vw, 2.5rem);   /* 28–40px */
  --fs-h3: 1.25rem;                         /* 20px */
  --fs-body: 1rem;                          /* 16px */
  --fs-small: 0.875rem;                     /* 14px */
  --fs-eyebrow: 0.8125rem;                  /* 13px */

  /* Abstände & Formen */
  --container: 1240px;
  --gutter: 24px;
  --section-y: clamp(40px, 4.5vw, 64px);
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(11, 45, 75, .04), 0 6px 24px rgba(11, 45, 75, .06);
  --shadow-hover: 0 2px 4px rgba(11, 45, 75, .06), 0 14px 36px rgba(11, 45, 75, .12);
  --header-h: 76px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--navy); margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px;
  border-radius: var(--radius); border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn .icon { width: 20px; height: 20px; transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-outline { border-color: var(--blue); color: var(--blue); background: var(--white); }
.btn-outline:hover { background: var(--bg-soft); }
.btn-white { background: var(--white); color: var(--blue); }
.btn-white:hover { background: #ebf5fd; }
.btn-ghost-white { border-color: rgba(255, 255, 255,.85); color: var(--white); }
.btn-ghost-white:hover { background: rgba(255, 255, 255,.1); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 600; }
.link-arrow .icon { width: 20px; height: 20px; transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(4px); }

.eyebrow { display: block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }

.section { padding: var(--section-y) 0; }
.section-soft { background: var(--bg-soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 700; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.header .container { display: flex; align-items: center; height: var(--header-h); gap: 20px; max-width: 1400px; }
.logo { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.logo img { height: 28px; width: auto; display: block; }
.nav { display: flex; align-items: stretch; height: 100%; gap: 4px; margin-right: auto; }
.nav > li { position: relative; display: flex; }
.nav > li > a, .nav > li > button {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--navy);
  background: none; border: 0; cursor: pointer; border-bottom: 2px solid transparent;
}
.nav > li > a:hover, .nav > li > button:hover, .nav > li.open > button { color: var(--blue); border-bottom-color: var(--blue); }
.nav .chev { width: 16px; height: 16px; transition: transform .2s; }
.nav li.open .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 1px); left: 0; width: 320px;
  background: var(--white); border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-hover); padding: 8px 16px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s;
}
.nav li.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 500; }
.dropdown li:last-child a { border-bottom: 0; }
.dropdown img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.dropdown a span { flex: 1; }
.dropdown a .icon { width: 16px; height: 16px; color: var(--muted); }
.dropdown a:hover { color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Topbar: Telefon, E-Mail, Sprachen */
.topbar { background: #f4f7f8; font-size: .8125rem; color: var(--navy); }
.topbar .container { display: flex; justify-content: flex-end; align-items: center; gap: 30px; height: 38px; max-width: 1400px; }
.topbar a { display: inline-flex; align-items: center; gap: 10px; }
.topbar a:hover { color: var(--blue); }
.topbar .icon { width: 15px; height: 15px; color: var(--navy); stroke-width: 1.6; }
.lang { display: flex; gap: 2px; font-size: .8125rem; font-weight: 600; }
.lang a { padding: 3px 7px; color: var(--navy); border-radius: 4px; }
.lang a[aria-current] { color: var(--blue); }
.header .btn { height: 46px; padding: 0 20px; font-size: .9375rem; white-space: nowrap; }
.menu-toggle { display: none; background: none; border: 0; color: var(--navy); cursor: pointer; padding: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--bg-soft); overflow: hidden; }
/* Bild über die ganze Breite, im natürlichen Seitenverhältnis (2000×760) oben verankert */
.hero-media { position: absolute; top: 0; left: 0; right: 0; height: max(38vw, 440px); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
/* Helle Blende links hinter dem Text + weicher Übergang unten */
.hero-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, var(--bg-soft) 0%, rgba(245, 249, 251,0) 22%),
  linear-gradient(90deg, rgba(248, 251, 252,1) 0%, rgba(248, 251, 252,.97) 32%, rgba(248, 251, 252,.82) 39%, rgba(248, 251, 252,.3) 45%, rgba(248, 251, 252,0) 50%); }
.hero-inner { position: relative; z-index: 1; padding: 72px 0 8px; max-width: 600px; }
.hero .eyebrow { color: var(--text); font-weight: 500; letter-spacing: .2em; font-size: .875rem; margin-bottom: 20px; }
.hero h1 { font-size: var(--fs-hero); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 22px; max-width: 11em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.hero-lead { font-size: 1.1875rem; line-height: 1.5; color: #2b4458; max-width: 450px; margin-bottom: 32px; }
.hero-lead strong { display: block; margin-top: 4px; color: var(--navy); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-ctas .btn { height: 58px; padding: 0 30px; border-radius: 4px; font-weight: 500; font-size: 1.0625rem; }

.strengths { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, max-content); justify-content: start; gap: 0; padding: 36px 0 40px; }
.strength { display: flex; align-items: flex-start; gap: 14px; padding: 0 28px; border-left: 1px solid #d5e1e8; }
.strength:first-child { padding-left: 0; border-left: 0; }
.strength .icon { width: 44px; height: 44px; color: var(--blue); stroke-width: 1.6; margin-top: -2px; }
.strength strong { display: block; color: var(--navy); font-size: 1.0625rem; font-weight: 500; margin-bottom: 2px; white-space: nowrap; }
.strength span { display: block; font-size: .9375rem; color: var(--muted); line-height: 1.4; max-width: 185px; }

/* ---------- Kunden ---------- */
.clients { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 32px 0 34px; }
.clients h2 { text-align: center; font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; }
.carousel { display: flex; align-items: center; gap: 24px; }
.carousel-track { flex: 1; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carousel-track::-webkit-scrollbar { display: none; }
/* Offene Logo-Reihe ohne Kacheln; 6 Logos sichtbar */
.client-logo { flex: 0 0 calc(100% / 6); min-width: 140px; height: 80px; padding: 0 22px; scroll-snap-align: start; display: grid; place-items: center; }
.client-logo img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.client-logo img.wide { max-height: 44px; }
.round-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(11, 45, 75,.12); }
.round-btn:hover { color: var(--blue); }

/* ---------- Karten (Sortiment / Wissen) ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; }
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.card-img { aspect-ratio: 4 / 3; background: #fafbfd; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-img img { transform: scale(1.04); }
.product .card-img img { object-fit: contain; padding: 8px; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 28px; }
.card-body h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; }
.card-body p { color: var(--muted); margin-bottom: 20px; }
.card-body .link-arrow { margin-top: auto; }

/* ---------- Anwendungen ---------- */
.apps .section-intro { max-width: 640px; color: var(--muted); margin-top: 10px; }
/* Anwendungen: 5 Spalten, Karte mit Bild, blauem Icon, Titel, Text und Pfeil */
.apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.app { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.app:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.app-img { aspect-ratio: 2.4 / 1; overflow: hidden; }
.app-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.app:hover .app-img img { transform: scale(1.05); }
.app-body { flex: 1; display: grid; grid-template-columns: 34px 1fr 20px; column-gap: 12px; padding: 16px 14px 16px 16px; }
.app-body > .icon { width: 34px; height: 34px; color: var(--blue); stroke-width: 1.6; margin-top: 2px; }
.app-body > .app-icon { width: 34px; height: 34px; object-fit: contain; margin-top: 2px; }
.app-body h3 { font-size: .9375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #1a4480; margin-bottom: 8px; }
.app-body p { font-size: .8125rem; line-height: 1.45; color: #2c578c; }
.app-arrow { align-self: end; width: 20px; height: 20px; margin-bottom: 1px; color: var(--blue); transition: transform .2s; }
.app:hover .app-arrow { transform: translateX(3px); }
@media (max-width: 1100px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .apps-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .app-body { grid-template-columns: 1fr 20px; row-gap: 10px; } .app-body > .app-icon { grid-column: 1 / -1; } }
@media (max-width: 430px) { .apps-grid { grid-template-columns: 1fr; } .app-body { grid-template-columns: 34px 1fr 20px; } .app-body > .app-icon { grid-column: auto; } }
.arrow-dot { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; transition: transform .2s; }
.arrow-dot .icon { width: 20px; height: 20px; }
.news-card:hover .arrow-dot { transform: translateX(3px); }

/* ---------- News & Projekte (Bento) ---------- */
/* News & Projekte – 1:1 nach Mockup. Bilder enthalten den Verlauf bereits (img/news/*.jpg) */
.bento { display: grid; grid-template-columns: 908fr 910fr; grid-template-rows: 210fr 254fr; gap: 16px; height: 480px; }
.bento > :first-child { grid-row: 1 / 3; }
.bento-bottom { display: grid; grid-template-columns: 430fr 458fr; gap: 16px; }
.news-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; overflow: hidden; color: var(--white); isolation: isolate; background: #1d4055; box-shadow: 0 2px 10px rgba(11, 45, 75,.08); }
.news-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.news-card:hover img { transform: scale(1.03); }
.news-content { position: static; padding: 0 34px 28px; padding-right: 120px; }
.news-content > div { display: contents; }
.news-tag { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255,.22); backdrop-filter: blur(6px); }
.news-tag .icon { color: var(--white); width: 22px; height: 22px; stroke-width: 1.5; }
.news-kicker { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.news-card h3 { color: var(--white); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; }
.news-card p { color: rgba(255, 255, 255,.92); font-size: .9375rem; font-weight: 400; line-height: 1.5; }
.news-card .arrow-dot { position: absolute; right: 24px; bottom: 22px; background: none; color: var(--white); width: auto; height: auto; border-radius: 0; box-shadow: none; }
.news-card .arrow-dot .icon { width: 26px; height: 26px; stroke-width: 2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0,.35)); }
/* gross */
.news-card.big .news-content { padding-right: 22%; }
.news-card.big .news-tag { position: static; margin-bottom: 14px; }
/* breit */
.news-card.wide { justify-content: flex-end; }
.news-card.wide .news-content { padding: 0 30% 20px 30px; }
.news-card.wide .news-tag { top: 20px; left: 30px; }
/* klein */
.bento-bottom .news-content { padding: 0 20px 20px; padding-right: 40px; }
.bento-bottom .news-tag { top: 18px; left: 20px; width: 38px; height: 38px; }
.bento-bottom .news-card h3 { font-size: 1.0625rem; }
.bento-bottom .news-card p { font-size: .8125rem; line-height: 1.5; padding-right: 26px; }
.bento-bottom .arrow-dot { right: 16px; bottom: 16px; }

/* ---------- Über BRERO ---------- */

/* ---------- Kontakt-Band ---------- */
.cta { position: relative; background: var(--blue-deep); color: var(--white); overflow: hidden; }
.cta-media { position: absolute; inset: 0 0 0 48%; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-deep) 0%, rgba(35, 65, 92,.45) 40%, rgba(35, 65, 92,0) 75%); }
.cta-inner { position: relative; z-index: 1; padding: 52px 0; max-width: 640px; }
.cta .eyebrow { color: #9fd7ff; }
.cta h2 { color: var(--white); font-size: var(--fs-h2); font-weight: 700; margin-bottom: 18px; }
.cta p { font-size: 1.125rem; color: rgba(255, 255, 255,.88); margin-bottom: 32px; }
.cta-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-script { position: absolute; z-index: 1; right: 7%; bottom: 44px; font-family: var(--font-script); font-size: 2.4rem; line-height: 1; transform: rotate(-8deg); text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--white); padding: 48px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-bottom: 36px; }
.footer address { font-style: normal; color: var(--navy); line-height: 1.75; }
.anchor { position: absolute; top: calc(-1 * var(--header-h)); }
/* Über BRERO – nach Mockup: Bild links, rechts Zertifikate, Text und 4 Punkte */
.about { position: relative; display: grid; grid-template-columns: 35% 1fr; background: linear-gradient(180deg, #f7fbfd, #eff6fa); }
.about-img { position: relative; min-height: 540px; }
.about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.about-body { padding: 32px 48px 40px 64px; display: flex; flex-direction: column; }
.badges { margin-bottom: 28px; }
.badges img { width: 440px; max-width: 100%; height: auto; }
.about-row { flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.about-main .eyebrow { font-size: .9375rem; letter-spacing: .12em; margin-bottom: 12px; }
.about-main h2 { font-size: clamp(2rem, 2.8vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 22px; }
.about-main p { font-size: 1.125rem; line-height: 1.55; color: var(--navy); margin-bottom: 34px; max-width: 640px; }
.about-main .btn { height: 56px; padding: 0 30px; border-radius: 4px; font-size: 1.125rem; font-weight: 500; }
.about-facts { display: flex; flex-direction: column; gap: 34px; padding: 4px 0 4px 32px; border-left: 1.5px solid #c9dde8; }
.fact { display: flex; align-items: center; gap: 22px; }
.fact .icon { width: 46px; height: 46px; color: var(--blue); stroke-width: 1.6; flex: none; }
.fact strong { display: block; color: var(--navy); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.fact span { display: block; color: #4a6276; font-size: 1.0625rem; margin-top: 2px; }
@media (max-width: 1280px) {
  .about-row { grid-template-columns: 1fr; }
  .about-facts { display: grid; grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1.5px solid #c9dde8; padding: 32px 0 0; gap: 28px; }
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about-img { min-height: 0; height: 380px; }
  .about-body { padding: 36px var(--gutter) 48px; }
  .about-facts { grid-template-columns: 1fr; }
}
.footer-brand p { color: var(--navy); font-size: 1.0625rem; margin: 18px 0 24px; max-width: 320px; }
.social { display: flex; gap: 14px; }
.social a { width: 42px; height: 42px; border-radius: 8px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.social a:hover { background: var(--blue); }
.footer h4 { color: var(--navy); font-size: 1rem; margin: 0 0 18px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--navy); }
.footer-col a:hover, .footer-col a.more { color: var(--blue); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 22px; font-size: 1rem; color: var(--navy); }
.footer-bottom a:hover { color: var(--blue); }
.footer-copy { display: inline-flex; align-items: center; gap: 12px; }
.swiss-flag { width: 22px; height: 22px; flex: none; }
.footer-bottom nav { display: flex; gap: 36px; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  .nav > li > a, .nav > li > button { padding: 0 8px; font-size: .875rem; }
}
@media (max-width: 1180px) {
}
@media (max-width: 1200px) {
  :root { --header-h: 68px; }
  .menu-toggle { display: block; order: 3; }
  .header .btn { display: none; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); flex-direction: column; gap: 0;
    background: var(--white); padding: 12px var(--gutter) 32px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s;
  }
  body.nav-open .nav { transform: none; }
  .header { overflow-x: clip; }
  .nav > li { flex-direction: column; border-bottom: 1px solid var(--line); }
  .nav > li > a, .nav > li > button { padding: 16px 0; font-size: 1.0625rem; border-bottom: 0; justify-content: space-between; width: 100%; }
  .dropdown { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 12px; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav li.open .dropdown { display: block; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .strengths { grid-template-columns: repeat(2, 1fr); row-gap: 28px; padding-top: 40px; }
  .strength:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-inner { padding-top: 56px; }
  .hero-script { display: none; }
  .hero { display: flex; flex-direction: column; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento > :first-child { grid-row: auto; min-height: 420px; }
  .bento { height: auto; grid-template-rows: none; }
  .bento .news-card { min-height: 340px; }
  .bento > :first-child { min-height: 480px; }
  .news-card.big .news-content, .news-card.wide .news-content { padding-right: 90px; }
  .news-card.wide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(29, 64, 85,.75), rgba(29, 64, 85,.2)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .client-logo { flex-basis: 25%; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  .grid-4, .strengths, .bento-bottom { grid-template-columns: 1fr; }
  .strength { padding-left: 0; border-left: 0; }
  .logo img { height: 24px; }
  .hero-ctas .btn, .cta-ctas .btn { width: 100%; }
  .client-logo { flex-basis: 50%; min-width: 0; padding: 0 12px; }
  .carousel { gap: 8px; }
  .news-content { padding: 24px; }
  .cta-media { inset: auto 0 0 0; height: 200px; position: relative; }
  .cta-media::after { background: linear-gradient(180deg, var(--blue-deep) 0%, rgba(35, 65, 92,0) 60%); }
  .cta { display: flex; flex-direction: column; }
  .cta-media { order: 2; }
  .cta-inner { padding: 56px 0 32px; }
  .cta-script { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

/* Hero: unter 1200px Bild unter den Text stellen, damit nichts überlappt */
@media (max-width: 1200px) {
  .hero { display: flex; flex-direction: column; }
  .hero-media { position: relative; inset: auto; order: -1; height: auto; aspect-ratio: 2000 / 760; }
  .hero-media::after { background: linear-gradient(0deg, var(--bg-soft) 0%, rgba(245, 249, 251,0) 18%); }
  .hero-inner { padding-top: 32px; max-width: 640px; }
  .strengths { grid-template-columns: repeat(2, max-content); row-gap: 28px; padding: 40px 0 48px; }
  .strength:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .strengths { grid-template-columns: 1fr; }
  .strength { padding-left: 0; border-left: 0; }
  .strength strong { white-space: normal; }
  .hero-media { aspect-ratio: 4 / 3; }
  .hero-media img { object-position: 62% center; }
}
@media (max-width: 720px) {
  .topbar .container { justify-content: space-between; gap: 12px; }
  .topbar a[href^="mailto"] { display: none; }
}

/* WhatsApp im Footer */
.social { flex-wrap: wrap; align-items: center; }

.social a.social-wa:hover { background: #25d366; }
.social a.social-wa .icon { width: 22px; height: 22px; }

/* Footer Social: Markenfarbe beim Darüberfahren */
.social a[href*="instagram.com"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social a[href*="youtube.com"]:hover { background: #ff0000; }
.social a { transition: background .2s; }

/* Weitere FAQ aufklappen (ab mehr als 10 Fragen) */
details.faq-more { background: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
details.faq-more > summary { align-self: flex-start; list-style: none; cursor: pointer; display: inline-flex !important; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 11px 20px !important; border: 1.5px solid var(--blue); border-radius: 10px; background: #fff; color: var(--blue) !important; font-weight: 700; font-size: .9375rem; }
details.faq-more > summary::before, details.faq-more > summary::after { content: none !important; display: none !important; }
details.faq-more > summary::-webkit-details-marker { display: none; }
details.faq-more > summary:hover { background: var(--bg-soft); }
details.faq-more > summary .icon { width: 16px; height: 16px; transition: transform .2s; }
details.faq-more[open] > summary .icon { transform: rotate(180deg); }
details.faq-more .fm-c, details.faq-more[open] .fm-o { display: none; }
details.faq-more[open] .fm-c { display: inline; }
details.faq-more { display: flex; flex-direction: column; }
details.faq-more[open] > summary { order: 2; align-self: flex-start; }
details.faq-more details:not([open]) > summary::after { content: "+" !important; }
details.faq-more details[open] > summary::after { content: "–" !important; }

/* Links in FAQ-Antworten */
main details:not(.faq-more):not(.sw-more):not(.pj-more) p a, main details .vh-faq-a a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
main details p a:hover, main details .vh-faq-a a:hover { color: #005a9c; }

/* Lesbarkeit News-Karten (echte Fotos) */
.news-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(8, 30, 48,.88) 0%, rgba(8, 30, 48,.55) 38%, rgba(8, 30, 48,0) 70%); }
.news-card.wide::after { background: linear-gradient(90deg, rgba(8, 30, 48,.85) 0%, rgba(8, 30, 48,.55) 45%, rgba(8, 30, 48,0) 75%); }
.news-card h3, .news-card p, .news-card .news-kicker { text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.news-card.wide-light::after { background: linear-gradient(90deg, rgba(8, 30, 48,.92) 0%, rgba(8, 30, 48,.8) 40%, rgba(8, 30, 48,0) 62%); }
.news-card.wide-light .arrow-dot { color: #0070C0; } .news-card.wide-light .arrow-dot .icon { filter: none; }

/* Menü: Icons, Übersicht-Link, Mega-Menü Anwendungsbereiche */
.nav > li.has-dropdown.active > button { color: var(--blue); border-bottom-color: var(--blue); }
.dropdown img { width: 40px; height: 40px; flex: none; padding: 5px; border-radius: 10px; background: #eef6fc; object-fit: contain; mix-blend-mode: normal; }
.dropdown .dd-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; background: #eef6fc; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.dropdown .dd-ic .icon { width: 22px; height: 22px; color: var(--blue); }
.dropdown a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.dropdown .dd-all a { font-size: .8125rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; padding: 10px 0; }
.dropdown .dd-all a .icon { color: var(--blue); }
.dropdown .dd-all a:hover .icon { transform: translateX(3px); }
.dropdown .dd-all .icon { transition: transform .2s; }
#dd-il { width: 380px; }
@media (min-width: 1201px) {
  .nav { position: relative; }
  .nav > li:has(.dd-mega) { position: static; }
  .dd-mega { width: min(820px, calc(100vw - 48px)); left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; padding: 8px 22px 14px; }
  .dd-mega .dd-all { grid-column: 1 / -1; }
  .dd-mega li:last-child a { border-bottom: 1px solid var(--line); }
  .dd-mega a { font-size: .9375rem; }
}
@media (max-width: 1200px) {
  #dd-il { width: auto; }
  .nav li.open .dd-mega { display: block; }
}
@media (min-width: 1201px) and (max-width: 1440px) {
  .nav { gap: 0; }
  .nav > li > a, .nav > li > button { padding: 0 7px; gap: 4px; }
  .nav .chev { width: 14px; height: 14px; }
}
@media (min-width: 1201px) and (max-width: 1300px) {
  .nav > li > a, .nav > li > button { padding: 0 5px; font-size: .8125rem; }
  .header .btn { padding-left: 16px; padding-right: 16px; font-size: .875rem; }
}
/* Farbige Menü-Icons */
.dropdown img { width: 42px; height: 42px; padding: 3px; border-radius: 11px; background: linear-gradient(160deg, #f5f9fd, #e4eef8); box-shadow: inset 0 0 0 1px rgba(0, 112, 192, .08); }
.dropdown .dd-ic { --c: #0070C0; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--c) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); }
.dropdown .dd-ic .icon { width: 22px; height: 22px; color: var(--c); }
.dropdown a:hover img, .dropdown a:hover .dd-ic { transform: scale(1.06); }
.dropdown img, .dropdown .dd-ic { transition: transform .18s; }
/* Menü-Bilder: Produktfotos und Bereichsfotos */
.dropdown img { width: 46px; height: 46px; padding: 0; border-radius: 10px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(11, 45, 75, .08); mix-blend-mode: normal; }
.dropdown img.dd-photo { box-shadow: 0 1px 3px rgba(11, 45, 75, .18); }
.dropdown a:hover img { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(0, 112, 192, .35), 0 3px 8px rgba(11, 45, 75, .16); }
/* Übersichtszeile im Menü: dezent hellblau */
.dropdown .dd-all a { margin: 8px 0 6px; padding: 0 14px 0 16px; min-height: 50px; border: 0; border-radius: 10px; background: #eef6fc; color: var(--blue); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: inset 3px 0 0 var(--blue); transition: background .18s; }
.dropdown .dd-all a .icon { width: 18px; height: 18px; color: var(--blue); }
.dropdown .dd-all a:hover { background: #e1effa; color: var(--blue); }
.dropdown li.dd-all:last-child a { border-bottom: 0; }
.dd-mega .dd-all a { border-bottom: 0 !important; }
/* Breite Bildschirme (> 1464 px): Bilder ragen wie bei 1464 px Breite nur ca. 32 px über die Kopfzeile hinaus und enden dort (statt bis an den Bildschirmrand) */
@media (min-width: 1465px) {
  :root { --edge: calc((100vw - 1400px) / 2 + var(--gutter)); --cw: calc(100vw - 2 * var(--edge)); --eo: calc((100vw - 1464px) / 2); }
  .hero-media { left: var(--eo); right: var(--eo); height: 560px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
  .ab-hero .ab-hero-media { --P: .30; }
  .pr-hero .ab-hero-media { --P: .26; }
  .un-hero .ab-hero-media { --P: .38; }
  .vh-hero .vh-hero-media { --P: .44; }
  .od-hero .vh-hero-media, .sb-hero .vh-hero-media { --P: .46; }
  .tw-hero .tw-hero-media, .il-hero.ild-hero .il-hero-media { --P: .42; }
  .il-hero .il-hero-media { --P: .40; }
  .cta .cta-media { --P: .48; }
  .ab-hero .ab-hero-media, .vh-hero .vh-hero-media, .tw-hero .tw-hero-media, .il-hero .il-hero-media, .cta .cta-media {
    left: calc(var(--edge) + var(--cw) * var(--P)) !important; right: var(--eo) !important; width: auto !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 95%, transparent 100%); }
  .about { grid-template-columns: calc(var(--edge) + var(--cw) * .35) 1fr; }
  .about-img { margin-left: var(--eo);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%); mask-image: linear-gradient(90deg, transparent 0, #000 6%); }
  .about-body { padding-right: var(--edge); }
  .oe-banner { max-width: calc(100vw - 2 * var(--eo)); margin: 28px auto; border-radius: 16px; overflow: hidden; }
}
/* Header: Fliesstext kräftiger und besser lesbar über dem Bild */
.hero-inner p, .ab-hero-inner p:not(.pd-claim), .vh-hero-inner p:not(.vh-sub), .tw-hero-inner p, .il-hero-inner p {
  color: #16222e; text-shadow: 0 0 10px rgba(245, 249, 251, .9), 0 0 2px rgba(245, 249, 251, .9); }
/* Startseite: Titel nie trennen, Grösse passend zur Spalte */
.hero h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; font-size: clamp(2rem, 3.3vw, 3.25rem); max-width: 12.5em; }
@media (max-width: 860px) { .hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); } }
/* Einheitlicher Header-Titel auf allen Seiten (Grösse, Dicke, Zeilenabstand wie Produktseiten), nie getrennt */
.hero h1, .ab-hero h1, .vh-hero h1, .tw-hero h1, .il-hero h1, .lg-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.875rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important;
  hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }
@media (max-width: 860px) { .hero h1, .ab-hero h1, .vh-hero h1, .tw-hero h1, .il-hero h1, .lg-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important; } }
.ab-hero h1 { max-width: 640px !important; }
.ab-hero h1 .pr-nowrap { white-space: normal; }
/* Hauptnavigation: etwas grösser und kräftiger */
@media (min-width: 1201px) {
  .nav > li > a, .nav > li > button { font-weight: 600 !important; font-size: 1rem !important; }
}
@media (min-width: 1201px) and (max-width: 1440px) { .nav > li > a, .nav > li > button { font-size: .9375rem !important; } }
@media (min-width: 1201px) and (max-width: 1340px) { .nav > li > a, .nav > li > button { font-size: .875rem !important; padding: 0 5px !important; } }
@media (min-width: 1201px) and (max-width: 1300px) { .nav > li > a, .nav > li > button { font-size: .8125rem !important; padding: 0 4px !important; } .header .container { gap: 12px; } }

/* Flyout im Menü: Produktgruppen der jeweiligen Seite (Desktop) */
@media (min-width: 1201px) {
  #dd-produkte > li, #dd-il > li { position: relative; }
  .dd-sub { position: absolute; left: calc(100% + 14px); top: -6px; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-hover); padding: 8px; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 2; }
  .dd-sub::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; }
  .dropdown > li:hover > .dd-sub, .dropdown > li:focus-within > .dd-sub { opacity: 1; visibility: visible; transform: none; }
  .dropdown > li:hover > a { color: var(--blue); }
  .dd-sub ul { list-style: none; margin: 0; padding: 0; }
  .dd-sub ul:has(li:nth-child(9)) { columns: 2; column-gap: 6px; width: 460px; }
  .dropdown .dd-sub a { display: block; break-inside: avoid; padding: 8px 12px; border: 0; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--navy); white-space: nowrap; }
  .dropdown .dd-sub a:hover { background: #eef6fc; color: var(--blue); }
}
@media (max-width: 1200px) { .dd-sub { display: none; } }

/* Mitlaufende Abschnitts-Leiste auf langen Seiten */
.sec-nav { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 45; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(11, 45, 75, .08); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform .25s, opacity .2s; }
.sec-nav.on { transform: none; opacity: 1; pointer-events: auto; }
.sec-nav-in { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 10px; height: 54px; }
.sec-nav-top { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef6fc; color: var(--blue); }
.sec-nav-top .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.sec-nav-top:hover { background: var(--blue); color: #fff; }
.sec-nav-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 30px; }
.sec-nav-track::-webkit-scrollbar { display: none; }
.sec-nav-track a { flex: none; white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--navy); background: #f1f6fb; border: 1px solid transparent; transition: background .15s, color .15s; }
.sec-nav-track a:hover { color: var(--blue); border-color: rgba(0, 112, 192, .25); }
.sec-nav-track a.on { background: var(--blue); color: #fff; }
body.has-secnav main [id] { scroll-margin-top: calc(var(--header-h) + 70px) !important; }
@media (max-width: 720px) { .sec-nav-in { height: 50px; gap: 8px; } .sec-nav-track a { padding: 6px 12px; font-size: .8125rem; } }
.sec-nav-track a .lg-num { margin-right: 5px; opacity: .6; font-weight: 700; }

/* Kompakte Farbkarte (Farbauswahl) */
main .nt-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important; gap: 10px !important; }
main .nt-colors li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 14px 8px 8px; border-radius: 999px; transition: border-color .15s, box-shadow .15s, transform .15s; }
main .nt-colors li:hover { border-color: rgba(0, 112, 192, .35); box-shadow: 0 6px 16px rgba(16, 65, 107, .08); transform: translateY(-1px); }
main .nt-colors img { flex: none; width: 52px !important; max-width: 52px !important; height: 52px; margin: 0 !important; border-radius: 50%; background: #fff; }
main .nt-colors strong { font-size: .9375rem !important; line-height: 1.2; }
main .nt-colors span { font-size: .75rem; line-height: 1.3; }
main .nt-colors li > div, main .nt-colors li > span { min-width: 0; }

/* Kompakte Modell-Kacheln (Übersicht → Sprung zum Abschnitt) */
main .nt-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 12px !important; }
main .nt-types .nt-type { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 14px 14px; border-radius: 14px; max-width: none !important; grid-column: auto !important; text-align: left; }
main .nt-types .nt-type img { width: 100% !important; height: 104px !important; object-fit: contain; margin-bottom: 8px; border-radius: 8px; }
main .nt-types .nt-type em { align-self: flex-start; font-size: .625rem; padding: 3px 8px; margin-bottom: 6px; }
main .nt-types .nt-type strong { font-size: 1rem !important; line-height: 1.25; margin-bottom: 6px; }
main .nt-types .nt-type strong small { font-size: .7em; }
main .nt-types .nt-type > span { display: flex; flex-direction: column; flex: 1; }
main .nt-types .nt-type > span > span { display: none; }
main .nt-types .nt-type b { margin-top: auto; font-size: .8125rem; }
main .nt-types .nt-type:hover { transform: translateY(-3px); }
main .nt-types .nt-type:hover b .icon { transform: translateY(2px) rotate(90deg); }
main .nt-types .nt-type b .icon { transition: transform .2s; }
@media (max-width: 560px) {
  main .nt-types { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  main .nt-types .nt-type img { height: 80px !important; }
  main .nt-colors { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main .nt-colors li { padding: 6px 10px 6px 6px; gap: 8px; }
  main .nt-colors img { width: 40px !important; max-width: 40px !important; height: 40px; }
}
main .nt-colors li { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-content: center; }
main .nt-colors li img { grid-row: 1 / 3; align-self: center; }
main .nt-colors li strong { align-self: end; }
main .nt-colors li span { align-self: start; }
@media (max-width: 560px) { main .nt-colors li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; } }

/* Kontakt-Band hell wie die übrigen Abschnitte */
.cta { background: var(--bg-soft) !important; color: var(--navy); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-media::after { background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(245, 249, 251, .55) 30%, rgba(245, 249, 251, 0) 60%) !important; }
.cta .eyebrow { color: var(--blue) !important; }
.cta h2 { color: var(--navy) !important; }
.cta p { color: #16222e !important; }
.cta .btn-white { background: var(--blue); color: #fff; }
.cta .btn-white:hover { background: #005a9c; color: #fff; }
.cta .btn-outline-white, .cta .btn-ghost { color: var(--blue); border-color: var(--blue); }
@media (max-width: 860px) { .cta-media::after { background: linear-gradient(0deg, var(--bg-soft) 0%, rgba(245, 249, 251, 0) 50%) !important; } }

/* Beratungs-Box (Anwendungsbereiche) im Design der Sonderfarben-Box: blauer Verlauf, weisse Schrift */
.vh-help { position: relative; overflow: hidden; border-radius: 12px !important; padding: 30px 28px !important; color: #fff; background: linear-gradient(150deg, #008af3 0%, var(--blue) 55%, #084f92 100%) !important; align-self: start; }
.vh-help::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(#ff5a5a, #ffd23f, #3ccf6e, #0fd9ff, #b25cff, #ff5a5a); opacity: .22; pointer-events: none; }
.vh-help > * { position: relative; z-index: 1; }
.vh-help .icon { color: #fff !important; width: 30px; height: 30px; opacity: .9; }
.vh-help h3 { color: #fff !important; font-size: 1.375rem !important; line-height: 1.25; margin-bottom: 10px !important; }
.vh-help p { color: rgba(255, 255, 255, .9) !important; font-size: .9375rem !important; line-height: 1.55 !important; margin-bottom: 20px !important; }
.vh-help .btn, .vh-help .btn-primary { background: #fff !important; color: var(--blue) !important; border: 0; height: 48px !important; padding: 0 24px !important; border-radius: 6px !important; display: inline-flex; align-items: center; gap: 8px; }
.vh-help .btn:hover { background: #eef6fc !important; }
.vh-help .btn::after { content: "→"; font-weight: 700; }
.vh-help h2 { color: #fff !important; font-size: 1.5rem !important; line-height: 1.25; margin-bottom: 10px !important; }
.cta-media img { object-position: 60% center; }
.cta-media::after { background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(245, 249, 251, .5) 14%, rgba(245, 249, 251, 0) 30%) !important; }
.cta-media img { object-position: 45% center; }
@media (min-width: 861px) { .cta-media { left: 50% !important; } }
@media (min-width: 861px) { .cta-inner { max-width: 560px !important; } } @media (min-width: 1465px) { .cta .cta-media { --P: .5; } }
/* Kontakt-Band: Text so schmal wie der Titel, Bild breiter */
@media (min-width: 861px) { .cta-inner { max-width: 500px !important; } .cta-media { left: 40% !important; } }
@media (min-width: 1465px) { .cta .cta-media { --P: .40; } }
@media (min-width: 861px) and (max-width: 1200px) { .cta-inner { max-width: 380px !important; } }

/* ===== Einheitliche Abschnitts-Titel auf allen Seiten ===== */
main :is(.section-head, .wp-head, .vh-head, .vh-faq, .nt-faq, .nt-more-left, .ws-sec-head, .ws-mach-intro, .fh-mach-intro, .od-feat-text, .od-split-body, .tt-show-text, .tt-sys-text, .ild-text, .ild-el-head, .pd-gallery, .bw-topic-text, .in-req-intro, .ws-partner-text, .ws-intro-text, .sw-subhead, .il-process, .ab-list .container, .pd-comp-sec, .ko-card-title, .il-faq, .tw-faq, .about-main) > h2,
main .section-head > div > h2 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important;
  color: var(--navy) !important; margin-top: 0 !important; margin-bottom: 12px !important; text-wrap: balance;
}
main :is(.section-head, .wp-head, .vh-head, .ws-sec-head, .ild-text, .ild-el-head, .od-feat-text, .od-split-body, .tt-show-text, .tt-sys-text, .bw-topic-text, .in-req-intro, .ws-partner-text, .ws-intro-text, .ws-mach-intro, .fh-mach-intro, .pd-gallery, .about-main) :is(.eyebrow, .wp-eyebrow, .ild-eyebrow):not(.light) {
  display: inline-block; font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--blue) !important; margin-bottom: 10px !important;
}
main :is(.section-head, .wp-head, .vh-head, .ws-sec-head) > p, main .section-head > div > p { font-size: 1.0625rem; line-height: 1.6; color: var(--text); max-width: 760px; }
main :is(.vh-head:not(.left), .ws-sec-head) > p { margin-left: auto; margin-right: auto; }
main :is(.section-head, .wp-head, .vh-head, .ws-sec-head) { margin-bottom: 32px; }
/* klare Abstände zwischen den Abschnitten */
main > section:not([class*="hero"]):not(.cta):not(.clients):not(.oe-banner) { scroll-margin-top: 120px; }
main > section + section:not([class*="hero"]):not(.cta) { border-top: 1px solid rgba(11, 45, 75, .06); }
main :is(.ws-sec-head, .ws-mach-intro, .fh-mach-intro, .pd-comp-sec, .ild-el-head) > div > h2 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--navy) !important; margin-top: 0 !important; margin-bottom: 12px !important; }
main :is(.ws-sec-head, .ws-mach-intro, .fh-mach-intro, .pd-comp-sec, .ild-el-head) > div :is(.eyebrow, .ild-eyebrow) { font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--blue) !important; margin-bottom: 10px !important; }

/* Einheitliche blaue CTA-Boxen (wie Sonderfarben-Box): Verlauf + farbiger Kreis-Akzent + weisse Schrift */
.np-box-blue, .un-vm-blue, .sc-cta, .pr-cta, .nt-cta, .ild-cta, .vh-help {
  position: relative; overflow: hidden; border-radius: 12px !important; color: #fff !important;
  background: linear-gradient(150deg, #008af3 0%, var(--blue) 55%, #084f92 100%) !important; }
.np-box-blue::after, .un-vm-blue::after, .sc-cta::after, .pr-cta::after, .nt-cta::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
  background: conic-gradient(#ff5a5a, #ffd23f, #3ccf6e, #0fd9ff, #b25cff, #ff5a5a); opacity: .22; pointer-events: none; }
.np-box-blue > *, .un-vm-blue > *, .sc-cta > *, .pr-cta > *, .nt-cta > * { position: relative; z-index: 1; }
.np-box-blue :is(h2, h3, h4, strong), .un-vm-blue :is(h2, h3, h4, strong), .sc-cta :is(h2, h3, h4), .pr-cta :is(h2, h3, h4), .nt-cta :is(h2, h3, h4) { color: #fff !important; }
.np-box-blue p, .un-vm-blue p, .un-vm-blue li, .sc-cta p, .pr-cta p, .nt-cta p { color: rgba(255, 255, 255, .9) !important; }
.np-box-blue h3 { font-size: 1.375rem !important; }
.np-box-blue .sw-ic, .un-vm-blue .sw-ic { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.pr-cta::before, .sc-cta::before { display: none !important; }
.nt-cta::after { right: -70px !important; top: -70px !important; width: 240px !important; height: 240px !important; background: conic-gradient(#ff5a5a, #ffd23f, #3ccf6e, #0fd9ff, #b25cff, #ff5a5a) !important; opacity: .22 !important; border: 0 !important; }
/* «Enthalten in»-Hinweis dezent im BRERO-Hellblau statt Orange */
main .oe-sets { background: #f1f6fb !important; color: var(--text) !important; border: 1px solid #dfeaf4; }
main .oe-sets-h { color: var(--blue) !important; font-weight: 700 !important; }
main .oe-sets b { color: var(--navy); }
main .oe-sets, main .oe-sets b { font-weight: 400 !important; }
main .oe-sets { color: #6b8091 !important; }
main .oe-sets b { color: #4f6577 !important; }
main .oe-sets-h { font-weight: 600 !important; color: #6b8091 !important; }
main .oe-sets { font-size: .6875rem !important; line-height: 1.4 !important; padding: 6px 8px !important; }
main .oe-sets-h { font-size: .5625rem !important; }
/* «Enthalten in» als beiläufige Info: keine Box, nur feine Linie */
main .oe-sets { background: transparent !important; border: 0 !important; border-top: 1px dashed #d6e2ec !important; border-radius: 0 !important; padding: 6px 0 0 !important; margin-top: 8px !important; color: #8a9bab !important; }
main .oe-sets-h { color: #8a9bab !important; letter-spacing: .06em !important; }
main .oe-sets b { color: #6b8091 !important; }
/* Direktlink ins Anfrage-/Bestellformular (Produktgruppe) */
.oe-grp-af { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #d6e8f6; color: #0070C0; font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.oe-grp-af:hover { background: #eef6fc; border-color: #b9d8f0; }
.oe-grp-af .icon { width: 13px; height: 13px; }
.wp-head-af { margin: 14px 0 0 !important; }
.wp-head-af .oe-grp-af { margin-left: 0; }
/* «Offerte / Bestellung» rechts auf Höhe des Abschnittstitels */
@media (min-width: 1100px) {
  .container:has(> .wp-head .wp-head-af) { position: relative; }
  .container > .wp-head .wp-head-af { position: absolute; right: 0; top: 36px; margin: 0 !important; }
}
/* Anwendungsbereiche: Link ins Sortiment (Systemkarten) und zweiter Link ins Formular (Empfohlene Produkte) */
.app-sort-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #0070C0; font-size: .875rem; font-weight: 700; text-decoration: none; }
.app-sort-link .icon { width: 15px; height: 15px; transition: transform .2s; }
.app-sort-link:hover .icon { transform: translateX(3px); }
.vh-prod { position: relative; }
.vh-links { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vh-links .vh-link { font-size: .875rem; text-decoration: none; }
.vh-link-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vh-link-af { position: relative; z-index: 1; padding: 5px 11px; border: 1px solid #d6e8f6; border-radius: 999px; background: #fff; font-size: .8125rem !important; font-weight: 700; }
.vh-link-af:hover { background: #eef6fc; border-color: #b9d8f0; }
.vh-link-af .icon { width: 13px !important; height: 13px !important; }
/* «Offerte / Bestellung» auf Höhe der ersten Unterüberschrift bzw. rechts über den Produkten */
.sec-af-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.sec-af-row > h3 { flex: 1 1 auto; }
.sec-af-row > .oe-grp-af { margin-left: auto; flex: none; }
.sec-af-row:has(> h3) > .oe-grp-af { margin-bottom: 14px; }
.sec-af-solo { justify-content: flex-end; margin: 0 0 14px; }
.app-sort-link { align-self: flex-start; }
/* Zähler am Header-Knopf */
.hd-cart-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: #fff; color: #0070C0; font-size: .75rem; font-weight: 800; line-height: 1; }
.btn-white .hd-cart-n, .btn:not(.btn-primary) .hd-cart-n { background: #0070C0; color: #fff; }
/* Plus-Knopf in Artikelkarten → Formular */
.wp-art, .wz-machine, .ks-set { position: relative; }
.art-add { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: #0070C0; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,112,192,.28); transition: transform .15s, background .15s; }
.art-add svg { width: 16px; height: 16px; }
.art-add:hover { background: #005a9c; transform: scale(1.08); }
@media (max-width: 560px) { .art-add { width: 28px; height: 28px; top: 6px; right: 6px; } }
/* Plus-Knopf kleiner */
.art-add { width: 24px; height: 24px; top: 6px; right: 6px; box-shadow: 0 2px 6px rgba(0,112,192,.25); }
.art-add svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .art-add { width: 22px; height: 22px; top: 5px; right: 5px; } }
/* Formular-Knopf unter dem Einleitungstext des Abschnitts – gut sichtbar, aber ruhig */
.container > .wp-head .wp-head-af, .wp-head .wp-head-af { position: static !important; margin: 18px 0 0 !important; }
.oe-grp-af.sec-af { background: #0070C0; border-color: #0070C0; color: #fff; padding: 9px 16px; font-size: .875rem; box-shadow: 0 4px 12px rgba(0,112,192,.18); }
.oe-grp-af.sec-af:hover { background: #005a9c; border-color: #005a9c; }
.oe-grp-af.sec-af .icon { width: 14px; height: 14px; }
.wp-head .wp-head-af { margin-bottom: 18px !important; } .wp-head .wp-head-af:last-child { margin-bottom: 0 !important; }
.ks-erg { position: relative; }
/* Anwendungsbereiche: «Zu den …»-Links als blau umrandete Buttons */
.app-sort-link { margin-top: 20px; padding: 10px 18px; border: 1.5px solid #0070C0; border-radius: 999px; background: #fff; font-size: .9375rem; line-height: 1.2; transition: background .2s, color .2s, box-shadow .2s; }
.app-sort-link .icon { width: 16px; height: 16px; }
.app-sort-link:hover, .app-sort-link:focus-visible { background: #0070C0; color: #fff; box-shadow: 0 4px 12px rgba(0, 112, 192, .22); }
.app-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.app-btns .app-sort-link { margin-top: 0; }
.app-sort-link.app-af-link { background: #0070C0; color: #fff; }
.app-sort-link.app-af-link:hover, .app-sort-link.app-af-link:focus-visible { background: #005a9c; border-color: #005a9c; }
.vh-machine-body > .app-sort-link { margin-top: auto; }
.wz-machine { scroll-margin-top: 150px; }
/* Empfohlene Produkte: ein Link – direkt ins Formular bzw. zur Anfrage */
.vh-links .vh-link.vh-link-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1.5px solid #0070C0; border-radius: 999px; background: #fff; color: #0070C0; font-size: .9375rem; font-weight: 700; line-height: 1.2; transition: background .2s, color .2s; }
.vh-links .vh-link.vh-link-go .icon { width: 15px; height: 15px; }
.vh-prod:hover .vh-link-go, .vh-link-go:focus-visible { background: #0070C0; color: #fff; }
.vh-prod .vh-links { margin-top: auto; padding-top: 14px; }
a:hover .app-sort-link, .ws-more-card:hover .app-sort-link { background: #0070C0; color: #fff; }
.vh-help .btn { white-space: nowrap; }
.app-sort-link { white-space: nowrap; }
/* FAQ einheitlich auf allen Seiten */
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); color: var(--navy); letter-spacing: -0.02em; }
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) details { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: #fff; }
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) summary { padding: 13px 16px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--navy); gap: 12px; }
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) summary .icon { width: 20px; height: 20px; flex: none; }
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) summary::after { font-size: 1.375rem; line-height: 1; }
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) details > p,
main :is(.vh-faq, .nt-faq, .tw-faq, .il-faq) details > ul,
main :is(.vh-faq-a, .tw-faq-a) { margin: 0; padding: 0 18px 16px 48px; font-size: .875rem; line-height: 1.55; color: var(--text); }
main :is(.vh-faq-a, .tw-faq-a) > p { padding: 0; font-size: inherit; }
main .nt-faq summary::before { flex: 0 0 20px; height: 20px; }
/* Passend dazu – Karten unter der Beratungsbox neben den FAQ */
.fs-col { display: flex; flex-direction: column; gap: 0; min-width: 0; align-self: start; }
.fs-col > .vp-help, .fs-col > .vh-help, .fs-col > .ild-cta, .fs-col > .il-dev, .fs-col > .vh-box { align-self: stretch; height: auto; }
.fs-more { margin-top: 24px; }
.fs-h { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.01em; }
.fs-list { display: grid; gap: 10px; }
.fs-card { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.fs-card:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(0, 61, 120, .08); transform: translateY(-1px); }
.fs-card img { width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain; background: #f4f7fa; border-radius: 8px; padding: 6px; }
.fs-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-body strong { font-size: .9375rem; color: var(--navy); line-height: 1.3; }
.fs-body > span { font-size: .8125rem; color: var(--muted, #5b6b7b); line-height: 1.45; }
.fs-body em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.fs-body em .icon { width: 14px; height: 14px; }
.fs-card.fs-photo img { object-fit: cover; padding: 0; }
/* Abschnitts-Navigation: aktiver / angeklickter Abschnitt im hochwertigen Blau-Verlauf */
.sec-nav-track a.on { background: linear-gradient(90deg, #0070C0 0%, #1f8ad6 55%, #7fbbe6 100%); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(0, 112, 192, .25); }
.sec-nav-track a.on:hover { color: #fff; }
.sec-nav-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.sec-nav-track { padding-top: 4px; padding-bottom: 6px; }
/* Menü «Gesamtes …»: beim Überfahren Blau-Verlauf wie aktiver Abschnitt */
.dropdown .dd-all a { transition: background .2s, color .2s, box-shadow .2s; }
.dropdown .dd-all a:hover, .dropdown .dd-all a:focus-visible { background: linear-gradient(90deg, #0070C0 0%, #1f8ad6 55%, #7fbbe6 100%); color: #fff; box-shadow: 0 3px 10px rgba(0, 112, 192, .25); }
.dropdown .dd-all a:hover .icon, .dropdown .dd-all a:focus-visible .icon { color: #fff; }
/* Blaue Buttons: beim Überfahren hochwertiger Blau-Verlauf (wie aktiver Abschnitt) */
:is(.btn-primary, .af-submit, .af-sg-b .btn.af-sg-ok, .il-af .oe-grp-af, .oe-grp-af.sec-af, .app-sort-link.app-af-link, .cta .btn-white) { transition: background .2s, box-shadow .2s, color .2s; }
:is(.btn-primary, .af-submit, .af-sg-b .btn.af-sg-ok, .il-af .oe-grp-af, .oe-grp-af.sec-af, .app-sort-link.app-af-link, .cta .btn-white):is(:hover, :focus-visible) { background: linear-gradient(90deg, #0070C0 0%, #1f8ad6 55%, #7fbbe6 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(0, 112, 192, .3); }
/* Weisse Buttons in blauen Boxen bleiben weiss */
.vh-help .btn:is(:hover, :focus-visible), .vh-help .btn-primary:is(:hover, :focus-visible) { background: #eef6fc !important; color: var(--blue) !important; box-shadow: none; }
/* Verlauf auch unter dem (transparenten) Rahmen – kein blauer Strich am Rand */
:is(.btn-primary, .af-submit, .af-sg-b .btn.af-sg-ok, .il-af .oe-grp-af, .oe-grp-af.sec-af, .app-sort-link.app-af-link, .cta .btn-white):is(:hover, :focus-visible), .sec-nav-track a.on, .dropdown .dd-all a:is(:hover, :focus-visible) { background-origin: border-box !important; background-repeat: no-repeat !important; }
/* Alle übrigen Buttons und Pills auf hellem Grund: beim Überfahren derselbe Blau-Verlauf */
:is(.btn-outline, .app-sort-link, .ks-btn, .ks-reorder-btn, .pr-card-btn, .oe-grp-af, .af-dup, .af-more, .art-add, .af-add, .af-comp-add, .sw-dl-btn):is(:hover, :focus-visible),
.app:hover .app-more.app-sort-link {
  background: linear-gradient(90deg, #0070C0 0%, #1f8ad6 55%, #7fbbe6 100%) !important; background-origin: border-box !important; background-repeat: no-repeat !important;
  color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(0, 112, 192, .28);
}
:is(.btn-outline, .app-sort-link, .ks-btn, .ks-reorder-btn, .pr-card-btn, .oe-grp-af, .af-dup, .af-more, .art-add, .af-add, .af-comp-add, .sw-dl-btn):is(:hover, :focus-visible) .icon,
.app:hover .app-more.app-sort-link .icon { color: #fff !important; }
:is(.art-add, .af-add, .af-comp-add, .sw-dl-btn):is(:hover, :focus-visible) { background: linear-gradient(135deg, #0070C0 0%, #1f8ad6 60%, #7fbbe6 100%) !important; }
/* Mobile: «Anfrage & Bestellung» im Header sichtbar */
@media (max-width: 1200px) {
  .header .header-actions .btn { display: inline-flex; height: 40px; padding: 0 14px; font-size: .8125rem; gap: 6px; }
  .header-actions { margin-left: auto; margin-right: 8px; }
}
@media (max-width: 420px) {
  .header .header-actions .btn { padding: 0 11px; font-size: .75rem; }
  .header .header-actions .btn .icon { display: none; }
}

/* ===== Mobile: kein seitlicher Überlauf (29.10.2026) =====
   Lange Formular-Buttons dürfen umbrechen; einspaltige Raster schrumpfen auf Bildschirmbreite
   statt sich nach dem breitesten Inhalt zu richten. Desktop unverändert. */
@media (max-width: 560px) {
  body .oe-grp-af, body .app-sort-link { white-space: normal; max-width: 100%; text-align: left; line-height: 1.35; }
  body .oe-grp-af .icon, body .app-sort-link .icon { flex-shrink: 0; }
  body .ild-two, body .ild-sub-head, body .wz-duo-head { grid-template-columns: minmax(0, 1fr); }
  body .ild-two > *, body .ild-sub-head > *, body .wz-duo-head > * { min-width: 0; }
}
/* Anfrageformular, Katalog: Filter-Knöpfe und Materialhinweis dürfen umbrechen (z. B. FR «Dans les assortiments
   complets et complémentaires», «Nos boutons-pression sont en laiton – inoxydables»). */
@media (max-width: 640px) {
  body .af-props .af-prop { flex: 0 1 auto; max-width: 100%; }
  body .af-props .af-prop.af-prop-set, body .af-props .af-prop.af-prop-lager, body .af-props .af-prop[data-p="ab1"] { height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  body .af-props .af-prop > span { min-width: 0; text-align: left; }
  body .af-mess { white-space: normal; max-width: 100%; }
}
/* Header-Button «Anfrage & Bestellung» (Kundenvorgabe 29.10.2026): unter 400 px darf der Text zweizeilig laufen,
   damit der Menü-Knopf rechts im Bild bleibt (sonst bei 320–360 px je nach Sprache abgeschnitten). */
@media (max-width: 400px) {
  body .header .header-actions { min-width: 0; flex-shrink: 1; }
  body .header .header-actions .btn { white-space: normal; max-width: calc(100vw - 200px); height: auto; min-height: 40px; padding: 4px 11px; line-height: 1.15; text-align: center; }
}
/* Sehr kleine Bildschirme (bis 400 px, z. B. 320 px): Raster auf Bildschirmbreite begrenzen,
   überlange Wörter in Karten notfalls umbrechen. Anordnung unverändert. */
@media (max-width: 400px) {
  body .ws-systems, body .bw-arts, body .tt-types, body .nt-more-grid, body .nt-links, body .od-split, body .ild-uf-row, body .wz-machine { grid-template-columns: minmax(0, 1fr); }
  body .nt-link { grid-template-columns: 96px minmax(0, 1fr); }
  body .ild-uf-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  body :is(.ws-systems, .bw-arts, .tt-types, .nt-more-grid, .nt-links, .nt-link, .od-split, .od-split-img, .ild-uf-row, .ild-uf-list, .footer-grid, .wz-machine) > * { min-width: 0; }
  body :is(.ws-sys, .bw-art, .tt-type, .nt-link) { overflow-wrap: break-word; hyphens: auto; }
}
/* Unter 340 px passen lange Wörter («Anwendungsbereiche», «Schwarzkupfer», «Vollautomatische») nicht in halbe Spalten:
   Footer und Kategorie-Kacheln einspaltig, Farbkarte zweispaltig, statt Wörter mitten im Wort zu trennen. */
@media (max-width: 340px) {
  body .footer-grid { grid-template-columns: minmax(0, 1fr); }
  body .ild-uf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .ild-uf-list.ild-oe-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ild-druckknoepfe.css setzt 3 Spalten mit !important */
  body main .nt-types { grid-template-columns: minmax(0, 1fr) !important; } /* Kacheln: «Messingsockel», «Vollautomatische» passen nicht in eine halbe Kachel */
}
/* Mobil-Menü (30.10.2026): Auf dem iPhone erschien das Menü nur kurz und verschwand wieder. Ursache vermutlich
   .header { overflow-x: clip }: iOS Safari schneidet damit auch das Menü ab, das unter dem Header hängt.
   Das Menü blendet jetzt ein, statt von rechts hereinzufahren; so ragt nichts seitlich heraus und der Header
   braucht kein Abschneiden mehr. */
@media (max-width: 1200px) {
  body .header { overflow-x: visible; }
  body .nav { transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
  body.nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: opacity .2s, transform .2s, visibility 0s; }
}

/* Farbübersicht auf Sortimentsseiten (Modal wie im Formular) */
.af-cv { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 42, 74, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.af-cv-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(15,42,74,.3); width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px 18px; }
.af-cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.af-cv-head strong { font-size: 1.125rem; color: var(--navy); }
.af-cv-x { border: 0; background: #f1f6fb; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.af-cv-x .icon { width: 18px; height: 18px; }
.af-cv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.af-cv-grid figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.af-cv-grid img { width: 100%; aspect-ratio: 9 / 10; object-fit: contain; background: #fff; padding: 6px; }
.af-cv-grid figcaption { padding: 8px 10px 10px; font-size: .75rem; line-height: 1.35; color: var(--text); border-top: 1px solid var(--line); background: #f8fbfd; }
.af-cv-grid figcaption b { display: block; color: var(--navy); font-size: .8125rem; }
.af-cv-note { margin: 12px 0 0; font-size: .75rem; color: var(--muted); }
@media (max-width: 760px) { .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-cv-box[data-k="oe"] .af-cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-cv-box[data-k="oe"] .af-cv-grid img { aspect-ratio: 3 / 2; padding: 4px; }
@media (max-width: 760px) { .af-cv-box[data-k="oe"] .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-cv-box[data-k="nt"] .af-cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-cv-box[data-k="nt"] .af-cv-grid img { aspect-ratio: 3 / 2; padding: 4px; }
@media (max-width: 760px) { .af-cv-box[data-k="nt"] .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-cv-sub { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.af-cv-std { display: inline-block; margin-top: 5px; font-style: normal; font-size: .6875rem; font-weight: 700; color: #1a7f45; background: #e5f6ec; border: 1px solid #b9e3c8; border-radius: 99px; padding: 2px 8px; }
.af-cv-grid figcaption { flex: 1; }
.af-cv-std { color: var(--muted, #5b6b7b); background: #f1f4f7; border-color: #dde3ea; font-weight: 600; }
.af-cv-std { display: block; background: none; border: 0; padding: 0; border-radius: 0; margin-top: 4px; font-size: .75rem; font-weight: 500; color: var(--muted, #5b6b7b); }
.af-cv-std { color: var(--blue, #0070C0); font-weight: 600; }
.af-cv-x svg { display: block; }
.cvp-wrap { margin: 14px 0 0; }
.cvp-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1.5px solid #0070C0; border-radius: 999px; background: #fff; color: #0070C0; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.cvp-btn .icon { width: 17px; height: 17px; }
.cvp-btn:hover, .cvp-btn:focus-visible { background: #0070C0; color: #fff; }
.dk-perl-list li { position: relative; }
/* Unternehmen, Karte (30.10.2026): Card «Route planen» entfernt (Google Maps hat einen eigenen Routenplaner);
   Hinweis, Icon und «Karte laden» stehen jetzt mittig statt unter der Card. */
body .un-map-consent { padding: 24px; }