/* assets/css/rootserver.css */

/* Brand Variablen (nur Rootserver-Seite) */
.page-rootserver{
  --brand: #eb9f1a;
  --brand-700: #e99400;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* ---- Bootstrap Blau lokal überschreiben ---- */
.page-rootserver a{ color: var(--brand); }
.page-rootserver a:hover{ color: var(--brand-700); }

.page-rootserver .btn-primary{
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(233,148,0,0.25);
}
.page-rootserver .btn-primary:hover{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.page-rootserver .btn-outline-primary{
  border-color: rgba(233,148,0,0.45) !important;
  color: var(--brand-700) !important;
}
.page-rootserver .btn-outline-primary:hover{
  background: rgba(235,159,26,0.12) !important;
  border-color: rgba(233,148,0,0.55) !important;
  color: var(--brand-700) !important;
}

/* Fokus-Ringe (Bootstraps Blau entfernen) */
.page-rootserver .btn:focus,
.page-rootserver .btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(235,159,26,.25) !important;
}

/* Slider / Range (auch WebKit/Mozilla) */
.page-rootserver .form-range{
  accent-color: var(--brand);
}
.page-rootserver .form-range:focus{
  box-shadow: none;
}
.page-rootserver .form-range:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 .25rem rgba(235,159,26,.25);
}
.page-rootserver .form-range::-webkit-slider-thumb{
  background-color: var(--brand);
}
.page-rootserver .form-range::-moz-range-thumb{
  background-color: var(--brand);
  border: none;
}

/* Accordion (FAQ) - gleiche Kartenoptik wie auf den uebrigen Seiten */
.page-rootserver .rs-accordion{
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(235,159,26,.25);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: rgba(235,159,26,0.10);
}
.page-rootserver .rs-accordion .accordion-item{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
.page-rootserver .rs-accordion .accordion-button{
  font-weight: 900;
  color: var(--ink);
  background: #fff;
}
.page-rootserver .rs-accordion .accordion-button:not(.collapsed){
  color: var(--ink);
  background: rgba(235,159,26,0.10);
  box-shadow: none;
}
.page-rootserver .rs-accordion .accordion-button:focus{
  border-color: rgba(235,159,26,0.35);
  box-shadow: 0 0 0 .25rem rgba(235,159,26,.25) !important;
}
.page-rootserver .rs-accordion .accordion-button::after{
  filter: hue-rotate(320deg) saturate(3);
}

/* ---- HERO (vServer-ähnlich, nur orange Akzent) ---- */
.page-rootserver .rs-hero{
  background: radial-gradient(900px 220px at 100% -60%, rgba(235,159,26,0.14), transparent 55%) #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.page-rootserver .rs-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  background: rgba(235,159,26,0.10);
  border: 1px solid rgba(233,148,0,0.28);
  color: #7a3f00;
  margin-bottom: 12px;
}

.page-rootserver .rs-hero-title{
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.12;
  margin: 0 0 12px 0;
  font-weight: 950;
  color: var(--ink);
}

.page-rootserver .rs-hero-subtitle{
  color: #374151;
  font-size: 16px;
  margin: 0 0 16px;
}

.page-rootserver .rs-hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 14px;
}

.page-rootserver .rs-hero-bullets{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  color:#374151;
}
.page-rootserver .rs-hero-bullets li{
  position: relative;
  padding-left: 22px;
}
.page-rootserver .rs-hero-bullets li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  font-weight: 900;
  color: var(--brand-700);
}

.page-rootserver .rs-hero-pills{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-rootserver .rs-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(235,159,26,0.10);
  border:1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
}

.page-rootserver .rs-hero-image{
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}

/* ---- TYPO ---- */
.page-rootserver .rs-h2{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 950;
  color: var(--ink);
  margin: 0 0 10px;
}
.page-rootserver .rs-h3{
  font-size: 16px;
  font-weight: 950;
  color: var(--ink);
}
.page-rootserver .rs-lead{
  max-width: 900px;
  margin: 0 auto;
  color: #374151;
}
.page-rootserver .rs-muted{
  color: var(--muted);
  font-size: 13px;
}

/* ---- Callout ---- */
.page-rootserver .rs-callout{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
}

/* ---- Sidebar ---- */
.page-rootserver .rs-sidebar{
  position: sticky;
  top: 110px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
}

