/* ================================================
   PLATTFORM-STARTSEITE (Umbau 18.08.2026)
   Ersetzt startseite.css auf der Front Page. Die alten
   Startseiten-Styles (startseite.css) laufen weiter auf
   /einzelanalyse, wohin die alten Inhalte umgezogen sind.
   Vorlage: mockup-startseite-plattform.html, gemappt auf
   die Theme-Variablen aus style.css (Light-Theme-faehig).
   Alle Klassen astro-plt-*, gescoped unter .astro-startseite.
   ================================================ */

/* ===== Basis ===== */
.astro-startseite .astro-plt-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.astro-startseite .astro-plt-section {
  padding: 88px 0;
  position: relative;
  /* Dekor-Elemente (Tierkreis-Rad, Orbit-Ringe, Icon-Glow) werden an
     der Sektionskante beschnitten statt Scrollbalken zu erzeugen. */
  overflow: hidden;
}

.astro-startseite .astro-plt-alt {
  background: var(--astro-section-alt);
  border-top: 1px solid var(--astro-surface-border);
}

/* Werkzeuge-Sektion: eigener kosmischer Farbhintergrund OHNE Sterne
   (19.08.: der Sternenhimmel direkt nach dem Hero wirkte doppelt). */
.astro-startseite .astro-plt-nebula {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(232,201,106,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 40%, rgba(167,139,250,0.06) 0%, transparent 60%),
    var(--astro-section-alt);
  border-top: 1px solid var(--astro-surface-border);
}

body.astro-light-theme .astro-startseite .astro-plt-nebula {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(201,168,76,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(160,124,42,0.06) 0%, transparent 55%),
    var(--astro-section-alt);
}

/* Tierkreis-Rad in der Werkzeuge-Sektion (Mockup-Variante 2, 19.08.):
   grosses dezentes Radix-Rad, rechts angeschnitten, 240s/Umdrehung.
   Ticks + Glyphen zeichnet startseite.js (drawZodiacWheel). Die
   Keyframes enthalten das translateY bewusst mit - so bleibt die
   Zentrierung waehrend der Animation erhalten (anders als bei
   auraRotate, siehe Blume des Lebens). */
.astro-startseite .astro-plt-zodiac {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.astro-startseite .astro-plt-zodiac svg {
  position: absolute;
  /* Rechts am Rand angeschnitten (Abnahme-Feedback 19.08., dritte
     Runde: links -> mittig -> rechts), etwas heller als das Mockup.
     Position ueber left+translate statt right, damit dasselbe
     translate in den Keyframes die Lage waehrend der Rotation haelt
     (transform-Falle). Zentrum bei 100% - 140px entspricht dem
     Mockup-Wert right:-180px bei 640px Breite. */
  left: calc(100% - 140px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
  opacity: 0.7;
  animation: astroPltSlowspin 240s linear infinite;
}

@keyframes astroPltSlowspin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Nutzer mit reduzierter Bewegung: alle Dauer-Animationen der
   Plattform-Sektionen stehen still (Tierkreis-Rad, Orbit-Lichtpunkte,
   schwebende App-Icons). Alle drei sind so gebaut, dass die Position
   auch ohne Animation korrekt ist. Die Blume des Lebens ist bewusst
   NICHT dabei: ihre abgenommene Position haengt an der laufenden
   auraRotate-Animation (transform-Falle, siehe oben). */
@media (prefers-reduced-motion: reduce) {
  .astro-startseite .astro-plt-zodiac svg,
  .astro-startseite .astro-plt-orbit-spinner,
  .astro-startseite .astro-plt-fico,
  .astro-startseite #tools .astro-plt-card-icon,
  .astro-startseite #analysen .astro-plt-card-icon {
    animation: none;
  }
}

.astro-startseite .astro-plt-zodiac-ring {
  fill: none;
  stroke: rgba(232,201,106,0.14);
  stroke-width: 1.2;
}

.astro-startseite .astro-plt-zodiac-tick {
  stroke: rgba(232,201,106,0.18);
  stroke-width: 1;
}

.astro-startseite .astro-plt-zodiac text {
  fill: rgba(232,201,106,0.3);
  font-size: 26px;
}

body.astro-light-theme .astro-startseite .astro-plt-zodiac-ring {
  stroke: rgba(160,124,42,0.16);
}

body.astro-light-theme .astro-startseite .astro-plt-zodiac-tick {
  stroke: rgba(160,124,42,0.20);
}

body.astro-light-theme .astro-startseite .astro-plt-zodiac text {
  fill: rgba(160,124,42,0.32);
}

.astro-startseite .astro-plt-center {
  text-align: center;
}

.astro-startseite .astro-plt-center .astro-plt-sub {
  margin: 0 auto 46px;
}

.astro-startseite h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--astro-hero-title-color);
}

.astro-startseite .astro-plt-sub {
  color: var(--astro-text-mid);
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
}

.astro-startseite .astro-plt-kicker {
  color: var(--astro-gold);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 600;
}

.astro-startseite .astro-plt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--astro-gold-line);
  color: var(--astro-gold);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ===== Buttons ===== */
.astro-startseite .astro-plt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  transition: 0.25s;
  cursor: pointer;
  border: 0;
  text-decoration: none;
}

.astro-startseite .astro-plt-btn-main {
  background: var(--astro-btn-gradient);
  color: #fff;
  box-shadow: 0 8px 26px var(--astro-accent-glow);
}

.astro-startseite .astro-plt-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px var(--astro-accent-glow);
}

.astro-startseite .astro-plt-btn-gold {
  background: linear-gradient(135deg, var(--astro-gold), var(--astro-gold-dark));
  color: #181129;
}

.astro-startseite .astro-plt-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(232,201,106,0.35);
}

.astro-startseite .astro-plt-btn-ghost {
  border: 1px solid var(--astro-border);
  color: var(--astro-text);
}

