/* ==========================================================================
   WF-Medical GmbH — Webseite
   Design-System · Version 1.0
   Markenfarben direkt aus dem Logo: #220B53 (Indigo) / #14C3EC (Cyan)
   Schriften: nur Systemschriften — keine externen Fonts (DSGVO)
   ========================================================================== */

/* ---------- 1 · Design-Tokens ---------- */
:root {
  /* Marke */
  --ink:        #220B53;
  --ink-deep:   #16073A;
  --ink-soft:   #3A2470;
  --cyan:       #14C3EC;
  --cyan-deep:  #0C9BBE;
  --cyan-pale:  #E6F8FD;

  /* Neutral */
  --paper:      #FFFFFF;
  --mist:       #F4F7FB;
  --mist-deep:  #EAF0F7;
  --line:       #E1E8F1;
  --line-soft:  #EDF2F8;
  --text:       #1C2439;
  --muted:      #5B6780;

  /* Signal */
  --green:      #128A5B;
  --green-pale: #E6F5EF;
  --amber:      #B4740B;
  --amber-pale: #FDF3E2;
  --red:        #B42318;   /* Fehlermeldungen an Formularfeldern; 6,4:1 auf Weiss */
  --red-pale:   #FEF3F2;

  /* Layout */
  --wrap:       1180px;
  --wrap-narrow: 820px;
  --r-sm:       6px;
  --r-md:       12px;
  --r-lg:       20px;
  --r-xl:       28px;

  /* Schatten */
  --sh-sm: 0 1px 2px rgba(28, 36, 57, .06), 0 2px 8px rgba(28, 36, 57, .04);
  --sh-md: 0 2px 4px rgba(28, 36, 57, .05), 0 12px 28px rgba(28, 36, 57, .07);
  --sh-lg: 0 4px 8px rgba(28, 36, 57, .06), 0 28px 60px rgba(28, 36, 57, .12);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2 · Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.021em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.5rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); }
h4 { font-size: 1.02rem; }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: rgba(20, 195, 236, .55); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cyan); }

strong, b { font-weight: 650; color: var(--ink); }
small { font-size: .84rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--cyan); color: #06263A; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: 12px; top: -70px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 3 · Layout-Bausteine ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

