/* =============================================================
   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 */
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/static/Roboto/static/Roboto-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* Poppins - lokal */
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Poppins/Poppins-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* Raleway - lokal */
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/static/Butcherman_Montserrat_Poppins_Raleway_Roboto_etc/Raleway/static/Raleway-BlackItalic.ttf') format('truetype'); font-weight: 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 {
  background:    rgba(26, 107, 58, 0.22) !important;
  border:        1px solid rgba(var(--accent-color-rgb), 0.25) !important;
  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;
}

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

#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: Primary-CTAs wie Katalog-Kacheln (.cat-detail-btn): einfarbig Accent, dunkler Text */
.index-page a.btn-ss-book,
.index-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 {
  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 {
  color: currentColor;
}

.index-page a.btn-ss-book--outline,
.index-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 {
  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,
.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;
}

.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 {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.15) !important;
}

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

@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 - 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-benefits {
  margin-top: 0.25rem;
}

#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;
  min-height: 100%;
  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;
  }
}

/* =============================================================
   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: 72%;
    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(5, 42, 61, 0.60);
  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-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: #ffffff;
  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: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !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(5, 42, 61, 0.92) !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.2rem;
  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;
}

.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;
}

/* 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: var(--surface-1) !important;
  border: 1px solid var(--stroke-1) !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.15rem;
}

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

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

@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;
}

/* Unterer Ausblend-Gradient – blendet Komposition weich aus */
.dws-stage::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -60px;
  right: -60px;
  height: 110px;
  background: linear-gradient(to bottom, transparent, rgba(3, 25, 38, 0.60));
  pointer-events: none;
  z-index: 18;
}

/* ── 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-img {
  display: block;
  width: 100%;
  height: auto;
}

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