/* Viennaweb – Webspace Hosting Detail (Premium B)
   Gilt NUR für Seiten mit Template: page-webspace-hosting-detail.php
   Ziel: Premium-Look, klare Sektionen, begrenzte Breite, 2 Reihen à 3 Add-ons
*/

.vw-webspace-detail{
  background: #fff;
}

/* Contentbreite – Hero bleibt wie gehabt full width (falls dein bestehendes CSS das so macht) */
.vw-webspace-detail .vw-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Section spacing */
.vw-webspace-detail section{
  padding: 26px 0;
}

/* HERO – höher, edler, lesbarer (nur Detailseiten) */
.vw-webspace-detail .vw-hero{
  position: relative;
  padding: 0; /* lässt bestehendes Hero-CSS grundsätzlich in Ruhe */
  min-height: 320px;
  display: flex;
  align-items: center;
}

/* dunkler Verlauf für bessere Lesbarkeit (ohne Bild zu ändern) */
.vw-webspace-detail .vw-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.05) 100%
  );
  pointer-events: none;
}


/* --- FIX V2: Hero wirklich links (killt Center-Flex aus Theme) --- */
.vw-webspace-detail .vw-hero{
  justify-content: flex-start !important;
}

.vw-webspace-detail .vw-hero .vw-container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: block !important;          /* überschreibt flex/center vom Theme */
  text-align: left !important;
}

.vw-webspace-detail .vw-hero-badges{
  display: flex !important;
  justify-content: flex-start !important;
}

.vw-webspace-detail .vw-hero-cta{
  display: flex !important;
  justify-content: flex-start !important;
}
.vw-webspace-detail .vw-hero .vw-container{
  position: relative;
  padding-top: 28px;
  padding-bottom: 28px;
}

.vw-webspace-detail .vw-hero-title{
  margin: 6px 0 10px;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.6px;
}

.vw-webspace-detail .vw-hero-subtitle{
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.5;
  opacity: .95;
}

/* Badge-Leiste edler */
.vw-webspace-detail .vw-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.vw-webspace-detail .vw-hero-badge{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(6px);
  font-weight: 800;
  font-size: 13px;
}

.vw-webspace-detail .vw-hero-cta{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .vw-webspace-detail .vw-hero{ min-height: 300px; }
  .vw-webspace-detail .vw-hero-title{ font-size: 44px; }
}
@media (max-width: 640px){
  .vw-webspace-detail .vw-hero{ min-height: 280px; }
  .vw-webspace-detail .vw-hero-title{ font-size: 36px; }
}


/* Titles */
.vw-webspace-detail .vw-section-title{
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin: 0 0 10px;
}
.vw-webspace-detail .vw-section-subline{
  margin: 0 0 18px;
  opacity: .92;
  line-height: 1.45;
  max-width: 820px;
}

/* Included block */
.vw-included .vw-included-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
@media (max-width: 720px){
  .vw-included .vw-included-list{ grid-template-columns: 1fr; }
}
.vw-included .vw-included-list li{
  background: #ffffff;
  border: 1px solid rgba(11,47,74,0.12);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* Add-ons grid: 3 columns desktop */
.vw-addons .vw-grid.vw-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .vw-addons .vw-grid.vw-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .vw-addons .vw-grid.vw-grid-3{ grid-template-columns: 1fr; }
}


/* Add-on cards premium (edler + klarere Hierarchie) */
.vw-addon-card{
  border-radius: 20px;
  border: 1px solid rgba(11,47,74,0.12);
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,0.07);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height: 230px;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
}

.vw-addon-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
  border-color: rgba(11,47,74,0.22);
}

.vw-addon-card .vw-card-title{
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.vw-addon-card .vw-card-text{
  line-height: 1.45;
  opacity: .95;
  flex: 1;
}

/* Preis als Badge */
.vw-addon-card .vw-addon-price{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,47,74,0.06);
  border: 1px solid rgba(11,47,74,0.10);
  font-weight: 900;
}

/* Link wie Button */
.vw-addon-card .vw-addon-link a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,47,74,0.16);
  background: rgba(255,255,255,0.90);
  font-weight: 900;
  text-decoration: none;
}

.vw-addon-card .vw-addon-link a:hover{
  border-color: rgba(11,47,74,0.28);
  text-decoration: none;
}







/* FAQ premium */
.vw-faq .vw-faq-list{
  margin-top: 10px;
}
.vw-faq .vw-faq-item{
  border: 1px solid rgba(11,47,74,0.12);
  border-radius: 18px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.vw-faq .vw-faq-q{
  font-weight: 900;
}
.vw-faq details > summary{
  list-style: none;
}
.vw-faq details > summary::-webkit-details-marker{
  display:none;
}
.vw-faq .vw-faq-a{
  margin-top: 10px;
  line-height: 1.55;
  opacity: .95;
}

/* Closing CTA premium */
.vw-closing-cta .vw-cta-card{
  border-radius: 22px;
  border: 1px solid rgba(11,47,74,0.14);
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
  padding: 22px 22px;
}
.vw-closing-cta .vw-cta-title{
  margin: 0 0 8px;
}
.vw-closing-cta .vw-cta-text{
  max-width: 820px;
  line-height: 1.5;
  opacity: .95;
}
.vw-closing-cta .vw-cta-actions{
  margin-top: 14px;
}

/* --- PATCH 2026-03-03: Hero höher + Buttons klickbar + FAQ Cursor --- */

/* Hero höher */
.vw-webspace-detail .vw-hero{
  min-height: 420px;
}
@media (max-width: 980px){
  .vw-webspace-detail .vw-hero{ min-height: 360px; }
}
@media (max-width: 640px){
  .vw-webspace-detail .vw-hero{ min-height: 300px; }
}

/* Buttons klickbar: Overlay garantiert unter Content */
.vw-webspace-detail .vw-hero{ position: relative; }
.vw-webspace-detail .vw-hero::before{
  z-index: 0;
  pointer-events: none;
}
.vw-webspace-detail .vw-hero .vw-container{
  position: relative;
  z-index: 2;
}

/* FAQ: Hand-Cursor + kein "Text-Eingabe"-Gefühl */
.vw-webspace-detail .vw-faq details > summary{
  cursor: pointer;
  user-select: none;
}
.vw-webspace-detail .vw-faq .vw-faq-q{
  cursor: pointer;
}

/* =========================
   HERO Grafik-Add (ohne Bugs):
   - Preiszeile + Checkliste im Hero (nur Styles)
   - KEINE Änderungen an Overlay/Z-Index/Align (kommt aus GUT-Patches)
   ========================= */

.vw-webspace-detail .vw-hero-price-row{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.vw-webspace-detail .vw-hero-price{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}

/* Wenn du € und 00 als <sup> ausgibst */
.vw-webspace-detail .vw-hero-price sup{
  font-size: 0.68em;
  line-height: 0;
  vertical-align: super;
  letter-spacing: -0.2px;
  opacity: .95;
}

.vw-webspace-detail .vw-hero-price-note{
  opacity: .9;
  font-weight: 700;
  font-size: 13px;
}

.vw-webspace-detail .vw-hero-checks{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  max-width: 860px;
}

@media (max-width: 720px){
  .vw-webspace-detail .vw-hero-checks{ grid-template-columns: 1fr; }
}

.vw-webspace-detail .vw-hero-checks li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  opacity: .96;
}

.vw-webspace-detail .vw-hero-checks li::before{
  content: "✓";
  font-weight: 900;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  flex: 0 0 22px;
}

/* Hero-Badges dunkler (Version A) */
.vw-webspace-detail .vw-hero-badge{
  background: rgba(11,47,74,0.85);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
}

/* =========================
   DESIGN A v2 – sichtbar weniger „Excel“, mehr Viennaweb-Style
   Basis: vw-webspace-hosting-detail.NOBUG-HERO-A.css
   (WICHTIG: keine Hero-Align/Overlay/Layout-Regeln -> keine alten Bugs)
   ========================= */

/* Section Title underline wie „Webspacepakete“-Überschrift */
.vw-webspace-detail .vw-section-title{
  position: relative;
  padding-bottom: 10px;
}
.vw-webspace-detail .vw-section-title::after{
  content: "";
  display: block;
  width: 110px;
  height: 4px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(46,163,255,1) 0%, rgba(46,163,255,0.10) 100%);
}

