/* =============================================================
   INTRO-OVERLAY: flackerfreies Unterdrücken
   Wird gesetzt, wenn das Overlay in dieser Session bereits gezeigt
   wurde (siehe assets/js/index-page-early.js). Liegt bewusst hier
   in der Theme-CSS, damit kein <style>-Inline im HTML mehr nötig ist.
   ============================================================= */
html.intro-skip #intro-overlay { display: none !important; }


/* =============================================================
   CUSTOM FONTS
   ============================================================= */
@font-face {
  font-family: 'ScienceGothic';
  src: url('../fonts/ScienceGothic-VariableFont_CTRS,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Roboto - lokal, konsolidiert auf Variable-Fonts */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/static/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/static/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/**
 * I.DO.ONE - Theme Override
 * Farben: #3FCE61 Original Green | #031926 Deep System Blue | #052A3D Surface | #ED254E Alert Red
 * Alle Änderungen hier; main.css bleibt unverändert.
 *
 * Überschriebene Selector-Gruppen:
 * 1) :root - globale CSS-Variablen (background, surface, heading, default, accent, contrast)
 * 2) body / body::before - globaler Dark-Gradient als fixed Layer
 * 3) section, .section, .light-background - transparent, damit Gradient sichtbar bleibt
 * 4) .header - Glasmorphism (blur) ungescrollt, opak gescrollt
 * 5) Nav (mobile + dropdown) - angepasste Hintergründe auf Dark
 * 6) .hero - Grün-Verlauf, Bild entfernt
 * 7) Card-Elemente (.icon-box, .features-item, .pricing-item, .faq-item, .info-item, .member) - Dark Surface
 * 8) Typografie - Lesbarkeit auf dunklem Hintergrund sichergestellt
 */

/* =============================================================
   1. LOGO
   ============================================================= */
.header .logo {
  display: flex !important;
  align-items: center !important;
}

.header .logo img {
  display: block !important;
  max-height: 50px !important;
  width: auto !important;
  height: 50px !important;
  margin-right: 0 !important;
  object-fit: contain !important;
}

.header .logo .visually-hidden {
  display: none !important;
}

/* =============================================================
   2. GLOBALE CSS-VARIABLEN
   ============================================================= */
:root {
  --accent-color:    #00ddcc;
  --accent-color-rgb: 0, 221, 204;

  --background-color:#031926;
  --surface-color:   #052a3d;
  --default-color:   #ffffff;
  --heading-color:   #ffffff;
  --contrast-color:  #031926;

  /* Nav auf Dark */
  --nav-color:                    #ffffff;
  --nav-hover-color:              var(--accent-color);
  --nav-mobile-background-color:  #031926;
  --nav-dropdown-background-color:#052a3d;
  --nav-dropdown-color:           #ffffff;
  --nav-dropdown-hover-color:     var(--accent-color);
}

/* Light-Background Sections bekommen ebenfalls Dark Surface */
.light-background {
  --background-color: transparent;
  --surface-color:    #052a3d;
}

/* Dark-Background Sections */
.dark-background {
  --background-color: transparent;
  --surface-color:    #052a3d;
}

/* Bootstrap-Primärfarbe überschreiben */
:root,
[data-bs-theme="light"] {
  --bs-primary:              var(--accent-color);
  --bs-primary-rgb:          var(--accent-color-rgb);
  --bs-primary-text-emphasis:#1a5230;
  --bs-primary-bg-subtle:    #0d2e18;
  --bs-primary-border-subtle:#1d6133;
  --bs-success:              var(--accent-color);
  --bs-success-rgb:          var(--accent-color-rgb);
  --bs-link-color:           var(--accent-color);
  --bs-link-color-rgb:       var(--accent-color-rgb);
  --bs-link-hover-color:     rgba(var(--accent-color-rgb), 0.85);
  --bs-focus-ring-color:     rgba(var(--accent-color-rgb), 0.25);
}

/* =============================================================
   3. BODY - GLOBALER DARK GRADIENT ALS FIXED LAYER
   ============================================================= */
body {
  background: #031926 !important;
  color: var(--default-color);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      #031926  0%,
      #052a3d 35%,
      #1a6b3a 70%,
      var(--accent-color) 100%
    );
}

/* =============================================================
   4. SECTIONS - TRANSPARENT, DAMIT BODY-GRADIENT DURCHSCHEINT
   ============================================================= */
section,
.section {
  background-color: transparent !important;
  color: var(--default-color);
}

/* Kompaktere vertikale Abstaende zwischen den Sektionen.
   Hero, Image-Claim, Hive und catalog haben eigene Padding-Logik und werden ausgeschlossen.
   .catalog wird explizit ausgeschlossen, damit sein eigenes padding-top den
   fixed Header korrekt freihaelt (sonst wuerde die hoehere Spezifitaet dieser
   Regel .catalog { padding-top: 120px/100px } uebersteuern). */
section:not(.hero):not(.idoone-image-claim):not(.the-hive):not(.catalog),
.section:not(.hero):not(.idoone-image-claim):not(.the-hive):not(.catalog) {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 767px) {
  section:not(.hero):not(.idoone-image-claim):not(.the-hive):not(.catalog),
  .section:not(.hero):not(.idoone-image-claim):not(.the-hive):not(.catalog) {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* Light-Background Sections: transparent wie dark-background –
   globaler Gradient scheint auf allen Seiten nahtlos durch */
.light-background {
  background-color: transparent !important;
}

/* Testimonials: eigenes Hintergrundbild und Overlay ausblenden,
   damit der globale Gradient sichtbar wird */
.testimonials .testimonials-bg {
  display: none !important;
}
.testimonials::before {
  background: transparent !important;
}

/* =============================================================
   5. TYPOGRAFIE AUF DARK
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}

h3 {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
}

.text-accent-green {
  color: rgba(var(--accent-color-rgb), 0.85);
}

p, li, .content p {
  color: #ffffff;
}

a {
  color: var(--accent-color);
}

a:hover {
  color: rgba(var(--accent-color-rgb), 0.85);
}

/* Section-Titel: ScienceGothic wie andere Überschriften, nicht fett */
.section-title,
.section-title h2,
.section-title div {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
}

/* Section-Titel Underline auf Grün */
.section-title h2 {
  color: var(--accent-color);
  letter-spacing: 1px;
  font-size: calc(1.05rem + 0.65vw);
  line-height: 1.35;
  font-weight: 300 !important;
  /* Flex: Text und Trennlinie leben als stabile Items auf einer Reihe –
     verhindert Umbruch der ::after-Linie bei längerem h2-Text */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

/* Trennlinie: Flex-Item statt inline-block – kein Zeilenumbruch mehr */
.section-title h2::after {
  content: "";
  flex: 0 0 70px;   /* feste Breite, wächst und schrumpft nicht */
  height: 1px;
  background: var(--accent-color);
  display: block;   /* inline-block aus main.css überschreiben */
  margin: 0;        /* margin aus main.css zurücksetzen */
}

@media (min-width: 1200px) {
  .section-title h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {
  .section-title h2 {
    font-size: calc(1.0rem + 0.5vw);
  }
}

.section-title p {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  margin-top: 0.5rem !important;
}

/* =============================================================
   6. HEADER / NAV
   ============================================================= */
.header {
  background: rgba(3, 25, 38, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.12);
}

.scrolled .header {
  background: rgba(3, 25, 38, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  --background-color: rgba(3, 25, 38, 0.92);
}

/* Mobile Nav */
@media (max-width: 1199px) {
  .navmenu {
    background-color: #031926 !important;
  }

  .navmenu ul {
    background-color: #031926 !important;
  }

  /* Fix: backdrop-filter auf .header erzeugt einen Containing-Block, der
     position: fixed-Kinder einsperrt. Dadurch wurde das mobile Overlay
     (.mobile-nav-active .navmenu { position: fixed; inset: 0 }) auf den
     schmalen Headerstreifen reduziert. Bei aktivem Mobile-Menü muss der
     Blur-Effekt daher aussetzen, damit das Overlay den Viewport füllt. */
  .mobile-nav-active .header,
  .mobile-nav-active.scrolled .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Dropdown */
.navmenu .dropdown ul {
  background-color: #052a3d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navmenu .dropdown ul a {
  color: #ffffff !important;
}

.navmenu .dropdown ul a:hover {
  color: var(--accent-color) !important;
}

/* =============================================================
   7. HERO - KEIN HINTERGRUNDBILD, GRÜN-VERLAUF, HÖHE
   ============================================================= */
.hero .hero-bg {
  display: none !important;
}

.hero.dark-background {
  /* body::before liefert denselben Gradienten als fixed Layer –
     die Hero-Section bleibt transparent und zeigt ihn durch. */
  background: transparent !important;
}

.hero.dark-background::before {
  background: transparent !important;
}

/* Hero - exakt ein Viewport hoch, passt sich ans Fenster an */
.hero {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 90px !important;
    padding-bottom: 80px !important;
  }
}

/* ── Hero Button - Gradient aus Farbvorgabe ────────────────── */
.hero .btn-get-started {
  background:
    radial-gradient(ellipse at 18% 50%, rgba(var(--accent-color-rgb), 0.55) 0%, transparent 58%),
    linear-gradient(90deg, #1a5230 0%, #031926 55%, #1e6b40 100%) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 42px !important;
  font-size: 15px !important;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 28px rgba(3, 25, 38, 0.55), 0 2px 8px rgba(var(--accent-color-rgb), 0.15) !important;
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}

.hero .btn-get-started:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 8px 36px rgba(3, 25, 38, 0.65), 0 4px 16px rgba(var(--accent-color-rgb), 0.25) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* ── Hero Container: über das :before-Overlay heben (z-index: 2) ── */
/* main.css hebt nur .container, die Seite nutzt .container-fluid    */
.hero .container-fluid,
.hero .container-xl {
  position: relative;
  z-index: 3;
}

/* =============================================================
   HERO TOP TITLE - zentrierter Titel oberhalb des bestehenden
   Hero-Layouts (Carousel + Icons). Per position: absolute aus
   dem Flex-Flow gehoben, damit das bestehende vertikal zentrierte
   Hero-Layout darunter unveraendert bleibt.
   ============================================================= */
.hero .hero-top-title {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 1.25rem 1.5rem 0;
  pointer-events: none;
}

.hero .hero-top-title-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  pointer-events: auto;
}

.hero .hero-top-title-text {
  margin: 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 991.98px) {
  .hero .hero-top-title {
    top: 90px;
    padding: 0.75rem 1rem 0;
  }

  .hero .hero-top-title-text {
    font-size: clamp(0.92rem, 3.4vw, 1.15rem);
    line-height: 1.4;
  }
}

/* ── Hero Text (Mitte) ─────────────────────────────────────── */
.hero .hero-text-col {
  text-align: center;
  align-items: center;
}

.hero .hero-text-col .d-flex {
  justify-content: center;
}

/* =============================================================
   SCROLL-OFFSET FIX - About-Anchor springt exakt unter den Header
   ============================================================= */
#about {
  scroll-margin-top: 72px;
}

@media (max-width: 1199px) {
  #about {
    scroll-margin-top: 66px;
  }
}

/* =============================================================
   CONCEPT SECTION - nahtlos an Hero anschließend
   ============================================================= */

/* body::before liefert den globalen Gradienten – Concept-Section
   bleibt transparent und zeigt ihn nahtlos durch. */
.concept-section {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
}

/* ── Typografische Konzeptaussagen ── */
/* Grid auf dem Container: Spalte 1 = alle Labels, Spalte 2 = alle Texte.
   justify-content:center schiebt beide Spalten gemeinsam in die Mitte.   */
.concept-statements {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 44px;
  justify-content: center;
}

/* display:contents hebt die Zeile visuell auf - Label und Text nehmen
   direkt am Parent-Grid teil und rasten in die gemeinsamen Spalten ein.  */
.concept-stmnt-line {
  display: contents;
}

/* Abstände zwischen den Zeilen */
.concept-stmnt-label,
.concept-stmnt-text {
  padding: 38px 0;
  align-self: baseline;
}

.concept-stmnt-label {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 400;
  font-size: calc(1.325rem + 0.9vw);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-color);
  line-height: 1.2;
  padding-top: calc(38px + 0.35em);
  text-align: left;
}

.concept-stmnt-text {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 300;
  font-size: calc(1.05rem + 0.65vw);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.35;
}

@media (min-width: 1200px) {
  .concept-stmnt-label {
    font-size: 2rem;
  }
  .concept-stmnt-text {
    font-size: 1.5rem;
  }
}

.concept-stmnt-support {
  margin-top: 48px;
  margin-bottom: 0;
  color: #ffffff;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.78;
  max-width: 700px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .concept-statements {
    display: flex;
    flex-direction: column;
  }

  .concept-stmnt-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .concept-stmnt-line:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  /* Borders wieder auf der Zeile - einzelne Zellen brauchen sie nicht mehr */
  .concept-stmnt-label,
  .concept-stmnt-text {
    border-bottom: none;
    border-top: none;
    padding: 0;
    align-self: auto;
  }

  .concept-stmnt-label {
    font-size: calc(1.325rem + 0.9vw);
    padding-top: 0;
    text-align: left;
  }

  .concept-stmnt-text {
    font-size: calc(1.0rem + 0.5vw);
    padding-top: 0;
  }

  .concept-stmnt-support {
    margin-top: 32px;
    font-size: 0.92rem;
  }
}

/* ── Hero Icons Panel (gemeinsame Basis) ───────────────────── */
.hero .hero-icons-panel {
  align-items: center;
}

/* ── Icon-Grid Links: 3 Icons, Spalte, mittleres versetzt ──── */
.hero .hero-icons-grid-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ── Icon-Grid Rechts: 4 Icons, 2×2 Raster ─────────────────── */
.hero .hero-icons-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* ── Einzelnes Hex-Icon ─────────────────────────────────────── */
.hero .hero-hex-icon {
  width: 180px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(var(--accent-color-rgb), 0.22));
}

/* Versatz-Helfer für Waben-Optik - links */
.hero .hero-hex-icon.hi-shift-right {
  transform: translateX(28px);
}

/* Versatz-Helfer für Waben-Optik - rechts (Spiegelbild) */
.hero .hero-hex-icon.hi-shift-left {
  transform: translateX(-28px);
}

/* ── Mobile: Text zentriert, Icons ausgeblendet ─────────────── */
@media (max-width: 991px) {
  .hero .hero-text-col {
    text-align: center !important;
    align-items: center !important;
  }

  .hero .hero-text-col .d-flex {
    justify-content: center !important;
  }
}

/* PROMPT B - Hero Höhe (Mobile) */
@media (max-width: 768px) {
  .hero {
    min-height: 86vh !important;
    padding-top: 140px !important;
    padding-bottom: 120px !important;
  }
}

/* Waves - Position und Fade-Transition beim Scrollen */
.hero .hero-waves {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Klasse wird per JS beim Scrollen gesetzt */
.hero .hero-waves.waves-hidden {
  opacity: 0 !important;
}

.hero .wave1 use { opacity: 0.18 !important; }
.hero .wave2 use { opacity: 0.12 !important; }
.hero .wave3 use { opacity: 0.22 !important; }

/* Hero Carousel - zentrale Textspalte */
#home .hero-carousel {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0.75rem 0 1.5rem;
}

#home .hero-carousel-content {
  text-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 0 1rem;
}

#home .hero-carousel-title {
  margin: 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 2.3rem);
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #ffffff;
}

#home .hero-carousel-subline {
  margin: 0 auto;
  max-width: 56ch;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(0.88rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 1);
  transition: color 0.3s ease;
}

#home .hero-carousel-control {
  width: 44px;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

#home .hero-carousel-control:hover,
#home .hero-carousel-control:focus {
  opacity: 0.9;
}

#home .hero-carousel-control .carousel-control-prev-icon,
#home .hero-carousel-control .carousel-control-next-icon {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 992px) {
  #home .hero-carousel .hero-carousel-control {
    opacity: 0;
  }

  #home .hero-carousel:hover .hero-carousel-control,
  #home .hero-carousel:focus-within .hero-carousel-control {
    opacity: 0.45;
  }

  #home .hero-carousel:hover .hero-carousel-control:hover,
  #home .hero-carousel .hero-carousel-control:focus {
    opacity: 0.9;
  }
}

#home .hero-carousel-indicators {
  position: static;
  margin: 1.25rem 0 0;
  gap: 0.45rem;
}

#home .hero-carousel-indicators [data-bs-target] {
  width: 30px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

#home .hero-carousel-indicators .active {
  background-color: var(--accent-color);
}

#home .hero-carousel-title--link {
  cursor: pointer;
  transition: color 0.3s ease;
}

#home .hero-carousel-title--link:hover {
  color: var(--accent-color);
}

/* ── Aktives Carousel-Item: dezenter Interaktionshinweis ──── */
#home .carousel-item.active .hero-carousel-content {
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.35s ease;
}

#home .carousel-item.active .hero-carousel-content:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

#home .carousel-item.active .hero-carousel-content:hover .hero-carousel-title {
  color: var(--accent-color);
}

#home .carousel-item.active .hero-carousel-content:hover .hero-carousel-subline {
  color: rgba(255, 255, 255, 1);
}

@media (max-width: 991.98px) {
  #home .hero-carousel-content {
    min-height: 240px;
    gap: 1rem;
    padding: 0 0.25rem;
  }

  #home .hero-carousel-title {
    font-size: clamp(1.75rem, 8vw, 2.8rem);
  }

  #home .hero-carousel-subline {
    font-size: clamp(0.88rem, 3.8vw, 1.05rem);
    line-height: 1.55;
  }
}

/* =============================================================
   8. DARK SURFACE SYSTEM - TOKENS + CARDS (PROMPT C)
   ============================================================= */

/* 8a. Design-Tokens */
:root {
  --surface-1:     rgba(5, 42, 61, 0.93);
  --surface-2:     rgba(3, 25, 38, 0.55);
  --stroke-1:      rgba(255, 255, 255, 0.06);
  --stroke-accent: rgba(var(--accent-color-rgb), 0.18);
  --shadow-1:      0 12px 30px rgba(0, 0, 0, 0.35);
}

/* 8b. Card-Basis - alle kartenartigen Elemente */
.about .icon-box,
.features .features-item,
.details .features-item,
.pricing .pricing-item,
.faq .faq-container .faq-item,
.contact .info-item,
.team .member {
  background:    var(--surface-1) !important;
  border:        1px solid var(--stroke-1) !important;
  box-shadow:    var(--shadow-1) !important;
  border-radius: 8px;
  transition:    border-color 0.3s ease, box-shadow 0.3s ease;
}

.about .icon-box,
#alarm-to-solution .faq-container .faq-item {
  background:    rgba(26, 107, 58, 0.22) !important;
  border:        1px solid rgba(var(--accent-color-rgb), 0.25) !important;
}

.about .icon-box {
  border-radius: 24px !important;
  padding:       40px 32px !important;
}

/* 8c. Card-Hover - subtil, kein Neon-Overload */
.features .features-item:hover,
.details .features-item:hover,
.pricing .pricing-item:hover,
.faq .faq-container .faq-item:hover,
.contact .info-item:hover,
.team .member:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
}

/* icon-box Hover: dezenter grüner Rand, kein hektischer Glow */
.about .icon-box:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28) !important;
}

/* 8d. About Icon-Box */
.about .icon-box h3 {
  color: rgba(255, 255, 255, 0.85);
}

.about .icon-box p {
  color: #ffffff;
}

.about .icon-box i {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 80px;
  line-height: 1;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: rgba(var(--accent-color-rgb), 0.12) !important;
  color: var(--accent-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.about .icon-box:hover i {
  background-color: var(--accent-color) !important;
  color: #031926 !important;
}

/* Reset circle-icon styles for arrow icon inside .read-more buttons */
.about .icon-box .read-more i {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: none !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
  font-size: inherit !important;
}

.about .icon-box:hover .read-more i {
  background-color: transparent !important;
  color: inherit !important;
}

/* ── Gesamte icon-box ist klickbar, wenn sie einen Toggle enthält ── */
.challenges .icon-box:has(.challenge-toggle),
.alarm-to-solution .icon-box:has(.challenge-toggle),
.details .icon-box:has(.challenge-toggle),
.why-idoone .icon-box:has(.challenge-toggle) {
  cursor: pointer;
}

/* ── Challenge- & Alarm-to-Solution-Sektion: Aufklapp-Toggle ── */
.challenges .challenge-toggle,
.alarm-to-solution .challenge-toggle,
.details .challenge-toggle,
.why-idoone .challenge-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 8px 0;
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  color: var(--accent-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
  align-self: flex-start;
  min-height: 44px;
}

.challenges .challenge-toggle:hover,
.alarm-to-solution .challenge-toggle:hover,
.details .challenge-toggle:hover,
.why-idoone .challenge-toggle:hover {
  opacity: 0.72;
  color: var(--accent-color);
  text-decoration: none;
}

.challenges .challenge-chevron,
.alarm-to-solution .challenge-chevron,
.details .challenge-chevron,
.why-idoone .challenge-chevron {
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  transition: transform 0.25s ease;
}

.challenges .challenge-toggle[aria-expanded="true"] .challenge-chevron,
.alarm-to-solution .challenge-toggle[aria-expanded="true"] .challenge-chevron,
.details .challenge-toggle[aria-expanded="true"] .challenge-chevron,
.why-idoone .challenge-toggle[aria-expanded="true"] .challenge-chevron {
  transform: rotate(180deg);
}

.challenges .challenge-collapse,
.alarm-to-solution .challenge-collapse,
.details .challenge-collapse,
.why-idoone .challenge-collapse {
  margin-top: 16px;
}

/* ── Fließtext im aufgeklappten Bereich: ruhiger, etwas kleiner ── */
.challenges .challenge-collapse p,
.alarm-to-solution .challenge-collapse p,
.details .challenge-collapse p,
.why-idoone .challenge-collapse p {
  font-size: 1.0rem;
  line-height: 1.6;
  color: #ffffff;
}

.challenges .challenge-collapse p.fw-semibold,
.alarm-to-solution .challenge-collapse p.fw-semibold,
.details .challenge-collapse p.fw-semibold,
.why-idoone .challenge-collapse p.fw-semibold {
  font-size: 1.0rem;
  font-weight: 600;
  color: #ffffff;
}

/* ── "Zum Anwendungsfall"-Link ── */
.challenges .challenge-usecase-link,
.alarm-to-solution .challenge-usecase-link,
.details .challenge-usecase-link,
.why-idoone .challenge-usecase-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.challenges .challenge-usecase-link::after,
.alarm-to-solution .challenge-usecase-link::after,
.details .challenge-usecase-link::after,
.why-idoone .challenge-usecase-link::after {
  content: '\F285'; /* bi-arrow-right */
  font-family: 'bootstrap-icons';
  font-size: 0.875rem;
}

.challenges .challenge-usecase-link:hover,
.alarm-to-solution .challenge-usecase-link:hover,
.details .challenge-usecase-link:hover,
.why-idoone .challenge-usecase-link:hover {
  opacity: 0.72;
  color: var(--accent-color);
  text-decoration: none;
}

/* ── Gleichhöhe aller geschlossenen Icon-Boxen (Collapse-Sektionen) ──
   min-height dient als CSS-Boden; der JS-Equalizer (main.js) misst nach dem
   Rendern die tatsächliche Höhe der höchsten Karte und setzt min-height für
   alle gleich → Gleichhöhe ist primär JS-gesteuert.
   Formel (geschlossen): Icon(80) + margin-i(24) + h3 + margin-h3 + Toggle(44) + Padding(80)

   #solution: Titel max. 2 Zeilen (z. B. "Zählerstände ohne Vor-Ort-Termin"),
   margin-h3=6px → 80+24+60+6+44+80 = 294px ≈ 18.4rem
   → 18rem (288px) als sicherer Boden; JS bestimmt die Endgleichhöhe.

   #use-cases: max. 2 Zeilen ("Mülltonnen-<br>bereitstellung"), margin-h3=6px
   → 80+24+60+6+44+80 = 294px ≈ 18.4rem → 17rem (272px) als Boden.

   #alarm-to-solution: Titel max. 2 Zeilen (z. B. "Weitere Beteiligte einbeziehen"),
   margin-h3=6px → 80+24+60+6+44+80 = 294px ≈ 18.4rem
   → 19rem (304px) als sicherer Boden; JS bestimmt die Endgleichhöhe.

   #system: Titel bis 4+ Zeilen, unverändert → 26rem. */
#solution .icon-box {
  min-height: 18rem;
}

#use-cases .icon-box {
  min-height: 17rem;
}

