:root {
  --ci-blue: #0c189b;
  --ci-blue-dark: #06153d;
  --ci-blue-deep: #04102f;
  --ci-orange: #f19d1d;
  --ci-yellow: #d8dc00;
  --ci-white: #ffffff;
  --ci-dark: #111827;

  --bg: var(--ci-blue-deep);
  --bg-dark: var(--ci-blue-dark);
  --surface: #0b2a76;
  --surface-soft: #102f87;
  --text: var(--ci-white);
  --text-muted: #d3d8f5;
  --accent: var(--ci-orange);
  --accent-strong: #ffb347;
  --accent-alt: #ffd15d;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, var(--ci-blue-dark) 0%, var(--ci-blue-deep) 100%);
  color: var(--text);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7, 26, 168, 0.96) 0%, rgba(4, 16, 47, 0.92) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.95), rgba(255, 217, 93, 0.3), rgba(255, 152, 0, 0.55));
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  min-height: 72px;
  position: relative;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    flex-shrink: 0;
  }

  .site-header .brand-logo-icon {
  width: 56px;
  height: 56px;
  display: block;

  /* ganz wichtig */
  padding: 0;
  object-fit: cover;
  object-position: center center;

  border-radius: 999px;
  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(241, 157, 29, 0.28);

  filter:
    brightness(1.08)
    contrast(1.28)
    saturate(1.45);
}

  .site-header .brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    font-size: 1.15rem;
  }

  .site-header .brand-wordmark-main {
    color: #ffffff;
  }

  .site-header .brand-wordmark-accent {
    color: var(--ci-orange);
}

.brand-logo {
  width: 180px;
  max-height: 54px;
  object-fit: contain;
  display: block;
}

.brand-text {
  display: none;
}

/* Mobile-Nav-UX-Fix: Das neue Trigger-Markup (.nav-toggle-icon/
   .nav-toggle-label, siehe Regeln weiter unten) besteht ebenfalls aus
   <span>-Kindern von .nav-toggle. Die alten ".nav-toggle span"-Regeln
   (Typselektor, greift auf JEDEN Span-Nachkommen unabhaengig von seiner
   Klasse) wuerden dadurch weiterhin zutreffen und das neue Markup mit
   display:block/width:2rem/height:0.18rem ueberschreiben - deshalb hier
   entfernt (nicht nur "toter Code", sondern ein echter Konflikt). Der
   reine Button-Reset (display/border/background/… ohne Typselektor)
   bleibt unten unveraendert bestehen. */
.menu-toggle,
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.45rem;
  color: var(--text);
  flex-shrink: 0;
}

.site-nav,
.main-nav {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.site-nav ul,
.main-nav ul {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a,
.main-nav a {
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.site-nav a:hover,
.main-nav a:hover,
.site-nav a.active,
.main-nav a.active {
  color: var(--accent);
}


.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text);
  flex-shrink: 0;
}

/* =========================================================
   MOBILE-NAV-TRIGGER: "Menü" / "Schließen" (UX-Fix)
   Ursache/Ausgangslage: Der bisherige Trigger bestand nur aus drei
   <span>-Balken ohne Text - fuer die Zielgruppe zu wenig eindeutig
   (Problem 1). Zusaetzlich ergab die Live-Vermessung der bisherigen
   Open-Transforms (rotate(45deg) translateY(0.8rem) bzw. rotate(-45deg)
   translateY(-0.8rem)) einen grossen Pfeil/Chevron statt eines X: Bei
   dieser Funktionsreihenfolge wird zuerst verschoben und danach um den
   urspruenglichen (nicht den neuen) Mittelpunkt gedreht, wodurch beide
   Balken nicht exakt zu einem X kreuzen, sondern nur an einer Spitze
   zusammentreffen.
   Fix: statt die Balken per CSS-Transform zu verformen, zeigt der Button
   jetzt zwei feste Icon-/Text-Paare (Hamburger+"Menü" bzw. X+"Schließen"),
   die per .open-Klasse ein-/ausgeblendet werden - keine Transform-Mathe,
   keine Animation der Icons noetig. main.js togglet weiterhin nur die
   Klasse "open" auf .nav-toggle/.site-nav und aria-expanded (siehe
   main.js, PROTECTED, hierfuer unveraendert) - das reicht bereits aus,
   um Icon UND Text hier per CSS umzuschalten.
   Kein aria-label mehr am Button: der sichtbare Text ("Menü"/"Schließen")
   ist dadurch zugleich der Accessible Name (WCAG 2.5.3 Label-in-Name) -
   Screenreader lesen immer exakt das vor, was auch sichtbar ist, ohne
   dass main.js den Text dynamisch nachziehen muesste. */
.nav-toggle {
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(241, 157, 29, 0.14);
  border-color: rgba(241, 157, 29, 0.45);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 2px;
}

.nav-toggle-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-toggle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-toggle-icon-close,
.nav-toggle.open .nav-toggle-icon-menu {
  display: none;
}

.nav-toggle.open .nav-toggle-icon-close {
  display: block;
}

.nav-toggle-label {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-toggle-label-close,
.nav-toggle.open .nav-toggle-label-menu {
  display: none;
}

.nav-toggle.open .nav-toggle-label-close {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle {
    transition: none;
  }
}

.site-nav {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.site-nav ul {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--accent);
}

.section {
  padding: 4.5rem 0;
}

.section-light {
  background: #071a35;
}

.section-dark {
  background: #021127;
}

.hero {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: center;
}

.hero-copy {
  max-width: 540px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 4vw, 4rem);
  margin: 0;
  line-height: 1.02;
}

.hero p {
  margin: 1.5rem 0 2rem;
  max-width: 44rem;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 1rem 1.8rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(135deg, var(--ci-orange), #ffb845);
  color: var(--ci-dark);
  box-shadow: 0 18px 36px rgba(255, 152, 0, 0.22);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: linear-gradient(135deg, #e57600, #ffc06c);
  transform: translateY(-1px);
}

.button-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}


.button-large {
  min-width: 240px;
}

.hero-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 2rem;
  box-shadow: var(--shadow);
}

.card-highlights {
  display: grid;
  gap: 1.2rem;
}

.card-highlights h3 {
  margin: 0 0 0.5rem;
}

.card-highlights p {
  margin: 0;
  color: var(--text-muted);
}

.card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.card-stats div {
  background: rgba(255, 255, 255, 0.06);
  padding: 1rem;
  border-radius: 20px;
}

.card-stats strong {
  display: block;
  font-size: 1.65rem;
  margin-bottom: 0.35rem;
}

.section-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.section-intro h2 {
  margin: 1rem 0 0.75rem;
  font-size: clamp(2.2rem, 3vw, 3rem);
}

.section-intro p {
  margin: 0;
  color: var(--text-muted);
}

.feature-grid,
.benefits-grid,
.testimonials-grid,
.offer-grid,
.comparison-grid,
.stats-grid,
.form-grid,
.values-grid,
.contact-grid {
  display: grid;
  gap: 1.5rem;
}

.feature-grid,
.offer-grid,
.comparison-grid,
.benefits-grid,
.testimonials-grid,
.stats-grid,
.values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-grid,
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
}

.offer-card,
.comparison-card,
.feature-card,
.benefit-card,
.testimonial-card,
.process-card,
.process-step,
.cta-banner,
.footer-grid > div,
.form-card,
.highlight-card,
.map-placeholder,
.values-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 2rem;
}

.offer-card h3,
.comparison-card h3,
.feature-card h3,
.benefit-card h3,
.testimonial-card h3,
.values-card h3,
.highlight-card h3 {
  margin-top: 0;
}

.offer-card p,
.comparison-card p,
.feature-card p,
.benefit-card p,
.testimonial-card p,
.values-card p,
.highlight-card p {
  color: var(--text-muted);
}

.comparison-card {
  display: grid;
  gap: 1rem;
}

.comparison-card span {
  display: inline-flex;
  padding: 0.35rem 0.8rem;
  background: rgba(255, 152, 0, 0.14);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.9rem;
  width: fit-content;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-card {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

.form-card > h2 {
  margin-top: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.form-card input,
.form-card select,
.form-card textarea,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 1rem 1.1rem;
  margin-top: 0.75rem;
}

.form-field label {
  display: block;
  font-weight: 600;
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-row,
.checkbox-field {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.checkbox-field input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.form-success {
  margin-top: 1.2rem;
  padding: 1.25rem 1.5rem;
  border-radius: 22px;
  background: rgba(45, 125, 210, 0.16);
  border: 1px solid rgba(55, 179, 255, 0.22);
  color: #d3f7ff;
}

.plan-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.plan-toggle button {
  flex: 1;
  min-width: 10rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.plan-toggle button.active {
  background: rgba(255, 152, 0, 0.18);
  border-color: rgba(255, 152, 0, 0.36);
  color: var(--accent);
}

.map-placeholder {
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
}

.map-placeholder::before {
  content: "Kartenplatzhalter";
  font-weight: 700;
  letter-spacing: 0.08em;
}

.values-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.values-card {
  min-height: 210px;
}

.highlight-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.highlight-card strong {
  font-size: 2.1rem;
  display: block;
}

.page-footer-note {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Page Header */
.page-header {
  background: linear-gradient(135deg, #021a35 0%, #031a38 100%);
  padding: 4rem 0;
  text-align: center;
}

.page-header h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.page-header p {
  color: var(--text-muted);
  margin: 0;
}

/* B2B Components */
.badge-group {
  display: grid;
  gap: 1.2rem;
}

.badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
}

.badge strong {
  display: block;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.badge p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Service Cards */
.services-grid,
.branches-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.service-card,
.branch-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-card h3,
.branch-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.service-card p,
.branch-card p {
  color: var(--text-muted);
  margin: 0;
  flex-grow: 1;
}

.button-small {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

/* Split Content */
.split-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.split-content.reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}

.split-content.reverse > * {
  direction: ltr;
}

.highlight-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2rem;
}

.highlight-box h3 {
  margin-top: 0;
  font-size: 1.3rem;
}

.highlight-box ul {
  margin: 1rem 0 0;
  padding-left: 1.5rem;
}

.highlight-box li {
  margin-bottom: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Notice Box */
.notice {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.22);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
}

.notice h3 {
  margin-top: 0;
  color: var(--accent);
}

.notice p {
  color: var(--text-muted);
  margin: 0;
}

/* Checkbox Group */
.checkbox-group {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

.checkbox-group input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Optional Text */
.optional {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: normal;
}

/* Disclaimer */
.disclaimer {
  font-size: 0.9rem;
  margin-top: 1rem;
}

@media (max-width: 980px) {
  .form-grid,
  .values-grid,
  .comparison-grid,
  .contact-grid,
  .split-content,
  .split-content.reverse {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .branches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* row statt column: der bisherige Trigger stapelte 3 Balken
       untereinander (Hamburger); der neue zeigt Icon + Text
       nebeneinander (siehe .nav-toggle-icon/.nav-toggle-label,
       Zeile ~276). */
    flex-direction: row;
  }
.site-header .brand-logo-icon {
  width: 44px;
  height: 44px;
  display: block;

  padding: 0;
  object-fit: cover;
  object-position: center center;

  border-radius: 999px;
  background: #ffffff;

  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.40),
    0 6px 18px rgba(0, 0, 0, 0.22);

  filter:
    brightness(1.08)
    contrast(1.28)
    saturate(1.45);
}
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(3, 26, 56, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .site-nav.open {
    display: flex;
    max-height: 500px;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .site-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .site-nav a {
    display: block;
    padding: 1rem;
    padding-left: 2rem;
  }

  .site-header .brand {
    padding: 0;
    border-radius: 0;
  }

  

  .site-header .brand-wordmark {
    font-size: 1rem;
  }

  .brand-logo {
    width: 135px;
    max-height: 44px;
    object-fit: contain;
  }

  .header-inner {
    padding: 0.65rem 0;
    min-height: 68px;
  }

  .hero-grid,
  .footer-grid,
  .feature-grid,
  .offer-grid,
  .comparison-grid,
  .benefits-grid,
  .testimonials-grid,
  .form-grid,
  .values-grid,
  .contact-grid,
  .split-content,
  .split-content.reverse,
  .services-grid,
  .branches-grid {
    grid-template-columns: 1fr;
  }

  .form-card {
    position: static;
    top: auto;
  }

  .button {
    width: 100%;
  }

  .button-small {
    width: 100%;
  }

  .page-header {
    padding: 2.5rem 0;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: 2.4rem;
  }

  .cta-banner {
    flex-direction: column;
    align-items: stretch;
  }
}
/* =========================================================
   PROFESSIONAL MEGA DROPDOWN
   Für Leistungen / Branchen / Tarifprüfung
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  position: relative;
}

.nav-item {
  position: relative;
}

.has-dropdown {
  display: inline-flex;
  align-items: center;
}

/* Dropdown-Grundbox */
.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);

  width: min(860px, calc(100vw - 48px));
  padding: 26px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  background:
  radial-gradient(circle at top left, rgba(241, 157, 29, 0.12), transparent 32%),
  linear-gradient(135deg, rgba(8, 24, 92, 0.995), rgba(3, 13, 42, 0.995));
backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(241, 157, 29, 0.38);
  border-radius: 24px;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;

  z-index: 999;
  overflow: visible;
}

/* Kleiner Pfeil oben */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;

  width: 18px;
  height: 18px;

  background: rgba(8, 24, 92, 0.98);
  border-left: 1px solid rgba(241, 157, 29, 0.25);
  border-top: 1px solid rgba(241, 157, 29, 0.25);

  transform: translateX(-50%) rotate(45deg);
  border-radius: 4px 0 0 0;
}

/* Dropdown anzeigen */
.has-dropdown:hover .mega-menu,
.has-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Spalten */
.mega-column {
  padding: 16px;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.mega-column h3 {
  margin: 0 0 13px;
  color: var(--ci-orange);

  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Links im Dropdown */
.mega-column a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 11px;
  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.88);
  border-radius: 12px;

  font-size: 0.94rem;
  line-height: 1.35;
  text-decoration: none;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.mega-column a::after {
  content: "›";
  color: rgba(241, 157, 29, 0.72);
  font-weight: 900;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.mega-column a:hover {
  color: #ffffff;
  background: rgba(241, 157, 29, 0.13);
  transform: translateX(3px);
}

.mega-column a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* CTA-Link im Dropdown */
.mega-column .mega-cta,
.mega-cta {
  margin-top: 12px;
  padding: 11px 13px;

  color: #111827 !important;
  background: linear-gradient(135deg, var(--ci-orange), #ffbf56);

  font-weight: 900;
  border-radius: 999px;
  justify-content: center;
  text-align: center;

  box-shadow: 0 12px 26px rgba(241, 157, 29, 0.22);
}

.mega-column .mega-cta::after,
.mega-cta::after {
  display: none;
}

.mega-column .mega-cta:hover,
.mega-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff9f1f, #ffd07a);
}

/* Kleinere Dropdown-Varianten */
.mega-menu-small,
.mega-menu-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(660px, calc(100vw - 48px));
}

.mega-menu-compact {
  width: min(600px, calc(100vw - 48px));
}

/* Aktiver Hover-Strich unter Menüpunkt */
.has-dropdown > .nav-link {
  position: relative;
}

.has-dropdown:hover > .nav-link::after,
.has-dropdown:focus-within > .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;

  height: 2px;
  background: var(--ci-orange);
  border-radius: 999px;
}

/* Mobile: Dropdown im normalen Menü verstecken, damit nichts kaputtgeht */
@media (max-width: 760px) {
  .has-dropdown {
    display: block;
  }

  .mega-menu {
    display: none;
  }
}

/* =========================================================
   KONTAKT-MEGA-MENÜ (PHASE 2.0, ueberarbeitet)
   Nutzt bewusst die bestehende .mega-menu/.has-dropdown-Architektur
   (Hover + :focus-within, gleiche Oeffnungslogik wie Tarifpruefung/
   Leistungen/Branchen) statt eines neuen Navigationssystems. Die
   fruehere Zwei-Karten-Optik (nebeneinander, viel Leerraum) wurde
   durch zwei kompakte, untereinander liegende "Kontakt-Bars" ersetzt,
   die sich bei Hover/Fokus weich in der Hoehe ausklappen (max-height +
   opacity, kein Scale/Bounce/Glow). Datenquelle weiterhin ausschliesslich
   kontakt.html #ansprechpartner (David/Matthias) - keine neuen Personen/
   Rollen/Nummern erfunden. Die Telefon-Reveal-Buttons nutzen bewusst
   dieselben Klassen (.sales-phone/.phone-reveal-btn/.phone-revealed) wie
   kontakt.html, damit die bestehende, PROTECTED main.js-Logik (Tracking +
   Anzeige) ohne jede main.js-Aenderung automatisch funktioniert. Nur auf
   der Startseite eingebunden (Auftragsscope - andere Seiten unangetastet). */
.mega-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 48px));
}

/* Es gibt eine spezifischere, spaeter im Dokument stehende Regel
   ".nav-item.has-dropdown .mega-menu" (Desktop-Breakpoint ab 981px),
   die fuer ALLE Mega-Menues eine feste width:min(860px, ...) erzwingt
   (3 Klassen Spezifitaet, schlaegt ".mega-menu-contact" allein). Fix
   ausschliesslich fuer die Kontakt-Variante, damit Tarifpruefung/
   Leistungen/Branchen unveraendert bei 860px bleiben.

   Dieselbe 981px-Regel setzt zusaetzlich "overflow: hidden" (dort zum
   Verhindern von Rechts-Overflow am Bildschirmrand gedacht). Das
   schneidet bei >=981px zwei Pseudo-Elemente ab, die bewusst ausserhalb
   der Box liegen: den Pfeil (::before, top:-9px) und die Hover-Bruecke
   aus dem PHASE-2.x-Fix weiter unten (::after, top:-12px), die genau
   die Luecke zwischen "Kontakt" und dem Dropdown hoverbar haelt. Ohne
   sichtbare/hoverbare Bruecke faellt der Cursor beim langsamen
   Hinunterbewegen wieder in die Luecke und das Menu schliesst vorzeitig
   (der eigentlich gemeldete Bug). Fix: overflow fuer die Kontakt-
   Variante wie im Grundzustand auf visible zuruecksetzen - diese Regel
   ist mit 4 Klassen spezifischer als die 981px-Regel (3 Klassen) und
   gewinnt daher unabhaengig von der Medienquery. Betrifft ausschliesslich
   .mega-menu-contact, alle anderen Dropdowns behalten ihr bisheriges
   overflow:hidden unveraendert. */
.nav-item.has-dropdown .mega-menu.mega-menu-contact {
  width: min(360px, calc(100vw - 48px));
  overflow: visible;
}

/* PHASE 2.x-Fix (Dropdown schliesst beim Hineinfahren): Ursache war
   die 12px-Luecke zwischen dem "Kontakt"-Link und dem Dropdown
   (".mega-menu { top: calc(100% + 12px) }"). Diese Luecke gehoert zu
   KEINEM Element - sobald der Cursor sie durchquert, wird
   ".has-dropdown:hover" sofort false, wodurch "pointer-events" auf dem
   Dropdown (nicht animiert, kein transition-Eintrag dafuer) SOFORT auf
   "none" zurueckspringt, waehrend Opacity/Visibility noch 180ms lang
   ausblenden. Das Dropdown ist dadurch fuer den Bruchteil der
   Cursor-Bewegung durch die Luecke unsichtbar UND nicht mehr hoverbar -
   der Nutzer muss die Luecke schneller durchqueren, als es die
   Ausblend-Transition erlaubt.
   Fix: unsichtbare Hover-Bruecke (::after) fuellt exakt diese 12px
   Luecke, MIT eigenem, unbedingtem pointer-events:auto (unabhaengig vom
   Hover-Status des Dropdowns) - dadurch bleibt ".has-dropdown:hover"
   beim Durchqueren der Luecke durchgehend wahr. Nur fuer die Kontakt-
   Variante ueber ::after (::before ist bereits der Pfeil), Tarifpruefung/
   Leistungen/Branchen bleiben unveraendert. */
.mega-menu-contact::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto;
}

.contact-bar {
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease;
}

.contact-bar:hover,
.contact-bar:focus-within {
  border-color: rgba(241, 157, 29, 0.3);
}

/* PHASE 2.0-Korrektur: .contact-bar-head ist ein <button>, kein <div>
   mehr - reine <span>-Elemente waren fuer Tastaturnutzer NIE fokussierbar,
   wodurch :focus-within auf .contact-bar nie ausgeloest werden konnte
   (die Bar liess sich also per Tastatur ueberhaupt nicht aufklappen).
   Button-Grundstile zurueckgesetzt, damit die Optik identisch bleibt.
   PHASE 2.x: Avatar ist jetzt fest Teil des Kopfbereichs (bereits im
   geschlossenen Zustand sichtbar), Name/Rolle stehen untereinander
   statt nebeneinander (.contact-bar-headtext). */
.contact-bar-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  /* Ergibt zusammen mit dem 46px-Avatar eine Bar-Hoehe von ~70px,
     innerhalb der empfohlenen 64-76px. */
  padding: 12px 15px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.contact-bar-head:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: -2px;
}

.contact-bar-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(241, 157, 29, 0.35);
}