.astro-startseite .astro-plt-btn-ghost:hover {
  border-color: var(--astro-gold);
  color: var(--astro-gold);
}

/* ===== Sternenhimmel + Blume des Lebens =====
   Markup-Hooks (.astro-starfield / .astro-flower-of-life)
   werden von startseite.js befuellt - gleiche Komponenten
   wie bisher, nur die Basis-Styles muessen hier stehen,
   weil startseite.css auf der Front Page nicht mehr laedt. */
.astro-startseite .astro-starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.astro-startseite .astro-starfield > div {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body.astro-light-theme .astro-startseite .astro-starfield {
  display: none;
}

@keyframes starDriftSeamless {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.astro-startseite .astro-flower-of-life {
  position: absolute;
  top: 50%;
  /* Positions-Klammer (20.08., 2. Korrektur): Auf breiten Monitoren
     (ab ~1736px) gilt exakt die abgenommene 32-Zoll-Position
     (50% der Spalte - 30px, ragt rechts in den Aussenrand). Auf
     schmaleren Desktops (MacBook 1440-1512px) wuerde das rechts aus
     dem Viewport ragen - dort begrenzt der zweite min()-Ausdruck die
     Lage so, dass die Blume immer mit 24px Abstand komplett im Bild
     endet (rechte Kante = box_left + left + 540 <= 100vw - 24;
     box_left ist bei fixer Wrap-Breite 50vw + 102px). */
  left: min(calc(50% - 30px), calc(50vw - 666px));
  right: auto;
  width: 540px;
  height: 540px;
  transform: translate(-50%, -50%);
  animation: auraRotate 30s linear infinite, flowerBreathe 6s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}

.astro-startseite .astro-flower-of-life svg {
  width: 100%;
  height: 100%;
}

body.astro-light-theme .astro-startseite .astro-flower-of-life svg g {
  stroke: rgba(193,160,50,0.65);
}

/* ===== Hero ===== */
.astro-startseite .astro-plt-hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background: var(--astro-hero-grad);
  transition: background 0.5s;
}

.astro-startseite .astro-plt-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.astro-startseite .astro-plt-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  margin: 22px 0 20px;
  color: var(--astro-hero-title-color);
  transition: color 0.5s;
}

.astro-startseite .astro-plt-hero h1 em {
  font-style: normal;
  font-weight: 600;
  background: var(--astro-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.astro-startseite .astro-plt-hero .astro-plt-sub {
  margin-bottom: 34px;
}

.astro-startseite .astro-plt-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Knopf "App herunterladen" neben dem Profil-Knopf (10.10.2026) */
.astro-startseite .astro-plt-btn-app-ic {
  font-size: 12px;
  line-height: 1;
  color: var(--astro-gold);
}

.astro-startseite .astro-plt-trust {
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
}

.astro-startseite .astro-plt-trust strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--astro-gold);
}

.astro-startseite .astro-plt-trust span {
  font-size: 13px;
  color: var(--astro-text-mid);
}

.astro-startseite .astro-plt-fol-box {
  position: relative;
  min-height: 380px;
  /* Oben verankert statt mittig in der Spalte (Abnahme-Feedback 18.08.,
     mehrstufig immer weiter nach oben). Hoeher als "Kreis-Oberkante =
     Hero-Oberkante" geht nur mit kleinerem Kreis, weil der Hero mit
     overflow:hidden alles an seiner Kante abschneidet - deshalb Desktop
     bei margin-top = S/2 - 300 liegt die Kreis-Oberkante genau auf der
     Hero-Oberkante (bei 540px waere das -30px). Auf Wunsch vom 18.08.
     ("viel viel hoeher") sitzt sie jetzt 120px DARUEBER - der Kreis
     ragt bewusst hinter die Oberkante und wird dort beschnitten. */
  align-self: start;
  margin-top: -190px;
}

/* ===== Meisterwerk-Karte ===== */
.astro-startseite .astro-plt-flag {
  background: var(--astro-card-bg);
  border: 1px solid var(--astro-border);
  border-radius: 26px;
  padding: 54px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.astro-startseite .astro-plt-flag::before {
  content: "\2726";
  position: absolute;
  right: -30px;
  top: -46px;
  font-size: 220px;
  color: rgba(232,201,106,0.05);
}

.astro-startseite .astro-plt-flag h2 {
  margin-bottom: 16px;
}

.astro-startseite .astro-plt-price {
  font-family: 'Cinzel', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--astro-gold);
}

.astro-startseite .astro-plt-price small {
  font-size: 15px;
  color: var(--astro-text-mid);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.astro-startseite .astro-plt-flag ul {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
  color: var(--astro-text-mid);
  font-size: 15.5px;
}

.astro-startseite .astro-plt-flag ul li {
  padding: 7px 0;
  border-bottom: 1px dashed var(--astro-surface-border);
}

.astro-startseite .astro-plt-flag ul li::before {
  content: "\2726  ";
  color: var(--astro-gold);
  font-size: 12px;
  margin-right: 8px;
}

.astro-startseite .astro-plt-flag-ctas {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

/* Buchkarte: zeigt seit 18.08. das Kartenmotiv (buch-deines-lebens-karte.jpg,
   2:3) statt des CSS-Platzhalter-Covers und ist als <a> klickbar
   (-> /einzelanalyse). Rahmen/Schatten bleiben. */
.astro-startseite .astro-plt-book {
  display: block;
  border: 1px solid rgba(232,201,106,0.25);
  border-radius: 14px;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  transition: 0.25s;
}

.astro-startseite .astro-plt-book:hover {
  transform: translateY(-5px);
  border-color: rgba(232,201,106,0.55);
  box-shadow: 0 36px 70px rgba(0,0,0,0.6);
}

.astro-startseite .astro-plt-book img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Karten-Raster ===== */
.astro-startseite .astro-plt-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
}

.astro-startseite .astro-plt-card {
  background: var(--astro-card-bg);
  border: 1px solid var(--astro-border);
  border-radius: 18px;
  padding: 30px;
  transition: 0.25s;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.astro-startseite .astro-plt-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167,139,250,0.35);
  box-shadow: 0 18px 44px var(--astro-accent-glow);
}