/* Included Leistungen: Blue-Pills wie Mockup */
.vw-webspace-detail .vw-included{
  padding-top: 10px;
}
.vw-webspace-detail .vw-included .vw-included-list{
  gap: 14px;
}
.vw-webspace-detail .vw-included .vw-included-list li{
  background: rgba(11,47,74,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  box-shadow: 0 16px 44px rgba(0,0,0,0.16);
  position: relative;
  padding-left: 46px;
}
.vw-webspace-detail .vw-included .vw-included-list li strong{
  color: #fff;
}
.vw-webspace-detail .vw-included .vw-included-list li::before{
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(46,163,255,0.20);
  border: 1px solid rgba(46,163,255,0.55);
  color: #fff;
}

/* Preis-Pill innerhalb Included */
.vw-webspace-detail .vw-included .vw-included-list li.vw-included-price{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vw-webspace-detail .vw-price{
  display:flex;
  align-items:center;
  gap:0;
  font-weight:800;
  font-size:20px;
  color:#0B2F4A;
  padding:0 16px;
  height:52px;
  border:1px solid #21455a;
  border-right:0;
  border-radius:12px 0 0 12px;
  background:#ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow:visible;
}

.vw-webspace-detail .vw-price sup{
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  opacity: .95;
}
.vw-webspace-detail .vw-price-unit{
  display:flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 22px;
  min-width:120px;
  background:#21455a;
  color:#ffffff;
  font-size:15px;
  font-weight:800;
  border-radius:0 12px 12px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  border:1px solid #21455a;
  border-left:0;
}

/* Add-ons Bereich: Blaues „Top-Band“ + Buttons Blau/Weiß */
.vw-webspace-detail .vw-addons{
  border-top: 4px solid rgba(46,163,255,0.95);
  background: linear-gradient(180deg, rgba(46,163,255,0.06) 0%, rgba(11,47,74,0.02) 100%);
  padding-top: 28px;
  padding-bottom: 28px;
}

.vw-webspace-detail .vw-addon-card{
  border: 1px solid rgba(11,47,74,0.14);
  box-shadow: 0 18px 52px rgba(0,0,0,0.12);
}

.vw-webspace-detail .vw-addon-link a{
  background: rgba(11,47,74,0.95);
  color: #fff;
  border: 1px solid rgba(11,47,74,0.95);
  font-weight: 900;
}
.vw-webspace-detail .vw-addon-link a:hover{
  background: rgba(11,47,74,1);
  border-color: rgba(11,47,74,1);
}

/* Techdetails (Accordion) – passend zum Stil */
.vw-webspace-detail .vw-techdetails{
  margin-top: 14px;
  border: 1px solid rgba(11,47,74,0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  overflow: hidden;
}
.vw-webspace-detail .vw-techdetails > summary{
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  font-weight: 900;
}
.vw-webspace-detail .vw-techdetails[open] > summary{
  border-bottom: 1px solid rgba(11,47,74,0.10);
}
.vw-webspace-detail .vw-techlist{
  margin: 0;
  padding: 12px 18px 16px 34px;
  line-height: 1.55;
}

/* =========================
   DESIGN A v3 – Preis-Badge + Add-on Header-Band (ohne Bug-Risiko)
   ========================= */

/* Included: Preis-Badge über ganze Reihe */
.vw-webspace-detail .vw-included .vw-included-list li.vw-included-price{
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.vw-webspace-detail .vw-price{
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.4px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.vw-webspace-detail .vw-price sup{
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  opacity: .95;
}

.vw-webspace-detail .vw-price-unit{
  font-size: 0.70em;
  font-weight: 800;
  opacity: .92;
}

.vw-webspace-detail .vw-price-note{
  font-size: 0.85em;
  font-weight: 800;
  opacity: .92;
}

/* Add-ons Cards: blaues Header-Band + Titel weiß + Icon links */
.vw-webspace-detail .vw-addon-card{
  position: relative;
  overflow: hidden;
  padding-top: 72px; /* Platz für Header-Band */
}

.vw-webspace-detail .vw-addon-card::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 62px;
  background: rgba(11,47,74,0.95);
}

.vw-addon-icon{
  position: absolute;
  top: -8px;
  left: -24px;
  height: 80px;
}

.vw-webspace-detail .vw-addon-card .vw-card-title{
  position: absolute;
  top: 16px;
  left: 74px;
  right: 18px;
  margin: 0;
  color: #fff;
  font-weight: 900;
}

/* Falls kein Icon vorhanden ist: Titel nach links */
.vw-webspace-detail .vw-addon-card:not(:has(.vw-addon-icon)) .vw-card-title{
  left: 18px;
}

@media (max-width: 520px){
  .vw-webspace-detail .vw-addon-card{ padding-top: 96px; }
  .vw-webspace-detail .vw-addon-card::before{ height: 86px; }
  .vw-webspace-detail .vw-addon-card .vw-card-title{ top: 12px; left: 18px; right: 18px; }
  .vw-webspace-detail .vw-addon-card .vw-addon-icon{ top: 52px; }
}

/* Techdetails: wie „Aufklappen“-Zeile */
.vw-webspace-detail .vw-techdetails{
  border: 1px solid rgba(11,47,74,0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  overflow: hidden;
}
.vw-webspace-detail .vw-techdetails > summary{
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  list-style: none;
}
.vw-webspace-detail .vw-techdetails > summary::-webkit-details-marker{ display:none; }
.vw-webspace-detail .vw-techdetails > summary::before{
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  transform: translateY(-1px);
  opacity: .85;
}
.vw-webspace-detail .vw-techdetails[open] > summary::before{
  content: "▼";
}
.vw-webspace-detail .vw-techlist{
  margin: 0;
  padding: 12px 18px 16px 34px;
  line-height: 1.55;
}

/* Preis-Bar direkt nach „Inkludierte Leistungen“ (v9.0) */
.vw-webspace-detail .vw-pricebar{
  margin: 14px auto 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(11,47,74,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 860px; /* wirkt optisch mittig zur 2-Spalten-Liste */
}

.vw-webspace-detail .vw-pricebar-left{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 320px;
}

.vw-webspace-detail .vw-price{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.vw-webspace-detail .vw-euro{
  font-size:.62em;
  font-weight:800;
  line-height:1;
  display:inline-block;
  position:relative;
  top:-4px;
  margin-right:6px;
  opacity:.95;
}
.vw-webspace-detail .vw-major{
  font-size:32px;
  line-height:1;
  letter-spacing:-0.02em;
  display:inline-flex;
  align-items:flex-end;
}
.vw-webspace-detail .vw-decimal{
  display:inline-block;
  font-size:1em;
  line-height:1;
  margin-left:-4px;  /* Komma näher an die 7 */
  margin-right:-2px; /* und näher an 00 */
}
.vw-webspace-detail .vw-cents{
  font-size:.62em;
  font-weight:800;
  line-height:1;
  display:inline-block;
  position:relative;
  top:-4px;
  margin-left:4px;
  opacity:.95;
}

.vw-webspace-detail .vw-price-unit{
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 14px;
  background: #234b63;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1;
  margin-left: 8px;
  position: relative;
  top: 1px; /* /Monat minimal tiefer */
}

.vw-webspace-detail .vw-price-note{
  font-size: 14px;
  color: rgba(11,47,74,0.80);
  font-weight: 600;
}

/* Bestell-Button in der Preis-Bar (weißes Badge, dunkle Schrift, subtil animiert) */
.vw-webspace-detail .vw-pricebar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,47,74,0.18);
  color: #0B2F4A;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(255,255,255,0.98);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

.vw-webspace-detail .vw-pricebar-btn:active{
  transform: translateY(1px);
}

@media (max-width: 820px){
  .vw-webspace-detail .vw-pricebar{
    flex-direction: column;
    align-items: flex-start;
  }
  .vw-webspace-detail .vw-pricebar-right{
    width: 100%;
  }
  .vw-webspace-detail .vw-pricebar-btn{
    width: 100%;
  }
}

/* Hero Layout Hard-Reset (verhindert „Buttons irgendwo“ durch Fremd-CSS) */
.vw-webspace-detail .vw-hero .vw-container{
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

.vw-webspace-detail .vw-hero .vw-hero-cta{
  position: static !important;
  inset: auto !important;
  margin-top: 14px;
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  float: none !important;
}

.vw-webspace-detail .vw-hero .vw-hero-cta a{
  position: static !important;
  float: none !important;
}

/* Preis-Bar Button – Style wie Screenshot (hell, edel, klar) */
.vw-webspace-detail .vw-pricebar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  color: #0B2F4A;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,47,74,0.18);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(11,47,74,0.04);
  border-color: rgba(11,47,74,0.28);
  text-decoration: none;
}

.vw-webspace-detail .vw-pricebar-btn:active{
  transform: translateY(1px);
}

/* =========================
   v7.2 – Preis-„Badge“ hübsch (ohne /Monat-Logik zu ändern)
   ========================= */

.vw-webspace-detail .vw-pricebar-left{
  gap: 12px;
}

.vw-webspace-detail .vw-pricebar .vw-price{
  /* hübscher, kompakter Preis-Badge */
  background: linear-gradient(180deg, rgba(11,47,74,0.98) 0%, rgba(7,32,50,0.98) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
  font-weight: 950;
  font-size: 24px;
  letter-spacing: -0.4px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.vw-webspace-detail .vw-pricebar .vw-price sup{
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  opacity: 0.92;
}

.vw-webspace-detail .vw-pricebar .vw-price-unit{
  /* eigenes kleines Label daneben, wirkt weniger „random“ */
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(11,47,74,0.95);
  background: rgba(11,47,74,0.06);
  border: 1px solid rgba(11,47,74,0.16);
}

.vw-webspace-detail .vw-pricebar .vw-price-note{
  width: 100%;
  margin-top: 8px;
  font-weight: 800;
  color: rgba(11,47,74,0.78);
}

/* Mobile: Preis + /Monat schön umbrechen */
@media (max-width: 520px){
  .vw-webspace-detail .vw-pricebar-left{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .vw-webspace-detail .vw-pricebar .vw-price-note{
    margin-top: 0px;
  }
}

/* =========================
   v7.3 – PREMIUM Preis-Badge (Preis + /Monat IN EINEM Badge)
   Ziel: kein zweites „/Monat“-Mini-Button, sondern ein cleanes Premium-Badge.
   ========================= */

/* /Monat-Element verstecken (wir hängen es optisch an den Preis-Badge an) */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: none !important;
}

/* Premium Preis-Badge: größer, cleaner, mit „/ Monat“ im Badge */
.vw-webspace-detail .vw-pricebar .vw-price{
  background: linear-gradient(180deg, rgba(11,47,74,0.98) 0%, rgba(6,28,44,0.98) 100%) !important;
  color: #fff !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22) !important;
  font-weight: 950 !important;
  font-size: 26px !important;
  letter-spacing: -0.5px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

/* Euro- und Cent-Superscript sauber */
.vw-webspace-detail .vw-pricebar .vw-price sup{
  font-size: 0.55em !important;
  line-height: 0 !important;
  vertical-align: super !important;
  opacity: 0.92 !important;
}

/* / Monat als Teil des Preis-Badges (kleiner, leicht transparenter) */
.vw-webspace-detail .vw-pricebar .vw-price::after{
  content: " / Monat";
  font-size: 0.52em;
  font-weight: 900;
  opacity: 0.80;
  letter-spacing: -0.1px;
}

/* Note etwas ruhiger, nicht so „fett“ */
.vw-webspace-detail .vw-pricebar .vw-price-note{
  font-weight: 700 !important;
  color: rgba(11,47,74,0.76) !important;
  margin-top: 8px !important;
}

/* Linke Gruppe kompakter */
.vw-webspace-detail .vw-pricebar-left{
  gap: 12px !important;
}

/* Mobile: Badge nicht zu groß */
@media (max-width: 520px){
  .vw-webspace-detail .vw-pricebar .vw-price{
    font-size: 24px !important;
  }
}

/* =========================
   v7.4 – Design A: Floating Premium Price Card
   Basis: v7.3 (BUGFREI) – überschreibt NUR den Preisbereich
   ========================= */

/* v7.3 Rückbau: /Monat wieder anzeigen, ::after entfernen */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: inline-block !important;
}
.vw-webspace-detail .vw-pricebar .vw-price::after{
  content: none !important;
}

/* Preisbar selbst ruhig halten */
.vw-webspace-detail .vw-pricebar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 16px !important;
  margin-bottom: 14px !important;
  gap: 18px !important;
}

/* Linke Seite wird zur „Floating Card“ */
.vw-webspace-detail .vw-pricebar-left{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(11,47,74,0.14);
  box-shadow: 0 18px 44px rgba(0,0,0,0.14);
  border-radius: 18px;
  padding: 14px 16px 12px;
  min-width: 360px;
  max-width: 520px;
}

/* Preis + /Monat typografisch (kein Badge) */
.vw-webspace-detail .vw-pricebar .vw-price{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  color: #0B2F4A !important;
  font-weight: 950 !important;
  font-size: 34px !important;
  letter-spacing: -0.6px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.vw-webspace-detail .vw-pricebar .vw-price sup{
  font-size: 0.52em !important;
  opacity: 0.90 !important;
}

.vw-webspace-detail .vw-pricebar .vw-price-unit{
  margin-left: 10px;
  font-weight: 900;
  color: rgba(11,47,74,0.72);
  font-size: 14px;
  letter-spacing: -0.1px;
  position: relative;
  top: -2px;
}

/* Note als 2. Zeile, ruhig */
.vw-webspace-detail .vw-pricebar .vw-price-note{
  width: 100% !important;
  margin-top: 8px !important;
  font-weight: 700 !important;
  color: rgba(11,47,74,0.72) !important;
}

/* Rechter Button: premium, aber nicht aggressiv (dunkelblau gefüllt) */
.vw-webspace-detail .vw-pricebar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.vw-webspace-detail .vw-pricebar-btn{
  background: #0B2F4A !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18) !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  filter: brightness(1.06);
}

/* Mobile: Card + Button stacked */
@media (max-width: 820px){
  .vw-webspace-detail .vw-pricebar{
    flex-direction: column;
    align-items: stretch;
  }
  .vw-webspace-detail .vw-pricebar-left{
    min-width: 0;
    max-width: none;
  }
  .vw-webspace-detail .vw-pricebar-right{
    justify-content: stretch;
  }
  .vw-webspace-detail .vw-pricebar-btn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   v7.5 – Preis + /Monat im selben Kästchen + Button zurück (hell, dunkle Schrift)
   Basis: DESIGN-A.v7.4.css
   ========================= */

/* Preis + /Monat als EIN Badge (2 Teile, aber ohne optische Trennung) */
.vw-webspace-detail .vw-pricebar-left{
  gap: 0 !important;               /* wir „kleben“ Preis & /Monat zusammen */
}

/* Preis-Teil (links) */
.vw-webspace-detail .vw-pricebar .vw-price{
  /* keine Größen/Fonts ändern – nur Pill-Form */
  border-radius: 14px 0 0 14px !important;
  padding-right: 10px !important;
}

/* /Monat-Teil (rechts) – gleiches Kästchen */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: inline-flex !important;
  align-items: baseline;
  /* gleiche Optik wie Preis-Teil (damit es EIN Badge wirkt) */
  background: linear-gradient(180deg, rgba(11,47,74,0.98) 0%, rgba(6,28,44,0.98) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-left: 0 !important;       /* keine Kante in der Mitte */
  border-radius: 0 14px 14px 0 !important;
  padding: 10px 14px 10px 16px !important; /* Abstand zwischen Cent und /Monat */
  box-shadow: 0 18px 40px rgba(0,0,0,0.22) !important;
  margin-left: 0 !important;
}

/* optional: feine Trennlinie im Badge (sehr subtil) */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  position: relative;
}
.vw-webspace-detail .vw-pricebar .vw-price-unit::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.14);
}

/* Button: zurück zum hellen „Badge“-Look (wie v7.3 Screenshot-Style) */
.vw-webspace-detail .vw-pricebar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  color: #0B2F4A;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,47,74,0.18);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(11,47,74,0.04);
  border-color: rgba(11,47,74,0.28);
  text-decoration: none;
  transform: translateY(-1px);
}

.vw-webspace-detail .vw-pricebar-btn:active{
  transform: translateY(1px);
}

/* =========================
   v7.6 – Split-Premium-Badge (links weiß, rechts blau) + CTA-Button fix (weiß/dunkle Schrift)
   ========================= */

/* Preis + /Monat als EIN gemeinsames Badge mit Außenrand in der /Monat-Farbe */
.vw-webspace-detail .vw-pricebar-left{
  gap: 0 !important;
}

/* Linker Teil: weiß */
.vw-webspace-detail .vw-pricebar .vw-price{
  background: rgba(255,255,255,0.96) !important;
  color: #0B2F4A !important;
  border: 1px solid rgba(11,47,74,0.70) !important;   /* Außenrand in „Monat“-Farbwelt */
  border-right: 0 !important;                          /* keine Kante in der Mitte */
  border-radius: 14px 0 0 14px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12) !important;
}

/* Rechter Teil: blau */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: inline-flex !important;
  align-items: baseline;
  background: rgba(11,47,74,0.92) !important;
  color: #fff !important;
  border: 1px solid rgba(11,47,74,0.70) !important;   /* gleicher Außenrand wie links */
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 10px 14px 10px 18px !important;            /* mehr Abstand nach den Cents */
  margin-left: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12) !important;
}

/* Mittlere Trennlinie minimal/subtil (optional) */
.vw-webspace-detail .vw-pricebar .vw-price-unit::before{
  background: rgba(255,255,255,0.22) !important;
}

/* CTA-Button: fix auf „weißes Badge, dunkle Schrift, clean, leicht animiert“ */
.vw-webspace-detail .vw-pricebar-btn{
  color: #0B2F4A !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(11,47,74,0.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(11,47,74,0.04) !important;
  border-color: rgba(11,47,74,0.28) !important;
  transform: translateY(-1px) !important;
}

.vw-webspace-detail .vw-pricebar-btn:active{
  transform: translateY(1px) !important;
}

/* =========================
   v7.8 – Preis-Badge: perfekte Höhen-Ausrichtung + vorbereitet für 2-stellige Preise
   + Komma näher an Zahl + € und ,00 stärker „hochgestellt“
   ========================= */

.vw-webspace-detail .vw-pricebar-left{
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
}

/* Einheitliche Badge-Höhe (auch bei 12, 28, 99 etc.) */
.vw-webspace-detail .vw-pricebar .vw-price,
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: inline-flex !important;
  align-items: center !important;
  height: 52px;               /* genug für 2-stellige Preise */
  line-height: 1 !important;
}

/* Linker Teil: weiß */
.vw-webspace-detail .vw-pricebar .vw-price{
  justify-content: center;
  padding: 0 16px !important;
  min-width: 120px;           /* 2-stellige Preise passen sauber */
  border-radius: 14px 0 0 14px !important;
}

/* Rechter Teil: blau */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  justify-content: center;
  padding: 0 18px 0 20px !important; /* etwas mehr Abstand nach dem Preis */
  border-radius: 0 14px 14px 0 !important;
}