/* Gezielter h3→Toggle-Abstand: nur #solution, #use-cases und #alarm-to-solution
   kompakter, keine globale Änderung an .about .icon-box h3. */
#solution .icon-box h3,
#use-cases .icon-box h3,
#alarm-to-solution .icon-box h3 {
  margin-bottom: 6px;
}

#alarm-to-solution .icon-box {
  min-height: 19rem;
}

/* ═══════════════════════════════════════════════════════════════
   ALARM-TO-SOLUTION – FAQ-Akkordion-Stil (dunkle Sektion)
   Gleiche Optik wie die icon-boxen dieser Sektion.
   ═══════════════════════════════════════════════════════════════ */

#alarm-to-solution .faq-container .faq-item {
  border-radius: 16px;
  position: relative;
  padding: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#alarm-to-solution .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

#alarm-to-solution .faq-container .faq-item:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow: var(--shadow-1), 0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

#alarm-to-solution .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 17px;
  margin: 0 30px 0 32px;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.4;
  transition: color 0.3s;
  cursor: pointer;
}

#alarm-to-solution .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

#alarm-to-solution .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  margin-left: 32px;
  margin-right: 30px;
}

#alarm-to-solution .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

#alarm-to-solution .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: color 0.3s;
  color: var(--accent-color);
}

#alarm-to-solution .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: transform 0.3s, color 0.3s;
  cursor: pointer;
  color: var(--accent-color);
}

#alarm-to-solution .faq-container .faq-active h3 {
  color: var(--accent-color);
}

#alarm-to-solution .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

#alarm-to-solution .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

#system .icon-box {
  min-height: 26rem;
}

/* ── Abschlusszeile Challenges / Alarm-to-Solution ── */
/* Behält das h3-Design, verhindert aber Zeilenüberlappung beim Umbrechen */
.closing-statement {
  font-size: 24px !important;
  line-height: 1.5 !important;
  color: var(--accent-color) !important;
}

.challenges .content h3 {
  font-size: 24px;
  color: #ffffff;
}

/* 8e. Features */
.features .features-item h3,
.features .features-item h3 a {
  color: #ffffff !important;
}

.features .features-item p {
  color: #ffffff !important;
}

.features .features-item i {
  color: var(--accent-color) !important;
}

/* Two-column checklist layout for details blocks with many list items */
.checklist-two-col {
  column-count: 2;
  column-gap: 1.5rem;
}

.checklist-two-col li {
  break-inside: avoid;
}

@media (max-width: 767px) {
  .checklist-two-col {
    column-count: 1;
  }
}

/* 8f. Pricing - featured Box mit Accent-Stroke */
.pricing .pricing-item h3 {
  color: #ffffff !important;
}

.pricing .pricing-item .price {
  color: var(--accent-color) !important;
}

.pricing .pricing-item ul li {
  color: #ffffff !important;
}

.pricing .pricing-item.featured {
  border-color: var(--stroke-accent) !important;
  background: rgba(5, 42, 61, 0.92) !important;
}

/* Pricing - Pakethoehen und Preiszeile */
#pricing .pricing-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#pricing .package-text {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  #pricing .package-text {
    min-height: 4.5rem;
  }
}

#pricing .hardware-label {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
}

#pricing .pricing-item .model-price,
#pricing .pricing-item .model-price .hardware-label,
#pricing .pricing-item .model-price span {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 28px;
  color: var(--accent-color);
  font-weight: inherit;
  line-height: inherit;
}

#pricing .pricing-item .cta-btn,
#pricing .pricing-item .btn-ss-book {
  margin-top: auto;
}

/* index.html + about.html: Primary-CTAs einfarbig Accent, dunkler Text */
.index-page a.btn-ss-book,
.index-page button.btn-ss-book,
.about-page a.btn-ss-book,
.about-page button.btn-ss-book {
  background: var(--accent-color) !important;
  background-image: none !important;
  color: #1c2d38 !important;
  box-shadow: none;
  transition: background-color 0.18s ease, transform 0.2s ease, color 0.18s ease;
}

.index-page a.btn-ss-book:hover,
.index-page a.btn-ss-book:focus,
.index-page button.btn-ss-book:hover,
.index-page button.btn-ss-book:focus,
.about-page a.btn-ss-book:hover,
.about-page a.btn-ss-book:focus,
.about-page button.btn-ss-book:hover,
.about-page button.btn-ss-book:focus {
  filter: none !important;
  transform: translateY(-2px);
  background: rgba(var(--accent-color-rgb), 0.88) !important;
  background-image: none !important;
  color: #1c2d38 !important;
}

.index-page .btn-ss-book .bi,
.about-page .btn-ss-book .bi {
  color: currentColor;
}

.index-page a.btn-ss-book--outline,
.index-page button.btn-ss-book--outline,
.about-page a.btn-ss-book--outline,
.about-page button.btn-ss-book--outline {
  background: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 2px var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.index-page a.btn-ss-book--outline:hover,
.index-page button.btn-ss-book--outline:hover,
.about-page a.btn-ss-book--outline:hover,
.about-page button.btn-ss-book--outline:hover {
  background: rgba(var(--accent-color-rgb), 0.12) !important;
  color: var(--accent-color) !important;
}

.index-page #pricing .pricing-item > a.btn-ss-book {
  align-self: stretch;
  justify-content: center;
}

.index-page .php-email-form button[type="submit"].btn-ss-book {
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* 8g. FAQ */
.faq .faq-container .faq-item {
  background: var(--surface-2) !important;
}

.faq .faq-container .faq-item h3 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.faq .faq-container .faq-item .faq-content p {
  color: #ffffff !important;
}

.faq .faq-container .faq-item .faq-icon,
.faq .faq-container .faq-item .faq-toggle {
  color: var(--accent-color) !important;
}

/* 8h. Contact */
.contact .info-item i {
  background: rgba(var(--accent-color-rgb), 0.12) !important;
  color: var(--accent-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact .info-item:hover i {
  background: var(--accent-color) !important;
  color: #031926 !important;
}

.contact .info-item h3 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.contact .info-item p {
  color: #ffffff !important;
}

/* 8i. Team - Bild oben rund, Info-Block als Surface */
.team .member {
  overflow: hidden;
}

.team .member .pic {
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden;
}

.team .member .member-info {
  background: var(--surface-1);
  padding: 20px;
  border-radius: 0 0 8px 8px;
}

.team .member h4 {
  color: #ffffff !important;
}

.team .member span {
  color: var(--accent-color) !important;
}

.team .member p {
  color: #ffffff !important;
}

/* =============================================================
   CTA CARDS (Starter-Set / Demo-Call)
   ============================================================= */
/* Höhengleichheit der CTA-Cards im Starter-Sets-Swiper ──────────
   Beschränkt auf #starter-sets .cta-cards-row – keine globale Wirkung.
   Problem: swiper-bundle.min.css (lädt nach Bootstrap) setzt auf
   .swiper-slide { width:100%; height:100% }, was col-lg-4 / col-md-6
   überschreibt und die Cards vertikal stapelt.
   Gegenmassnahme: Swiper-Konflikte mit höherer Spezifität (1ID + 2Klassen)
   gezielt zurücksetzen; nur ab 768px, wo Swiper destroyed ist.
   ──────────────────────────────────────────────────────────────── */

/* Ab 768px: Swiper ist destroyed → Bootstrap-Grid-Verhalten wiederherstellen */
@media (min-width: 768px) {
  #starter-sets .cta-cards-row .swiper-wrapper {
    flex-wrap: wrap;        /* Swiper lässt dies auf nowrap, Bootstrap braucht wrap */
    height: auto;           /* Swiper setzt height:100% auf wrapper */
    align-items: stretch;   /* Alle Slides auf gleiche Zeilenhöhe strecken */
  }

  #starter-sets .cta-cards-row .swiper-slide {
    display: flex;          /* flex-Container für die Card darin */
    height: auto;           /* Swiper .swiper-slide { height:100% } überschreiben */
    flex-shrink: 1;         /* Swiper setzt flex-shrink:0 – rücksetzen */
    align-self: stretch;    /* An Zeilenhöhe des flex-Containers anpassen */
  }

  /* col-md-6 Breite explizit setzen (Swiper .swiper-slide{width:100%} schlägt Bootstrap) */
  #starter-sets .cta-cards-row .swiper-slide {
    width: 50%;
  }
}

/* Ab 992px (lg): col-lg-4 = 33.33 % */
@media (min-width: 992px) {
  #starter-sets .cta-cards-row .swiper-slide {
    width: 33.33333333%;
  }
}

/* Card selbst füllt die volle Breite & Höhe des Flex-Parent-Slides */
#starter-sets .cta-cards-row .cta-card {
  width: 100%;
  height: 100%;
}

.cta-cards-row {
  margin-top: 60px;
  margin-bottom: 100px;
}

@media (max-width: 640px) {
  .cta-cards-row {
    margin-bottom: 40px;
  }
}

.cta-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  padding: 40px 36px 36px;
  border: 1.5px solid var(--accent-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 18px rgba(var(--accent-color-rgb), 0.10);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Linke Card - leicht grünlicher Hintergrund */
.cta-card--accent {
  background: rgba(26, 107, 58, 0.22);
}

/* Rechte Card - dunkler Hintergrund */
.cta-card--dark {
  background: rgba(3, 25, 38, 0.75);
}

/* Hintergrund beider CTA-Cards in #starter-sets an icon-box-Surface angleichen */
#starter-sets .cta-card--accent,
#starter-sets .cta-card--dark {
  background: var(--surface-1) !important;
}

.cta-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(var(--accent-color-rgb), 0.18);
  border-color: rgba(var(--accent-color-rgb), 0.85);
}

.cta-card__title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
  line-height: 1.25;
  margin-bottom: 20px;
}

.cta-card__text {
  color: #ffffff !important;
  font-size: 0.97rem;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 28px;
}

/* =============================================================
   DETAILS - erstes Item ohne features-item-Klasse, Abstand manuell
   ============================================================= */
.details#use-cases .features-item {
  padding: 26px 24px;
  overflow: hidden;
}

.details#use-cases .features-item .btn-statement,
.details#use-cases .features-item .btn-ss-book {
  margin-top: 12px;
}

.details#use-cases .features-item .col-md-5 {
  justify-content: center;
}

.details#use-cases .features-item .col-md-5 .ss-product-card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.details#use-cases .features-item .col-md-5 .ss-product-header {
  justify-content: flex-start;
  margin-bottom: 10px;
}

.details#use-cases .features-item .col-md-5 .ss-product-title {
  font-size: 0.96rem;
  letter-spacing: 0.02em;
}

.details#use-cases .features-item .col-md-5 .ss-product-img-wrap {
  min-height: 200px;
  padding: 16px 14px;
}

.details#use-cases .features-item .col-md-5 .ss-product-img-wrap .ss-product-img {
  width: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.details#use-cases .features-item .col-md-5 .ss-product-icon {
  font-size: clamp(3.4rem, 7vw, 4.3rem);
  line-height: 1;
  color: rgba(var(--accent-color-rgb), 0.82);
}

.details#use-cases .features-item .col-md-5 img {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 300px;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .details#use-cases .features-item {
    padding: 20px 18px;
  }

  .details#use-cases .features-item .col-md-5 .ss-product-card {
    max-width: 340px;
  }

  .details#use-cases .features-item .col-md-5 .ss-product-img-wrap {
    min-height: 176px;
    padding: 12px;
  }

  .details#use-cases .features-item .col-md-5 .ss-product-img-wrap .ss-product-img {
    max-height: 190px;
  }

  .details#use-cases .features-item .col-md-5 img {
    max-width: 340px;
    max-height: 240px;
  }
}

.details .details-first-item {
  /* gleicher Abstand wie .features-item + .features-item */
  margin-bottom: 100px;
}

@media (max-width: 640px) {
  .details .details-first-item {
    margin-bottom: 40px;
  }
}

/* =============================================================
   DETAILS - Bild mit gleichmäßigem Abstand oben und unten
   ============================================================= */

/* Flex-Container: align-items:center sorgt dafür, dass
   Abstand oben = Abstand unten, unabhängig von der Bildhöhe */
.details-img-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.details-balanced-img {
  display: block;
  width: 100%;
  min-width: 500px;
  max-width: 560px;
  min-height: 500px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .details-balanced-img {
    min-width: unset;
    min-height: unset;
    max-width: 100%;
  }
}

.details-humidity-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 560px;
}

.details-hexagon-overlay {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: 70%;
  height: auto;
  pointer-events: none;
}

@media (max-width: 600px) {
  .details-hexagon-overlay {
    right: -5%;
    width: 60%;
  }
}

/* =============================================================
   9. FORMULAR / KONTAKT AUF DARK
   ============================================================= */
.contact .php-email-form input,
.contact .php-email-form textarea {
  background-color: rgba(5, 42, 61, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.contact .php-email-form select {
  background-color: rgba(5, 42, 61, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 40px !important;
}

.contact .php-email-form input::placeholder,
.contact .php-email-form textarea::placeholder {
  color: #ffffff !important;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus,
.contact .php-email-form select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.15) !important;
  outline: none !important;
}

.contact .php-email-form select option {
  background-color: #031926;
  color: #ffffff;
}

/* =============================================================
   10. FOOTER AUF DARK
   ============================================================= */
.footer {
  background-color: rgba(3, 25, 38, 0.95) !important;
  border-top: 1px solid rgba(var(--accent-color-rgb), 0.15);
}

.footer h4,
.footer .footer-links a {
  color: #ffffff !important;
}

.footer .footer-links a:hover {
  color: var(--accent-color) !important;
}

.footer .copyright,
.footer .credits {
  color: #ffffff !important;
}

/* Mobile-Optimierung des Footers
   Reihenfolge auf kleinen Viewports:
     1. Firmen-/Kontaktblock (volle Breite)
     2. Navigation | Rechtliches (zweispaltig)
     3. Anwendungsfälle (volle Breite, interne 2-Spalten-Liste)
   Keine Designaenderung - nur kompaktere Anordnung. */
@media (max-width: 767.98px) {
  .footer .footer-top > .row > .footer-about {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .footer .footer-top > .row > div:nth-child(2),
  .footer .footer-top > .row > div:nth-child(4) {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }

  .footer .footer-top > .row > div:nth-child(3) {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    order: 1;
  }

  .footer .footer-top > .row > div:nth-child(3) ul {
    column-count: 2;
    column-gap: 20px;
  }

  .footer .footer-top > .row > div:nth-child(3) ul li {
    break-inside: avoid;
  }

  .footer .footer-links {
    margin-bottom: 14px;
  }
}

/* =============================================================
   11. BUTTONS
   ============================================================= */
.btn-get-started {
  background: var(--accent-color) !important;
  color: #031926 !important;
  font-weight: 600;
  border: none;
}

.btn-get-started:hover {
  background: rgba(var(--accent-color-rgb), 0.85) !important;
  color: #031926 !important;
}

/* Scroll-to-top */
.scroll-top {
  background-color: var(--accent-color) !important;
}

.scroll-top:hover {
  background-color: rgba(var(--accent-color-rgb), 0.85) !important;
}

/* =============================================================
   FLOATING CART (Katalog)
   ============================================================= */
.floating-cart-button {
  position: fixed;
  right: 15px;
  bottom: 65px;
  z-index: 99998;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: #031926;
  color: #ffffff;
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.5);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(3, 25, 38, 0.35), 0 0 12px rgba(var(--accent-color-rgb), 0.18);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.floating-cart-button:hover,
.floating-cart-button:focus {
  background: #0a2734;
  color: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 10px 28px rgba(3, 25, 38, 0.45), 0 0 16px rgba(var(--accent-color-rgb), 0.32);
  outline: none;
  transform: translateY(-1px);
}

.floating-cart-icon {
  font-size: 1.15rem;
  color: var(--accent-color);
  line-height: 1;
}

.floating-cart-text {
  white-space: nowrap;
}

.floating-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  background: var(--accent-color);
  color: #031926;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.floating-cart-badge[data-empty="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
}

@keyframes floating-cart-glow {
  0%   { box-shadow: 0 8px 24px rgba(3, 25, 38, 0.35), 0 0 12px rgba(var(--accent-color-rgb), 0.18); transform: scale(1); }
  15%  { box-shadow: 0 8px 32px rgba(3, 25, 38, 0.4), 0 0 0 8px rgba(var(--accent-color-rgb), 0.5), 0 0 32px rgba(var(--accent-color-rgb), 0.7); transform: scale(1.08); }
  35%  { box-shadow: 0 8px 24px rgba(3, 25, 38, 0.35), 0 0 0 3px rgba(var(--accent-color-rgb), 0.2), 0 0 14px rgba(var(--accent-color-rgb), 0.25); transform: scale(1); }
  55%  { box-shadow: 0 8px 28px rgba(3, 25, 38, 0.38), 0 0 0 5px rgba(var(--accent-color-rgb), 0.32), 0 0 22px rgba(var(--accent-color-rgb), 0.48); transform: scale(1.04); }
  80%  { box-shadow: 0 8px 24px rgba(3, 25, 38, 0.35), 0 0 0 1px rgba(var(--accent-color-rgb), 0.1), 0 0 10px rgba(var(--accent-color-rgb), 0.14); transform: scale(1); }
  100% { box-shadow: 0 8px 24px rgba(3, 25, 38, 0.35), 0 0 12px rgba(var(--accent-color-rgb), 0.18); transform: scale(1); }
}

.floating-cart-button--pulse {
  transition: none !important;
  animation: floating-cart-glow 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 575.98px) {
  .floating-cart-button {
    right: 12px;
    bottom: 60px;
    padding: 0.5rem 0.85rem 0.5rem 0.75rem;
    font-size: 0.85rem;
    gap: 0.45rem;
  }

  .floating-cart-icon {
    font-size: 1.05rem;
  }

  .floating-cart-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: 0.72rem;
  }
}

/* =============================================================
   THE HIVE SECTION
   ============================================================= */
.the-hive {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 80px;
  background-color: #031926 !important;
  position: relative;
  z-index: 0;
}

.the-hive > .container {
  width: 100%;
}

.the-hive::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #031926;
}

.hive-intro-row {
  margin-bottom: 48px;
}

.hive-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
}

.hive-title-highlight {
  display: block;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--accent-color);
  line-height: 1.0;
  letter-spacing: 0.01em;
}

#the-hive .hive-annotated-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: 1;
  visibility: visible;
}

.hive-desc-card {
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.35);
  border-radius: 16px;
  background: rgba(5, 42, 61, 0.55);
  padding: 40px 44px;
  backdrop-filter: blur(6px);
}

.hive-desc-card p {
  color: #ffffff;
  font-size: 1.0rem;
  line-height: 1.75;
  margin-bottom: 16px;
}

.hive-desc-card__right {
  display: flex;
  flex-direction: column;
}

.hive-desc-card__right .btn-statement,
.hive-desc-card__right .btn-ss-book {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 767px) {
  .hive-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin-bottom: 8px;
  }

  .hive-title-highlight {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .hive-desc-card {
    padding: 28px 24px;
  }

  .hive-desc-card__right {
    margin-top: 20px;
  }

  .hive-intro-row {
    margin-bottom: 32px;
  }
}

/* =============================================================
   APP VIEWS SECTION - Vermieter-App + Mieter-App nebeneinander,
   pro App ein Bild mit Text-Heatmap darunter
   ============================================================= */
.app-views .app-views-row {
  align-items: stretch;
}

.app-views .app-view-card {
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.35);
  border-radius: 16px;
  background: rgba(5, 42, 61, 0.55);
  padding: 32px 28px;
  backdrop-filter: blur(6px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-views .app-view-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 22px 0;
  text-align: center;
}

.app-views .app-view-image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.app-views .app-view-image {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  border-radius: 12px;
}

.app-views .app-view-heatmap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem 0.85rem;
  padding: 24px 20px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.18);
  border-radius: 12px;
  background: rgba(3, 25, 38, 0.45);
  line-height: 1.4;
  margin-top: auto;
}

.app-views .app-view-heatmap span {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.app-views .app-view-heatmap .hm-xs { font-size: 0.78rem; opacity: 0.6;  font-weight: 300; }
.app-views .app-view-heatmap .hm-s  { font-size: 0.95rem; opacity: 0.78; font-weight: 300; }
.app-views .app-view-heatmap .hm-m  { font-size: 1.15rem; opacity: 0.9;  font-weight: 400; }
.app-views .app-view-heatmap .hm-l  { font-size: 1.45rem; opacity: 1;    font-weight: 400; }
.app-views .app-view-heatmap .hm-xl { font-size: 1.85rem; opacity: 1;    font-weight: 500; }

.app-views .app-view-heatmap .hm-accent {
  color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .app-views .app-view-card {
    padding: 26px 22px;
  }

  .app-views .app-view-image {
    max-width: 380px;
  }

  .app-views .app-view-heatmap {
    padding: 20px 16px;
  }

  .app-views .app-view-heatmap .hm-xs { font-size: 0.74rem; }
  .app-views .app-view-heatmap .hm-s  { font-size: 0.88rem; }
  .app-views .app-view-heatmap .hm-m  { font-size: 1.05rem; }
  .app-views .app-view-heatmap .hm-l  { font-size: 1.25rem; }
  .app-views .app-view-heatmap .hm-xl { font-size: 1.55rem; }
}

@media (max-width: 575.98px) {
  .app-views .app-view-card {
    padding: 22px 18px;
  }

  .app-views .app-view-heatmap {
    padding: 18px 14px;
    gap: 0.35rem 0.65rem;
  }

  .app-views .app-view-heatmap .hm-xs { font-size: 0.72rem; }
  .app-views .app-view-heatmap .hm-s  { font-size: 0.82rem; }
  .app-views .app-view-heatmap .hm-m  { font-size: 0.95rem; }
  .app-views .app-view-heatmap .hm-l  { font-size: 1.1rem; }
  .app-views .app-view-heatmap .hm-xl { font-size: 1.35rem; }
}

/* =============================================================
   STARTERSET SECTION
   ============================================================= */
.starterset {
  padding-top: 80px;
  padding-bottom: 100px;
}

/* Starterset: Einstiegs-Erklärung (ohne Tab-/Paket-Katalog) */
#starter-sets .starterset-intro-lead {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
  margin-top: 8px;
  font-size: 0.97rem;
  line-height: 1.75;
  color: #ffffff !important;
}

/* Schritte / Teaser / Benefits: visuell an .features .features-item (Surface, Padding, Hover) */
#starter-sets .starterset-step {
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#starter-sets .starterset-step:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
}

#starter-sets .starterset-step-head {
  gap: 10px;
  flex-shrink: 0;
}

/* Globale Schritt-Nummerierung - überall auf der Website einheitlich */
.starterset-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 50%;
  margin: 0;
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color) !important;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

/* How It Works - gleiche Boxhöhe in der Zeile */
.how-it-works .row {
  align-items: stretch;
}

.how-it-works .icon-box {
  height: 100%;
}

/* How It Works - Schrittzahl: größer, mit Punkt dahinter */
.how-it-works .starterset-step-num {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  font-size: 1.5rem;
}