.contact-bar-headtext {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.contact-bar-name {
  color: var(--ci-white);
  font-size: 0.94rem;
  font-weight: 800;
}

.contact-bar-role {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contact-bar-arrow {
  flex: 0 0 auto;
  color: rgba(241, 157, 29, 0.75);
  font-weight: 900;
  transition: transform 0.22s ease-out;
}

.contact-bar:hover .contact-bar-arrow,
.contact-bar:focus-within .contact-bar-arrow {
  transform: translateX(3px);
}

/* Ausgeklappter Zusatzinhalt: ruhige Hoehen-/Deckkraft-Transition,
   bewusst kein Scale/Bounce/Glow. max-height-Wert liegt bewusst ueber
   dem tatsaechlichen Bedarf (Inhalt ist unterschiedlich lang), da der
   Inhalt durch overflow:hidden am Ruhezustand ohnehin exakt geclippt wird. */
.contact-bar-expand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-height: 0;
  padding: 0 15px;
  opacity: 0;
  transition:
    max-height 0.26s ease-out,
    opacity 0.22s ease-out,
    padding 0.26s ease-out;
}

.contact-bar:hover .contact-bar-expand,
.contact-bar:focus-within .contact-bar-expand {
  max-height: 220px;
  padding: 0 15px 15px;
  opacity: 1;
}

/* Kein zweites Foto mehr im ausgeklappten Bereich - der Avatar sitzt
   jetzt fest im Kopfbereich (auch geschlossen sichtbar), eine Wieder-
   holung waere ueberladen. */
.contact-bar-info {
  width: 100%;
  min-width: 0;
}

.contact-bar-info p {
  margin: 0 0 0.55rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.76rem;
  line-height: 1.4;
}

.mega-menu-contact .sales-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mega-menu-contact .phone-reveal-btn,
.mega-menu-contact .phone-revealed .button {
  padding: 0.5rem 0.75rem;
  font-size: 0.76rem;
}

.mega-menu-contact .phone-revealed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mega-menu-contact .phone-revealed strong {
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .contact-bar-expand,
  .contact-bar-arrow {
    transition: none;
  }
}

@media (max-width: 760px) {
  .mega-menu-contact {
    display: none;
  }
}

/* =========================================================
   FLOATING ACTION BUTTONS (PHASE 2.0, Update: sitegweit)
   Vollstaendig isolierte Komponente (eigener .floating-* Namespace,
   keine main.js-Beteiligung). Reihenfolge von oben nach unten: Telefon
   (tel:-Link), WhatsApp (wa.me-Link), Nach-oben (Anchor auf "#top").
   Identisches Markup jetzt auf allen oeffentlichen Seiten eingebunden
   (nicht nur Startseite) - diese eine, gemeinsame CSS-Definition deckt
   damit automatisch alle Seiten ab, ohne Seiten-spezifische Regeln. */
.floating-actions {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8, 24, 92, 0.97), rgba(3, 13, 42, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ci-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.floating-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-btn:hover,
.floating-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(241, 157, 29, 0.5);
  background: linear-gradient(135deg, rgba(12, 30, 110, 0.98), rgba(4, 16, 50, 0.98));
}

.floating-btn:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .floating-actions {
    right: 1rem;
    bottom: 1rem;
    gap: 0.6rem;
  }

  .floating-btn {
    width: 46px;
    height: 46px;
  }

  .floating-btn svg {
    width: 19px;
    height: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-btn {
    transition: none;
  }
}
/* Footer Upgrade */
.site-footer {
  padding: 4rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.site-footer .footer-grid > div {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.footer-logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.footer-logo-main {
  color: #ffffff;
}

.footer-logo-accent {
  color: var(--ci-orange);
}

.site-footer h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #ffffff;
}

.site-footer p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.65rem;
}

.site-footer a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--ci-orange);
}

.footer-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
  background: var(--ci-orange);
  color: var(--ci-dark);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-bottom p {
  margin: 0;
}

.footer-legal-links {
  display: flex;
  gap: 1.25rem;
}

@media (max-width: 760px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .footer-legal-links {
    flex-wrap: wrap;
  }
}
/* Footer Fine Polish */
.site-footer {
  background:
    radial-gradient(circle at 15% 0%, rgba(12, 24, 155, 0.18), transparent 32%),
    linear-gradient(180deg, #04102f 0%, #020b1d 100%);
}

.footer-brand {
  max-width: 360px;
}

.footer-logo {
  margin-bottom: 1rem;
}

.site-footer .disclaimer {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
  line-height: 1.55;
}

.site-footer h3 {
  position: relative;
  padding-bottom: 0.65rem;
  margin-bottom: 1.1rem;
}

.site-footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--ci-orange);
}

.site-footer li {
  margin-bottom: 0.75rem;
}

.site-footer a {
  font-size: 0.95rem;
}

.site-footer ul a {
  display: inline-flex;
  transform: translateX(0);
  transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer ul a:hover {
  transform: translateX(3px);
}

.footer-socials {
  margin-top: 1.35rem;
}

.social-link {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.social-link:hover {
  box-shadow: 0 10px 24px rgba(241, 157, 29, 0.18);
}

.footer-bottom {
  opacity: 0.9;
}

.footer-legal-links a {
  font-size: 0.88rem;
}
/* Energy Funnel */
.funnel-section {
  min-height: calc(100vh - 74px);
}

.funnel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 2rem;
  align-items: start;
}

.funnel-card,
.funnel-summary {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  padding: 2rem;
  box-shadow: var(--shadow);
}

.funnel-progress-top {
  margin-bottom: 2rem;
}

#funnelStepLabel {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
}

.funnel-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.funnel-progress-bar {
  width: 16.66%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ci-orange), #ffb845);
  transition: width 0.25s ease;
}

.funnel-content h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.05;
}

.funnel-content p {
  color: var(--text-muted);
  max-width: 680px;
}

.funnel-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.funnel-option {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  border-radius: 22px;
  padding: 1.15rem 1.25rem;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.funnel-option:hover,
.funnel-option.selected {
  border-color: rgba(241, 157, 29, 0.65);
  background: rgba(241, 157, 29, 0.13);
  transform: translateY(-2px);
}

.funnel-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.funnel-form input,
.funnel-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  padding: 1rem 1.1rem;
}

.funnel-form textarea {
  min-height: 120px;
  resize: vertical;
}

.funnel-nav {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.funnel-nav .button {
  width: auto;
}

.funnel-summary {
  position: sticky;
  top: 110px;
}

.funnel-summary h2 {
  margin-top: 0;
}

.summary-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.summary-item {
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.summary-item strong {
  display: block;
  color: var(--ci-orange);
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

@media (max-width: 900px) {
  .funnel-layout {
    grid-template-columns: 1fr;
  }

  .funnel-summary {
    position: static;
  }
}

@media (max-width: 620px) {
  .funnel-options {
    grid-template-columns: 1fr;
  }

  .funnel-card,
  .funnel-summary {
    padding: 1.4rem;
    border-radius: 24px;
  }

  .funnel-nav {
    flex-direction: column;
  }

  .funnel-nav .button {
    width: 100%;
  }
}
.funnel-nav[hidden] {
  display: none !important;
}
.funnel-progress-top[hidden] {
  display: none !important;
}
.funnel-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.funnel-option {
  width: 100%;
  min-height: 86px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.funnel-option strong {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}

.funnel-option span {
  display: block;
  color: #d7e3f1;
  font-size: 14px;
  line-height: 1.4;
}

.funnel-option.is-selected {
  border-color: #f7a51f;
  box-shadow: 0 0 0 3px rgba(247, 165, 31, 0.18);
  background: rgba(247, 165, 31, 0.12);
}

.funnel-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.funnel-field {
  display: grid;
  gap: 8px;
}

.funnel-field.full {
  grid-column: 1 / -1;
}

.funnel-field label {
  font-weight: 800;
  color: #ffffff;
}

.funnel-field input,
.funnel-field select,
.funnel-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f263f;
  color: #ffffff;
  border-radius: 14px;
  padding: 15px 16px;
  font: inherit;
  outline: none;
}

.funnel-field textarea {
  min-height: 110px;
  resize: vertical;
}

.funnel-field input:focus,
.funnel-field select:focus,
.funnel-field textarea:focus {
  border-color: #f7a51f;
  box-shadow: 0 0 0 3px rgba(247, 165, 31, 0.14);
}

.funnel-error {
  display: none;
  margin-top: 18px;
  border: 1px solid rgba(255, 88, 88, 0.45);
  background: rgba(255, 88, 88, 0.1);
  color: #ffd7d7;
  border-radius: 14px;
  padding: 13px 15px;
}

.funnel-error.is-visible {
  display: block;
}

.funnel-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  color: #d7e3f1;
  line-height: 1.5;
}

.funnel-check input {
  margin-top: 4px;
}

.funnel-success {
  border: 1px solid rgba(80, 220, 140, 0.45);
  background: rgba(80, 220, 140, 0.1);
  border-radius: 18px;
  padding: 20px;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .funnel-options,
  .funnel-fields {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   LOGO ICON FINAL
   Neues vorbereitetes Header-Icon wird sauber angezeigt
   ========================================================= */

.site-header .brand {
  gap: 0.75rem;
}

.site-header .brand-logo-icon {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(241, 157, 29, 0.20);
}

.site-header .brand {
  gap: 0.75rem;
}

.site-header .brand-logo-icon {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(241, 157, 29, 0.20);
}
/* =========================================================
   LOGO ICON FINAL
   Neues vorbereitetes Header-Icon wird sauber angezeigt
   Schrift bleibt unverändert
   ========================================================= */

.site-header .brand {
  gap: 0.75rem;
}

.site-header .brand-logo-icon {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(241, 157, 29, 0.20);
}

@media (max-width: 992px) {
  .site-header .brand-logo-icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  .site-header .brand-logo-icon {
    width: 42px;
    height: 42px;
  }
}
/* =========================================================
   LOGO ICON FINAL
   Neues vorbereitetes Header-Icon wird sauber angezeigt
   Schrift bleibt unverändert
   ========================================================= */

.site-header .brand {
  gap: 0.75rem;
}

.site-header .brand-logo-icon {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(241, 157, 29, 0.20);
}

@media (max-width: 992px) {
  .site-header .brand-logo-icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  .site-header .brand-logo-icon {
    width: 42px;
    height: 42px;
  }
}
/* =========================================================
   STARTSEITE HERO – GOLDEN MASTER
   Zentrierte Komposition: Text ist der visuelle Fokus, das
   Globus-/Energievideo dient nur noch als sehr dezenter,
   atmosphaerischer Hintergrund (kein zweiter visueller Block
   mehr rechts). Bewusst weiterhin ein eigener Namespace
   (.hero-home*), unabhaengig vom geteilten .hero, das auf
   anderen Seiten verwendet wird.
   ========================================================= */

.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Um ca. die Zielhoehe der neuen .provider-strip (~150px) reduziert,
     damit Hero + Anbieterleiste zusammen nicht wesentlich mehr Platz
     einnehmen als der Hero zuvor allein - nutzt den bisher technisch
     entstandenen Leerraum, statt die Seite zu verlaengern. */
  min-height: calc(100vh - 224px);
  display: flex;
  align-items: center;
  padding: 7rem 0;
  background: #04102f;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  right: -10%;
  bottom: 0;
  left: auto;
  z-index: -3;

  width: 120%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
  /* PHASE 2.0: von 0.5 auf 0.58 angehoben - Teil des Blitz-Sichtbarkeits-
     Fixes (siehe .hero-bg-overlay weiter unten). Bewusst moderat, damit
     der Text weiterhin klar dominiert. */
  opacity: 0.58;
  /* Gezielter Kontrast-/Helligkeitsboost statt pauschal "heller":
     Kontinente und das Energie-Motiv sollen deutlicher erkennbar
     werden, ohne dass das Video insgesamt flach/ueberbelichtet wirkt. */
  filter: contrast(1.16) brightness(1.1) saturate(1.08);
}

/* PHASE 2.0: Bewegung fuer Nutzer mit prefers-reduced-motion: reduce
   deaktivieren (das Video hat autoplay/loop und laesst sich ohne
   main.js anzufassen nicht per JS pausieren - stattdessen wird es fuer
   diese Nutzer ausgeblendet, .hero-home hat ohnehin einen dunklen
   Basishintergrund als Ersatz). Betrifft ausschliesslich die
   Bewegung/das Video, nicht die normale Darstellung. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    display: none;
  }
}

/* PHASE 2.2: Overlay als schmale, hohe Ellipse statt grossflaechigem
   Radial-Verlauf. Direkt hinter der Textspalte bleibt es kraeftig
   abgedunkelt (Lesbarkeit), an den Raendern links/rechts der Textspalte
   wird es deutlich heller - dort darf der Globus jetzt klar sichtbar
   durchscheinen. Das ist der "lokale Text-Overlay"-Effekt statt einer
   sichtbaren Box. */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* PHASE 2.0: Blitz-Sichtbarkeits-Fix. Der zentrale Radial-Gradient
     (direkt hinter dem Text) war mit 0.93/0.85 so dunkel, dass der
     Energie-Blitz aus dem Video dort praktisch vollstaendig verschwand
     - per Screenshot-Vergleich mit deaktiviertem Overlay verifiziert.
     Werte lokal auf 0.72/0.6/0.36/0.26 abgesenkt: der Blitz scheint nun
     als gezielter, gedeckter Akzent durch, der Text bleibt (weiterhin
     weiss/fett auf dunklem Navy-Grund) klar lesbar. Der untere
     linear-gradient-Uebergang zur naechsten Section bleibt unveraendert. */
  background:
    radial-gradient(
      52% 72% at 50% 40%,
      rgba(4, 16, 47, 0.72) 0%,
      rgba(4, 16, 47, 0.6) 45%,
      rgba(4, 16, 47, 0.36) 78%,
      rgba(4, 16, 47, 0.26) 100%
    ),
    radial-gradient(
      38% 32% at 80% 18%,
      rgba(255, 205, 130, 0.05) 0%,
      rgba(255, 205, 130, 0) 70%
    ),
    linear-gradient(
      180deg,
      rgba(4, 16, 47, 0.4) 0%,
      rgba(4, 16, 47, 0.1) 20%,
      rgba(4, 16, 47, 0.16) 55%,
      rgba(4, 16, 47, 0.9) 100%
    );
}

.hero-home::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(4, 16, 47, 0.96));
  pointer-events: none;
}

.hero-home-grid {
  display: flex;
  justify-content: center;
}

.hero-home-copy {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.hero-home-copy h1 {
  margin: 0;
  font-size: clamp(2.6rem, 4.2vw, 4.15rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

/* Es gibt eine geteilte Regel ".hero-copy h1 { hyphens:auto;
   overflow-wrap:anywhere }" (siehe "EYEBROW"-Bereich weiter unten
   in dieser Datei, fuer andere Hero-Varianten gedacht), die bei
   schmalen Breiten Woerter wie "Gewerbegas" haesslich mitten im
   Wort trennt. Diese spezifischere Selektor-Kombination (beide
   Klassen des Elements) gewinnt, ohne die geteilte Regel selbst
   anzufassen - betrifft ausschliesslich diese eine Ueberschrift. */
.hero-copy.hero-home-copy h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero-lead {
  max-width: 560px;
  margin: 1.35rem auto 2.1rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* Sekundaere Hero-Aktion: bewusst ein reiner Textlink, keine
   zweite gleich starke Buttonflaeche. Eigene, seitenspezifische
   Klasse – .button-secondary bleibt fuer andere Seiten unveraendert. */
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.6rem;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: color 0.2s ease;
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus-visible {
  color: var(--ci-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-cta-secondary:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 2px;
}

/* Ruhige Trust-Zeile statt vier einzelner Pills. */
.hero-trust-line {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero-trust-line .dot {
  margin: 0 0.5em;
  color: rgba(255, 255, 255, 0.32);
}

/* PHASE 2.0: Symmetrie-Fix (Hero-Achse).
   Ursache des "leicht schiefen" Subtexts/der Trust-Zeile: die geteilte
   Regel ".hero p" (siehe Basis-Hero-Block weiter oben in dieser Datei,
   fuer den alten Zwei-Spalten-Hero anderer Seiten gedacht) hat wegen
   hoeherer Spezifitaet (Klasse + Element vs. nur Klasse) ".hero-lead"
   und ".hero-trust-line" ueberschrieben: max-width:44rem (=704px) statt
   560px/kein Limit, und margin ohne "auto" links/rechts. Beide <p>
   wurden dadurch links-buendig in einer 704px schmalen Box zentriert
   statt auf der tatsaechlichen Hero-Achse (Rating/Eyebrow/H1/CTA).
   Fix ausschliesslich fuer den Startseiten-Hero - ".hero p" bleibt fuer
   die anderen Seiten (die den alten Zwei-Spalten-Hero nutzen) unveraendert. */
body[data-page="index"] .hero-home-copy .hero-lead {
  max-width: 560px;
  margin: 1.35rem auto 2.1rem;
}

body[data-page="index"] .hero-home-copy .hero-trust-line {
  max-width: none;
  margin: 1.5rem auto 0;
}

/* .hero-actions ist eine geteilte Klasse (auch auf kontakt.html,
   tarifpruefung.html u.a.). Die Basisregel bleibt unangetastet;
   die Zentrierung gilt ausschliesslich fuer den Startseiten-Hero. */
body[data-page="index"] .hero-home-copy .hero-actions {
  justify-content: center;
}

@media (max-width: 980px) {
  .hero-home {
    min-height: auto;
    padding: 5.5rem 0;
  }

  .hero-bg-video {
    object-position: 62% center;
    opacity: 0.4;
  }

  .hero-home-copy {
    max-width: 640px;
  }
}

@media (max-width: 620px) {
  .hero-home {
    padding: 4.5rem 0;
  }

  .hero-bg-video {
    object-position: 65% center;
    opacity: 0.3;
  }

  .hero-home-copy h1 {
    font-size: clamp(2.1rem, 7.6vw, 2.75rem);
  }

  /* Der feste Zeilenumbruch aus der Desktop-Komposition passt bei
     sehr schmalen Breiten nicht mehr verlustfrei auf eine Zeile.
     Ausblenden statt erzwingen - der Browser bricht dann natuerlich
     an Wortgrenzen um (verhindert die haessliche Silbentrennung aus
     der geteilten .hero-copy h1-Regel weiter oben in dieser Datei). */
  .hero-h1-break {
    display: none;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .hero-trust-line {
    font-size: 0.82rem;
  }

  .hero-cta-secondary {
    padding: 0.7rem 0.5rem;
  }
}
/* =========================================================
   SCROLL REVEAL ANIMATIONEN
   Elemente erscheinen beim Scrollen hochwertig und dezent
   ========================================================= */

.fade-in,
.feature-card,
.process-card,
.benefit-card,
.highlight-box,
.cta-banner {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
  will-change: opacity, transform;
}

.fade-in.is-visible,
.feature-card.is-visible,
.process-card.is-visible,
.benefit-card.is-visible,
.highlight-box.is-visible,
.cta-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Kleine Staffelung für Karten */
.feature-card:nth-child(2),
.process-card:nth-child(2),
.benefit-card:nth-child(2) {
  transition-delay: 0.08s;
}

.feature-card:nth-child(3),
.process-card:nth-child(3),
.benefit-card:nth-child(3) {
  transition-delay: 0.16s;
}

.benefit-card:nth-child(4) {
  transition-delay: 0.24s;
}

/* Etwas stärkerer Effekt für Highlight-Boxen */
.highlight-box {
  transform: translateY(28px) scale(0.985);
}

.highlight-box.is-visible {
  transform: translateY(0) scale(1);
}

/* Nutzer respektieren, die reduzierte Bewegung eingestellt haben */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .feature-card,
  .process-card,
  .benefit-card,
  .highlight-box,
  .cta-banner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   TARIFF CHECK SECTION
   Angebotsblock für kostenlose Vertragsprüfung
   ========================================================= */

.tariff-check-section {
  position: relative;
  overflow: hidden;
}

.tariff-check-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: rgba(241, 157, 29, 0.10);
  filter: blur(40px);
  pointer-events: none;
}

.tariff-check-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
  gap: 3rem;
  align-items: center;
}

.tariff-check-copy h2 {
  max-width: 760px;
  margin-bottom: 1.2rem;
}

.tariff-check-copy p {
  max-width: 700px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.03rem;
  line-height: 1.75;
}

.tariff-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.tariff-mini-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.tariff-mini-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.52rem 0.72rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);

  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
}

.tariff-mini-trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ci-orange);
}

.tariff-check-card {
  padding: 2rem;
  border-radius: 30px;

  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(8, 24, 92, 0.92), rgba(3, 13, 42, 0.96));

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.tariff-card-header {
  margin-bottom: 1.35rem;
}

.tariff-card-header span {
  display: block;
  margin-bottom: 0.35rem;

  color: var(--ci-orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tariff-card-header strong {
  display: block;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.25;
}

.tariff-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tariff-check-list li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.tariff-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1rem;

  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(241, 157, 29, 0.16);
  color: var(--ci-orange);
  font-size: 0.82rem;
  font-weight: 900;
}

.tariff-check-list strong {
  display: block;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.tariff-check-list span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  font-size: 0.92rem;
}

@media (max-width: 900px) {
  .tariff-check-grid {
    grid-template-columns: 1fr;
  }

  .tariff-check-card {
    padding: 1.55rem;
  }
}
/* =========================================================
   SERVICES OVERVIEW SECTION
   Was wir leisten - moderner Leistungsblock
   ========================================================= */

.services-overview-section {
  position: relative;
  overflow: hidden;
}

.services-overview-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 10%, rgba(241, 157, 29, 0.10), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.045), transparent 32%);
}

.services-overview-section > .container {
  position: relative;
  z-index: 1;
}

.services-intro {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.service-overview-card {
  position: relative;
  min-height: 260px;
  padding: 2rem;
  border-radius: 30px;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));

  border: 1px solid rgba(255, 255, 255, 0.11);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.service-overview-card:hover {
  transform: translateY(-6px);
  border-color: rgba(241, 157, 29, 0.35);
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
}

.service-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 1.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  background: rgba(241, 157, 29, 0.15);
  border: 1px solid rgba(241, 157, 29, 0.28);

  color: var(--ci-orange);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.service-overview-card h3 {
  margin: 0 0 0.85rem;
  color: #ffffff;
  font-size: 1.35rem;
}

.service-overview-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}

.services-overview-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
}

.services-overview-note span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.58rem 0.82rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);

  color: rgba(255, 255, 255, 0.84);
  font-size: 0.86rem;
  font-weight: 800;
}

.services-overview-note span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ci-orange);
  box-shadow: 0 0 12px rgba(241, 157, 29, 0.65);
}

@media (max-width: 900px) {
  .services-overview-grid {
    grid-template-columns: 1fr;
  }

  .service-overview-card {
    min-height: auto;
  }

  .services-overview-note {
    justify-content: flex-start;
  }
}
/* =========================================================
   WAS WIR LEISTEN - HEADLINE FEINSCHLIFF
   Eyebrow stärker, kleiner Erklärungstext entfernt
   ========================================================= */