/* € und ,00 optisch höher + Komma näher an Zahl */
.vw-webspace-detail .vw-pricebar .vw-price sup{
  font-size: 0.55em !important;
  line-height: 0 !important;
  vertical-align: super !important;
  position: relative;
  top: -2px;                  /* stärker „hochgestellt“ */
  opacity: 0.95;
}

/* Komma/00 näher an die Zahl ziehen (zweites sup) */
.vw-webspace-detail .vw-pricebar .vw-price sup:last-child{
  margin-left: -2px;          /* Komma näher an Zahl */
}

/* € etwas näher an Zahl (erstes sup) */
.vw-webspace-detail .vw-pricebar .vw-price sup:first-child{
  margin-right: 2px;
}

/* =========================
   v7.9 – Preis: Komma bleibt unten (via Markup .vw-decimal) + /Monat 1px tiefer
   + Abstand zur „Alle technischen Infos…“-Box halbieren
   + Pricebar weniger „endlos breit“
   ========================= */

/* Pricebar etwas kompakter, nicht volle Breite „leer“ */
.vw-webspace-detail .vw-pricebar{
  margin-bottom: 6px;          /* vorher 10 */
  max-width: 980px;            /* wirkt „kompakter“ innerhalb Container */
  margin-right: auto;          /* linksbündig */
}

