/* ==========================================================================
   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;

  /* 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-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;
}

/* --- 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; }

  /* 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 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 h3 { color: var(--muted); }
.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: .5rem; margin-top: 2rem; }
.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); }

/* ---------- 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-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 ---------- */
.site-footer { background: var(--ink-deep); color: #97A3C2; padding-block: 3.5rem 2rem; font-size: .93rem; }
.site-footer a { color: #C6CFE6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); }
.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: #fff; 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 rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; justify-content: space-between;
  font-size: .85rem; color: #7C89AA;
}
.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; }