.how-it-works .starterset-step-num::after {
  content: '.';
}

/* How It Works - Icon-Header-Zeile: Step-Badge links, Inhalts-Icon rechts */
.how-it-works .hiw-icon-row {
  margin-bottom: 20px;
}

.how-it-works .hiw-icon-row i {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

#starter-sets .starterset-step-title {
  font-family: var(--heading-font), sans-serif !important;
  font-size: clamp(0.95rem, 1.6vw, 1rem);
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em;
  line-height: 1.25;
  padding: 0;
}

#starter-sets .starterset-step-text {
  margin-top: 14px;
  color: #ffffff !important;
  font-size: 0.9rem;
  line-height: 1.65;
}

#starter-sets .starterset-teaser-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-bottom: 1rem !important;
}

#starter-sets .starterset-teaser {
  padding: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(26, 107, 58, 0.22) !important;
  border: 1px solid rgba(var(--accent-color-rgb), 0.25) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#starter-sets .starterset-teaser:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
}

#starter-sets .starterset-step .starterset-benefit {
  margin-top: 1.25rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
}

#starter-sets .starterset-step .starterset-benefit:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

#starter-sets .starterset-benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#starter-sets .starterset-benefit:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
}

#starter-sets .starterset-benefit .bi-check2-circle {
  font-size: 32px;
  line-height: 1;
  color: var(--accent-color) !important;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#starter-sets .starterset-benefit span {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

/* ── Preismodell-Hinweis im Starterset-Bereich ───────────── */
#starter-sets .starterset-pricing-pills {
  display: inline-flex;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#starter-sets .starterset-pricing-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-1);
  border: 1px solid rgba(var(--accent-color-rgb), 0.25);
  border-radius: 50px;
  padding: 7px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

#starter-sets .starterset-pricing-pill .bi {
  color: var(--accent-color);
  font-size: 0.88rem;
}

#starter-sets .starterset-pricing-sep {
  font-size: 0.76rem;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#starter-sets .starterset-pricing-note {
  font-size: 0.795rem;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

#starter-sets .starterset-cta-wrap {
  margin-top: 0.5rem;
}

#starter-sets .starterset-cta-lead {
  max-width: 560px;
  color: #ffffff !important;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 1.35rem;
}

.ss-heading {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  color: #ffffff !important;
  margin-bottom: 12px;
}

.ss-lead {
  color: #ffffff !important;
  font-size: 0.95rem;
  line-height: 1.72;
  max-width: 640px;
  margin-bottom: 26px;
}

/* Tab buttons */
.ss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.ss-tab {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 50px;
  padding: 8px 22px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  letter-spacing: 0.02em;
}

.ss-tab:hover {
  border-color: rgba(var(--accent-color-rgb), 0.55);
  color: #ffffff;
}

.ss-tab.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #031926 !important;
  font-weight: 700;
}

/* Pane visibility */
.ss-pane { display: none; }
.ss-pane.active { display: block; }

/* ── Outer big CTA card ──────────────────────────────────── */
.ss-outer-card {
  background: rgba(5, 42, 61, 0.55);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Left: text column */
.ss-text-col {
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ss-tag {
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.78rem;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.ss-name {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important;
  color: #ffffff !important;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}

.ss-desc {
  color: #ffffff !important;
  font-size: 0.89rem;
  line-height: 1.74;
  margin-bottom: 28px;
  flex-grow: 1;
}

.btn-ss-book {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(var(--accent-color-rgb), 0.55) 0%, transparent 58%),
    linear-gradient(90deg, #1a5230 0%, #031926 55%, #1e6b40 100%);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 50px;
  padding: 11px 28px;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(3, 25, 38, 0.45);
  transition: filter 0.25s ease, transform 0.2s ease;
  align-self: flex-start;
}

.btn-ss-book:hover {
  filter: brightness(1.20);
  transform: translateY(-2px);
  color: #ffffff !important;
}

.btn-ss-book .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-ss-book--outline {
  background: transparent;
  border: none;
  box-shadow: inset 0 0 0 2px var(--accent-color);
  color: var(--accent-color) !important;
}

.btn-ss-book--outline:hover {
  background: rgba(var(--accent-color-rgb), 0.12);
  box-shadow: inset 0 0 0 2px var(--accent-color);
  color: var(--accent-color) !important;
}

/* ── Right: product cards column ─────────────────────────── */
.ss-cards-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss-product-card {
  border-radius: 16px;
  padding: 20px 22px 16px;
  overflow: hidden;
}

.ss-product-card--dark {
  background: #0c1218;
}

.ss-product-card--light {
  background: rgba(3, 25, 38, 0.72);
  border: 1px solid rgba(var(--accent-color-rgb), 0.16);
  height: 100%;
}

.ss-product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ss-product-card--dark .ss-product-title {
  color: #ffffff;
  font-size: 0.90rem;
  font-weight: 500;
}

.ss-product-card--light .ss-product-title {
  color: #ffffff;
  font-size: 0.90rem;
  font-weight: 600;
}

.ss-product-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ss-product-card--dark .ss-product-img-wrap {
  padding: 10px 0 6px;
  min-height: 170px;
}

.ss-product-card--light .ss-product-img-wrap {
  padding: 20px 24px;
  min-height: 160px;
  background: rgba(3, 25, 38, 0.45);
  border-radius: 12px;
}

.ss-product-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.ss-product-card--dark .ss-product-img {
  max-width: 340px;
}

.ss-product-card--light .ss-product-img {
  max-width: 160px;
}

.starterset .ss-product-card--light .ss-product-icon {
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(var(--accent-color-rgb), 0.50);
}

/* ── iOS toggle switch ───────────────────────────────────── */
.ss-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.ss-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ss-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease;
}

.ss-toggle__track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.ss-toggle input:checked ~ .ss-toggle__track {
  background: var(--accent-color);
}

.ss-toggle input:checked ~ .ss-toggle__track::before {
  transform: translateX(20px);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  .ss-text-col {
    padding-right: 0;
    padding-bottom: 28px;
  }

  .ss-outer-card {
    padding: 24px 20px;
  }
}

@media (max-width: 767px) {
  .starterset {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .ss-tab {
    padding: 7px 16px;
    font-size: 0.82rem;
  }
}

/* =============================================================
   INTRO OVERLAY (Erstkontakt beim Laden - 3s, dann Fade-Out)
   Look & Feel adaptiert von der "PLUG. WATCH. RELAX."-Sektion
   ============================================================= */
html.intro-active,
html.intro-active body {
  overflow: hidden;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #031926;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  transition: opacity 700ms ease;
  will-change: opacity;
}

.intro-overlay.intro-hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-stage {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.2vw, 42px);
  text-align: center;
  max-width: 1200px;
  width: 100%;
}

.intro-claim {
  margin: 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 5.8vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  animation: introClaimIn 900ms ease forwards;
}

.intro-claim-1 { animation-delay: 200ms; }
.intro-claim-2 { animation-delay: 650ms; color: var(--accent-color); }
.intro-claim-3 { animation-delay: 1100ms; }

@keyframes introClaimIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .intro-claim {
    font-size: clamp(1.7rem, 6.6vw, 3.1rem);
  }
}

@media (max-width: 767px) {
  .intro-stage {
    gap: 18px;
  }
  .intro-claim {
    font-size: clamp(1.5rem, 8.4vw, 2.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-claim {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .intro-overlay {
    transition: opacity 300ms ease;
  }
}

/* =============================================================
   HERO TAGLINE DIVIDER
   ============================================================= */
.hero-tagline-divider {
  background-color: #031926;
  padding: 40px 0;
}

/* ── Als Footer der Hero-Sektion ────────────────────────────── */
#home .hero-tagline-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  transition: opacity 0.2s ease;
  will-change: opacity;
}

.hero-tagline-words {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 3rem);
}

.hero-tagline-word {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.hero-tagline-word--accent {
  color: var(--accent-color);
}

@media (max-width: 991px) {
  .hero-tagline-divider {
    padding: 32px 0;
  }

  .hero-tagline-word {
    font-size: clamp(2rem, 7vw, 3.6rem);
  }
}

@media (max-width: 767px) {
  .hero-tagline-divider {
    padding: 24px 0;
  }

  .hero-tagline-words {
    gap: 3vw;
    flex-wrap: nowrap;
  }

  .hero-tagline-word {
    font-size: 7.2vw;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .hero-tagline-word {
    font-size: 7vw;
  }
}

/* =============================================================
   PLUG WATCH RELAX SECTION
   ============================================================= */
#plug-watch-relax {
  padding-top: 100px;
  padding-bottom: 110px;
  background-color: #031926 !important;
  position: relative;
  z-index: 0;
}

#plug-watch-relax::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #031926;
}

#plug-watch-relax .row {
  row-gap: 28px;
}

#plug-watch-relax .plug-watch-relax-lines {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#plug-watch-relax .plug-watch-relax-line {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 2.15fr);
  align-items: center;
  column-gap: 32px;
  padding-bottom: 22px;
}

#plug-watch-relax .plug-watch-relax-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#plug-watch-relax .plug-watch-relax-word {
  margin: 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.2rem, 4.8vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

#plug-watch-relax .plug-watch-relax-word span {
  color: var(--accent-color);
}

#plug-watch-relax .plug-watch-relax-slogan p {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.76;
}

@media (max-width: 991px) {
  #plug-watch-relax {
    padding-top: 72px;
    padding-bottom: 84px;
  }

  #plug-watch-relax .plug-watch-relax-line {
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2.2fr);
    column-gap: 24px;
  }

  #plug-watch-relax .plug-watch-relax-word {
    font-size: clamp(2rem, 7vw, 3.6rem);
  }
}

@media (max-width: 767px) {
  #plug-watch-relax .plug-watch-relax-lines {
    gap: 20px;
  }

  #plug-watch-relax .plug-watch-relax-line {
    grid-template-columns: 1fr;
    row-gap: 10px;
    column-gap: 0;
    padding-bottom: 18px;
  }

  #plug-watch-relax .plug-watch-relax-word {
    font-size: clamp(1.8rem, 10vw, 2.8rem);
  }

  #plug-watch-relax .plug-watch-relax-slogan p {
    font-size: 0.97rem;
    line-height: 1.74;
  }
}

/* =============================================================
   IDOONE IMAGE CLAIM SECTION
   ============================================================= */
.idoone-image-claim {
  padding-top: 64px;
  padding-bottom: 72px;
}

.idoone-image-claim .row {
  row-gap: 34px;
}

.idoone-image-claim .idoone-image-claim-image-wrap {
  width: 100%;
  max-width: 760px;
}

.idoone-image-claim .idoone-image-claim-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.idoone-image-claim .idoone-image-claim-content {
  max-width: 560px;
  padding-left: 18px;
}

.idoone-image-claim .idoone-image-claim-content h2 {
  margin: 0 0 24px;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.idoone-image-claim .idoone-image-claim-content h2 > span {
  display: block;
  color: #ffffff;
}

.idoone-image-claim .idoone-image-claim-content h2 > span > span {
  color: var(--accent-color);
}

.idoone-image-claim .idoone-image-claim-content p {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1.76;
}

.idoone-image-claim .idoone-image-claim-content p:last-of-type {
  margin-bottom: 28px;
}

@media (max-width: 991px) {
  .idoone-image-claim {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .idoone-image-claim .row {
    row-gap: 30px;
  }

  .idoone-image-claim .idoone-image-claim-image-wrap {
    max-width: 620px;
  }

  .idoone-image-claim .idoone-image-claim-content {
    max-width: 620px;
    padding-left: 0;
  }

  .idoone-image-claim .idoone-image-claim-content h2 {
    font-size: clamp(1.9rem, 6.4vw, 3rem);
  }
}

@media (max-width: 767px) {
  .idoone-image-claim .row {
    row-gap: 24px;
  }

  .idoone-image-claim .idoone-image-claim-image-wrap {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .idoone-image-claim .idoone-image-claim-content h2 {
    margin-bottom: 20px;
    font-size: clamp(1.7rem, 8.8vw, 2.4rem);
  }

  .idoone-image-claim .idoone-image-claim-content p {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  .idoone-image-claim .idoone-image-claim-content p:last-of-type {
    margin-bottom: 24px;
  }
}

/* =============================================================
   BESTELLKATALOG PAGE
   ============================================================= */

/* Back button in header */
.cat-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50px;
  padding: 7px 18px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cat-back-btn:hover {
  color: var(--accent-color) !important;
  border-color: rgba(var(--accent-color-rgb), 0.50);
  background: rgba(var(--accent-color-rgb), 0.06);
}

/* Section */
.catalog {
  padding-top: 120px;
  padding-bottom: 140px;
  min-height: 100vh;
}

.cat-lead {
  color: #ffffff !important;
  font-size: 0.96rem;
  line-height: 1.72;
  max-width: 680px;
  margin-bottom: 36px;
}

/* Catalog tabs - slightly larger than starterset tabs */
.cat-tabs {
  margin-bottom: 32px;
}

/* ── Product card ─────────────────────────────────────────── */
.cat-card {
  background: rgba(0, 221, 204, 0.20);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.18);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.22s ease;
}

.cat-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32), 0 0 22px rgba(var(--accent-color-rgb), 0.09);
  transform: translateY(-3px);
}

/* Card top: name + toggle + model */
.cat-card-top {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cat-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.cat-card-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

.cat-card-name-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cat-card-sensor-info {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.cat-model {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* Card image area */
.cat-card-img {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  padding: 20px 24px;
  background: rgba(3, 25, 38, 0.45);
  flex-shrink: 0;
}

.cat-card-img img {
  max-width: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Icon placeholder */
.cat-card-img--icon {
  font-size: 4.5rem;
  color: rgba(var(--accent-color-rgb), 0.50);
}

/* Card body */
.cat-card-body {
  padding: 16px 20px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cat-card-desc {
  font-size: 0.86rem;
  color: #ffffff !important;
  line-height: 1.66;
  flex-grow: 1;
  margin-bottom: 16px;
}

/* Tags inside card */
.cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cat-tag {
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 0.72rem;
  color: #ffffff;
  letter-spacing: 0.03em;
}

/* Helle Variant-Optik: Katalog-Produktkarten (ohne Details-Section auf index) */
.catalog .cat-card--light-variant {
  background: rgba(0, 221, 204, 0.20);
  border: 1.5px solid rgba(3, 25, 38, 0.12);
}

.catalog .cat-card--light-variant:hover {
  border-color: rgba(var(--accent-color-rgb), 0.42);
  box-shadow: 0 10px 30px rgba(3, 25, 38, 0.18), 0 0 16px rgba(var(--accent-color-rgb), 0.08);
}

.catalog .cat-card--light-variant .cat-card-top {
  border-bottom: 1px solid rgba(3, 25, 38, 0.10);
}

.catalog .cat-card--light-variant .cat-card-name {
  color: #0f1b24;
}

.catalog .cat-card--light-variant .cat-card-desc {
  color: rgba(15, 27, 36, 0.82) !important;
}

.catalog .cat-card--light-variant .cat-tag {
  border-color: rgba(3, 25, 38, 0.18);
  color: rgba(15, 27, 36, 0.70);
}

.catalog .cat-card--light-variant .cat-card-img {
  background: #ffffff;
  border-top: 1px solid rgba(3, 25, 38, 0.06);
  border-bottom: 1px solid rgba(3, 25, 38, 0.06);
}

.catalog .cat-card--light-variant .cat-card-img--icon {
  color: var(--accent-color);
}

.catalog .cat-card--light-variant .ss-toggle__track {
  background: rgba(3, 25, 38, 0.25);
}

/* Details-Section (#use-cases): kompakte Anwendungsfall-Karten - Designfamilie wie .catalog .ss-pane .cat-card */
.details#use-cases .cat-card.cat-card--details-usecase {
  background: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
  overflow: hidden;
}

.details#use-cases .cat-card.cat-card--details-usecase:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
  transform: translateY(-4px);
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-top {
  border-bottom: 1px solid var(--stroke-1) !important;
  padding: 22px 24px 14px;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-title-row {
  margin-bottom: 0;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-name {
  color: #ffffff !important;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-img {
  background: rgba(255, 255, 255, 0.04) !important;
  border-top: none !important;
  border-bottom: none !important;
  min-height: 152px;
  padding: 22px 24px 26px;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-img--icon {
  font-size: clamp(3.25rem, 8vw, 4.1rem);
  color: var(--accent-color) !important;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-img--icon .bi {
  opacity: 0.92;
}

.details#use-cases .cat-card.cat-card--details-usecase .cat-card-img--icon .row .bi {
  color: var(--accent-color);
  opacity: 0.9;
}

/* ── Dashboard Systemebene-Badge in #use-cases ── */
.details-uc-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.45);
  border-radius: 4px;
  padding: .1em .45em;
  vertical-align: middle;
  margin-left: .4rem;
  line-height: 1.6;
}

/* Toggle - reuse .ss-toggle but slightly adapted */
.cat-toggle {
  flex-shrink: 0;
}

/* ── Order summary bar ────────────────────────────────────── */
.cat-order-bar {
  margin-top: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(5, 42, 61, 0.70);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 16px;
  padding: 20px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-wrap: wrap;
}

.cat-order-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-order-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.cat-order-text {
  color: #ffffff;
  font-size: 0.95rem;
}

.cat-order-text strong {
  color: #ffffff;
  font-weight: 700;
}

.cat-order-btn {
  white-space: nowrap;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .catalog {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .cat-order-bar {
    padding: 18px 20px;
  }

  .cat-order-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   ABOUT PAGE - kompaktere vertikale Abstände + Header-Offset
   ============================================================= */
.about-page .main {
  padding-top: 86px;
}

/* =============================================================
   IMPRESSUM PAGE - Header-Offset + vertikale Abstände
   ============================================================= */
.legal-notice-page .main {
  padding-top: 86px;
}

.legal-notice-page .main > section,
.legal-notice-page .main > .section {
  padding-top: 42px;
  padding-bottom: 42px;
}

.legal-notice-page .section-title {
  padding-bottom: 32px;
}

.legal-notice-page #legal-notice-title.section {
  padding-top: 52px;
}

@media (max-width: 1199px) {
  .legal-notice-page .main {
    padding-top: 74px;
  }

  .legal-notice-page .main > section,
  .legal-notice-page .main > .section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .legal-notice-page .section-title {
    padding-bottom: 26px;
  }

  .legal-notice-page #legal-notice-title.section {
    padding-top: 44px;
  }
}

.about-page .main > section,
.about-page .main > .section {
  padding-top: 42px;
  padding-bottom: 42px;
}

.about-page .section-title {
  padding-bottom: 32px;
}

.about-page #about.section {
  padding-top: 52px;
}

@media (max-width: 1199px) {
  .about-page .main {
    padding-top: 74px;
  }

  .about-page .main > section,
  .about-page .main > .section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .about-page .section-title {
    padding-bottom: 26px;
  }

  .about-page #about.section {
    padding-top: 44px;
  }
}

/* ── Katalog Sektions-Trenner ─────────────────────────────── */
.cat-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 120px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cat-section-header--first {
  margin-top: 40px;
}

.cat-section-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* ── Katalog Karten-Komponenten-Liste ─────────────────────── */
.cat-card-components {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(3, 25, 38, 0.08);
  flex-shrink: 0;
}

.cat-card-components ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-card-components li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #1c2d38;
}

.cat-card-components li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-color);
  flex-shrink: 0;
}

.cat-card-components li + li {
  border-top: 1px solid rgba(3, 25, 38, 0.07);
}

.cat-component-placeholder {
  color: rgba(28, 45, 56, 0.45) !important;
  font-style: italic;
}

.cat-component-placeholder::before {
  background: rgba(28, 45, 56, 0.25) !important;
}

/* ── Katalog Bestellpunkt-Status ──────────────────────────── */
.cat-order-dot--active {
  background: #00ddcc;
}

/* ── Starterset Detail-Collapse ───────────────────────────── */
.cat-detail-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.35rem;
  height: 38px;
  padding: 0 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #1c2d38;
  background-color: var(--accent-color);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.18s;
}

.cat-detail-btn:hover,
.cat-detail-btn:focus {
  background-color: rgba(var(--accent-color-rgb), 0.85);
  color: #1c2d38;
  outline: none;
}

.cat-detail-btn-icon {
  transition: transform 0.25s;
}

.cat-detail-btn[aria-expanded="true"] .cat-detail-btn-icon {
  transform: rotate(180deg);
}

/* ── Inline Detail-Toggle (unter .cat-model) ──────────────── */
.cat-inline-detail-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cat-inline-detail-toggle:hover,
.cat-inline-detail-toggle:focus {
  color: var(--accent-color);
  text-decoration: underline;
  outline: none;
  opacity: 0.85;
}

.cat-inline-detail-toggle-icon {
  font-size: 0.85em;
  transition: transform 0.25s;
}

.cat-inline-detail-toggle[aria-expanded="true"] .cat-inline-detail-toggle-icon {
  transform: rotate(180deg);
}

/* ── Card Actions Row ─────────────────────────────────────── */
.cat-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.cat-cart-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

/* ── Add-Button (Einzelzustand) ───────────────────────────── */
.cat-cart-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--accent-color);
  color: #1c2d38;
  border: none;
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.18s;
}

.cat-cart-add:hover,
.cat-cart-add:focus {
  background-color: rgba(var(--accent-color-rgb), 0.85);
  color: #1c2d38;
  outline: none;
}

/* ── Qty Stepper (dreiteiliger Button) ───────────────────── */
.cat-cart-stepper {
  display: inline-flex;
  align-items: center;
  background-color: var(--accent-color);
  border-radius: 50px;
  height: 38px;
  overflow: hidden;
}

.cat-stepper-minus,
.cat-stepper-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  color: #1c2d38;
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.cat-stepper-minus:hover,
.cat-stepper-plus:hover,
.cat-stepper-minus:focus,
.cat-stepper-plus:focus {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}

.cat-stepper-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1c2d38;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  border-right: 1px solid rgba(0, 0, 0, 0.14);
  user-select: none;
}

/* ── Card im Warenkorb: Neon-Glow ────────────────────────── */
.cat-card--in-cart {
  box-shadow: 0 0 0 2px #39ff14, 0 0 20px 4px rgba(57, 255, 20, 0.28);
  transition: box-shadow 0.25s;
}

.cat-detail-collapse {
  width: 100%;
}

/* Detail-Collapse direkt unter dem Toggle einsortieren (statt am Kartenende) */
.cat-card > .cat-card-top         { order: 1; }
.cat-card > .cat-detail-collapse  { order: 2; }
.cat-card > .cat-card-components  { order: 3; }
.cat-card > .cat-card-body        { order: 4; }

.cat-detail-content {
  margin: 0.75rem 0 0.25rem;
  padding: 0.85rem 1rem;
  background: rgba(28, 45, 56, 0.06);
  border-left: 3px solid rgba(28, 45, 56, 0.25);
  border-radius: 0 4px 4px 0;
}

.cat-detail-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1c2d38;
  margin-bottom: 0.6rem;
}

/* Einleitungs-Absatz im Detailbereich (verschobene Anwendungsfall-Beschreibung
   der Startersets) - greift Typografie der cat-detail-list auf. */
.cat-detail-intro {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(28, 45, 56, 0.82);
  margin: 0 0 0.7rem;
}

.cat-detail-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.cat-detail-list li {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(28, 45, 56, 0.82);
  margin-bottom: 0.3rem;
}

.cat-detail-list li:last-child {
  margin-bottom: 0;
}

/* =============================================================
   PREISBLOCK IN KATALOG-CARDS (Titelzeile oben rechts)
   ============================================================= */
.cat-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding-top: 2px;
}