.page-rootserver .rs-sidebar-title{
  font-weight: 950;
  font-size: 16px;
  color: var(--ink);
}

.page-rootserver .rs-label{
  font-weight: 900;
  color: var(--ink);
  font-size: 13px;
}
.page-rootserver .rs-range{
  margin-left: 8px;
  font-weight: 950;
  color: #7a3f00;
}
.page-rootserver .rs-hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.page-rootserver .rs-filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-rootserver .rs-filter-btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.page-rootserver .rs-filter-btn:hover{
  background: rgba(235,159,26,0.08);
  border-color: rgba(233,148,0,0.25);
}
.page-rootserver .rs-filter-btn.active{
  background: rgba(235,159,26,0.14);
  border-color: rgba(233,148,0,0.45);
}

/* ---- Results ---- */
.page-rootserver .rs-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}
.page-rootserver .rs-mini-cta{
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(233,148,0,0.30);
  background: rgba(235,159,26,0.10);
  color: #7a3f00;
}
.page-rootserver .rs-mini-cta:hover{
  background: rgba(235,159,26,0.16);
}

.page-rootserver .rs-list{
  display:grid;
  gap:14px;
}
.page-rootserver .rs-loader{
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 18px;
  padding: 24px;
  background: rgba(0,0,0,0.02);
}

/* ---- Offer Cards (modern, nicht “zu groß”) ---- */
.page-rootserver .rs-offer{
  position: relative;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow);
}

.page-rootserver .rs-offer--promo{
  border-color: rgba(233,148,0,0.28);
  background: radial-gradient(1200px 200px at 100% -50%, rgba(235,159,26,0.10), transparent 60%) #fff;
}

.page-rootserver .promo-ribbon{
  position:absolute;
  top:14px;
  left:-12px;
  padding:6px 14px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand));
  color:#1b0f0a;
  font-weight: 950;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.5px;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  box-shadow: 0 4px 10px rgba(255,106,0,0.25);
}

.page-rootserver .rs-offer-head{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
}

.page-rootserver .rs-offer-title{
  margin:0 0 8px;
  font-size: 18px;
  font-weight: 950;
  color: var(--ink);
}

.page-rootserver .rs-offer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-rootserver .meta-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  color: #24324a;
}

.page-rootserver .meta-ok{
  border-color: rgba(31,143,78,0.25);
  background: rgba(31,143,78,0.10);
  color: #126a39;
}
.page-rootserver .meta-warn{
  border-color: rgba(233,148,0,0.30);
  background: rgba(235,159,26,0.12);
  color: #7a3f00;
}

.page-rootserver .rs-offer-price{
  min-width: 240px;
  text-align: right;
}
@media (max-width: 768px){
  .page-rootserver .rs-offer-price{ width: 100%; text-align: left; }
}

.page-rootserver .rs-offer-specs{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.page-rootserver .rs-offer-specs p{
  margin: 0 0 6px;
}
@media (max-width: 768px){
  .page-rootserver .rs-offer-specs{ grid-template-columns: 1fr; }
}

/* Preis-Block */
.page-rootserver .price_row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:4px;
}
.page-rootserver .old-price{
  color:#9c9c9c;
  text-decoration: line-through;
  font-weight: 800;
  font-size: 12px;
}
.page-rootserver .badge-save{
  font-size: 12px;
  font-weight: 950;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(235,159,26,0.14);
  color: #7a3f00;
  border: 1px solid rgba(233,148,0,0.30);
}
.page-rootserver .price_value{
  color: var(--brand);
  font-weight: 950;
  font-size: 26px;
  margin: 0;
}
.page-rootserver .price_unit{
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 12px;
}
.page-rootserver .setup_fee{
  margin: 8px 0 12px;
  color: #444;
  font-size: 12px;
}
.page-rootserver .setup-waived{
  color: #126a39;
  font-weight: 950;
}
.page-rootserver .setup-waived s{
  color: #b6b6b6;
  font-weight: 700;
}
.page-rootserver .promo-ends{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Features kompakt (nicht riesig) ---- */
.page-rootserver .rs-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 992px){
  .page-rootserver .rs-feature-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-rootserver .rs-feature-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  background: #fff;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.page-rootserver .rs-feature-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(235,159,26,0.12);
  border: 1px solid rgba(233,148,0,0.25);
  color: #7a3f00;
  flex: 0 0 auto;
}

