/* =========================================================
   cloudnetz – Content
   Gemeinsame Unterseiten-Heroes, Panels, Listen, FAQ-Details und Orbits
   Aus style-v38.css modularisiert.
   ========================================================= */

/* Multistreaming page */
/* Multistreaming page */
.content-hero {
      padding: 105px 0 64px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .content-hero h1 {
      max-width: 920px;
      margin: 22px auto 18px;
      font-size: clamp(2.7rem, 7vw, 5rem);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .content-hero p {
      max-width: 760px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 1.14rem;
    }

    .flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      margin-top: 34px;
    }

    .flow-step {
      padding: 28px 22px;
      min-height: 170px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      box-shadow: var(--shadow);
      text-align: center;
    }

    .flow-step strong {
      display: block;
      margin: 12px 0 6px;
      font-size: 1.1rem;
    }

    .flow-step p {
      margin: 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .flow-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: var(--accent);
      background: var(--accent-soft);
      font-weight: 800;
      font-size: 1.2rem;
    }

    .flow-arrow {
      color: var(--accent);
      font-size: 1.8rem;
      opacity: .75;
    }

    .content-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 22px;
      align-items: stretch;
    }

    .feature-panel {
      padding: 34px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      box-shadow: var(--shadow);
    }

    .feature-panel h2 {
      margin-top: 0;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      letter-spacing: -.04em;
    }

    .feature-panel p { color: var(--muted); }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
    }

    .check-list li {
      display: flex;
      gap: 12px;
      margin: 14px 0;
      color: var(--muted);
    }

    .check-list li::before {
      content: "✓";
      color: var(--accent);
      font-weight: 800;
    }

    .note-box {
      padding: 28px;
      margin-top: 24px;
      border-left: 3px solid var(--accent);
      border-radius: 0 18px 18px 0;
      background: var(--accent-soft);
    }

    .note-box strong {
      display: block;
      margin-bottom: 6px;
    }

    .faq-mini {
      display: grid;
      gap: 14px;
    }

    details {
      padding: 18px 20px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
    }

    summary {
      cursor: pointer;
      font-weight: 700;
    }

    details p {
      color: var(--muted);
      margin-bottom: 0;
    }

    @media (max-width: 900px) {
      .flow { grid-template-columns: 1fr; }
      .flow-arrow { transform: rotate(90deg); }
      .content-grid { grid-template-columns: 1fr; }
    }

/* =========================================================
   Cloudnetz Orbit-Dekoration – ausschließlich Unterseiten
   Home (.hero.hero-slider) bleibt vollständig unangetastet.
   ========================================================= */

.content-hero,
.legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.content-hero > *,
.legal-hero > * {
  position: relative;
  z-index: 2;
}

/* Linker Orbit */
.content-hero::before,
.legal-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 360px;
  height: 360px;
  left: -245px;
  top: 34px;
  border: 1px solid rgba(0, 200, 245, .13);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 31%, rgba(0, 200, 245, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 98% 70%, rgba(0, 200, 245, .75) 0 3px, transparent 4px);
}

/* Rechter Orbit */
.content-hero::after,
.legal-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 410px;
  height: 410px;
  right: -285px;
  top: -35px;
  border: 1px solid rgba(0, 200, 245, .13);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 25%, rgba(0, 200, 245, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 2% 68%, rgba(0, 200, 245, .75) 0 3px, transparent 4px);
}

/* Rechtliche Seiten etwas dezenter */
.legal-hero::before,
.legal-hero::after {
  opacity: .48;
}

@media (max-width: 820px) {
  .content-hero::before,
  .legal-hero::before {
    width: 260px;
    height: 260px;
    left: -205px;
    top: 50px;
  }

  .content-hero::after,
  .legal-hero::after {
    width: 290px;
    height: 290px;
    right: -225px;
    top: 10px;
  }
}


/* =========================================================
   Orbit-Ausrichtung Unterseiten an Home angleichen
   ========================================================= */

.content-hero::before,
.legal-hero::before {
  width: 430px;
  height: 430px;
  left: -230px;
  top: 70px;
}

.content-hero::after,
.legal-hero::after {
  width: 470px;
  height: 470px;
  right: -245px;
  top: 5px;
}

/* Punkte etwas weiter zur sichtbaren Seite ziehen */
.content-hero::before,
.legal-hero::before {
  background:
    radial-gradient(circle at 91% 28%, rgba(0, 200, 245, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 95% 68%, rgba(0, 200, 245, .75) 0 3px, transparent 4px);
}

.content-hero::after,
.legal-hero::after {
  background:
    radial-gradient(circle at 11% 22%, rgba(0, 200, 245, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 7% 66%, rgba(0, 200, 245, .75) 0 3px, transparent 4px);
}

@media (max-width: 820px) {
  .content-hero::before,
  .legal-hero::before {
    width: 300px;
    height: 300px;
    left: -170px;
    top: 60px;
  }

  .content-hero::after,
  .legal-hero::after {
    width: 330px;
    height: 330px;
    right: -185px;
    top: 20px;
  }
}