.cat-card-price {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(15, 27, 36, 0.78);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.cat-price-vat {
  font-size: 0.67rem;
  font-weight: 400;
  color: rgba(15, 27, 36, 0.40);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-top: 2px;
  line-height: 1;
}

/* Portalservice-Hinweis darf umbrechen */
.cat-price-vat--service {
  white-space: normal;
  line-height: 1.35;
}

/* =============================================================
   CART PAGE (cart.html)
   ============================================================= */

/* ── Preismodell-Anzeigezeile ──────────────────────────────── */
.cart-mode-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: rgba(var(--accent-color-rgb), 0.07);
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 26px;
}

.cart-mode-bar--buy {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

.cart-mode-icon-wrap {
  color: var(--accent-color);
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1;
}

.cart-mode-bar--buy .cart-mode-icon-wrap {
  color: #ffffff;
}

.cart-mode-text {
  font-size: 0.875rem;
  color: #ffffff;
  flex: 1;
  min-width: 0;
}

.cart-mode-text strong {
  color: var(--accent-color);
  font-weight: 600;
}

.cart-mode-bar--buy .cart-mode-text strong {
  color: #ffffff;
}

.cart-mode-desc {
  color: #ffffff;
  font-size: 0.83rem;
}

.cart-mode-bar .pricing-toggle {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .cart-mode-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cart-mode-bar .pricing-toggle {
    margin-left: 0;
    align-self: flex-start;
  }
}

/* ── Wrapper: gleiche Box-Breite für Total + Service (Kaufmodus) ── */
.cart-summary-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
  margin-left: auto;
  margin-top: 2rem;
  gap: 1rem;
}

.cart-summary-wrapper .cart-total-block,
.cart-summary-wrapper .cart-service-block {
  margin-top: 0;
  display: block;
  width: 100%;
}

.cart-summary-wrapper .cart-total-inner {
  min-width: unset;
  width: 100%;
}

/* ── Monatl. Portalservice-Block (Kaufmodus) ──────────────── */
.cart-service-block {
  display: block;
}

.cart-service-block .cart-total-inner {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.cart-service-block .cart-total-label {
  color: #ffffff;
}

.cart-service-block .cart-total-value {
  font-size: 1.6rem;
  color: #ffffff;
}

@media (max-width: 767px) {
  .cart-summary-wrapper {
    width: 100%;
    align-items: stretch;
  }

  .cart-service-block {
    justify-content: stretch;
  }
  .cart-service-block .cart-total-inner {
    width: 100%;
  }
}

.cart-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
  min-width: 720px;
}

.cart-th-price,
.cart-price-cell {
  text-align: right;
}

.cart-price-cell--total {
  font-weight: 600;
  color: #ffffff;
}

.cart-table thead th {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}

.cart-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  color: #ffffff;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cart-table tbody tr:last-child td {
  border-bottom: none;
}

.cart-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* ── Warenkorb-Tabelle: Mobile Card-Layout ──────────────── */
@media (max-width: 767px) {
  .cart-table {
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table tbody tr {
    display: block;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 14px 16px 10px;
  }

  .cart-table tbody tr:hover td {
    background: none;
  }

  .cart-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: none;
    font-size: 0.9rem;
  }

  .cart-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Artikel-Name: volle Breite, etwas Platz nach rechts für den Delete-Button */
  .cart-table td[data-col="artikel"] {
    padding-right: 40px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Typ-Badge: kein Label, linksbündig */
  .cart-table td[data-col="typ"] {
    padding-bottom: 8px;
  }

  /* Delete-Button: absolut oben rechts in der Karte */
  .cart-table td[data-col="delete"] {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 0;
    width: auto;
    justify-content: flex-end;
  }

  /* Label vor Preis/Menge/Gesamt-Zeilen */
  .cart-table td[data-label]::before {
    content: attr(data-label);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
  }

  /* Trennlinie vor Menge-Zeile */
  .cart-table td[data-col="qty"] {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* Preis-Spalten: Wert rechtsbündig */
  .cart-table td[data-col="unit-net"],
  .cart-table td[data-col="unit-gross"],
  .cart-table td[data-col="total"] {
    text-align: right;
  }

  /* Gesamtpreis hervorheben */
  .cart-table td[data-col="total"] {
    font-size: 0.97rem;
  }
}

.cart-type-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
}

.cart-type-badge--starter {
  background: rgba(var(--accent-color-rgb), 0.18);
  color: var(--accent-color);
}

.cart-type-badge--produkt {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

.cart-type-badge--service {
  background: rgba(var(--accent-color-rgb), 0.15);
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
}

.cart-stepper {
  display: inline-flex;
  align-items: center;
  background-color: var(--accent-color);
  border-radius: 50px;
  height: 34px;
  overflow: hidden;
}

.cart-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  color: #1c2d38;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.cart-stepper-btn:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

.cart-stepper-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1c2d38;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  border-right: 1px solid rgba(0, 0, 0, 0.14);
  user-select: none;
}

.cart-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.cart-delete-btn:hover {
  color: #ff5c5c;
  border-color: rgba(255, 92, 92, 0.40);
  background-color: rgba(255, 92, 92, 0.08);
}

.cart-total-block {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* Innerhalb des Wrappers übernimmt dieser den Außenabstand */
.cart-summary-wrapper .cart-total-block {
  margin-top: 0;
}

.cart-total-inner {
  background: rgba(5, 42, 61, 0.70);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 16px;
  padding: 22px 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: right;
  min-width: 300px;
}

.cart-total-breakdown {
  margin-bottom: 0;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 5px 0;
}

.cart-total-row-label {
  font-size: 0.82rem;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cart-total-row-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.cart-total-row--vat .cart-total-row-label,
.cart-total-row--vat .cart-total-row-value {
  color: #ffffff;
  font-size: 0.78rem;
}

.cart-total-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 14px 0 16px;
}

.cart-total-label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.cart-total-value {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cart-empty-state {
  text-align: center;
  padding: 64px 20px;
  color: #ffffff;
}

.cart-empty-state i {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  color: #ffffff;
}

.cart-empty-state p {
  font-size: 1rem;
  margin-bottom: 1.75rem;
}

.cart-action-bar {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cart-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
}

.cart-back-link:hover {
  color: var(--accent-color);
}

@media (max-width: 767px) {
  .cart-total-block {
    justify-content: stretch;
  }

  .cart-total-inner {
    width: 100%;
    text-align: left;
    min-width: 0;
  }

  .cart-total-row {
    gap: 16px;
  }

  .cart-action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-action-bar .btn-ss-book {
    justify-content: center;
  }
}

/* =============================================================
   STARTERSET CARDS - PRICING-LOOK
   Visueller Pricing-Charakter bei stabiler kat-*-Struktur
   ============================================================= */

/* Basis: Dark Surface wie pricing-item, override der light-variant */
.catalog .cat-card--starterset {
  background: rgba(0, 221, 204, 0.20) !important;
  border: 1px solid rgba(var(--accent-color-rgb), 0.25) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
  overflow: visible;
}

.catalog .cat-card--starterset:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
  transform: translateY(-4px);
}

/* Hervorgehobene (Featured) Karte - analog zu .pricing-item.featured */
.catalog .cat-card--ss-featured {
  border-color: var(--stroke-accent) !important;
  background: rgba(0, 221, 204, 0.20) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.35),
    0 12px 40px rgba(var(--accent-color-rgb), 0.10) !important;
}

/* „Empfohlen"-Badge */
.cat-ss-badge {
  display: inline-block;
  padding: 3px 13px;
  margin-bottom: 14px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #031926;
  background: var(--accent-color);
  border-radius: 50px;
  line-height: 1.6;
}

/* Top-Bereich */
.catalog .cat-card--starterset .cat-card-top {
  border-bottom: 1px solid var(--stroke-1) !important;
  padding: 26px 28px 18px;
}

/* Titelzeile */
.catalog .cat-card--starterset .cat-card-name {
  color: #ffffff !important;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Modellzeile */
.catalog .cat-card--starterset .cat-model {
  color: #ffffff !important;
  margin-top: 10px;
  display: block;
}

/* Preisblock - prominent wie in Pricing-Items */
.cat-price-main {
  display: flex;
  align-items: baseline;
}

.cat-price-period {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(15, 27, 36, 0.52);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.catalog .cat-card--starterset .cat-card-price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--accent-color) !important;
  letter-spacing: 0.01em;
}

.catalog .cat-card--starterset .cat-price-period {
  color: #ffffff !important;
  font-size: 0.80rem;
}

.catalog .cat-card--starterset .cat-price-vat {
  color: #ffffff !important;
  font-size: 0.63rem;
}

/* Extension-Hinweis in Einzelprodukt-Karten */
.cat-extension-hint {
  font-size: 0.75rem;
  color: rgba(15, 27, 36, 0.40);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* Im Dark-Kontext der ss-pane Karten */
.catalog .ss-pane .cat-extension-hint {
  color: #ffffff !important;
}

/* Detail-Preisinfo (Starterset-Accordion) */
.cat-detail-price-info {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(28, 45, 56, 0.10);
}

.cat-detail-price-text {
  font-size: 0.81rem;
  color: rgba(28, 45, 56, 0.65);
  line-height: 1.62;
  margin: 0;
}

.cat-detail-price-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-detail-price-facts li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.81rem;
  color: rgba(28, 45, 56, 0.65);
  line-height: 1.4;
}

.cat-detail-price-facts li i {
  color: var(--accent-color);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.catalog .cat-card--starterset .cat-detail-price-info,
.catalog .ss-pane .cat-card .cat-detail-price-info {
  border-top-color: rgba(255, 255, 255, 0.10);
}

/* Inquiry (Preis auf Anfrage) - cat-card
   .catalog .ss-pane .cat-card .cat-card-price hat Spezifität (0,4,0) + !important
   → kombinierten Selektor mit (0,5,0) verwenden, um font-size zu überschreiben */
.cat-card-price--inquiry,
.catalog .ss-pane .cat-card .cat-card-price.cat-card-price--inquiry {
  font-size: 0.9rem !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  line-height: 1.35;
  text-align: right;
  display: block;
}

/* Preisblock darf schrumpfen, damit white-space: normal auch wirkt
   (flex-shrink: 0 würde den Block auf max-content-Breite fixieren) */
.cat-card-title-row:has(.cat-card-price--inquiry) .cat-price-block {
  flex-shrink: 1;
  min-width: 0;
}

/* "nach Abstimmung" ebenfalls umbrechen lassen, wenn ein Inquiry-Preis da ist */
.cat-price-main:has(.cat-card-price--inquiry) + .cat-price-vat {
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}

.cat-detail-inquiry-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(var(--accent-color-rgb), 0.08);
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 14px;
}

.cat-detail-inquiry-notice > i {
  color: var(--accent-color);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cat-detail-inquiry-notice > div strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-color);
  display: block;
  margin-bottom: 4px;
}

.cat-detail-inquiry-notice > div p {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: rgba(28, 45, 56, 0.78);
}

/* Inquiry - Warenkorb-Preiszelle */
.cart-price-cell--inquiry {
  font-style: italic;
  color: var(--accent-color) !important;
  font-size: 0.8rem;
  white-space: nowrap;
}

.catalog .cat-card--starterset .cat-detail-price-text,
.catalog .ss-pane .cat-card .cat-detail-price-text {
  color: #ffffff !important;
}

.catalog .cat-card--starterset .cat-detail-price-facts li {
  color: rgba(255, 255, 255, 0.85);
}

.catalog .cat-card--starterset .cat-detail-price-facts li i {
  color: var(--accent-color);
}

/* ── Mengenlogik-Guidance im Detailbereich ─────────────────── */
.cat-detail-guidance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

.cat-detail-guidance-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.cat-detail-guidance-item i {
  color: var(--accent-color);
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.catalog .ss-pane .cat-card .cat-detail-price-facts li {
  color: rgba(255, 255, 255, 0.85);
}

.catalog .ss-pane .cat-card .cat-card-top .cat-card-desc {
  margin-top: 10px;
  margin-bottom: 0;
}

.cat-planning-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #000000;
  background: var(--accent-color);
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 18px;
  margin-bottom: 2px;
}

/* Badge für Konfigurations-Hinweis */
.cat-config-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #000000;
  background: var(--accent-color);
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 12px;
  margin-bottom: 2px;
}

.cat-config-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
  color: #ffffff;
}


/* Komponentenliste - Check-Icon-Stil analog zu Pricing-Listen */
.catalog .cat-card--starterset .cat-card-components {
  border-bottom: 1px solid var(--stroke-1) !important;
  padding: 16px 28px;
}

.catalog .cat-card--starterset .cat-card-components li {
  color: #ffffff !important;
  padding: 8px 0 8px 28px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.catalog .cat-card--starterset .cat-card-components li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.catalog .cat-card--starterset .cat-card-components li::before {
  content: '✓';
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-color);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Card-Body */
.catalog .cat-card--starterset .cat-card-body {
  padding: 20px 28px 26px;
}

.catalog .cat-card--starterset .cat-card-desc {
  color: #ffffff !important;
  font-size: 0.86rem;
  line-height: 1.65;
}

/* Action-Bereich - visuell sauberer Abschluss */
.catalog .cat-card--starterset .cat-card-actions {
  border-top: 1px solid var(--stroke-1);
  padding-top: 16px;
  margin-top: 14px;
}

/* Detail-Collapse in dark-Kontext */
.catalog .cat-card--starterset .cat-detail-content {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(var(--accent-color-rgb), 0.35);
}

.catalog .cat-card--starterset .cat-detail-heading {
  color: #ffffff;
}

.catalog .cat-card--starterset .cat-detail-list li {
  color: #ffffff;
}

/* Starterset: Intro-Absatz ebenfalls in heller Schrift */
.catalog .cat-card--starterset .cat-detail-intro {
  color: #ffffff;
}

/* ── Preisaufschlüsselung in cat-card-components ── */
.cat-bkd-table {
  font-size: 0.875rem;
  line-height: 1.45;
}

.cat-bkd-row {
  display: grid;
  grid-template-columns: 16px 28px 1fr 60px 60px;
  column-gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}

.cat-bkd-row--header {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  padding-top: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cat-bkd-row:last-child {
  border-bottom: none;
}

.cat-bkd-row--total {
  border-bottom: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 2px;
  padding-top: 9px;
  font-weight: 600;
}

.cat-bkd-check {
  color: var(--accent-color);
  font-size: inherit;
  padding-top: 1px;
}

.cat-bkd-pos {
  color: #ffffff;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
}

.cat-bkd-qty {
  text-align: right;
  color: #ffffff;
  white-space: nowrap;
}

.cat-bkd-unit {
  text-align: right;
  color: #ffffff;
  white-space: nowrap;
}

.cat-bkd-total {
  text-align: right;
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
}

.cat-bkd-row--header .cat-bkd-check,
.cat-bkd-row--header .cat-bkd-pos,
.cat-bkd-row--header .cat-bkd-qty,
.cat-bkd-row--header .cat-bkd-unit,
.cat-bkd-row--header .cat-bkd-total {
  color: #ffffff;
  font-weight: 400;
}

.cat-bkd-row--total .cat-bkd-pos {
  color: #ffffff;
}

.cat-bkd-row--total .cat-bkd-total {
  color: var(--accent-color);
}

.cat-bkd-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cat-bkd-section-label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 4px;
  margin-top: 0;
}

@media (max-width: 576px) {
  .cat-bkd-table {
    font-size: 0.82rem;
  }
  .cat-bkd-row {
    grid-template-columns: 14px 24px 1fr 52px 52px;
    column-gap: 3px;
  }
  .cat-bkd-row--header {
    font-size: 0.67rem;
  }
}

/* =============================================================
   PRODUKTKATALOG CARDS - DESIGNFAMILIE DER STARTERSETS
   Scoped via .ss-pane: trifft nur den unteren Produktkatalog,
   Startersets oben bleiben vollständig unberührt.
   ============================================================= */

.catalog .ss-pane .cat-card {
  background: rgba(0, 221, 204, 0.20) !important;
  border: 1px solid rgba(var(--accent-color-rgb), 0.25) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: 8px;
}

.catalog .ss-pane .cat-card:hover {
  border-color: var(--stroke-accent) !important;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--stroke-accent),
    0 8px 32px rgba(var(--accent-color-rgb), 0.08) !important;
  transform: translateY(-4px);
}

/* Top-Bereich */
.catalog .ss-pane .cat-card .cat-card-top {
  border-bottom: 1px solid var(--stroke-1) !important;
  padding: 26px 28px 18px;
}

/* Titel */
.catalog .ss-pane .cat-card .cat-card-name {
  color: #ffffff !important;
  font-size: 1.05rem;
}

/* Modellzeile */
.catalog .ss-pane .cat-card .cat-model {
  color: #ffffff !important;
  margin-top: 18px;
  padding-top: 14px;
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Preisblock */
.catalog .ss-pane .cat-card .cat-card-price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--accent-color) !important;
  letter-spacing: 0.01em;
}

.catalog .ss-pane .cat-card .cat-price-period {
  color: #ffffff !important;
  font-size: 0.80rem;
}

.catalog .ss-pane .cat-card .cat-price-vat {
  color: #ffffff !important;
  font-size: 0.63rem;
}

/* Card-Body */
.catalog .ss-pane .cat-card .cat-card-body {
  padding: 20px 28px 26px;
}

.catalog .ss-pane .cat-card .cat-card-desc {
  color: #ffffff !important;
  font-size: 0.86rem;
  line-height: 1.65;
}

/* Action-Bereich */
.catalog .ss-pane .cat-card .cat-card-actions {
  border-top: 1px solid var(--stroke-1);
  padding-top: 16px;
  margin-top: 14px;
}

/* Detail-Collapse in dark-Kontext */
.catalog .ss-pane .cat-card .cat-detail-content {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(var(--accent-color-rgb), 0.35);
}

.catalog .ss-pane .cat-card .cat-detail-heading {
  color: #ffffff;
}

.catalog .ss-pane .cat-card .cat-detail-list li {
  color: #ffffff;
}

.catalog .ss-pane .cat-card .cat-detail-intro {
  color: #ffffff;
}

/* =============================================================
   GLOBALER PREIS-TOGGLE (catalog.html)
   Segment-Control: Mieten / Kaufen
   ============================================================= */

.pricing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 42px;
  margin-top: 4px;
}

/* Toggle direkt in .cat-section-header: kein Extra-Margin */
.cat-section-header .pricing-toggle {
  flex-shrink: 0;
}

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(3, 25, 38, 0.72);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.pricing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 26px;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 0.91rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
  line-height: 1;
}

.pricing-toggle-btn:hover {
  color: #ffffff;
}

.pricing-toggle-btn.active {
  background: var(--accent-color);
  color: #031926;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(var(--accent-color-rgb), 0.30);
}

.pricing-toggle-btn.active:hover {
  color: #031926;
}

.pricing-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.pricing-toggle-icon {
  font-size: 0.88rem;
  flex-shrink: 0;
}

.pricing-toggle-hint {
  font-size: 0.825rem;
  color: #ffffff;
  max-width: 560px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 480px) {
  .pricing-toggle-btn {
    padding: 9px 18px;
    font-size: 0.86rem;
  }
}

/* Responsive: Toggle im Section-Header umbricht unter den Titel
   und füllt die Breite auf kleineren Viewports gleichmäßig aus. */
@media (max-width: 768px) {
  .cat-section-header {
    flex-wrap: wrap;
    gap: 14px;
  }

  .cat-section-header .pricing-toggle {
    width: 100%;
  }

  .cat-section-header .pricing-toggle-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =============================================================
   USE-CASE UNTERSEITEN - HERO
   ============================================================= */

.usecase-hero {
  padding-top: 120px;
  padding-bottom: 80px;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.usecase-hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.2rem;
}

.usecase-hero .usecase-hero-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
  text-align: center;
}

.usecase-hero .usecase-hero-title span {
  color: var(--accent-color);
  border-bottom: none;
}

.usecase-hero .usecase-hero-title .usecase-hero-accent {
  color: rgb(0, 221, 204);
  text-decoration: none;
  border-bottom: 0;
}

.usecase-hero .usecase-hero-title .text-accent-green {
  color: rgb(0, 221, 204);
  text-decoration: none;
  border-bottom: 0;
}

.usecase-hero-subline {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  line-height: 1.65;
  text-align: center;
}

/* Höhere Spezifität gegenüber .hero p { margin } in main.css */
.usecase-hero .usecase-hero-subline {
  margin: 0 auto 2rem;
}

.usecase-hero .btn-ss-book {
  align-self: center;
}

@media (max-width: 991.98px) {
  .usecase-hero .usecase-hero-title {
    font-size: clamp(1.8rem, 8vw, 3rem);
    line-height: 1.15;
  }

  .usecase-hero-subline {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    line-height: 1.55;
  }
}

/* =============================================================
   KATALOG - TECHNISCHER ENTLASTUNGSHINWEIS
   ============================================================= */

.cat-tech-hint {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(var(--accent-color-rgb), 0.07);
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 32px;
}