/* Karten-Kinder sind <span>, weil wpautop im Classic Editor
   Block-Elemente in <a>-Karten zerlegen wuerde. */
.astro-startseite .astro-plt-card-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 16px;
}

.astro-startseite .astro-plt-card-title {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 19px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--astro-hero-title-color);
}

.astro-startseite .astro-plt-card-text {
  display: block;
  font-size: 14.5px;
  color: var(--astro-text-mid);
  flex: 1;
  line-height: 1.6;
}

.astro-startseite .astro-plt-card-meta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

/* ===== Werkzeuge-Karten (20.08.): zentriert, Icons als Goldbadge
   mit pulsierendem Schein - gleiche Bildsprache wie die
   Enthalten-Karten der Produktseiten. Nur #tools, das
   Analysen-Raster darunter bleibt linksbuendig. ===== */
.astro-startseite #tools .astro-plt-card {
  text-align: center;
  align-items: center;
}

.astro-startseite #tools .astro-plt-card-meta {
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.astro-startseite #tools .astro-plt-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  font-size: 27px;
  line-height: 1;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(232,201,106,0.14), rgba(232,201,106,0.05));
  border: 1px solid rgba(232,201,106,0.24);
  animation: astroPltIconGlow 3.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.astro-startseite #tools .astro-plt-card:nth-child(2) .astro-plt-card-icon { animation-delay: 0.6s; }
.astro-startseite #tools .astro-plt-card:nth-child(3) .astro-plt-card-icon { animation-delay: 1.2s; }
.astro-startseite #tools .astro-plt-card:nth-child(4) .astro-plt-card-icon { animation-delay: 1.8s; }
.astro-startseite #tools .astro-plt-card:nth-child(5) .astro-plt-card-icon { animation-delay: 2.4s; }
.astro-startseite #tools .astro-plt-card:nth-child(6) .astro-plt-card-icon { animation-delay: 3s; }

@keyframes astroPltIconGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(232,201,106,0);
    border-color: rgba(232,201,106,0.24);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(232,201,106,0.42);
    border-color: rgba(232,201,106,0.6);
    transform: scale(1.07);
  }
}

/* Beim Hovern der Karte leuchtet ihr Icon voll auf (Animation pausiert) */
.astro-startseite #tools .astro-plt-card:hover .astro-plt-card-icon {
  animation-play-state: paused;
  box-shadow: 0 0 28px rgba(232,201,106,0.55);
  border-color: rgba(232,201,106,0.7);
  transform: scale(1.1);
}

body.astro-light-theme .astro-startseite #tools .astro-plt-card-icon {
  background: radial-gradient(circle at 50% 40%, rgba(160,124,42,0.12), rgba(160,124,42,0.04));
  border-color: rgba(160,124,42,0.3);
}

/* ===== Analysen-Karten (20.08.): ebenfalls zentriert, Icons ohne
   Badge-Rahmen - sie schweben leicht und bekommen einen weichen
   Goldschein (drop-shadow statt Box). ===== */
.astro-startseite #analysen .astro-plt-card {
  text-align: center;
  align-items: center;
}

.astro-startseite #analysen .astro-plt-card-meta {
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.astro-startseite #analysen .astro-plt-card-icon {
  font-size: 34px;
  margin: 4px auto 18px;
  animation: astroPltIconAura 4.4s ease-in-out infinite;
  will-change: transform, filter;
}

.astro-startseite #analysen .astro-plt-card:nth-child(2) .astro-plt-card-icon { animation-delay: 0.7s; }
.astro-startseite #analysen .astro-plt-card:nth-child(3) .astro-plt-card-icon { animation-delay: 1.4s; }
.astro-startseite #analysen .astro-plt-card:nth-child(4) .astro-plt-card-icon { animation-delay: 2.1s; }
.astro-startseite #analysen .astro-plt-card:nth-child(5) .astro-plt-card-icon { animation-delay: 2.8s; }
.astro-startseite #analysen .astro-plt-card:nth-child(6) .astro-plt-card-icon { animation-delay: 3.5s; }

@keyframes astroPltIconAura {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 rgba(232,201,106,0));
  }
  50% {
    transform: scale(1.12) translateY(-4px);
    filter: drop-shadow(0 0 16px rgba(232,201,106,0.55));
  }
}

.astro-startseite #analysen .astro-plt-card:hover .astro-plt-card-icon {
  animation-play-state: paused;
  transform: scale(1.16) translateY(-5px);
  filter: drop-shadow(0 0 20px rgba(232,201,106,0.7));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.astro-startseite .astro-plt-card-price {
  color: var(--astro-gold);
  font-weight: 600;
}

.astro-startseite .astro-plt-card-go {
  color: var(--astro-text-mid);
  transition: color 0.25s;
}

.astro-startseite .astro-plt-card:hover .astro-plt-card-go {
  color: var(--astro-gold);
}

.astro-startseite .astro-plt-crown {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 15px;
  opacity: 0.85;
}

.astro-startseite .astro-plt-free-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8fd6a4;
  border: 1px solid rgba(143,214,164,0.35);
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: uppercase;
}

body.astro-light-theme .astro-startseite .astro-plt-free-tag {
  color: #2e7d4f;
  border-color: rgba(46,125,79,0.4);
}

/* "Teilweise frei" (v2 18.08.: ersetzt die Krone bei Mondkalender
   und Perfekter Moment; Laenderhoroskope behalten die Krone) */
.astro-startseite .astro-plt-part-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--astro-gold);
  border: 1px solid var(--astro-gold-line);
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: uppercase;
}