.services-headline {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.services-headline .services-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.62rem 1rem;
  margin-bottom: 1.35rem;

  border-radius: 999px;

  background: rgba(241, 157, 29, 0.13);
  border: 1px solid rgba(241, 157, 29, 0.34);

  color: var(--ci-orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  box-shadow: 0 0 26px rgba(241, 157, 29, 0.10);
}

.services-headline h2 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   WAS WIR LEISTEN - KARTEN FEINSCHLIFF
   Mehr Tiefe, stärkere Optik, gleiche Inhalte
   ========================================================= */

.services-overview-section {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

.services-overview-grid,
.feature-grid {
  gap: 1.45rem;
}

.service-overview-card,
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 2.15rem;
  border-radius: 30px;

  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.service-overview-card::before,
.feature-card::before {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ci-orange), transparent);
  opacity: 0.75;
}

.service-overview-card::after,
.feature-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(241, 157, 29, 0.08);
  filter: blur(10px);
  pointer-events: none;
}

.service-overview-card h3,
.feature-card h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.32rem;
}

.service-overview-card p,
.feature-card p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}
/* =========================================================
   WAS WIR LEISTEN - INTERAKTIVE KARTENLINKS
   Überschriften klickbar + hochwertiger Hover-Effekt
   ========================================================= */

.service-overview-card h3 a,
.feature-card h3 a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  color: #ffffff;
  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.service-overview-card h3 a::after,
.feature-card h3 a::after {
  content: "→";
  color: var(--ci-orange);
  font-weight: 900;

  opacity: 0;
  transform: translateX(-6px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.service-overview-card:hover,
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(241, 157, 29, 0.42);

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.30),
    0 0 34px rgba(241, 157, 29, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.service-overview-card:hover h3 a,
.feature-card:hover h3 a {
  color: var(--ci-orange);
  transform: translateX(2px);
}

.service-overview-card:hover h3 a::after,
.feature-card:hover h3 a::after {
  opacity: 1;
  transform: translateX(0);
}

.service-overview-card:hover::before,
.feature-card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--ci-orange), rgba(241, 157, 29, 0.25), transparent);
}

.service-overview-card:has(h3 a):hover,
.feature-card:has(h3 a):hover {
  cursor: pointer;
}
/* Ganze Feature-Karte als ein einziger Link */
a.feature-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.feature-card h3 {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

a.feature-card h3::after {
  content: "→";
  color: var(--ci-orange);
  font-weight: 900;
  margin-left: 0.45rem;
  opacity: 0;
  transform: translateX(-6px);
  display: inline-block;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

a.feature-card:hover h3 {
  color: var(--ci-orange);
  transform: translateX(2px);
}

a.feature-card:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

a.feature-card:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 4px;
}
/* =========================================================
   WAS WIR LEISTEN - HOVER RAHMEN / PREMIUM GLOW
   Subtiler Rahmen- und Licht-Effekt beim Hover
   ========================================================= */

.service-overview-card,
.feature-card {
  isolation: isolate;
}

.service-overview-card::before,
.feature-card::before {
  transition:
    opacity 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.service-overview-card:hover::before,
.feature-card:hover::before {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(241, 157, 29, 0.95),
    transparent
  );
  box-shadow: 0 0 22px rgba(241, 157, 29, 0.42);
}

/* dezenter kompletter Rahmen-Glow */
.service-overview-card:hover,
.feature-card:hover {
  border-color: rgba(241, 157, 29, 0.48);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(241, 157, 29, 0.13),
    0 0 0 1px rgba(241, 157, 29, 0.18) inset;
}

/* kleiner Lichtschein, der beim Hover sichtbar wird */
.service-overview-card .card-shine,
.feature-card .card-shine {
  display: none;
}
/* =========================================================
   KONTAKT HERO
   Kontaktseite als Kontakt + Vertrauensseite
   ========================================================= */

.contact-hero .hero-copy h1 {
  max-width: 860px;
}

.contact-trust-card {
  position: relative;
  overflow: hidden;
}

.contact-trust-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.14), transparent 34%);
  pointer-events: none;
}

.contact-trust-card > * {
  position: relative;
  z-index: 1;
}

.contact-trust-card h3 {
  margin: 0.7rem 0 0.8rem;
  color: #ffffff;
  font-size: 1.55rem;
}

.contact-trust-card p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

.contact-trust-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.contact-trust-list span {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.72rem 0.85rem;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);

  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}

.contact-trust-list span::before {
  content: "✓";
  color: var(--ci-orange);
  font-weight: 900;
}

.contact-direct {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.contact-direct a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
}

.contact-direct a:hover {
  color: var(--ci-orange);
}
/* =========================================================
   HEADER NAV FINAL
   Navigation etwas kräftiger und besser lesbar
   ========================================================= */

.site-header .site-nav a {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 650;
font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.site-header .site-nav a:hover {
  color: var(--ci-orange);
  transform: translateY(-1px);
}

body[data-page="index"] .site-header .site-nav a[href="index.html"],
body[data-page="leistungen"] .site-header .site-nav a[href="leistungen.html"],
body[data-page="branchen"] .site-header .site-nav a[href="branchen.html"],
body[data-page="tarifpruefung"] .site-header .site-nav a[href="tarifpruefung.html"],
body[data-page="vertriebspartner"] .site-header .site-nav a[href="vertriebspartner.html"],
body[data-page="kontakt"] .site-header .site-nav a[href="kontakt.html"] {
  color: var(--ci-orange);
  font-weight: 750;
}
/* =========================================================
   SALES TEAM CONTACT CARDS
   Vertriebler-Karten mit Telefonnummer anzeigen
   ========================================================= */

.sales-team-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(241, 157, 29, 0.09), transparent 32%),
    #021127;
}

.sales-team-section > .container {
  position: relative;
  z-index: 1;
}

.sales-team-intro {
  max-width: 820px;
}

.sales-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.sales-card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.5rem;
  align-items: center;

  padding: 1.5rem;
  border-radius: 32px;

  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));

  border: 1px solid rgba(255, 255, 255, 0.11);

  box-shadow:
    0 26px 75px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.sales-card::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ci-orange), transparent);
}