.cat-tech-hint__icon {
  color: var(--accent-color);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cat-tech-hint__text {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* =============================================================
   USE-CASE UNTERSEITEN - SECTION SPACING
   ============================================================= */

.usecase-hero + .section,
.section + .section {
  position: relative;
}

/* =============================================================
   MÜLLTONNENBEREITSTELLUNG - Lokale Karten-Korrekturen
   Gezielte Fixes für Starterset und Einzelprodukt.
   Keine globalen Eingriffe in andere Karten.
   ============================================================= */

/* Produktname: kontrollierter Zeilenumbruch bei langen Wörtern */
.cat-card--waste-collection .cat-card-name {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Starterset (Kaufmodus): Preisblock auf max. 42 % begrenzen,
   damit der Servicegebühren-Text nicht unkontrolliert wächst
   und den Namensbereich verdrängt. */
.cat-card--waste-collection.cat-card--starterset .cat-price-block {
  max-width: 42%;
  flex-shrink: 1;
}

/* Servicegebühren-Text: sauber umbrechen, niemals überlaufen */
.cat-card--waste-collection.cat-card--starterset .cat-price-vat--service {
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
  text-align: right;
}

/* Modellzeile: lange Modelltext-Zeile umbrechbar halten */
.cat-card--waste-collection .cat-model {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Einzelprodukt: etwas mehr innere Luft im Card-Body */
.catalog .ss-pane .cat-card--waste-collection:not(.cat-card--starterset) .cat-card-body {
  padding: 22px 28px 28px;
}

/* Einzelprodukt: Abstand zwischen Beschreibung und Actions */
.catalog .ss-pane .cat-card--waste-collection:not(.cat-card--starterset) .cat-card-desc {
  margin-bottom: 18px;
}

/* =============================================================
   WEITERE ANWENDUNGSFÄLLE - Icon-Box Vereinheitlichung
   Gezielte Klassen nur für den Block "Weitere Anwendungsfälle"
   auf Usecase-Unterseiten. Keine globalen Seiteneffekte.
   ============================================================= */

.usecase-related-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.usecase-related-link {
  margin-top: auto;
}

/* =============================================================
   CHALLENGES ABOUT - h4 Titel immer zweizeilig
   Sicherheitsnetz: min-height stellt gleiche Titelhöhe sicher,
   auch wenn ein Titel ohne <br> nur eine Zeile braucht.
   Nur für Icon-Boxen in challenges about Sektionen.
   ============================================================= */

.challenges.about .icon-box h4 {
  min-height: 2.6em;
}

/* =============================================================
   MOBILE SWIPE-SLIDER - #solution & #use-cases
   Unter 992px laufen die icon-box-Karten als horizontaler Swiper.
   Ab 992px wird Swiper per JS destroyed und das bestehende
   Bootstrap-Grid (.row gy-4 + .col-md-6 / .col-xl-3) bleibt aktiv;
   die Regeln hier neutralisieren die Swiper-Default-CSS auf Desktop.
   ============================================================= */

/* ── Mobil: Swiper aktiv ───────────────────────────────────── */
@media (max-width: 991.98px) {
  .challenge-swiper {
    overflow: hidden;
    padding-bottom: 32px;
  }
  /* swiper-wrapper teilt sich den Container mit .row gy-4 -
     auf Mobil dürfen weder flex-wrap noch row-Margins greifen,
     sonst bricht die horizontale Swiper-Spur. justify-content muss
     explizit flex-start sein, sonst zentriert .justify-content-center
     (z. B. in #how-it-works) die überlaufende Slide-Spur und schiebt
     die erste Slide ins links abgeschnittene Negativ. */
  .challenge-swiper > .swiper-wrapper {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    /* align-items-start aus manchen Row-Klassen überschreiben:
       Stretch lässt alle Slides auf die Höhe des größten Slides wachsen */
    align-items: stretch !important;
    margin: 0 !important;
  }
  /* Slides sind gleichzeitig Bootstrap-Cols - Padding/Margin abschalten.
     display: flex / flex-direction: column macht den Slide zum Flex-Behälter,
     damit die icon-box mit flex-grow: 1 die volle Slide-Höhe übernehmen kann.
     height: auto überschreibt Swiper-Bundle-CSS (.swiper-slide{height:100%}),
     das sich sonst nur inkonsistent zu auto auflöst (v.a. Safari/iOS) und
     align-items: stretch daran hindert, alle Slides gleichzustrecken. */
  .challenge-swiper > .swiper-wrapper > .swiper-slide {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  /* icon-box füllt die gestretschte Slide-Höhe aus.
     flex-grow: 1 gilt für alle Swiper (auch index.html-Sektionen mit Collapse). */
  .challenge-swiper > .swiper-wrapper > .swiper-slide > .icon-box {
    flex-grow: 1;
  }
  /* Analog für .app-view-card im #app-views Swiper: beide Karten erreichen
     so im Mobil-Swiper die gleiche Höhe (Höhe der höheren Karte). */
  .challenge-swiper > .swiper-wrapper > .swiper-slide > .app-view-card {
    flex-grow: 1;
    height: 100%;
  }
  /* Use-Case-Unterseiten: Swiper ohne data-challenge-swiper haben keine
     Collapse-Toggles → height: 100% als Rückfallsicherung, falls Browser
     die durch align-items:stretch gegebene Slide-Höhe nicht als definitiven
     Bezugswert für nested flex-grow propagieren.
     Entspricht dem h-100-Muster der "Related"-Sektionen (Swiper-Blöcke am
     Seitenende), die dieses Verhalten bereits zuverlässig zeigen.
     Bewusst NICHT auf [data-challenge-swiper]-Swipers (index.html) angewendet,
     damit Collapse-Inhalte weiterhin ungehindert aufklappen können. */
  .challenge-swiper:not([data-challenge-swiper]) > .swiper-wrapper > .swiper-slide > .icon-box {
    height: 100%;
  }
  /* Pagination-Dots dezent im Marken-Akzent */
  .challenge-swiper > .swiper-pagination {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
  }
  .challenge-swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 4px !important;
    background: var(--accent-color);
    opacity: 0.3;
    transition: opacity 0.2s ease;
  }
  .challenge-swiper .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/* ── Desktop / große Tablets: Bootstrap-Grid übernimmt ─────── */
@media (min-width: 992px) {
  /* Gleichhöhige icon-boxes auf Desktop:
     1. align-items-start (auf manchen Wrapper-Rows) überschreiben → alle
        Spalten einer Row strecken sich auf die Höhe der höchsten Spalte.
     2. Spalte als Flex-Container → icon-box kann mit flex-grow: 1 füllen. */
  .challenge-swiper > .swiper-wrapper {
    align-items: stretch !important;
  }
  .about .challenge-swiper > .swiper-wrapper > .swiper-slide {
    display: flex;
    flex-direction: column;
  }
  .about .challenge-swiper > .swiper-wrapper > .swiper-slide > .icon-box {
    flex-grow: 1;
  }

  .challenge-swiper {
    overflow: visible;
  }
  /* Falls Swiper kurz initialisiert war: Inline-Transform/Transition
     entfernen, flex-wrap zurück auf .row-Verhalten zwingen. */
  .challenge-swiper > .swiper-wrapper {
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
  }
  /* Swiper-Default-CSS .swiper-slide{width:100%} überschreibt sonst
     die Bootstrap-Col-Breiten - per höherer Spezifität korrigieren. */
  .challenge-swiper > .swiper-wrapper > .col-md-6.swiper-slide {
    width: 50%;
  }
  .challenge-swiper > .swiper-wrapper > .col-md-4.swiper-slide {
    width: 33.3333%;
  }
  .challenge-swiper > .swiper-wrapper > .col-lg-6.swiper-slide {
    width: 50%;
  }
  .challenge-swiper > .swiper-wrapper > .col-lg-4.swiper-slide {
    width: 33.3333%;
  }
  .challenge-swiper > .swiper-pagination {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .challenge-swiper > .swiper-wrapper > .col-xl-3.swiper-slide {
    width: 25%;
  }
  .challenge-swiper > .swiper-wrapper > .col-xl-4.swiper-slide {
    width: 33.3333%;
  }
}

/* =============================================================
   MOBILE TYPOGRAFIE – Moderate Reduktion (max-width: 767px)
   Nur Schriftgrößen. Desktop bleibt vollständig unverändert.
   ============================================================= */
@media (max-width: 767px) {

  /* ── 1. Globaler Fließtext ─────────────────────────────────── */
  body {
    font-size: 1.0rem;
  }

  /* ── 2. Allgemeine Überschriften ───────────────────────────── */
  /* Spezifischere Component-Regeln (section-title, hero usw.)   */
  /* überschreiben diese Basis-Stufen automatisch.               */
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.4rem; }
  h4 { font-size: 1.2rem; }
  h5 { font-size: 1.05rem; }
  h6 { font-size: 0.9rem; }

  /* ── 3. Section-Titel ─────────────────────────────────────── */
  .section-title div {
    font-size: 1.35rem;
  }
  .section-title h2 {
    font-size: calc(0.95rem + 0.4vw);
  }
  .section-title h2::after {
    flex: 0 0 45px; /* Trennlinie auf Mobil etwas kürzer */
  }
  .section-title p {
    font-size: 1.0rem;
  }

  /* ── 4. Page-Title Heading (Katalog, Warenkorb, Unterseiten) ─ */
  .page-title .heading h1 {
    font-size: 1.75rem;
  }

  /* ── 5. Konzept-Statement-Bereiche ───────────────────────── */
  .concept-stmnt-label {
    font-size: calc(1.05rem + 0.5vw);
  }
  .concept-stmnt-text {
    font-size: calc(0.88rem + 0.4vw);
  }

  /* ── 6. The Hive ──────────────────────────────────────────── */
  .hive-title {
    font-size: clamp(1.3rem, 5.5vw, 1.85rem);
  }
  .hive-title-highlight {
    font-size: clamp(2.4rem, 9.5vw, 3.8rem);
  }

  /* ── 7. Intro-Claim ───────────────────────────────────────── */
  .intro-claim {
    font-size: clamp(1.35rem, 7.2vw, 2.2rem);
  }

  /* ── 8. Plug-Watch-Relax ──────────────────────────────────── */
  #plug-watch-relax .plug-watch-relax-word {
    font-size: clamp(1.5rem, 8vw, 2.3rem);
  }

  /* ── 9. Image-Claim ───────────────────────────────────────── */
  .idoone-image-claim .idoone-image-claim-content h2 {
    font-size: clamp(1.45rem, 7.5vw, 2.1rem);
  }

  /* ── 10. Use-Case Hero ────────────────────────────────────── */
  .usecase-hero .usecase-hero-title {
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  /* ── 11. Katalog-Karten ───────────────────────────────────── */
  .cat-card-name {
    font-size: 1.1rem;
  }

  /* ── 12. CTA-Karten ───────────────────────────────────────── */
  .cta-card__title {
    font-size: 1.15rem;
  }

  /* ── 13. Footer ───────────────────────────────────────────── */
  .footer h4 {
    font-size: 0.95rem;
  }
  .footer .footer-links a {
    font-size: 0.875rem;
  }

  /* ── 14. Header-Logo ──────────────────────────────────────── */
  .header .logo img {
    height: 34px !important;
    max-height: 34px !important;
  }
}

/* =============================================================
   DASHBOARD WORKSPACE SHOWCASE (dws-*)
   Sektion #dashboard-showcase – mehrschichtige Monitoring-Workspace-
   Darstellung. dws-stage: Desktop-Komposition (≥768 px) mit
   überlagerten, leicht rotierten Panels. dws-mobile-stack:
   einfacher vertikaler Stack für Mobil (<768 px).
   ============================================================= */

/* ── Desktop/Mobil Sichtbarkeit ─────────────────────────────── */
.dws-stage        { display: block; }
.dws-mobile-stack { display: none;  }

@media (max-width: 767.98px) {
  .dws-stage        { display: none; }
  .dws-mobile-stack { display: flex; flex-direction: column; gap: 20px; }
}

/* ── Stage ──────────────────────────────────────────────────── */
.dws-stage {
  position: relative;
  min-height: 520px;
  overflow: visible;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 1400px) {
  .dws-stage { min-height: 600px; }
}

@media (max-width: 991.98px) {
  .dws-stage { min-height: 400px; }
}

/* Subtile Scanlines – "aktives System"-Feeling */
.dws-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.018) 3px,
    rgba(0, 0, 0, 0.018) 4px
  );
  pointer-events: none;
  z-index: 20;
}

/* .dws-stage::after entfernt – kein Ausblend-Rechteck am unteren Rand */

/* ── Ambiente Tiefenbeleuchtung ─────────────────────────────── */
.dws-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  background: radial-gradient(ellipse at center,
    rgba(var(--accent-color-rgb), 0.07) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Panel (Basis für alle Panels) ─────────────────────────── */
.dws-panel {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-color-rgb), 0.20);
  background: rgba(5, 42, 61, 0.80);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Hauptpanel (zentral, dominant) ────────────────────────── */
.dws-panel--main {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 62%;
  z-index: 5;
  border-color: rgba(var(--accent-color-rgb), 0.42);
  box-shadow:
    0 36px 88px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 100px rgba(var(--accent-color-rgb), 0.08);
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.55s ease;
}

.dws-stage:hover .dws-panel--main {
  transform: translateX(-50%) translateY(-6px);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 120px rgba(var(--accent-color-rgb), 0.11);
}

/* ── Hintergrundpanels (gemeinsame Basis) ───────────────────── */
.dws-panel--bg {
  position: absolute;
  top: 44px;
  z-index: 2;
  opacity: 0.65;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   0.55s ease;
}

/* ── Hintergrundpanel links ─────────────────────────────────── */
.dws-panel--left {
  left: 0;
  width: 43%;
  transform: rotate(-3.5deg) translateX(-5%);
}

.dws-stage:hover .dws-panel--left {
  transform: rotate(-3.5deg) translateX(-7%) translateY(-3px);
  opacity: 0.78;
}

/* ── Hintergrundpanel rechts ────────────────────────────────── */
.dws-panel--right {
  right: 0;
  width: 43%;
  transform: rotate(3.5deg) translateX(5%);
}

.dws-stage:hover .dws-panel--right {
  transform: rotate(3.5deg) translateX(7%) translateY(-3px);
  opacity: 0.78;
}

/* ── Chrome-Leiste (Fenster-Titelzeile) ─────────────────────── */
.dws-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(3, 25, 38, 0.90);
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.10);
  user-select: none;
}

/* macOS-artige Fensterdots */
.dws-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dws-dot-r { background: rgba(237, 37,  78,  0.72); }
.dws-dot-y { background: rgba(255, 189,  0,  0.72); }
.dws-dot-g { background: rgba(var(--accent-color-rgb), 0.72); }

.dws-chrome-label {
  margin-left: 7px;
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.36);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* LIVE-Badge rechts in der Chrome-Leiste */
.dws-chrome-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--accent-color);
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: auto;
}

.dws-live-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  animation: dws-pulse 2.2s ease-in-out infinite;
}

@keyframes dws-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.30; transform: scale(0.72); }
}

/* ── Panel-Screenshot ───────────────────────────────────────── */
.dws-panel picture {
  display: block;
}

.dws-panel-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.22s ease;
}

/* ── Floating Badges ────────────────────────────────────────── */
.dws-badge,
.dws-chip {
  position: absolute;
  z-index: 22;
  pointer-events: none;
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 42, 61, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Warnung – oben rechts am Hauptpanel */
.dws-badge--warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  top: 11%;
  right: 21%;
  border: 1px solid rgba(237, 37, 78, 0.42);
  animation: dws-float 5.2s ease-in-out infinite;
}

/* Status-OK – unten links am Hauptpanel */
.dws-badge--ok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  bottom: 19%;
  left: 21%;
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  animation: dws-float 6.5s ease-in-out infinite 1.6s;
}

/* Chip – Warnungs-Zähler */
.dws-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  top: 40%;
  right: 19%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  animation: dws-float 7.0s ease-in-out infinite 0.8s;
}

.dws-chip-icon {
  color: var(--accent-color);
  font-size: 0.80rem;
}

.dws-badge-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.dws-badge-icon--warn { color: rgba(237, 37, 78, 0.90); }
.dws-badge-icon--ok   { color: var(--accent-color);     }

.dws-badge-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  line-height: 1.25;
}

.dws-badge-sub {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.46);
  white-space: nowrap;
  line-height: 1.25;
  margin-top: 1px;
}

@keyframes dws-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-7px); }
}

/* ── Tablet-Anpassungen ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  .dws-panel--main  { width: 66%; }
  .dws-panel--left,
  .dws-panel--right { width: 45%; }

  .dws-badge--warn { top:  9%; right: 18%; }
  .dws-badge--ok   { bottom: 15%; left: 18%; }
  .dws-chip        { top: 38%; right: 16%; }
}

/* ── Mobildarstellung: kein Hover-Transform ─────────────────── */
@media (max-width: 767.98px) {
  .dws-panel:hover { transform: none; }
}

/* =============================================================
   MOBILE SWIPE-SLIDER - #starter-sets
   Unter 768px laufen .starterset-step- und .cta-card-Karten als
   horizontaler Swiper (ss-swiper). Ab 768px wird Swiper per JS
   destroyed und das bestehende Bootstrap-Grid übernimmt.
   Technisch und visuell identisch zum challenge-swiper-Muster.
   ============================================================= */

/* ── Mobil: ss-swiper aktiv (< 768px) ─────────────────────── */
@media (max-width: 767.98px) {
  .ss-swiper {
    overflow: hidden;
    padding-bottom: 32px;
  }

  /* swiper-wrapper teilt sich den Container mit .row –
     flex-wrap und row-Margins abschalten, damit die horizontale
     Swiper-Spur nicht umbricht oder seitlich abgeschnitten wird. */
  .ss-swiper > .swiper-wrapper {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  /* Slides sind gleichzeitig Bootstrap-Cols – Padding/Margin
     abschalten; display: flex / flex-direction: column macht den
     Slide zum Flex-Behälter damit die Karte mit flex-grow: 1 die
     volle Slide-Höhe ausfüllt. height: auto überschreibt den
     Swiper-Default (.swiper-slide{height:100%}). */
  .ss-swiper > .swiper-wrapper > .swiper-slide {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
  }

  /* Karten füllen die gestreckte Slide-Höhe aus */
  .ss-swiper > .swiper-wrapper > .swiper-slide > .starterset-step,
  .ss-swiper > .swiper-wrapper > .swiper-slide > .cta-card {
    flex-grow: 1;
  }

  /* Pagination-Dots: identisch zu challenge-swiper */
  .ss-swiper > .swiper-pagination {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
  }

  .ss-swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 4px !important;
    background: var(--accent-color);
    opacity: 0.3;
    transition: opacity 0.2s ease;
  }

  .ss-swiper .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* cta-cards-row: auf Mobil kompakteren Abstand */
  .ss-swiper.cta-cards-row {
    margin-top: 32px;
    margin-bottom: 40px;
  }
}

/* ── Tablet + Desktop: Bootstrap-Grid übernimmt ────────────── */
@media (min-width: 768px) {
  /* Swiper-CSS overflow: hidden abschalten */
  .ss-swiper {
    overflow: visible;
  }

  /* swiper-bundle.min.css setzt auf .swiper-wrapper:
       width: 100%            → überschreibt Block-Auto-Breite
       box-sizing: content-box → weicht vom globalen border-box ab
       transform: translate3d  → verschiebt die Row
       transition-property     → stört CSS-Übergänge im Grid
     Alle vier explizit zurücksetzen, damit .swiper-wrapper.row
     identisch zu einer normalen Bootstrap-.row verhält. */
  .ss-swiper > .swiper-wrapper {
    width: auto !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  /* swiper-bundle.min.css setzt .swiper-slide { width: 100% } global,
     das überschreibt Bootstrap-Col-Breiten.
     col-md-6 (CTA-Karten ab ≥768 px): 2 Spalten nebeneinander. */
  .ss-swiper > .swiper-wrapper > .col-md-6.swiper-slide {
    width: 50%;
  }

  /* Pagination ab 768px ausblenden */
  .ss-swiper > .swiper-pagination {
    display: none !important;
  }
}

/* ── Desktop: col-lg-* Breiten explizit zurücksetzen ────────── */
@media (min-width: 992px) {
  /* col-lg-4: 3 Spalten nebeneinander (Steps + CTA) */
  .ss-swiper > .swiper-wrapper > .col-lg-4.swiper-slide {
    width: 33.3333%;
  }
}

/* =============================================================
   EXPERIMENT: Mobile compact icon-box layout
   Ziel: Icon-Boxen auf Smartphones kompakter darstellen
   Scope: body.mobile-compact-iconboxes – leicht deaktivierbar,
          einfach body-Klasse entfernen um Experiment auszuschalten.
   Betrifft: #solution, #use-cases, #alarm-to-solution,
             #how-it-works, .challenge-swiper (inkl. Unterseiten)
   Nur @media (max-width: 767.98px) – Desktop/Tablet unverändert.
   ============================================================= */
@media (max-width: 767.98px) {

  /* ── 1. Padding reduzieren ─────────────────────────────────── */
  body.mobile-compact-iconboxes #solution .icon-box,
  body.mobile-compact-iconboxes #use-cases .icon-box,
  body.mobile-compact-iconboxes #alarm-to-solution .icon-box,
  body.mobile-compact-iconboxes #how-it-works .icon-box,
  body.mobile-compact-iconboxes .challenge-swiper .icon-box {
    padding: 22px 18px !important;
  }

  /* ── 2. min-height-Böden aufheben (Swiper-Stretch übernimmt) ── */
  /* Swiper-align-items:stretch und flex-grow:1 stellen Gleichhöhe  */
  /* sicher – explizite min-height-Böden sind auf Mobil überflüssig. */
  body.mobile-compact-iconboxes #solution .icon-box,
  body.mobile-compact-iconboxes #use-cases .icon-box,
  body.mobile-compact-iconboxes #alarm-to-solution .icon-box {
    min-height: unset;
  }

  /* ── 3. Icon-Größe reduzieren ──────────────────────────────── */
  body.mobile-compact-iconboxes #solution .icon-box > i,
  body.mobile-compact-iconboxes #use-cases .icon-box > i,
  body.mobile-compact-iconboxes #alarm-to-solution .icon-box > i,
  body.mobile-compact-iconboxes .challenge-swiper .icon-box > i {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    flex: 0 0 64px !important;
    font-size: 27px !important;
    margin-bottom: 14px !important;
  }

  /* #how-it-works: Icon sitzt in .hiw-icon-row i, nicht direkt als > i */
  body.mobile-compact-iconboxes #how-it-works .hiw-icon-row i {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    flex: 0 0 64px !important;
    font-size: 27px !important;
  }

  body.mobile-compact-iconboxes #how-it-works .hiw-icon-row {
    margin-bottom: 14px;
  }

  /* ── 4. Titel kompakter ────────────────────────────────────── */
  body.mobile-compact-iconboxes #solution .icon-box h3,
  body.mobile-compact-iconboxes #use-cases .icon-box h3,
  body.mobile-compact-iconboxes #alarm-to-solution .icon-box h3,
  body.mobile-compact-iconboxes #how-it-works .icon-box h3,
  body.mobile-compact-iconboxes .challenge-swiper .icon-box h3 {
    font-size: 1.02rem !important;
    line-height: 1.28;
    margin-bottom: 5px !important;
  }

  /* ── 5. Toggle kompakter (Touch-Fläche bleibt ausreichend) ─── */
  body.mobile-compact-iconboxes #solution .challenge-toggle,
  body.mobile-compact-iconboxes #use-cases .challenge-toggle,
  body.mobile-compact-iconboxes #alarm-to-solution .challenge-toggle,
  body.mobile-compact-iconboxes .challenge-swiper .challenge-toggle {
    font-size: 0.9rem;
    min-height: 36px;
    padding: 5px 0;
  }

  /* ── 6. Collapse-Abstand reduzieren ────────────────────────── */
  body.mobile-compact-iconboxes #solution .challenge-collapse,
  body.mobile-compact-iconboxes #use-cases .challenge-collapse,
  body.mobile-compact-iconboxes #alarm-to-solution .challenge-collapse,
  body.mobile-compact-iconboxes .challenge-swiper .challenge-collapse {
    margin-top: 10px;
  }

  body.mobile-compact-iconboxes #solution .challenge-collapse p,
  body.mobile-compact-iconboxes #use-cases .challenge-collapse p,
  body.mobile-compact-iconboxes #alarm-to-solution .challenge-collapse p,
  body.mobile-compact-iconboxes .challenge-swiper .challenge-collapse p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

/* ── Closing Statements – mobil kompakter ─────────────────────────
   Desktop bleibt unverändert (24px / line-height 1.5).
   Auf Smartphones wirken sie sonst zu dominant und erzeugen
   unnötig viel Scroll-Länge.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .closing-statement {
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   I.DO.ONE Theme – exportiert vom Theme Customizer
   Einfügen in: assets/css/idoone-theme.css
   (oder ans Ende der Datei anfügen – überschreibt ältere Regeln)
═══════════════════════════════════════════════════════════════ */