section { padding-block: clamp(3.2rem, 2rem + 4.5vw, 6rem); }
section.tight { padding-block: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.bg-mist  { background: var(--mist); }
.bg-ink   { background: var(--ink-deep); color: #D7DEF0; }
.bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }

/* Bausteine mit hellem Eigenhintergrund erben sonst die helle Schrift des
   dunklen Abschnitts und werden unlesbar. Sie behalten deshalb dunkle Schrift. */
.bg-ink table.data,
.bg-ink .calc,
.bg-ink .acc,
.bg-ink .audience,
.bg-ink .form-panel,
.bg-ink .spectrum,
.bg-ink .quote,
.bg-ink .card-flat { color: var(--text); }
.bg-ink table.data thead th { color: #fff; }

.grid { display: grid; gap: 1.5rem; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split.wide-left  { grid-template-columns: 1.15fr .85fr; }
.split.wide-right { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 880px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; }
  .split .media-col { order: -1; }
}

.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }

/* ---------- 4 · Typografische Muster ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan-deep);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--cyan); border-radius: 2px;
}
.bg-ink .eyebrow { color: var(--cyan); }
/* Pfadangabe in der Augenbraue, z. B. "Unternehmen · Karriere" */
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.eyebrow a:hover { color: #fff; }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.2rem); }
/* Zentrierter Abschnittskopf — wirkt auch, wenn .center am Kopf selbst steht */
.section-head.center, .center > .section-head { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow, .center > .section-head .eyebrow { justify-content: center; }
.section-head p { font-size: 1.1rem; color: var(--muted); margin-bottom: 0; }
.bg-ink .section-head p { color: #AEB9D4; }

.lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.28rem); line-height: 1.6; color: var(--muted); }
.bg-ink .lead { color: #B9C4DD; }

.kicker { font-size: .95rem; color: var(--muted); }
.note {
  font-size: .88rem; color: var(--muted); line-height: 1.55;
  border-left: 3px solid var(--line); padding-left: 1rem;
}

/* ---------- 5 · Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font: inherit; font-size: .97rem; font-weight: 640;
  border: 1.5px solid transparent; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--cyan); color: #062A3B; box-shadow: 0 6px 18px rgba(20, 195, 236, .32); }
.btn-primary:hover { background: #2FD0F5; box-shadow: 0 10px 26px rgba(20, 195, 236, .42); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-soft); }

.btn-ghost { border-color: rgba(34, 11, 83, .22); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(34, 11, 83, .04); }

/* Ghost-Button auf dunklem Grund — gilt fuer alle dunklen Flaechen */
.bg-ink .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost,
.cta-band .btn-ghost,
.door--dark .btn-ghost {
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.bg-ink .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.door--dark .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

.btn-sm { padding: .6rem 1.1rem; font-size: .89rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.btn-row.center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 620; text-decoration: none; color: var(--cyan-deep);
}
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 6 · Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px; padding-block: .6rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 156px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav a {
  padding: .5rem .8rem; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 560; color: var(--ink);
  text-decoration: none; transition: background .15s var(--ease);
}
.nav a:hover { background: var(--mist); }
.nav a[aria-current="page"] { color: var(--cyan-deep); font-weight: 680; }
.header-cta { display: flex; gap: .55rem; margin-left: .8rem; }

/* --- Produkt-Ausklappmenue in der Hauptnavigation --- */
.nav-item { position: relative; display: flex; align-items: center; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; border: 0; background: transparent;
  font: inherit; font-size: .95rem; font-weight: 560; color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s var(--ease);
}
.nav-trigger:hover { background: var(--mist); }
.nav-trigger::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.nav-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-item.is-active > .nav-trigger { color: var(--cyan-deep); font-weight: 680; }

.submenu {
  position: absolute; top: calc(100% + .6rem); left: -.6rem;
  min-width: 330px; padding: .6rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-trigger[aria-expanded="true"] + .submenu {
  opacity: 1; visibility: visible; transform: none;
}

/* Gruppenueberschrift ("Produkte", "Unternehmen"). Auf dem Desktop benennt
   bereits der Menueschalter die Gruppe, dort bleibt sie deshalb verborgen.   */
.submenu-gruppe { display: none; }

.submenu-product {
  display: block; padding: .9rem 1rem; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background .15s var(--ease);
}
.submenu-product:hover { background: var(--mist); }
.submenu-product b { display: block; font-size: 1rem; color: var(--ink); }
.submenu-product span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.45; margin-top: .15rem; }

.submenu-links { list-style: none; margin: .2rem 0 .4rem; padding: 0 1rem .6rem; }
.submenu-links li { margin: 0; }
.submenu-links a {
  display: block; padding: .42rem 0; font-size: .91rem;
  color: var(--muted); text-decoration: none; border-radius: 0;
}
.submenu-links a::before { content: "› "; color: var(--cyan); }
.submenu-links a:hover { color: var(--ink); background: transparent; }

.submenu-soon {
  margin-top: .3rem; padding: .85rem 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .87rem; color: var(--muted); line-height: 1.5;
}
.submenu-soon b { display: block; color: var(--ink); font-size: .95rem; }
.submenu-product--soon .badge-soon,
.submenu-soon .badge-soon {
  display: inline-block; margin-top: .35rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan-deep); background: var(--cyan-pale);
  padding: .18rem .5rem; border-radius: 100px;
}

/* Produkt in Entwicklung, aber schon mit eigener Seite (DuoSonic Dental) */
.submenu-product--soon { border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-md) var(--r-md); }
.submenu-product .badge-soon { font-style: normal; }

/* --- Zugang zum Haendlerportal --- */
.nav .portal-link {
  display: inline-flex; align-items: center; gap: .42rem;
  color: var(--muted); font-weight: 600;
}
.nav .portal-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nav .portal-link:hover { color: var(--ink); background: var(--mist); }
.nav .portal-link .ext { font-size: .8em; opacity: .7; }
@media (max-width: 1040px) {
  .nav .portal-link { color: var(--ink); }
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 42px; padding: 0;
  background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; margin-inline: auto; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 74px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .8rem 1.25rem 1.5rem;
    box-shadow: var(--sh-md);
    max-height: calc(100dvh - 74px); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 1.02rem; }
  .header-cta { flex-direction: column; margin: 1rem 0 0; }
  .header-cta .btn { width: 100%; }

  /* ----- Ausklappmenue im Mobilmenue dauerhaft offen darstellen -----
     Der Schalter entfaellt, an seine Stelle tritt die Gruppenueberschrift.
     Die erklaerenden Nebensaetze bleiben auf dem Handy aus: Sie verdoppeln
     die Hoehe des Menues, ohne bei der Orientierung zu helfen.               */
  .nav-item { display: block; padding-bottom: .35rem; }
  .nav-trigger { display: none; }
  .submenu {
    position: static; min-width: 0; padding: 0; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; transform: none;
  }

  .submenu-gruppe {
    display: block; margin: 1.15rem 0 .2rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--muted);
  }

  /* Nur der Produktname, ohne Beschreibungssatz */
  .submenu-product {
    padding: 0; border: 0; border-radius: 0;
    min-height: 44px; display: flex; align-items: center;
  }
  .submenu-product b { font-size: 1.02rem; font-weight: 640; }
  .submenu-product span, .submenu-soon-text { display: none; }

  /* Unterpunkte an einer Linie eingerueckt: sie gehoeren sichtbar zum
     Eintrag darueber und stehen nicht auf der obersten Ebene.                */
  .submenu-links {
    margin: .1rem 0 .3rem; padding: 0 0 0 .95rem;
    border-left: 2px solid var(--line);
  }
  .submenu-links a { font-size: .95rem; padding: 0; border: 0; color: var(--muted); }

  .submenu-soon {
    margin: 0; padding: 0; border: 0;
    min-height: 44px; display: flex; align-items: center; gap: .55rem;
  }
  .submenu-soon b { display: inline; font-size: 1.02rem; font-weight: 640; color: var(--muted); }
  .submenu-soon .badge-soon { margin-top: 0; }
  .submenu-product--soon { gap: .55rem; border-top: 0; }
  .submenu-product--soon .badge-soon { margin-top: 0; }

  /* Mindestens 44 px hoch — darunter trifft man mit dem Daumen daneben. */
  .nav > a, .submenu-links a { min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { height: 46px; }

  /* Trennlinien nur zwischen den Bloecken, nicht unter jeder einzelnen Zeile —
     sonst zerfaellt das Menue in lauter gleich aussehende Streifen.          */
  .nav a { border-bottom: 0; }
  .nav > a, .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav > a:last-of-type { border-bottom: 0; }
}

/* ---------- 6b · Unternavigation eines Bereichs ----------
   Die dunkle Leiste unter dem Kopfbereich. Sie zeigt, in welchem Bereich man
   sich gerade bewegt: .product-nav in einem Produktbereich (DuoSonic),
   .section-nav im Unternehmensbereich (Über uns, Karriere).                  */
.product-nav, .section-nav {
  position: sticky; top: 74px; z-index: 90;
  background: var(--ink); color: #fff;
}
.product-nav .wrap, .section-nav .wrap {
  display: flex; align-items: center; gap: .3rem;
  min-height: 52px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-nav .wrap::-webkit-scrollbar,
.section-nav .wrap::-webkit-scrollbar { display: none; }
.product-nav-title {
  flex: 0 0 auto; margin-right: 1.2rem; padding-right: 1.2rem;
  border-right: 1px solid rgba(255, 255, 255, .2);
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: #fff;
  white-space: nowrap;
}
.product-nav a, .section-nav a {
  flex: 0 0 auto; padding: .45rem .85rem; border-radius: 100px;
  font-size: .92rem; font-weight: 560; color: #C3CDE6; text-decoration: none;
  white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.product-nav a:hover, .section-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.product-nav a[aria-current="page"],
.section-nav a[aria-current="page"] { background: var(--cyan); color: #062A3B; font-weight: 680; }
@media (max-width: 1040px) { .product-nav, .section-nav { top: 74px; } }
@media (max-width: 560px) {
  .product-nav-title { margin-right: .8rem; padding-right: .8rem; font-size: .92rem; }
  .product-nav a, .section-nav a { padding: .4rem .65rem; font-size: .87rem; }
}

/* ---------- 6c · Produktkacheln (Produktlinie) ---------- */
.product-tile {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.product-tile:hover { box-shadow: var(--sh-md); border-color: rgba(20, 195, 236, .45); }
.product-tile + .product-tile { margin-top: 1.5rem; }
@media (max-width: 820px) {
  .product-tile { grid-template-columns: 1fr; }
  .product-tile .product-tile-media { order: -1; }
}
.product-tile-media img { border-radius: var(--r-lg); }
.product-tile h2, .product-tile h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin-bottom: .3rem; }
.product-tile .product-claim {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cyan-deep); margin-bottom: .9rem;
}

.product-tile--soon {
  background: var(--mist); border-style: dashed; border-color: var(--line);
  grid-template-columns: 1fr;
}
.product-tile--soon:hover { box-shadow: none; border-color: var(--line); }
.product-tile--soon h2, .product-tile--soon h3 { color: var(--muted); }
/* Produktfoto unter der Kachel auf duosonic-dental.html */
.dental-bild { max-width: 900px; margin: 2rem auto 0; }
.dental-bild img { width: 100%; height: auto; }
.product-tile--soon .product-claim { color: var(--muted); }

/* ---------- 7 · Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 600px at 78% 12%, rgba(20, 195, 236, .26), transparent 62%),
    radial-gradient(900px 700px at 8% 92%, rgba(58, 36, 112, .55), transparent 60%),
    linear-gradient(160deg, #1D0A48 0%, #16073A 55%, #120530 100%);
  color: #CFD8EE;
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lead { color: #B7C2DC; max-width: 34rem; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Markenclaim unter der Titelzeile */
.hero-claim {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.4; font-weight: 620; letter-spacing: -.015em;
  color: var(--cyan);
  margin: 0 0 1.3rem;
  max-width: 37rem;
  text-wrap: balance;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2rem; }
/* Zusatzinfos unter den Buttons: bewusst OHNE Rahmen und Flaeche, damit sie
   nicht mit den Buttons darueber verwechselt werden. Nur ein Haken davor. */
.hero-badges .badge {
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: .86rem; font-weight: 560; color: #AEB9D4; cursor: default;
}
.hero-badges .badge::before {
  content: ""; width: 11px; height: 6px; margin-top: -3px; flex: 0 0 auto;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}
.hero-shot { position: relative; }
.hero-shot img {
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .1);
}

.page-hero {
  background: linear-gradient(165deg, #1D0A48 0%, #16073A 100%);
  color: #C3CDE6;
  padding-block: clamp(2.8rem, 1.8rem + 4vw, 4.6rem);
}
.page-hero h1 { color: #fff; margin-bottom: .6rem; }
.page-hero .lead { color: #A9B5D3; max-width: 44rem; }

/* ---------- 8 · Badges, Pills, Chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 100px;
  font-size: .8rem; font-weight: 620; letter-spacing: .01em;
  background: rgba(255, 255, 255, .09); color: #E4EAF8;
  border: 1px solid rgba(255, 255, 255, .16);
}
.badge-light {
  background: var(--cyan-pale); color: var(--ink);
  border-color: rgba(20, 195, 236, .35);
}
.badge-green { background: var(--green-pale); color: var(--green); border-color: rgba(18, 138, 91, .28); }
.badge-amber { background: var(--amber-pale); color: var(--amber); border-color: rgba(180, 116, 11, .3); }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- 9 · Karten ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.7rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .98rem; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(20, 195, 236, .45); }
.card-flat { background: var(--mist); border-color: transparent; }
.bg-mist .card { background: var(--paper); }

.card-num {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: #fff;
  font-size: .95rem; font-weight: 700; margin-bottom: 1.1rem;
}
.card-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--cyan-pale); color: var(--ink);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 24px; height: 24px; }

.pillar {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem; overflow: hidden;
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--ink));
}
.pillar .pillar-no {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: .7rem;
}
.pillar ul { margin: 1rem 0 0; }

/* ---------- 10 · Listen ---------- */
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.check { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.check li {
  position: relative; padding-left: 1.9rem; margin-bottom: .7rem;
  color: var(--muted); font-size: .98rem; line-height: 1.55;
}
ul.check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 9px; border-left: 2.4px solid var(--cyan); border-bottom: 2.4px solid var(--cyan);
  transform: rotate(-45deg); border-radius: 1px;
}
ul.check li strong { color: var(--ink); }
.bg-ink ul.check li, .door--dark ul.check li, .hero ul.check li, .cta-band ul.check li { color: #B4C0DA; }
.bg-ink ul.check li strong, .door--dark ul.check li strong,
.hero ul.check li strong, .cta-band ul.check li strong { color: #fff; }

ul.dash { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.dash li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; color: var(--muted); font-size: .97rem; }
ul.dash li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 2px; background: var(--cyan); }

/* ---------- 11 · Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stats > div { background: var(--paper); padding: 1.6rem 1.4rem; }
.bg-ink .stats { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.bg-ink .stats > div { background: var(--ink-deep); }
.stat-value {
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
  font-weight: 720; color: var(--ink); letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bg-ink .stat-value { color: #fff; }
.stat-value span { font-size: .5em; font-weight: 620; letter-spacing: -.01em; color: var(--cyan-deep); }
.bg-ink .stat-value span { color: var(--cyan); }
.stat-label { font-size: .88rem; color: var(--muted); margin-top: .45rem; line-height: 1.45; }
/* Kennzahlen innerhalb einer Karte.
   ".card p" (Zeile 576) setzt .98rem und ist spezifischer als ".stat-value".
   Ohne die beiden folgenden Regeln schrumpfen die Kennzahlen in einer Karte
   auf Fliesstextgroesse — die Zahl ist dann nicht mehr von ihrer Beschriftung
   zu unterscheiden. Betrifft aktuell das Geschwindigkeitsversprechen auf
   unternehmen.html. */
.card .stat-value { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); }
.card .stat-label { font-size: .88rem; }
.bg-ink .stat-label { color: #9FADCB; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* ---------- 12 · Tabellen ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
table.data {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--paper); min-width: 560px;
}
table.data caption {
  caption-side: bottom; text-align: left; padding-top: .9rem;
  font-size: .85rem; color: var(--muted); line-height: 1.5;
}
table.data th, table.data td {
  padding: .82rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.data thead th {
  background: var(--ink); color: #fff; font-size: .78rem;
  font-weight: 640; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 0; white-space: nowrap;
}
table.data thead th:first-child { border-top-left-radius: var(--r-md); }
table.data thead th:last-child  { border-top-right-radius: var(--r-md); }
table.data tbody tr:nth-child(even) { background: var(--mist); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.highlight { background: var(--cyan-pale) !important; }
table.data tr.highlight td { font-weight: 620; color: var(--ink); }
.table-scroll + .table-scroll { margin-top: 2rem; }

/* ---------- 13 · Ampel (regulatorische Kennzeichnung) ---------- */
.amp { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 620; white-space: nowrap; }
.amp::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.amp-green::before { background: var(--green); }
.amp-green { color: var(--green); }
.amp-amber::before { background: var(--amber); }
.amp-amber { color: var(--amber); }

/* ---------- 14 · Zielgruppen-Kacheln ---------- */
.audience {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.7rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.audience:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(20, 195, 236, .5); }
.audience h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.12rem; }
.audience .aud-meta {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--cyan-deep); font-weight: 620;
}

/* ---------- 15 · Vergleich / Balken-Visual ---------- */
.spectrum { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
.spectrum-row + .spectrum-row { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.spectrum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; }
.spectrum-head b { font-size: 1rem; color: var(--ink); }
.spectrum-head span { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 13px; border-radius: 100px; background: var(--mist-deep); overflow: hidden; }
.bar i {
  position: absolute; top: 0; bottom: 0; display: block; border-radius: 100px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
}
.bar i.ink { background: linear-gradient(90deg, var(--ink-soft), var(--ink)); }
.bar i.thin { width: 4px !important; }
.spectrum-note { font-size: .88rem; color: var(--muted); margin-top: .55rem; }

/* ---------- 16 · Akkordeon (FAQ) ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.acc + .acc { margin-top: .75rem; }
.acc summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font-weight: 640; color: var(--ink); font-size: 1.02rem; line-height: 1.45;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-top: .38em;
  border-right: 2.2px solid var(--cyan); border-bottom: 2.2px solid var(--cyan);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.acc[open] summary::after { transform: rotate(-135deg); }
.acc[open] summary { background: var(--mist); }
.acc .acc-body { padding: 1.2rem 1.4rem 1.5rem; color: var(--muted); font-size: .98rem; }
.acc .acc-body > *:first-child { margin-top: 0; }

/* ---------- 17 · Ablauf / Timeline ---------- */
.steps { counter-reset: step; display: grid; gap: 1.1rem; }
.step {
  position: relative; padding-left: 4.2rem;
  padding-block: .2rem;
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cyan-pale); color: var(--ink);
  font-weight: 720; font-size: 1.02rem;
  border: 1.5px solid rgba(20, 195, 236, .38);
}
.step::after {
  content: ""; position: absolute; left: 23px; top: 52px; bottom: -1.1rem;
  width: 1.5px; background: var(--line);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.step p { color: var(--muted); font-size: .97rem; margin-bottom: 0; }
.bg-ink .step::before { background: rgba(20, 195, 236, .15); color: #fff; border-color: rgba(20, 195, 236, .4); }
.bg-ink .step::after { background: rgba(255, 255, 255, .16); }
.bg-ink .step p { color: #A9B5D3; }

/* ---------- 18 · (frei) ----------
   Hier standen die Stile des Amortisationsrechners. Der Rechner ist bewusst
   nicht mehr auf der oeffentlichen Website, sondern im Haendlerportal. */

/* ---------- 19 · Formulare ---------- */
.form { display: grid; gap: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 620; font-size: .92rem; color: var(--ink); margin-bottom: .4rem; }
.field label .req { color: var(--cyan-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .95rem;
  font: inherit; font-size: .97rem; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(20, 195, 236, .16); outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: .84rem; color: var(--muted); margin-top: .35rem; }
.checkbox { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; color: var(--muted); line-height: 1.55; }
.checkbox input { width: 19px; height: 19px; margin-top: .18em; flex: 0 0 auto; accent-color: var(--cyan-deep); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
}
.form-panel--accent { border-top: 4px solid var(--cyan); }

/* Zusatzfelder, die je nach "Worum geht es?" eingeblendet werden (kontakt.html,
   main.js Abschnitt 5a). [hidden] muss ausdruecklich gewinnen, weil
   display:grid sonst das hidden-Attribut aufhebt. */
.form-gruppe { display: grid; gap: 1.15rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-gruppe[hidden] { display: none; }
.req[hidden] { display: none; }

/* Leere Sprungmarken (#demo, #partner) — mit Abstand fuer den klebenden Kopf */
.anker { display: block; height: 0; scroll-margin-top: 90px; }

/* --- Fehleranzeige an einzelnen Feldern ---
   Gesetzt wird das alles von main.js, Abschnitt 5: Das umgebende .field
   bekommt die Klasse "hat-fehler", die Meldung steht als <p class="feld-fehler">
   direkt unter dem Feld, und ueber dem Absenden-Knopf erscheint eine kurze
   Zusammenfassung (.form-fehler). Im HTML der Formulare steht davon nichts —
   es muss also auch nichts gepflegt werden, wenn ein Feld dazukommt.

   Ohne JavaScript greift die eingebaute Pruefung des Browsers (required,
   type="email", pattern); diese Regeln bleiben dann einfach unbenutzt.
   Nicht nur Farbe: Rahmen, Hintergrund UND Text markieren den Fehler, damit
   ihn auch erkennt, wer Rot und Grau nicht unterscheiden kann.              */
.field.hat-fehler input,
.field.hat-fehler select,
.field.hat-fehler textarea {
  border-color: var(--red);
  background: var(--red-pale);
}
.field.hat-fehler input:focus,
.field.hat-fehler select:focus,
.field.hat-fehler textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .14);
}
.field.hat-fehler .checkbox input {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px;
}
.feld-fehler {
  display: flex; gap: .45rem; align-items: flex-start;
  margin: .4rem 0 0;
  font-size: .86rem; font-weight: 600; line-height: 1.45;
  color: var(--red);
}
.feld-fehler::before {
  content: "!";
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem; margin-top: .08em;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1.05rem; text-align: center;
}
.form-fehler {
  margin: 0;
  padding: .75rem .95rem;
  border: 1.5px solid var(--red); border-left-width: 5px; border-radius: 10px;
  background: var(--red-pale); color: var(--red);
  font-size: .92rem; font-weight: 600; line-height: 1.5;
}

/* ---------- 20 · Zitat / Aussage ---------- */
.pullquote {
  border-left: 4px solid var(--cyan); padding: .3rem 0 .3rem 1.6rem;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.5;
  color: var(--ink); font-weight: 600; letter-spacing: -.015em;
}
.pullquote footer { margin-top: .8rem; font-size: .88rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* ---------- 21 · Bild-Rahmen ---------- */
.shot { border-radius: var(--r-lg); overflow: hidden; background: var(--mist); border: 1px solid var(--line); }
.shot img { width: 100%; }
.shot-elevated { box-shadow: var(--sh-lg); border: 0; }
figure { margin: 0; }
figcaption { font-size: .86rem; color: var(--muted); margin-top: .8rem; line-height: 1.5; }

/* ---------- 22 · CTA-Band ---------- */
.cta-band {
  background:
    radial-gradient(700px 400px at 85% 20%, rgba(20, 195, 236, .3), transparent 60%),
    linear-gradient(140deg, #1D0A48, #16073A);
  color: #C7D1E9; border-radius: var(--r-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #AAB6D3; }
.cta-band .eyebrow { color: var(--cyan); }
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (max-width: 800px) { .cta-split { grid-template-columns: 1fr; } }

/* zwei Wege — Praxis / Händler */
.two-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .two-doors { grid-template-columns: 1fr; } }
.door {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  border: 1px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column;
}
.door--dark {
  background: linear-gradient(150deg, #23104F, #16073A);
  border-color: transparent; color: #B9C4DD;
}
.door--dark h3, .door--dark .door-eyebrow { color: #fff; }
.door-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: .9rem; }
.door--dark .door-eyebrow { color: var(--cyan); }
.door p { color: var(--muted); }
.door--dark p { color: #A6B2CF; }
.door .btn-row { margin-top: auto; padding-top: 1.6rem; }

/* ---------- 23 · Footer ---------- */
/* Heller Grund (CI-Hellgrau) mit Cyan-Akzentlinie: Das Logo ist fuer hellen
   Grund gestaltet — auf dem frueheren Dunkelviolett verschwand der violette
   Teil ("WF", obere Kreishaelfte) fast im Hintergrund. */
.site-footer {
  background: var(--mist-deep); color: var(--muted);
  border-top: 4px solid var(--cyan);
  padding-block: 3.5rem 2rem; font-size: .93rem;
}
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--ink); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .6rem; }
.footer-logo { width: 168px; margin-bottom: 1.2rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #D3DCE8;
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; justify-content: space-between;
  font-size: .85rem; color: var(--muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.3rem; }

/* ---------- 22b · Stellenanzeigen ---------- */
.job {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  scroll-margin-top: 100px;
}
.job + .job { margin-top: 1.8rem; }
.bg-mist .job { background: var(--paper); }

/* Kopfzeile: immer sichtbar, klappt die Anzeige auf und zu. Die Anzeigen sind
   bewusst zugeklappt, damit die Liste der offenen Stellen auf einen Blick
   erfassbar bleibt — der Inhalt einer Anzeige ist lang.                     */
.job-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem; cursor: pointer; list-style: none;
}
.job-head::-webkit-details-marker { display: none; }
.job-head > span:first-child { min-width: 0; }
.job[open] .job-head { margin-bottom: 1.6rem; }

.job-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: .2rem;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); background: var(--paper);
  transition: transform .2s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.job-toggle svg { width: 17px; height: 17px; }
.job-head:hover .job-toggle { border-color: var(--cyan); color: var(--ink); }
.job[open] .job-toggle { transform: rotate(180deg); }
.job-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .job-toggle { transition: none; } }

.job > h2, .job-head h2 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  margin-bottom: .9rem;
}
.job-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.job-body > :first-child { margin-top: 0; }
.job-lead {
  font-size: 1.06rem; line-height: 1.6; color: var(--muted);
  padding-bottom: 1.5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.job h3 {
  font-size: 1rem; letter-spacing: .01em;
  margin-bottom: .7rem;
}
.job-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; }
@media (max-width: 720px) { .job-spalten { grid-template-columns: 1fr; } }
.job-block + .job-block { margin-top: 1.6rem; }
.job .btn-row {
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}

/* Hinweis, wenn gerade keine Stelle offen ist */
/* Kontaktdaten am Fuss jeder Anzeige — bewusst als lesbarer Text und nicht
   nur im Knopf, damit man Adresse und Nummer abschreiben kann.            */
.job-kontakt {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1.4rem 2.5rem; align-items: center;
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.job-kontakt h3 { font-size: 1rem; margin-bottom: .5rem; }
.job-kontakt p { margin-bottom: 0; line-height: 1.7; }
.job-kontakt .btn-row { margin: 0; justify-content: flex-end; flex-wrap: wrap; }
.job-kontakt-adresse { display: block; font-size: .92rem; color: var(--muted); margin-top: .3rem; }
@media (max-width: 860px) {
  .job-kontakt { grid-template-columns: 1fr; }
  .job-kontakt .btn-row { justify-content: flex-start; }
}

/* Knopf "Als PDF speichern" — oeffnet den Druckdialog des Browsers */
.job-pdf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.job-pdf:hover { border-color: var(--cyan); color: var(--ink); }
.job-pdf svg { width: 15px; height: 15px; flex: 0 0 auto; }

.job-leer {
  background: var(--mist); border: 1px dashed var(--line);
  border-radius: var(--r-lg); padding: 2rem;
  text-align: center; color: var(--muted);
}

/* Karriere-Hinweis auf der Unternehmensseite */
.karriere-teaser { grid-template-columns: 1fr auto; }
.karriere-teaser .btn-row { margin: 0; justify-content: flex-end; }
@media (max-width: 800px) {
  .karriere-teaser .btn-row { justify-content: flex-start; }
}

/* ---------- 23a · Kooperationspartner ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.partner-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.partner-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-md);
  border-color: rgba(20, 195, 236, .5);
}
.partner-logo {
  display: grid; place-items: center;
  height: 130px; padding: 1.4rem 1.6rem;
  background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
/* Feste Hoehe statt Prozent: sonst ueberlaufen hohe Logos den Innenabstand
   und die Logos wirken unterschiedlich gross. */
.partner-logo img { max-height: 84px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.partner-body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.partner-body h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.partner-body p { font-size: .93rem; color: var(--muted); margin-bottom: 0; }
.partner-body .partner-meta {
  margin-top: auto; padding-top: 1rem;
  font-size: .85rem; font-weight: 620; color: var(--cyan-deep);
}

/* Kompakte Logoleiste, z. B. auf der Startseite */
.partner-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.partner-strip a {
  display: grid; place-items: center;
  height: 74px; flex: 0 1 200px;
  opacity: .85; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.partner-strip a:hover { opacity: 1; transform: translateY(-2px); }
.partner-strip img { max-height: 62px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- 23b · Anwenderstimmen ---------- */
.quote {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.8rem 1.7rem 1.5rem;
  margin: 0; position: relative;
}
.bg-mist .quote { background: var(--paper); }
.quote::before {
  content: "„"; position: absolute; top: .35rem; right: 1.3rem;
  font-size: 4.5rem; line-height: 1; color: var(--cyan); opacity: .22;
  pointer-events: none;
}
.quote blockquote {
  margin: 0 0 1.4rem; padding: 0;
  font-size: 1.02rem; line-height: 1.6; color: var(--text);
}
.quote blockquote p { margin-bottom: .8rem; }
.quote blockquote p:last-child { margin-bottom: 0; }
.quote figcaption {
  display: flex; align-items: center; gap: .9rem;
  margin-top: auto; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem; line-height: 1.4;
}
.quote-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; background: var(--mist-deep);
}
.quote figcaption b { display: block; color: var(--ink); font-weight: 640; }
.quote figcaption span { display: block; color: var(--muted); font-size: .85rem; }

/* Grosszitat fuer eine einzelne, herausgestellte Stimme */
.quote-feature {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 1rem + 2.5vw, 2.8rem); align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
  margin: 0;
}
@media (max-width: 700px) { .quote-feature { grid-template-columns: 1fr; } }
.quote-feature img {
  width: clamp(96px, 12vw, 140px); height: clamp(96px, 12vw, 140px);
  border-radius: 50%; object-fit: cover; background: var(--mist-deep);
}
.quote-feature blockquote {
  margin: 0 0 1.2rem;
  font-size: clamp(1.1rem, 1rem + .65vw, 1.45rem); line-height: 1.5;
  color: var(--ink); font-weight: 600; letter-spacing: -.015em;
}
.quote-feature figcaption { font-size: .95rem; color: var(--muted); }
.quote-feature figcaption b { color: var(--ink); font-weight: 640; }

/* ---------- 23c · Platzhalter-Kennzeichnung ----------
   Alles, was vor dem Livegang ersetzt werden muss, traegt data-platzhalter.
   Suchbegriff im Editor: "data-platzhalter"                                  */
.platzhalter-hinweis {
  display: flex; align-items: flex-start; gap: .8rem;
  background: repeating-linear-gradient(
    135deg, var(--amber-pale), var(--amber-pale) 12px,
    #FBEAD0 12px, #FBEAD0 24px);
  border: 2px dashed var(--amber); border-radius: var(--r-md);
  padding: 1rem 1.3rem; margin-bottom: 2rem;
  font-size: .9rem; line-height: 1.55; color: #6B4405;
}
.platzhalter-hinweis strong { color: var(--amber); display: block; margin-bottom: .2rem; }
.platzhalter-hinweis::before { content: "⚠"; font-size: 1.2rem; line-height: 1.3; flex: 0 0 auto; }

.quote[data-platzhalter] { border-color: var(--amber); border-style: dashed; }
.quote[data-platzhalter]::after,
.quote-feature[data-platzhalter]::after {
  content: "MUSTERTEXT";
  position: absolute; top: 0; left: 0;
  background: var(--amber); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  padding: .22rem .7rem; border-radius: var(--r-lg) 0 var(--r-md) 0;
}
.quote-feature[data-platzhalter] {
  position: relative; border-color: var(--amber); border-style: dashed;
}

/* Bildplatzhalter bis zum Fotoshooting */
img[data-platzhalter] { outline: 2px dashed var(--amber); outline-offset: -2px; }

/* ---------- 24 · Hilfsklassen ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.disclaimer {
  font-size: .82rem; color: var(--muted); line-height: 1.6;
  background: var(--mist); border-radius: var(--r-md); padding: 1.2rem 1.4rem;
}
.disclaimer strong { color: var(--ink); }

/* Einblendung beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 25 · Feinschliff für schmale Handybildschirme ----------
   Die ersten drei Regeln gelten ueberall, wirken sich aber erst aus, wenn der
   Platz knapp wird — auf breiten Bildschirmen aendert sich dadurch nichts.
   Der Block ab "@media (max-width: 560px)" betrifft ausschliesslich Handys
   im Hochformat (iPhone SE, Galaxy Fold und aehnlich schmale Geraete).       */

/* Lange deutsche Woerter ("Datenschutzerklaerung", "Geschwindigkeits-
   versprechen") sind breiter als ein schmales Display. Sie duerfen umbrechen
   und werden bei Bedarf getrennt — <html lang="de"> liefert die Regeln.      */
h1, h2, h3, .stat-value, .product-claim {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Die Augenbraue ist ein Flex-Element: ohne Umbruch-Erlaubnis schiebt ein
   langer Text den ganzen Abschnitt seitlich aus dem Bild.                    */
.eyebrow { flex-wrap: wrap; overflow-wrap: anywhere; hyphens: auto; }

/* Sicherheitsnetz: Ein Rasterfeld darf nie breiter werden als die Spalte, in
   der es steht. Ohne diese Zeile kann ein einziges langes Wort die gesamte
   Seite seitlich verschieben.                                                */
.split > *, .grid > * { min-width: 0; }

@media (max-width: 560px) {
  /* Buttons und Ampel-Kennzeichnungen duerfen umbrechen statt zu ueberstehen */
  .btn { white-space: normal; text-align: center; }
  .amp { white-space: normal; align-items: flex-start; }
  .amp::before { margin-top: .42em; }

  /* iOS zoomt beim Antippen in jedes Feld, dessen Schrift kleiner als 16px
     ist. 16px verhindert diesen Sprung.                                      */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* Fusszeilen-Links stehen sonst so eng, dass der Daumen danebentrifft.    */
  .footer-grid li a, .footer-legal a { display: inline-block; padding-block: .7rem; }
  .footer-grid li { margin-bottom: .1rem; }
}

/* ---------- 26 · Einwilligungsbanner (Google Analytics) ----------
   Wird von analytics.js erzeugt und liegt als letztes Element im <body>.
   Er verdeckt die Seite nicht: Der Besucher kann lesen und navigieren, ohne
   sich vorher entscheiden zu müssen. Solange er nicht entschieden hat, wird
   auch nichts geladen — die Wahl ist damit wirklich frei.

   Auf dem Handy stehen die beiden Knöpfe nebeneinander in einer eigenen
   Zeile; sie bleiben gleich breit, damit keiner von beiden auffälliger wirkt
   als der andere.                                                           */
/* Der sichtbare Zustand ist der Normalzustand — das Einblenden ist nur eine
   Zugabe. Andersherum (unsichtbar als Ausgangspunkt, Animation macht ihn
   sichtbar) waere der Banner in einem Hintergrundtab unsichtbar geblieben:
   Browser frieren Animationen in nicht angezeigten Tabs ein. Ein
   Einwilligungsbanner, den man je nach Tab nicht sieht, waere unbrauchbar. */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--paper);
  border-top: 3px solid var(--cyan);
  box-shadow: 0 -8px 30px rgba(28, 36, 57, .16);
  transform: translateY(0);
}
/* Das Einblenden setzt analytics.js nur dann, wenn die Seite gerade wirklich
   angezeigt wird. In einem Hintergrundtab friert der Browser laufende
   Animationen im ersten Bild ein — der Banner haenge dann halb unter dem
   Fensterrand fest. Ohne diese Klasse steht er einfach sofort da.          */
.cookie-banner.einblenden {
  animation: cookie-ein .34s var(--ease);
}
.cookie-banner.zu {
  transform: translateY(105%);
  transition: transform .28s var(--ease);
}

@keyframes cookie-ein {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
  .cookie-banner.zu { transition: none; }
}

.cookie-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.cookie-text-block { min-width: 0; }

.cookie-titel {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  font-weight: 680;
  color: var(--ink);
}

.cookie-text {
  margin: 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62rem;
}
.cookie-text a { color: var(--cyan-deep); }

.cookie-aktionen {
  display: flex;
  gap: .7rem;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .cookie-inner {
    display: block;
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
    max-height: 70vh;
    overflow-y: auto;
  }
  .cookie-text { font-size: .85rem; }
  .cookie-aktionen { margin-top: .9rem; }
  /* Gleiche Breite für beide Knöpfe — keiner darf dominieren. */
  .cookie-aktionen .btn { flex: 1 1 0; white-space: normal; }
}

/* ---------- 30 · Druck ---------- */

/* Briefkopf, der ausschliesslich im Ausdruck erscheint. Steht einmal ganz oben
   im <body> von karriere.html und muss beim Kopieren einer Anzeige NICHT
   mitkopiert werden.                                                        */
.drucken-kopf { display: none; }
/* Aussehen des Briefkopfs — steht ausserhalb von @media print, weil der
   Messrahmen ihn ebenfalls braucht. Auf dem Bildschirm bleibt er unsichtbar,
   solange "display: none" oben gilt.                                       */
.drucken-kopf { padding-bottom: 6mm; margin-bottom: 8mm; border-bottom: 1.5pt solid #220B53; }
.drucken-kopf img { width: 42mm; height: auto; }
.drucken-kopf p { margin: 3mm 0 0; font-size: 9pt; line-height: 1.5; color: #333; }

@media print {
  .cookie-banner,
  .site-header, .site-footer, .btn-row, .nav-toggle, .cta-band,
  .section-nav, .product-nav, .skip-link, .job-pdf { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* "size: A4" festhalten, damit die Rechnung auch dann aufgeht, wenn im
     Druckdialog ein Drucker mit US-Papierformat (Letter) voreingestellt ist —
     Letter ist 18 mm kuerzer als A4.                                       */
  @page { size: A4; margin: 18mm 16mm; }

  /* ----- Eine einzelne Stellenanzeige als PDF -----
     Der Knopf setzt vor dem Druck drei Markierungen: "drucken" am <html>,
     "drucken-ziel" an der gewaehlten Anzeige und "drucken-sektion" an dem
     Abschnitt, in dem sie steht. Danach bleibt nur diese Anzeige uebrig. */
  html.drucken body > *                        { display: none !important; }
  html.drucken body > main                     { display: block !important; }
  html.drucken body > .drucken-kopf            { display: block !important; }
  html.drucken main > section                  { display: none !important; }
  html.drucken main > section.drucken-sektion  { display: block !important; }
  html.drucken .drucken-sektion .section-head  { display: none !important; }
  html.drucken .job                            { display: none !important; }
  html.drucken .job.drucken-ziel               { display: block !important; }

  /* Die Anzeigen sind <details> und im Normalzustand zugeklappt. Das Skript
     klappt die gewaehlte Anzeige vor dem Druck auf; diese Regel ist die
     Rueckfallebene, falls ein Browser den Inhalt eines <details> beim Drucken
     trotzdem unterdrueckt.                                                 */
  html.drucken .job.drucken-ziel .job-body     { display: block !important; }

  html.drucken main > section.drucken-sektion { padding: 0 !important; background: #fff !important; }
  html.drucken .drucken-sektion .wrap { padding: 0 !important; max-width: none !important; }

  /* Anzeige nicht mitten in einer Aufzaehlung umbrechen */
  .job h2, .job h3 { break-after: avoid; page-break-after: avoid; }
  .job-spalten { break-inside: avoid; page-break-inside: avoid; }

  /* Der Kontaktblock darf nicht als einziger Inhalt auf eine zweite Seite
     rutschen. "break-before: avoid" verhindert genau das — ein reines
     "break-inside: avoid" wuerde ihn im Zweifel komplett verschieben. */
  .job-kontakt { break-before: avoid; page-break-before: avoid; }
}

/* ---------- 30a · Eine Anzeige auf genau eine A4-Seite ----------

   Die Anzeige bekommt vor dem Druck die Klasse "a4-layout". Sie enthaelt
   ALLE Regeln, die das Aussehen auf dem Papier bestimmen — bewusst
   ausserhalb von @media print, denn genau dieselben Regeln gelten auch im
   unsichtbaren Messrahmen darunter. Nur wenn beide identisch sind, stimmt
   die vorher berechnete Hoehe mit dem tatsaechlichen Ausdruck ueberein.

   main.js misst die Anzeige im Messrahmen, vergleicht sie mit der nutzbaren
   Hoehe einer A4-Seite und setzt daraus --druck-skala. Passt die Anzeige
   ohnehin, bleibt der Wert bei 1 und es wird nichts verkleinert.

   WICHTIG: Verkleinert wird ueber die Grundschriftgroesse, und ALLE Masse
   darunter sind in "em" angegeben — also Vielfache dieser Grundgroesse.
   Dadurch schrumpfen Schrift, Abstaende und Haken gemeinsam. Frueher stand
   hier "zoom"; das rechnen Browser beim Drucken nicht zuverlaessig mit, und
   die Anzeige wurde am Ende doch zweiseitig.                              */

.a4-layout {
  font-size: calc(1rem * var(--druck-skala, 1));
  padding: 0 !important; border: 0 !important; background: #fff !important;
  color: #000;
}
.a4-layout > h2,
.a4-layout .job-head h2 { font-size: 1.65em; margin-bottom: .7em; }   /* fest statt clamp() */
.a4-layout .job-meta { margin-bottom: 0; gap: .4em; }

/* Auf dem Papier gibt es nichts aufzuklappen: Der Pfeil entfaellt, und die
   Kopfzeile ist wieder ein normaler Block. Diese Regeln stehen bewusst hier
   und nicht in @media print — der Messrahmen muss dieselbe Hoehe ergeben
   wie der spaetere Ausdruck, sonst stimmt die Skalierung nicht.            */
.a4-layout .job-toggle { display: none; }
.a4-layout .job-head { display: block; cursor: auto; margin-bottom: .9em; }
.a4-layout .badge { font-size: .78em; padding: .32em .8em; gap: .4em; border-width: 1px; }
.a4-layout .job-lead {
  font-size: 1.04em; line-height: 1.55;
  padding-bottom: .9em; margin-bottom: .9em;
}
.a4-layout h3 { font-size: 1em; margin-bottom: .5em; }
.a4-layout p { font-size: .95em; line-height: 1.55; }
.a4-layout ul.check { margin-top: .7em; }
.a4-layout ul.check li {
  font-size: .95em; line-height: 1.45;
  padding-left: 1.7em; margin-bottom: .45em;
}
.a4-layout ul.check li::before {
  width: .92em; height: .55em; border-width: .14em; top: .38em;
}
/* WICHTIG — hier lag der Fehler, der die Anzeige zweiseitig gemacht hat:
   Eine A4-Seite ist nur rund 673 px breit. Damit greift beim Drucken die
   Handy-Regel weiter oben (".job-spalten" wird unter 720 px einspaltig) und
   die Anzeige wird viel laenger. Am Bildschirm faellt das nicht auf, weil
   dort das Browserfenster zaehlt und nicht die Seitenbreite. Deshalb hier
   die Zweispaltigkeit ausdruecklich festhalten — das gilt im Ausdruck UND
   im Messrahmen, sodass Messung und Ergebnis wieder zusammenpassen.       */
.a4-layout .job-spalten { grid-template-columns: 1fr 1fr; gap: .9em 8mm; }
.a4-layout .job-block + .job-block { margin-top: .9em; }
.a4-layout .job-kontakt {
  grid-template-columns: 1fr; gap: 0;
  margin-top: 1.1em; padding-top: .9em;
}
.a4-layout .job-kontakt h3 { margin-bottom: .35em; }
.a4-layout .job-kontakt-adresse { font-size: .92em; margin-top: .25em; }
.a4-layout .note { font-size: .88em; line-height: 1.5; }
.a4-layout .btn-row { display: none; }
.a4-layout .badge-light {
  border: .5pt solid #999; background: #fff; color: #000;
}
/* Auf Papier traegt Grau schlecht — Fliesstext deutlich dunkler setzen. */
.a4-layout ul.check li, .a4-layout li, .a4-layout .job-kontakt p { color: #000; }
.a4-layout .job-lead, .a4-layout .job-kontakt-adresse, .a4-layout .note { color: #333; }
.a4-layout a { color: #000; text-decoration: none; }

/* Unsichtbarer Messrahmen. Er bildet die Bedingungen einer A4-Seite nach:
   178 mm Breite (210 mm minus die beiden Seitenraender) und dieselbe
   Grundschriftgroesse wie im Ausdruck. main.js legt eine Kopie der Anzeige
   hinein, misst und raeumt sofort wieder auf — sichtbar wird davon nichts. */
.druck-messrahmen {
  position: fixed; left: -20000px; top: 0;
  width: 178mm; font-size: 11pt;
  visibility: hidden; pointer-events: none;
}
.druck-messrahmen .drucken-kopf { display: block; }

/* ==========================================================================
   31 · Feinschliff (Redesign 27.09.2026, Teil 1)
   Rein gestalterische Ebene ueber allem Vorherigen (Abschnitte 31-33).
   Texte und Bilder bleiben unberuehrt. Wer zur alten Optik zurueck will,
   loescht die Abschnitte 31 bis 33 bis zum Dateiende; Details im README,
   Abschnitt 0a.

   Schrift: Inter (SIL Open Font License), LOKAL eingebunden — keine Verbindung zu
   Google oder anderen Dritten, also DSGVO-unkritisch.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-text: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-head: "Inter", "Segoe UI", -apple-system, Arial, sans-serif;

  --line:      #E4EAF2;
  --line-soft: #EEF2F7;
  --mist:      #F5F8FC;

  --r-lg: 22px;
  --r-xl: 30px;

  --sh-sm: 0 1px 2px rgba(22, 7, 58, .04), 0 4px 14px rgba(22, 7, 58, .04);
  --sh-md: 0 2px 6px rgba(22, 7, 58, .05), 0 18px 40px rgba(22, 7, 58, .08);
  --sh-lg: 0 6px 14px rgba(22, 7, 58, .06), 0 36px 80px rgba(22, 7, 58, .14);

  /* Schallwellen-Motiv: konzentrische Ringe wie im Logo */
  --rings: repeating-radial-gradient(circle at center, transparent 0 38px, rgba(20, 195, 236, .16) 38px 39.5px);
}

/* ---- Schrift ---- */
body {
  font-family: var(--font-text);
  font-size: 16.5px;
  line-height: 1.7;
  font-feature-settings: "kern" 1, "cv11" 1, "ss03" 1;
  color: #243049;
}
h1, h2, h3, h4,
.hero-claim, .stat-value, .product-nav-title, .pullquote {
  font-family: var(--font-head);
}
h1 { font-weight: 720; letter-spacing: -.036em; line-height: 1.06; }
h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
h3 { font-weight: 640; letter-spacing: -.018em; line-height: 1.3; }
strong, b { font-weight: 600; }
.lead { line-height: 1.65; }

/* ---- Augenbraue: feiner, mit Punkt statt Strich ---- */
.eyebrow {
  font-size: .72rem; letter-spacing: .18em; font-weight: 650;
  gap: .6rem;
}
.eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(20, 195, 236, .18);
}
.section-head { margin-bottom: clamp(2.4rem, 1.4rem + 3vw, 3.8rem); }
.section-head h2 { margin-bottom: .45em; }

/* ---- Abschnitte: mehr Luft, weichere Flaechen ---- */
section { padding-block: clamp(4rem, 2.4rem + 5.5vw, 7.5rem); }
section.tight { padding-block: clamp(2.8rem, 1.8rem + 3.5vw, 4.8rem); }
.bg-mist {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(20, 195, 236, .06), transparent 70%),
    var(--mist);
}

/* ---- Kopfbereich ---- */
.site-header {
  background: rgba(255, 255, 255, .86);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(22, 7, 58, .06);
}
@media (min-width: 1041px) {
  .nav a:not(.btn), .nav-trigger { position: relative; background: transparent !important; }
  .nav > a:not(.btn)::after, .nav-trigger::before {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px; border-radius: 2px; background: var(--cyan);
    transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
  }
  .nav > a:not(.btn):hover::after, .nav-trigger:hover::before,
  .nav > a[aria-current="page"]::after, .nav-item.is-active > .nav-trigger::before { transform: scaleX(1); }
  .nav a[aria-current="page"], .nav-item.is-active > .nav-trigger { color: var(--ink); }
}
.submenu { border-radius: 18px; border-color: var(--line-soft); padding: .5rem; }

/* ---- Buttons ---- */
.btn { font-weight: 600; letter-spacing: -.005em; padding: .86rem 1.6rem; }
.btn-primary {
  background: linear-gradient(180deg, #2ACDF2, #12BDE6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 22px rgba(20, 195, 236, .30);
}
.btn-primary:hover { background: linear-gradient(180deg, #45D6F6, #1CC6EE); }
.btn-sm { padding: .62rem 1.15rem; }
.link-arrow { font-weight: 600; }

/* ---- Hero: tiefer, mit Schallringen ---- */
.hero {
  background:
    radial-gradient(760px 520px at 82% 38%, rgba(20, 195, 236, .30), transparent 64%),
    radial-gradient(900px 700px at 0% 100%, rgba(74, 44, 150, .55), transparent 62%),
    linear-gradient(160deg, #1F0B4D 0%, #16073A 55%, #10042B 100%);
  padding-block: clamp(4.2rem, 2.4rem + 8vw, 8rem);
}
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 1100px; height: 1100px; right: -300px; top: 50%; transform: translateY(-50%);
  background: var(--rings);
  -webkit-mask-image: radial-gradient(circle at center, #000 0 18%, transparent 62%);
          mask-image: radial-gradient(circle at center, #000 0 18%, transparent 62%);
  opacity: .9;
}
.hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
.hero-claim { font-weight: 650; letter-spacing: -.02em; }
.hero-shot img {
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .04), 0 50px 100px rgba(4, 0, 20, .55);
}
.hero-shot::before {
  content: ""; position: absolute; inset: 12% -6% -8% 12%; z-index: -1;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(20, 195, 236, .45), transparent);
  filter: blur(30px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-grid > * { animation: heroIn .9s var(--ease) both; }
  .hero-grid > *:nth-child(2) { animation-delay: .12s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 380px at 90% 0%, rgba(20, 195, 236, .22), transparent 65%),
    linear-gradient(165deg, #1F0B4D 0%, #16073A 100%);
}
.page-hero::before {
  content: ""; position: absolute; pointer-events: none;
  width: 800px; height: 800px; right: -260px; top: -380px;
  background: var(--rings);
  -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 60%);
          mask-image: radial-gradient(circle, #000 0 20%, transparent 60%);
}
.page-hero > * { position: relative; }

/* Unternavigation: ruhiger, mit Glas-Effekt */
.product-nav, .section-nav {
  background: rgba(22, 7, 58, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ---- Karten & Saeulen ---- */
.card, .pillar, .quote, .audience, .partner-card, .form-panel, .spectrum, .job {
  border-color: var(--line);
  box-shadow: var(--sh-sm);
}
.pillar {
  padding: 2.2rem 2rem 2.1rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pillar::before { display: none; }
.pillar::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px;
  background: var(--rings); opacity: .45; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 70%);
          mask-image: radial-gradient(circle, #000 0 30%, transparent 70%);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(20, 195, 236, .35); }
.pillar .pillar-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem;
  border-radius: 100px;
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-size: .78rem; letter-spacing: .08em;
  margin-bottom: 1.3rem;
}
.pillar h3 { margin-bottom: .6rem; }
.pillar > p { color: var(--muted); }

.card-flat { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.card-hover:hover, .audience:hover, a.partner-card:hover { box-shadow: var(--sh-md); }

/* Haken in Listen: kleiner Kreis statt blosser Linie */
ul.check li { padding-left: 2.1rem; }
ul.check li::before {
  left: 0; top: .25em; width: 1.3rem; height: 1.3rem;
  border: 0; border-radius: 50%; transform: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%230C9BBE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--cyan-pale);
}
.bg-ink ul.check li::before, .hero ul.check li::before, .cta-band ul.check li::before, .door--dark ul.check li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%2314C3EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    rgba(20, 195, 236, .14);
}

/* ---- Bilder ---- */
.shot { border-radius: 24px; }
.shot-elevated { box-shadow: 0 0 0 1px rgba(22, 7, 58, .04), var(--sh-lg); }
figure > picture img, .media-col img { border-radius: 24px; }
figcaption { font-size: .84rem; }

/* ---- Ablauf-Schritte ---- */
.step::before {
  background: #fff; color: var(--ink);
  border: 1.5px solid rgba(20, 195, 236, .55);
  box-shadow: 0 0 0 5px rgba(20, 195, 236, .10);
  font-family: var(--font-head);
}
.step::after { background: linear-gradient(var(--cyan), var(--line)); width: 2px; left: 22px; }

/* ---- Tabellen ---- */
table.data thead th { background: var(--ink); font-family: var(--font-head); letter-spacing: .06em; }
.table-scroll { box-shadow: var(--sh-sm); border: 1px solid var(--line); }

/* ---- Akkordeon ---- */
.acc { border-radius: 16px; }
.acc summary { font-family: var(--font-head); font-weight: 650; }

/* ---- Formular ---- */
.field input, .field select, .field textarea { border-radius: 12px; background: #FBFCFE; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; }

/* ---- CTA-Band: mit Schallringen ---- */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 380px at 88% 30%, rgba(20, 195, 236, .32), transparent 62%),
    radial-gradient(600px 400px at 0% 100%, rgba(74, 44, 150, .5), transparent 60%),
    linear-gradient(140deg, #1F0B4D, #13053A);
  padding: clamp(2.4rem, 1.6rem + 3.5vw, 4.2rem);
}
.cta-band::before {
  content: ""; position: absolute; pointer-events: none;
  width: 700px; height: 700px; right: -220px; top: 50%; transform: translateY(-50%);
  background: var(--rings);
  -webkit-mask-image: radial-gradient(circle, #000 0 15%, transparent 60%);
          mask-image: radial-gradient(circle, #000 0 15%, transparent 60%);
}
.cta-band > * { position: relative; }

/* ---- Zitat ---- */
.quote::before { font-family: Georgia, serif; }

/* ---- Footer ---- */
.site-footer {
  background: linear-gradient(180deg, #EEF3F9, #E7EEF6);
  border-top: 0;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--ink) 70%);
}
.footer-grid h4 { font-family: var(--font-text); font-weight: 650; font-size: .72rem; letter-spacing: .16em; color: var(--muted); }
.site-footer a { transition: color .15s var(--ease); }

/* ---- Einblendung beim Scrollen: weicher ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition-duration: .8s !important; }
}

/* Im Druck bleibt alles wie bisher: keine Ringe, keine Schatten */
@media print {
  .hero::before, .page-hero::before, .cta-band::before, .pillar::after, .hero-shot::before { display: none !important; }
  body { font-size: 11pt; }
}

/* ==========================================================================
   32 · Redesign-Bausteine (Redesign 27.09.2026, Teil 2)
   Zusaetzliche Layouts, die nur wirken, wenn die Klasse im HTML steht:
   .hero--bleed (Startseite), .hero--stage und .name-band (DuoSonic-Ueberblick),
   .editorial (Startseite, Saeulen), .figure-wide. Ohne diese Klassen wirkt nur
   Abschnitt 31.
   ========================================================================== */

/* ---- Hero mit randlosem Foto (Startseite) ---- */
@media (min-width: 901px) {
  .hero--bleed { padding-block: clamp(5rem, 3rem + 7vw, 9rem); min-height: min(88vh, 760px); display: flex; align-items: center; }
  .hero--bleed > .wrap { position: static; width: min(100% - 2.5rem, var(--wrap)); }
  .hero--bleed .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero--bleed .hero-grid > div:first-child { position: relative; z-index: 2; padding-right: 2rem; }
  .hero--bleed .hero-shot {
    position: absolute; z-index: 1; top: 0; bottom: 0; right: 0;
    width: 50%; animation: none;
  }
  .hero--bleed .hero-shot::before { display: none; }
  .hero--bleed .hero-shot picture, .hero--bleed .hero-shot img {
    width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .hero--bleed .hero-shot picture { display: block; height: 100%; }
  .hero--bleed .hero-shot img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.6) 36%, rgba(0,0,0,.9) 52%, #000 64%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.6) 36%, rgba(0,0,0,.9) 52%, #000 64%);
  }
  .hero--bleed .hero-shot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(22, 7, 58, .45), transparent 28%);
  }
  .hero--bleed::before { right: auto; left: -520px; opacity: .6; }
}

/* ---- Produkt-Buehne: Geraet mittig, Schallringe dahinter (DuoSonic) ---- */
.hero--stage { text-align: center; padding-bottom: 0; }
.hero--stage .hero-grid { grid-template-columns: 1fr; gap: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); }
.hero--stage .hero-grid > div:first-child { max-width: 50rem; margin-inline: auto; }
.hero--stage .eyebrow { justify-content: center; }
.hero--stage .lead { margin-inline: auto; max-width: 40rem; }
.hero--stage::before {
  right: auto; left: 50%; top: auto; bottom: -560px; transform: translateX(-50%);
  width: 1300px; height: 1300px;
}
.hero--stage .hero-shot { max-width: 820px; margin-inline: auto; margin-bottom: -1px; }
.hero--stage .hero-shot::before { inset: 20% 10% -10%; }
.hero--stage .hero-shot img {
  border-radius: 28px 28px 0 0; border-bottom: 0;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .04), 0 -10px 80px rgba(20, 195, 236, .18);
}

/* ---- Redaktionelles Raster: Kopf links, Inhalte rechts ---- */
@media (min-width: 981px) {
  .editorial { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 2rem + 4vw, 6rem); align-items: start; }
  .editorial > .section-head { position: sticky; top: 130px; margin-bottom: 0; }
}
.editorial .grid.g-3 { grid-template-columns: 1fr; gap: 0; }
.editorial .pillar {
  display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1.6rem;
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 2.2rem 0;
}
.editorial .pillar:last-child { border-bottom: 1px solid var(--line); }
.editorial .pillar:hover { transform: none; box-shadow: none; }
.editorial .pillar::after { display: none; }
.editorial .pillar > * { grid-column: 2; }
.editorial .pillar .pillar-no {
  grid-column: 1; grid-row: 1 / span 4; align-self: start;
  display: block; justify-content: flex-start;
  width: auto; height: auto; min-width: 0; padding: 0; margin: 0;
  background: none; color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan-deep);
  font-size: 3.2rem; line-height: 1; letter-spacing: -.02em; font-weight: 800;
}
.editorial .pillar h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); }
.editorial .pillar > p { font-size: 1.02rem; max-width: 36rem; }
@media (max-width: 560px) {
  .editorial .pillar { grid-template-columns: 1fr; }
  .editorial .pillar > *, .editorial .pillar .pillar-no { grid-column: 1; grid-row: auto; }
  .editorial .pillar .pillar-no { font-size: 2.4rem; margin-bottom: .8rem; }
}

/* ---- "Duo. Sonic." als dunkles Typo-Band ---- */
.name-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 420px at 100% 100%, rgba(20, 195, 236, .22), transparent 65%),
    linear-gradient(160deg, #1F0B4D, #13053A);
  color: #C3CDE6;
}
.name-band::before {
  content: ""; position: absolute; pointer-events: none;
  width: 1000px; height: 1000px; right: -380px; bottom: -520px;
  background: var(--rings);
  -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0 20%, transparent 62%);
}
.name-band > * { position: relative; }
.name-band .eyebrow { color: var(--cyan); }
.name-band h2 {
  font-size: clamp(3.2rem, 1.8rem + 6vw, 7rem); letter-spacing: -.045em; line-height: .95;
  background: linear-gradient(90deg, #fff 0%, #fff 45%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em;
}
.name-band .card-flat {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none; padding: 2rem 2rem 2.1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.name-band .card-flat h3 { color: #fff; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.name-band .card-flat p { color: #B4C0DA; font-size: 1rem; }
.name-band .card-flat strong { color: var(--cyan); }

/* ---- Grosses Illustrationsbild: randloser, mit weichem Rahmen ---- */
.figure-wide .shot { box-shadow: var(--sh-lg); border: 0; }

@media print {
  .hero--bleed .hero-shot, .hero--stage::before, .name-band::before { position: static !important; }
  .name-band { background: none; color: inherit; }
  .name-band h2 { color: var(--ink); background: none; }
}

/* ==========================================================================
   33 · Wirkung & Conversion (27.09.2026)
   Kleine Effekte, die den Blick auf das Ziel der Seite lenken: den
   Demotermin (Praxen). Alles respektiert "Bewegung reduzieren" im
   Betriebssystem; ohne JavaScript bleibt die Seite vollstaendig sichtbar.
   ========================================================================== */

/* ---- Schallimpuls: Ringe, die sich langsam ausbreiten ----
   Das Motiv der Marke: Schall, der sich ausbreitet. Sitzt hinter dem Geraet
   auf der DuoSonic-Seite und in den Kontakt-Baendern.                        */
@keyframes schallimpuls {
  0%   { transform: translate(-50%, -50%) scale(.35); opacity: 0; }
  15%  { opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}
.hero--stage .hero-shot::after,
.cta-band::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 55%; width: 120%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 195, 236, .55);
  box-shadow: 0 0 0 26px rgba(20, 195, 236, .05), 0 0 0 54px rgba(20, 195, 236, .03);
  transform: translate(-50%, -50%) scale(.35); opacity: 0;
}
.cta-band::after { z-index: 0; left: 88%; top: 50%; width: 520px; }
@media (prefers-reduced-motion: no-preference) {
  .hero--stage .hero-shot::after { animation: schallimpuls 4.8s cubic-bezier(.2, .6, .3, 1) infinite; }
  .cta-band::after { animation: schallimpuls 5.6s cubic-bezier(.2, .6, .3, 1) 1s infinite; }
}

/* Dunkle Inhaltsabschnitte (z. B. Wirkprinzip auf anwendung.html) bekommen
   dasselbe Ringmotiv wie der Kopfbereich. */
.bg-ink { position: relative; overflow: hidden; }
.bg-ink::before {
  content: ""; position: absolute; pointer-events: none;
  width: 900px; height: 900px; left: -380px; bottom: -460px;
  background: var(--rings);
  -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0 20%, transparent 62%);
}
.bg-ink > * { position: relative; }

/* ---- Handlungsaufforderung: Pfeil im Hauptbutton ----
   Ein kleiner Pfeil macht aus dem Button eine Richtung. Nur bei den grossen
   Buttons; der kleine im Kopfbereich bleibt ruhig.                         */
a.btn-primary:not(.btn-sm)::after,
button.btn-primary:not(.btn-sm)::after {
  content: "→"; display: inline-block; margin-left: .1rem;
  transition: transform .2s var(--ease);
}
a.btn-primary:not(.btn-sm):hover::after,
button.btn-primary:not(.btn-sm):hover::after { transform: translateX(4px); }

/* ---- Kopfbereich: Schatten erst beim Scrollen ---- */
.site-header { transition: box-shadow .25s var(--ease), background .25s var(--ease); }
.site-header.ist-gescrollt {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(22, 7, 58, .06), 0 10px 30px rgba(22, 7, 58, .07);
}

/* ---- Bilder: sanfter Zoom beim Ueberfahren ---- */
.media-col picture, .product-tile-media picture { display: block; overflow: hidden; border-radius: 24px; }
.media-col img, .product-tile-media img { transition: transform .8s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .media-col:hover img, .product-tile:hover .product-tile-media img { transform: scale(1.03); }
}

/* ---- Einblenden: gestaffelt in Rastern ----
   main.js vergibt .reveal automatisch an Abschnittskoepfe, Karten, Bilder und
   Ablaufschritte und setzt eine kleine Verzoegerung je Position im Raster.  */
.reveal { will-change: opacity, transform; }
.reveal.in { will-change: auto; }

/* ---- Demotermin-Leiste fuer das Handy ----
   Nur in den DuoSonic-Seiten und nur auf schmalen Bildschirmen: Sobald der
   Kopfbereich aus dem Bild gescrollt ist, bleibt der Weg zum Demotermin mit
   dem Daumen erreichbar. Der Button ist eine Kopie des Demotermin-Buttons aus
   dem Kopfbereich (main.js, Abschnitt 4b) — es gibt keinen eigenen Text.  */
.sticky-cta { display: none; }
@media (max-width: 1040px) {
  .sticky-cta {
    display: flex; position: fixed; z-index: 95;
    left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
    transform: translate(-50%, 140%);
    padding: .9rem 1.8rem; font-size: 1rem;
    box-shadow: 0 10px 30px rgba(12, 155, 190, .45), 0 2px 6px rgba(22, 7, 58, .2);
    transition: transform .35s var(--ease);
  }
  .sticky-cta.sichtbar { transform: translate(-50%, 0); }
  .sticky-cta::after { content: "→"; }
  body.hat-sticky-cta .site-footer { padding-bottom: 6rem; }
}
/* Das Einwilligungsbanner hat Vorrang: solange es offen ist, keine Leiste. */
body:has(.cookie-banner:not(.zu)) .sticky-cta { display: none; }

@media print {
  .sticky-cta, .cta-band::after, .hero--stage .hero-shot::after, .bg-ink::before { display: none !important; }
  a.btn-primary::after, button.btn-primary::after { content: none; }
}

/* Produkt-Buehne auf dem Handy linksbuendig: lange zentrierte Absaetze
   lesen sich auf schmalen Bildschirmen schlecht. */
@media (max-width: 640px) {
  .hero--stage { text-align: left; }
  .hero--stage .eyebrow { justify-content: flex-start; }
  .hero--stage .lead { margin-inline: 0; }
}

/* Zulassungsstand als kleine Fussnote im DuoSonic-Hero (seit 28.09.2026, bis
   zur CE-Kennzeichnung — README.md, Abschnitt 0b). */
.zulassung-fussnote { font-size: .78rem; line-height: 1.5; color: #8E9BBB; margin: 1.2rem auto 0; max-width: 40rem; }
@media (max-width: 640px) { .zulassung-fussnote { margin-left: 0; } }

/* Produkt-Buehne (DuoSonic-Ueberblick): Das Foto lief urspruenglich ohne
   Abstand bis an die Unterkante des Heros und wurde dort vom overflow:hidden
   des Abschnitts um einige Pixel abgeschnitten. Deshalb: normaler Abstand
   unten und rundum abgerundete Ecken — das Geraet ist vollstaendig sichtbar. */
.hero--stage { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero--stage .hero-shot { margin-bottom: 0; }
.hero--stage .hero-shot img {
  border-radius: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .04), 0 30px 80px rgba(4, 0, 20, .45), 0 0 80px rgba(20, 195, 236, .15);
}
.hero--stage .hero-shot picture { display: block; }

/* Druck: Alles, was per Einblenden (.reveal) noch unsichtbar ist, weil man nicht
   bis dorthin gescrollt hat, muss im Ausdruck trotzdem erscheinen. Seit dem
   Redesign blendet main.js (3b) fast alle Bausteine so ein. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Die weichen Kartenschatten aus Abschnitt 31 wuerden im PDF als blasser Rand
     um die Stellenanzeige erscheinen. */
  .card, .pillar, .quote, .audience, .partner-card, .form-panel, .spectrum, .job,
  .table-scroll, .shot { box-shadow: none !important; }
}

/* ==========================================================================
   34 · Sprachen: Umschalter DE · EN · ES (seit 30.09.2026)
   Die englische und spanische Fassung liegen in /en/ und /es/ mit denselben
   Dateinamen wie die deutsche. Der Umschalter steht im Kopfbereich jeder
   Seite (README.md, Abschnitt 12).
   ========================================================================== */
.lang-trigger { gap: .38rem; }
.lang-trigger svg { width: 17px; height: 17px; flex: 0 0 auto; }

.submenu--lang { left: auto; right: -.4rem; min-width: 190px; }
.lang-list { list-style: none; margin: 0; padding: 0; }
.lang-list li { margin: 0; }
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .9rem; border-radius: var(--r-md);
  font-size: .95rem; font-weight: 560; color: var(--ink); text-decoration: none;
}
.lang-list a:hover { color: var(--cyan-deep); }
.lang-list a[aria-current] { font-weight: 680; color: var(--cyan-deep); }
.lang-list a[aria-current]::after { content: "✓"; font-size: .9em; }
@media (min-width: 1041px) {
  /* Der Unterstrich aus Abschnitt 31 gehoert nur zur obersten Menueebene */
  .lang-list a::before { content: none; }
}

/* Handy: drei Knoepfe nebeneinander statt einer Liste */
@media (max-width: 1040px) {
  .lang-switch { padding-bottom: .9rem; }
  .lang-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
  .lang-list a {
    min-height: 44px; padding: 0 1.1rem; justify-content: center;
    border: 1.5px solid var(--line); border-radius: 100px; font-size: .98rem;
  }
  .lang-list a[aria-current] { border-color: var(--cyan); background: var(--cyan-pale); color: var(--ink); }
  .lang-list a[aria-current]::after { content: none; }
}

/* --- Kopfbereich passt in allen drei Sprachen in eine Zeile ---
   Englisch und Spanisch sind laenger als Deutsch, und schon die deutsche
   Kopfzeile lief zwischen 1041 und etwa 1200 px Breite rechts ueber den Rand
   (der Demotermin-Knopf war abgeschnitten). Deshalb:
   · kein Zeilenumbruch innerhalb eines Menuepunkts oder Knopfes — sonst wird
     der Kopf hoeher und die dunkle Unterleiste (top: 74px) rutscht darunter;
   · etwas weniger Innenabstand an den Menuepunkten;
   · zwischen 1041 und 1279 px: Haendlerportal nur als Schloss-Symbol (der
     Name bleibt fuer Screenreader und als Tooltip erhalten) und kein
     "Partner werden"-Knopf — der Menuepunkt "Fachhandel" fuehrt auf dieselbe
     Seite. Nachgemessen am 30.09.2026 in DE, EN und ES.                     */
@media (min-width: 1041px) {
  .site-header .wrap { gap: 1rem; }
  .nav { gap: .1rem; }
  .nav a, .nav-trigger, .header-cta .btn { white-space: nowrap; }
  .nav > a:not(.btn), .nav-trigger { padding-inline: .55rem; }
  .nav > a:not(.btn)::after, .nav-trigger::before { left: .55rem; right: .55rem; }
  .header-cta { margin-left: .45rem; }
  .header-cta .btn-sm { padding-inline: 1rem; }
}
@media (min-width: 1041px) and (max-width: 1279px) {
  .nav .portal-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav .portal-link svg { width: 17px; height: 17px; }
  .header-cta .btn-ghost { display: none; }
}

/* Ausgeschriebene Internetadressen im Fliesstext (z. B. ec.europa.eu/consumers/odr/
   im Impressum) duerfen umbrechen — sonst ragen sie auf 320 px breiten Handys
   ueber den Rand. Betraf alle drei Sprachen; nachgemessen am 30.09.2026. */
main p a[href^="http"], main li a[href^="http"] { overflow-wrap: anywhere; }

/* ==========================================================================
   33 · Heller Seitenkopf (Entwurf 18.10.2026)
   Der oberste Abschnitt jeder Seite war bisher eine dunkle Indigo-Flaeche:
   .hero (Startseite, DuoSonic-Ueberblick) und .page-hero (alle Unterseiten,
   alle Sprachen). Er ist jetzt hell mit zartem Cyan-Schimmer, Schrift dunkel.
   Inhalte und Aufbau bleiben unveraendert. Andere dunkle Flaechen weiter
   unten (.cta-band, .bg-ink, .name-band) und die Unternavigation bleiben dunkel.
   ========================================================================== */
.hero, .page-hero {
  background:
    radial-gradient(760px 520px at 82% 30%, rgba(20, 195, 236, .20), transparent 64%),
    radial-gradient(900px 640px at 0% 100%, rgba(58, 36, 112, .07), transparent 62%),
    linear-gradient(170deg, #FFFFFF 0%, #F2FAFD 55%, #E6F6FC 100%);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.page-hero {
  background:
    radial-gradient(700px 380px at 90% 0%, rgba(20, 195, 236, .18), transparent 65%),
    linear-gradient(170deg, #FFFFFF 0%, #F2FAFD 60%, #E8F7FC 100%);
}
.hero::after { display: none; }                 /* Koernung wirkt auf Hell schmutzig */
.hero::before, .page-hero::before { opacity: .55; } /* Schallringe zurueckhaltender */
.hero h1, .page-hero h1 { color: var(--ink); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--cyan-deep); }
.page-hero .eyebrow a:hover { color: var(--ink); }
/* Claim in dunklerem Cyan: #0A86A8 hat auf Weiss gut 4:1 (grosse Schrift braucht 3:1) */
.hero .hero-claim, .page-hero .hero-claim { color: #0A86A8; }
.hero .lead, .page-hero .lead { color: var(--muted); }
/* Textlinks im Kopf (z. B. Telefonnummer auf kontakt.html) tragen im HTML
   style="color:#fff" — auf hellem Grund wieder dunkel */
.hero p:not(.eyebrow) a:not(.btn), .page-hero p:not(.eyebrow) a:not(.btn) { color: var(--ink) !important; }

/* Ghost-Button wieder in der Variante fuer hellen Grund */
.hero .btn-ghost, .page-hero .btn-ghost {
  border-color: rgba(34, 11, 83, .24);
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
}
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--ink); background: #fff; }

.hero .badge, .page-hero .badge { background: #fff; color: var(--ink); border-color: var(--line); }
.hero-badges .badge { background: none; color: var(--muted); }
.hero-badges .badge::before { border-color: var(--cyan-deep); }
.zulassung-fussnote { color: var(--muted); }

/* Fotos im Kopf: heller Schatten statt tiefschwarzem */
.hero .hero-shot img {
  border: 1px solid var(--line);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), var(--sh-lg);
}
.hero .hero-shot::before { background: radial-gradient(closest-side, rgba(20, 195, 236, .28), transparent); }
.hero--stage .hero-shot img {
  border: 1px solid var(--line);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), var(--sh-lg), 0 0 80px rgba(20, 195, 236, .15);
}

@media (min-width: 901px) {
  /* Startseite, randloses Foto rechts: Verlauf laeuft ins Helle aus;
     unten statt des dunklen Schleiers ein heller */
  .hero--bleed .hero-shot img { border: 0; box-shadow: none; }
  .hero--bleed .hero-shot::after {
    background: linear-gradient(0deg, rgba(230, 246, 252, .55), transparent 22%);
  }
}