/* ===== Profil-Sektion (v2 18.08.) =====
   Nutzt das App-Grid-Layout, aber auf normalem Seitenhintergrund. */
.astro-startseite .astro-plt-profile-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.astro-startseite .astro-plt-profile-card {
  background: var(--astro-card-bg);
  border: 1px solid var(--astro-border);
  border-radius: 18px;
  padding: 30px;
  max-width: 340px;
  margin: 0 auto;
  /* Inhalt mittig (Abnahme-Feedback 19.08.) */
  text-align: center;
  /* Zentrum des Orbit-Systems (Mockup Profil-V1) */
  position: relative;
  z-index: 2;
}

/* Orbit-Ringe um die Profil-Karte (Mockup Profil-Variante 1):
   zwei feine Ringe, ein goldener und ein violetter Lichtpunkt
   kreisen gegenlaeufig (40s bzw. 70s). Werte 1:1 aus dem Mockup. */
.astro-startseite .astro-plt-orbitbox {
  position: relative;
  width: 460px;
  height: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.astro-startseite .astro-plt-orbit {
  position: absolute;
  border: 1px solid rgba(167,139,250,0.18);
  border-radius: 50%;
}

.astro-startseite .astro-plt-orbit-1 {
  width: 400px;
  height: 400px;
}

.astro-startseite .astro-plt-orbit-2 {
  width: 520px;
  height: 520px;
  border-color: rgba(232,201,106,0.14);
}

.astro-startseite .astro-plt-orbit-spinner {
  position: absolute;
  inset: 0;
  animation: astroPltOrb 40s linear infinite;
}

.astro-startseite .astro-plt-orbit-s2 {
  animation-duration: 70s;
  animation-direction: reverse;
}

@keyframes astroPltOrb {
  to { transform: rotate(360deg); }
}

.astro-startseite .astro-plt-orbit-planet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--astro-gold);
  box-shadow: 0 0 12px rgba(232,201,106,0.8);
  top: 50%;
  left: 50%;
}

.astro-startseite .astro-plt-orbit-p1 {
  transform: translate(-50%, -50%) translateX(200px);
}

.astro-startseite .astro-plt-orbit-p2 {
  width: 7px;
  height: 7px;
  background: var(--astro-accent);
  box-shadow: 0 0 10px rgba(167,139,250,0.9);
  transform: translate(-50%, -50%) translateX(-260px);
}

.astro-startseite .astro-plt-orbit-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 65%);
}

body.astro-light-theme .astro-startseite .astro-plt-orbit {
  border-color: rgba(124,58,237,0.20);
}

body.astro-light-theme .astro-startseite .astro-plt-orbit-2 {
  border-color: rgba(160,124,42,0.22);
}

.astro-startseite .astro-plt-profile-status {
  align-items: center;
}

.astro-startseite .astro-plt-profile-card .astro-plt-card-text {
  margin-bottom: 14px;
}

.astro-startseite .astro-plt-profile-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--astro-text-mid);
}

/* (App-Verweise in der Startseiten-Profil-Sektion vom 19.08. wurden auf
   Wunsch zurueckgenommen - die App-Hinweise leben jetzt im eingeloggten
   Account-Bereich, siehe account.css/page-account.php/account.js.) */

/* ===== App-Sektion (bewusst dunkel in beiden Themes) ===== */
.astro-startseite .astro-plt-app {
  background: linear-gradient(145deg, #12102a, #0c0a1e);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.astro-startseite .astro-plt-app h2 {
  color: #e8e0f0;
}

.astro-startseite .astro-plt-app .astro-plt-kicker {
  color: #e8c96a;
}

.astro-startseite .astro-plt-app .astro-plt-sub {
  color: rgba(255,255,255,0.6);
}

.astro-startseite .astro-plt-app-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 50px;
  align-items: center;
}

/* applist wird seit v2 auch in der Profil-Sektion (heller Hintergrund)
   genutzt - Basis deshalb ueber Theme-Variablen, die dunkle App-Sektion
   ueberschreibt darunter mit festen Farben. */
.astro-startseite .astro-plt-applist {
  list-style: none;
  margin: 22px 0 30px;
  padding: 0;
  color: var(--astro-text-mid);
  font-size: 15.5px;
}

.astro-startseite .astro-plt-applist li {
  padding: 8px 0;
}

.astro-startseite .astro-plt-applist li::before {
  content: "\2726  ";
  color: var(--astro-gold);
  font-size: 12px;
  margin-right: 8px;
}

.astro-startseite .astro-plt-app .astro-plt-applist {
  color: rgba(255,255,255,0.6);
}

.astro-startseite .astro-plt-app .astro-plt-applist li::before {
  color: #e8c96a;
}

.astro-startseite .astro-plt-store-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.astro-startseite .astro-plt-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: border-color 0.25s;
}

.astro-startseite .astro-plt-store-badge:hover {
  border-color: #e8c96a;
}

.astro-startseite .astro-plt-store-badge b {
  display: block;
  font-size: 16px;
  color: #fff;
}

.astro-startseite .astro-plt-store-icon {
  font-size: 26px;
}

.astro-startseite .astro-plt-ios-hint {
  margin-top: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 13.5px;
}

.astro-startseite .astro-plt-qr {
  text-align: center;
}

.astro-startseite .astro-plt-qr img {
  width: 104px;
  height: 104px;
  border-radius: 10px;
  border: 4px solid #fff;
  display: block;
  margin: 0 auto;
}

.astro-startseite .astro-plt-qr span {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-top: 6px;
}

/* Appbox (Mockup App-Variante 1): violett-goldener Schein hinter dem
   Handy, vier Feature-Icons floaten drumherum (5s, versetzte Delays). */
.astro-startseite .astro-plt-appbox {
  position: relative;
  width: 420px;
  max-width: 100%;
  height: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.astro-startseite .astro-plt-pglow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.28), rgba(232,201,106,0.06) 55%, transparent 70%);
}