/* Technik-Details näher ran */
.vw-webspace-detail .vw-techdetails{
  margin-top: 2px;             /* vorher 14 */
}

/* /Monat minimal tiefer */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  position: relative;
  top: 0px;
}

/* Komma unten + 00 hochgestellt:
   Voraussetzung: PHP-Markup nutzt <span class="vw-decimal">,</span><sup class="vw-cents">00</sup>
*/
.vw-webspace-detail .vw-pricebar .vw-price .vw-decimal{
  font-size: 1em;
  font-weight: inherit;
  position: relative;
  top: 0;                      /* bleibt auf Grundlinie */
  margin-left: 0;
  transform: translateX(-3px) !important;            /* Komma näher an Zahl */
  margin-right: 0px;
}

.vw-webspace-detail .vw-pricebar .vw-price .vw-cents{
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -2px;                   /* „00“ hochgestellt */
  opacity: 0.95;
  margin-left: 0;
  transform: translateX(-2px) !important;            /* Abstand Komma → 00 */
}

/* € hochgestellt, etwas näher an Zahl */
.vw-webspace-detail .vw-pricebar .vw-price .vw-euro{
  font-size: 0.55em;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -2px;
  opacity: 0.95;
  margin-right: 0;
  transform: translateX(-3px) !important;
}