body::before {
  background: linear-gradient(150deg, #001418 0%, #0f424d 35%, #003048 70%, #00ddcc55 100%) !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

/* Icon-Box Farben */
.about .icon-box        { background: rgba(0,221,204, 0.20) !important; border-color: rgba(0,221,204, 0.28) !important; }
.about .icon-box:hover  { border-color: rgba(0,221,204, 0.55) !important; }
.about .icon-box i      { background-color: rgba(0,221,204, 0.14) !important; color: #00ddcc !important; }
.about .icon-box:hover i{ background-color: #00ddcc !important; }
.about .icon-box h3,
.about .icon-box h4     { color: #ffffff !important; }

/* Alarm-to-Solution FAQ-Akkordion: gleiche Farbe wie Icon-Boxes */
#alarm-to-solution .faq-container .faq-item        { background: rgba(0,221,204, 0.20) !important; border-color: rgba(0,221,204, 0.28) !important; }
#alarm-to-solution .faq-container .faq-item:hover  { border-color: rgba(0,221,204, 0.55) !important; }
#alarm-to-solution .faq-container .faq-icon        { color: rgba(0,221,204, 1) !important; }
#alarm-to-solution .faq-container .faq-toggle      { color: rgba(0,221,204, 1) !important; }
#alarm-to-solution .faq-container .faq-active h3   { color: rgba(0,221,204, 1) !important; }
#alarm-to-solution .faq-container .faq-active .faq-toggle { color: rgba(0,221,204, 1) !important; }


/* ═══════════════════════════════════════════════════════════════
   HERO FLOORPLAN EXPERIMENT
   Scoping: #home.hero-floorplan-experiment
   Rückgängig: Klasse "hero-floorplan-experiment" aus <section>
   entfernen → alter Hero erscheint automatisch wieder.
   ═══════════════════════════════════════════════════════════════ */

/* ── Alte Hero-Elemente im Experiment ausblenden ────────────── */
#home.hero-floorplan-experiment .hero-icons-panel {
  display: none !important;
}
#home.hero-floorplan-experiment .hero-top-title {
  display: none !important;
}

/* ── Section: overflow hidden für Glow-Effekte ───────────────── */
/* ↓↓ Bildgröße Desktop:   --fp-img-scale  (1 = normal, 1.2 = 20% größer)         */
/* ↓↓ Bild nach rechts:    --fp-img-offset (px – positiv = weiter rechts)         */
/* ↓↓ Sensor-Waben Größe:  --hex-size      (px) – Tablet/Mobile auto              */
/* ↓↓ Sensor-Icon Größe:   --hex-icon-size (direkt in px oder rem)                */
/* ↓↓ Sensor-Text Größe:   --hex-font-size (direkt in px oder rem)                */
#home.hero-floorplan-experiment {
  --fp-img-scale: 1.9;
  --fp-img-offset: 150px;
  --hex-size: 25px;
  --hex-icon-size: 0.75rem;
  --hex-font-size: 0.22rem;
  overflow: hidden;
  position: relative;
}

/* Auf Mobilgeräten: Höhe auto, damit gestapelter Inhalt nicht clippt.
   svh (small viewport height) statt dvh: bleibt stabil, wenn die
   Browser-Adressleiste ein- oder ausblendet → keine Layoutsprünge. */
@media (max-width: 767.98px) {
  #home.hero-floorplan-experiment {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding-top: 72px !important;
  }
}

/* ── Dekorativer Hintergrund-Layer ───────────────────────────── */
#home.hero-floorplan-experiment .hero-floorplan-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 65% 75% at 72% 48%, rgba(var(--accent-color-rgb), 0.07) 0%, transparent 65%),
    linear-gradient(rgba(var(--accent-color-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-color-rgb), 0.03) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  animation: hero-fp-bg-drift 18s linear infinite;
}

@keyframes hero-fp-bg-drift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 56px 56px, 56px 56px; }
}

/* ── Layout ──────────────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-floorplan-layout {
  position: relative;
  z-index: 3;
}

/* ── Desktop: CSS-Grid – Titel + Copy links, Visual rechts ──── */
@media (min-width: 992px) {
  #home.hero-floorplan-experiment .hero-floorplan-layout {
    display: grid !important;
    grid-template-columns: 4fr 8fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title  visual"
      "copy   visual";
    align-items: stretch;
    row-gap: 0;
    column-gap: clamp(48px, 5vw, 110px);
  }

  #home.hero-floorplan-experiment .hero-fp-title-col {
    grid-area: title;
    align-self: end;
    padding-bottom: 0;
  }

  #home.hero-floorplan-experiment .hero-floorplan-copy {
    grid-area: copy;
    align-self: start;
  }

  #home.hero-floorplan-experiment .hero-carousel-content {
    gap: 0;
  }

  #home.hero-floorplan-experiment .hero-floorplan-visual {
    grid-area: visual;
    align-self: center;
    justify-content: flex-end;
  }
}

/* ── Linke Spalte: Copy ──────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-floorplan-copy {
  position: relative;
  /* z-index 5: Text liegt über dem Grundriss, wenn der Carousel hineinragt */
  z-index: 5;
  overflow: visible;
  /* kein rechter Padding – der Carousel-Titel reicht selbst in den Grundriss */
  padding-right: 0;
}

/* ── Statischer Haupttitel ───────────────────────────────────── */
#home.hero-floorplan-experiment .hero-fp-main-title {
  margin: 0 0 1.8rem;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #ffffff;
  width: min(150%, 740px);
  position: relative;
  z-index: 6;
}

#home.hero-floorplan-experiment .hero-fp-main-title--accent {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: none;
}

/* ── Kicker / Badge ──────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-fp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), 0.07);
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  margin-bottom: 1.4rem;
  text-transform: uppercase;
}

#home.hero-floorplan-experiment .hero-fp-kicker i {
  font-size: 0.78rem;
}

/* ── Carousel: stark verkleinert als Use-Case-Ticker ─────────── */
#home.hero-floorplan-experiment .hero-carousel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#home.hero-floorplan-experiment .hero-carousel .carousel-inner {
  width: 100%;
  flex: 0 0 auto;
}

#home.hero-floorplan-experiment .hero-carousel-content {
  text-align: left;
  min-height: auto;
  padding: 0;
  gap: 0.65rem;
}

#home.hero-floorplan-experiment .hero-carousel-title {
  font-size: clamp(0.88rem, 1.3vw, 1.15rem);
  line-height: 1.25;
  font-weight: 400;
  color: #ffffff;
}

#home.hero-floorplan-experiment .hero-carousel-indicators {
  justify-content: flex-start;
  margin: 0;
}

/* Carousel-Indikatoren: dezente Signal-Line-Optik */
#home.hero-floorplan-experiment .hero-carousel-indicators [data-bs-target] {
  position: relative;
  width: 22px;
  height: 2px;
  border: 0;
  border-top: 0;
  border-bottom: 0;
  background-color: transparent;
  opacity: 1;
  box-shadow: none;
  transition: width 0.3s ease;
}

#home.hero-floorplan-experiment .hero-carousel-indicators [data-bs-target]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  transition: width 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
}

#home.hero-floorplan-experiment .hero-carousel-indicators .active {
  width: 38px;
  background-color: transparent;
  box-shadow: none;
}

#home.hero-floorplan-experiment .hero-carousel-indicators .active::before {
  background-color: var(--accent-color);
}

/* ── Indikatoren-Wrapper: größere Klickfläche, optisch unverändert ── */
#home.hero-floorplan-experiment .hero-carousel-indicators-wrap {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  margin-top: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Einzelne Indikatoren: Trefferfläche nach unten, Linie direkt unter dem Content */
#home.hero-floorplan-experiment .hero-carousel-indicators-wrap [data-bs-target] {
  padding-top: 0;
  padding-bottom: 28px;
  background-clip: content-box;
  outline: none;
}

#home.hero-floorplan-experiment .hero-carousel-indicators-wrap [data-bs-target]:focus,
#home.hero-floorplan-experiment .hero-carousel-indicators-wrap [data-bs-target]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Feste Subline ───────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-fp-subline {
  font-family: 'Roboto', var(--default-font), sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: #ffffff;
  margin: 0 0 1.2rem;
  max-width: 44ch;
}

/* ── Nutzen-Pills ────────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-fp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.6rem;
}

#home.hero-floorplan-experiment .hero-fp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.77rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

#home.hero-floorplan-experiment .hero-fp-pill i {
  color: var(--accent-color);
  font-size: 0.8rem;
}

/* ── Rechte Spalte: Visual ───────────────────────────────────── */
#home.hero-floorplan-experiment .hero-floorplan-visual {
  position: relative;
  z-index: 2; /* unter der Copy-Spalte (z-index 5) */
  display: flex;
  align-items: center;
  /* overflow visible: Wrapper darf rechts aus der Spalte herausragen */
  overflow: visible;
}

/* ── Wrapper: bricht rechts über die Spaltengrenze hinaus ─────
   Die Section hat overflow:hidden → sauber am Viewport-Rand geclipt
   aspect-ratio hält die Höhe, da beide Slides absolute positioniert sind */
#home.hero-floorplan-experiment .hero-floorplan-wrapper {
  position: relative;
  width: 97%;
  margin-right: -3%;
  aspect-ratio: 1536 / 1024;
  transform-origin: center center;
}

/* ── Morph-Slides: übereinander gestapelt ────────────────────── */
#home.hero-floorplan-experiment .hero-fp-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#home.hero-floorplan-experiment .hero-fp-slide--building {
  animation: heroMorphBuilding 16s ease-in-out infinite;
}

#home.hero-floorplan-experiment .hero-fp-slide--flat {
  animation: heroMorphFlat 16s ease-in-out infinite;
}

/* Gebäude 6 s sichtbar → 2 s Überblende → Wohnung 6 s → 2 s zurück */
@keyframes heroMorphBuilding {
  0%     { opacity: 1; }
  37.5%  { opacity: 1; }
  50%    { opacity: 0; }
  87.5%  { opacity: 0; }
  100%   { opacity: 1; }
}

@keyframes heroMorphFlat {
  0%     { opacity: 0; }
  37.5%  { opacity: 0; }
  50%    { opacity: 1; }
  87.5%  { opacity: 1; }
  100%   { opacity: 0; }
}

/* Radialer Glow hinter dem Grundriss */
#home.hero-floorplan-experiment .hero-floorplan-wrapper::before {
  content: '';
  position: absolute;
  inset: -10% -6%;
  background: radial-gradient(ellipse at 60% 48%, rgba(var(--accent-color-rgb), 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Grundrissbild ───────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-fp-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

#home.hero-floorplan-experiment .hero-floorplan-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
  opacity: 0.93;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(var(--accent-color-rgb), 0.18))
    drop-shadow(0 0 52px rgba(0, 70, 110, 0.42))
    brightness(1.06)
    contrast(1.1);
  animation: none;
}

@keyframes hero-fp-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ── Sensor-Layer: absoluter Overlay-Container ───────────────── */
#home.hero-floorplan-experiment .hero-sensor-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ── Sensor-Node: gemeinsame Basis ───────────────────────────── */
#home.hero-floorplan-experiment .hero-sensor-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.26rem;
  transform: translate(-50%, -50%);
}

/* ── Sensor-Wabe (Hexagon) ───────────────────────────────────── */
#home.hero-floorplan-experiment .hero-sensor-hex {
  position: relative;
  width: var(--hex-size);
  aspect-ratio: 58 / 52;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 5px var(--sfp-glow));
  animation: heroHexPulse 3.4s ease-in-out infinite;
  animation-delay: var(--sfp-delay, 0s);
}

/* Äußere Hex-Schicht: Accent-Farbe als sichtbare "Border" */
#home.hero-floorplan-experiment .hero-sensor-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: var(--sfp-color);
  opacity: 0.62;
}

/* Innere Hex-Schicht: dunkle Füllung */
#home.hero-floorplan-experiment .hero-sensor-hex::after {
  content: '';
  position: absolute;
  inset: calc(var(--hex-size) * 0.052);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: rgba(3, 25, 38, 0.88);
}

/* Icon innerhalb der Wabe */
#home.hero-floorplan-experiment .hero-sensor-hex-inner {
  position: relative;
  z-index: 1;
  color: var(--sfp-color);
  font-size: var(--hex-icon-size, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@keyframes heroHexPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--sfp-glow)); }
  50%       { filter: drop-shadow(0 0 14px var(--sfp-glow)); }
}

/* ── Labels ──────────────────────────────────────────────────── */
#home.hero-floorplan-experiment .hero-sensor-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

#home.hero-floorplan-experiment .hero-sensor-label-title {
  font-size: var(--hex-font-size, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

#home.hero-floorplan-experiment .hero-sensor-label-value {
  font-size: var(--hex-font-size, 0.62rem);
  font-weight: 500;
  color: var(--sfp-color);
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

/* ═══════════════════════════════════════════════════════════════
   Sensor-Farben & Verzögerungen (slide-übergreifend)
   ═══════════════════════════════════════════════════════════════ */

#home.hero-floorplan-experiment .hero-sensor-node--climate {
  --sfp-color: #a78bfa;
  --sfp-glow: rgba(167, 139, 250, 0.55);
}

#home.hero-floorplan-experiment .hero-sensor-node--leakage {
  --sfp-color: #38bdf8;
  --sfp-glow: rgba(56, 189, 248, 0.55);
  --sfp-delay: 0.7s;
}

#home.hero-floorplan-experiment .hero-sensor-node--door {
  --sfp-color: #34d399;
  --sfp-glow: rgba(52, 211, 153, 0.55);
  --sfp-delay: 1.4s;
}

#home.hero-floorplan-experiment .hero-sensor-node--temp {
  --sfp-color: #00ddcc;
  --sfp-glow: rgba(0, 221, 204, 0.55);
  --sfp-delay: 2.1s;
}

#home.hero-floorplan-experiment .hero-sensor-node--smoke {
  --sfp-color: #fb923c;
  --sfp-glow: rgba(251, 146, 60, 0.55);
  --sfp-delay: 2.8s;
}

/* ═══════════════════════════════════════════════════════════════
   Gebäude-Querschnitt: Sensor-Positionen
   Etagen (% Bildhöhe): DG ~14-28 | 2.OG ~28-43 | 1.OG ~43-57
                        EG ~57-72  | Keller ~72-90
   ═══════════════════════════════════════════════════════════════ */

/* Raumklima – 1.OG Wohnzimmer (rechte Raumzone) */
#home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--climate {
  top: 50%; left: 67%;
}

/* Leckage – Keller links (Wasch-/Technikraum) */
#home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--leakage {
  top: 79%; left: 35%;
}

/* Tür/Fenster – Dachgeschoss rechts (Dachfenster) */
#home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--door {
  top: 22%; left: 70%;
}

/* Heizung – Keller Mitte (Heizraum) */
#home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--temp {
  top: 79%; left: 61%;
}

/* Rauchmelder – EG Treppenhaus */
#home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--smoke {
  top: 64%; left: 20%;
}

/* ═══════════════════════════════════════════════════════════════
   Wohnungsgrundriss: Sensor-Positionen
   ═══════════════════════════════════════════════════════════════ */

/* Raumklima – Wohnzimmer (großer Raum links) */
#home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--climate {
  top: 40%; left: 22%;
}

/* Leckage – Bad/WC (rechts, Nassbereich) */
#home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--leakage {
  top: 38%; left: 73%;
}

/* Tür/Fenster – Wohnzimmer Fenster (oben) */
#home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--door {
  top: 16%; left: 28%;
}

/* Temperatur – Essbereich/Küche (Heizkörper) */
#home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--temp {
  top: 22%; left: 56%;
}

/* Rauchmelder – Flur/Diele (Mitte) */
#home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--smoke {
  top: 48%; left: 49%;
}

/* ── prefers-reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #home.hero-floorplan-experiment .hero-sensor-hex,
  #home.hero-floorplan-experiment .hero-sensor-hex::before,
  #home.hero-floorplan-experiment .hero-floorplan-img,
  #home.hero-floorplan-experiment .hero-floorplan-bg {
    animation: none !important;
  }
  /* Morph-Überblende anhalten: Gebäude sichtbar, Wohnung ausgeblendet */
  #home.hero-floorplan-experiment .hero-fp-slide--building {
    animation: none !important;
    opacity: 1;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--flat {
    animation: none !important;
    opacity: 0;
  }
}

/* ── Desktop: Visual nach rechts – mehr Abstand, größer ─────── */
/* Bildgröße anpassen: --fp-img-width erhöhen (z.B. 130% = größer) */
@media (min-width: 992px) {
  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    width: 108%;
    margin-right: 0;
    transform: translateX(var(--fp-img-offset, 40px)) scale(var(--fp-img-scale, 1));
    transform-origin: center center;
  }

  #home.hero-floorplan-experiment .hero-floorplan-img {
    max-width: none;
  }
}

@media (min-width: 1200px) {
  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    transform: translateX(var(--fp-img-offset, 40px)) scale(var(--fp-img-scale, 1));
  }
}

@media (min-width: 1400px) {
  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    transform: translateX(var(--fp-img-offset, 40px)) scale(var(--fp-img-scale, 1));
  }
}

/* ── Tablet (≤ 991px) ────────────────────────────────────────── */
@media (max-width: 991.98px) {
  #home.hero-floorplan-experiment {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    /* Kein Overflow auf Tablet – Bild bleibt in Column */
    width: 100%;
    margin-right: 0;
  }

  #home.hero-floorplan-experiment .hero-floorplan-visual {
    justify-content: center;
  }

  /* Carousel-Breite auf Spaltenbreite zurücksetzen */
  #home.hero-floorplan-experiment .hero-carousel {
    width: 100%;
  }

  #home.hero-floorplan-experiment .hero-fp-subline {
    max-width: none;
  }

  #home.hero-floorplan-experiment {
    --hex-size: 46px;
  }

}

/* ── Mobile (≤ 767px) ────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Tagline auf Mobile: fixed am unteren Viewport-Rand. */
  #home .hero-tagline-divider {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* Padding-bottom: genug Abstand zur fixen Tagline (~75px hoch), kein Überschuss.
     align-items: flex-start verhindert vertikale Zentrierung des Containers –
     Inhalt beginnt direkt unterhalb des padding-top (= Header-Unterkante).
     overflow-x: hidden verhindert horizontales Scrollen durch überbreite Kindelemente. */
  #home.hero-floorplan-experiment {
    padding-bottom: 80px !important;
    align-items: flex-start !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Grid: Titel oben (auto) – Visual mittig (1fr) – Carousel unten (auto).
     height (nicht nur min-height) ist nötig, damit 1fr die verfügbare
     Höhe tatsächlich aufteilt. Bootstrap-.row-Gutters zurücksetzen.
     svh statt dvh: Höhe bleibt stabil, unabhängig von der URL-Leiste. */
  #home.hero-floorplan-experiment .hero-floorplan-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "title"
      "visual"
      "copy";
    height: calc(100svh - 72px - 80px);
    min-height: 0;
    gap: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bootstrap col-Gutters (padding: 0 0.75rem) zurücksetzen */
  #home.hero-floorplan-experiment .hero-fp-title-col,
  #home.hero-floorplan-experiment .hero-floorplan-visual,
  #home.hero-floorplan-experiment .hero-floorplan-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #home.hero-floorplan-experiment .hero-fp-title-col {
    grid-area: title;
    padding-top: 0;
    padding-bottom: 0.25rem;
  }

  /* Visual füllt die 1fr-Grid-Zelle vollständig; align-self:stretch
     streckt das Element auf die Zellhöhe; Flex zentriert den Wrapper darin */
  #home.hero-floorplan-experiment .hero-floorplan-visual {
    grid-area: visual;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Carousel/Copy bleibt am unteren Rand des Grid-Bereichs */
  #home.hero-floorplan-experiment .hero-floorplan-copy {
    grid-area: copy;
    padding-bottom: 0.75rem;
    margin-top: 0;
  }

  /* Labels auf Mobil ausblenden – nur Hex-Waben bleiben */
  #home.hero-floorplan-experiment .hero-sensor-label {
    display: none;
  }

  #home.hero-floorplan-experiment {
    --hex-size: 38px;
  }

  #home.hero-floorplan-experiment .hero-floorplan-copy {
    padding-right: var(--bs-gutter-x, 12px);
  }

  #home.hero-floorplan-experiment .hero-carousel-content {
    min-height: auto;
    text-align: center;
  }

  #home.hero-floorplan-experiment .hero-carousel-title {
    margin-bottom: 0;
    font-size: clamp(1.1rem, 4.2vw, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #home.hero-floorplan-experiment .hero-carousel-indicators {
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    gap: 0.25rem;
    margin: 0;
  }

  #home.hero-floorplan-experiment .hero-carousel-indicators [data-bs-target] {
    width: 16px;
    flex-shrink: 0;
  }

  #home.hero-floorplan-experiment .hero-carousel-indicators-wrap {
    min-height: 0;
    justify-content: center;
  }

  #home.hero-floorplan-experiment .hero-carousel-indicators-wrap [data-bs-target] {
    padding-top: 0;
    padding-bottom: 32px;
  }

  #home.hero-floorplan-experiment .hero-carousel-subline {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 42ch;
    margin-inline: auto;
  }

  #home.hero-floorplan-experiment .hero-carousel-subline::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: rgb(0, 221, 204);
    margin: 0 0 0.6rem;
  }

  #home.hero-floorplan-experiment .hero-fp-main-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem;
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  #home.hero-floorplan-experiment .hero-fp-subline {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  #home.hero-floorplan-experiment .hero-fp-kicker {
    font-size: 0.62rem;
    margin-bottom: 0.75rem;
  }

  /* ── Wrapper: Desktop-Bleed komplett zurücksetzen ─────────────── */
  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* Bild explizit mittig ausrichten */
  #home.hero-floorplan-experiment .hero-floorplan-img {
    object-position: center center !important;
  }

  /* ── Gebäude-Slide: Sensor-Positionen (Mobile) ───────────────── */
  #home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--door {
    top: 22%; left: 70%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--climate {
    top: 50%; left: 67%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--smoke {
    top: 64%; left: 20%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--temp {
    top: 79%; left: 61%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--building .hero-sensor-node--leakage {
    top: 79%; left: 35%;
  }

  /* ── Wohnungsgrundriss: Sensor-Positionen (Mobile) ───────────── */
  #home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--door {
    top: 16%; left: 28%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--climate {
    top: 40%; left: 22%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--temp {
    top: 22%; left: 56%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--smoke {
    top: 48%; left: 49%;
  }
  #home.hero-floorplan-experiment .hero-fp-slide--flat .hero-sensor-node--leakage {
    top: 38%; left: 73%;
  }
}

/* ── Sehr kleine Phones: Viewport-Höhe ≤ 680px (z. B. iPhone SE, Galaxy A) ── */
@media (max-width: 767.98px) and (max-height: 680px) {
  #home.hero-floorplan-experiment {
    padding-top: 60px !important;
    padding-bottom: 70px !important;
    align-items: flex-start !important;
  }

  #home.hero-floorplan-experiment .hero-fp-main-title {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    margin-bottom: 0.5rem;
  }

  #home.hero-floorplan-experiment .hero-fp-title-col {
    padding-top: 0;
    padding-bottom: 0.1rem;
  }

  #home.hero-floorplan-experiment .hero-floorplan-layout {
    height: calc(100svh - 60px - 70px);
  }

  #home.hero-floorplan-experiment .hero-floorplan-visual {
    margin: 0;
  }

  #home.hero-floorplan-experiment .hero-floorplan-copy {
    margin-top: 0;
    padding-bottom: 0.5rem;
  }

  #home.hero-floorplan-experiment .hero-fp-subline {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  #home.hero-floorplan-experiment .hero-floorplan-wrapper {
    transform: scale(1.05);
  }
}
/* Honeypot – für Menschen unsichtbar, Bots füllen es aus */
.hp-field-wrapper {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================================
   CATALOG STICKY TOOLBAR
   ============================================================= */

.catalog-page {
  --catalog-main-header-height: 90px;
  --catalog-toolbar-height: 60px;
}

.catalog-page .catalog-sticky-toolbar {
  position: fixed;
  top: var(--catalog-main-header-height);
  left: 0;
  right: 0;
  min-height: var(--catalog-toolbar-height);
  z-index: 995;
  background: rgba(3, 25, 38, 0.94);
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.catalog-page .catalog-sticky-toolbar__inner {
  min-height: var(--catalog-toolbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.catalog-page .catalog-sticky-toolbar__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalog-page .catalog-sticky-toolbar__title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  color: #ffffff;
  font-size: 1.0rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.catalog-page .catalog-sticky-toolbar__subtitle {
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
}

.catalog-page .catalog-toolbar-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(5, 42, 61, 0.92);
  border: 1px solid rgba(var(--accent-color-rgb), 0.45);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.catalog-page .catalog-toolbar-cart:hover,
.catalog-page .catalog-toolbar-cart:focus {
  color: #ffffff;
  border-color: var(--accent-color);
  background: rgba(5, 42, 61, 1);
  text-decoration: none;
  outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
  outline-offset: 2px;
}

.catalog-page .catalog-toolbar-cart__icon {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.catalog-page .catalog-toolbar-cart__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent-color);
  color: #031926;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.catalog-page .catalog-toolbar-cart__badge[data-empty="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}

/* Floating-Cart-Button auf catalog.html ausblenden */
.catalog-page .floating-cart-button {
  display: none !important;
}

/* Bestehende Section-Toggles ausblenden – Toolbar ist die zentrale Steuerung */
.catalog-page .cat-section-header > .pricing-toggle {
  display: none !important;
}

/* In-page Pricing-Toggle im Warenkorb ausblenden – Toolbar übernimmt */
.catalog-page #cart-mode-bar > .pricing-toggle {
  display: none !important;
}

/* Mobile Navigation: Toolbar ausblenden wenn Menü offen */
.mobile-nav-active .catalog-sticky-toolbar {
  visibility: hidden;
}

/* Seiteninhalt nach unten schieben für zweiten fixierten Header */
.catalog-page .catalog.section {
  padding-top: calc(var(--catalog-main-header-height) + var(--catalog-toolbar-height) + 48px) !important;
}

@media (max-width: 767.98px) {
  .catalog-page {
    --catalog-main-header-height: 74px;
    --catalog-toolbar-height: 48px;
  }

  .catalog-page .catalog-sticky-toolbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(3, 25, 38, 0.98);
  }

  .catalog-page .catalog-sticky-toolbar__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--catalog-toolbar-height);
    padding-top: 0;
    padding-bottom: 0;
  }

  .catalog-page .catalog-sticky-toolbar__label {
    display: none;
  }

  .catalog-page .catalog-sticky-toolbar__pricing {
    flex: 1 1 auto;
    min-width: 0;
  }

  .catalog-page .catalog-sticky-toolbar__pricing .pricing-toggle {
    width: 100%;
    gap: 4px;
  }

  .catalog-page .catalog-sticky-toolbar__pricing .pricing-toggle-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    gap: 0.3rem;
  }

  .catalog-page .catalog-sticky-toolbar__pricing .pricing-toggle-icon {
    font-size: 0.85rem;
  }

  .catalog-page .catalog-toolbar-cart {
    flex-shrink: 0;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }

  .catalog-page .catalog-toolbar-cart__text {
    display: none;
  }

  .catalog-page .catalog-toolbar-cart__icon {
    font-size: 0.95rem;
  }

  .catalog-page .catalog-toolbar-cart__badge {
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: 0.68rem;
  }

  .catalog-page .catalog.section {
    padding-top: calc(var(--catalog-main-header-height) + var(--catalog-toolbar-height) + 32px) !important;
  }
}