.astro-startseite .astro-plt-fico {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--astro-card-bg);
  border: 1px solid rgba(167,139,250,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  animation: astroPltFloat 5s ease-in-out infinite;
  z-index: 3;
}

.astro-startseite .astro-plt-fico-1 { top: 36px; left: 16px; }
.astro-startseite .astro-plt-fico-2 { top: 120px; right: 0; animation-delay: 1.2s; }
.astro-startseite .astro-plt-fico-3 { bottom: 120px; left: 0; animation-delay: 2.1s; }
.astro-startseite .astro-plt-fico-4 { bottom: 30px; right: 26px; animation-delay: 3s; }

@keyframes astroPltFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.astro-startseite .astro-plt-phone {
  width: 230px;
  margin: 0 auto;
  background: #0d0b18;
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 34px;
  padding: 14px;
  box-shadow: 0 34px 70px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}

.astro-startseite .astro-plt-phone-screen {
  background: #0f0c1d;
  border-radius: 24px;
  aspect-ratio: 9/18;
  overflow: hidden;
}

.astro-startseite .astro-plt-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Drei Schritte ===== */
.astro-startseite .astro-plt-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}

.astro-startseite .astro-plt-step {
  border: 1px solid var(--astro-border);
  border-radius: 18px;
  padding: 30px;
  background: var(--astro-card-bg);
}

.astro-startseite .astro-plt-step-num {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  color: var(--astro-accent);
  opacity: 0.7;
}

.astro-startseite .astro-plt-step h3 {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  margin: 8px 0 6px;
  color: var(--astro-hero-title-color);
}

.astro-startseite .astro-plt-step p {
  font-size: 14.5px;
  color: var(--astro-text-mid);
  line-height: 1.6;
}