/* =========================
   v8.1 – Preis-Card: CTA im Preis-Badge + rechte Bildfläche (Viennaweb Stil)
   ========================= */

.vw-webspace-detail .vw-pricebar{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: center;
}

.vw-webspace-detail .vw-pricebar-right{
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.vw-webspace-detail .vw-pricebar-art{
  position: absolute;
  inset: 10px 10px 10px 10px;
  border-radius: 14px;
  background: url('/wp-content/uploads/vw-pricebar-right-art.webp') center right / cover no-repeat;
  opacity: 0.95;
  filter: saturate(1.05) contrast(1.02);
}

/* Button im Badge – immer obenauf */
.vw-webspace-detail .vw-pricebar-btn{
  position: relative;
  z-index: 2;
}

/* Damit Text links nicht zu nah am Rand klebt, wenn rechts Art ist */
.vw-webspace-detail .vw-pricebar-left{
  padding-left: 6px;
}

/* Responsive: auf mobile Bildfläche aus, CTA unter Preis */
@media (max-width: 820px){
  .vw-webspace-detail .vw-pricebar{
    grid-template-columns: 1fr;
  }
  .vw-webspace-detail .vw-pricebar-right{
    justify-content: flex-start;
    padding-right: 0;
    min-height: auto;
  }
  .vw-webspace-detail .vw-pricebar-art{
    display: none;
  }
}

/* =========================
   v8.2 – CTA INS Preis-Card (kein rechter Außenblock)
   ========================= */

.vw-webspace-detail .vw-pricebar{
  margin-top: 14px;
}

/* Die weiße Premium-Card */
.vw-webspace-detail .vw-pricecard{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(11,47,74,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* Artwork rechts in der Card (nur Deko) */
.vw-webspace-detail .vw-pricecard-art{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  opacity: 0.95;
  background-image: url('/wp-content/uploads/vw-pricebar-right-art.webp');
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  pointer-events: none;
}

/* leichte Abdunklung, damit Text/CTA lesbar bleiben */
.vw-webspace-detail .vw-pricecard-art::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.70) 30%, rgba(255,255,255,0.00) 70%);
}

/* Inhalt über dem Artwork */
.vw-webspace-detail .vw-pricecard-main,
.vw-webspace-detail .vw-pricecard-cta{
  position: relative;
  z-index: 2;
}

/* Preiszeile */
.vw-webspace-detail .vw-pricecard-row{
  display:flex;
  align-items:center;
  gap:0;
}

/* Split-Badge: links weiß, rechts blau – und perfekt bündig */
.vw-webspace-detail .vw-pricebar-left{ display: block; } /* legacy no-op */
.vw-webspace-detail .vw-price{ 
  background: rgba(255,255,255,0.96) !important;
  color: #0B2F4A !important;
  border: 1px solid rgba(11,47,74,0.70) !important;
  border-right: 0 !important;
  border-radius: 14px 0 0 14px !important;
  padding: 0 16px !important;
  height: 52px !important;
  min-width: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.vw-webspace-detail .vw-price-unit{
  background: rgba(11,47,74,0.92) !important;
  color: #fff !important;
  border: 1px solid rgba(11,47,74,0.70) !important;
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 0 18px 0 20px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Komma unten lassen, nur Cents hochgestellt */
.vw-webspace-detail .vw-cents{
  font-size: 0.55em !important;
  line-height: 0 !important;
  vertical-align: super !important;
  position: relative;
  top: -2px;
  opacity: 0.95;
}
.vw-webspace-detail .vw-euro{
  font-size: 0.55em !important;
  line-height: 0 !important;
  vertical-align: super !important;
  position: relative;
  top: -2px;
  opacity: 0.95;
  transform: translateX(-3px) !important;
}
.vw-webspace-detail .vw-decimal{
  position: relative;
  transform: translateX(-3px) !important;
}

/* Note */
.vw-webspace-detail .vw-price-note{
  margin-top: 8px;
  font-weight: 700;
  color: rgba(11,47,74,0.76);
}

/* CTA in der Card – weißer Badge, dunkle Schrift, leicht animiert */
.vw-webspace-detail .vw-pricebar-btn{
  color: #0B2F4A !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(11,47,74,0.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10) !important;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(11,47,74,0.04) !important;
  border-color: rgba(11,47,74,0.28) !important;
  transform: translateY(-1px);
  text-decoration: none;
}
.vw-webspace-detail .vw-pricebar-btn:active{
  transform: translateY(1px);
}

/* Mobile: Artwork ausblenden, alles untereinander */
@media (max-width: 820px){
  .vw-webspace-detail .vw-pricecard{
    flex-direction: column;
    align-items: flex-start;
  }
  .vw-webspace-detail .vw-pricecard-art{
    display: none;
  }
}

/* =========================
   v8.3 – Preis-Card: saubere Abschlusskante + optional zentriert
   + CTA Hover immer lesbar (weißes Badge bleibt)
   ========================= */

/* (1) Card optisch „cleaner“: echte Rundung bis ganz rechts (Bild + Overlay) */
.vw-webspace-detail .vw-pricecard{
  border-radius: 18px;
  overflow: hidden; /* wichtig für die Abschlusskante */
}

/* Artwork: leicht breiter + weicher Übergang, damit rechts nicht „abgeschnitten“ wirkt */
.vw-webspace-detail .vw-pricecard-art{
  width: 52%;
  opacity: 0.92;
}

/* Overlay weicher machen */
.vw-webspace-detail .vw-pricecard-art::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.80) 35%,
    rgba(255,255,255,0.18) 72%,
    rgba(255,255,255,0.00) 100%
  );
}