.page-rootserver .rs-feature-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 2px;
}

.page-rootserver .rs-feature-text{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Empty */
.page-rootserver .rs-empty{
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  background: rgba(0,0,0,0.02);
}
.page-rootserver .rs-empty-icon{
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--ink);
}

.page-rootserver .meta-special{
  border-color: rgba(233,148,0,0.35);
  background: rgba(235,159,26,0.18);
  color: #7a3f00;
}

.page-rootserver .rs-search{
  border-radius: 14px;
}

.page-rootserver .rs-results-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.page-rootserver .rs-results-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.page-rootserver .rs-select{
  border-radius: 12px;
  min-width: 210px;
}

/* ==== Konfigurieren + Share Button Row ==== */
.rs-cta-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.rs-cta-row .rs-configure-btn {
  flex: 1 1 auto;
  min-width: 0;
}
/* Keep button text visible after link has been visited */
.page-rootserver a.rs-configure-btn.btn-primary,
.page-rootserver a.rs-configure-btn.btn-primary:link,
.page-rootserver a.rs-configure-btn.btn-primary:visited,
.page-rootserver a.rs-configure-btn.btn-primary:hover,
.page-rootserver a.rs-configure-btn.btn-primary:focus,
.page-rootserver a.rs-configure-btn.btn-primary:active {
  color: #fff !important;
}
.page-rootserver a.rs-configure-btn.btn-outline-primary,
.page-rootserver a.rs-configure-btn.btn-outline-primary:link,
.page-rootserver a.rs-configure-btn.btn-outline-primary:visited {
  color: var(--brand-700) !important;
}
.rs-cta-row .rs-share-btn {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rs-cta-row .rs-share-btn i {
  font-size: 15px;
  line-height: 1;
}
.rs-cta-row .rs-share-btn.is-copied,
.rs-cta-row .rs-share-btn.is-copied:hover,
.rs-cta-row .rs-share-btn.is-copied:focus,
.rs-cta-row .rs-share-btn.is-copied:active {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(22,163,74,0.30) !important;
  outline: none !important;
}
.rs-cta-row .rs-share-btn.is-copied i {
  color: #fff !important;
}

/* Keep outline-primary share button "outline" after focus/active — Bootstrap
   default fills on focus-visible/active which sticks after a cancelled click */
.rs-cta-row .rs-share-btn.btn-outline-primary:not(.is-copied):focus,
.rs-cta-row .rs-share-btn.btn-outline-primary:not(.is-copied):focus-visible,
.rs-cta-row .rs-share-btn.btn-outline-primary:not(.is-copied):active,
.rs-cta-row .rs-share-btn.btn-outline-primary:not(.is-copied).active {
  background-color: transparent !important;
  color: var(--brand-700) !important;
  border-color: rgba(233,148,0,0.35) !important;
}

/* Tooltip "In Zwischenablage kopiert" */
.rs-cta-row .rs-share-btn::after {
  content: "In Zwischenablage kopiert";
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.rs-cta-row .rs-share-btn::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 6px solid transparent;
  border-top-color: #111827;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
}
.rs-cta-row .rs-share-btn.is-copied::after,
.rs-cta-row .rs-share-btn.is-copied::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Deep-link scroll-target highlight */
.rs-offer:target {
  box-shadow: 0 0 0 3px rgba(233,148,0,0.45), 0 22px 52px rgba(0,0,0,0.12);
  animation: rs-flash 1.6s ease-out 1;
}
@keyframes rs-flash {
  0%   { box-shadow: 0 0 0 0 rgba(233,148,0,0.70), 0 22px 52px rgba(0,0,0,0.12); }
  50%  { box-shadow: 0 0 0 6px rgba(233,148,0,0.45), 0 22px 52px rgba(0,0,0,0.12); }
  100% { box-shadow: 0 0 0 3px rgba(233,148,0,0.45), 0 22px 52px rgba(0,0,0,0.12); }
}


/* ==========================================================
   GRUPPIERTE ANSICHT – Sonderposten nach Prozessor
   ========================================================== */

/* Spaltenraster: Toggle | Prozessor/RAM | Ausstattung/Speicher | Preis | Bestand | CTA */
/* Bestand braucht 105px ("Lieferzeit"), CTA 165px ("Konfigurieren") – gemessen,
   nicht geschaetzt. Darunter laufen die Spalten ineinander. */
.page-rootserver .rs-grouped{
  --rs-cols: 26px minmax(0, 1.3fr) minmax(0, 0.95fr) 138px 118px 168px;
  display: grid;
  gap: 12px;
}

/* ---- Spaltenkopf ---- */
.page-rootserver .rs-cols-head{
  display: grid;
  grid-template-columns: var(--rs-cols);
  grid-template-areas: "tog main tags price stock cta";
  gap: 12px;
  align-items: end;
  padding: 0 16px 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #9aa3af;
}
.page-rootserver .rs-cols-head .rs-cell--price{ text-align: right; }
.page-rootserver .rs-cols-head .rs-cell--stock{ text-align: center; }

/* ---- Gruppen-Karte ---- */
.page-rootserver .rs-group{
  position: relative;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-rootserver .rs-group:hover{ border-color: rgba(233,148,0,0.28); }
.page-rootserver .rs-group.is-open{
  border-color: rgba(233,148,0,0.38);
  box-shadow: 0 16px 34px rgba(0,0,0,0.08);
}
.page-rootserver .rs-group--promo{
  border-color: rgba(233,148,0,0.28);
  background: radial-gradient(1200px 200px at 100% -50%, rgba(235,159,26,0.10), transparent 60%) #fff;
}

/* Grüner Akzent für den günstigsten Prozessor */
.page-rootserver .rs-group--best{ border-color: rgba(31,143,78,0.30); }
.page-rootserver .rs-group--best::before{
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #1f8f4e;
  z-index: 1;
}

/* ---- Kopfzeile der Gruppe + Konfigurations-Zeilen (gleiches Raster) ---- */
.page-rootserver .rs-group-head,
.page-rootserver .rs-variant{
  display: grid;
  grid-template-columns: var(--rs-cols);
  grid-template-areas: "tog main tags price stock cta";
  gap: 12px;
  align-items: center;
}

.page-rootserver .rs-group-head{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  text-align: left;
  background: transparent;
  transition: background .18s ease;
}
.page-rootserver .rs-group--expandable .rs-group-head:hover{ background: rgba(235,159,26,0.055); }

/* Unsichtbarer Klickbereich über der gesamten Kopfzeile – hält das Markup
   valide (Überschriften dürfen nicht in einem <button> stehen). */
.page-rootserver .rs-group-toggle{
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.page-rootserver .rs-group-toggle:focus{ outline: none; }
.page-rootserver .rs-group-toggle:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(235,159,26,0.35);
  border-radius: 16px;
}

/* CTA in einzeiligen Gruppen liegt über dem Klickbereich */
.page-rootserver .rs-cell--cta{ position: relative; z-index: 3; }

.page-rootserver .rs-cell--tog{ grid-area: tog; }
.page-rootserver .rs-cell--main{ grid-area: main; min-width: 0; }
.page-rootserver .rs-cell--tags{ grid-area: tags; min-width: 0; }
.page-rootserver .rs-cell--price{ grid-area: price; text-align: right; }
.page-rootserver .rs-cell--stock{ grid-area: stock; text-align: center; }
.page-rootserver .rs-cell--cta{ grid-area: cta; }

/* Chevron */
.page-rootserver .rs-chevron{
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--brand-700);
  background: rgba(235,159,26,0.10);
  font-size: 12px;
  transition: transform .25s ease, background .2s ease;
}
.page-rootserver .rs-group.is-open .rs-chevron{
  transform: rotate(90deg);
  background: rgba(235,159,26,0.18);
}

/* Hersteller-Chip */
.page-rootserver .rs-chip-brand{
  display: inline-block;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  line-height: 1.3;
}
.page-rootserver .rs-chip-intel{
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.25);
}
.page-rootserver .rs-chip-amd{
  background: rgba(220,38,38,0.10);
  color: #b91c1c;
  border: 1px solid rgba(220,38,38,0.25);
}