/* ===== Zitat + Schluss-CTA ===== */
.astro-startseite .astro-plt-quote {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.astro-startseite .astro-plt-quote p {
  font-family: 'Cinzel', serif;
  font-size: clamp(19px, 2.6vw, 28px);
  line-height: 1.45;
  color: var(--astro-hero-title-color);
}

.astro-startseite .astro-plt-quote b {
  color: var(--astro-gold);
}

/* Zitat in der Schrift der Ueberschriften (10.10.2026): als div, weil der UI-Standard jedes p auf Hanken Grotesk
   zwingt; Fraunces wie die h2 der Startseite, Gewicht wie dort */
.astro-startseite .astro-plt-quote .astro-plt-zitat {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.4;
  color: var(--astro-hero-title-color);
}

.astro-startseite .astro-plt-quote .astro-plt-zitat b {
  font-weight: 500;
}

.astro-startseite .astro-plt-quote-attribution {
  display: block;
  margin-top: 16px;
  color: var(--astro-text-mid);
  letter-spacing: 0.2em;
  font-size: 13px;
}

.astro-startseite .astro-plt-final {
  text-align: center;
}

.astro-startseite .astro-plt-final .astro-plt-btn {
  margin-top: 26px;
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .astro-startseite .astro-plt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* Mobile-Hero komplett mittig (Abnahme-Feedback 18.08.):
     Badge einzeilig, CTAs zentriert, Blume direkt unter den
     Kennzahlen ohne grossen Abstand und voll sichtbar. */
  .astro-startseite .astro-plt-hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .astro-startseite .astro-plt-hero-grid > div:first-child {
    text-align: center;
  }

  .astro-startseite .astro-plt-badge {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .astro-startseite .astro-plt-hero .astro-plt-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .astro-startseite .astro-plt-hero-ctas {
    justify-content: center;
  }

  /* Blume des Lebens UNTER den Kennzahlen (Quellreihenfolge).
     margin-Shorthand setzt auch den Desktop-Versatz (negatives
     margin-top) zurueck; justify-self zentriert das Grid-Item
     unabhaengig vom margin:auto. 300px passt komplett auf den Screen. */
  .astro-startseite .astro-plt-fol-box {
    align-self: auto;
    justify-self: center;
    width: 300px;
    max-width: 300px;
    margin: 16px auto 0;
    min-height: 300px;
  }

  /* WICHTIG: Die auraRotate-Animation (style.css) ersetzt den transform
     komplett - das statische translate(-50%,-50%) wirkt also NICHT,
     die Blume haengt an ihrer linken oberen Ecke. Mobil deshalb explizit
     top/left 0: die 300px-Blume fuellt die 300px-Box exakt und sitzt
     mittig unter den Kennzahlen statt rechts unten abgeschnitten. */
  .astro-startseite .astro-flower-of-life {
    width: 300px;
    height: 300px;
    top: 0;
    left: 0;
    right: auto;
    transform: none;
  }

  /* Kennzahlen als zentriertes 2er-Raster; bei ungerader Anzahl
     laeuft der letzte Eintrag mittig ueber die volle Breite. */
  .astro-startseite .astro-plt-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
    text-align: center;
    width: 100%;
  }

  .astro-startseite .astro-plt-trust div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .astro-startseite .astro-plt-app-grid {
    grid-template-columns: 1fr;
  }

  /* Tierkreis-Rad mobil: kleiner, bleibt mittig hinter den Karten
     (die Karten sind nahezu deckend, das Rad schimmert in den
     Zwischenraeumen durch). */
  .astro-startseite .astro-plt-zodiac svg {
    width: 400px;
    height: 400px;
    left: 50%;
  }

  /* Orbit-System mobil verkleinert: Ringe/Lichtpunkte eng um die
     Karte, nichts ragt aus dem Viewport. */
  .astro-startseite .astro-plt-orbitbox {
    width: 100%;
    max-width: 340px;
    height: auto;
    padding: 40px 0;
  }

  .astro-startseite .astro-plt-orbit-1 {
    width: 300px;
    height: 300px;
  }

  .astro-startseite .astro-plt-orbit-2 {
    width: 380px;
    height: 380px;
  }

  .astro-startseite .astro-plt-orbit-glow {
    width: 380px;
    height: 380px;
  }

  .astro-startseite .astro-plt-orbit-p1 {
    transform: translate(-50%, -50%) translateX(150px);
  }

  .astro-startseite .astro-plt-orbit-p2 {
    transform: translate(-50%, -50%) translateX(-190px);
  }

  /* Appbox mobil: volle Spaltenbreite statt fixer 420px, sonst wird
     sie rechts an der Sektionskante beschnitten; Icons (left/right 0)
     ruecken dadurch automatisch an den Rand der Spalte. */
  .astro-startseite .astro-plt-appbox {
    width: 100%;
    height: 480px;
  }

  /* QR-Code nur auf Desktop */
  .astro-startseite .astro-plt-qr {
    display: none;
  }

  .astro-startseite .astro-plt-flag {
    grid-template-columns: 1fr;
    padding: 36px;
  }

  /* Preis + beide Buttons mittig untereinander */
  .astro-startseite .astro-plt-flag-ctas {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
}

@media (max-width: 800px) {
  .astro-startseite .astro-plt-steps {
    grid-template-columns: 1fr;
  }

  .astro-startseite .astro-plt-section {
    padding: 64px 0;
  }

  .astro-startseite .astro-plt-hero {
    padding: 60px 0 56px;
  }
}

@media (max-width: 560px) {
  .astro-startseite .astro-plt-grid {
    grid-template-columns: 1fr;
  }
}

/* Karten-Inhalte (Werkzeuge + Analysen) auf dem Handy mittig
   statt linksbuendig (Abnahme-Feedback 19.08.). Die Tags oben
   rechts (Kostenlos/Teilweise frei/Krone) bleiben absolut. */
@media (max-width: 900px) {
  .astro-startseite .astro-plt-card {
    text-align: center;
  }

  .astro-startseite .astro-plt-card-meta {
    justify-content: center;
    gap: 14px;
  }
}

/* Eine einzelne Karte in der letzten Reihe steht mittig statt links
   (seit der Familienanalyse sieben Analyse-Karten, 30.09.2026).
   Das Werkzeug-Raster mit sechs Karten ist davon nicht betroffen. */
.astro-startseite .astro-plt-grid > .astro-plt-card:last-child:nth-child(3n+1) {
  grid-column: 2;
}
@media (max-width: 1000px) {
  .astro-startseite .astro-plt-grid > .astro-plt-card:last-child:nth-child(3n+1) {
    grid-column: auto;
  }
  .astro-startseite .astro-plt-grid > .astro-plt-card:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
  }
}
@media (max-width: 560px) {
  .astro-startseite .astro-plt-grid > .astro-plt-card:last-child:nth-child(2n+1) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* Acht Analyse-Karten (seit der Freundschaftsanalyse, 01.10.2026): stehen in
   der letzten Reihe zwei Karten, stehen sie mittig. Dazu rechnet das Raster
   am Desktop in sechs Spalten, jede Karte belegt zwei - die Breiten bleiben
   genau wie bei drei Spalten. Unter 1000px gelten die Regeln oben. */
@media (min-width: 1001px) {
  .astro-startseite .astro-plt-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .astro-startseite .astro-plt-grid > .astro-plt-card {
    grid-column: span 2;
  }
  .astro-startseite .astro-plt-grid > .astro-plt-card:last-child:nth-child(3n+1) {
    grid-column: 3 / span 2;
  }
  .astro-startseite .astro-plt-grid > .astro-plt-card:nth-last-child(2):nth-child(3n+1) {
    grid-column: 2 / span 2;
  }
}


/* ===== Hero bildschirmfuellend (04.10.2026) =====
   Wie beim Entwurf fuer Agnes: Auf dem Desktop fuellt der Sternenhimmel mit
   Text, Knoepfen und Blume des Lebens den ganzen ersten Bildschirm, die
   Werkzeuge-Sektion beginnt erst darunter. Der Inhalt sitzt senkrecht mittig;
   die Blume haengt an der Raster-Oberkante (siehe .astro-plt-fol-box) und
   wandert dadurch mit. 85px = Hoehe der Kopfleiste (header.php), dazu die
   WordPress-Adminleiste, falls eingeblendet. Mobil bleibt alles wie bisher. */
@media (min-width: 901px) {
  .astro-startseite .astro-plt-hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 85px - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100svh - 85px - var(--wp-admin--admin-bar--height, 0px));
    padding: 80px 0 110px;
  }

  .astro-startseite .astro-plt-hero > .astro-plt-wrap {
    width: 100%;
  }
}

/* Einleitungstext im Hero etwas kleiner (Wunsch 04.10.2026) */
.astro-startseite .astro-plt-hero .astro-plt-sub {
  font-size: 15.5px;
  line-height: 1.65;
}

/* ===== Hero-Groessenverhaeltnisse wie beim Entwurf fuer Agnes (04.10.2026, 2. Runde) =====
   Ueberschrift, Einleitungstext und Blume des Lebens groesser, damit sie im
   bildschirmfuellenden Sternenhimmel nicht untergehen. Die Blume sitzt jetzt
   senkrecht mittig neben dem Text (Groesse ueber --fol). */
@media (min-width: 901px) {
  .astro-startseite .astro-plt-hero > .astro-plt-wrap {
    max-width: 1320px;
  }

  .astro-startseite .astro-plt-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
  }

  .astro-startseite .astro-plt-hero h1 {
    font-size: clamp(2.6rem, 4.3vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: 0;
    margin: 26px 0 24px;
  }

  .astro-startseite .astro-plt-hero .astro-plt-sub {
    font-size: 18px;
    line-height: 1.7;
    max-width: 590px;
  }

  .astro-startseite .astro-plt-fol-box {
    --fol: clamp(460px, 32vw, 640px);
    align-self: center;
    margin-top: 0;
    min-height: var(--fol);
  }

  .astro-startseite .astro-plt-hero .astro-flower-of-life {
    width: var(--fol);
    height: var(--fol);
    top: 0;
    left: calc(50% - var(--fol) / 2 + 40px);
  }
}