/* (Optional) wenn du es lieber „mittig“ willst: Card zentrieren und begrenzen
   -> wirkt oft hochwertiger, weil es wie ein eigener Block sitzt */
.vw-webspace-detail .vw-pricebar{
  display: flex;
  justify-content: center;
}
.vw-webspace-detail .vw-pricecard{
  width: 100%;
  max-width: 980px;  /* kannst du auf 920/1040 ändern */
}

/* (2) CTA Hover: niemals dunkel auf dunkel – Badge bleibt weiß */
.vw-webspace-detail .vw-pricebar-btn{
  background: rgba(255,255,255,0.92) !important;
  color: #0B2F4A !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vw-webspace-detail .vw-pricebar-btn:hover{
  background: rgba(255,255,255,0.98) !important; /* bleibt weiß */
  color: #0B2F4A !important;
  border-color: rgba(11,47,74,0.32) !important;
  transform: translateY(-1px);
}

/* Active: weiterhin gut lesbar */
.vw-webspace-detail .vw-pricebar-btn:active{
  background: rgba(255,255,255,0.94) !important;
  color: #0B2F4A !important;
}


/* =========================
   v8.4 – Preis-Card kompakter + „optisch mittiger“
   (überschreibt v8.3 max-width / art-balance)
   ========================= */

.vw-webspace-detail .vw-pricebar{
  display: flex;
  justify-content: center;
}

.vw-webspace-detail .vw-pricecard{
  width: 100%;
  max-width: 860px;      /* kompakter -> wirkt mittiger */
  margin-left: auto;
  margin-right: auto;
}

/* Artwork etwas weniger dominant, damit die Card nicht „rechtslastig“ wirkt */
.vw-webspace-detail .vw-pricecard-art{
  width: 48%;
  opacity: 0.88;
  background-position: right center;
}

.vw-webspace-detail .vw-pricecard-art::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.84) 38%,
    rgba(255,255,255,0.22) 68%,
    rgba(255,255,255,0.00) 100%
  );
}

/* Sehr breite Screens: minimal mehr Luft links/rechts behalten */
@media (min-width: 1400px){
  .vw-webspace-detail .vw-pricecard{
    max-width: 880px;
  }
}


/* =========================
   v8.5 – FIX: Preis-Card mittig zentrieren
   (rechter Abstand war größer, weil .vw-pricebar max-width hat)
   ========================= */