/* =============================================================
   NAVIGATION: Featured Usecase Links
   ============================================================= */

.navmenu .dropdown ul .navmenu-usecase-separator {
  height: 1px;
  margin: 8px 14px;
  padding: 0;
  background: rgba(var(--accent-color-rgb), 0.55);
  pointer-events: none;
}

.navmenu .dropdown ul .navmenu-usecase-featured > a {
  color: var(--accent-color) !important;
  font-weight: 600;
}

.navmenu .dropdown ul .navmenu-usecase-featured > a:hover,
.navmenu .dropdown ul .navmenu-usecase-featured > a:focus {
  color: rgba(var(--accent-color-rgb), 0.82) !important;
}

@media (max-width: 1199px) {
  .navmenu .dropdown ul .navmenu-usecase-separator {
    margin: 10px 20px;
    background: rgba(var(--accent-color-rgb), 0.6);
  }

  .navmenu .dropdown ul .navmenu-usecase-featured > a {
    color: var(--accent-color) !important;
  }
}

/* =============================================================
   ORDER REQUEST FORM
   Bestellanfrage-Formular auf cart.html
   ============================================================= */

/* ── Section wrapper ──────────────────────────────────────── */
.order-request-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(var(--accent-color-rgb), 0.18);
}

.order-request-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 1.55rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-request-lead {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 680px;
}

/* ── Warenkorbzusammenfassung oberhalb des Formulars ─────── */
.order-summary-preview {
  background: rgba(0, 221, 204, 0.06);
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.order-summary-preview__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 0.75rem;
}

.order-summary-preview__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.22rem 0;
}

.order-summary-preview__row--total {
  font-weight: 700;
  font-size: 0.97rem;
  color: #ffffff;
  border-top: 1px solid rgba(var(--accent-color-rgb), 0.2);
  padding-top: 0.55rem;
  margin-top: 0.35rem;
}

.order-summary-preview__label {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Form card ───────────────────────────────────────────── */
.order-request-card {
  background: rgba(0, 221, 204, 0.07);
  border: 1px solid rgba(var(--accent-color-rgb), 0.25);
  border-radius: 16px;
  padding: 2.5rem;
}

/* ── Form section blocks ─────────────────────────────────── */
.order-form-section {
  margin-bottom: 2.5rem;
}

.order-form-section:last-child {
  margin-bottom: 0;
}

.order-form-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.18);
}

/* ── Form grid ───────────────────────────────────────────── */
.order-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.order-form-grid--full {
  grid-template-columns: 1fr;
}

/* ── Form field ──────────────────────────────────────────── */
.order-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

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

.order-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}

.order-form-required {
  color: var(--accent-color);
  margin-left: 2px;
}

.order-form-optional {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 6px;
}

/* ── Inputs / Selects / Textareas ────────────────────────── */
.order-form-input {
  background: rgba(3, 25, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.9rem;
  padding: 0.62rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  outline: none;
  line-height: 1.5;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.order-form-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.order-form-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.14);
  background: rgba(3, 25, 38, 0.95);
  color: #ffffff;
  outline: none;
}

.order-form-input.is-invalid {
  border-color: rgba(220, 53, 69, 0.72);
}

.order-form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.16);
}

select.order-form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

select.order-form-input option {
  background-color: #031926;
  color: #ffffff;
}

textarea.order-form-input {
  resize: vertical;
  min-height: 90px;
}

input[type="number"].order-form-input {
  -moz-appearance: textfield;
}

input[type="number"].order-form-input::-webkit-outer-spin-button,
input[type="number"].order-form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Checkbox fields ─────────────────────────────────────── */
.order-form-checks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.order-form-check-input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: rgba(3, 25, 38, 0.85);
  cursor: pointer;
  margin-top: 2px;
  accent-color: var(--accent-color);
  flex-shrink: 0;
}

.order-form-check-input:focus {
  outline: 2px solid rgba(var(--accent-color-rgb), 0.45);
  outline-offset: 1px;
}

.order-form-check-label {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  cursor: pointer;
}

.order-form-check-label a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-form-check-label a:hover {
  color: #ffffff;
}

/* ── Collapsible subsection ──────────────────────────────── */
.order-form-subsection {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: rgba(3, 25, 38, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.order-form-subsection-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1rem;
}

/* ── Actions ─────────────────────────────────────────────── */
.order-form-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.order-form-privacy-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.65;
  margin: 0;
  max-width: 600px;
}

.order-form-privacy-note a {
  color: rgba(var(--accent-color-rgb), 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Messages ────────────────────────────────────────────── */
.order-form-message {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.55;
  width: 100%;
}

.order-form-error {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.32);
  color: rgba(255, 130, 130, 0.95);
}

/* ── Loading state ───────────────────────────────────────── */
#order-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Erfolgsmeldung nach Absenden ───────────────────────── */
.order-request-success-block {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.order-request-success-icon {
  font-size: 3rem;
  color: var(--accent-color);
  display: block;
  margin-bottom: 1.25rem;
}

.order-request-success-block h4 {
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.order-request-success-block p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 0.75rem;
}

.order-request-success-note {
  font-style: italic;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .order-request-card {
    padding: 1.5rem 1.1rem;
  }

  .order-form-grid {
    grid-template-columns: 1fr;
  }

  .order-form-field--full {
    grid-column: 1;
  }

  .order-request-title {
    font-size: 1.25rem;
  }

  .order-request-lead {
    font-size: 0.88rem;
  }

  .order-summary-preview {
    padding: 1rem 1.1rem;
  }

  .order-form-subsection {
    padding: 1rem;
  }

  .order-form-actions {
    align-items: stretch;
  }

  .order-form-actions .btn-ss-book {
    justify-content: center;
  }

  .order-request-success-block {
    padding: 2rem 0.5rem;
  }
}

/* ============================================================= */
/*    CATALOG SECTION HEADER TABS                                */
/* ============================================================= */

.catalog-page .catalog-section-tab-header {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin: 40px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.catalog-page .cat-section-header--tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 0 14px;
  margin-bottom: -1px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease;
}

.catalog-page .cat-section-header--tab:focus {
  outline: none;
}

.catalog-page .cat-section-header--tab .cat-section-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  transition: color 0.2s ease;
}

.catalog-page .cat-section-header--tab:hover .cat-section-title,
.catalog-page .cat-section-header--tab:focus .cat-section-title {
  color: rgba(255, 255, 255, 0.72);
}

.catalog-page .cat-section-header--tab.active,
.catalog-page .cat-section-header--tab[aria-selected="true"] {
  border-bottom-color: var(--accent-color);
}

.catalog-page .cat-section-header--tab.active .cat-section-title,
.catalog-page .cat-section-header--tab[aria-selected="true"] .cat-section-title {
  color: #ffffff;
}

.catalog-page .catalog-main-pane[hidden] {
  display: none !important;
}

/* Alle-Produkte: alle ss-pane gleichzeitig sichtbar */
.catalog-page .catalog-main-pane.catalog-products-show-all .ss-pane {
  display: block;
}

/* Kategorie-Überschriften */
.catalog-page .cat-pane-title {
  display: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.catalog-page .catalog-main-pane.catalog-products-show-all .cat-pane-title {
  display: block;
}

/* Ersten Pane-Titel in Alle-Produkte ohne Extra-Top-Margin */
.catalog-page .catalog-main-pane.catalog-products-show-all .ss-pane:first-of-type .cat-pane-title {
  margin-top: 0;
}

/* Kategorie-Tabs auf Mobile scrollbar */
@media (max-width: 767.98px) {
  .catalog-page .cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 8px;
  }

  .catalog-page .cat-tabs .ss-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ── Höhengleichheit der Karten in allen Katalog-Swipers ─────
   Betrifft Startersets-Pane UND alle Produkt-Panes (ss-pane).
   Gleiches Problem wie bei #starter-sets .cta-cards-row:
   swiper-bundle.min.css setzt .swiper-slide { width:100%; height:100% }
   und überschreibt damit col-xl-4 / col-md-6 (Breite) und verhindert
   gleichmäßige Kartenhöhen (Höhe).
   Ab 768px ist der Swiper destroyed → Bootstrap-Grid-Verhalten
   mit höherer Spezifität wiederherstellen.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .catalog-page .catalog-main-pane .challenge-swiper .swiper-wrapper {
    flex-wrap: wrap;
    height: auto;
    align-items: stretch;
  }

  .catalog-page .catalog-main-pane .challenge-swiper .swiper-slide {
    display: flex;
    height: auto;
    flex-shrink: 1;
    align-self: stretch;
    width: 50%;    /* col-md-6 = 50 % */
  }

  .catalog-page .catalog-main-pane .challenge-swiper .swiper-slide .cat-card {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 1200px) {
  .catalog-page .catalog-main-pane .challenge-swiper .swiper-slide {
    width: 33.33333333%;    /* col-xl-4 = 33.33 % */
  }
}

/* Haupt-Tabs auf Mobile */
@media (max-width: 575.98px) {
  .catalog-page .catalog-section-tab-header {
    gap: 24px;
    margin: 28px 0 28px;
  }

  .catalog-page .cat-section-header--tab .cat-section-title {
    font-size: 1.15rem;
    letter-spacing: 0.05em;
  }
}

/* ============================================================= */
/*    USE CASES CTA CARD                                         */
/* ============================================================= */

#use-cases .use-cases-cta-container,
#solution  .use-cases-cta-container {
  margin-top: 48px;
}

/* Align CTA row width with the swiper-wrapper (which uses width:100%).
   Without this, width:auto + negative margins would make the row 24 px wider. */
#use-cases .use-cases-cta-container .row,
#solution  .use-cases-cta-container .row {
  width: 100%;
}

#use-cases .use-cases-cta-card,
#solution  .use-cases-cta-card {
  width: 100%;
  height: auto;
}

#use-cases .use-cases-cta-content,
#solution  .use-cases-cta-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

#use-cases .use-cases-cta-copy,
#solution  .use-cases-cta-copy {
  min-width: 0;
}

#use-cases .use-cases-cta-card .cta-card__title,
#solution  .use-cases-cta-card .cta-card__title {
  margin-bottom: 12px;
}

#use-cases .use-cases-cta-card .cta-card__text,
#solution  .use-cases-cta-card .cta-card__text {
  margin-bottom: 0;
  max-width: 720px;
}

#use-cases .use-cases-cta-actions,
#solution  .use-cases-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

#use-cases .use-cases-cta-actions .btn-ss-book,
#solution  .use-cases-cta-actions .btn-ss-book {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  #use-cases .use-cases-cta-content,
  #solution  .use-cases-cta-content {
    grid-template-columns: 1fr;
    text-align: left;
  }

  #use-cases .use-cases-cta-actions,
  #solution  .use-cases-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  #use-cases .use-cases-cta-container,
  #solution  .use-cases-cta-container {
    margin-top: 34px;
  }

  #use-cases .use-cases-cta-card,
  #solution  .use-cases-cta-card {
    padding: 28px 22px;
  }

  #use-cases .use-cases-cta-actions,
  #solution  .use-cases-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #use-cases .use-cases-cta-actions .btn-ss-book,
  #solution  .use-cases-cta-actions .btn-ss-book {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* =============================================================
   INTEGRATIONS PAGE
   ============================================================= */

/* btn-ss-book: Integrationsseite analog zu about-page */
.integrations-page a.btn-ss-book,
.integrations-page button.btn-ss-book {
  background: var(--accent-color) !important;
  background-image: none !important;
  color: #1c2d38 !important;
  box-shadow: none;
  transition: background-color 0.18s ease, transform 0.2s ease, color 0.18s ease;
}

.integrations-page a.btn-ss-book:hover,
.integrations-page a.btn-ss-book:focus,
.integrations-page button.btn-ss-book:hover,
.integrations-page button.btn-ss-book:focus {
  filter: none !important;
  transform: translateY(-2px);
  background: rgba(var(--accent-color-rgb), 0.88) !important;
  background-image: none !important;
  color: #1c2d38 !important;
}

.integrations-page .btn-ss-book .bi {
  color: currentColor;
}

.integrations-page a.btn-ss-book--outline,
.integrations-page button.btn-ss-book--outline {
  background: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 2px var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.integrations-page a.btn-ss-book--outline:hover,
.integrations-page button.btn-ss-book--outline:hover {
  background: rgba(var(--accent-color-rgb), 0.12) !important;
  color: var(--accent-color) !important;
}

/* btn-ss-book: Standortseiten analog zu about-page / integrations-page */
.standorte-page a.btn-ss-book,
.standorte-page button.btn-ss-book {
  background: var(--accent-color) !important;
  background-image: none !important;
  color: #1c2d38 !important;
  box-shadow: none;
  transition: background-color 0.18s ease, transform 0.2s ease, color 0.18s ease;
}

.standorte-page a.btn-ss-book:hover,
.standorte-page a.btn-ss-book:focus,
.standorte-page button.btn-ss-book:hover,
.standorte-page button.btn-ss-book:focus {
  filter: none !important;
  transform: translateY(-2px);
  background: rgba(var(--accent-color-rgb), 0.88) !important;
  background-image: none !important;
  color: #1c2d38 !important;
}

.standorte-page .btn-ss-book .bi {
  color: currentColor;
}

.standorte-page a.btn-ss-book--outline,
.standorte-page button.btn-ss-book--outline {
  background: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 2px var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.standorte-page a.btn-ss-book--outline:hover,
.standorte-page button.btn-ss-book--outline:hover {
  background: rgba(var(--accent-color-rgb), 0.12) !important;
  color: var(--accent-color) !important;
}

/* ---- Hero ---- */
.integrations-page .integration-hero {
  min-height: auto;
  padding-top: 150px !important;
  padding-bottom: 90px !important;
  position: relative;
}

.integrations-page .integration-hero .row > [class*="col"] {
  display: flex;
  flex-direction: column;
}

.integrations-page .integration-hero-card {
  flex: 1;
  background: rgba(5, 42, 61, 0.55);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 52px);
  box-shadow: var(--shadow-1);
}

.integrations-page .integration-map--hexhub {
  flex: 1;
}

.integrations-page .integration-eyebrow {
  color: var(--accent-color);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.integrations-page .integration-hero-title {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 22px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.integrations-page .integration-hero-title span {
  color: var(--accent-color);
}

.integrations-page .integration-hero-lead {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 28px;
}

.integrations-page .integration-hero-claim {
  color: rgba(255, 255, 255, 0.88);
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.integrations-page .integration-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---- Integration Map: Hexagon Hub ---- */
.integrations-page .integration-map {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.integrations-page .integration-map--hexhub {
  position: relative;
  overflow: hidden;
  min-height: 580px;
  padding: clamp(22px, 3vw, 34px);
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-color-rgb), 0.16) 0%, rgba(var(--accent-color-rgb), 0.04) 34%, transparent 64%),
    linear-gradient(145deg, rgba(5, 42, 61, 0.82), rgba(3, 25, 38, 0.72));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.integrations-page .integration-map--hexhub::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 22px;
  background-image:
    linear-gradient(rgba(var(--accent-color-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-color-rgb), 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}

.integrations-page .integration-map--hexhub::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.22), transparent 68%);
  filter: blur(12px);
  opacity: 0.75;
  pointer-events: none;
}

/* ---- Map Header ---- */
.integrations-page .integration-map-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.integrations-page .integration-map-kicker {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  color: var(--accent-color);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.integrations-page .integration-map-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.integrations-page .integration-map-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.75);
  flex-shrink: 0;
}

/* ---- Hexhub Canvas ---- */
.integrations-page .integration-hexhub {
  position: relative;
  z-index: 2;
  height: 480px;
  margin-top: 6px;
}

/* ---- Connection Lines ---- */
.integrations-page .integration-hex-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 152px;
  transform-origin: top center;
  background: linear-gradient(
    to bottom,
    rgba(var(--accent-color-rgb), 0.0),
    rgba(var(--accent-color-rgb), 0.45),
    rgba(var(--accent-color-rgb), 0.0)
  );
  opacity: 0.7;
  filter: drop-shadow(0 0 6px rgba(var(--accent-color-rgb), 0.22));
}

.integrations-page .integration-hex-line--rest {
  transform: translate(-50%, -50%) rotate(180deg);
  height: 165px;
}
.integrations-page .integration-hex-line--webhooks {
  transform: translate(-50%, -50%) rotate(228deg);
  height: 185px;
}
.integrations-page .integration-hex-line--mqtt {
  transform: translate(-50%, -50%) rotate(132deg);
  height: 185px;
}
.integrations-page .integration-hex-line--erp {
  transform: translate(-50%, -50%) rotate(270deg);
  height: 160px;
}
.integrations-page .integration-hex-line--tickets {
  transform: translate(-50%, -50%) rotate(90deg);
  height: 160px;
}
.integrations-page .integration-hex-line--home {
  transform: translate(-50%, -50%) rotate(312deg);
  height: 185px;
}
.integrations-page .integration-hex-line--reporting {
  transform: translate(-50%, -50%) rotate(48deg);
  height: 185px;
}
.integrations-page .integration-hex-line--apps {
  transform: translate(-50%, -50%) rotate(0deg);
  height: 165px;
}

/* ---- Hex Nodes (base) ---- */
.integrations-page .integration-hex-node {
  position: absolute;
  width: 118px;
  min-height: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 16px 12px;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(5, 42, 61, 0.96), rgba(3, 25, 38, 0.92));
  border: 1px solid rgba(var(--accent-color-rgb), 0.32);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(var(--accent-color-rgb), 0.08);
  isolation: isolate;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.integrations-page .integration-hex-node::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.12), transparent 46%);
  clip-path: inherit;
  z-index: -1;
  opacity: 0.9;
}

/* ---- Node Positions (center-anchored via translate -50%,-50%) ---- */
.integrations-page .integration-hex-node--rest {
  left: 50%;
  top: 8%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--webhooks {
  left: 18%;
  top: 21%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--mqtt {
  left: 82%;
  top: 21%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--erp {
  left: 15%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--tickets {
  left: 85%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--home {
  left: 18%;
  top: 79%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--reporting {
  left: 82%;
  top: 79%;
  transform: translate(-50%, -50%);
}
.integrations-page .integration-hex-node--apps {
  left: 50%;
  top: 92%;
  transform: translate(-50%, -50%);
}

/* ---- Core Node ---- */
.integrations-page .integration-hex-node--core {
  width: 168px;
  min-height: 148px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-color-rgb), 0.22), transparent 58%),
    linear-gradient(145deg, rgba(5, 42, 61, 0.98), rgba(3, 25, 38, 0.98));
  border-color: rgba(var(--accent-color-rgb), 0.62);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28),
    0 0 42px rgba(var(--accent-color-rgb), 0.25);
  animation: integrationCorePulse 4.5s ease-in-out infinite;
}

/* ---- Logo ---- */
.integrations-page .integration-map-logo {
  display: block;
  width: min(128px, 76%);
  height: auto;
  margin: 0 auto 2px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(var(--accent-color-rgb), 0.18));
}

.integrations-page .integration-hex-node--core small {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* ---- Node Icon + Label ---- */
.integrations-page .integration-hex-node i {
  color: var(--accent-color);
  font-size: 1.3rem;
  line-height: 1;
}

.integrations-page .integration-hex-node span {
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* ---- Map Footer ---- */
.integrations-page .integration-map-footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.integrations-page .integration-map-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.20);
  border-radius: 999px;
  background: rgba(3, 25, 38, 0.42);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Core Pulse Animation ---- */
@keyframes integrationCorePulse {
  0%, 100% {
    box-shadow:
      0 20px 42px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(var(--accent-color-rgb), 0.28),
      0 0 32px rgba(var(--accent-color-rgb), 0.18);
  }
  50% {
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(var(--accent-color-rgb), 0.38),
      0 0 52px rgba(var(--accent-color-rgb), 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .integrations-page .integration-hex-node--core {
    animation: none !important;
  }
}

/* ---- Hover Effects ---- */
@media (hover: hover) {
  .integrations-page .integration-hex-node:not(.integration-hex-node--core):hover {
    border-color: rgba(var(--accent-color-rgb), 0.72);
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.40),
      0 0 24px rgba(var(--accent-color-rgb), 0.20);
    transform: translate(-50%, calc(-50% - 2px));
  }
}

/* ---- Inline Claim ---- */
.integrations-page .inline-claim {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  text-align: center;
  padding: 8px 0;
  margin-bottom: 0;
}

.integrations-page .inline-claim span {
  color: var(--accent-color);
}

/* ---- Benefit Cards (Section 2) ---- */
.integrations-page .integration-benefit-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 28px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.integrations-page .integration-benefit-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.40);
}

.integrations-page .integration-benefit-card .benefit-icon {
  font-size: 1.8rem;
  color: var(--accent-color);
  margin-bottom: 14px;
  display: block;
}

.integrations-page .integration-benefit-card h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.integrations-page .integration-benefit-card p {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.91rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ---- Data Category Cards (Section 4) ---- */
.integrations-page .integration-data-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  box-shadow: var(--shadow-1);
}

.integrations-page .integration-data-card h3 {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.18);
}

.integrations-page .integration-data-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.integrations-page .integration-data-card ul li {
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.90rem;
  line-height: 1.6;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.integrations-page .integration-data-card ul li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-color);
  flex-shrink: 0;
  opacity: 0.7;
}

/* ---- System Groups & Chips (Section 5) ---- */
.integrations-page .integration-system-group {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 28px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease;
}

.integrations-page .integration-system-group:hover {
  border-color: rgba(var(--accent-color-rgb), 0.35);
}