/* Handy und Tablet: Einleitungstext wieder etwas groesser (gekuerzter Text) */
@media (max-width: 900px) {
  .astro-startseite .astro-plt-hero .astro-plt-sub {
    font-size: 16.5px;
    line-height: 1.65;
  }
}

/* ===== Hero-Hintergrund wie beim Entwurf fuer Agnes, in Lila (05.10.2026) =====
   Oben fast schwarz, nach unten heller lila, hinter dem Logo-Wirbel ein helles
   Lila-Leuchten, unten links Magenta, ganz unten ein Hauch Gold; die letzten
   160px laufen weich aus. Lage des Leuchtens = Mitte des Logos (Desktop etwa
   75 %/48 %, mobil liegt das Logo unter den Kennzahlen bei etwa 50 %/80 %).
   Nur im dunklen Theme; das helle Theme behaelt --astro-hero-grad. */
.astro-startseite .astro-plt-hero {
  --leuchten-x: 75%;
  --leuchten-y: 48%;
  background:
    radial-gradient(60% 55% at var(--leuchten-x) var(--leuchten-y), rgba(125, 70, 221, 0.34), rgba(125, 70, 221, 0) 70%),
    radial-gradient(45% 40% at 12% 88%, rgba(194, 95, 227, 0.2), rgba(194, 95, 227, 0) 70%),
    radial-gradient(70% 30% at 50% 108%, rgba(232, 201, 106, 0.13), rgba(232, 201, 106, 0) 70%),
    linear-gradient(180deg, #0c0616 0%, #180b30 55%, #1d0c38 100%);
}

.astro-startseite .astro-plt-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(19, 9, 38, 0), #130926);
}

body.astro-light-theme .astro-startseite .astro-plt-hero {
  background: var(--astro-hero-grad);
}

body.astro-light-theme .astro-startseite .astro-plt-hero::after {
  display: none;
}

@media (max-width: 900px) {
  .astro-startseite .astro-plt-hero {
    --leuchten-x: 50%;
    --leuchten-y: 80%;
  }
}

/* ===== Fliessende Uebergaenge zwischen den Abschnitten (05.10.2026) =====
   Wie beim Entwurf fuer Agnes: keine Trennlinien mehr. Der Hero laeuft unten in
   ein dunkles Lila aus (#130926, siehe Hero-Hintergrund), die Werkzeuge-Sektion
   nimmt dieses Lila oben auf und laesst ihren Hintergrund unten in den
   Seitenhintergrund auslaufen. Die App-Sektion blendet oben und unten weich ein
   und aus, der Sternenhimmel ueber dem Schluss-Aufruf beginnt sanft statt an einer
   Kante. Die Hintergruende liegen dafuer in ::before-Ebenen mit Verlaufsmaske,
   ganz unten im eigenen Stapel der Sektion (isolation), unter Inhalt und Deko. */
.astro-startseite .astro-plt-nebula {
  isolation: isolate;
  background: none;
  border-top: 0;
}

.astro-startseite .astro-plt-nebula::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #130926 0, rgba(19, 9, 38, 0) 240px),
    radial-gradient(ellipse at 18% 0%, rgba(124, 58, 237, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(232, 201, 106, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 40%, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent);
}

body.astro-light-theme .astro-startseite .astro-plt-nebula::before {
  display: none;
}

.astro-startseite .astro-plt-app {
  isolation: isolate;
  background: none;
  border-top: 0;
  border-bottom: 0;
}

.astro-startseite .astro-plt-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(145deg, #12102a, #0c0a1e);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent);
}

/* Helles Theme: die App-Sektion bleibt ein dunkler Block (helle Schrift), also ohne Ausblenden */
body.astro-light-theme .astro-startseite .astro-plt-app::before {
  -webkit-mask-image: none;
  mask-image: none;
}

.astro-startseite .astro-plt-alt {
  border-top: 0;
}

.astro-startseite .astro-plt-alt .astro-starfield {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 180px);
  mask-image: linear-gradient(180deg, transparent, #000 180px);
}

/* ===== Dezenter Glaslook fuer die Boxen der Startseite (05.10.2026) =====
   Werkzeuge- und Analysen-Karten, Profilkarte, Buch-Karte und die drei Schritte:
   leicht durchscheinend, hinterlegter Bereich weichgezeichnet, feine helle Kante oben. */
.astro-startseite .astro-plt-card,
.astro-startseite .astro-plt-profile-card,
.astro-startseite .astro-plt-flag,
.astro-startseite .astro-plt-step {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 55%), rgba(16, 12, 38, 0.55);
  border-color: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.28);
}

/* ===== Abschnittsfarben mit weichen Uebergaengen (05.10.2026) =====
   Jeder Abschnitt hat einen eigenen, leicht anderen Nachtton; die Farbe am unteren Rand eines
   Abschnitts ist genau die am oberen Rand des naechsten, so entstehen keine Kanten:
   Hero Lila -> Werkzeuge Indigo -> Profil Nachtblau -> App Violett -> Buch warmes Aubergine ->
   Analysen Indigo -> Drei Schritte Nachtblau -> Bewertung -> Schluss-Universum, das unten in die
   Fusszeile auslaeuft (die Sterne dort setzt startseite.js). */
.astro-startseite #tools.astro-plt-nebula {
  background: linear-gradient(180deg, #130926 0%, #100b27 45%, #0c0d25 100%);
}

.astro-startseite #profil {
  background:
    radial-gradient(40% 55% at 74% 50%, rgba(90, 110, 240, 0.13), rgba(90, 110, 240, 0) 70%),
    linear-gradient(180deg, #0c0d25 0%, #0c1030 50%, #110c2a 100%);
}