.vw-webspace-detail .vw-pricebar{
  /* hält die schmale Breite, zentriert aber innerhalb .vw-container */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   v8.8 – Preis Feintuning (wirksam, mit !important)
   Ziel:
   - Komma näher an die Zahl (kein „Loch“)
   - € etwas weiter links
   - 00-Cents etwas höher (Oberkante optisch bündig)
   - funktioniert auch bei 2-stelligen Preisen
   ========================= */

/* (1) Grundlinie stabilisieren */
.vw-webspace-detail .vw-price{
  display: inline-flex !important;
  align-items: center !important; /* damit Sups sauber „oben“ sitzen */
  gap: 0 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* (2) Eurozeichen etwas weiter links + näher an Zahl */
.vw-webspace-detail .vw-price .vw-euro{
  position: relative !important;
  left: -2px !important;            /* € minimal nach links */
  margin-right: 3px !important;     /* näher an die 7 */
  top: -0.15em !important;
  font-size: 0.55em !important;
}

/* (3) Komma näher an die Zahl ziehen */
.vw-webspace-detail .vw-price .vw-decimal{
  display: inline-block !important;
  margin-left: 0px !important;     /* KOMMA an die 7 */
  margin-right: 0px !important;
  transform: translateX(0) !important;
}

/* (4) Cents: näher ans Komma + höher setzen */
.vw-webspace-detail .vw-price .vw-cents{
  position: relative !important;
  top: -0.42em !important;          /* höher */
  margin-left: 0px !important;     /* cents fix */
  font-size: 0.52em !important;
  line-height: 1 !important;
}

/* (5) Bei 2-stelligen Preisen Komma nicht „zu sehr“ ziehen */
.vw-webspace-detail .vw-price:has(.vw-decimal){
  /* falls Browser :has nicht kann -> egal */
}
@supports not selector(:has(*)){
  /* Fallback: nix nötig */
}

.vw-webspace-detail .vw-pricebar .vw-price .vw-major{
  display: inline-block;
  transform: translateX(4px); /* NUR 7, nach rechts */
}

/* === v9.02 FIX: Price badge inside pricecard (scoped) === */
.vw-webspace-detail .vw-pricecard .vw-price{
  display:inline-flex;align-items:center;gap:0;padding:0;
  background:#fff;border:1px solid rgba(40,86,117,.55);
  border-radius:14px;overflow:hidden;box-sizing:border-box;line-height:1;
}
.vw-webspace-detail .vw-pricecard .vw-euro{font-weight:800;font-size:16px;padding:12px 10px 12px 14px;color:#0B2F4A;}
.vw-webspace-detail .vw-pricecard .vw-major{display:inline-flex;align-items:flex-end;font-weight:900;font-size:34px;letter-spacing:-.5px;color:#0B2F4A;padding:8px 0 10px 0;}
.vw-webspace-detail .vw-pricecard .vw-decimal{display:inline-block;margin-left:-2px;margin-right:-3px;transform:translateX(1px);}
.vw-webspace-detail .vw-pricecard .vw-cents{font-weight:900;font-size:16px;color:#0B2F4A;padding:10px 12px 12px 0;position:relative;top:-3px;}
.vw-webspace-detail .vw-pricecard .vw-price-unit{display:inline-flex;align-items:center;font-weight:800;font-size:14px;color:#fff;background:#24465D;padding:12px 18px;border-left:1px solid rgba(40,86,117,.55);border-radius:0;white-space:nowrap;}
.vw-webspace-detail .vw-pricecard .vw-price,.vw-webspace-detail .vw-pricecard .vw-price *{margin:1;}


/* =============================
   V9.04 HOTFIX – Preisbadge Overflow + Feintuning
   (überschreibt alte/duplizierte Regeln gezielt)
   ============================= */

.vw-webspace-detail .vw-price{
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(11,47,74,0.35) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.vw-webspace-detail .vw-price .vw-euro{
  margin-left: 16px !important;
  margin-right: 8px !important;
  font-weight: 800 !important;
}

.vw-webspace-detail .vw-price .vw-major{
  display: inline-flex !important;
  align-items: flex-end !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

/* „7,“ minimal nach rechts (00 bleibt wo es ist) */
.vw-webspace-detail .vw-price .vw-decimal{
  margin-left: 2px !important;
  transform: translateX(3px) !important;
}

/* 00 etwas höher, optisch bündig */
.vw-webspace-detail .vw-price .vw-cents{
  margin-left: 6px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  position: relative !important;
  top: -8px !important;
}

/* /Monat als rechter Segment-Teil – NICHT mehr rausstehen */
.vw-webspace-detail .vw-price .vw-price-unit{
  margin-left: 18px !important;
  padding: 0 18px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #234a63 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-left: 1px solid rgba(11,47,74,0.25) !important;
  border-radius: 0 !important;
}

/* Reserve für zweistellige Beträge (z.B. 14,00 / 28,00) */
.vw-webspace-detail .vw-price .vw-major{
  min-width: 34px !important; /* 2-stellig + Komma */
}


/* =========================
   v9.05 – FIX: Preis-Badge Überlauf rechts + keine ungewollte Verbreiterung links
   Ursache: Box-Shadow/Border des /Monat-Teils ragt aus dem äußeren Badge.
   Lösung: Äußeres Badge (vw-price) clippen (overflow:hidden) und Shadow/Borders dort bündeln.
   ========================= */

.vw-webspace-detail .vw-pricebar .vw-price{
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(11,47,74,0.26) !important;
  border-radius: 14px !important;
  overflow: hidden !important;            /* <<< verhindert „rechts rausstehen“ */
  padding: 0 !important;                 /* <<< verhindert Verbreiterung links */
  box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
}

/* Linker Preis-Teil (weiß) – kontrollierte Innenabstände */
.vw-webspace-detail .vw-pricebar .vw-euro{
  display: inline-flex !important;
  align-items: flex-start !important;
  padding: 10px 0 10px 14px !important;
}

.vw-webspace-detail .vw-pricebar .vw-major{
  display: inline-flex !important;
  align-items: flex-end !important;
  padding: 6px 2px 8px 6px !important;
}

/* Komma & 00: nur Feintuning – 00 bleibt an Ort und Stelle, 7, rückt näher ran */
.vw-webspace-detail .vw-pricebar .vw-decimal{
  display: inline-block !important;
  margin-left: -4px !important;           /* 7 näher ans Komma */
  transform: translateX(1px) !important;  /* 7, minimal nach rechts */
}

.vw-webspace-detail .vw-pricebar .vw-cents{
  display: inline-flex !important;
  align-items: flex-start !important;
  padding: 6px 12px 0 2px !important;     /* rechts Luft VOR /Monat */
  position: relative !important;
  top: -2px !important;                   /* 00 etwas höher */
}

/* Rechter Teil (/Monat) – kein eigener Shadow/Border mehr (kommt vom äußeren Badge) */
.vw-webspace-detail .vw-pricebar .vw-price-unit{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  background: linear-gradient(180deg, rgba(11,47,74,0.98) 0%, rgba(6,28,44,0.98) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;            /* <<< wichtig */
  border-radius: 0 !important;            /* äußeres Badge macht die Rundung */
  position: relative !important;
}

.vw-webspace-detail .vw-pricebar .vw-price-unit::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.14);
}

/* =========================
   PRICE TYPO FIX (v9.07)
   Goal: € and cents as superscript (not subscript), no padding side-effects
   ========================= */
.vw-webspace-detail .vw-pricecard .vw-price{
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: 1 !important;
}

.vw-webspace-detail .vw-pricecard .vw-euro,
.vw-webspace-detail .vw-pricecard .vw-cents{
  display: inline-block !important;
  padding: 0 !important;
  line-height: 0 !important;
  vertical-align: super !important;
  position: relative !important;
  top: -6px !important; /* raise */
}

.vw-webspace-detail .vw-pricecard .vw-euro{
  font-size: 0.55em !important;
  margin: 0 6px 0 0 !important;
  left: 0 !important;
}

.vw-webspace-detail .vw-pricecard .vw-cents{
  font-size: 0.55em !important;
  margin: 0 0 0 2px !important;
}

/* keep main number baseline */
.vw-webspace-detail .vw-pricecard .vw-major{
  line-height: 1 !important;
}

/* ===== V9.12 PRICE BADGE FINAL (fix: left badge too short + /Monat alignment) ===== */
.vw-webspace-detail .vw-pricecard .vw-price{
  display:inline-flex;
  align-items:center;
  padding-left:16px !important; /* creates left breathing room so € is not clipped */
}
.vw-webspace-detail .vw-pricecard .vw-euro{
  margin-left:0 !important;
  position:relative;
  top:-4px; /* € slightly raised */
}
.vw-webspace-detail .vw-pricecard .vw-major{
  transform:translateX(4) !important;
}
.vw-webspace-detail .vw-pricecard .vw-cents{
  padding-right:18px !important; /* extends the white/left part before /Monat */
  position:relative;
  top:-7px; /* raise 00 (superscript feel) */
}
.vw-webspace-detail .vw-pricecard .vw-decimal{
  position:relative;
  top:0 !important; /* comma stays with 7 */
  margin-left:2px !important;
  margin-right:0 !important;
}
.vw-webspace-detail .vw-pricecard .vw-price-unit{
  position:relative;
  top:-4px; /* /Monat 1px higher */
}

.vw-addon-optional{
    font-weight:200;
    opacity:0.6;
    margin-left:6px;
}



/* ADD-ONS: Icon in Titel */
.vw-webspace-detail .vw-addon-card .vw-card-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.vw-webspace-detail .vw-addon-card .vw-addon-title-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 22px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.vw-webspace-detail .vw-addon-card .vw-addon-title-text{
  display:inline-block;
}

/* TRUST / Conversion */
.vw-webspace-detail .vw-trust{
  padding:48px 0 10px;
  background:linear-gradient(180deg, rgba(11,47,74,0.06), rgba(11,47,74,0));
}
.vw-webspace-detail .vw-trust-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  margin-top:18px;
}
.vw-webspace-detail .vw-trust-card{
  background:#fff;
  border:1px solid rgba(11,47,74,0.10);
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.vw-webspace-detail .vw-trust-icon{
  display:flex;
  flex-wrap: nowrap; 
  width:34px;
  height:34px;
  object-fit:contain;
  margin-bottom:10px;
}
.vw-webspace-detail .vw-trust-title{
  display:flex;
  flex-wrap: nowrap;
  font-weight:800;
  color:#0B2F4A;
  margin-bottom:6px;
}
.vw-webspace-detail .vw-trust-text{
  color:#23465f;
  font-size:14px;
  line-height:1.45;
}
.vw-webspace-detail .vw-trust-claim{
  margin-top:18px;
  background:linear-gradient(90deg, rgba(24,130,206,0.14), rgba(11,47,74,0.06));
  border:1px solid rgba(11,47,74,0.10);
  border-radius:16px;
  padding:14px 16px;
}
.vw-webspace-detail .vw-trust-claim-title{
  font-weight:900;
  color:#0B2F4A;
  margin-bottom:6px;
}
.vw-webspace-detail .vw-trust-claim-text{
  color:#23465f;
  font-size:14px;
  line-height:1.45;
}

@media (max-width: 980px){
  .vw-webspace-detail .vw-trust-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .vw-webspace-detail .vw-trust-grid{ grid-template-columns: 1fr; }
  .vw-webspace-detail .vw-addon-card .vw-card-title{ gap:8px; }
}


/* Performance + Security  BLOCK */

/* Wrapper für beide Blöcke */

.vw-tech-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin:4px 0;
}


/* Liste */

.vw-tech-list{
margin-top:14px;
display:flex;
flex-direction:column;
gap:10px;
}

/* Eintrag */

.vw-tech-item{
display:flex;
gap:10px;
align-items:flex-start;
}

/* Hakerl */

.vw-check{
font-weight:700;
color:#0B2F4A;
margin-top:2px;
}

.vw-tech-head{
  margin: 0 0 10px 0;
}
.vw-section-subtitle{
  margin: 6px 0 0 0;
  opacity: .85;
}

@media (max-width:780px){
	.vw-tech-wrapper{
	   grid-template-columns:1fr;
	}
}









/* ===== Look (Tech Blocks) ===== */

.vw-tech-block{
  padding:20px 22px;
  background: rgba(11, 47, 74, 0.06);
  border: 1px solid rgba(11, 47, 74, 0.16);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Accent-Line oben */
.vw-tech-block::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: #0B2F4A;
  opacity: .85;
}

/* Hover: minimal premium lift */
.vw-tech-block:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  border-color: rgba(11, 47, 74, 0.26);
}

/* Überschrift etwas klarer */
.vw-tech-block .vw-section-title{
  margin: 2px 0 10px 0;
}

/* List-Items edler: „Pill“-Background */
.vw-tech-item{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(11, 47, 74, 0.10);
}

/* Hakerl einheitlich */
.vw-check{
  font-weight: 900;
  color:#0B2F4A;
  margin-top: 2px;
}


/* ===== Alle technischen Infos anzeigen  */
.vw-tech-details li strong{
color:#0B2F4A;
font-weight:700;
}
.vw-tech-details ul{
list-style:none;
padding-left:0;
}

.vw-tech-details li{
position:relative;
padding-left:26px;
margin:6px 0;
}

.vw-tech-details li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#0B2F4A;
font-weight:700;
}
.vw-tech-details li{
line-height:1.5;
margin:8px 0;
}



/* ===== TECHNISCHE DETAILS (Pulldown Liste) ===== */

.vw-techlist{
list-style:none;
padding:0;
margin:14px 0 0 0;
}

.vw-techlist li{
position:relative;
padding-left:28px;
margin:8px 0;
line-height:1.5;
font-size:14px;
border-bottom:1px solid rgba(0,0,0,0.06);
padding-bottom:6px;
}

/* Check Icon */
.vw-techlist li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#0B2F4A;
font-weight:700;
}

/* Kategorie hervorheben */
.vw-techlist strong{
color:#0B2F4A;
font-weight:700;
margin-right:4px;
}



/* ===== V10.6 SEO + Navigation Additions ===== */

.vw-hero-intro{
  margin: 12px 0 0 0;
  max-width: 70ch;
  opacity: .92;
}

.vw-local-signal{
  margin: 8px auto 0 auto;
  max-width: 1200px;
  padding: 0 20px;
  opacity: .85;
}

/* Weitere Pakete & Tools */
.vw-related{
  margin: 24px 0;
}

.vw-related-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vw-related-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration:none;
  background: rgba(11, 47, 74, 0.06);
  border: 1px solid rgba(11, 47, 74, 0.16);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vw-related-card:hover{
  transform: translateY(-1px);
  border-color: rgba(11, 47, 74, 0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.vw-related-label{
  font-weight: 700;
  color: #0B2F4A;
}

.vw-related-arrow{
  font-weight: 900;
  color: #0B2F4A;
  opacity: .85;
}

@media (max-width: 860px){
  .vw-related-grid{
    grid-template-columns: 1fr;
  }
}



/* ===== Ultra-kurze Produkt-CTA-Leiste ===== */
.vw-webspace-detail .vw-cta-bar{
  margin: 18px 0 26px;
}
.vw-webspace-detail .vw-cta-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(11,47,74,0.06);
  border: 1px solid rgba(11,47,74,0.16);
}
.vw-webspace-detail .vw-cta-bar-title{
  font-weight: 700;
  color: #0B2F4A;
  line-height: 1.1;
}
.vw-webspace-detail .vw-cta-bar-sub{
  margin-top: 4px;
  opacity: .85;
  line-height: 1.35;
  font-size: 14px;
}
.vw-webspace-detail .vw-cta-bar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 720px){
  .vw-webspace-detail .vw-cta-bar-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .vw-webspace-detail .vw-cta-bar-actions{
    width:100%;
    justify-content:flex-start;
  }
}

.vw-trust-intro{
max-width:720px;
margin:10px 0 18px 0;
opacity:0.9;
text-align:left;
}
/* ===== SEO Hosting Block ===== */

.vw-hosting-seo{
margin:20px 0;
padding:30px 0;
border-top: 4px solid rgba(46,163,255,0.95);
}

.vw-hosting-seo h2{
margin-bottom:14px;
}

.vw-hosting-seo p{
max-width:720px;
line-height:1.6;
opacity:0.95;
}

/* ===== SEO Keyword Liste ===== */

.vw-hosting-seo-list{
list-style:none;
padding:0;
margin:20px 0 0 0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:8px 20px;
}

.vw-hosting-seo-list li{
position:relative;
padding-left:22px;
}

/* Hackerl */
.vw-hosting-seo-list li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#0B2F4A;
font-weight:700;
}



/* Weitere Pakete & Tools – Premium Cards */
.vw-related-grid{ gap:14px; }

.vw-related-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(11,47,74,0.06);
  border:1px solid rgba(11,47,74,0.14);
  box-shadow:0 10px 22px rgba(0,0,0,0.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none;
}

.vw-related-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,0.10);
  border-color:rgba(11,47,74,0.25);
}

.vw-related-label{ font-weight:700; }

.vw-related-arrow{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0B2F4A;
  color:#fff;
  transition:transform .18s ease;
}

.vw-related-card:hover .vw-related-arrow{ transform:translateX(2px); }