/* assets/css/colocation.css */
/* scoped: nur auf colocation seite */

.page-colocation{
  --brand: #e99400;
  --brand-700: #cd8200;
  --ink: #1f2937;
  --muted: #6b7280;
  --shadow: 0 10px 24px rgba(0,0,0,0.06);

  /* Bootstrap primary lokal auf Orange drehen */
  --bs-primary: #e99400;
  --bs-primary-rgb: 233, 148, 0;
  --bs-link-color: #e99400;
  --bs-link-hover-color: #cd8200;
}

/* Navbar überdeckt Hero? -> nur diese Seite */
.page-colocation .co-main{
  padding-top: 84px;
}
@media (max-width: 992px){
  .page-colocation .co-main{ padding-top: 72px; }
}

/* Buttons/Links gegen global style.css absichern */
.page-colocation a{ color: var(--brand); }
.page-colocation a:hover{ color: var(--brand-700); }

.page-colocation .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-colocation .btn-primary:hover{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.page-colocation .btn-outline-primary{
  border-color: rgba(233,148,0,0.45) !important;
  color: var(--brand-700) !important;
}
.page-colocation .btn-outline-primary:hover{
  background: rgba(233,148,0,0.12) !important;
  border-color: rgba(233,148,0,0.55) !important;
  color: var(--brand-700) !important;
}
.page-colocation .btn:focus,
.page-colocation .btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(233,148,0,.25) !important;
}

/* HERO */
.page-colocation .co-hero{
  background: radial-gradient(900px 220px at 100% -60%, rgba(233,148,0,0.14), transparent 55%) #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.page-colocation .co-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  background: rgba(233,148,0,0.10);
  border: 1px solid rgba(233,148,0,0.28);
  color:#7a3f00;
  margin-bottom: 12px;
}
.page-colocation .co-title{
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.12;
  margin: 0 0 12px;
  font-weight: 950;
  color: var(--ink);
}
.page-colocation .co-subtitle{
  color:#374151;
  font-size:16px;
  margin:0 0 16px;
}
.page-colocation .co-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 14px;
}
.page-colocation .co-bullets{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  color:#374151;
}
.page-colocation .co-bullets li{
  position:relative;
  padding-left:22px;
}
.page-colocation .co-bullets li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  font-weight:900;
  color: var(--brand-700);
}
.page-colocation .co-bullets-compact{
  margin-top: 10px;
}
.page-colocation .co-pills{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-colocation .co-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(233,148,0,0.10);
  border:1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
}

/* Hero Card */
.page-colocation .co-hero-card{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 18px;
  box-shadow: var(--shadow);
}
.page-colocation .co-hero-card-title{
  font-weight: 950;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}
.page-colocation .co-mini-list{
  display:grid;
  gap:8px;
  margin-top: 10px;
}
.page-colocation .co-mini-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#374151;
  font-size: 13px;
}
.page-colocation .co-mini-item i{
  color: #7a3f00;
  margin-top: 2px;
}
.page-colocation .co-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(233,148,0,0.28);
  background: rgba(233,148,0,0.10);
  color:#7a3f00;
  font-weight: 800;
  font-size: 12px;
}
.page-colocation .co-note a{
  color:#7a3f00;
  text-decoration: underline;
}

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

/* Audience grid */
.page-colocation .co-audience-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 992px){
  .page-colocation .co-audience-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.page-colocation .co-audience-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;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}
.page-colocation .co-audience-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(233,148,0,0.12);
  border: 1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
  flex: 0 0 auto;
}
.page-colocation .co-audience-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 2px;
}
.page-colocation .co-audience-text{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Plans */
.page-colocation .co-plan-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .page-colocation .co-plan-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-colocation .co-plan{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
  box-shadow: var(--shadow);
}
.page-colocation .co-plan--highlight{
  border-color: rgba(233,148,0,0.22);
  background: radial-gradient(900px 220px at 0% -60%, rgba(233,148,0,0.12), transparent 55%) #fff;
}
.page-colocation .co-plan-head{
  margin-bottom: 10px;
}
.page-colocation .co-plan-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 16px;
}
.page-colocation .co-plan-tag{
  color: var(--muted);
  font-size: 12px;
}
.page-colocation .co-plan-features{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 8px;
  color:#374151;
  font-size: 13px;
}
.page-colocation .co-plan-features li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.page-colocation .co-plan-features i{
  color: var(--brand-700);
  margin-top: 2px;
}