.sales-photo-wrap {
  position: relative;
  width: 190px;
  height: 230px;
  border-radius: 24px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sales-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales-card-content {
  position: relative;
  z-index: 1;
}

.sales-role {
  display: inline-flex;
  margin-bottom: 0.55rem;

  color: var(--ci-orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sales-card h3 {
  margin: 0 0 0.65rem;
  color: #ffffff;
  font-size: 1.65rem;
}

.sales-card p {
  margin: 0 0 1.2rem;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
}

.sales-phone {
  display: grid;
  gap: 0.85rem;
}

.phone-reveal-btn {
  width: fit-content;
}

.phone-revealed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;

  padding: 0.85rem;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.phone-revealed strong {
  color: #ffffff;
  font-size: 1rem;
}

.phone-revealed .button {
  padding: 0.78rem 1.15rem;
}

@media (max-width: 980px) {
  .sales-team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .sales-card {
    grid-template-columns: 1fr;
  }

  .sales-photo-wrap {
    width: 100%;
    height: 280px;
  }

  .phone-reveal-btn {
    width: 100%;
  }

  .phone-revealed .button {
    width: 100%;
  }
}
/* =========================================================
   PHONE REVEAL FIX
   Telefonnummer wirklich erst nach Klick anzeigen
   ========================================================= */

.phone-revealed[hidden] {
  display: none !important;
}
/* =========================================================
   PHONE REVEAL LAYOUT FIX
   Button verschwindet sauber, Nummer erscheint ohne kaputtes Layout
   ========================================================= */

.phone-reveal-btn[hidden] {
  display: none !important;
}

.phone-revealed[hidden] {
  display: none !important;
}

.sales-phone {
  min-height: 64px;
}

.phone-revealed {
  width: 100%;
  margin-top: 0;
}

.sales-card {
  align-items: stretch;
}

.sales-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* =========================================================
   SALES CARD FINAL FIX
   Kein Springen beim Telefonnummer anzeigen
   ========================================================= */

.sales-card {
  align-items: start;
  min-height: 300px;
}

.sales-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 230px;
}

.sales-phone {
  margin-top: auto;
  min-height: 86px;
  display: flex;
  align-items: flex-start;
}

.phone-reveal-btn[hidden],
.phone-revealed[hidden] {
  display: none !important;
}

.phone-revealed {
  width: 100%;
}
/* =========================================================
   SALES CARD NO-JUMP FINAL
   Telefonbereich bleibt immer gleich hoch
   ========================================================= */

.sales-card {
  min-height: 300px;
  align-items: stretch;
}

.sales-card-content {
  display: grid;
  grid-template-rows: auto auto 1fr 92px;
  min-height: 230px;
}

.sales-card-content .sales-role {
  align-self: start;
}

.sales-card-content h3 {
  align-self: start;
}

.sales-card-content p {
  align-self: start;
}

.sales-phone {
  align-self: end;
  min-height: 92px;
  display: flex;
  align-items: center;
}

.phone-reveal-btn {
  min-height: 58px;
}

.phone-revealed {
  width: 100%;
  min-height: 92px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  gap: 0.85rem;
  padding: 0.85rem 1rem;
}

.phone-revealed[hidden],
.phone-reveal-btn[hidden] {
  display: none !important;
}

.phone-revealed strong {
  white-space: nowrap;
}

.phone-revealed .button {
  width: auto;
  white-space: nowrap;
}
/* =========================================================
   SALES PHONE REVEAL COMPACT FINAL
   Telefonnummer-Box kompakter für beide Karten
   ========================================================= */

.sales-phone {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.phone-revealed {
  width: fit-content;
  max-width: 100%;
  min-height: auto;

  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;

  padding: 0.9rem 1rem;
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.phone-revealed strong {
  white-space: nowrap;
  font-size: 1rem;
}

.phone-revealed .button {
  width: auto;
  min-width: 0;
  padding: 0.78rem 1.15rem;
  white-space: nowrap;
}

.phone-revealed[hidden],
.phone-reveal-btn[hidden] {
  display: none !important;
}
/* =========================================================
   CONTACT HERO SIMPLE
   Kontaktseite ohne rechte Erklärungskarte
   ========================================================= */

.contact-hero-simple {
  padding: 6rem 0 5.5rem;
  text-align: center;
}

.contact-hero-simple .container {
  display: flex;
  justify-content: center;
}

.contact-hero-centered {
  max-width: 820px;
  margin: 0 auto;
}

.contact-hero-centered h1 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.contact-hero-centered p {
  max-width: 680px;
  margin: 1.35rem auto 2rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.06rem;
  line-height: 1.7;
}

.contact-hero-actions {
  justify-content: center;
}
/* =========================================================
   CONTACT HERO STRONGER
   Mehr Höhe, stärkeres Orange-Label, professioneller Einstieg
   ========================================================= */

.contact-hero-simple {
  min-height: calc(100vh - 74px);
  padding: 7.5rem 0 6.5rem;
  display: flex;
  align-items: center;
}

.contact-hero-centered .eyebrow {
  padding: 0.65rem 1.05rem;
  margin-bottom: 1.35rem;

  border-radius: 999px;

  background: rgba(241, 157, 29, 0.13);
  border: 1px solid rgba(241, 157, 29, 0.34);

  color: var(--ci-orange);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.16em;

  box-shadow:
    0 0 26px rgba(241, 157, 29, 0.12),
    0 0 0 1px rgba(241, 157, 29, 0.06) inset;
}

.contact-hero-centered h1 {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.contact-hero-centered p {
  max-width: 720px;
  font-size: 1.1rem;
}

.sales-team-section {
  padding-top: 5.5rem;
}
/* Kontakt-Hero Feinschliff */
.contact-hero-centered h1 {
  font-size: clamp(3.4rem, 5.2vw, 5.2rem);
  max-width: 980px;
}
/* =========================================================
   SALES TEAM SECTION POLISH
   Ansprechpartner-Bereich ruhiger und hochwertiger
   ========================================================= */

.sales-team-section {
  padding-top: 5.8rem;
  padding-bottom: 6.5rem;
  background:
    linear-gradient(180deg, rgba(2, 17, 39, 0.96) 0%, #021127 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.sales-team-intro {
  max-width: 760px;
  margin-bottom: 2.8rem;
}

.sales-team-intro .eyebrow {
  padding: 0.52rem 0.9rem;
  border-radius: 999px;
  background: rgba(241, 157, 29, 0.10);
  border: 1px solid rgba(241, 157, 29, 0.26);
  font-weight: 950;
}

.sales-team-intro h2 {
  margin-top: 1.1rem;
  font-size: clamp(2.4rem, 3.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.sales-team-intro p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.74);
}
/* =========================================================
   HEADER HEIGHT FINAL
   Einheitliche Header-Höhe auf allen Seiten
   ========================================================= */

.site-header {
  min-height: 74px;
}

.site-header .header-inner {
  min-height: 74px;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.site-header .brand-logo-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.site-header .brand-wordmark {
  font-size: 1.08rem;
}

.site-header .site-nav ul {
  align-items: center;
}

.site-header .site-nav a {
  line-height: 1;
}
/* =========================================================
   CONTACT HERO HEIGHT FINAL
   Kontakt-Hero hochwertig, aber nicht zu leer
   ========================================================= */

.contact-hero-simple {
  min-height: 72vh;
  padding: 5.8rem 0 5.2rem;
  display: flex;
  align-items: center;
}

.contact-hero-centered {
  transform: translateY(-0.5rem);
}
/* =========================================================
   CONTACT HERO HEIGHT FINAL
   Kontakt-Hero als eigener starker Einstiegsbereich
   ========================================================= */

.contact-hero-simple {
  min-height: calc(100vh - 74px);
  padding: 7.5rem 0 6.5rem;
  display: flex;
  align-items: center;
}

.contact-hero-centered {
  transform: translateY(-0.35rem);
}
/* =========================================================
   CONTACT FORM SINGLE
   Formularbereich fokussiert ohne rechte Zusatzkarten
   ========================================================= */

.contact-form-single {
  max-width: 760px;
  margin: 0 auto;
}

.contact-form-single .form-card {
  position: relative;
  top: auto;
  width: 100%;
}

.contact-form-single .form-card::before {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ci-orange), transparent);
}

.contact-form-single .form-card h2 {
  margin-bottom: 1.5rem;
}
/* =========================================================
   CONTACT SECTION FLOW FINAL
   Kontaktseite ohne verschobenen Balken / ohne Header-Hide
   ========================================================= */

body[data-page="kontakt"] #ansprechpartner,
body[data-page="kontakt"] #kontakt-form {
  background: #021127;
  background-image: none;
  border-top: 0;
}

body[data-page="kontakt"] .sales-team-section {
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

body[data-page="kontakt"] #kontakt-form {
  min-height: calc(100vh - 74px);
  padding-top: 6.5rem;
  padding-bottom: 7rem;
}

body[data-page="kontakt"] #kontakt-form .section-intro {
  margin-bottom: 3.2rem;
}
/* =========================================================
   PHONE REVEAL CTA FINAL
   Telefonnummer-anzeigen-Buttons als echte CTA Buttons
   ========================================================= */

.phone-reveal-btn {
  min-height: 58px;
  padding: 0.95rem 1.55rem;

  color: #111827 !important;
  background: linear-gradient(135deg, var(--ci-orange), #ffbf56) !important;

  border: 0 !important;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: -0.01em;

  box-shadow:
    0 14px 30px rgba(241, 157, 29, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.phone-reveal-btn::before {
  content: "☎";
  margin-right: 0.45rem;
  font-size: 0.95rem;
}

.phone-reveal-btn:hover,
.phone-reveal-btn:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff9f1f, #ffd07a) !important;

  box-shadow:
    0 18px 40px rgba(241, 157, 29, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.phone-reveal-btn:active {
  transform: translateY(0);
}
/* =========================================================
   CONTACT FORM POLISH FINAL
   Kontaktformular professioneller und conversion-stärker
   ========================================================= */

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-form .form-row {
  margin-bottom: 0;
}

.contact-form .form-field label {
  font-weight: 800;
  color: #ffffff;
}

.contact-form .optional {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  font-weight: 600;
}

.contact-form select {
  appearance: none;
  cursor: pointer;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(241, 157, 29, 0.65);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 0 0 4px rgba(241, 157, 29, 0.12);
}

.contact-form textarea {
  min-height: 150px;
}

.checkbox-field a {
  color: var(--ci-orange);
  font-weight: 800;
}

.checkbox-field a:hover {
  text-decoration: underline;
}

.contact-submit-btn {
  width: 100%;
  margin-top: 0.35rem;
  min-height: 58px;
  font-size: 1rem;
}

.form-hint {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  text-align: center;
}

@media (max-width: 760px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   CONTACT SELECT FIX
   Dropdown im Kontaktformular dunkel stylen
   ========================================================= */

.contact-form select {
  width: 100%;
  min-height: 58px;

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)),
    #162338;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;

  padding: 0 3rem 0 1.2rem;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--ci-orange) 50%),
    linear-gradient(135deg, var(--ci-orange) 50%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035));
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 14px) 50%,
    0 0;
  background-size:
    8px 8px,
    8px 8px,
    100% 100%;
  background-repeat: no-repeat;
}

.contact-form select:focus {
  outline: none;
  border-color: rgba(241, 157, 29, 0.75);
  box-shadow: 0 0 0 4px rgba(241, 157, 29, 0.14);
}

/* Dropdown-Optionen soweit vom Browser erlaubt abdunkeln */
.contact-form select option {
  color: #ffffff;
  background: #162338;
  font-weight: 700;
}

.contact-form select option:disabled {
  color: rgba(255, 255, 255, 0.55);
}
/* =========================================================
   CONTACT FORM INTRO FINAL
   Schriftliche Anfrage optisch sauberer
   ========================================================= */

.contact-form-intro {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 3.8rem;
}

.contact-form-intro h2 {
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.08;
}

.contact-form-intro p {
  max-width: 680px;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}
/* =========================================================
   CONTACT FORM EYEBROW FINAL
   "Schriftliche Anfrage" sichtbarer und hochwertiger
   ========================================================= */

.contact-form-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 1.05rem;
  margin-bottom: 1.35rem;

  color: var(--ci-orange);
  background: rgba(241, 157, 29, 0.075);
  border: 1px solid rgba(241, 157, 29, 0.34);
  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;

  box-shadow:
    0 0 24px rgba(241, 157, 29, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}
/* =========================================================
   EYEBROW LABEL UNIFIED FINAL
   Alle goldenen Abschnitts-Labels einheitlich stylen
   ========================================================= */

.eyebrow,
.contact-form-intro .eyebrow,
.sales-team-intro .eyebrow,
.contact-hero-centered .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.35rem;

  padding: 0.58rem 1.12rem;

  color: var(--ci-orange) !important;
  background:
    radial-gradient(circle at top left, rgba(241, 157, 29, 0.16), transparent 55%),
    rgba(241, 157, 29, 0.075) !important;

  border: 1px solid rgba(241, 157, 29, 0.36);
  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;

  box-shadow:
    0 0 24px rgba(241, 157, 29, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}
/* =========================================================
   CONTACT PREFERENCE CONDITIONAL FIELD
   Rückrufzeitraum sauber einblenden
   ========================================================= */

.contact-preference-grid {
  grid-template-columns: 1fr;
}

.contact-preference-grid.callback-visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.callback-time-field[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .contact-preference-grid,
  .contact-preference-grid.callback-visible {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SALES CARD TOP LINE DIRECTION FINAL
   Orange Linien der Ansprechpartner-Karten gespiegelt
   ========================================================= */

.sales-card {
  position: relative;
  overflow: hidden;
}

.sales-team-grid .sales-card::before {
  content: "";
  position: absolute;
  top: 0;

  width: 42%;
  height: 3px;

  background: linear-gradient(90deg, var(--ci-orange), rgba(241, 157, 29, 0));
  border-radius: 999px;

  z-index: 2;
}

.sales-team-grid .sales-card:nth-child(1)::before {
  left: 28px;
  right: auto;
}

.sales-team-grid .sales-card:nth-child(2)::before {
  left: auto;
  right: 28px;

  background: linear-gradient(270deg, var(--ci-orange), rgba(241, 157, 29, 0));
}
/* =========================================================
   CONTACT CALLBACK FIELDS FINAL
   Wunschzeitraum + Wunschuhrzeit sauber einblenden
   ========================================================= */

.contact-preference-grid {
  grid-template-columns: 1fr;
}

.contact-preference-grid.callback-visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.callback-time-field,
.callback-custom-time-field {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.callback-time-field.is-visible,
.callback-custom-time-field.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.callback-time-field[hidden],
.callback-custom-time-field[hidden] {
  display: none !important;
}

.callback-custom-time-field {
  margin-top: -0.15rem;
}

@media (max-width: 760px) {
  .contact-preference-grid,
  .contact-preference-grid.callback-visible {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   CONTACT CALLBACK TIME FINAL
   Wunschzeitraum nur bei Telefon sichtbar
   ========================================================= */

.contact-preference-grid {
  grid-template-columns: 1fr;
}

.contact-preference-grid.callback-visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.callback-time-field {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.callback-time-field.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.callback-time-field[hidden] {
  display: none !important;
}

.callback-custom-time-field {
  display: none !important;
}

@media (max-width: 760px) {
  .contact-preference-grid,
  .contact-preference-grid.callback-visible {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   CONTACT FORM SUCCESS FINAL
   Erfolgsmeldung sauber darstellen
   ========================================================= */

.contact-form .form-success {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.06)),
    rgba(255, 255, 255, 0.045);

  border: 1px solid rgba(34, 197, 94, 0.30);
  border-radius: 18px;

  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
/* =========================================================
   CONTACT FORM HINT FINAL
   Hinweis unter CTA dezenter
   ========================================================= */

.contact-form .form-hint {
  margin-top: 1rem;
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}
/* =========================================================
   CONTACT PAGE EYEBROW FINAL
   Goldene Abschnittslabels etwas hochwertiger
   ========================================================= */

body[data-page="kontakt"] .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 900;
  padding: 0.48rem 1.05rem;
}


/* =========================================================
   TARIFPRUEFUNG FUNNEL - Lead-optimierter Startscreen
   Kompakte Trust-Badges, klarer CTA und Upload-Option.
   ========================================================= */
body[data-page="tarifpruefung"] .funnel-section {
  padding-top: 4rem;
  padding-bottom: 5rem;
  min-height: calc(100vh - 74px);
}

body[data-page="tarifpruefung"] .funnel-layout {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

body[data-page="tarifpruefung"] .funnel-card {
  width: 100%;
  padding: 3rem 3.25rem;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(241, 157, 29, 0.15), transparent 35%),
    linear-gradient(145deg, rgba(23, 44, 70, 0.98), rgba(15, 34, 57, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

body[data-page="tarifpruefung"] .funnel-intro {
  text-align: center;
}

body[data-page="tarifpruefung"] .funnel-eyebrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(241, 157, 29, 0.38);
  background: rgba(241, 157, 29, 0.12);
  color: #ffb02e;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

body[data-page="tarifpruefung"] .funnel-intro h1 {
  max-width: 780px;
  margin: 0 auto 1rem;
  font-size: clamp(2.45rem, 4.4vw, 4.3rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

body[data-page="tarifpruefung"] .funnel-intro-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 auto 1.35rem;
  max-width: 740px;
}

body[data-page="tarifpruefung"] .funnel-intro-benefits span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.45rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(241, 157, 29, 0.35);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

body[data-page="tarifpruefung"] .funnel-lead {
  max-width: 700px;
  margin: 0 auto 1.75rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.72;
}

body[data-page="tarifpruefung"] .funnel-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0;
}

body[data-page="tarifpruefung"] .funnel-start-button {
  min-width: 360px;
  min-height: 66px;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.04rem;
  font-weight: 900;
  box-shadow: 0 20px 44px rgba(241, 157, 29, 0.34);
}

body[data-page="tarifpruefung"] .funnel-start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 52px rgba(241, 157, 29, 0.39);
}

body[data-page="tarifpruefung"] .funnel-upload-button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

body[data-page="tarifpruefung"] .funnel-upload-button:hover {
  transform: translateY(-2px);
  border-color: rgba(241, 157, 29, 0.6);
  background: rgba(241, 157, 29, 0.12);
}

body[data-page="tarifpruefung"] .funnel-microcopy,
body[data-page="tarifpruefung"] .funnel-upload-status {
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
}

body[data-page="tarifpruefung"] .funnel-upload-status.is-success {
  color: #b9ffd2;
  font-weight: 800;
}

body[data-page="tarifpruefung"] .funnel-upload-status.is-error {
  color: #ffd0d0;
  font-weight: 800;
}

@media (max-width: 760px) {
  body[data-page="tarifpruefung"] .funnel-section {
    padding-top: 2.4rem;
    padding-bottom: 3.5rem;
  }

  body[data-page="tarifpruefung"] .funnel-card {
    padding: 2.2rem 1.35rem;
    border-radius: 24px;
  }

  body[data-page="tarifpruefung"] .funnel-intro h1 {
    font-size: 2.4rem;
  }

  body[data-page="tarifpruefung"] .funnel-lead {
    font-size: 1rem;
  }

  body[data-page="tarifpruefung"] .funnel-intro-benefits {
    gap: 0.45rem;
  }

  body[data-page="tarifpruefung"] .funnel-start-button,
  body[data-page="tarifpruefung"] .funnel-upload-button {
    width: 100%;
    min-width: 0;
  }
}
/* Tarifprüfung: Conversion Funnel Start */
body[data-page="tarifpruefung"] .funnel-section {
  padding-top: 4.2rem;
  padding-bottom: 5rem;
}

body[data-page="tarifpruefung"] .funnel-layout {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

body[data-page="tarifpruefung"] .funnel-card {
  width: 100%;
  padding: 3.1rem 3.4rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(241, 157, 29, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(20, 42, 68, 0.98), rgba(15, 34, 57, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

body[data-page="tarifpruefung"] .funnel-intro {
  text-align: center;
}

body[data-page="tarifpruefung"] .funnel-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(241, 157, 29, 0.1);
  border: 1px solid rgba(241, 157, 29, 0.42);
  color: #ffb02e;
  font-weight: 900;
  font-size: 0.88rem;
}

body[data-page="tarifpruefung"] .funnel-intro h1 {
  max-width: 760px;
  margin: 0 auto 1rem;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

body[data-page="tarifpruefung"] .funnel-intro-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 auto 1.55rem;
}

body[data-page="tarifpruefung"] .funnel-intro-benefits span {
  border: 1px solid rgba(241, 157, 29, 0.38);
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.48rem 0.78rem;
  font-weight: 850;
  font-size: 0.86rem;
  line-height: 1;
}

body[data-page="tarifpruefung"] .funnel-lead {
  max-width: 720px;
  margin: 0 auto 1.85rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.75;
}

body[data-page="tarifpruefung"] .funnel-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

body[data-page="tarifpruefung"] .funnel-upload-primary,
body[data-page="tarifpruefung"] .funnel-start-button {
  min-height: 64px;
  border-radius: 999px;
  justify-content: center;
  font-size: 1.02rem;
  font-weight: 900;
  cursor: pointer;
}

body[data-page="tarifpruefung"] .funnel-upload-primary {
  min-width: 330px;
  box-shadow: 0 20px 44px rgba(241, 157, 29, 0.34);
}

body[data-page="tarifpruefung"] .funnel-start-button {
  min-width: 250px;
}

body[data-page="tarifpruefung"] .funnel-upload-primary:hover,
body[data-page="tarifpruefung"] .funnel-start-button:hover {
  transform: translateY(-2px);
}

body[data-page="tarifpruefung"] .funnel-upload-status {
  min-height: 1.25rem;
  margin: 1rem auto 0;
  color: #ffb02e;
  font-weight: 800;
  font-size: 0.92rem;
}

body[data-page="tarifpruefung"] .funnel-upload-status.is-error {
  color: #ff7474;
}

body[data-page="tarifpruefung"] .funnel-microcopy {
  margin: 0.5rem auto 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  body[data-page="tarifpruefung"] .funnel-section {
    padding-top: 2.4rem;
  }

  body[data-page="tarifpruefung"] .funnel-card {
    padding: 2.2rem 1.35rem;
    border-radius: 22px;
  }

  body[data-page="tarifpruefung"] .funnel-intro h1 {
    font-size: 2.45rem;
  }

  body[data-page="tarifpruefung"] .funnel-cta-row {
    flex-direction: column;
  }

  body[data-page="tarifpruefung"] .funnel-upload-primary,
  body[data-page="tarifpruefung"] .funnel-start-button {
    width: 100%;
    min-width: 0;
  }
}
/* Funnel: kompaktere Antwortkarten ohne Ablenkung */
body[data-page="tarifpruefung"] .funnel-option {
  min-height: 72px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-page="tarifpruefung"] .funnel-option strong {
  font-size: 1.05rem;
}

body[data-page="tarifpruefung"] .funnel-options {
  gap: 0.8rem;
}
/* Funnel: kompakte Antwortkarten */
body[data-page="tarifpruefung"] .funnel-option {
  min-height: 74px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-page="tarifpruefung"] .funnel-option strong {
  font-size: 1.08rem;
}

body[data-page="tarifpruefung"] .funnel-option span {
  display: none;
}
.funnel-location-hint {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.funnel-location-hint.is-success {
  color: #6ee7b7;
}

.funnel-location-hint.is-error {
  color: #fca5a5;
}
.funnel-location-hint {
  min-height: 1.35rem;
  margin-top: 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.68);
}

.funnel-location-hint.is-loading {
  color: rgba(255, 255, 255, 0.72);
}

.funnel-location-hint.is-success {
  color: #6ee7b7;
}

.funnel-location-hint.is-error {
  color: #fca5a5;
}

.funnel-field input.is-valid {
  border-color: rgba(110, 231, 183, 0.95);
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35);
}

.funnel-field input.is-invalid {
  border-color: rgba(248, 113, 113, 0.95);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}
.funnel-postal-suggestions {
  margin-top: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(7, 22, 42, 0.96);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.funnel-postal-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.funnel-postal-suggestion:last-child {
  border-bottom: 0;
}

.funnel-postal-suggestion:hover {
  background: rgba(255, 176, 38, 0.12);
}

.funnel-postal-suggestion strong {
  color: #ffb026;
  font-weight: 900;
}

.funnel-postal-suggestion span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}
.funnel-field {
  position: relative;
}

.funnel-postal-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 50;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(7, 22, 42, 0.98);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.funnel-postal-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.funnel-postal-suggestion:last-child {
  border-bottom: 0;
}

.funnel-postal-suggestion:hover {
  background: rgba(255, 176, 38, 0.12);
}

.funnel-postal-suggestion strong {
  color: #ffb026;
  font-weight: 900;
}

.funnel-postal-suggestion span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}
.review-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  flex-wrap: wrap;
}

.review-intro {
  margin: 0;
  flex: 1;
  min-width: 260px;
  color: rgba(255, 255, 255, 0.86);
}

.review-edit-button {
  border: 1px solid rgba(255, 176, 38, 0.5);
  background: rgba(255, 176, 38, 0.08);
  color: #ffb026;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

.review-edit-button:hover {
  background: rgba(255, 176, 38, 0.16);
  border-color: rgba(255, 176, 38, 0.9);
  transform: translateY(-1px);
}

.review-edit-button:focus-visible {
  outline: 2px solid rgba(255, 176, 38, 0.9);
  outline-offset: 2px;
}
.summary-edit-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.summary-edit-item label {
  color: #ffb026;
  font-size: 0.78rem;
  font-weight: 900;
}

.summary-edit-item input,
.summary-edit-item textarea,
.summary-edit-item select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.summary-edit-item select {
  cursor: pointer;
}

.summary-edit-item select option {
  color: #0b1f35;
}

.summary-edit-item textarea {
  min-height: 70px;
  resize: vertical;
}

.summary-edit-item:focus-within {
  border-color: rgba(255, 176, 38, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 176, 38, 0.22);
}
/* REVIEW PLZ AUTOCOMPLETE FIX */
.summary-edit-item,
.review-postal-field,
.funnel-field {
  position: relative;
  overflow: visible;
}

.summary-list {
  overflow: visible;
}

.review-postal-field .funnel-postal-suggestions,
.funnel-field .funnel-postal-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #071f38;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

.funnel-postal-suggestion {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  text-align: left;
}

.funnel-postal-suggestion:last-child {
  border-bottom: 0;
}

.funnel-postal-suggestion:hover {
  background: rgba(241, 157, 29, 0.12);
}

.funnel-postal-suggestion strong {
  color: #f5a623;
  font-weight: 900;
}

.funnel-postal-suggestion span {
  color: #d9e7f7;
  font-size: 0.92rem;
}
.review-document-field input[type="file"] {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px dashed rgba(241, 157, 29, 0.5);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  cursor: pointer;
}

.review-document-current {
  margin-top: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(8, 25, 43, 0.72);
  color: #ffffff;
  font-weight: 750;
}
.funnel-final-success {
  max-width: 620px;
  margin: 4rem auto 3rem;
  padding: 3rem 2.4rem;
  border-radius: 28px;
  border: 1px solid rgba(46, 204, 113, 0.45);
  background:
    radial-gradient(circle at top, rgba(46, 204, 113, 0.18), transparent 42%),
    rgba(10, 39, 61, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  text-align: center;
}

.funnel-final-success-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.16);
  border: 1px solid rgba(46, 204, 113, 0.65);
  color: #2ecc71;
  font-size: 2.4rem;
  font-weight: 900;
}

.funnel-final-success h1 {
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
}

.funnel-final-success p {
  max-width: 500px;
  margin: 0 auto;
  color: #e8f3ff;
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 650;
}

@media (max-width: 720px) {
  .funnel-final-success {
    margin: 2rem auto;
    padding: 2.2rem 1.4rem;
    border-radius: 22px;
  }

  .funnel-final-success-icon {
    width: 62px;
    height: 62px;
    font-size: 2rem;
  }
}
/* Partner-Reiter vorübergehend ausblenden */
.site-nav a[href="partner.html"] {
  display: none !important;
}
.site-nav a[href="/partner.html"] {
  display: none !important;
}
/* Partner-Reiter vorübergehend ausblenden */
.site-nav a[href="vertriebspartner.html"],
.site-nav a[href="/vertriebspartner.html"],
.site-nav a[href="partner.html"],
.site-nav a[href="/partner.html"] {
  display: none !important;
}
.contact-form select {
  display: block;
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background-color: rgba(15, 29, 49, 0.92);
  color: #f8fafc;
  padding: 0.95rem 2.8rem 0.95rem 1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.contact-form select option {
  background-color: #172236;
  color: #f8fafc;
}
.contact-form .form-field:has(select) {
  position: relative;
}

.contact-form .form-field:has(select)::after {
  content: "▾";
  position: absolute;
  right: 1rem;
  bottom: 1.05rem;
  color: #f6a51a;
  font-size: 0.85rem;
  pointer-events: none;
}
.contact-preference-grid {
  margin-top: 1rem;
  margin-bottom: 0.95rem;
}

.checkbox-field {
  margin-top: 0.35rem;
  margin-bottom: 0.8rem;
}

.form-required-note {
  margin: 0 0 1.15rem;
  color: rgba(232, 238, 247, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
}

.contact-submit-btn {
  margin-top: 0.15rem;
}
.callback-time-field.is-custom-time select {
  display: none !important;
}

.callback-time-field.is-custom-time input {
  display: block !important;
  width: 100%;
}

.callback-time-field.is-custom-time::after {
  display: none !important;
  content: none !important;
}

.callback-time-field input[hidden],
.callback-time-field select[hidden] {
  display: none !important;
}
.contact-form .form-field {
  position: relative;
}

.contact-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 3rem !important;
}

.contact-form .form-field:has(select)::after {
  content: "▾";
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  color: #f6a51a;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
  z-index: 2;
}

.contact-form .form-field:has(select:focus)::after {
  color: #f6a51a;
}

.contact-form .form-field:has(select[hidden])::after {
  display: none;
}
.checkbox-field {
  margin-top: 1.1rem;
  margin-bottom: 0.85rem;
}

.checkbox-field label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.65rem;
  width: auto !important;
  max-width: 100%;
  cursor: pointer;
  line-height: 1.35;
}

.checkbox-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px;
  accent-color: #f6a51a;
  cursor: pointer;
}

.checkbox-field a {
  display: inline;
}
/* Temporär versteckte Links/Elemente - bleiben im Code erhalten */
.is-hidden-temp {
  display: none !important;
}
/* Footer Social Icons */
.footer-socials .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-socials .social-link svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}
/* Cookie / Consent Banner */
.cookie-consent {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 1.2rem;
  background: rgba(3, 12, 24, 0.58);
  backdrop-filter: blur(8px);
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent__box {
  width: min(760px, 100%);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(20, 45, 75, 0.98), rgba(8, 25, 47, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.cookie-consent__content {
  padding: clamp(1.3rem, 3vw, 2rem);
}

.cookie-consent__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--ci-orange);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cookie-consent h2 {
  margin: 0 0 0.8rem;
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.cookie-consent p {
  margin: 0;
  color: rgba(226, 235, 247, 0.78);
  line-height: 1.65;
}

.cookie-consent__options {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

/* Consent-Fix (siehe docs/LAUNCH_V1_P0_TRACKING_SECURITY_REMEDIATION.md):
   Ohne diese Regel gewinnt die Klassenregel .cookie-consent__options oben
   gegen das native [hidden]-Attribut, das main.js beim ersten Bannerbesuch
   setzt (main.js, Cookie-Banner-Markup) - die "Analyse & Marketing"-Option
   war dadurch schon vor Klick auf "Einstellungen" sichtbar. Ein
   Attribut-Selektor auf derselben Klasse hat hoehere Spezifitaet und stellt
   das beabsichtigte Verhalten wieder her, ohne die Klassenregel selbst
   anzufassen. */
.cookie-consent__options[hidden] {
  display: none;
}

.cookie-consent__option {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.95rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ffffff;
  cursor: pointer;
}

.cookie-consent__option input {
  margin-top: 0.2rem;
  accent-color: var(--ci-orange);
}

.cookie-consent__option strong {
  display: block;
  margin-bottom: 0.2rem;
}

.cookie-consent__option small {
  display: block;
  color: rgba(226, 235, 247, 0.68);
  line-height: 1.45;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.4rem;
}

.cookie-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.15rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cookie-btn:hover {
  transform: translateY(-1px);
}

.cookie-btn-primary {
  color: #071426;
  background: linear-gradient(135deg, var(--ci-orange), #ffd16d);
  box-shadow: 0 14px 34px rgba(241, 157, 29, 0.24);
}

.cookie-btn-secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cookie-consent__links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem !important;
  font-size: 0.92rem;
}

.cookie-consent__links a {
  color: var(--ci-orange);
  font-weight: 800;
  text-decoration: none;
}

.cookie-consent__links a:hover {
  text-decoration: underline;
}

@media (max-width: 620px) {
  .cookie-consent {
    align-items: end;
    padding: 0.75rem;
  }

  .cookie-consent__actions {
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
  }
}
.benefits-grid .benefit-card-cta {
  grid-column: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.benefits-grid .benefit-card-cta .button {
  width: fit-content;
  margin-top: 1.4rem;
  padding: 0.8rem 1.15rem;
  font-size: 0.9rem;
}
/* ZIELGRUPPEN-BLOCK – CI UPGRADE */
.benefits-grid .benefit-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 2rem 1.9rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.10), transparent 34%),
    linear-gradient(145deg, rgba(18, 39, 65, 0.96), rgba(10, 27, 48, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.benefits-grid .benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: 1.6rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ci-orange), rgba(241, 157, 29, 0.15));
  opacity: 0.9;
}

.benefits-grid .benefit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(241, 157, 29, 0.42);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
}

.benefits-grid .benefit-card h3 {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 1rem;
}

.benefits-grid .benefit-card p {
  color: rgba(230, 238, 250, 0.86);
  line-height: 1.65;
}

/* CTA-Karte im Zielgruppen-Grid */
.benefits-grid .benefit-card-cta {
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(22, 45, 75, 0.98), rgba(12, 31, 55, 0.98));
  border-color: rgba(241, 157, 29, 0.34);
}

.benefits-grid .benefit-card-cta::before {
  background: linear-gradient(90deg, var(--ci-orange), #ffd27a);
}

.benefits-grid .benefit-card-cta .button {
  width: fit-content;
  margin-top: 1.4rem;
  padding: 0.78rem 1.15rem;
  font-size: 0.86rem;
  border-color: rgba(241, 157, 29, 0.45);
}
/* ZIELGRUPPEN CTA-KARTE – BUTTON UPGRADE */
.benefits-grid .benefit-card-cta {
  border-color: rgba(241, 157, 29, 0.48);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(241, 157, 29, 0.08);
}

.benefits-grid .benefit-card-cta h3 {
  color: #ffffff;
}

.benefits-grid .benefit-card-cta .branche-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: auto;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ci-orange), #ffb23f);
  color: #08172b !important;
  border: 1px solid rgba(255, 210, 122, 0.7);
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow:
    0 14px 28px rgba(241, 157, 29, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.benefits-grid .benefit-card-cta .branche-cta-button::after {
  content: "→";
  margin-left: 0.55rem;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.benefits-grid .benefit-card-cta .branche-cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(241, 157, 29, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.benefits-grid .benefit-card-cta .branche-cta-button:hover::after {
  transform: translateX(3px);
}
/* LEISTUNGEN HERO MIT BILD */
.leistungen-hero {
  padding: 7rem 0 6rem;
}

.leistungen-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: center;
  gap: 4rem;
}

.leistungen-hero-copy {
  text-align: left;
}

.leistungen-hero-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.leistungen-hero-copy h1 {
  max-width: 760px;
  margin-bottom: 1.4rem;
}

.leistungen-hero-copy p {
  max-width: 720px;
  color: rgba(230, 238, 250, 0.88);
  line-height: 1.75;
}

.leistungen-trust {
  justify-content: flex-start;
  margin-top: 1.7rem;
}

.leistungen-actions {
  justify-content: flex-start;
  margin-top: 2rem;
}

.leistungen-hero-image {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(241, 157, 29, 0.28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  min-height: 390px;
  background: rgba(255, 255, 255, 0.04);
}

.leistungen-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(3, 16, 36, 0.18), transparent 45%),
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.18), transparent 38%);
  pointer-events: none;
}

.leistungen-hero-image img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 980px) {
  .leistungen-hero {
    padding: 5.5rem 0 4.5rem;
  }

  .leistungen-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .leistungen-hero-copy {
    text-align: center;
  }

  .leistungen-hero-copy .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .leistungen-trust,
  .leistungen-actions {
    justify-content: center;
  }

  .leistungen-hero-image {
    min-height: 320px;
  }

  .leistungen-hero-image img {
    min-height: 320px;
  }
}
/* LEISTUNGEN STORY / SO ARBEITEN WIR */
.leistungen-story {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 4rem;
}

.leistungen-story-image {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(241, 157, 29, 0.24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  min-height: 420px;
}

.leistungen-story-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.leistungen-story-copy h2 {
  margin-bottom: 1.4rem;
}

.leistungen-story-copy p {
  color: rgba(230, 238, 250, 0.88);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}

@media (max-width: 980px) {
  .leistungen-story {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .leistungen-story-image,
  .leistungen-story-image img {
    min-height: 320px;
  }
}
/* LEISTUNGEN – STORY ABSCHNITT FEINSCHLIFF */
.leistungen-story-section {
  padding: 4.8rem 0 5.4rem;
}

.leistungen-story-section .container {
  max-width: 1180px;
}

.leistungen-story {
  align-items: center;
  gap: 3.2rem;
}

.leistungen-story-image {
  min-height: 0;
  height: 430px;
  border-radius: 30px;
}

.leistungen-story-image img {
  min-height: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.leistungen-story-copy {
  padding: 2.2rem 2.3rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.09), transparent 38%),
    rgba(10, 28, 52, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.leistungen-story-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.leistungen-story-copy h2 {
  max-width: 620px;
  font-size: clamp(1.8rem, 2.6vw, 2.7rem);
  line-height: 1.18;
}

.leistungen-story-copy p {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.75;
}

.leistungen-story-copy .leistungen-trust {
  margin-top: 1.6rem;
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .leistungen-story-section {
    padding: 3.8rem 0 4.4rem;
  }

  .leistungen-story-image {
    height: 340px;
  }

  .leistungen-story-copy {
    padding: 1.8rem;
  }
}
/* LEISTUNGEN – EDITORIAL STORY */
.leistungen-hero {
  padding-bottom: 3.4rem;
}

.leistungen-story-section {
  padding: 3.2rem 0 5.4rem;
}

.leistungen-editorial-card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: 3rem;
  padding: 2.4rem;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.10), transparent 36%),
    linear-gradient(145deg, rgba(18, 39, 65, 0.92), rgba(8, 25, 47, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.leistungen-editorial-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.leistungen-editorial-copy h2 {
  max-width: 680px;
  margin-bottom: 1.35rem;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}

.leistungen-editorial-copy p {
  max-width: 760px;
  color: rgba(230, 238, 250, 0.88);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}

.leistungen-editorial-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}

.leistungen-editorial-points span {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(241, 157, 29, 0.22);
  font-size: 0.88rem;
  font-weight: 800;
}

.leistungen-editorial-image {
  overflow: hidden;
  height: 460px;
  border-radius: 28px;
  border: 1px solid rgba(241, 157, 29, 0.26);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}

.leistungen-editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 980px) {
  .leistungen-editorial-card {
    grid-template-columns: 1fr;
    padding: 1.7rem;
  }

  .leistungen-editorial-image {
    height: 340px;
  }
}
/* LEISTUNGEN – FOLIENARTIGE ABSCHNITTE */
.leistungen-slide-section {
  padding: 4.2rem 0 5.2rem;
}

.leistungen-slide-section .container {
  max-width: 1180px;
}

.leistungen-slide-card {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 3.4rem;
  padding: 2.4rem;
  border-radius: 36px;
  background:
    radial-gradient(circle at top right, rgba(241, 157, 29, 0.10), transparent 36%),
    linear-gradient(145deg, rgba(18, 39, 65, 0.94), rgba(8, 25, 47, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.24);
}

.leistungen-slide-image {
  overflow: hidden;
  height: 430px;
  border-radius: 30px;
  border: 1px solid rgba(241, 157, 29, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.leistungen-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.leistungen-slide-copy {
  max-width: 720px;
}

.leistungen-slide-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.leistungen-slide-kicker {
  margin: 0 0 0.75rem;
  color: var(--ci-orange);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.leistungen-slide-copy h2 {
  margin-bottom: 1.35rem;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}

.leistungen-slide-copy p {
  color: rgba(230, 238, 250, 0.88);
  line-height: 1.8;
  margin-bottom: 1.1rem;
}

.leistungen-slide-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.65rem;
}

.leistungen-slide-points span {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(241, 157, 29, 0.22);
  font-size: 0.88rem;
  font-weight: 800;
}

.leistungen-slide-card {
  transform: translateY(14px);
  opacity: 0;
  animation: leistungenSlideIn 0.75s ease forwards;
}

@keyframes leistungenSlideIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .leistungen-slide-card {
    grid-template-columns: 1fr;
    padding: 1.7rem;
  }

  .leistungen-slide-image {
    height: 340px;
  }
}
/* LEISTUNGEN – HERO KORREKTUR */
.leistungen-hero {
  min-height: auto !important;
  display: block !important;
  padding: 6rem 0 5.5rem !important;
}

.leistungen-hero-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: center;
  gap: 4rem;
}

.leistungen-hero-copy {
  max-width: 620px;
}

.leistungen-hero-copy h1 {
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  line-height: 1.16;
}

.leistungen-hero-image {
  height: 470px;
  min-height: 0 !important;
  max-width: 420px;
}

.leistungen-hero-image img {
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
}

.leistungen-slide-section {
  padding-top: 4.5rem;
}

@media (max-width: 980px) {
  .leistungen-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .leistungen-hero-copy {
    max-width: 100%;
    text-align: center;
  }

  .leistungen-hero-image {
    max-width: 100%;
    height: 340px;
  }
}
/* LEISTUNGEN – RUHIGER HERO */
.leistungen-hero-calm {
  padding: 6.5rem 0 5rem !important;
}

.leistungen-hero-calm .leistungen-hero-copy p {
  max-width: 680px;
  color: rgba(230, 238, 250, 0.88);
  line-height: 1.8;
  margin-bottom: 1.1rem;
}

.inline-service-link {
  color: var(--ci-orange);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 157, 29, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.inline-service-link:hover {
  color: #ffbd55;
  border-color: #ffbd55;
}

.leistungen-hero-note {
  margin-top: 1.6rem;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.leistungen-hero-calm .hero-trust,
.leistungen-hero-calm .leistungen-actions {
  display: none !important;
}
/* LEISTUNGEN – RUHIGE VERTRAUENSZEILE */
.leistungen-hero-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.9rem;
  max-width: 760px;
}

.leistungen-hero-note span {
  position: relative;
  display: block;
  padding: 1rem 1rem 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.leistungen-hero-note span::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 3px;
  height: 34px;
  border-radius: 999px;
  background: var(--ci-orange);
}

.leistungen-hero-note strong {
  display: block;
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.leistungen-hero-note small {
  display: block;
  color: rgba(230, 238, 250, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .leistungen-hero-note {
    grid-template-columns: 1fr;
  }
}
/* LEISTUNGEN – FOLIEN-SCROLL */
@media (min-width: 981px) {
  html.leistungen-snap-active {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scroll-padding-top: 86px;
  }

  html.leistungen-snap-active body {
    overscroll-behavior-y: contain;
  }

  body[data-page="leistungen"] main > .leistungen-snap {
    min-height: calc(100svh - 86px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    padding-top: 4.2rem !important;
    padding-bottom: 4.2rem !important;
  }

  body[data-page="leistungen"] main > .leistungen-snap > .container {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.leistungen-snap-active {
    scroll-behavior: auto;
    scroll-snap-type: y proximity;
  }
}
/* LEISTUNGEN – ALLE FOLIEN */
@media (min-width: 981px) {
  body[data-page="leistungen"] main > .leistungen-snap {
    min-height: calc(100svh - 86px);
    display: flex;
    align-items: center;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    scroll-margin-top: 86px;
  }

  body[data-page="leistungen"] main > .leistungen-snap > .container {
    width: 100%;
  }

  body[data-page="leistungen"] .section-cta.leistungen-snap {
    background: linear-gradient(180deg, #07172d 0%, #050f22 100%);
  }
}
/* =========================================================
   Leistungen-Seite: Slide-Fix
   Fixes:
   - Folie 2 wird nicht mehr unten abgeschnitten
   - Folien stehen sauber im Fokus
   - letzte Folie blockiert den Footer nicht
   ========================================================= */

body[data-page="leistungen"] .leistungen-snap {
  scroll-margin-top: 90px;
}

body[data-page="leistungen"] .leistungen-snap > .container {
  width: 100%;
}

@media (min-width: 901px) {
  body[data-page="leistungen"] .leistungen-snap {
    min-height: calc(100svh - 88px);
    padding-top: clamp(46px, 6vh, 82px);
    padding-bottom: clamp(46px, 6vh, 82px);
    display: flex;
    align-items: center;
    overflow: visible;
  }

  body[data-page="leistungen"] .leistungen-slide-card {
    min-height: auto;
    align-items: center;
  }

  body[data-page="leistungen"] .leistungen-slide-image img {
    width: 100%;
    max-height: min(48svh, 520px);
    object-fit: cover;
  }

  body[data-page="leistungen"] .leistungen-slide-copy {
    min-width: 0;
  }

  body[data-page="leistungen"] .leistungen-slide-copy h2 {
    margin-bottom: 22px;
    line-height: 1.08;
  }

  body[data-page="leistungen"] .leistungen-slide-copy p {
    margin-bottom: 16px;
  }

  body[data-page="leistungen"] .leistungen-story-section .section-intro {
    margin-bottom: 42px;
  }

  body[data-page="leistungen"] .leistungen-last-slide {
    min-height: calc(100svh - 88px);
  }
}

/* Extra-Fix für Laptop-Bildschirme wie bei deinem Screenshot */
@media (max-height: 860px) and (min-width: 901px) {
  body[data-page="leistungen"] .leistungen-snap {
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 46px;
  }

  body[data-page="leistungen"] .leistungen-slide-section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  body[data-page="leistungen"] .leistungen-slide-card {
    gap: 52px;
  }

  body[data-page="leistungen"] .leistungen-slide-image img {
    max-height: 44svh;
  }

  body[data-page="leistungen"] .leistungen-slide-copy h2 {
    font-size: clamp(2.4rem, 4vw, 4rem);
  }

  body[data-page="leistungen"] .leistungen-slide-copy p {
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 13px;
  }
}

/* Mobile: kein harter Slide-Zwang */
@media (max-width: 900px) {
  body[data-page="leistungen"] .leistungen-snap {
    min-height: auto;
    display: block;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  body[data-page="leistungen"] .leistungen-slide-image img {
    max-height: none;
  }
}
/* Footer nach der letzten Leistungen-Folie normal erreichbar machen */
body[data-page="leistungen"] .site-footer {
  scroll-margin-top: 0;
  position: relative;
  z-index: 2;
}

body[data-page="leistungen"] main {
  overflow: visible;
}
/* =========================================================
   Leistungen: natives CSS Scroll-Snap deaktivieren
   Grund: Sonst springt die letzte Folie zurück und blockiert den Footer.
   ========================================================= */

html.leistungen-snap-active,
html.leistungen-snap-active body,
body[data-page="leistungen"],
body[data-page="leistungen"] main {
  scroll-snap-type: none !important;
  overflow-y: auto;
}

body[data-page="leistungen"] .leistungen-snap {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
/* =========================================================
   LEISTUNGEN – Hero Bild mit Rahmen
   ========================================================= */

body[data-page="leistungen"] .leistungen-image-frame {
  padding: 14px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="leistungen"] .leistungen-image-frame img {
  display: block;
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
}

/* =========================================================
   LEISTUNGEN – Ablauf-Boxen komplett klickbar
   ========================================================= */

body[data-page="leistungen"] .leistungen-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 42px;
}

body[data-page="leistungen"] .leistungen-step-card {
  min-height: 270px;
  padding: 30px 30px 26px;
  border-radius: 26px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

body[data-page="leistungen"] .leistungen-step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6a623, rgba(246,166,35,0.18));
}

body[data-page="leistungen"] .leistungen-step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(246,166,35,0.45);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(246,166,35,0.08) inset;
}

body[data-page="leistungen"] .leistungen-step-card:active {
  transform: translateY(-2px) scale(0.985);
}

body[data-page="leistungen"] .leistungen-step-number {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f6a623;
  background: rgba(246,166,35,0.12);
  border: 1px solid rgba(246,166,35,0.25);
  font-weight: 900;
}

body[data-page="leistungen"] .leistungen-step-card h3 {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.25;
}

body[data-page="leistungen"] .leistungen-step-card p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
}

body[data-page="leistungen"] .leistungen-step-cta {
  margin-top: auto;
  padding-top: 24px;
  color: #f6a623;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, gap 0.2s ease;
}

body[data-page="leistungen"] .leistungen-step-card:hover .leistungen-step-cta {
  transform: translateX(4px);
  gap: 12px;
}

/* =========================================================
   LEISTUNGEN – Letzte CTA-Folie stärker ausarbeiten
   ========================================================= */

body[data-page="leistungen"] .leistungen-final-cta {
  width: 100%;
  min-height: 430px;
  padding: 56px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(246,166,35,0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 38px;
  align-items: center;
}

body[data-page="leistungen"] .leistungen-final-cta-content h2 {
  margin: 18px 0 18px;
  color: #ffffff;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.08;
}

body[data-page="leistungen"] .leistungen-final-cta-content p {
  max-width: 760px;
  margin: 0 0 26px;
  color: rgba(255,255,255,0.86);
  font-size: 1.05rem;
  line-height: 1.8;
}

body[data-page="leistungen"] .leistungen-final-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

body[data-page="leistungen"] .leistungen-final-points span {
  padding: 11px 15px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
  font-size: 0.95rem;
}

body[data-page="leistungen"] .leistungen-final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

body[data-page="leistungen"] .leistungen-final-actions .button {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

body[data-page="leistungen"] .leistungen-final-actions .button:hover {
  transform: translateY(-3px);
}

body[data-page="leistungen"] .leistungen-final-actions .button:active {
  transform: translateY(-1px) scale(0.985);
}

body[data-page="leistungen"] .leistungen-secondary-link {
  color: #f6a623;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(246,166,35,0.45);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body[data-page="leistungen"] .leistungen-secondary-link:hover {
  color: #ffbd4a;
  border-color: #ffbd4a;
}

body[data-page="leistungen"] .leistungen-final-side {
  display: grid;
  gap: 16px;
}

body[data-page="leistungen"] .leistungen-final-mini-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(0, 21, 48, 0.38);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-page="leistungen"] .leistungen-final-mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1rem;
}

body[data-page="leistungen"] .leistungen-final-mini-card span {
  display: block;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1100px) {
  body[data-page="leistungen"] .leistungen-steps-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="leistungen"] .leistungen-final-cta {
    grid-template-columns: 1fr;
    padding: 42px 30px;
    min-height: auto;
  }
}

@media (max-width: 768px) {
  body[data-page="leistungen"] .leistungen-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="leistungen"] .leistungen-final-actions .button,
  body[data-page="leistungen"] .leistungen-secondary-link {
    width: 100%;
    text-align: center;
  }

  body[data-page="leistungen"] .leistungen-final-points {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* LEISTUNGEN – Ablauf-Boxen klickbar, alter Stil bleibt */
body[data-page="leistungen"] .benefit-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

body[data-page="leistungen"] .benefit-card-link h3,
body[data-page="leistungen"] .benefit-card-link p {
  color: inherit;
}

body[data-page="leistungen"] .benefit-card-link:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 166, 35, 0.45);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(246, 166, 35, 0.10) inset;
}

body[data-page="leistungen"] .benefit-card-link:active {
  transform: translateY(-2px) scale(0.985);
}
/* =========================================================
   LEISTUNGEN – Ablauf-Box Überschriften weicher machen
   ========================================================= */

body[data-page="leistungen"] .benefit-card-link h3 {
  color: rgba(226, 232, 240, 0.86) !important;
}

body[data-page="leistungen"] .benefit-card-link:hover h3 {
  color: #f6a623 !important;
}
/* =========================================================
   LEISTUNGEN – extra Scrollbalken verhindern
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-page="leistungen"] {
  overflow-x: hidden !important;
}

body[data-page="leistungen"] main {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

body[data-page="leistungen"] .leistungen-snap {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
/* =========================================================
   LEISTUNGEN – Folie 1 sauber im Fokus halten
   Fix: Beim Wechsel von anderem Reiter darf unten Folie 2
   nicht direkt sichtbar sein.
   ========================================================= */

body[data-page="leistungen"] #leistung-slide-1 {
  min-height: calc(100svh - 88px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: clamp(70px, 8vh, 110px) !important;
  padding-bottom: clamp(70px, 8vh, 110px) !important;
  overflow: hidden !important;
}

body[data-page="leistungen"] #leistung-slide-1 .container {
  width: 100%;
}

/* Laptop-Höhen wie bei deinem Screenshot */
@media (max-height: 860px) and (min-width: 901px) {
  body[data-page="leistungen"] #leistung-slide-1 {
    min-height: calc(100svh - 88px) !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
}
/* Ablauf-Box Überschriften nicht hart weiß */
body[data-page="leistungen"] .benefit-card-link h3 {
  color: rgba(226, 232, 240, 0.88) !important;
}

body[data-page="leistungen"] .benefit-card-link:hover h3 {
  color: #f6a623 !important;
}
/* =========================================================
   LEISTUNGEN – doppelten / extra Scrollbalken verhindern
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-page="leistungen"] {
  overflow-x: hidden !important;
}

body[data-page="leistungen"] main {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

html.leistungen-snap-active {
  overflow-y: auto !important;
  scroll-snap-type: none !important;
}

html.leistungen-snap-active body {
  overflow-y: visible !important;
}

body[data-page="leistungen"] .leistungen-snap {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
/* =========================================================
   BRANCHEN – Neuer Hero
   ========================================================= */

body[data-page="branchen"] .branchen-hero {
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: center;
  padding-top: clamp(90px, 10vh, 135px);
  padding-bottom: clamp(80px, 9vh, 120px);
  background:
    radial-gradient(circle at 78% 22%, rgba(246, 166, 35, 0.14), transparent 34%),
    linear-gradient(180deg, #061b33 0%, #04182d 100%);
  overflow: hidden;
}

body[data-page="branchen"] .branchen-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(48px, 6vw, 86px);
  align-items: center;
}

body[data-page="branchen"] .branchen-hero-copy {
  max-width: 780px;
}

body[data-page="branchen"] .branchen-hero-copy h1 {
  margin: 26px 0 24px;
  color: #ffffff;
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

body[data-page="branchen"] .branchen-hero-copy p {
  max-width: 690px;
  margin: 0;
  color: rgba(226, 232, 240, 0.88);
  font-size: 1.08rem;
  line-height: 1.85;
}

body[data-page="branchen"] .branchen-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

body[data-page="branchen"] .branchen-hero-link {
  color: #f6a623;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(246, 166, 35, 0.45);
  padding-bottom: 5px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body[data-page="branchen"] .branchen-hero-link:hover {
  color: #ffbd4a;
  border-color: #ffbd4a;
  transform: translateX(4px);
}

body[data-page="branchen"] .branchen-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="branchen"] .branchen-hero-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  border: 1px solid rgba(246, 166, 35, 0.12);
  pointer-events: none;
}

body[data-page="branchen"] .branchen-mini-card {
  min-height: 118px;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(6, 27, 51, 0.72), rgba(4, 24, 45, 0.82));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

body[data-page="branchen"] .branchen-mini-card:hover {
  transform: translateY(-5px);
  border-color: rgba(246, 166, 35, 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(4, 24, 45, 0.86));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="branchen"] .branchen-mini-card.is-large {
  grid-column: span 2;
  min-height: 136px;
  background:
    radial-gradient(circle at top right, rgba(246,166,35,0.16), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(4,24,45,0.82));
}

body[data-page="branchen"] .branchen-mini-card span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #f6a623;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="branchen"] .branchen-mini-card strong {
  display: block;
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  body[data-page="branchen"] .branchen-hero-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="branchen"] .branchen-hero-panel {
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  body[data-page="branchen"] .branchen-hero {
    min-height: auto;
    padding-top: 86px;
    padding-bottom: 70px;
  }

  body[data-page="branchen"] .branchen-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  body[data-page="branchen"] .branchen-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="branchen"] .branchen-hero-actions .button,
  body[data-page="branchen"] .branchen-hero-link {
    width: 100%;
    text-align: center;
  }

  body[data-page="branchen"] .branchen-hero-panel {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  body[data-page="branchen"] .branchen-mini-card.is-large {
    grid-column: auto;
  }
}
/* =========================================================
   BRANCHEN – Hero im Stil der Leistungsseite
   ========================================================= */

body[data-page="branchen"] .branchen-hero-calm {
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: center;
  padding-top: clamp(86px, 10vh, 130px);
  padding-bottom: clamp(76px, 9vh, 120px);
  background:
    radial-gradient(circle at 82% 22%, rgba(246, 166, 35, 0.10), transparent 32%),
    linear-gradient(180deg, #061b33 0%, #04182d 100%);
  overflow: hidden;
}

body[data-page="branchen"] .branchen-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: clamp(56px, 7vw, 96px);
  align-items: center;
}

body[data-page="branchen"] .branchen-hero-copy {
  max-width: 760px;
}

body[data-page="branchen"] .branchen-hero-copy h1 {
  margin: 26px 0 24px;
  color: #ffffff;
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body[data-page="branchen"] .branchen-hero-copy p {
  max-width: 690px;
  margin: 0 0 18px;
  color: rgba(226, 232, 240, 0.88);
  font-size: 1.02rem;
  line-height: 1.78;
}

body[data-page="branchen"] .branchen-hero-copy p:last-of-type {
  margin-bottom: 0;
}

body[data-page="branchen"] .branchen-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

body[data-page="branchen"] .branchen-hero-link {
  color: #f6a623;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(246, 166, 35, 0.45);
  padding-bottom: 5px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

body[data-page="branchen"] .branchen-hero-link:hover {
  color: #ffbd4a;
  border-color: #ffbd4a;
  transform: translateX(4px);
}

body[data-page="branchen"] .branchen-hero-media {
  padding: 14px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="branchen"] .branchen-hero-media img {
  width: 100%;
  height: 540px;
  display: block;
  object-fit: cover;
  object-position: 62% center;
  border-radius: 24px;
} 

/* Alte Branchen-Hero-Kachelmatrix deaktivieren, falls CSS noch vorhanden ist */
body[data-page="branchen"] .branchen-hero-panel,
body[data-page="branchen"] .branchen-mini-card {
  display: initial;
}

@media (max-width: 1100px) {
  body[data-page="branchen"] .branchen-hero-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="branchen"] .branchen-hero-media {
    max-width: 680px;
  }

  body[data-page="branchen"] .branchen-hero-media img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 720px) {
  body[data-page="branchen"] .branchen-hero-calm {
    min-height: auto;
    padding-top: 86px;
    padding-bottom: 70px;
  }

  body[data-page="branchen"] .branchen-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  body[data-page="branchen"] .branchen-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="branchen"] .branchen-hero-actions .button,
  body[data-page="branchen"] .branchen-hero-link {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   BRANCHEN – Hero Notfall-Fix wie Leistungen
   ========================================================= */

body[data-page="branchen"] .branchen-hero-calm {
  min-height: calc(100svh - 88px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  text-align: left !important;
  overflow: hidden !important;
}

body[data-page="branchen"] .branchen-hero-calm .container {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body[data-page="branchen"] .branchen-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 90px !important;
  align-items: center !important;
}

body[data-page="branchen"] .branchen-hero-copy {
  max-width: 720px !important;
  text-align: left !important;
}

body[data-page="branchen"] .branchen-hero-copy .eyebrow {
  display: inline-flex !important;
  margin-bottom: 26px !important;
}

body[data-page="branchen"] .branchen-hero-copy h1 {
  max-width: 720px !important;
  margin: 0 0 26px !important;
  text-align: left !important;
  font-size: clamp(3rem, 4.5vw, 4.7rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.045em !important;
}

body[data-page="branchen"] .branchen-hero-copy p {
  max-width: 650px !important;
  margin: 0 0 18px !important;
  text-align: left !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

body[data-page="branchen"] .branchen-hero-actions {
  justify-content: flex-start !important;
}

body[data-page="branchen"] .branchen-hero-media {
  width: 420px !important;
  max-width: 420px !important;
  padding: 14px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
}

body[data-page="branchen"] .branchen-hero-media img {
  width: 100% !important;
  height: 540px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 24px !important;
}

@media (max-width: 1100px) {
  body[data-page="branchen"] .branchen-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  body[data-page="branchen"] .branchen-hero-media {
    width: 100% !important;
    max-width: 620px !important;
  }

  body[data-page="branchen"] .branchen-hero-media img {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
}
/* =========================================================
   BRANCHEN – Folienaufbau wie Leistungen
   ========================================================= */

body[data-page="branchen"] .branchen-snap {
  min-height: calc(100svh - 74px);
  display: flex;
  align-items: center;
  padding-top: clamp(70px, 8vh, 105px);
  padding-bottom: clamp(70px, 8vh, 105px);
  overflow: hidden;
}

body[data-page="branchen"] .branchen-snap > .container {
  width: min(1180px, calc(100% - 2rem));
}

/* Folie 2 */
body[data-page="branchen"] .branchen-info-slide {
  background:
    radial-gradient(circle at 80% 18%, rgba(246, 166, 35, 0.10), transparent 34%),
    linear-gradient(180deg, #04182d 0%, #031326 100%);
}

body[data-page="branchen"] .branchen-slide-card {
  width: 100%;
  padding: clamp(34px, 5vw, 62px);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

body[data-page="branchen"] .branchen-slide-copy {
  text-align: left;
}

body[data-page="branchen"] .branchen-slide-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

body[data-page="branchen"] .branchen-slide-copy h2 {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(2.5rem, 4vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

body[data-page="branchen"] .branchen-slide-copy p {
  margin: 0 0 18px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 1.02rem;
  line-height: 1.78;
}

body[data-page="branchen"] .branchen-factor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="branchen"] .branchen-factor-card {
  min-height: 170px;
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(6, 27, 51, 0.72), rgba(4, 24, 45, 0.86));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-page="branchen"] .branchen-factor-card span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #f6a623;
  font-weight: 950;
  letter-spacing: 0.12em;
}

body[data-page="branchen"] .branchen-factor-card strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.05rem;
}

body[data-page="branchen"] .branchen-factor-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Folie 3 */
body[data-page="branchen"] .branchen-overview-slide {
  background:
    radial-gradient(circle at 16% 18%, rgba(246,166,35,0.08), transparent 32%),
    linear-gradient(180deg, #061b33 0%, #04182d 100%);
}

body[data-page="branchen"] .branchen-slide-intro {
  margin-bottom: 34px;
}

body[data-page="branchen"] .branchen-slide-intro h2 {
  margin-top: 14px;
  color: #ffffff;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body[data-page="branchen"] .branchen-slide-intro p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.65;
}

body[data-page="branchen"] .branchen-premium-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="branchen"] .branchen-premium-card {
  position: relative;
  min-height: 210px;
  padding: 24px;
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(246,166,35,0.10), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

body[data-page="branchen"] .branchen-premium-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6a623, rgba(246,166,35,0.14));
}

body[data-page="branchen"] .branchen-premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(246,166,35,0.45);
  box-shadow:
    0 28px 66px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(246,166,35,0.10) inset;
}

body[data-page="branchen"] .branchen-premium-card span {
  display: inline-flex;
  margin-bottom: 14px;
  color: #f6a623;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="branchen"] .branchen-premium-card h3 {
  margin: 0 0 12px;
  color: rgba(255,255,255,0.94);
  font-size: 1.18rem;
  line-height: 1.28;
}

body[data-page="branchen"] .branchen-premium-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.94rem;
  line-height: 1.58;
}

/* Folie 4 */
body[data-page="branchen"] .branchen-final-slide {
  background:
    radial-gradient(circle at 82% 24%, rgba(246,166,35,0.12), transparent 34%),
    linear-gradient(180deg, #04182d 0%, #021127 100%);
}

body[data-page="branchen"] .branchen-final-cta {
  width: 100%;
  min-height: 420px;
  padding: clamp(36px, 5vw, 58px);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
  gap: 38px;
  align-items: center;
}

body[data-page="branchen"] .branchen-final-copy {
  text-align: left;
}

body[data-page="branchen"] .branchen-final-copy .eyebrow {
  margin-left: 0;
  margin-right: 0;
}

body[data-page="branchen"] .branchen-final-copy h2 {
  margin: 18px 0 18px;
  color: #ffffff;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

body[data-page="branchen"] .branchen-final-copy p {
  max-width: 760px;
  margin: 0 0 28px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 1.02rem;
  line-height: 1.75;
}

body[data-page="branchen"] .branchen-final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

body[data-page="branchen"] .branchen-final-side {
  display: grid;
  gap: 16px;
}

body[data-page="branchen"] .branchen-final-mini-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(0, 21, 48, 0.38);
  border: 1px solid rgba(255,255,255,0.10);
}

body[data-page="branchen"] .branchen-final-mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
}

body[data-page="branchen"] .branchen-final-mini-card span {
  display: block;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1100px) {
  body[data-page="branchen"] .branchen-slide-card,
  body[data-page="branchen"] .branchen-final-cta {
    grid-template-columns: 1fr;
  }

  body[data-page="branchen"] .branchen-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-page="branchen"] .branchen-snap {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  body[data-page="branchen"] .branchen-factor-grid,
  body[data-page="branchen"] .branchen-premium-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="branchen"] .branchen-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="branchen"] .branchen-final-actions .button,
  body[data-page="branchen"] .branchen-final-actions .branchen-hero-link {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   BRANCHEN – 5 Folien final
   Hero + Einzelhandel + Industrie + Handwerk + Weitere Branchen
   ========================================================= */

/* Allgemeiner Folien-Fix */
body[data-page="branchen"] .branchen-snap {
  min-height: calc(100svh - 74px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: clamp(54px, 7vh, 88px) !important;
  padding-bottom: clamp(54px, 7vh, 88px) !important;
  overflow: visible !important;
}

/* Folie 1 unten nicht abschneiden */
body[data-page="branchen"] #branchen-slide-1 {
  min-height: calc(100svh - 74px) !important;
  padding-top: clamp(48px, 6vh, 76px) !important;
  padding-bottom: clamp(64px, 7vh, 92px) !important;
}

body[data-page="branchen"] #branchen-slide-1 .branchen-hero-copy h1 {
  font-size: clamp(3rem, 4.25vw, 4.65rem) !important;
  line-height: 1.06 !important;
}

body[data-page="branchen"] #branchen-slide-1 .branchen-hero-copy p {
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
  margin-bottom: 14px !important;
}

body[data-page="branchen"] #branchen-slide-1 .branchen-hero-actions {
  margin-top: 24px !important;
}

body[data-page="branchen"] #branchen-slide-1 .branchen-hero-media img {
  height: 500px !important;
  object-fit: cover !important;
  object-position: 62% center !important;
}

/* Kleine Laptop-Höhen */
@media (max-height: 860px) and (min-width: 901px) {
  body[data-page="branchen"] #branchen-slide-1 {
    padding-top: 44px !important;
    padding-bottom: 58px !important;
  }

  body[data-page="branchen"] #branchen-slide-1 .branchen-hero-copy h1 {
    font-size: clamp(2.8rem, 4vw, 4.25rem) !important;
  }

  body[data-page="branchen"] #branchen-slide-1 .branchen-hero-copy p {
    font-size: 0.94rem !important;
    line-height: 1.58 !important;
    margin-bottom: 11px !important;
  }

  body[data-page="branchen"] #branchen-slide-1 .branchen-hero-media img {
    height: 455px !important;
  }
}

/* Detail-Folien 2, 3, 4 */
body[data-page="branchen"] .branchen-detail-slide {
  background:
    radial-gradient(circle at 82% 22%, rgba(241, 157, 29, 0.08), transparent 34%),
    linear-gradient(180deg, #061b33 0%, #04182d 100%) !important;
}

body[data-page="branchen"] #branchen-slide-3 {
  background:
    radial-gradient(circle at 16% 20%, rgba(241, 157, 29, 0.09), transparent 34%),
    linear-gradient(180deg, #04182d 0%, #061b33 100%) !important;
}

body[data-page="branchen"] .branchen-detail-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 6vw, 86px);
  align-items: center;
}

body[data-page="branchen"] .branchen-detail-card.is-reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

body[data-page="branchen"] .branchen-detail-card.is-reverse .branchen-detail-media {
  order: 2;
}

body[data-page="branchen"] .branchen-detail-card.is-reverse .branchen-detail-copy {
  order: 1;
}

body[data-page="branchen"] .branchen-detail-media,
body[data-page="branchen"] .branchen-final-media {
  padding: 14px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="branchen"] .branchen-detail-media img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

body[data-page="branchen"] .branchen-detail-copy {
  text-align: left;
  max-width: 720px;
}

body[data-page="branchen"] .branchen-detail-copy .eyebrow,
body[data-page="branchen"] .branchen-final-copy .eyebrow {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body[data-page="branchen"] .branchen-detail-copy h2,
body[data-page="branchen"] .branchen-final-copy h2 {
  margin: 22px 0 22px;
  color: #ffffff;
  font-size: clamp(2.45rem, 4vw, 4.25rem);
  line-height: 1.07;
  letter-spacing: -0.045em;
}

body[data-page="branchen"] .branchen-detail-copy p,
body[data-page="branchen"] .branchen-final-copy p {
  max-width: 700px;
  margin: 0 0 18px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 1.02rem;
  line-height: 1.78;
}

body[data-page="branchen"] .branchen-detail-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

body[data-page="branchen"] .branchen-detail-points span,
body[data-page="branchen"] .branchen-more-grid span {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.88rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  font-weight: 800;
}

body[data-page="branchen"] .branchen-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

/* Folie 5 */
body[data-page="branchen"] .branchen-final-slide {
  background:
    radial-gradient(circle at 82% 24%, rgba(241, 157, 29, 0.11), transparent 34%),
    linear-gradient(180deg, #04182d 0%, #021127 100%) !important;
}

body[data-page="branchen"] .branchen-final-image-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(48px, 6vw, 82px);
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

body[data-page="branchen"] .branchen-final-copy {
  text-align: left;
}

body[data-page="branchen"] .branchen-more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

body[data-page="branchen"] .branchen-final-media img {
  width: 100%;
  height: 430px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

/* Responsive */
@media (max-width: 1100px) {
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-detail-card.is-reverse,
  body[data-page="branchen"] .branchen-final-image-card {
    grid-template-columns: 1fr;
  }

  body[data-page="branchen"] .branchen-detail-card.is-reverse .branchen-detail-media,
  body[data-page="branchen"] .branchen-detail-card.is-reverse .branchen-detail-copy {
    order: initial;
  }

  body[data-page="branchen"] .branchen-detail-media,
  body[data-page="branchen"] .branchen-final-media {
    max-width: 720px;
  }

  body[data-page="branchen"] .branchen-detail-media img,
  body[data-page="branchen"] .branchen-final-media img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 720px) {
  body[data-page="branchen"] .branchen-snap {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  body[data-page="branchen"] .branchen-detail-copy h2,
  body[data-page="branchen"] .branchen-final-copy h2 {
    font-size: clamp(2.25rem, 10vw, 3.3rem);
  }

  body[data-page="branchen"] .branchen-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="branchen"] .branchen-detail-actions .button,
  body[data-page="branchen"] .branchen-detail-actions .branchen-hero-link {
    width: 100%;
    text-align: center;
  }
}
/* Einzelhandel-Bild auf Folie 2 größer und vollständig sichtbar */
body[data-page="branchen"] #branchen-slide-2 .branchen-detail-card {
  grid-template-columns: minmax(460px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
  padding: 18px;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media img {
  width: 100%;
  height: 560px;
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
  border-radius: 20px;
}
/* =========================================================
   BRANCHEN – Einzelhandel-Bild wieder hochwertig füllen
   ========================================================= */

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-card {
  grid-template-columns: minmax(430px, 0.95fr) minmax(0, 1.05fr) !important;
  gap: clamp(52px, 6vw, 86px) !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
  max-width: 560px !important;
  padding: 14px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media img {
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  border-radius: 24px !important;
}
/* =========================================================
   BRANCHEN – Folie 2 (Einzelhandel) mit breitem Bildformat
   ========================================================= */

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-card {
  grid-template-columns: minmax(520px, 1.05fr) minmax(0, 0.95fr) !important;
  gap: clamp(40px, 5vw, 72px) !important;
  align-items: center !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
  max-width: 640px !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: 32px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 24px !important;
  background: #eef1f5 !important;
}
/* =========================================================
   BRANCHEN – Folie 2 Einzelhandel groß & lesbar
   ========================================================= */

body[data-page="branchen"] #branchen-slide-2 {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

body[data-page="branchen"] #branchen-slide-2 > .container {
  width: min(1480px, calc(100% - 2rem)) !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-card {
  grid-template-columns: minmax(720px, 1.35fr) minmax(360px, 0.65fr) !important;
  gap: clamp(34px, 4vw, 58px) !important;
  align-items: center !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
  max-width: 860px !important;
  width: 100% !important;
  padding: 12px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 22px !important;
  background: transparent !important;
}

/* Text auf Folie 2 etwas kompakter, damit das Bild größer sein darf */
body[data-page="branchen"] #branchen-slide-2 .branchen-detail-copy h2 {
  font-size: clamp(2.5rem, 3.4vw, 3.9rem) !important;
  line-height: 1.06 !important;
  margin-bottom: 20px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-copy p {
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
  margin-bottom: 15px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-points {
  margin-top: 20px !important;
}

body[data-page="branchen"] #branchen-slide-2 .branchen-detail-actions {
  margin-top: 26px !important;
}

/* Laptop-Höhen: Bild trotzdem groß lassen */
@media (max-height: 860px) and (min-width: 901px) {
  body[data-page="branchen"] #branchen-slide-2 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
    max-width: 900px !important;
  }

  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-copy h2 {
    font-size: clamp(2.35rem, 3vw, 3.45rem) !important;
  }

  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-copy p {
    font-size: 0.94rem !important;
    line-height: 1.58 !important;
  }
}

/* Tablet / Mobile wieder sauber stapeln */
@media (max-width: 1100px) {
  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-card {
    grid-template-columns: 1fr !important;
  }

  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media {
    max-width: 100% !important;
  }
}
.branchen-detail-copy p strong {
  color: #ffffff;
  font-weight: 800;
}

.section-light .branchen-detail-copy p strong {
  color: #071b2f;
}
.branchen-detail-copy p strong {
  color: #ffffff;
  font-weight: 800;
}

.section-light .branchen-detail-copy p strong {
  color: #071b2f;
}
.branchen-detail-copy p strong,
.branchen-final-copy p strong {
  color: #ffffff;
  font-weight: 800;
}

.section-light .branchen-detail-copy p strong {
  color: #071b2f;
}
.branchen-detail-copy p strong,
.branchen-final-copy p strong {
  color: #ffffff;
  font-weight: 800;
}

.branchen-detail-copy p strong,
.branchen-final-copy p strong {
  color: #ffffff !important;
  font-weight: 800;
}
.branchen-final-actions {
  margin-top: 32px;
}
.branchen-final-media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.branchen-final-contact-button {
  margin-top: 28px;
}
html {
  scroll-behavior: smooth;
}

body[data-page="branchen"] {
  overflow-x: hidden;
}

body[data-page="branchen"] main {
  overflow: hidden;
}

body[data-page="branchen"] .branchen-snap {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  scroll-margin-top: 0 !important;
}

body[data-page="branchen"] .branchen-detail-slide,
body[data-page="branchen"] .branchen-final-slide,
body[data-page="branchen"] .branchen-hero {
  display: flex;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

body[data-page="branchen"] .branchen-detail-card,
body[data-page="branchen"] .branchen-final-image-card {
  max-height: calc(100vh - 144px);
}
body[data-page="branchen"] {
  overflow-x: hidden;
}

body[data-page="branchen"] .branchen-snap {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

body[data-page="branchen"] .branchen-detail-slide,
body[data-page="branchen"] .branchen-final-slide,
body[data-page="branchen"] .branchen-hero {
  display: flex;
  align-items: center;
}
body[data-page="branchen"] .branchen-final-image-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(44px, 5vw, 76px);
  align-items: center;
}

body[data-page="branchen"] .branchen-final-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

body[data-page="branchen"] .branchen-final-visual .branchen-final-media {
  width: 100%;
}

body[data-page="branchen"] .branchen-final-contact-button {
  width: 280px;
  justify-content: center;
}
/* =========================================================
   BRANCHEN SNAP HARD FIX
   Verhindert, dass andere Folien sichtbar sind
   ========================================================= */

@media (min-width: 721px) {
  body[data-page="branchen"] {
    overflow-x: hidden;
  }

  body[data-page="branchen"] main {
    overflow: hidden;
  }

  body[data-page="branchen"] .branchen-snap {
    height: calc(100svh - 74px) !important;
    min-height: calc(100svh - 74px) !important;
    max-height: calc(100svh - 74px) !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    scroll-margin-top: 74px !important;
  }

  body[data-page="branchen"] .branchen-snap > .container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  body[data-page="branchen"] .branchen-hero-grid,
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-final-image-card {
    width: 100% !important;
    max-height: calc(100svh - 120px) !important;
  }

  body[data-page="branchen"] .branchen-detail-media img {
    max-height: calc(100svh - 190px) !important;
  }

  body[data-page="branchen"] #branchen-slide-2 .branchen-detail-media img {
    height: min(520px, calc(100svh - 190px)) !important;
  }

  body[data-page="branchen"] .branchen-final-media img {
    height: min(430px, calc(100svh - 230px)) !important;
  }
}
body[data-page="branchen"] .branchen-final-visual {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
}

body[data-page="branchen"] .branchen-final-visual .branchen-final-media {
  width: 100% !important;
}

body[data-page="branchen"] .branchen-final-contact-button {
  width: 280px !important;
  justify-content: center !important;
  margin-top: 0 !important;
}
/* =========================================================
   STARTSEITE - GROSSE RUHIGE PANELS OHNE AUTO-SCROLL
   ========================================================= */

@media (min-width: 981px) {
  body[data-page="index"] main > .home-panel {
    min-height: 120svh;
    display: flex;
    align-items: center;
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  body[data-page="index"] main > .home-panel > .container {
    width: min(1180px, calc(100% - 2rem));
  }

  body[data-page="index"] main > .home-panel .section-intro {
    margin-bottom: 3.2rem;
  }

  body[data-page="index"] main > .home-panel .feature-grid {
    margin-top: 0;
  }

  body[data-page="index"] main > .home-panel .tariff-check-grid {
    gap: 3rem;
  }

  body[data-page="index"] main > .home-panel .tariff-check-copy h2 {
    font-size: clamp(2rem, 2.5vw, 2.8rem);
    line-height: 1.22;
  }

  body[data-page="index"] main > .home-panel .tariff-check-copy p {
    font-size: 1rem;
    line-height: 1.7;
  }

  body[data-page="index"] main > .home-panel .tariff-check-card {
    padding: 1.9rem;
  }

  body[data-page="index"] main > .home-panel .tariff-check-list li {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
}
/* =========================================================
   STARTSEITE - "WAS WIR LEISTEN" GIBT LEERRAUM AN DEN NEUEN
   GOOGLE-BEWERTUNGS-BEREICH DARUEBER AB.
   Bewusst NICHT die allgemeine .home-panel-Regel oben veraendert,
   da .home-panel auch von der Tarifpruefungs-/Orientierungssektion
   genutzt wird. Diese Regel ist per Zusatzklasse .home-panel-services
   spezifischer und ueberschreibt nur min-height/padding fuer genau
   die "Was wir leisten"-Sektion.

   GOLDEN MASTER: die drei .feature-card zusaetzlich von der
   geteilten Karten-Sammelregel (Hintergrund/Rahmen/Radius) befreit
   und durch eine ruhige, typografische Drei-Spalten-Darstellung
   mit feiner oberer Trennlinie ersetzt. Die Sammelregel selbst
   bleibt unangetastet (wirkt weiterhin unveraendert auf allen
   anderen Kartentypen und Seiten).
   ========================================================= */

body[data-page="index"] main > .home-panel-services .feature-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.2s ease;
}

body[data-page="index"] main > .home-panel-services .feature-card:hover,
body[data-page="index"] main > .home-panel-services .feature-card:focus-visible {
  border-top-color: var(--ci-orange);
}

body[data-page="index"] main > .home-panel-services .feature-card h3 {
  font-size: 1.15rem;
}

@media (min-width: 981px) {
  body[data-page="index"] main > .home-panel.home-panel-services {
    min-height: auto;
    /* PHASE 2.3: zusammen mit dem reduzierten .google-reviews-Padding
       ergibt das einen deutlich kompakteren, aber weiterhin bewussten
       Abstand zwischen Kundenstimmen und "Was wir leisten". */
    padding-top: 2.25rem;
    padding-bottom: 6rem;
  }
}

/* Exaktes Gegenstueck zur obigen Desktop-Regel (min-width:981px),
   fehlte bisher fuer <=980px: dort griff mangels eigener Regel die
   allgemeine .section-Basis (padding: 4.5rem 0 = 72px oben), OBEN AUF
   dem eigenen Bottom-Padding von .google-reviews - zwei nicht
   kollabierende Paddings summierten sich zu einem deutlich zu grossen,
   rein leeren Uebergang (gemessen: ca. 140px bei 390px Breite). Diese
   Regel behebt exakt das, mit identischem Selektor-Muster wie oben
   (nur gespiegelter Breakpoint), betrifft also weiterhin ausschliesslich
   "Was wir leisten" auf der Startseite - keine andere .home-panel-
   Nutzung (siehe Kommentar oben) und keine andere Seite. */
@media (max-width: 980px) {
  body[data-page="index"] main > .home-panel.home-panel-services {
    padding-top: 1.5rem;
  }
}

/* =========================================================
   STARTSEITE - TARIFPRUEFUNGS-/ORIENTIERUNGSSEKTION MIT
   NATUERLICHER INHALTSHOEHE.
   Bewusst NICHT die allgemeine .home-panel-Regel oben veraendert
   (die bleibt fuer eventuelle andere Nutzer unangetastet) und
   NICHT tarifpruefung.html beruehrt - diese Regel greift nur ueber
   die Kombination aus .home-panel und der bereits vorhandenen,
   startseiteneigenen Klasse .tariff-check-section. Die bestehende
   Links-Text/Rechts-Card-Komposition bleibt vollstaendig erhalten,
   nur die erzwungene 120svh-Hoehe entfaellt zugunsten kontrollierter
   Section-Paddings.
   ========================================================= */

@media (min-width: 981px) {
  body[data-page="index"] main > .home-panel.tariff-check-section {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 6.5rem;
  }
}

/* =========================================================
   STARTSEITE - ABSCHLUSS-CTA MIT NATUERLICHER HOEHE
   Vorher min-height:72svh (technisch erzwungene Vollbild-Folie).
   Jetzt kontrolliertes, grosszuegiges Padding ohne Viewport-Zwang.
   ========================================================= */

@media (min-width: 981px) {
  body[data-page="index"] .section-cta {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  body[data-page="index"] .section-cta .cta-banner {
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-page="index"] .site-footer {
    padding-top: 4.8rem;
  }
}
/* =========================================================
   LEISTUNGEN - LETZTE CTA-FOLIE OHNE RECHTE INFO-KAESTEN
   ========================================================= */

@media (min-width: 981px) {
  body[data-page="leistungen"] .leistungen-final-cta {
    grid-template-columns: 1fr;
    align-items: center;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: 68px 76px;
    min-height: 470px;
  }

  body[data-page="leistungen"] .leistungen-final-cta-content {
    max-width: 940px;
  }

  body[data-page="leistungen"] .leistungen-final-cta-content h2 {
    max-width: 920px;
  }

  body[data-page="leistungen"] .leistungen-final-cta-content p {
    max-width: 860px;
  }

  body[data-page="leistungen"] .leistungen-final-points {
    max-width: 980px;
  }

  body[data-page="leistungen"] .leistungen-final-side {
    display: none;
  }
}
/* =========================================================
   TARIFPRUEFUNG - BEVORZUGTER KONTAKT WIE KONTAKTFORMULAR
   ========================================================= */

.funnel-contact-preference-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 2px;
}

.funnel-contact-preference-grid.callback-visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.funnel-select-field {
  position: relative;
}

.funnel-select-field select {
  min-height: 52px;
  padding-right: 3rem !important;
  font-weight: 700;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
}

.funnel-select-field select option {
  background-color: #172236;
  color: #f8fafc;
}

.funnel-select-field:has(select)::after {
  content: "▾";
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  color: #f6a51a;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
  z-index: 2;
}

.funnel-select-field:has(select:focus)::after {
  color: #f6a51a;
}

.funnel-callback-time-field {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.funnel-callback-time-field.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.funnel-callback-time-field[hidden] {
  display: none !important;
}

.funnel-callback-time-field.is-custom-time select {
  display: none !important;
}

.funnel-callback-time-field.is-custom-time input {
  display: block !important;
  width: 100%;
}

.funnel-callback-time-field.is-custom-time::after,
.funnel-select-field:has(select[hidden])::after {
  display: none !important;
  content: none !important;
}

.funnel-callback-time-field input[hidden],
.funnel-callback-time-field select[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .funnel-contact-preference-grid,
  .funnel-contact-preference-grid.callback-visible {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   TARIFPRUEFUNG - FEINSCHLIFF AKTUELLER ANBIETER + DATENSCHUTZ
   ========================================================= */

body[data-page="tarifpruefung"] #provider {
  height: 52px;
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  resize: none;
  line-height: 52px;
}

body[data-page="tarifpruefung"] #provider::placeholder {
  line-height: normal;
}

body[data-page="tarifpruefung"] .funnel-check a {
  color: #f6a51a;
  font-weight: 900;
  text-decoration: none;
  text-shadow:
    0 0 8px rgba(246, 165, 26, 0.35),
    0 0 18px rgba(246, 165, 26, 0.18);
}

body[data-page="tarifpruefung"] .funnel-check a:hover {
  color: #ffb733;
  text-shadow:
    0 0 10px rgba(246, 165, 26, 0.5),
    0 0 22px rgba(246, 165, 26, 0.28);
}
/* =========================================================
   TARIFPRUEFUNG - AKTUELLER ANBIETER FINAL FIX
   Anbieter-Feld exakt wie PLZ-Feld
   ========================================================= */

body[data-page="tarifpruefung"] #energyFunnel #provider {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  display: block !important;

  line-height: normal !important;
  resize: none !important;

  border-radius: 14px !important;
  background: #0f263f !important;
  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-sizing: border-box !important;
}

body[data-page="tarifpruefung"] #energyFunnel #provider:focus {
  border-color: #f7a51f !important;
  box-shadow: 0 0 0 3px rgba(247, 165, 31, 0.14) !important;
  outline: none !important;
}

body[data-page="tarifpruefung"] #energyFunnel #postalCode {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
/* =========================================================
   TARIFPRUEFUNG - PROVIDER / PLZ FELDER FINAL AUSRICHTEN
   ========================================================= */

body[data-page="tarifpruefung"] #energyFunnel .funnel-provider-field,
body[data-page="tarifpruefung"] #energyFunnel .funnel-postal-field {
  display: grid !important;
  grid-template-rows: auto 58px !important;
  align-content: start !important;
  gap: 8px !important;
}

body[data-page="tarifpruefung"] #energyFunnel .funnel-provider-field input,
body[data-page="tarifpruefung"] #energyFunnel .funnel-postal-field input {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  display: block !important;
  box-sizing: border-box !important;

  line-height: normal !important;
  resize: none !important;

  color: #ffffff !important;
  background: #0f263f !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;

  font: inherit !important;
  outline: none !important;
}

body[data-page="tarifpruefung"] #energyFunnel .funnel-provider-field input:focus,
body[data-page="tarifpruefung"] #energyFunnel .funnel-postal-field input:focus {
  border-color: #f7a51f !important;
  box-shadow: 0 0 0 3px rgba(247, 165, 31, 0.14) !important;
}

body[data-page="tarifpruefung"] #energyFunnel .funnel-provider-field .optional {
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

body[data-page="tarifpruefung"] #energyFunnel .funnel-postal-field .funnel-location-hint:empty {
  display: none !important;
}

body[data-page="tarifpruefung"] #energyFunnel .funnel-postal-field .funnel-postal-suggestions[hidden] {
  display: none !important;
}
/* =========================================================
   HEADER / MEGA-MENU - LAPTOP VIEWPORT FIX
   Verhindert, dass Dropdowns rechts aus dem Bildschirm laufen
   ========================================================= */

@media (min-width: 981px) {
  .site-header {
    overflow: visible;
  }

  .site-nav,
  .site-nav ul,
  .nav-item {
    overflow: visible;
  }

  .nav-item.has-dropdown {
    position: relative;
  }

  .nav-item.has-dropdown .mega-menu {
    left: auto;
    right: 0;
    width: min(860px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    transform: translateY(14px);
    overflow: hidden;
  }

  .nav-item.has-dropdown:hover .mega-menu,
  .nav-item.has-dropdown:focus-within .mega-menu {
    transform: translateY(0);
  }

  .mega-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    padding: 1.6rem;
  }

  .mega-column {
    min-width: 0;
  }

  .mega-column h3 {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .mega-column a {
    font-size: 0.95rem;
    line-height: 1.18;
    white-space: normal;
  }
}
/* =========================================================
   COOKIE BANNER - KOMPAKTE VERSION FUER LAPTOP / DESKTOP
   ========================================================= */

.cookie-consent__box {
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
}

.cookie-consent__content {
  padding: 2rem 2.2rem 1.8rem;
}

.cookie-consent__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}

.cookie-consent__content h2 {
  font-size: clamp(1.65rem, 2.2vw, 2.15rem);
  margin-bottom: 0.85rem;
}

.cookie-consent__content p {
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.cookie-consent__options {
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.cookie-consent__option {
  padding: 0.95rem 1rem;
  border-radius: 18px;
}

.cookie-consent__option strong {
  font-size: 1rem;
}

.cookie-consent__option small {
  font-size: 0.9rem;
  line-height: 1.35;
}

.cookie-consent__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1rem;
}

.cookie-btn {
  min-height: 48px;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  font-size: 0.98rem;
}

.cookie-consent__links {
  margin-top: 1.15rem;
  font-size: 0.95rem;
}
/* =========================================================
   BRANCHEN - LETZTE FOLIE / FOOTER ABSTAND LAPTOP FIX
   ========================================================= */

@media (min-width: 981px) and (max-height: 850px) {
  body[data-page="branchen"] .branchen-last-slide,
  body[data-page="branchen"] .branche-other-section,
  body[data-page="branchen"] .section-cta {
    min-height: 115svh;
    padding-top: 5.5rem;
    padding-bottom: 8rem;
  }

  body[data-page="branchen"] .site-footer {
    margin-top: 2.5rem;
  }
}
/* =========================================================
   BRANCHEN - LETZTER CONTENTBLOCK VOR FOOTER MEHR LUFT
   ========================================================= */

@media (min-width: 981px) and (max-height: 850px) {
  body[data-page="branchen"] main > section:last-of-type {
    min-height: 120svh;
    padding-top: 5.5rem;
    padding-bottom: 9rem;
  }

  body[data-page="branchen"] .site-footer {
    margin-top: 2.5rem;
  }
}
/* Branchen-Seite: Laptop-Höhen-Fix gegen abgeschnittene Slides */
@media (max-height: 850px) and (min-width: 900px) {
  body[data-page="branchen"] .branchen-snap {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-top: 80px !important;
    padding-bottom: 90px !important;
    scroll-snap-align: none !important;
  }

  body[data-page="branchen"] .branchen-detail-slide,
  body[data-page="branchen"] .branchen-final-slide {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-final-image-card {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="branchen"] .branchen-detail-copy h2,
  body[data-page="branchen"] .branchen-final-copy h2 {
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
    line-height: 1.08 !important;
  }

  body[data-page="branchen"] .branchen-detail-copy p,
  body[data-page="branchen"] .branchen-final-copy p {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }

  body[data-page="branchen"] .branchen-detail-media img,
  body[data-page="branchen"] .branchen-final-media img {
    max-height: 44vh !important;
    object-fit: cover !important;
  }

  body[data-page="branchen"] .branchen-final-contact-button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 28px !important;
  }
}
/* =========================================================
   MOBILE / SMALL SCREEN RESPONSIVE FIX
   Betrifft nur Handy, Tablet und kleine Bildschirme bis 980px
   Desktop ab 981px bleibt unangetastet
   ========================================================= */

@media (max-width: 980px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* row statt column: siehe Kommentar in @media (max-width: 760px)
       weiter oben - gleicher Trigger, gleicher Grund. */
    flex-direction: row;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: rgba(3, 26, 56, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding: 1.25rem 0;

    display: none;
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.3s ease;
  }

  .site-nav.open {
    display: flex;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0;
    width: 100%;
  }

  .site-nav li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    line-height: 1.2 !important;
  }

  .has-dropdown {
    display: block;
  }

  .mega-menu {
    display: none !important;
  }

  .site-header .brand {
    min-width: 0;
    padding: 0;
    border-radius: 0;
  }

  .header-inner {
    padding: 0.65rem 0;
    min-height: 68px;
  }

  .hero-grid,
  .hero-copy,
  .hero-card,
  .feature-card,
  .benefit-card,
  .highlight-card,
  .form-card,
  .contact-form,
  .contact-form-grid,
  .legal-container,
  .legal-card {
    min-width: 0;
    max-width: 100%;
  }

  .card-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .form-card,
  .offer-card,
  .comparison-card,
  .feature-card,
  .benefit-card,
  .testimonial-card,
  .process-card,
  .process-step,
  .cta-banner,
  .highlight-card,
  .map-placeholder,
  .values-card {
    padding: 1.35rem;
    border-radius: 22px;
  }

  .hero h1,
  .page-header h1,
  .section-intro h2,
  .legal-container h1,
  .legal-card h2,
  .hero-copy h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form > *,
  .contact-form-grid > *,
  .form-card > * {
    min-width: 0;
    max-width: 100%;
  }

  .checkbox-field,
  .checkbox-field label {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .checkbox-field label {
    display: block !important;
  }

  .checkbox-field input[type="checkbox"] {
    margin-right: 0.55rem;
    vertical-align: middle;
  }

  .checkbox-field a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 520px) {
  .site-header .brand-wordmark {
    font-size: clamp(0.82rem, 4.2vw, 1rem);
    letter-spacing: 0.025em;
  }

  .site-header .brand-logo-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .header-inner {
    gap: 0.55rem;
  }

  /* Frueher hier: .nav-toggle { padding: 0.35rem; } und
     .nav-toggle span { width: 1.8rem; } - verkleinerten die alte
     3-Balken-Optik auf sehr schmalen Screens. Entfernt: das neue
     Icon+Text-Markup (siehe Zeile ~250) braucht das nicht mehr und
     die generische ".nav-toggle span"-Typselektor-Regel wuerde sonst
     erneut mit dem neuen Markup kollidieren (gleiches Problem wie bei
     den entfernten Regeln oben). 44px-Touch-Ziel bleibt ueber die
     Basis-Regel (min-height:44px, padding:0.5rem 0.9rem) erhalten. */

  .legal-container h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
  }
}
/* =========================================================
   MOBILE FIX 2 – Leistungen + Branchen
   Nur Handy / kleine Bildschirme bis 980px
   Desktop ab 981px bleibt unverändert
   ========================================================= */

@media (max-width: 980px) {
  body[data-page="leistungen"],
  body[data-page="branchen"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  body[data-page="leistungen"] main,
  body[data-page="branchen"] main {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Leistungen: harte Folien-Höhe und Abschneiden entfernen */
  body[data-page="leistungen"] .leistungen-snap,
  body[data-page="leistungen"] #leistung-slide-1 {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    padding-top: clamp(48px, 10vw, 72px) !important;
    padding-bottom: clamp(48px, 10vw, 72px) !important;
  }

  body[data-page="leistungen"] #leistung-slide-1 .container,
  body[data-page="leistungen"] .leistungen-snap > .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
  }

  body[data-page="leistungen"] .leistungen-hero-grid,
  body[data-page="leistungen"] .leistungen-slide-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="leistungen"] .leistungen-hero-copy,
  body[data-page="leistungen"] .leistungen-slide-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body[data-page="leistungen"] .leistungen-hero-copy h1,
  body[data-page="leistungen"] .leistungen-slide-copy h2 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.2vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  body[data-page="leistungen"] .leistungen-hero-copy p,
  body[data-page="leistungen"] .leistungen-slide-copy p {
    max-width: 100% !important;
    font-size: clamp(1rem, 4.4vw, 1.12rem) !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word !important;
  }

  body[data-page="leistungen"] .leistungen-hero-media,
  body[data-page="leistungen"] .leistungen-slide-image {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-page="leistungen"] .leistungen-hero-media img,
  body[data-page="leistungen"] .leistungen-slide-image img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Branchen: harte 100vh-Slides auf Mobile entfernen */
  body[data-page="branchen"] .branchen-snap,
  body[data-page="branchen"] .branchen-detail-slide,
  body[data-page="branchen"] .branchen-final-slide,
  body[data-page="branchen"] .branchen-hero {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    padding-top: clamp(48px, 10vw, 72px) !important;
    padding-bottom: clamp(48px, 10vw, 72px) !important;
  }

  body[data-page="branchen"] .branchen-snap > .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
  }

  body[data-page="branchen"] .branchen-hero-grid,
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-final-image-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="branchen"] .branchen-final-copy,
  body[data-page="branchen"] .branchen-detail-copy,
  body[data-page="branchen"] .branchen-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  body[data-page="branchen"] .branchen-final-copy h2,
  body[data-page="branchen"] .branchen-detail-copy h2,
  body[data-page="branchen"] .branchen-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.2vw, 3.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  body[data-page="branchen"] .branchen-final-copy p,
  body[data-page="branchen"] .branchen-detail-copy p,
  body[data-page="branchen"] .branchen-hero p {
    max-width: 100% !important;
    font-size: clamp(1rem, 4.4vw, 1.12rem) !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word !important;
  }

  body[data-page="branchen"] .branchen-final-media,
  body[data-page="branchen"] .branchen-detail-media {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-page="branchen"] .branchen-final-media img,
  body[data-page="branchen"] .branchen-detail-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  body[data-page="branchen"] .branchen-final-contact-button {
    width: 100% !important;
    max-width: 320px !important;
    margin-top: 1rem !important;
  }
}

