/* Unterseiten (Webdesign, IT-Support, Demo-Übersicht) in der Sprache der Startseite:
   dunkle Mitte mit einem Licht, Glas statt flacher Kacheln, helle Bühnen für Demos und Kontakt.
   Baut auf startseite.css auf und greift nur innerhalb von .e-mitte bzw. auf .seite-demo. */

/* Abschnitte in der Mitte: eigener Hintergrund weg, das Licht der Mitte scheint durch */
.e-mitte > section { background: transparent !important; position: relative; border: 0 !important; }
.e-mitte > section::before, .e-mitte > section::after { display: none !important; }
.e-mitte { --muted: #b3afc4; }

/* Überschriften wie auf der Startseite, ohne Etiketten darüber */
.e-mitte .section-label { display: none; }
.e-mitte .section-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.e-mitte .section-desc, .e-mitte .section-sub { color: #cfcbdc; }

/* Karten und Werkzeuge: Glas */
.e-mitte :is(.service-card, .pricing-card, .it-price-card, .prozess-step, .faq-item,
             .calc-options, .diag-wrapper, .fw-step-card, .pbf-card, .demo-wrapper) {
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 30px 50px -34px rgba(0, 0, 0, .8);
}
.e-mitte .faq-item { border-radius: 16px; }
.e-mitte :is(.pricing-card.featured, .it-price-featured) {
  border-color: rgba(141, 182, 255, .55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 0 1px rgba(27, 95, 203, .35), 0 40px 70px -36px rgba(27, 95, 203, .75);
}
.e-mitte :is(.service-card, .pricing-card, .it-price-card, .fw-step-card, .pbf-card):hover {
  border-color: rgba(141, 182, 255, .4) !important;
}
/* Innere Flächen im Glas nicht doppelt einfärben */
.e-mitte :is(.diag-wrapper, .demo-wrapper) .diag-box { background: transparent; }
/* Preisrechner: Optionen und Ergebnis als zwei Glasflächen nebeneinander */
.e-mitte .calc-options { padding: clamp(1.2rem, 2.6vw, 2rem); }
.e-mitte .calc-result {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
}

/* Demo-Übersicht: Bühne direkt unter der Navigation, Seitentitel als h1 */
.seite-demo #beweis { padding-top: calc(76px + clamp(10px, 2vw, 28px)); }
.seite-demo #beweis h1.e-h2 { margin-top: 0; }