.page-rootserver .rs-badge-best{
  display: inline-block;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(31,143,78,0.12);
  color: #126a39;
  border: 1px solid rgba(31,143,78,0.30);
  line-height: 1.3;
}

.page-rootserver .rs-group-titlerow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
}
.page-rootserver .rs-group-title{
  margin: 0;
  font-size: 17px;
  font-weight: 950;
  color: var(--ink);
  line-height: 1.2;
}
.page-rootserver .rs-group-sub{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Ausstattungs-Tags */
.page-rootserver .rs-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.page-rootserver .rs-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.025);
  color: #4b5563;
  /* Kurze Tags bleiben einzeilig, überlange (z.B. ein langer GPU-Name aus der
     API) brechen um, statt in die Preisspalte zu laufen. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.page-rootserver .rs-tag--gpu{
  border-color: rgba(118,66,190,0.25);
  background: rgba(118,66,190,0.10);
  color: #5b21b6;
}
.page-rootserver .rs-tag--net{
  border-color: rgba(37,99,235,0.22);
  background: rgba(37,99,235,0.08);
  color: #1d4ed8;
}
.page-rootserver .rs-tag--promo{
  border-color: rgba(233,148,0,0.35);
  background: rgba(235,159,26,0.18);
  color: #7a3f00;
}

/* Preis-Zelle */
.page-rootserver .rs-price-row{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 2px;
}
.page-rootserver .rs-price-from{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.page-rootserver .rs-price-main{
  font-size: 20px;
  font-weight: 950;
  color: var(--brand);
  line-height: 1.15;
  white-space: nowrap;
}
.page-rootserver .rs-price-unit{
  font-size: 11px;
  color: var(--muted);
}
.page-rootserver .rs-price-setup{
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.page-rootserver .rs-setup-free{
  color: #126a39;
  font-weight: 900;
}
.page-rootserver .rs-setup-free s{
  color: #b6b6b6;
  font-weight: 700;
}
.page-rootserver .rs-promo-ends{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Bestand */
.page-rootserver .rs-stock{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid rgba(31,143,78,0.25);
  background: rgba(31,143,78,0.10);
  color: #126a39;
}
.page-rootserver .rs-stock--low{
  border-color: rgba(233,148,0,0.30);
  background: rgba(235,159,26,0.12);
  color: #7a3f00;
}
.page-rootserver .rs-stock--order{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  color: #4b5563;
}

/* Bereitstellungszeit als Tooltip. Liegt über dem Klickbereich der Kopfzeile,
   sonst käme der Hover nie an der Pille an. Nach links, weil die Gruppen-Karte
   overflow:hidden ist und ein Tooltip nach oben abgeschnitten würde. */
.page-rootserver .rs-tip[data-tip]{
  position: relative;
  z-index: 3;
  cursor: help;
}
.page-rootserver .rs-tip[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(6px);
  width: max-content;
  max-width: 210px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 11;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.page-rootserver .rs-tip[data-tip]::before{
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%) translateX(6px);
  border: 6px solid transparent;
  border-left-color: #111827;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 11;
}
.page-rootserver .rs-tip[data-tip]:hover::after,
.page-rootserver .rs-tip[data-tip]:hover::before,
.page-rootserver .rs-tip[data-tip]:focus-visible::after,
.page-rootserver .rs-tip[data-tip]:focus-visible::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.page-rootserver .rs-tip[data-tip]:focus{ outline: none; }
.page-rootserver .rs-tip[data-tip]:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(235,159,26,.30);
}

/* ---- Aufklappbarer Bereich ---- */
.page-rootserver .rs-group-body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.page-rootserver .rs-group.is-open .rs-group-body{ grid-template-rows: 1fr; }

/* visibility nimmt die eingeklappten Links aus Tab-Reihenfolge und Screenreader,
   ohne die Animation zu verlieren */
.page-rootserver .rs-group-body-inner{
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear .28s;
}
.page-rootserver .rs-group.is-open .rs-group-body-inner{
  visibility: visible;
  transition-delay: 0s;
}

/* ---- Konfigurations-Zeilen ---- */
.page-rootserver .rs-variant{
  padding: 12px 16px;
  border-top: 1px dashed rgba(0,0,0,0.09);
  background: rgba(0,0,0,0.012);
  transition: background .18s ease;
}
.page-rootserver .rs-variant:hover{ background: rgba(235,159,26,0.06); }

.page-rootserver .rs-spec-label{
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #9aa3af;
  margin-bottom: 1px;
}
.page-rootserver .rs-spec-value{
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.page-rootserver .rs-spec-extra{ margin-top: 6px; }

.page-rootserver .rs-qty{
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

/* Kompakte CTA-Zeile in Gruppen-/Konfig-Zeilen */
.page-rootserver .rs-cta-row--compact .btn{
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 900;
  border-radius: 12px;
}
.page-rootserver .rs-cta-row--compact .rs-share-btn{ width: 38px; }

/* Kopier-Bestätigung: in der Gruppen-Karte (overflow:hidden) würde ein Tooltip
   nach oben abgeschnitten – deshalb hier links neben dem Button, in der Zeile. */
.page-rootserver .rs-cta-row--compact .rs-share-btn::after{
  content: "Link kopiert";
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(6px);
}
.page-rootserver .rs-cta-row--compact .rs-share-btn::before{
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 4px);
  transform: translateY(-50%) translateX(6px);
  border-top-color: transparent;
  border-left-color: #111827;
}
.page-rootserver .rs-cta-row--compact .rs-share-btn.is-copied::after,
.page-rootserver .rs-cta-row--compact .rs-share-btn.is-copied::before{
  transform: translateY(-50%) translateX(0);
}

/* ---- Responsive ----
   Das 6-Spalten-Raster braucht rund 880px Bahnbreite. Die Ergebnisspalte
   (col-lg-9) hat die erst ab ca. 1200px Viewport – darunter wird gestapelt. */
@media (max-width: 1199.98px){
  .page-rootserver .rs-cols-head{ display: none; }

  .page-rootserver .rs-grouped{ --rs-cols: 26px minmax(0,1fr) auto; }

  .page-rootserver .rs-group-head,
  .page-rootserver .rs-variant{
    grid-template-columns: var(--rs-cols);
    grid-template-areas:
      "tog main  price"
      ".   tags  stock"
      ".   cta   cta";
    align-items: start;
    gap: 10px 12px;
  }
  .page-rootserver .rs-cell--stock{ text-align: right; }
  .page-rootserver .rs-cell--cta{ margin-top: 2px; }
  /* CTA spannt hier über zwei Spalten – ohne Deckel wird der Button riesig */
  .page-rootserver .rs-cell--cta .rs-cta-row{ max-width: 340px; }
}

@media (max-width: 575.98px){
  /* Kopfzeile: Preis direkt unter den Prozessor – das ist die Scan-Information */
  .page-rootserver .rs-group-head{
    grid-template-areas:
      "tog main  main"
      "tog price stock"
      ".   tags  tags"
      ".   cta   cta";
  }
  /* Konfig-Zeile: RAM und Speicher zusammen, danach Preis und CTA */
  .page-rootserver .rs-variant{
    grid-template-areas:
      "tog main  main"
      "tog tags  tags"
      ".   price stock"
      ".   cta   cta";
  }
  .page-rootserver .rs-cell--price{ text-align: left; }
  .page-rootserver .rs-price-row{ justify-content: flex-start; }
  .page-rootserver .rs-cell--stock{ text-align: right; align-self: center; }
}

/* ---- Toolbar: Ansichtsumschalter ---- */
.page-rootserver .rs-view-switch{
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: #fff;
}
.page-rootserver .rs-view-btn{
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .2s ease, color .2s ease;
}
.page-rootserver .rs-view-btn:hover{ color: var(--ink); }
.page-rootserver .rs-view-btn.active{
  background: rgba(235,159,26,0.14);
  color: #7a3f00;
}

.page-rootserver .rs-tool-btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .2s ease, border-color .2s ease;
}
.page-rootserver .rs-tool-btn:hover{
  background: rgba(235,159,26,0.08);
  border-color: rgba(233,148,0,0.25);
}

/* Deep-Link-Highlight für einzelne Konfigurationen */
.page-rootserver .rs-variant.is-flash{
  animation: rs-variant-flash 1.8s ease-out 1;
}
@keyframes rs-variant-flash{
  0%   { background: rgba(235,159,26,0.35); }
  100% { background: rgba(0,0,0,0.012); }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .page-rootserver .rs-group-body{ transition: none; }
  .page-rootserver .rs-chevron{ transition: none; }
  .page-rootserver .rs-variant.is-flash{ animation: none; }
}