.integrations-page .integration-system-group h3 {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.15);
}

.integrations-page .integration-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integrations-page .integration-chip-list span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  border-radius: 999px;
  padding: 6px 13px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(3, 25, 38, 0.45);
  font-size: 0.84rem;
  line-height: 1.2;
}

.integrations-page .integration-systems-disclaimer {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.88rem;
}

/* ---- Technical Path Cards (Section 6) ---- */
.integrations-page .integration-tech-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease;
}

.integrations-page .integration-tech-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.40);
}

.integrations-page .integration-tech-card .tech-card-label {
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.integrations-page .integration-tech-card p {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.91rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ---- Process Cards (Section 7) ---- */
.integrations-page .integration-process-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 28px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease;
}

.integrations-page .integration-process-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.35);
}

.integrations-page .integration-process-card h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 14px;
}

.integrations-page .integration-process-card p {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.91rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ---- Audience Cards (Section 8) ---- */
.integrations-page .integration-audience-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease;
}

.integrations-page .integration-audience-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.40);
}

.integrations-page .integration-audience-card .audience-icon {
  font-size: 1.8rem;
  color: var(--accent-color);
  margin-bottom: 14px;
  display: block;
}

.integrations-page .integration-audience-card h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.integrations-page .integration-audience-card p {
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.91rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ---- CTA (Section 9) ---- */
.integrations-page .integration-cta-card {
  width: 100%;
  max-width: 100%;
}

.integrations-page .integration-cta-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.integrations-page .integration-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.integrations-page .integration-cta-card .cta-card__title {
  margin-bottom: 12px;
}

.integrations-page .integration-cta-card .cta-card__text {
  margin-bottom: 0;
  max-width: 720px;
}

/* ---- Hexhub: Tablet + Mobile Grid (≤ 991px) ---- */
@media (max-width: 991.98px) {
  .integrations-page .integration-map--hexhub {
    min-height: auto;
    padding: 24px 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .integrations-page .integration-map-header {
    margin-bottom: 20px;
  }

  .integrations-page .integration-hexhub {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .integrations-page .integration-hex-line {
    display: none;
  }

  .integrations-page .integration-hex-node,
  .integrations-page .integration-hex-node--core,
  .integrations-page .integration-hex-node--rest,
  .integrations-page .integration-hex-node--webhooks,
  .integrations-page .integration-hex-node--mqtt,
  .integrations-page .integration-hex-node--erp,
  .integrations-page .integration-hex-node--tickets,
  .integrations-page .integration-hex-node--home,
  .integrations-page .integration-hex-node--reporting,
  .integrations-page .integration-hex-node--apps {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    min-height: 92px;
  }

  .integrations-page .integration-hex-node--core {
    grid-column: 1 / -1;
    min-height: 132px;
    animation: integrationCorePulse 4.5s ease-in-out infinite;
  }
}

/* ---- Mobile (≤ 767px) ---- */
@media (max-width: 767.98px) {
  .integrations-page .integration-hero {
    padding-top: 110px;
    padding-bottom: 60px;
  }

  .integrations-page .integration-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .integrations-page .integration-hero .row > [class*="col"] {
    display: block;
  }

  .integrations-page .integration-hero-card {
    flex: none;
    padding: 24px 18px;
    border-radius: 16px;
  }

  .integrations-page .integration-map--hexhub {
    flex: none;
  }

  .integrations-page .integration-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .integrations-page .integration-hero-actions .btn-ss-book {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .integrations-page .integration-cta-content {
    grid-template-columns: 1fr;
  }

  .integrations-page .integration-cta-actions {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
  }

  .integrations-page .integration-cta-actions .btn-ss-book {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .integrations-page .integration-cta-card {
    padding: 28px 20px;
  }

  .integrations-page .integration-map-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .integrations-page .integration-hexhub {
    grid-template-columns: 1fr;
  }

  .integrations-page .integration-hex-node {
    min-height: 82px;
    clip-path: none;
    border-radius: 18px;
  }

  .integrations-page .integration-hex-node--core {
    min-height: 126px;
    clip-path: polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
    border-radius: 0;
  }

  .integrations-page .integration-map-logo {
    width: min(150px, 72%);
    margin-bottom: 8px;
  }
}


/* =============================================================
   TRUST: EU CLOUD INFRASTRUCTURE
   ============================================================= */

/* Trust Card in System Section (#the-hive) */
.idoone-trust-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: rgba(3, 25, 38, 0.55);
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 16px;
  padding: 28px 26px;
  margin-top: 28px;
}

.idoone-trust-card__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(var(--accent-color-rgb), 0.10);
  border: 1px solid rgba(var(--accent-color-rgb), 0.20);
}

.idoone-trust-card__icon i {
  color: var(--accent-color);
  font-size: 1.5rem;
}

.idoone-trust-card__content {
  flex: 1;
}

.idoone-trust-card__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.idoone-trust-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.idoone-trust-card p {
  font-size: 0.91rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .idoone-trust-card {
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
  }

  .idoone-trust-card__icon {
    width: 44px;
    height: 44px;
  }

  .idoone-trust-card h3 {
    font-size: 1rem;
  }
}

/* Footer Trust Note */
.footer .footer-trust-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.footer .footer-trust-note i {
  color: var(--accent-color);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .footer .footer-trust-note {
    align-items: flex-start;
    font-size: 0.82rem;
    text-align: left;
  }
}

/* Order Request Trust Note */
.cart-page .order-request-trust-note,
.catalog-page .order-request-trust-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 26px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  border-radius: 14px;
  background: rgba(3, 25, 38, 0.42);
  color: rgba(255, 255, 255, 0.78);
}

.cart-page .order-request-trust-note i,
.catalog-page .order-request-trust-note i {
  color: var(--accent-color);
  font-size: 1.2rem;
  flex: 0 0 auto;
  margin-top: 2px;
}

.cart-page .order-request-trust-note p,
.catalog-page .order-request-trust-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.cart-page .order-request-trust-note a,
.catalog-page .order-request-trust-note a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
  .cart-page .order-request-trust-note,
  .catalog-page .order-request-trust-note {
    padding: 14px 15px;
  }

  .cart-page .order-request-trust-note p,
  .catalog-page .order-request-trust-note p {
    font-size: 0.84rem;
  }
}

/* =============================================================
   SMART CITY PAGE
   ============================================================= */

.smart-city-page {
  overflow-x: hidden;
}

.smart-city-page #smart-city-hero {
  padding-top: 178px;
  padding-bottom: 72px;
}

/* ── Präsentationsmodus: jede Sektion füllt einen Viewport ── */
.smart-city-page section.section {
  min-height: 100dvh;
}

.smart-city-page section.section:not(#smart-city-hero) {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

@media (max-width: 767.98px) {
  .smart-city-page section.section {
    min-height: unset;
  }
  .smart-city-page section.section:not(#smart-city-hero) {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

.smart-city-page .smart-city-hero .row > [class*="col"] {
  display: flex;
}

.smart-city-page .smart-city-hero-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.24);
  background: linear-gradient(165deg, rgba(5, 42, 61, 0.9) 0%, rgba(3, 25, 38, 0.84) 100%);
  box-shadow: 0 32px 74px rgba(2, 16, 25, 0.45);
}

.smart-city-page .smart-city-eyebrow {
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(var(--accent-color-rgb), 0.88);
}

.smart-city-page .smart-city-hero-title {
  margin: 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.07;
}

.smart-city-page .smart-city-hero-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.03rem;
  line-height: 1.7;
}

.smart-city-page .smart-city-hero-claim {
  margin: 0;
  font-weight: 600;
  color: rgba(var(--accent-color-rgb), 0.94);
}

.smart-city-page .smart-city-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* More breathing room between section headlines and their content blocks */
.smart-city-page .section-title {
  margin-bottom: 20px;
}

.smart-city-page .section-title + .container {
  margin-top: 10px;
}

.smart-city-page a.btn-ss-book,
.smart-city-page button.btn-ss-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.74rem 1.24rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.54);
  background: rgba(var(--accent-color-rgb), 0.16);
  color: #ffffff;
  font-weight: 600;
  line-height: 1.2;
  transition: all 0.24s ease;
  text-decoration: none;
}

.smart-city-page a.btn-ss-book:hover,
.smart-city-page a.btn-ss-book:focus,
.smart-city-page button.btn-ss-book:hover,
.smart-city-page button.btn-ss-book:focus {
  background: rgba(var(--accent-color-rgb), 0.26);
  border-color: rgba(var(--accent-color-rgb), 0.84);
  transform: translateY(-1px);
}

.smart-city-page a.btn-ss-book--outline,
.smart-city-page button.btn-ss-book--outline {
  background: rgba(3, 25, 38, 0.16);
  border-color: rgba(var(--accent-color-rgb), 0.38);
  color: rgba(255, 255, 255, 0.92);
}

.smart-city-page a.btn-ss-book--outline:hover,
.smart-city-page button.btn-ss-book--outline:hover {
  background: rgba(var(--accent-color-rgb), 0.14);
  border-color: rgba(var(--accent-color-rgb), 0.68);
}

.smart-city-page .smart-city-map {
  position: relative;
  width: 100%;
  min-height: 460px;
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  background: radial-gradient(circle at 12% 12%, rgba(var(--accent-color-rgb), 0.15), rgba(3, 25, 38, 0.92) 40%),
              linear-gradient(150deg, rgba(5, 42, 61, 0.95) 0%, rgba(3, 25, 38, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(1, 11, 18, 0.56);
  overflow: hidden;
}

.smart-city-page .smart-city-map-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 10px;
}

.smart-city-page .smart-city-map-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--accent-color-rgb), 0.9);
  font-weight: 700;
}

.smart-city-page .smart-city-map-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.42);
  background: rgba(var(--accent-color-rgb), 0.12);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
}

.smart-city-page .smart-city-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-color-rgb), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-color-rgb), 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 52% 54%, #000 62%, transparent 100%);
  opacity: 0.35;
}

.smart-city-page .smart-city-map-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  background: rgba(2, 17, 27, 0.84);
  backdrop-filter: blur(4px);
}

.smart-city-page .smart-city-map-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.32);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.smart-city-page .smart-city-map-node__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.smart-city-page .smart-city-map-node__meta strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.smart-city-page .smart-city-map-node__meta small {
  font-size: 0.72rem;
  color: rgba(var(--accent-color-rgb), 0.92);
}

.smart-city-page .smart-city-map-node--school   { top:  72px; left:  16px; }
.smart-city-page .smart-city-map-node--townhall  { top:  72px; right: 16px; }
.smart-city-page .smart-city-map-node--water     { top: 192px; left:  16px; }
.smart-city-page .smart-city-map-node--park      { top: 192px; right: 16px; }
.smart-city-page .smart-city-map-node--waste     { top: 316px; left:  16px; }
.smart-city-page .smart-city-map-node--parking   { top: 316px; right: 16px; }
.smart-city-page .smart-city-map-node--pump      { bottom: 20px; left: 50%; transform: translateX(-50%); }

.smart-city-page .smart-city-map-link {
  position: absolute;
  z-index: 1;
  border-top: 1px dashed rgba(var(--accent-color-rgb), 0.28);
  pointer-events: none;
  opacity: 0.72;
}

/* Schule ↔ Rathaus: horizontale Verbindung Zeile 1 (node center y = 72+26=98px) */
.smart-city-page .smart-city-map-link--school {
  left: 166px;
  top: 98px;
  width: calc(100% - 332px);
}

/* Pegel ↔ Stadtgrün: horizontale Verbindung Zeile 2 – durch Hub-Mitte (node center y = 192+26=218px) */
.smart-city-page .smart-city-map-link--water {
  left: 166px;
  top: 218px;
  width: calc(100% - 332px);
}

/* Abfall ↔ Parkraum: horizontale Verbindung Zeile 3 (node center y = 316+26=342px) */
.smart-city-page .smart-city-map-link--waste {
  left: 166px;
  top: 342px;
  width: calc(100% - 332px);
}

/* Pumpwerk: vertikale Verbindung vom Hub nach unten zum Pumpwerk-Node */
.smart-city-page .smart-city-map-link--pump {
  left: calc(50% - 1px);
  top: 244px;   /* Hub-Unterkante: 218px center + 26px Hälfte Hub-Höhe */
  bottom: 72px; /* Pumpwerk-Oberkante: 20px bottom + 52px Höhe */
  width: 0;
  border-top: none;
  border-left: 1px dashed rgba(var(--accent-color-rgb), 0.28);
}

/* Monitoring Hub – zentrales Verbindungselement */
.smart-city-page .smart-city-map-hub {
  position: absolute;
  left: 50%;
  top: 218px;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  border-radius: 16px;
  background: rgba(3, 25, 38, 0.90);
  color: #ffffff;
  white-space: nowrap;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(var(--accent-color-rgb), 0.08);
}

.smart-city-page .smart-city-map-hub__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.smart-city-page .smart-city-map-hub__meta {
  display: grid;
  gap: 2px;
}

.smart-city-page .smart-city-map-hub__meta strong {
  color: #ffffff;
  font-size: 0.80rem;
  font-weight: 700;
  line-height: 1.2;
}

.smart-city-page .smart-city-map-hub__meta small {
  color: var(--accent-color);
  font-size: 0.68rem;
  line-height: 1.2;
}

.smart-city-page .smart-city-surface-card,
.smart-city-page .smart-city-benefit-card {
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.20);
  box-shadow: var(--shadow-1);
  padding: 22px 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.smart-city-page .smart-city-surface-card:hover,
.smart-city-page .smart-city-benefit-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

.smart-city-page .smart-city-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.20);
  box-shadow: var(--shadow-1);
  padding: 28px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.smart-city-page .smart-city-step-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

.smart-city-page .smart-city-step-card h3,
.smart-city-page .smart-city-surface-card h3,
.smart-city-page .smart-city-benefit-card h3 {
  margin-bottom: 0;
  font-size: 1.08rem;
}

.smart-city-page .smart-city-step-card h3 {
  color: rgba(255, 255, 255, 0.90);
}

.smart-city-page .smart-city-step-card p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.smart-city-page .smart-city-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.24rem;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  background: rgba(var(--accent-color-rgb), 0.1);
}

.smart-city-page .smart-city-step-card .smart-city-step-icon,
.smart-city-page .smart-city-pilot-step-card .smart-city-step-icon {
  position: absolute;
  top: 28px;
  right: 24px;
}

.smart-city-page .smart-city-surface-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 1.24rem;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  background: rgba(var(--accent-color-rgb), 0.1);
}

.smart-city-page .smart-city-inline-claim {
  margin: 24px 0 0;
  text-align: center;
  font-size: 1.02rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.86);
}

.smart-city-page .smart-city-cluster-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.20);
  box-shadow: var(--shadow-1);
  padding: 24px 22px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.smart-city-page .smart-city-cluster-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

.smart-city-page .smart-city-cluster-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 1.3rem;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  background: rgba(var(--accent-color-rgb), 0.1);
}

.smart-city-page .smart-city-cluster-card h3 {
  margin: 0;
  font-size: 1.14rem;
}

.smart-city-page .smart-city-cluster-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.smart-city-page .smart-city-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-city-page .smart-city-tag-list span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.smart-city-page .smart-city-usecases-detail {
  margin-top: 34px;
}

.smart-city-page .smart-city-usecases-detail h3 {
  margin-bottom: 16px;
  font-size: clamp(1.15rem, 2.2vw, 1.44rem);
}

.smart-city-page .smart-city-detail-card {
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.20);
  box-shadow: var(--shadow-1);
  padding: 16px 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.smart-city-page .smart-city-detail-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

.smart-city-page .smart-city-detail-card i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.smart-city-page .smart-city-detail-card h4 {
  margin: 10px 0 6px;
  font-size: 0.99rem;
  line-height: 1.35;
}

.smart-city-page .smart-city-detail-card p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}

.smart-city-page .smart-city-integrations-claim {
  margin: 0 0 18px;
  font-size: 1.06rem;
  font-weight: 600;
  color: rgba(var(--accent-color-rgb), 0.92);
}

.smart-city-page .smart-city-integrations-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.smart-city-page .smart-city-integrations-chips span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.smart-city-page .smart-city-integrations-note {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}

.smart-city-page .smart-city-integrations-cta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smart-city-page .smart-city-integrations-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.smart-city-page .smart-city-pilot-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.20);
  box-shadow: var(--shadow-1);
  padding: 28px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.smart-city-page .smart-city-pilot-step-card:hover {
  border-color: rgba(var(--accent-color-rgb), 0.50);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(var(--accent-color-rgb), 0.28);
}

.smart-city-page .smart-city-pilot-step-card h3 {
  margin: 0;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.90);
}

.smart-city-page .smart-city-pilot-step-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.smart-city-page .smart-city-benefit-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 1.22rem;
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.34);
  background: rgba(var(--accent-color-rgb), 0.1);
}

.smart-city-page .smart-city-benefit-badges {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-city-page .smart-city-benefit-badges span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-color-rgb), 0.28);
  background: rgba(var(--accent-color-rgb), 0.1);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.smart-city-page .smart-city-pilot-card,
.smart-city-page .smart-city-cta-card,
.smart-city-page .smart-city-final-cta-card {
  border: 1px solid rgba(var(--accent-color-rgb), 0.22);
  background: linear-gradient(158deg, rgba(5, 42, 61, 0.84) 0%, rgba(3, 25, 38, 0.92) 100%);
}

.smart-city-page .smart-city-pilot-cta-content,
.smart-city-page .smart-city-cta-content,
.smart-city-page .smart-city-final-cta-content {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.smart-city-page .smart-city-pilot-cta-actions,
.smart-city-page .smart-city-cta-actions,
.smart-city-page .smart-city-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.smart-city-page .smart-city-final-cta-note {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.74);
}

.smart-city-page .cta-card__title,
.smart-city-page .cta-card__text {
  overflow-wrap: anywhere;
}

.smart-city-page .footer .footer-links a {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .smart-city-page #smart-city-hero {
    padding-top: 160px;
  }

  .smart-city-page .smart-city-map {
    min-height: 500px;
  }

  .smart-city-page .smart-city-pilot-cta-content,
  .smart-city-page .smart-city-cta-content,
  .smart-city-page .smart-city-final-cta-content {
    grid-template-columns: 1fr;
  }

  .smart-city-page .smart-city-pilot-cta-actions,
  .smart-city-page .smart-city-cta-actions,
  .smart-city-page .smart-city-final-cta-actions {
    justify-content: flex-start;
  }

  .smart-city-page .smart-city-integrations-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .smart-city-page .smart-city-usecases-detail {
    margin-top: 28px;
  }
}

@media (max-width: 767.98px) {
  .smart-city-page #smart-city-hero {
    padding-top: 146px;
    padding-bottom: 52px;
  }

  .smart-city-page .section-title {
    margin-bottom: 14px;
  }

  .smart-city-page .section-title + .container {
    margin-top: 4px;
  }

  .smart-city-page .smart-city-pilot-cta-actions,
  .smart-city-page .smart-city-hero-actions,
  .smart-city-page .smart-city-cta-actions,
  .smart-city-page .smart-city-final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .smart-city-page .smart-city-pilot-cta-actions .btn-ss-book,
  .smart-city-page .smart-city-hero-actions .btn-ss-book,
  .smart-city-page .smart-city-cta-actions .btn-ss-book,
  .smart-city-page .smart-city-final-cta-actions .btn-ss-book {
    width: 100%;
    text-align: center;
  }

  .smart-city-page .smart-city-integrations-cta .btn-ss-book {
    width: 100%;
    text-align: center;
  }

  .smart-city-page .smart-city-map {
    min-height: 560px;
  }

  .smart-city-page .smart-city-cluster-card {
    padding: 20px 18px;
  }

  .smart-city-page .smart-city-map-node {
    min-width: 0;
    width: calc(50% - 18px);
  }

  .smart-city-page .smart-city-map-node--school { top: 92px; left: 12px; }
  .smart-city-page .smart-city-map-node--townhall { top: 92px; right: 12px; }
  .smart-city-page .smart-city-map-node--water { top: 202px; left: 12px; }
  .smart-city-page .smart-city-map-node--park { top: 202px; right: 12px; left: auto; transform: none; }
  .smart-city-page .smart-city-map-node--waste { top: 312px; left: 12px; }
  .smart-city-page .smart-city-map-node--parking { top: 312px; right: 12px; }
  .smart-city-page .smart-city-map-node--pump { top: 422px; right: 12px; bottom: auto; left: auto; transform: none; }

  .smart-city-page .smart-city-map-link {
    display: none;
  }

  .smart-city-page .smart-city-map-hub {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .smart-city-page .smart-city-hero-card,
  .smart-city-page .smart-city-cta-card,
  .smart-city-page .smart-city-pilot-card,
  .smart-city-page .smart-city-final-cta-card {
    padding: 24px 18px;
  }

  .smart-city-page .smart-city-map {
    min-height: 560px;
  }

  .smart-city-page .smart-city-map-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .smart-city-page .smart-city-map-node {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
  }

  .smart-city-page .smart-city-map-node--school { top: 92px; }
  .smart-city-page .smart-city-map-node--townhall { top: 152px; }
  .smart-city-page .smart-city-map-node--water { top: 212px; }
  .smart-city-page .smart-city-map-node--park { top: 272px; }
  .smart-city-page .smart-city-map-node--waste { top: 332px; }
  .smart-city-page .smart-city-map-node--parking { top: 388px; }
  .smart-city-page .smart-city-map-node--pump { top: 444px; transform: none; }
}

@media (max-width: 360px) {
  .smart-city-page .smart-city-map {
    min-height: 540px;
  }
}

/* =============================================================
   CATALOG GATEWAY REQUIRED MODAL
   ============================================================= */

.catalog-page .gateway-required-modal[hidden] {
  display: none !important;
}

.catalog-page .gateway-required-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.catalog-page .gateway-required-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 25, 38, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.catalog-page .gateway-required-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 34px 32px 30px;
  border: 1.5px solid rgba(var(--accent-color-rgb), 0.36);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-color-rgb), 0.14), transparent 42%),
    rgba(3, 25, 38, 0.96);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.54),
    0 0 28px rgba(var(--accent-color-rgb), 0.12);
}

.catalog-page .gateway-required-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.catalog-page .gateway-required-modal__close:hover,
.catalog-page .gateway-required-modal__close:focus {
  color: var(--accent-color);
  border-color: rgba(var(--accent-color-rgb), 0.45);
  outline: none;
}

.catalog-page .gateway-required-modal__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
}

.catalog-page .gateway-required-modal h3 {
  margin: 0 44px 16px 0;
  font-family: 'ScienceGothic', var(--heading-font), sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.catalog-page .gateway-required-modal p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.98rem;
  line-height: 1.68;
}

.catalog-page .gateway-required-modal__recommendation {
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-color-rgb), 0.18);
  border-radius: 14px;
  background: rgba(5, 42, 61, 0.58);
}

.catalog-page .gateway-required-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.catalog-page .gateway-required-modal__actions .btn-ss-book {
  margin: 0;
}

.catalog-page .gateway-required-modal__cancel {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  padding: 10px 4px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: color 0.18s ease;
}

.catalog-page .gateway-required-modal__cancel:hover,
.catalog-page .gateway-required-modal__cancel:focus {
  color: var(--accent-color);
  outline: none;
}

body.gateway-modal-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .catalog-page .gateway-required-modal {
    align-items: flex-end;
    padding: 12px;
  }

  .catalog-page .gateway-required-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    padding: 28px 22px 24px;
    border-radius: 20px 20px 16px 16px;
  }

  .catalog-page .gateway-required-modal__actions {
    flex-direction: column;
  }

  .catalog-page .gateway-required-modal__actions .btn-ss-book,
  .catalog-page .gateway-required-modal__cancel {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}