/* Detailbox */
.page-colocation .co-detailbox{
  border: 1px solid rgba(233,148,0,0.22);
  border-radius: 18px;
  background: radial-gradient(900px 220px at 100% -60%, rgba(233,148,0,0.12), transparent 55%) #fff;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Features grid */
.page-colocation .co-feature-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .page-colocation .co-feature-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.page-colocation .co-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;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}
.page-colocation .co-feature-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(233,148,0,0.12);
  border: 1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
  flex: 0 0 auto;
}
.page-colocation .co-feature-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 2px;
}
.page-colocation .co-feature-text{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Images */
.page-colocation .co-image-card{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 10px;
  box-shadow: var(--shadow);
}
.page-colocation .co-img{
  width:100%;
  height:auto;
  border-radius: 14px;
  display:block;
}

/* FAQ - Accordion in der gleichen Kartenoptik wie auf den uebrigen Seiten */
.page-colocation .co-accordion{
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(233,148,0,.25);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: rgba(233,148,0,0.10);
}
.page-colocation .co-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-colocation .co-accordion .accordion-button{
  font-weight: 900;
  color: var(--ink);
  background: #fff;
}
.page-colocation .co-accordion .accordion-button:not(.collapsed){
  color: var(--ink);
  background: rgba(233,148,0,0.10);
  box-shadow: none;
}
.page-colocation .co-accordion .accordion-button:focus{
  border-color: rgba(233,148,0,0.35);
  box-shadow: 0 0 0 .25rem rgba(233,148,0,.25) !important;
}
.page-colocation .co-accordion .accordion-button::after{
  filter: hue-rotate(320deg) saturate(3); /* verhindert blau wirkende Icons */
}

/* Final CTA */
.page-colocation .co-final{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 18px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-colocation .co-final-buttons{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ====== Plans: mehr Hierarchie + "modern" ====== */
.page-colocation .co-plan{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-colocation .co-plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.10);
  border-color: rgba(233,148,0,0.22);
}
.page-colocation .co-plan-top{
  display:flex;
  align-items:center;
  gap: 12px;
}
.page-colocation .co-plan-headtext{
  min-width: 0;
  flex: 1 1 auto;
}
.page-colocation .co-plan-icon{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(233,148,0,0.12);
  border:1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
  flex: 0 0 auto;
}
.page-colocation .co-chip{
  font-size:12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(233,148,0,0.10);
  border:1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
  flex: 0 0 auto;
}
.page-colocation .co-plan-for{
  font-size: 12px;
  font-weight: 850;
  color: #374151;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
}
.page-colocation .co-plan-cta{
  margin-top: auto;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.page-colocation .co-plan-link{
  font-size: 12px;
  font-weight: 850;
  color: var(--brand-700);
  text-decoration: none;
}
.page-colocation .co-plan-link:hover{
  text-decoration: underline;
}
.page-colocation .co-ribbon{
  position:absolute;
  top: 14px;
  left: -10px;
  padding: 6px 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand));
  color:#1b0f0a;
  font-weight: 950;
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(233,148,0,0.22);
}
.page-colocation .co-plan--highlight{
  border-color: rgba(233,148,0,0.25);
}

/* ====== Media Grid: weniger Leerraum bei Bildern ====== */
.page-colocation .co-media{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 992px){
  .page-colocation .co-media{
    grid-template-columns: 1.1fr 0.9fr;
  }
  .page-colocation .co-media--reverse{
    grid-template-columns: 0.9fr 1.1fr;
  }
  .page-colocation .co-media--reverse .co-image-stack{
    order: 2;
  }
  .page-colocation .co-media--reverse .co-media-content{
    order: 1;
  }
}
.page-colocation .co-media-content{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Image cards mit festen Seitenverhältnissen + Crop */
.page-colocation .co-image-card{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 10px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.page-colocation .co-image-card.co-aspect-4-3{
  aspect-ratio: 4 / 3;
}
.page-colocation .co-image-card.co-aspect-16-10{
  aspect-ratio: 16 / 10;
}
.page-colocation .co-img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 14px;
  display:block;
}

/* Stack 2 Bilder sauber untereinander */
.page-colocation .co-image-stack{
  display:grid;
  gap: 12px;
}

/* ===== Pakete: größer, wertiger, klarere Hierarchie ===== */
.page-colocation .co-plan-grid{ gap:16px; }

.page-colocation .co-plan{
  position:relative;
  padding:22px;
  border-radius:22px;
  min-height: 520px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.page-colocation .co-plan::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background: linear-gradient(90deg, rgba(233,148,0,0.0), rgba(233,148,0,0.85), rgba(233,148,0,0.0));
  opacity:.65;
}

.page-colocation .co-plan--tower{
  background: radial-gradient(900px 240px at 0% -60%, rgba(233,148,0,0.10), transparent 55%) #fff;
}
.page-colocation .co-plan--rack{
  background: radial-gradient(900px 240px at 100% -60%, rgba(233,148,0,0.10), transparent 55%) #fff;
}
.page-colocation .co-plan--highlight{
  border-color: rgba(233,148,0,0.25);
  background: radial-gradient(900px 260px at 50% -60%, rgba(233,148,0,0.16), transparent 55%) #fff;
}

.page-colocation .co-plan:hover{
  transform: translateY(-2px);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 22px 52px rgba(0,0,0,0.12);
  border-color: rgba(233,148,0,0.18);
}

.page-colocation .co-plan-top{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}

.page-colocation .co-plan-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(233,148,0,0.12);
  border:1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
  flex: 0 0 auto;
  font-size: 18px;
}

.page-colocation .co-plan-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.page-colocation .co-plan-title{
  margin:0;
  font-weight: 950;
  font-size: 18px;
  color: var(--ink);
}

.page-colocation .co-plan-tag{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.page-colocation .co-badge-rec{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(233,148,0,0.12);
  border: 1px solid rgba(233,148,0,0.25);
  color:#7a3f00;
}

.page-colocation .co-plan-kv{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 14px 0 8px;
}

.page-colocation .co-kv{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  color:#374151;
}

.page-colocation .co-plan-for{
  margin-top: 6px;
  font-size: 13px;
  color:#374151;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(233,148,0,0.08);
  border: 1px solid rgba(233,148,0,0.16);
}

.page-colocation .co-plan-features{
  margin-top: 14px;
  gap: 10px;
  font-size: 13px;
}

.page-colocation .co-plan-cta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-colocation .co-plan-foot{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.page-colocation .co-plan-foot a{
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 900;
}
.page-colocation .co-plan-foot a:hover{ text-decoration: underline; }



/* ===== DC Mosaic + Text ===== */
.page-colocation .co-dc-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items:start;
}
@media (min-width: 992px){
  .page-colocation .co-dc-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.page-colocation .co-dc-card{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
  box-shadow: var(--shadow);
}

.page-colocation .co-divider{
  height:1px;
  background: rgba(0,0,0,0.06);
  margin: 14px 0;
}

.page-colocation .co-steps{
  margin: 0;
  padding-left: 18px;
  color:#374151;
  display:grid;
  gap: 10px;
  font-size: 13px;
}
.page-colocation .co-steps strong{ color: var(--ink); }

.page-colocation .co-addons{
  display:grid;
  gap: 10px;
}
.page-colocation .co-addon{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(233,148,0,0.08);
  border: 1px solid rgba(233,148,0,0.16);
  color:#374151;
  font-size: 13px;
  font-weight: 800;
}
.page-colocation .co-addon i{
  color: var(--brand-700);
  margin-top: 2px;
}

/* Mosaic */
.page-colocation .co-dc-mosaic{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .page-colocation .co-dc-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a a"
      "b c";
  }
  .page-colocation .co-shot--a{ grid-area: a; }
  .page-colocation .co-shot--b{ grid-area: b; }
  .page-colocation .co-shot--c{ grid-area: c; }
}

.page-colocation .co-shot{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
  background:#fff;
  aspect-ratio: 16 / 10;
}
.page-colocation .co-shot--a{ aspect-ratio: 16 / 9; }

.page-colocation .co-shot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

.page-colocation .co-shot figcaption{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  color: #111827;
  font-weight: 900;
  font-size: 12px;
}


/* Shared Rack Konfigurator */
.page-colocation .co-shared-card{
  background:#fff;
  border: 1px solid rgba(233,148,0,0.20);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.page-colocation .co-shared-summary{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.page-colocation .co-shared-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(233,148,0,0.08);
  border: 1px solid rgba(233,148,0,0.18);
  color: #111827;
  font-size: 0.95rem;
}
.page-colocation .co-shared-pill i{
  color: var(--brand-700);
}
.page-colocation #coSharedHeNumber{
  font-weight: 800;
}
.page-colocation #coSharedHeRange{
  accent-color: var(--brand);
}

/* ===== Pakete: alle Karten auf gemeinsamen Linien ausrichten =====
   Ohne Subgrid greift der Fallback: CTA unten (margin-top:auto) plus
   feste Mindesthoehe des Fusstextes, damit die Buttons auf einer Linie liegen. */
.page-colocation .co-plan-foot{
  min-height: 2.9em;
}

@supports (grid-template-rows: subgrid){
  @media (min-width: 992px){
    /* fuenf Zeilen: Kopf | Chips | "Ideal fuer" | Features | CTA */
    .page-colocation .co-plan-grid{
      grid-template-rows: auto auto auto 1fr auto;
    }
    .page-colocation .co-plan{
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
    }
    .page-colocation .co-plan-cta{
      margin-top: 0;
    }
    .page-colocation .co-plan-foot{
      min-height: 0;
    }
  }
}