/* Variablen wie in deiner Datei */
:root{
  --background: #050510;
  --background-alt: #0f1529;
  --accent: #29c1ff;
  --accent-strong: #ff3bff;
  --text-primary: #f6f6f7;
  --text-secondary: #aeb2c1;
  --card-background: rgba(20, 27, 48, 0.85);
  --border-color: rgba(255, 255, 255, 0.08);
}

/* Vollflächen-Gradient auf Seite */
html, body { min-height: 100%; }
body{
  background:
    radial-gradient(circle at top left, rgba(54, 29, 77, 0.45), transparent 45%),
    radial-gradient(circle at top right, rgba(21, 136, 249, 0.35), transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #020208 100%) !important;
  color: var(--text-primary);
}

/* Alle Wrapper transparent, damit man den Body-Verlauf sieht */
#page, .site, .site-content, .content-area, .wp-site-blocks,
.entry-content, .container, .wrap, .page, main, .elementor-section,
.block-editor-block-list__layout {
  background: transparent !important;
}

/* Optional: leicht „kleben“ lassen wie bei Apps */
body{ background-attachment: scroll; }

/* 1) Fallback-Hintergrund am HTML (falls Wrapper weiß ist) */
html { background-color: #020208; }

/* 2) Gradient als eigenständige Hintergrund-Lage hinter der Seite */
body { position: relative; min-height: 100%; }

/* Der Verlauf sitzt auf einem fixierten Layer hinter allen Inhalten */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at top left, rgba(54, 29, 77, 0.45), transparent 45%),
    radial-gradient(circle at top right, rgba(21, 136, 249, 0.35), transparent 40%),
    linear-gradient(180deg, #050510 0%, #020208 100%);
  background-repeat: no-repeat;
  background-size: cover;
  /* Scroll-Verhalten wie in deiner Datei */
  background-attachment: scroll;
  pointer-events: none;
}

/* 3) Typische WP-Wrapper nur farbTRANSPARENT (kein Text beeinflusst) */
:where(.wp-site-blocks, .site, .site-content, main){
  background-color: transparent !important;
}

/* 4) Page-Builder: falls aktiv, nur dann ent-weißen */
:where(.elementor-section, .elementor-container, .container){
  background-color: transparent !important;
}

/* Neon-Schatten auf alle Buttons anwenden */
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.button,
.btn {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),      /* dunkler Tiefenschatten */
    0 0 25px rgba(41, 193, 255, 0.5),   /* blauer Glow */
    0 0 35px rgba(255, 59, 255, 0.45);  /* pinker Glow */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.button:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(41, 193, 255, 0.6),
    0 0 45px rgba(255, 59, 255, 0.55);
}

/* Variante A: Empfohlen – mit nummerierter Liste (OL) */
ol.steps {
  list-style: none !important;   /* native Zahl ausblenden */
  padding-left: 0;
  margin: 0;
}
ol.steps > li {
  position: relative;
  margin: 0 0 1.6rem 0;
  padding-left: 3.5rem;          /* Platz für Kreis links */
  min-height: 2.6rem;
}
ol.steps > li::before {
  /* nutzt den eingebauten Zähler des Browsers → super robust */
  content: counter(list-item);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #29c1ff, #ff3bff);
  box-shadow: 0 0 12px rgba(41,193,255,.4);
}

/* Optional: Styling für Titel + Textzeile */
ol.steps > li > p:first-child { font-weight: 700; margin: 0 0 .25rem; }
ol.steps > li > p + p { margin: 0; opacity: .9; }

/* --- Fallback: falls du UL benutzt (nicht empfohlen) --- */
ul.steps { list-style: none !important; padding-left: 0; margin: 0; counter-reset: step; }
ul.steps > li { position: relative; margin: 0 0 1.6rem 0; padding-left: 3.5rem; min-height: 2.6rem; counter-increment: step; }
ul.steps > li::before { content: counter(step); /* Rest identisch */ 
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, #29c1ff, #ff3bff);
  box-shadow: 0 0 12px rgba(41,193,255,.4);
}

.rounded-img img {
  border-radius: 12px;   /* leicht abgerundet */
}

.rounded-img img {
  border-radius: 50%;    /* kreisförmig (nur für quadratische Bilder) */
}

/* ÄUSSERER Wrapper = Glow außerhalb */
.planet-wrap{
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  overflow: visible !important;   /* Glow darf raus */
}

.planet-wrap::before{
  content:"";
  position:absolute;
  inset:-140px;                   /* Glow über Container hinaus */
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(41,193,255,.35), rgba(255,59,255,.40));
  filter: blur(120px);
  opacity:.75;
  border-radius: inherit;
}

/* INNERE Karte = Container fürs Bild */
.planet-card{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: inherit;
  overflow: hidden;               /* Bild wird abgerundet */
}

/* Bild selbst */
.planet-card img{
  display:block;
  width:100%;
  height:auto;
  border: 0 !important;
  border-radius: inherit;
  box-shadow: none;  /* optional: 0 20px 40px rgba(6,10,26,.35) */
}


.info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.info-grid > * {
  height: 100% !important;
}


/* Tabs Container */
.pill-tabs .kt-tabs-content-wrap {
  display: flex;
  flex-direction: column;
}

/* Alle Inhalte gleich hoch machen */
.pill-tabs .kt-tabs-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: 550px; /* Höhe kannst du hier anpassen */
}

/* Optionale Feinanpassung: Bild + Text nebeneinander immer gleich ausrichten */
.pill-tabs .wp-block-columns {
  align-items: stretch;
}



/* Aktives FAQ Item stärker hervorheben */
.faq-accent [aria-expanded="true"],
.faq-accent .is-open > .kb-accordion-title-wrap,
.faq-accent .is-open > .kt-accordion-title { 
  background: linear-gradient(135deg, #a020f0, #00bfff);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(160, 32, 240, 0.7), 
              0 0 15px rgba(0, 191, 255, 0.5);
  transform: scale(1.02); /* leichter Zoom-Effekt */
  transition: all .3s ease-in-out;
}

/* Panel-Inhalt sichtbarer machen */
.faq-accent [aria-expanded="true"] + .kb-accordion-panel,
.faq-accent [aria-expanded="true"] + .kt-accordion-panel,
.faq-accent .is-open .kb-accordion-panel,
.faq-accent .is-open .kt-accordion-panel {
  background: linear-gradient(135deg, #a020f0, #00bfff);
  color: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
  padding: 15px;
}

/* Text weiß halten */
.faq-accent .kb-accordion-panel p,
.faq-accent .kt-accordion-panel p,
.faq-accent .kb-accordion-title-text,
.faq-accent .kt-accordion-title {
  color: #fff !important;
}