.astro-startseite .astro-plt-app {
  background: linear-gradient(180deg, #110c2a 0%, #160d33 50%, #120b24 100%);
}

/* Seit 10.10.2026 folgen auf die App die Analysen, dann das Meisterwerk, dann die drei Schritte; die Verlaeufe
   schliessen weiter nahtlos aneinander an (#120b24 -> #0f0b23 -> #0b0c22 -> #0a0b1e) */
.astro-startseite #meisterwerk {
  background:
    radial-gradient(38% 50% at 76% 50%, rgba(232, 201, 106, 0.08), rgba(232, 201, 106, 0) 70%),
    linear-gradient(180deg, #0f0b23 0%, #170f23 50%, #0b0c22 100%);
}

/* Analysen: oben so viel Luft wie die anderen Abschnitte (im Seiteninhalt steht padding-top: 0,
   daher !important); der lila Schein sitzt hinter der Ueberschrift und ist an der Oberkante schon
   ganz ausgeblendet, so entsteht dort keine Kante (Wunsch Yannick 05.10.2026) */
.astro-startseite #analysen {
  padding-top: 88px !important;
  background:
    radial-gradient(60% 300px at 50% 220px, rgba(124, 58, 237, 0.11), rgba(124, 58, 237, 0) 70%),
    linear-gradient(180deg, #120b24 0%, #110c2a 50%, #0f0b23 100%);
}

@media (max-width: 800px) {
  .astro-startseite #analysen {
    padding-top: 64px !important;
  }
}

/* Drei Schritte endet in der Anfangsfarbe des Schluss-Universums (dazwischen stand bis 10.10.2026 der
   Trustpilot-Abschnitt mit eigenem Uebergang) */
.astro-startseite #schritte {
  background: linear-gradient(180deg, #0b0c22 0%, #0b0f27 50%, #0a0a1a 100%);
}

/* Schluss-Universum: etwas mehr Raum unter dem Knopf, unten genau die Farbe der Fusszeile */
.astro-startseite .astro-plt-alt {
  padding-bottom: 130px;
  background: linear-gradient(180deg, #0a0a1a 0%, #0b0920 60%, #08051a 100%);
}


/* ================================================
   App-Icons (Wunsch Tobias 08.10.2026): dieselben gemalten Icons wie in der App
   (Entdecken-Kacheln, celestial-atlas des App-Designs), einzeln mit Transparenz unter
   img/icons/. Tagesenergie: Sonne mit violettem Ring wie data-cdui-icon=sun der App
   (reines CSS). Ersetzt Emoji und Kasten; schwebt und leuchtet wie die Analyse-Icons.
   ================================================ */
.astro-startseite #tools .astro-plt-card-icon.astro-app-ic,
.astro-startseite #analysen .astro-plt-card-icon.astro-app-ic {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  margin: -6px auto 10px;
  font-size: 0;
  line-height: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  animation: astroPltIconAura 4.4s ease-in-out infinite;
  will-change: transform, filter;
}
.astro-startseite .astro-plt-card-icon.astro-app-ic img {
  display: block;
  width: 100%;
  height: 100%;
}
.astro-startseite #tools .astro-plt-card:hover .astro-plt-card-icon.astro-app-ic,
.astro-startseite #analysen .astro-plt-card:hover .astro-plt-card-icon.astro-app-ic {
  animation-play-state: paused;
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(232,201,106,0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.astro-startseite .astro-app-ic-sonne::before,
.astro-startseite .astro-app-ic-sonne::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.astro-startseite .astro-app-ic-sonne::before {
  inset: 22px;
  background: radial-gradient(circle at 37% 32%, #fff6d8, #f1cb82 25%, #d69c46 55%, #78421f 95%);
  box-shadow: 0 0 0 1px #fce3ad, 0 0 20px #eabc7466, 0 0 48px #9558e966;
}
.astro-startseite .astro-app-ic-sonne::after {
  inset: 34px 4px;
  border: 1px solid #bda0f3;
  transform: rotate(-24deg);
  box-shadow: 0 0 8px #af70ff80;
}
@media (prefers-reduced-motion: reduce) {
  .astro-startseite #tools .astro-plt-card-icon.astro-app-ic,
  .astro-startseite #analysen .astro-plt-card-icon.astro-app-ic { animation: none; }
}

/* Blume des Lebens (und das alte Tierkreis-Rad darunter) im Werkzeuge-Abschnitt raus
   (Wunsch Tobias 08.10.2026; startseite.js baut sie nicht mehr) */
.astro-startseite #tools .astro-plt-zodiac { display: none; }

/* Icons ruhiger (Wunsch Tobias 08.10.2026: "nicht so schnell und so mega raus und reinzoomen"):
   nur noch leichtes Schweben (3 % groesser, 3 px hoch, 7 s statt 12 %, 4 px, 4,4 s), sanfterer
   Schein; gilt fuer alle Karten-Icons in Werkzeuge und Analysen, auch beim Hovern. */
@keyframes astroPltIconSanft {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(232,201,106,0));
  }
  50% {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 0 10px rgba(232,201,106,0.35));
  }
}
.astro-startseite #analysen .astro-plt-card-icon,
.astro-startseite #tools .astro-plt-card-icon.astro-app-ic,
.astro-startseite #analysen .astro-plt-card-icon.astro-app-ic {
  animation-name: astroPltIconSanft;
  animation-duration: 7s;
}
.astro-startseite #analysen .astro-plt-card:hover .astro-plt-card-icon,
.astro-startseite #tools .astro-plt-card:hover .astro-plt-card-icon.astro-app-ic,
.astro-startseite #analysen .astro-plt-card:hover .astro-plt-card-icon.astro-app-ic {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(232,201,106,0.45));
}