@media (max-width: 520px) {
  body[data-page="leistungen"] .leistungen-hero-copy h1,
  body[data-page="leistungen"] .leistungen-slide-copy h2,
  body[data-page="branchen"] .branchen-final-copy h2,
  body[data-page="branchen"] .branchen-detail-copy h2,
  body[data-page="branchen"] .branchen-hero h1 {
    font-size: clamp(2rem, 10.4vw, 2.75rem) !important;
    letter-spacing: -0.055em !important;
  }

  body[data-page="branchen"] .branchen-final-image-card,
  body[data-page="branchen"] .branchen-detail-card {
    padding: 1.35rem !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 430px) {
  body[data-page="leistungen"] .container,
  body[data-page="branchen"] .container {
    width: min(100% - 1.5rem, 1180px) !important;
  }

  body[data-page="leistungen"] .leistungen-hero-grid,
  body[data-page="leistungen"] .leistungen-slide-card,
  body[data-page="branchen"] .branchen-hero-grid,
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-final-image-card {
    padding: 1.15rem !important;
    border-radius: 22px !important;
  }

  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.7rem, 8.8vw, 2.35rem) !important;
    line-height: 1.14 !important;
  }
}

@media (max-width: 360px) {
  body[data-page="leistungen"] .container,
  body[data-page="branchen"] .container {
    width: min(100% - 1.25rem, 1180px) !important;
  }

  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.55rem, 8.4vw, 2.05rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-page="leistungen"] p,
  body[data-page="leistungen"] li,
  body[data-page="branchen"] p,
  body[data-page="branchen"] li {
    font-size: 0.94rem !important;
    line-height: 1.6 !important;
  }
}
/* =========================================================
   PRO RESPONSIVE FIX V2
   Leistungen + Branchen
   Mobile/Tablet = normale Scrollseite
   Desktop ab 981px bleibt unverändert
   ========================================================= */

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: none !important;
  }

  body[data-page="leistungen"],
  body[data-page="branchen"] {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="leistungen"] main,
  body[data-page="branchen"] main {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* Header schützen */
  body[data-page="leistungen"] .site-header,
  body[data-page="branchen"] .site-header {
    height: auto !important;
    min-height: 74px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="leistungen"] .site-header img,
  body[data-page="branchen"] .site-header img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    object-fit: contain !important;
  }

  @media (max-width: 760px) {
    body[data-page="leistungen"] .site-header img,
    body[data-page="branchen"] .site-header img {
      width: 42px !important;
      height: 42px !important;
      max-width: 42px !important;
    }
  }

  /* Alle Slide-Zwänge auf Mobile/Tablet deaktivieren */
  body[data-page="leistungen"] .leistungen-snap,
  body[data-page="leistungen"] .leistungen-hero,
  body[data-page="leistungen"] .leistungen-slide-section,
  body[data-page="leistungen"] .leistungen-story-section,
  body[data-page="leistungen"] .leistungen-last-slide,
  body[data-page="leistungen"] #leistung-slide-1,
  body[data-page="leistungen"] #leistung-slide-2,
  body[data-page="leistungen"] #leistung-slide-3,
  body[data-page="leistungen"] #leistung-slide-4,
  body[data-page="branchen"] .branchen-snap,
  body[data-page="branchen"] .branchen-hero,
  body[data-page="branchen"] .branchen-hero-calm,
  body[data-page="branchen"] .branchen-detail-slide,
  body[data-page="branchen"] .branchen-overview-slide,
  body[data-page="branchen"] .branchen-final-slide,
  body[data-page="branchen"] #branchen-slide-1,
  body[data-page="branchen"] #branchen-slide-2,
  body[data-page="branchen"] #branchen-slide-3,
  body[data-page="branchen"] #branchen-slide-4,
  body[data-page="branchen"] #branchen-slide-5 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    padding-top: clamp(2.5rem, 7vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 7vw, 4rem) !important;
  }

  body[data-page="leistungen"] .container,
  body[data-page="branchen"] .container {
    width: min(100% - 2rem, 1180px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Grids sauber untereinander stapeln */
  body[data-page="leistungen"] .leistungen-hero-grid,
  body[data-page="leistungen"] .leistungen-slide-card,
  body[data-page="leistungen"] .leistungen-steps-grid,
  body[data-page="branchen"] .branchen-hero-grid,
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-slide-card,
  body[data-page="branchen"] .branchen-final-image-card,
  body[data-page="branchen"] .branchen-final-cta,
  body[data-page="branchen"] .branchen-factor-grid,
  body[data-page="branchen"] .branchen-premium-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: clamp(1.2rem, 4vw, 2rem) !important;
    overflow: visible !important;
  }

  /* Karten dürfen wachsen, nichts abschneiden */
  body[data-page="leistungen"] .leistungen-slide-card,
  body[data-page="branchen"] .branchen-detail-card,
  body[data-page="branchen"] .branchen-slide-card,
  body[data-page="branchen"] .branchen-final-image-card,
  body[data-page="branchen"] .branchen-final-cta {
    padding: clamp(1.2rem, 4.5vw, 2rem) !important;
    border-radius: clamp(22px, 5vw, 32px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Textbereiche */
  body[data-page="leistungen"] .leistungen-hero-copy,
  body[data-page="leistungen"] .leistungen-slide-copy,
  body[data-page="branchen"] .branchen-hero-copy,
  body[data-page="branchen"] .branchen-detail-copy,
  body[data-page="branchen"] .branchen-slide-copy,
  body[data-page="branchen"] .branchen-final-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: left !important;
  }

  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.9rem, 7.6vw, 3rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  body[data-page="leistungen"] p,
  body[data-page="leistungen"] li,
  body[data-page="branchen"] p,
  body[data-page="branchen"] li {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word !important;
  }

  /* Nur Content-Bilder, NICHT alle Bilder */
  body[data-page="leistungen"] .leistungen-hero-image,
  body[data-page="leistungen"] .leistungen-image-frame,
  body[data-page="leistungen"] .leistungen-slide-image,
  body[data-page="branchen"] .branchen-hero-media,
  body[data-page="branchen"] .branchen-detail-media,
  body[data-page="branchen"] .branchen-final-media,
  body[data-page="branchen"] .branchen-final-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-page="leistungen"] .leistungen-hero-image img,
  body[data-page="leistungen"] .leistungen-image-frame img,
  body[data-page="leistungen"] .leistungen-slide-image img,
  body[data-page="branchen"] .branchen-hero-media img,
  body[data-page="branchen"] .branchen-detail-media img,
  body[data-page="branchen"] .branchen-final-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: clamp(220px, 45vh, 420px) !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 22px !important;
  }

  /* Riesiges Logo-/Hero-Bild auf Branchen entschärfen */
  body[data-page="branchen"] .branchen-hero-media img {
    max-height: clamp(190px, 38vh, 340px) !important;
    object-fit: cover !important;
  }

  /* Buttons auf Mobile sauber */
  body[data-page="leistungen"] .button,
  body[data-page="branchen"] .button,
  body[data-page="branchen"] .branchen-hero-link,
  body[data-page="branchen"] .branchen-final-contact-button {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body[data-page="leistungen"] .site-footer,
  body[data-page="branchen"] .site-footer {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body[data-page="leistungen"] .container,
  body[data-page="branchen"] .container {
    width: min(100% - 1.4rem, 1180px) !important;
  }

  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.7rem, 8.2vw, 2.35rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-page="leistungen"] p,
  body[data-page="leistungen"] li,
  body[data-page="branchen"] p,
  body[data-page="branchen"] li {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 360px) {
  body[data-page="leistungen"] .container,
  body[data-page="branchen"] .container {
    width: min(100% - 1.15rem, 1180px) !important;
  }

  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.55rem, 7.8vw, 2.05rem) !important;
    line-height: 1.16 !important;
  }
}
/* =========================================================
   PRO MOBILE TYPOGRAPHY FINE TUNING
   Nur Leistungen + Branchen
   Schrift skaliert sauberer auf kleinen Geräten
   ========================================================= */

@media (max-width: 980px) {
  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.75rem, 6.8vw, 2.75rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.03em !important;
    text-wrap: balance;
    hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-page="leistungen"] p,
  body[data-page="leistungen"] li,
  body[data-page="branchen"] p,
  body[data-page="branchen"] li {
    font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important;
    line-height: 1.68 !important;
  }
}

@media (max-width: 430px) {
  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.65rem, 7.1vw, 2.15rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 380px) {
  body[data-page="leistungen"] h1,
  body[data-page="leistungen"] h2,
  body[data-page="branchen"] h1,
  body[data-page="branchen"] h2 {
    font-size: clamp(1.48rem, 6.8vw, 1.95rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.018em !important;
  }

  body[data-page="leistungen"] p,
  body[data-page="leistungen"] li,
  body[data-page="branchen"] p,
  body[data-page="branchen"] li {
    font-size: 0.92rem !important;
    line-height: 1.62 !important;
  }
}
/* =========================================================
   PRO IMAGE FRAME FIX V2
   Nur Leistungen Mobile/Tablet
   Saubere Bildrahmen ohne hässliche Leerflächen
   Desktop bleibt unverändert
   ========================================================= */

@media (max-width: 980px) {
  body[data-page="leistungen"] .leistungen-hero-image,
  body[data-page="leistungen"] .leistungen-hero-media,
  body[data-page="leistungen"] .leistungen-image-frame,
  body[data-page="leistungen"] .leistungen-slide-image {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  body[data-page="leistungen"] .leistungen-hero-image img,
  body[data-page="leistungen"] .leistungen-hero-media img,
  body[data-page="leistungen"] .leistungen-image-frame img,
  body[data-page="leistungen"] .leistungen-slide-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-width: 100% !important;

    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Kleine Handys: Bild etwas kompakter, aber sauber gefüllt */
@media (max-width: 520px) {
  body[data-page="leistungen"] .leistungen-hero-image img,
  body[data-page="leistungen"] .leistungen-hero-media img,
  body[data-page="leistungen"] .leistungen-image-frame img,
  body[data-page="leistungen"] .leistungen-slide-image img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Querformat mit wenig Höhe: Bild niedriger halten, damit nichts riesig wirkt */
@media (max-width: 980px) and (max-height: 500px) {
  body[data-page="leistungen"] .leistungen-hero-image img,
  body[data-page="leistungen"] .leistungen-hero-media img,
  body[data-page="leistungen"] .leistungen-image-frame img,
  body[data-page="leistungen"] .leistungen-slide-image img {
    aspect-ratio: 16 / 7 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Querformat: extrem niedrige Höhe sauber abfangen */
@media (max-width: 980px) and (max-height: 500px) {
  body[data-page="leistungen"] .leistungen-hero-image img,
  body[data-page="leistungen"] .leistungen-hero-media img,
  body[data-page="leistungen"] .leistungen-image-frame img,
  body[data-page="leistungen"] .leistungen-slide-image img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 64svh !important;
  }
}
/* =========================================================
   LEISTUNGEN MOBILE SAFE PADDING FIX
   Verhindert, dass Text am Rand klebt
   Nur Leistungen bis 980px
   Desktop bleibt unverändert
   ========================================================= */

@media (max-width: 980px) {
  body[data-page="leistungen"] .leistungen-hero,
  body[data-page="leistungen"] .leistungen-snap,
  body[data-page="leistungen"] .leistungen-slide-section,
  body[data-page="leistungen"] .leistungen-story-section,
  body[data-page="leistungen"] .leistungen-last-slide {
    padding-left: clamp(1.15rem, 3vw, 2rem) !important;
    padding-right: clamp(1.15rem, 3vw, 2rem) !important;
  }

  body[data-page="leistungen"] .leistungen-hero-grid,
  body[data-page="leistungen"] .leistungen-slide-card {
    padding-left: clamp(1.15rem, 3vw, 2rem) !important;
    padding-right: clamp(1.15rem, 3vw, 2rem) !important;
  }

  body[data-page="leistungen"] .leistungen-hero-copy,
  body[data-page="leistungen"] .leistungen-slide-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 520px) {
  body[data-page="leistungen"] .leistungen-hero,
  body[data-page="leistungen"] .leistungen-snap,
  body[data-page="leistungen"] .leistungen-slide-section,
  body[data-page="leistungen"] .leistungen-story-section,
  body[data-page="leistungen"] .leistungen-last-slide {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* =========================================================
   STARTSEITE HERO - GOOGLE SOCIAL PROOF
   Ganz oben im Hero-Content, oberhalb des Eyebrows. Bewusst
   klein, ohne Pill-Flaeche und ohne CTA-Optik – hochwertiger,
   dezenter Social Proof statt Werbebanner.
   Verifizierte Werte: 5,0 / 5, 11 Bewertungen.
   Bewusst kein Link, solange keine verifizierte Google-Profil-URL vorliegt.
   Es gibt genau eine Instanz dieser Zeile im Hero.
   ========================================================= */

.hero-google-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  color: rgba(255, 255, 255, 0.78);
}

/*
  Die globale .eyebrow-Regel ("EYEBROW LABEL UNIFIED FINAL", siehe
  weiter unten in dieser Datei) macht aus jedem Eyebrow site-weit ein
  Pill-Badge mit Glow-Schatten. Diese Regel bleibt fuer alle anderen
  Seiten unveraendert. Nur im Startseiten-Hero soll der Eyebrow gemaess
  Golden-Master-Vorgabe klein und dezent ohne Pill-Flaeche wirken –
  gleiches Muster wie bereits bei .leistungen-hero-copy .eyebrow und
  body[data-page="branchen"] .branchen-hero-copy .eyebrow im Projekt.
*/
body[data-page="index"] .hero-home-copy .eyebrow {
  background: none !important;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.hero-google-mark svg {
  display: block;
  width: 14px;
  height: 14px;
}

.hero-google-stars {
  position: relative;
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

.hero-google-stars::before {
  content: "\2605\2605\2605\2605\2605";
}

.hero-google-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--rating-percent, 100%);
  color: var(--ci-orange);
  white-space: nowrap;
}

.hero-google-stars-fill::before {
  content: "\2605\2605\2605\2605\2605";
}

.hero-google-score {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ci-white);
}

.hero-google-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
}

/* =========================================================
   STARTSEITE - GOOGLE-KUNDENSTIMMEN (LAUFBAND)
   Nutzt den Leerraum zwischen Hero und "Was wir leisten".
   Bewegung wird von assets/js/google-reviews.js gesteuert
   (per requestAnimationFrame + transform), damit Hover-/Fokus-
   Pause, Drag/Swipe und Reduced-Motion sauber zusammenspielen.
   Ohne aktives JavaScript bleibt der Bereich ein normal
   horizontal scrollbarer Bereich (progressive enhancement).
   ========================================================= */

.google-reviews {
  position: relative;
  overflow: hidden;
  /* PHASE 2.3: unteres Padding reduziert, damit der Uebergang zu
     "Was wir leisten" als bewusster, aber kompakter Section-Abstand
     wirkt statt als grosse leere Flaeche. */
  padding: 3.8rem 0 2.6rem;
}

/* Editorialer Split-Header statt reiner Zentrierung: links die Copy
   (Eyebrow + H2), rechts der Google-Rating-Trust-Baustein - beide
   Seiten der Zeile sind bewusst besetzt, statt einen schmalen,
   linksbuendigen Textblock in grosser leerer Flaeche stehen zu lassen
   (reine max-width+margin:auto-Zentrierung loeste das in einem
   fruehreren Stand nur mathematisch, nicht kompositorisch). Der
   Rating-Baustein uebernimmt bewusst 1:1 die im Hero bereits etablierte,
   kartenlose Optik (siehe .hero-google-rating): Score, Sterne,
   Google-"G"-Kennzeichnung, Anzahl - flach, ohne Card/Glow/Pill. Volle
   .container-Breite (min(1180px, 100% - 2rem)) statt eigener max-width,
   damit sich der Kopf am selben Raster wie die Review-Karten darunter
   orientiert. flex-wrap als Sicherheitsnetz fuer Zwischenbreiten;
   der eigentliche Split/Stack-Wechsel passiert kontrolliert in der
   Media Query weiter unten. */
.google-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 3rem;
  row-gap: 1.4rem;
  margin-bottom: 2.6rem;
}

.google-reviews-head-copy {
  max-width: 34rem;
}

.google-reviews-head h2 {
  margin: 0.5rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.google-reviews-summary {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.google-reviews-summary strong {
  color: var(--text);
}

/* Google-"G"-Kennzeichnung im Rating-Baustein: exakt dieselbe Original-
   Markendarstellung (4-farbiges "G", identische Pfade) wie bereits im
   Hero (.hero-google-mark) verwendet - keine neue/abweichende Asset-
   Quelle, nur an dieser Stelle wiederverwendet. */
.google-reviews-mark svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Gleiche Sterne-Technik wie .hero-google-stars (zweilagiger Text mit
   --rating-percent), damit Hero und Kundenstimmen-Kopf konsistent
   dieselbe Darstellung "5,0 ★★★★★ · 11 Google-Bewertungen" nutzen. */
.google-reviews-stars {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

.google-reviews-stars::before {
  content: "\2605\2605\2605\2605\2605";
}

.google-reviews-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--rating-percent, 100%);
  color: var(--ci-orange);
  white-space: nowrap;
}

.google-reviews-stars-fill::before {
  content: "\2605\2605\2605\2605\2605";
}

.google-reviews-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.google-reviews-viewport::-webkit-scrollbar {
  display: none;
}

.google-reviews-viewport:active,
.google-reviews-viewport.is-dragging {
  cursor: grabbing;
}

.google-reviews-viewport:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 4px;
}

.google-reviews-track {
  display: flex;
  /* Ohne explizites align-items strecken Flex-Items standardmaessig
     (align-items: stretch) auf die Hoehe der jeweils hoechsten Karte -
     dadurch bekamen bisher auch kurze Ein-Zeilen-Bewertungen (z. B.
     "Super Firma, praezise und schnell") dieselbe grosse Hoehe wie die
     laengste Karte im Set. flex-start laesst jede Karte auf ihre
     eigene Inhaltshoehe schrumpfen. */
  align-items: flex-start;
  gap: 1.25rem;
  width: max-content;
  padding: 0.3rem clamp(1rem, 4vw, 3rem);
  will-change: transform;
}

.google-review-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 0 0 clamp(280px, 26vw, 340px);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
}

.google-review-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.google-review-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.google-review-author {
  display: block;
  font-size: 0.95rem;
}

.google-review-date {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Sternebewertung pro Karte: nutzt dieselbe Sterne-Technik wie
   .google-reviews-summary (Kopfbereich), aber als eigenstaendiges
   Flex-Item einer .google-review-card (flex-direction: column) -
   align-self: flex-start verhindert, dass das sonst auto-breite
   Inline-Block-Element durch den Stretch-Default auf Kartenbreite
   gezogen wird. */
.google-review-card > .google-reviews-stars {
  align-self: flex-start;
}

.google-review-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Split-Header loest sich unterhalb von 900px in einen sauberen Stack
   auf (Eyebrow, H2, Rating-Zeile untereinander) - 900px statt der
   sonst in dieser Sektion ueblichen 760px, weil bei ~768px Viewport-
   breite (Tablet Hochformat) im Container (max. 1180px, aber real
   768 - 32px Padding = 736px) fuer Copy-Spalte + Rating-Baustein
   nebeneinander bereits zu wenig Platz ist. Betrifft ausschliesslich
   den Kopfbereich, die Review-Karten-Breakpoints darunter bleiben
   unangetastet. */
@media (max-width: 900px) {
  .google-reviews-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .google-reviews-head-copy {
    max-width: none;
  }

  .google-reviews-summary {
    margin-top: 0.6rem;
  }
}

/* Karten bei <=760px deutlich kompakter: schmalere Breite (~80vw,
   gedeckelt bei 312px - naechste Karte bleibt am rechten Rand leicht
   sichtbar als Swipe-Hinweis), engere Innenabstaende/Avatar/Typografie.
   Ersetzt die bisher getrennten 760px-/620px-Regeln durch einen
   einzigen konsistenten Block (vorher gab es zwischen 621-760px gar
   keine eigene Breiten-Regel mehr, nur den festen 280px-Basiswert).
   Keine explizite Hoehe gesetzt - Karten hoeren wo ihr Inhalt endet
   (siehe .google-reviews-track align-items: flex-start oben). */
@media (max-width: 760px) {
  .google-reviews {
    padding: 2.6rem 0 2rem;
  }

  .google-reviews-track {
    gap: 0.85rem;
    padding: 0.3rem 1rem;
  }

  .google-review-card {
    flex-basis: min(80vw, 312px);
    gap: 0.6rem;
    padding: 1rem;
    border-radius: 12px;
  }

  .google-review-top {
    gap: 0.55rem;
  }

  .google-review-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.76rem;
  }

  .google-review-author {
    font-size: 0.88rem;
  }

  .google-review-date {
    font-size: 0.72rem;
  }

  .google-review-text {
    font-size: 0.86rem;
    line-height: 1.5;
  }
}

/* Nutzer respektieren, die reduzierte Bewegung eingestellt haben.
   assets/js/google-reviews.js startet die Animation bei
   prefers-reduced-motion:reduce erst gar nicht; dieser Block ist
   eine zusaetzliche CSS-seitige Absicherung ohne JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .google-reviews-track {
    transition: none;
  }
}

/* =========================================================
   STARTSEITE - BRANCHEN ALS RUHIGE LINKLISTE
   Ersetzt das vorherige 10-Card-Raster (das dieselbe .benefit-card/
   .benefits-grid-Sammelregel wie leistungen.html nutzt und daher
   NICHT veraendert werden durfte). Komplett neue, startseiteneigene
   Klassen - .benefit-card/.benefits-grid bleiben auf beiden Seiten
   unangetastet. Alle neun Branchen bleiben als echte, klickbare
   interne Links zu branchen.html erhalten.
   ========================================================= */

.branch-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.branch-link {
  display: block;
  padding: 1.6rem 1.75rem 1.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  transition: background-color 0.2s ease;
}

.branch-link:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.branch-link:nth-child(even) {
  padding-left: 1.75rem;
  padding-right: 0;
}

.branch-link:hover,
.branch-link:focus-visible {
  background: rgba(255, 255, 255, 0.03);
}

.branch-link:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: -2px;
}

.branch-link h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.branch-link h3::after {
  content: "\2192";
  color: var(--ci-orange);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.branch-link:hover h3::after,
.branch-link:focus-visible h3::after {
  opacity: 1;
  transform: translateX(0);
}

.branch-link p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.branch-links-outro {
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.branch-links-outro p {
  margin: 0;
  max-width: 40rem;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .branch-links {
    grid-template-columns: 1fr;
  }

  .branch-link,
  .branch-link:nth-child(odd),
  .branch-link:nth-child(even) {
    padding: 1.3rem 0;
    border-right: none;
  }

  .branch-links-outro {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   STARTSEITE - ANBIETER-/MARKTLEISTE (PHASE 2.1 TEST)
   Schmale, ruhige Leiste zwischen Hero und Kundenstimmen.
   Zeigt bekannte Energieanbieter als neutralen Marktvergleich,
   OHNE Partnerschaft zu behaupten. Keine Logo-Dateien vorhanden,
   daher bewusst typografische Namen statt nachgebauter Logos.
   Bewegung links -> rechts (Gegenrichtung zum Google-Laufband),
   gesteuert von assets/js/provider-strip.js. Kein eigener
   Hintergrund - die Leiste nutzt den Body-Grundverlauf, damit sie
   sich wie Teil des Uebergangs anfuehlt statt wie eine Extra-Section.
   ========================================================= */

.provider-strip {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.provider-strip-heading {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto 0.7rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

/* PHASE 2.x-Fix (abgeschnittene Partnerleiste): mask-image lag zuvor
   direkt auf diesem Element, das GLEICHZEITIG overflow-x:auto (Scroll-
   Container) war. mask-image + overflow:auto auf demselben Element ist
   eine bekannt fragile Kombination fuer Chromium-Compositing - der
   Rasterizer kann die Maske gegen leicht abweichende (subpixel-)
   Layer-Bounds legen als der eigentliche Scroll-Inhalt, was zu
   zufaelligem, unterschiedlichem Abschneiden je nach Zoom/Breite
   fuehren kann. Maske jetzt auf dem nicht-scrollenden Eltern-Wrapper
   .provider-strip-mask (siehe unten), dieses Element bleibt reiner
   Scroll-Container ohne eigene Maske. */
.provider-strip-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

.provider-strip-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}

.provider-strip-viewport::-webkit-scrollbar {
  display: none;
}

.provider-strip-viewport:active,
.provider-strip-viewport.is-dragging {
  cursor: grabbing;
}

.provider-strip-viewport:focus-visible {
  outline: 2px solid var(--ci-orange);
  outline-offset: 4px;
}

.provider-strip-track {
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 6vw, 4.75rem);
  width: max-content;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
  /* Explizite, grosszuegige Hoehe statt implizitem Auto-Sizing anhand
     der Logo-Hoehe: dieselbe clamp()-Formel wie .provider-strip-item
     img plus Sicherheitsabstand oben/unten. Implizite, oft subpixel-
     grosse Hoehen (z.B. 31.78125px) waren die zweite Zutat des
     Clipping-Bugs (siehe .provider-strip-mask-Kommentar) - eine
     grosszuegig bemessene, stabile Box mit align-items:center macht
     jedes Logo unabhaengig von Zoom/Breite sicher unclipped. */
  height: calc(clamp(20px, 2.4vw, 27px) + 18px);
  list-style: none;
  will-change: transform;
}

.provider-strip-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  user-select: none;
}

/* Echte Partnerlogos (siehe HTML-Kommentar oberhalb der Section fuer
   Quellen/Herkunft). Hoehe normalisiert statt Breite, damit jedes Logo
   sein Original-Seitenverhaeltnis behaelt und nicht verzerrt wird -
   eine schmale Wortmarke (z.B. Vattenfall) bleibt dadurch automatisch
   breiter als eine quadratische Bildmarke (z.B. Yello), beide aber
   optisch gleich "schwer".
   Filter bewusst grayscale+invert (NICHT brightness(0)+invert): Bei
   Logos mit zwei Farbtoenen im selben Motiv (Yello: gelber Kreis +
   schwarzer Schriftzug) wuerde brightness(0) beide Toene zu reinem
   Schwarz zusammenfallen lassen, invert(1) macht daraus dann eine
   nicht mehr lesbare, komplett weisse Flaeche ohne erkennbaren
   Schriftzug. grayscale(1) erhaelt die relative Helligkeit (dunkle
   Farben bleiben dunkler als helle), invert(1) macht daraus einheit-
   lich helle Silhouetten auf dem dunklen Navy-Grund, aber mit noch
   erkennbarem internem Kontrast; contrast(1.15) zieht das Ergebnis
   wieder naeher an Schwarz/Weiss statt reinem Grau. */
.provider-strip-item img {
  display: block;
  height: clamp(20px, 2.4vw, 27px);
  width: auto;
  filter: grayscale(1) invert(1) contrast(1.15);
  opacity: 0.68;
  transition: opacity 0.2s ease;
}

.provider-strip-item:hover img,
.provider-strip-item:focus-visible img {
  opacity: 0.92;
}

@media (max-width: 620px) {
  .provider-strip {
    padding: 1.2rem 0;
  }

  .provider-strip-heading {
    margin-bottom: 0.5rem;
  }

  .provider-strip-track {
    gap: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .provider-strip-track {
    transition: none;
  }
}