/* ===================================================================
   ASTROMANDALA · geburtshoroskop
   GENERIERT von build.sh - NICHT direkt bearbeiten.
   Quellen: _global/global.css + Module + geburtshoroskop/geburtshoroskop.css
   Diese Datei komplett in das GHL-Seiten-CSS von "geburtshoroskop" einfuegen.
   =================================================================== */

/* ==================================================================
   ASTROMANDALA · GLOBAL.CSS
   ------------------------------------------------------------------
   Design-System + Navbar + Footer + globale UI-Elemente.
   Gilt fuer JEDE Seite. Nicht seitenspezifisch erweitern -
   dafuer gibt es <seite>/<seite>.css.

   EINBINDUNG: Nicht direkt kopieren. Stattdessen
       ./build.sh <seite>
   ausfuehren und _build/<seite>.css in das GHL-Seiten-CSS einfuegen.
   ================================================================== */


/* =========================================
   0. LOADING OVERLAY (Der Vorhang)
   ========================================= */
#astro-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cosmic-blue);
    z-index: 999999;   /* muss ueber allem liegen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;

    /* Letzte Sicherung, ohne JavaScript: Der Vorhang wird normalerweise
       vom Skript gehoben, das auch einen eigenen Notaus mitbringt. Laeuft
       das Skript aber gar nicht erst an - Tippfehler, blockiertes
       JavaScript -, greift beides nicht und die Bestellseite bliebe
       dauerhaft verdeckt. Diese Regel loest davon unabhaengig aus. */
    animation: vorhangNotaus 0.6s ease-out 10s forwards;
}

@keyframes vorhangNotaus {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Klasse zum Ausblenden (wird vom Script gesetzt) */
.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Der Spinner */
.cosmic-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(var(--celestial-gold-rgb), 0.2);
    border-radius: 50%;
    border-top-color: var(--celestial-gold);
    animation: spin 1s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.3);
    margin-bottom: 20px;
}

/* Der Lade-Text */
.loader-text {
    color: var(--celestial-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    animation: pulse 1.5s infinite;
}

/* Hilfsklassen */
.astro-hidden-item {
    display: none !important;
}

body.is-loading .form-error, 
body.is-loading .alert-danger {
    display: none !important;
}

/* Animationen */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}



/* =========================================
   1. BASICS & VARIABLES
   ========================================= */
/* --- Schriften ------------------------------------------------------
   Bewusst KEIN Aufruf an fonts.googleapis.com.

   Ein @import von dort laedt die Schriften beim Seitenaufruf von einem
   Google-Server und uebertraegt dabei die IP-Adresse des Besuchers -
   nach DSGVO ohne Einwilligung nicht zulaessig, das LG Muenchen I hat
   dazu 2022 entschieden (Az. 3 O 17493/20).

   Playfair Display und Montserrat kommen deshalb von Go High Level
   selbst: dort "DSGVO-konforme Schriftarten" einschalten und beide
   Schriften in den Schrifteinstellungen auswaehlen. GHL liefert sie
   dann von der eigenen Domain aus.

   Falls eine der beiden dort nicht zur Verfuegung steht, ist der
   naechste Schritt, die Dateien in die GHL-Medien zu legen und hier
   per @font-face einzubinden - dann haengt gar nichts mehr an einer
   Plattformeinstellung.

   Die Angaben in font-family bleiben unveraendert; sie greifen auf das
   zu, was das Dokument bereitstellt, und fallen sonst auf serif bzw.
   sans-serif zurueck.
   -------------------------------------------------------------------- */

:root {
    /* --- Farben -------------------------------------------------
       Einzige Stelle im Projekt, an der Farbwerte stehen.
       Festgelegt in marke/04-visuell.md - dort auch die Begruendung
       je Rolle und die offenen Punkte. Neue Farbe? Erst dort
       aufnehmen, dann hier.

    Die Komponenten sind die Quelle, der Hex-Wert wird daraus
    abgeleitet. Grund: durchscheinende Farben brauchen `rgba()`, und
    dort liefert eine Hex-Variable die Zahlen nicht. So steht jede
    Farbe trotzdem nur an einer Stelle.
       ------------------------------------------------------------ */

    /* Kern */
    --celestial-gold-rgb:     244, 228, 166;    /* #F4E4A6 - die Marke */
    --celestial-gold:         rgb(var(--celestial-gold-rgb));
    --gold-warm-rgb:          246, 193, 119;    /* #F6C177 - Hover, Akzent */
    --gold-warm:              rgb(var(--gold-warm-rgb));
    --cosmic-blue-rgb:        26, 34, 56;       /* #1A2238 - der Grund */
    --cosmic-blue:            rgb(var(--cosmic-blue-rgb));
    --mystic-indigo-rgb:      58, 61, 92;       /* #3A3D5C - Verlaufsmitte im Body */
    --mystic-indigo:          rgb(var(--mystic-indigo-rgb));

    /* Flaechen */
    --night-blue-rgb:         2, 6, 20;         /* #020614 - Footer */
    --night-blue:             rgb(var(--night-blue-rgb));
    --cosmic-blue-lift-rgb:   35, 42, 69;       /* #232A45 - aufgehellte Flaeche, Modal */
    --cosmic-blue-lift:       rgb(var(--cosmic-blue-lift-rgb));

    /* Zeichen auf hellem Grund */
    --ink-rgb:                20, 23, 46;       /* #14172E */
    --ink:                    rgb(var(--ink-rgb));
    --ink-soft-rgb:           58, 63, 99;       /* #3A3F63 - dessen Hover */
    --ink-soft:               rgb(var(--ink-soft-rgb));

    /* Signal - keine Markenfarbe, sondern eine Zustandsfarbe.
       Nur fuer Loeschen und Fehler. Gegenueber dem Rot der alten
       Warenkorbseite (#FF6B6B) aufgehellt, damit es auf dem dunklen
       Grund die Kontrastschwelle sicher nimmt. */
    --signal-red-rgb:         255, 128, 128;   /* #FF8080 - Entfernen, Fehler */
    --signal-red:             rgb(var(--signal-red-rgb));

    /* Text */
    --cosmic-white-rgb:       252, 252, 252;    /* #FCFCFC - Fliesstext auf dunkel */
    --cosmic-white:           rgb(var(--cosmic-white-rgb));
    --pure-white-rgb:         255, 255, 255;    /* #FFFFFF - SVG-Fuellung, -Kontur */
    --pure-white:             rgb(var(--pure-white-rgb));
    --mist-rgb:               226, 232, 240;    /* #E2E8F0 - gedaempfter Text, FAQ */
    --mist:                   rgb(var(--mist-rgb));

    --header-height: 90px;

    /* --- Seitengrund ---------------------------------------------
       Der Sternenhimmel hinter allen Seiten. Nicht das Original
       einbinden: Als PNG wiegt es 4,7 MB und war damit mehr als die
       Haelfte der ganzen Seite - der Ladewert auf dem Telefon lag bei
       ueber 30 Sekunden. Ueber den Bildwandler von Go High Level
       (f_webp) sind es 107 KB bei gleicher Anmutung.

       Auf schmalen Schirmen reicht die halbe Kantenlaenge, siehe
       Medienabfrage weiter unten. Wer das Bild tauscht, aendert nur
       diese beiden Stellen.
       ------------------------------------------------------------- */
    --grund-sternenhimmel:
        url('https://images.leadconnectorhq.com/image/f_webp/q_80/r_2560/u_https://assets.cdn.filesafe.space/CCKw0wYuCkiZpChTluZ9/media/6981eb7b2dd9852a80afc409.png');

    /* --- Typografische Skala -------------------------------------
       Verankert am Fliesstext des Hero. Alle laufenden Texte nutzen
       --text-body, damit die Seite von oben bis unten gleich liest.
       Kleiner wird es nur dort, wo es inhaltlich etwas anderes ist:
       Chips, Bildunterzeilen, Versalien-Labels.
       ------------------------------------------------------------- */
    --text-body:  clamp(1.05rem, 1.6vw, 1.25rem);
    --text-meta:  clamp(0.88rem, 1.1vw, 1rem);
    --text-label: clamp(0.95rem, 1.2vw, 1.125rem);

    --text-badge: 0.78rem;   /* kleine Versalien-Schilder, z.B. Kursstufe */

    --title-card: clamp(1.25rem, 2vw, 1.55rem);
    --title-sub:  clamp(1.1rem, 1.8vw, 1.3rem);
}

body {
    font-family: 'Montserrat', sans-serif !important;
    margin: 0 !important;
    padding-top: 0 !important;
    /* Grundton, damit an Sektionsraendern und ueber dem Footer
       kein weisser Streifen durchblitzt. */
    background-color: var(--cosmic-blue);
}

/* Innenabstaende in die Breite einrechnen. Ohne dies wurde aus einem
   width:100vw plus 1.5rem Polsterung eine Box, die breiter ist als der
   Bildschirm - der Footer zog die Seite um 48px auf, das Mobile-Menue
   mass 365 statt 300 Pixel.
   Bewusst auf unsere Bloecke begrenzt, damit der GHL-Builder unberuehrt
   bleibt. */
.astro-page, .astro-page *,
.astro-footer, .astro-footer *,
.site-header, .site-header *,
.astro-pagenav, .astro-pagenav *,
.mobile-menu-overlay, .mobile-menu-overlay * {
    box-sizing: border-box;
}


.font-playfair {
    font-family: 'Playfair Display', serif !important;
}

/* Gradients */
.cosmic-gradient {
    background: linear-gradient(135deg, var(--cosmic-blue) 0%, var(--mystic-indigo) 50%, var(--cosmic-blue) 100%);
}

.gold-gradient {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
}


/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    background-color: rgba(var(--cosmic-blue-rgb), 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--celestial-gold-rgb), 0.15);
    transition: all 0.3s ease;
    height: var(--header-height);
}

@media (max-width: 767px) {
    .site-header {
        position: absolute !important;
        height: 70px !important;
        border-bottom: none !important;
    }

    .header-container {
        padding: 0.5rem 1rem !important;
    }
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Wort-Bild-Marke
   ------------------------------------------------------------------
   Werte aus dem Markenblatt (docs/Astromandala-Markenblatt.html).
   Die Farbe haengt an currentColor - eine Zeile faerbt die gesamte
   Marke um.

   ABWEICHUNG VOM MARKENBLATT: Dort heisst es "Keine Schatten, Verlaeufe,
   Glueheffekte oder Konturen. Das Zeichen ist flach." Der Hover unten
   traegt dennoch ein Leuchten - so gewuenscht, damit die Marke sich
   genauso verhaelt wie die Menuepunkte daneben. Wer zum Markenblatt
   zurueckkehren will, entfernt einfach die filter-Zeile. */
.am-logo {
    display: inline-block;
    line-height: 0;
    color: var(--celestial-gold);
    text-decoration: none !important;   /* GHL unterstreicht <a> sonst */
    transition: all 0.3s ease;
    flex-shrink: 1;
    min-width: 0;
}

/* Gleiche Anmutung wie .nav-link:hover - dort ueber text-shadow, hier
   ueber drop-shadow, weil ein SVG keinen Text-Schatten kennt. Die zwei
   Filterstufen entsprechen den zwei Schattenwerten der Menuepunkte. */
.am-logo:hover {
    color: var(--pure-white);
    filter: drop-shadow(0 0 8px rgba(var(--celestial-gold-rgb), 0.8))
            drop-shadow(0 0 15px rgba(var(--celestial-gold-rgb), 0.4));
}

.am-logo:focus-visible {
    outline: 2px solid var(--gold-warm);
    outline-offset: 6px;
    border-radius: 4px;
}

.am-logo svg {
    display: block;
    width: clamp(190px, 20vw, 260px);
    height: auto;
}

/* Schmale Schirme: Der Claim geht, das Zeichen bleibt gleich gross.
   Ersetzt das fruehere Herunterskalieren des ganzen Logos. */
@media (max-width: 640px) {
    .am-logo svg {
        width: 172px;
    }

    .am-logo .am-logo__claim {
        display: none;
    }
}

/* Im Footer etwas zurueckhaltender - dort steht der Claim als Text. */
.am-logo--footer svg {
    width: clamp(170px, 16vw, 210px);
}

/* Auf hellem Grund: <a class="am-logo am-logo--hell"> */
.am-logo--hell {
    color: var(--ink);
}

.am-logo--hell:hover {
    color: var(--ink-soft);
}

/* Desktop Nav */
.desktop-nav {
    display: none;
    gap: 2rem;
}

/* Bis hierher fehlten Basisregeln: Der CTA war deshalb auch mobil
   sichtbar, wo er neben Logo und Burger keinen Platz hat, und der
   Burger-Knopf erschien im grauen Browser-Standardstil. */
.desktop-cta {
    display: none;
}

.mobile-trigger {
    display: flex;
    align-items: center;
}

/* Burger-Knopf im Stil der uebrigen runden Bedienelemente */
.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.35);
    border-radius: 50%;
    background: rgba(var(--cosmic-blue-rgb), 0.6);
    backdrop-filter: blur(8px);
    color: var(--celestial-gold);
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease,
                box-shadow 0.3s ease, color 0.3s ease;
}

.icon-button:hover,
.icon-button:focus-visible {
    border-color: var(--celestial-gold);
    background: rgba(var(--cosmic-blue-rgb), 0.9);
    box-shadow: 0 0 16px rgba(var(--celestial-gold-rgb), 0.35);
    color: var(--pure-white);
}

.icon-button:focus-visible {
    outline: 2px solid var(--celestial-gold);
    outline-offset: 3px;
}

.icon-button svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
    }

    .desktop-cta {
        display: block;
    }

    .mobile-trigger {
        display: none;
    }
}

/* Auf schmalen Schirmen teilen sich Logo, Warenkorb und Burger die
   Zeile. Die Logo-Breite regelt die Marken-Regel weiter oben (Claim aus,
   Zeichen bleibt) - hier nur die Bedienelemente. */
@media (max-width: 767px) {
    .astro-cart-wrapper {
        width: 40px !important;
        height: 40px !important;
        margin-left: 0.75rem;
    }

    .astro-cart-icon {
        width: 21px;
        height: 21px;
    }

    .icon-button {
        width: 40px;
        height: 40px;
        margin-left: 0.5rem;
    }
}

@media (max-width: 400px) {
    .am-logo svg {
        width: 150px;
    }

    .astro-cart-wrapper {
        margin-left: 0.5rem;
    }
}

.nav-link {
    color: var(--celestial-gold) !important;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.3s ease;
}

.nav-link:hover, .nav-link.active-page {
    color: var(--pure-white) !important;
    text-shadow: 0 0 8px rgba(var(--celestial-gold-rgb), 0.8), 0 0 15px rgba(var(--celestial-gold-rgb), 0.4) !important;
    opacity: 1 !important;
}

/* CTA Button */
.cta-button {
    /* Wird als <a> UND als <button> verwendet - daher die Defaults explizit. */
    display: inline-block;
    text-align: center;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.5) !important;
    opacity: 1 !important;
}

/* Warenkorb-Zeile im Mobilmenue.
   Doppelte Klasse, weil die allgemeine .mobile-link-Regel weiter unten
   steht und bei gleicher Spezifitaet sonst ihr display:block gewinnt -
   der Zaehler rutschte dadurch als Block in die naechste Zeile. */
.mobile-link.mobile-cart-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.mobile-link.mobile-cart-link[hidden] {
    display: none;
}

.mobile-cart-link__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-cart-link__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sitzt am rechten Rand der Zeile */
    margin-left: auto;
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Im Mobilmenue fuellt der Knopf die Breite. Ein Aufskalieren wuerde ihn
   ueber die Panelraender schieben, wo er beschnitten wird - hier leuchtet
   er stattdessen auf. */
.mobile-cta-btn {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
}

.mobile-cta-btn:hover {
    transform: none !important;
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(var(--celestial-gold-rgb), 0.55) !important;
}

/* Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background-color: rgba(var(--cosmic-blue-rgb), 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-left: 1px solid rgba(var(--celestial-gold-rgb), 0.2);
    transform: translateX(100%);
    /* visibility mitschalten: sonst zaehlt das ausgeparkte Menue zur
       Seitenbreite und erzeugt einen horizontalen Scrollbalken.
       Verzoegert beim Schliessen, damit die Animation noch sichtbar ist. */
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
    z-index: 10000 !important;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.mobile-menu-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
    flex-grow: 1;
    overflow-y: auto;
}

.mobile-link {
    font-size: 1.3rem;
    color: var(--celestial-gold) !important;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    font-family: 'Montserrat', sans-serif !important;
}

.close-button {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--celestial-gold);
    cursor: pointer;
    padding: 10px;
    pointer-events: auto;
    z-index: 10001 !important;
}


/* =========================================
   3. MAGICAL CURSOR
   ========================================= */
html, body, a, button, input, textarea, select, [role="button"], .pointer {
    cursor: auto;
}

body.custom-cursor-enabled, body.custom-cursor-enabled * {
    cursor: none !important;
}

/* Solange der magische Zeiger NICHT im Dialog haengt, gibt der Dialog
   den gewohnten Systemzeiger zurueck - sonst waere dort gar keiner zu
   sehen. Das Umhaengen erledigt zeigerInsPopup() in footer.html und
   setzt dabei die Klasse .hat-zeiger. */
body.custom-cursor-enabled .astro-modal:not(.hat-zeiger),
body.custom-cursor-enabled .astro-modal:not(.hat-zeiger) * {
    cursor: auto !important;
}

body.custom-cursor-enabled .astro-modal:not(.hat-zeiger) a,
body.custom-cursor-enabled .astro-modal:not(.hat-zeiger) button,
body.custom-cursor-enabled .astro-modal:not(.hat-zeiger) [role="button"] {
    cursor: pointer !important;
}

/* Im Dialog liegende Zeiger-Ebene: Sie darf die Bedienung nicht stoeren. */
.astro-modal > #magical-cursor-container {
    pointer-events: none;
}

#magical-cursor-container {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483647 !important;
    overflow: hidden;
}

body.custom-cursor-enabled #magical-cursor-container {
    display: block;
}

#cursor-glow {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--celestial-gold-rgb), 0.4) 0%, rgba(var(--celestial-gold-rgb), 0.2) 40%, transparent 70%);
    filter: blur(8px);
    transition: none !important;
    will-change: left, top;
}

#cursor-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cursor-line {
    stroke: rgba(var(--celestial-gold-rgb), 0.3);
    stroke-width: 1;
    fill: none;
}

.cursor-particle {
    position: absolute;
    pointer-events: none;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity, top;
}

.sparkle-main {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}

.sparkle-cross-v {
    position: absolute;
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, currentColor, transparent);
}

.sparkle-cross-h {
    position: absolute;
    width: 16px;
    height: 2px;
    background: linear-gradient(to right, transparent, currentColor, transparent);
}
/* =========================================
   4. METATRON GLOW
   =========================================
   Klassenbasiert - keine GHL-Element-IDs mehr noetig.
   Verwendung im HTML:  <img class="astro-metatron" ...>
   ========================================= */
/* Kein !important: Das Markup gehoert uns, es gibt keine GHL-Styles mehr,
   gegen die angekaempft werden muesste. Wichtiger noch - die frueheren
   !important auf position und transform haben jede Positionierung von
   aussen blockiert. Wer das Glyph platzieren will, umgibt es mit einem
   eigenen Wrapper; transform bleibt allein der Rotation vorbehalten. */
.astro-metatron {
    position: relative;
    overflow: visible;
    z-index: 1;
    animation: spin-slow-right 60s linear infinite;
    transform-origin: center center;
}

.astro-metatron::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(var(--celestial-gold-rgb), 0.4) 0%, rgba(var(--gold-warm-rgb), 0.2) 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(40px);
    transform: scale(1.5);
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .astro-metatron {
        animation: none;
    }
}

@keyframes spin-slow-right {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   5. UI ELEMENTE (Subheadings, Boxes, Icons)
   ========================================= */


/* Sub-Headings (Standard: Links) */
.c-sub-heading {
    /* Layout: fit-content ist der Schlüssel für korrekte Box-Größe */
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 6px !important;
    /* Styling */
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.5) !important;
    border-radius: 6px !important;
    background-color: rgba(var(--cosmic-blue-rgb), 0.2) !important;
    backdrop-filter: blur(4px);
    /* Text */
    color: var(--celestial-gold) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Helper für Zentrierung (Der "Smart Fix") */
/* 1. .c-sub-heading.center-me -> Falls die Klasse direkt auf dem Rahmen liegt */
/* 2. .c-sub-heading:has(.center-me) -> Falls die Klasse (wie bei dir) im Inneren liegt */
.c-sub-heading.center-me,
.c-sub-heading:has(.center-me) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Value Boxes (Grid Korrektur) */
.value-box .grid-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.value-box .grid-content .grid-column {
    width: 23.5% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 1024px) {
    .value-box .grid-content .grid-column {
        width: 48% !important;
        margin-bottom: 3% !important;
    }
}

@media screen and (max-width: 767px) {
    .value-box .grid-content .grid-column {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}



/* Cosmic Hover Card Effect */
.value-box .grid-column.grid-column-with-bg, 
.cosmic-hover-card {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: visible !important;
    z-index: 1;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.1) !important;
}

.value-box .grid-column.grid-column-with-bg:hover, 
.cosmic-hover-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px -10px rgba(var(--cosmic-blue-rgb), 0.5), 0 0 30px rgba(var(--celestial-gold-rgb), 0.15) !important;
    border-color: rgba(var(--celestial-gold-rgb), 0.3) !important;
    z-index: 10;
}
/* Inner Glow Animation */
.value-box .grid-column.grid-column-with-bg:hover .glow-effect,
.cosmic-hover-card:hover .glow-effect {
    transform: scale(1.2) !important;
    opacity: 0.8 !important;
    filter: blur(14px) !important;
    background-color: rgba(var(--celestial-gold-rgb), 0.5) !important;
}

.value-box .grid-column.grid-column-with-bg:hover .icon-wrapper,
.cosmic-hover-card:hover .icon-wrapper {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.value-box .grid-column.grid-column-with-bg:hover .icon-svg,
.cosmic-hover-card:hover .icon-svg {
    color: var(--cosmic-blue) !important;
    filter: brightness(1.2);
}

/* --- ASTROMANDALA SOCIAL ICONS --- */

.astro-social-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
 /* Oder flex-start, wenn linksbündig */
    gap: 20px;
 /* Abstand zwischen den Icons */
    padding: 10px 0;
}

.astro-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
  /* Größe des Kreises */
    height: 48px;
    border-radius: 50%;
    /* Hintergrund: Dunkles Cosmic Blue mit leichter Transparenz */
    background: rgba(var(--cosmic-blue-rgb), 0.4);
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.2);
 /* Feiner Goldrand */
    /* Animation für Smoothness */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none !important;
    position: relative;
    overflow: visible;
}

/* Das SVG Icon selbst */
.astro-social-icon svg {
    width: 24px;
 /* Größe des Symbols */
    height: 24px;
    fill: var(--celestial-gold);
 /* Celestial Gold */
    transition: all 0.3s ease;
}

/* --- HOVER EFFEKT (Der "Magical Touch") --- */

.astro-social-icon:hover {
    transform: scale(1.15) translateY(-3px);
 /* Wachsen & Schweben */
    /* Hintergrund wird goldener (Gradient) */
    background: linear-gradient(135deg, rgba(var(--cosmic-blue-rgb), 0.9), rgba(var(--mystic-indigo-rgb), 0.9));
    border-color: var(--gold-warm);
 /* Rand wird helleres Gold */
    /* Glow-Effekt außen */
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.4), 
                0 0 10px rgba(var(--celestial-gold-rgb), 0.2);
}

.astro-social-icon:hover svg {
    fill: var(--pure-white);
 /* Icon wird weiß für maximalen Kontrast */
    filter: drop-shadow(0 0 5px rgba(var(--celestial-gold-rgb), 0.8));
 /* Icon selbst leuchtet */
}







/* =========================================
   6. FAQ ACCORDION (GHL 2.0 UPDATE)
   ========================================= */
.astro-faq-accordion .hl-faq-child {
    background: rgba(var(--cosmic-blue-rgb), 0.4) !important;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.15) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.astro-faq-accordion .hl-faq-child:hover {
    background: rgba(var(--cosmic-blue-rgb), 0.6) !important;
    border-color: rgba(var(--celestial-gold-rgb), 0.4) !important;
    transform: translateY(-2px);
}

.astro-faq-accordion .hl-faq-child-heading {
    background: transparent !important;
    padding: 20px 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
}

.astro-faq-accordion .hl-faq-child-heading h4, .astro-faq-accordion .hl-faq-child-heading span {
    color: var(--celestial-gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-align: left !important;
}
/* Icon links */
.astro-faq-accordion .hl-faq-child-heading-icon {
    color: var(--celestial-gold) !important;
    font-size: 1rem !important;
    opacity: 0.8;
    order: -1 !important;
    margin: 0 !important;
    transition: transform 0.3s ease !important;
}

.astro-faq-accordion .hl-faq-child[aria-expanded="true"] .hl-faq-child-heading-icon {
    color: var(--gold-warm) !important;
    transform: rotate(180deg);
}
/* Inhalt */
.astro-faq-accordion .hl-faq-child-panel {
    background: transparent !important;
    border-top: 1px solid rgba(var(--celestial-gold-rgb), 0.1) !important;
}

.astro-faq-accordion .hl-faq-child-item-text p {
    color: var(--mist) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 20px 25px !important;
    padding-left: 60px !important;
    margin: 0 !important;
}

.astro-faq-accordion .expand-collapse-all-button {
    background: transparent !important;
    color: var(--celestial-gold) !important;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.3) !important;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
}


/* =========================================
   7. LIST BULLET POINTS
   ========================================= */
.note-editable.panel-body li, .text-widget-content li, .post-description p {
    color: var(--celestial-gold) !important;
}

.note-editable.panel-body li span, .text-widget-content li span, .note-editable.panel-body li p {
    color: rgb(var(--cosmic-white-rgb)) !important;
}

ul li::marker {
    color: var(--celestial-gold) !important;
}

.fa-check, .fa-circle {
    color: var(--celestial-gold) !important;
}


/* =========================================
   8. KONTAKT FORMULAR (Full Restore)
   ========================================= */

/* 1. Container & Layout Reset (Wichtig für Transparenz) */
.astro-contact-form,
.astro-contact-form .ghl-form-wrap,
.astro-contact-form #_builder-form,
.astro-contact-form .form-builder--wrap {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Labels & Sternchen */
.astro-contact-form label {
    font-family: "Montserrat", sans-serif !important;
    color: var(--celestial-gold) !important;
 /* Celestial Gold */
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
}

.astro-contact-form label span {
    color: var(--gold-warm) !important;
}

/* 3. Eingabefelder (Inputs & Textarea) */
.astro-contact-form .form-control {
    background-color: rgba(var(--cosmic-blue-rgb), 0.6) !important;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.3) !important;
    color: var(--celestial-gold) !important;
    border-radius: 5px !important;
    font-family: "Montserrat", sans-serif !important;
    padding: 12px 15px !important;
    min-height: 56px !important;
 /* Bessere Klickbarkeit */
}

/* Placeholder Text */
.astro-contact-form ::placeholder {
    color: rgba(var(--celestial-gold-rgb), 0.5) !important;
    font-style: italic;
    opacity: 1 !important;
}

/* Focus State (Leuchten beim Reinklicken) */
.astro-contact-form .form-control:focus {
    border-color: var(--celestial-gold) !important;
    background-color: rgba(var(--cosmic-blue-rgb), 0.9) !important;
    box-shadow: 0 0 15px rgba(var(--celestial-gold-rgb), 0.2) !important;
    outline: none !important;
}

/* Chrome Autofill Fix (Blauen Hintergrund verhindern) */
.astro-contact-form input:-webkit-autofill,
.astro-contact-form input:-webkit-autofill:hover,
.astro-contact-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--cosmic-blue) inset !important;
    -webkit-text-fill-color: var(--celestial-gold) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* 4. Der Button (Mit Icon & Animation) */
.astro-contact-form .form-builder--btn-submit {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.astro-contact-form .form-builder--btn-submit button.button-element {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%) !important;
    border: none !important;
    /* Platz rechts für das Icon lassen */
    padding: 12px 60px 12px 30px !important;
    border-radius: 6px !important;
    width: auto !important;
    min-width: 180px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(var(--gold-warm-rgb), 0.2) !important;
}

/* Text im Button */
.astro-contact-form .form-builder--btn-submit button.button-element * {
    color: var(--cosmic-blue) !important;
 /* Cosmic Blue */
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Das Pfeil-Icon (via CSS eingefügt) */
.astro-contact-form .form-builder--btn-submit button.button-element::after {
    content: "";
    position: absolute;
    right: 20px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2238' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m9 18 6-6-6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

/* Hover Effekte */
.astro-contact-form .form-builder--btn-submit button.button-element:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 25px rgba(var(--celestial-gold-rgb), 0.6) !important;
    background: linear-gradient(135deg, var(--gold-warm) 0%, var(--celestial-gold) 100%) !important;
}

/* Pfeil bewegt sich beim Hover */
.astro-contact-form .form-builder--btn-submit button.button-element:hover::after {
    transform: translateY(-50%) translateX(5px);
}

/* Mobile Anpassung */
@media (max-width: 480px) {
    .astro-contact-form .form-builder--btn-submit button.button-element {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* =========================================
   9. SHOPPING CART ICON
   ========================================= */
.astro-cart-wrapper {
    position: relative;
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    /* Gleicher Ruhezustand wie der Burger-Knopf: Ohne sichtbaren Rahmen
       stand hier ein nacktes Symbol neben einem gerahmten - das wirkte,
       als sei es versehentlich dort gelandet. */
    background: rgba(var(--cosmic-blue-rgb), 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.35);
    /* Gezielt statt "all": animiert werden nur die Eigenschaften, die sich
       beim Ein- und Ausblenden wirklich aendern. "all" hat hier zusaetzlich
       jede Layout-Eigenschaft mitanimiert und sich bei schnellen Wechseln
       zu ueberlagernden Transitions gestapelt. */
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.3s ease,
                transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    z-index: 10001;
}

.astro-cart-wrapper:not(.cart-hidden):hover {
    transform: scale(1.15) translateY(-3px);
    background: linear-gradient(135deg, rgba(var(--cosmic-blue-rgb), 0.9), rgba(var(--mystic-indigo-rgb), 0.9));
    border: 1px solid var(--gold-warm);
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.4), 0 0 10px rgba(var(--celestial-gold-rgb), 0.2);
}

.astro-cart-wrapper:hover .astro-cart-icon {
    stroke: var(--pure-white);
    filter: drop-shadow(0 0 5px rgba(var(--celestial-gold-rgb), 0.8));
}

.astro-cart-wrapper.cart-hidden {
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    margin: 0;
    pointer-events: none;
    transform: scale(0);
    /* Rahmenbreite beibehalten und nur die Farbe zuruecknehmen: Ein
       "border: none" setzt die Breite auf 0, und beim Wiedereinblenden
       animiert die Farbe aus dem geerbten Link-Blau heraus - man sah
       einen blauen Ring aufblitzen. */
    border-color: transparent;
    background: none;
    backdrop-filter: none;
    padding: 0;
}

/* Bei geoeffnetem Mobilmenue tritt der Kopfzeilen-Warenkorb ab: Er hat
   einen hoeheren z-index als das Menuepanel und lag sonst sichtbar
   darueber. Erreichbar bleibt der Korb ueber den Eintrag im Menue. */
body.astro-menu-open .astro-cart-wrapper {
    opacity: 0;
    transform: scale(0.75);
    pointer-events: none;
}

.astro-cart-icon {
    width: 24px;
    height: 24px;
    color: var(--celestial-gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.astro-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 2;
}

.cart-pop-animation {
    animation: cartPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================
   10. CUSTOM ICONS & ANIMATIONS
   ========================================= */
.icon-container {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.icon-wrapper {
    position: relative;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gradient-gold {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
}

.icon-svg {
    color: var(--cosmic-blue);
    width: 2rem;
    height: 2rem;
}

.glow-effect {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background-color: rgba(var(--celestial-gold-rgb), 0.4);
    filter: blur(12px);
    z-index: 1;
}

@keyframes float-icon {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-float {
    animation: float-icon 6s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse-glow 3s ease-in-out infinite;
}


/* =========================================
   11. PRODUCT ACTIONS (Buttons)
   ========================================= */
.astro-product-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

.astro-btn-cart {
    background: transparent;
    border: 1px solid var(--celestial-gold);
    color: var(--celestial-gold);
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.astro-btn-cart:hover {
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.3);
    background: rgba(var(--celestial-gold-rgb), 0.05);
    transform: translateY(-2px);
}

.astro-btn-cart.burning {
    animation: astroBurn 0.5s forwards;
    border-color: white;
    color: white;
}

@keyframes astroBurn {
    0% {
        box-shadow: 0 0 0 rgba(var(--pure-white-rgb), 0);
    }

    50% {
        box-shadow: 0 0 40px rgba(var(--pure-white-rgb), 0.8), inset 0 0 20px rgba(var(--pure-white-rgb), 0.5);
        background: white;
        color: var(--cosmic-blue);
    }

    100% {
        box-shadow: 0 0 0 rgba(var(--pure-white-rgb), 0);
        opacity: 0.8;
    }
}

.astro-btn-cart.in-cart {
    background: transparent;
    border-color: var(--celestial-gold);
    color: var(--celestial-gold);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.astro-btn-buy {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.astro-btn-buy:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(var(--celestial-gold-rgb), 0.5);
}

/* --- 5. Der Direkte Komet (Magical Cursor Style) --- */
.flying-comet {
    position: fixed;
    z-index: 2147483647;
 /* Höchster Layer */
    pointer-events: none;
    /* Identische Größe zum Cursor */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Der Magische Look: Radial Gradient + Blur */
    background: radial-gradient(circle, rgba(var(--celestial-gold-rgb), 0.9) 0%, rgba(var(--celestial-gold-rgb), 0.4) 50%, transparent 80%);
    filter: blur(5px);
    /* Zusätzlicher Schein */
    box-shadow: 0 0 20px 5px rgba(var(--gold-warm-rgb), 0.5);
    /* Performance Optimierung */
    will-change: transform;
    /* Zentrierung für korrekte Koordinaten */
    transform-origin: center center;
    margin-top: -16px;
  /* Hälfte der Höhe nach oben korrigieren */
    margin-left: -16px;
 /* Hälfte der Breite nach links korrigieren */
}


/* =========================================
   12. COSMIC DIVIDER
   ========================================= */
.cosmic-divider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

.cosmic-divider-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cosmic-line {
    width: 6rem;
    height: 1px;
}

.line-left {
    background: linear-gradient(to right, transparent, var(--celestial-gold));
}

.line-right {
    background: linear-gradient(to left, transparent, var(--celestial-gold));
}

.cosmic-center-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cosmic-orb {
    width: 2rem;
    height: 2rem;
    background-color: var(--celestial-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.cosmic-outer-ring {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.3);
    border-radius: 50%;
    z-index: 1;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}




/* =========================================
   13. FOOTER
   ========================================= */
.astro-footer {
    position: relative;
    z-index: 2;
    /* Solide Grundfarbe UNTER dem Verlauf - der Footer steht ausserhalb
       von .astro-page und hat daher kein Seiten-Hintergrundbild. */
    background-color: var(--night-blue);
    background-image: linear-gradient(180deg, var(--cosmic-blue) 0%, rgba(var(--night-blue-rgb), 0.9) 35%, var(--night-blue) 100%);
    border-top: 1px solid rgba(var(--celestial-gold-rgb), 0.15);
    color: var(--cosmic-white);
    font-family: 'Montserrat', sans-serif;
    padding: 4rem 1.5rem 0;
}

.astro-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 3rem;
    align-items: start;
}

/* --- Marken-Spalte --- */
.astro-footer-brand .am-logo {
    margin-bottom: 1rem;
}

.astro-footer-claim {
    margin: 0 0 1.5rem;
    color: rgba(var(--cosmic-white-rgb), 0.6);
    font-size: var(--text-body);
    letter-spacing: 0.03em;
}

/* --- Link-Spalten --- */
.astro-footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
}

.astro-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.astro-footer-heading {
    margin: 0 0 0.4rem;
    font-family: 'Playfair Display', serif;
    font-size: var(--title-sub);
    font-weight: 600;
    color: var(--celestial-gold);
    letter-spacing: 0.03em;
}

.astro-footer-col a {
    color: rgba(var(--cosmic-white-rgb), 0.75);
    text-decoration: none;
    font-size: var(--text-meta);
    width: fit-content;
    transition: color 0.3s ease, transform 0.3s ease;
}

.astro-footer-col a:hover {
    color: var(--celestial-gold);
    transform: translateX(3px);
}

/* --- Untere Leiste --- */
.astro-footer-bottom {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid rgba(var(--celestial-gold-rgb), 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.astro-footer-bottom p {
    margin: 0;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.45);
}

.astro-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 0.9rem;
}

.astro-footer-legal a {
    position: relative;
    color: rgba(var(--cosmic-white-rgb), 0.6);
    text-decoration: none;
    font-size: var(--text-meta);
    transition: color 0.3s ease;
}

.astro-footer-legal a:hover {
    color: var(--celestial-gold);
    text-decoration: underline;
}

/* Trennstrich zwischen den Rechtstexten, ausser vor dem ersten */
.astro-footer-legal a + a::before {
    content: '|';
    position: absolute;
    left: -0.55rem;
    color: rgba(var(--cosmic-white-rgb), 0.25);
    text-decoration: none;
}

.astro-footer-note {
    font-style: italic;
}

@media (max-width: 860px) {
    .astro-footer {
        padding-top: 3rem;
    }

    .astro-footer-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .astro-footer-nav {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}


/* =========================================
   14. LAYOUT-BAUSTEINE
   =========================================
   Grundgeruest fuer eigene Seiten-HTML. Ersetzt die frueher
   noetigen GHL-Row/Column-Konstrukte.
   ========================================= */

/* Bricht aus dem GHL-Container auf volle Viewport-Breite aus. */
.astro-page {
    position: relative;
    /* --vw ist die Viewport-Breite OHNE Scrollleiste (gesetzt in
       navbar.html). Die Einheit vw schliesst die Leiste mit ein und
       zieht die Seite sonst um deren Breite seitlich auf. */
    width: var(--vw, 100vw);
    margin-left: calc(50% - var(--vw, 100vw) / 2);
    color: var(--cosmic-white);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.7;
    overflow-x: clip;
}

/* Ueber dem Firmament, das fest dahinterliegt. */
.astro-section {
    position: relative;
    z-index: 1;
    padding: 5rem 1.5rem;
}

/* Ankersprungziele muessen unter dem fixierten Header landen.
   Die Pfeil-Navigation rechnet den Versatz selbst heraus (footer.html),
   ein nativer Sprung ueber href="#..." aber nicht - der Scroll-Hinweis
   im Hero und jeder Verweis auf eine Sektion landen sonst mit dem
   oberen Rand hinter der Kopfzeile. */
.astro-page > section[id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.astro-section--tight {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.astro-container {
    max-width: 1200px;
    margin: 0 auto;
}

.astro-container--narrow {
    max-width: 780px;
}

/* --- Typografie --- */
/* Wie im Ursprungsentwurf: kraeftiger weisser Text im goldenen Rahmen.
   Die vorherige Fassung in gold, klein und gesperrt ging neben den
   grossen Ueberschriften unter. */
.astro-eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 8px 14px;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.5);
    border-radius: 6px;
    background-color: rgba(var(--cosmic-blue-rgb), 0.35);
    backdrop-filter: blur(4px);
    color: var(--cosmic-white);
    font-size: var(--text-label);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.astro-title {
    margin: 0 0 1.25rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cosmic-white);
}

.astro-title--hero {
    font-size: clamp(2.3rem, 6vw, 4rem);
}

/* Fuer Ueberschriften unterhalb der Seitenueberschrift - etwa der
   Hinweis im leeren Warenkorb. Nutzt dieselbe Stufe wie die
   Karten-Unterzeilen, damit die Seite nur eine Skala kennt. */
.astro-title--sub {
    font-size: var(--title-sub);
}

.astro-subtitle {
    margin: 0 0 0.9rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 600;
    color: var(--celestial-gold);
}

.astro-lead {
    margin: 0 0 1.5rem;
    font-size: var(--text-body);
    color: rgba(var(--cosmic-white-rgb), 0.8);
}

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

.astro-center .astro-lead {
    margin-left: auto;
    margin-right: auto;
    max-width: 70ch;
}

/* --- Raster --- */
.astro-grid {
    display: grid;
    gap: 1.75rem;
}

.astro-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.astro-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.astro-grid--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* --- Karte --- */
.astro-card {
    position: relative;
    padding: 2rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.2);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(var(--cosmic-blue-rgb), 0.75), rgba(var(--mystic-indigo-rgb), 0.45));
    backdrop-filter: blur(6px);
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.astro-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--celestial-gold-rgb), 0.55);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(var(--celestial-gold-rgb), 0.18);
}

.astro-card__title {
    margin: 0 0 0.6rem;
    font-family: 'Playfair Display', serif;
    font-size: var(--title-card);
    font-weight: 600;
    color: var(--celestial-gold);
}

.astro-card__text {
    margin: 0;
    font-size: var(--text-body);
    color: rgba(var(--cosmic-white-rgb), 0.78);
}

/* --- Icon im Kreis --- */
.astro-icon-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
    flex-shrink: 0;
    /* Grundleuchten - dezent, damit die Icons nicht flach wirken */
    box-shadow: 0 0 18px rgba(var(--celestial-gold-rgb), 0.25);
    animation: iconFloat 6s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.4s ease;
}

/* Weicher Lichthof hinter dem Icon, der beim Hover aufblueht */
.astro-icon-circle::before {
    content: '';
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(var(--celestial-gold-rgb), 0.45) 0%,
                rgba(var(--gold-warm-rgb), 0.2) 45%,
                transparent 70%);
    filter: blur(10px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
    animation: iconPulse 4s ease-in-out infinite;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.astro-icon-circle svg {
    position: relative;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover: das gesamte Karten-Element loest den Effekt aus, nicht nur
   das Icon selbst - so reagiert die Karte als Ganzes. */
.astro-card:hover .astro-icon-circle,
.astro-stat:hover .astro-icon-circle,
.astro-icon-circle:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 0 32px rgba(var(--celestial-gold-rgb), 0.65);
}

.astro-card:hover .astro-icon-circle::before,
.astro-stat:hover .astro-icon-circle::before,
.astro-icon-circle:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.astro-card:hover .astro-icon-circle svg,
.astro-stat:hover .astro-icon-circle svg,
.astro-icon-circle:hover svg {
    transform: rotate(-8deg) scale(1.08);
}

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

@keyframes iconPulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.8;  transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .astro-icon-circle,
    .astro-icon-circle::before {
        animation: none;
    }
}

/* --- Buttons --- */
.astro-btn {
    display: inline-block;
    padding: 0.9rem 2.1rem;
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.astro-btn--primary {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    color: var(--cosmic-blue);
    box-shadow: 0 4px 15px rgba(var(--gold-warm-rgb), 0.2);
}

.astro-btn--primary:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(var(--celestial-gold-rgb), 0.6);
}

.astro-btn--ghost {
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.5);
    background: transparent;
    color: var(--celestial-gold);
}

.astro-btn--ghost:hover {
    border-color: var(--celestial-gold);
    background: rgba(var(--celestial-gold-rgb), 0.1);
}

@media (max-width: 640px) {
    .astro-section {
        padding: 3.5rem 1.25rem;
    }

    .astro-card {
        padding: 1.5rem;
    }
}


/* =========================================
   15. GHL-INTEGRATION
   =========================================
   Go High Level verschachtelt jeden Custom-Code-Block in mehrere
   Wrapper mit eigenen Innenabstaenden und begrenzter Breite. Ohne
   diese Korrekturen sitzt der Inhalt eingerueckt unter der fixierten
   Navbar und der Seitenhintergrund blitzt weiss durch.

   :has() trifft gezielt nur die Wrapper, die unsere Bloecke enthalten -
   der uebrige Builder bleibt unangetastet.
   ========================================= */

/* GHL-Seitenhintergrund: standardmaessig weiss. */
.bgCover,
.bgCover.bg-fixed {
    background-color: var(--cosmic-blue) !important;
}

/* Innenabstaende der Wrapper-Kette um unsere Bloecke entfernen. */
:is(.fullSection, .c-section, .c-column, .c-wrapper, .c-custom-code,
    .custom-code-container, .row-align-center, .inner, .vertical):has(.astro-page),
:is(.fullSection, .c-section, .c-column, .c-wrapper, .c-custom-code,
    .custom-code-container, .row-align-center, .inner, .vertical):has(.astro-footer) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: none !important;
    background: transparent !important;
}

/* Der GHL-Block, aus dem der Header herausgeloest wurde, bleibt leer
   zurueck - ohne dies stuende ein toter Streifen ueber dem Hero.
   Die Markierung setzt detachHeader() in navbar.html. */
.astro-emptied-block {
    display: none !important;
}

/* Der Footer steht in einem eigenen Block und braucht denselben
   Ausbruch auf volle Breite wie .astro-page. */
.astro-footer {
    width: var(--vw, 100vw);
    margin-left: calc(50% - var(--vw, 100vw) / 2);
}


/* =========================================
   16. SEITEN-NAVIGATION (unten rechts)
   =========================================
   Drei Schaltflaechen: vorherige Sektion, naechste Sektion, nach oben.
   Erspart langes Scrollen auf der langen Startseite.
   ========================================= */
.astro-pagenav {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.astro-pagenav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.35);
    border-radius: 50%;
    background: rgba(var(--cosmic-blue-rgb), 0.75);
    backdrop-filter: blur(8px);
    color: var(--celestial-gold);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.3s ease, box-shadow 0.3s ease,
                background 0.3s ease, opacity 0.3s ease;
}

.astro-pagenav__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.astro-pagenav__btn:hover:not(:disabled) {
    transform: scale(1.12);
    border-color: var(--celestial-gold);
    background: linear-gradient(135deg, rgba(var(--cosmic-blue-rgb), 0.95), rgba(var(--mystic-indigo-rgb), 0.95));
    box-shadow: 0 0 18px rgba(var(--celestial-gold-rgb), 0.45);
}

.astro-pagenav__btn:focus-visible {
    outline: 2px solid var(--celestial-gold);
    outline-offset: 3px;
}

/* Am Anfang bzw. Ende der Seite ist eine Richtung sinnlos. */
.astro-pagenav__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* "Nach oben" erscheint erst, wenn es etwas zu scrollen gibt. */
.astro-pagenav__btn--top {
    background: linear-gradient(135deg, var(--celestial-gold) 0%, var(--gold-warm) 100%);
    border-color: transparent;
    color: var(--cosmic-blue);
}

/* Der Nach-oben-Knopf ist als einziger goldgefuellt und traegt ein
   dunkles Symbol. Die allgemeine Hover-Regel darueber tauscht den Grund
   gegen Dunkelblau - damit verschwand das Symbol darin. Er behaelt
   deshalb seine Fuellung und leuchtet nur staerker. */
.astro-pagenav__btn--top:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-warm) 0%, var(--celestial-gold) 100%);
    border-color: transparent;
    color: var(--cosmic-blue);
    box-shadow: 0 0 24px rgba(var(--celestial-gold-rgb), 0.7);
}

.astro-pagenav:not(.is-scrolled) .astro-pagenav__btn--top {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

@media (max-width: 640px) {
    .astro-pagenav {
        right: 0.85rem;
        bottom: 0.85rem;
        gap: 0.45rem;
    }

    .astro-pagenav__btn {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .astro-pagenav__btn {
        transition: none;
    }
}


/* =========================================
   17. FORMULARE & POPUP
   =========================================
   Die Formulare selbst sind GHL-Widgets in einem iframe - deren
   Innenleben laesst sich von aussen nicht gestalten. Die Farben
   dafuer stehen im GHL-Formular-Editor. Hier wird nur der Rahmen
   gesetzt, in dem sie sitzen.
   ========================================= */

/* --- Eingebettetes Formular --- */
.astro-form-embed {
    width: 100%;
    border: none;
    overflow: hidden;
    background: transparent;
    /* Vorgabe, bis form_embed.js die tatsaechliche Hoehe meldet */
    min-height: 220px;
}

.astro-form-embed--kontakt {
    min-height: 540px;
}


/* --- Popup --- */
.astro-modal {
    width: min(92vw, 480px);
    padding: 2.5rem 2rem 2rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.35);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--cosmic-blue) 0%, var(--cosmic-blue-lift) 100%);
    color: var(--cosmic-white);
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--celestial-gold-rgb), 0.12);
    overflow: visible;
}

.astro-modal::backdrop {
    background: rgba(var(--night-blue-rgb), 0.75);
    backdrop-filter: blur(4px);
}

.astro-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.25);
    border-radius: 50%;
    background: rgba(var(--night-blue-rgb), 0.4);
    color: var(--celestial-gold);
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.astro-modal__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.astro-modal__close:hover {
    border-color: var(--celestial-gold);
    background: rgba(var(--celestial-gold-rgb), 0.12);
    color: var(--pure-white);
}

.astro-modal__title {
    margin: 0 0 0.6rem;
    padding-right: 2.5rem;
    font-family: 'Playfair Display', serif;
    font-size: var(--title-card);
    font-weight: 600;
    color: var(--celestial-gold);
}

.astro-modal__text {
    margin: 0 0 1.25rem;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.75);
}

.astro-modal__text[hidden] {
    display: none;
}

/* Feste Hoehe statt Nachjustieren: Im Popup laeuft form_embed.js
   bewusst nicht mit (es wuerde das iframe umbauen und verstecken),
   also steht die Hoehe hier. Sie reicht fuer die Warteliste-Formulare
   samt Danke-Meldung. */
/* GHLs Einbettungsskript greift auch hier zu und verhaelt sich dabei
   nicht verlaesslich: mal setzt es das iframe sichtbar mit passender
   Hoehe, mal schiebt es das Formular per
   "visibility:hidden; left:-9999px" aus dem Bild. Genau daher kam das
   Aufblitzen und Flackern.
   Wir setzen deshalb feste Werte durch - !important schlaegt die
   Inline-Angaben des Skripts, das dafuer keine Prioritaet vergibt. */
.astro-modal__form {
    position: relative;
    height: 270px;
}

.astro-modal__form iframe {
    width: 100% !important;
    height: 270px !important;
    border: none;
    background: transparent;
    position: relative !important;
    left: auto !important;
    pointer-events: auto !important;
    /* Bleibt verborgen, bis das Formular geladen ist */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}

.astro-modal__form.is-ready iframe {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ladeanzeige - nutzt den vorhandenen .cosmic-spinner aus Sektion 0 */
.astro-modal__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.25s ease;
}

.astro-modal__spinner .cosmic-spinner {
    margin-bottom: 0;
}

.astro-modal__spinner .loader-text {
    font-size: var(--text-meta);
    animation: none;
    opacity: 0.75;
}

/* Ist das Formular da, tritt die Ladeanzeige ab. */
.astro-modal__form.is-ready .astro-modal__spinner {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 480px) {
    .astro-modal {
        padding: 2.25rem 1.25rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .astro-modal__close {
        transition: none;
    }
}


/* =========================================
   18. SEITEN-BAUSTEINE
   =========================================
   Aufbauten, die mehr als eine Seite braucht: Hero mit Glyph und
   belebtem Himmel, Scroll-Hinweis, Quiz-Box, FAQ-Aufklapper,
   Kontaktangaben und Newsletter.

   Standen zunaechst in home.css - beim Bau der zweiten Seite zeigte
   sich, dass sie dort nicht hingehoeren: Der Hero blieb einspaltig,
   weil die Grid-Regel fehlte.
   ========================================= */
/* =========================================
   HERO
   ========================================= */
.astro-hero {
    display: flex;
    /* Oben ausgerichtet, nicht mittig. Mittig haengt der Abstand zur
       Kopfzeile an der Hoehe des Inhalts: Die Startseite begann 266px
       darunter, die Beratungsseite 193px, Warenkorb und Checkout 32px -
       auf jeder Seite ein anderer Auftakt. So beginnt der Inhalt
       ueberall gleich weit unter der Kopfzeile. */
    align-items: flex-start;
    min-height: 100vh;
    /* Der Header liegt fixiert darueber - der Inhalt beginnt darunter,
       mit 240px Luft dazwischen. Auf schmalen Schirmen faellt dieser
       Wert deutlich kleiner aus, siehe Medienabfrage weiter unten. */
    padding-top: calc(var(--header-height) + 15rem);
    padding-bottom: 6rem;
    overflow: hidden;
}

/* Variante fuer Seiten, auf denen unter dem Kopf sofort etwas zu tun
   ist - Warenkorb, Checkout. Aufbau, Raster und Groessen bleiben wie
   oben, nur die Bildschirmhoehe faellt weg: Der Inhalt schliesst direkt
   an, statt erst nach einem Bildschirm zu beginnen. Der Scroll-Hinweis
   entfaellt hier, weil es nichts anzukuendigen gibt. */
.astro-hero--kompakt {
    min-height: 0;
    padding-bottom: 4rem;
}

/* Zusatz fuer eigenes Markup darunter: Das Zeichen nimmt keinen
   senkrechten Platz mehr ein. Es steht weiter an derselben Stelle und
   in derselben Groesse, aber der Kopf ist nur noch so hoch wie sein
   Text - sonst bestimmt das 460px hohe Zeichen die Hoehe, und der
   Inhalt beginnt erst nach einer Handbreit Leere. Jetzt rueckt er nach
   oben, das Zeichen ueberlappt ihn rechts.

   NUR wo unter dem Kopf eigenes Markup folgt. Steht dort ein fremdes
   Element - etwa das GHL-Bestellformular -, legt sich das Zeichen
   darueber, im Zweifel ueber die Zahlungsfelder. Dann diese Klasse
   weglassen und `--kompakt` allein verwenden. */
@media (min-width: 901px) {
    .astro-hero--kompakt.astro-hero--glyph-frei {
        overflow: visible;
        padding-bottom: 1.5rem;
    }

    .astro-hero--kompakt.astro-hero--glyph-frei .astro-hero__glyph {
        position: absolute;
        right: 0;
        /* Oben buendig mit dem Text statt am Text zentriert: Der Text
           ist kuerzer als das Zeichen, zentriert schoebe es sich unter
           die fixierte Kopfzeile. */
        top: 0;
        transform: none;
        /* Breite der rechten Rasterspalte: 2 von 5 Anteilen abzueglich
           der Rinne, damit das Zeichen dort bleibt, wo es im Raster
           stand. */
        width: calc((100% - 3rem) * 0.4);
        pointer-events: none;
    }
}

/* Zwei Spalten: Text links, Glyph rechts - wie im Ursprungsentwurf. */
.astro-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    align-items: center;
    width: 100%;
}

.astro-hero__text {
    text-align: left;
    /* Oben im Raster, nicht mittig. Das Raster zentriert seine Spalten;
       ist der Text kuerzer als das 460px hohe Zeichen, rutscht er nach
       unten - auf der Fehlerseite begann er 332px unter der Kopfzeile
       statt der 240px aller anderen Seiten. Das Zeichen bleibt
       zentriert, nur der Text ist verankert. */
    align-self: start;
}

/* Die Schriftgroesse kommt aus --text-body und gilt seitenweit -
   hier nur noch die Zeilenlaenge begrenzen. */
.astro-hero__text .astro-lead {
    max-width: 60ch;
}

/* Zweite Zeile der Ueberschrift in Gold, eigene Zeile. */
.astro-title__accent {
    display: block;
    color: var(--celestial-gold);
}

/* --- Button mit Pfeil --- */
.astro-btn--arrow {
    position: relative;
    padding-right: 3.4rem;
}

.astro-btn--arrow::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2238' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14'/%3e%3cpath d='m12 5 7 7-7 7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.astro-btn--arrow:hover::after {
    transform: translateY(-50%) translateX(5px);
}


/* =========================================
   HERO-GLYPH (Metatron)
   =========================================
   Der Wrapper traegt den Lichthof, das Bild darin rotiert
   (.astro-metatron, global.css Sektion 4).
   ========================================= */
.astro-hero__glyph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.astro-hero__glyph img {
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(260px, 30vw, 460px);
    height: auto;
    /* Deutlich sichtbar statt nur angedeutet */
    opacity: 0.9;
    filter: drop-shadow(0 0 18px rgba(var(--celestial-gold-rgb), 0.55));
    transition: opacity 0.7s ease, filter 0.7s ease;
}

.astro-hero__glyph:hover img {
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(var(--celestial-gold-rgb), 0.85));
}

/* Der kosmische Lichthof hinter dem Glyph */
.astro-hero__glyph-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(300px, 34vw, 540px);
    height: clamp(300px, 34vw, 540px);
    /* Wie beim Nebel: Ausgangswerte gleich dem ersten Bild der
       Bewegung, sonst springt die Deckkraft beim Start von 1 auf 0,7. */
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(var(--celestial-gold-rgb), 0.35) 0%,
                rgba(var(--gold-warm-rgb), 0.18) 40%,
                transparent 70%);
    filter: blur(45px);
    pointer-events: none;
    z-index: 1;
    animation: haloPulse 8s ease-in-out infinite;
}

@keyframes haloPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* Halbe Kantenlaenge fuers Telefon: 56 statt 107 KB, auf dem Schirm
   nicht zu unterscheiden. */
@media (max-width: 900px) {
    :root {
        --grund-sternenhimmel:
            url('https://images.leadconnectorhq.com/image/f_webp/q_80/r_1536/u_https://assets.cdn.filesafe.space/CCKw0wYuCkiZpChTluZ9/media/6981eb7b2dd9852a80afc409.png');
    }
}

/* Ab Tablet abwaerts: Glyph hinter den Text, Text bleibt lesbar. */
@media (max-width: 900px) {
    /* 240px waeren hier ein Drittel des Schirms, bevor das erste Wort
       kommt. Auf dem Telefon reicht eine Handbreit. */
    .astro-hero {
        padding-top: calc(var(--header-height) + 4rem);
    }

    .astro-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .astro-hero__glyph {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        opacity: 0.35;
        pointer-events: none;
    }

    .astro-hero__text {
        position: relative;
        z-index: 2;
    }
}


/* =========================================
   BELEBTER HIMMEL
   =========================================
   Drei Ebenen mit unterschiedlichem Tempo erzeugen Tiefe:
   ferne Sterne driften langsam, nahe schneller, der Nebel
   atmet darueber. Alles per transform/opacity, damit die
   Animation auf der GPU laeuft und kein Layout neu berechnet wird.
   ========================================= */
/* Liegt fest hinter der ganzen Seite - nicht mehr nur im Hero, wo er
   beim Scrollen nach oben weglief. Fixiert wirkt es, als scrolle man
   durch ein stehendes Firmament. */
.astro-sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;

    /* Vom Seitenlayout abgekoppelt. Der Himmel ist reine Dekoration -
       was darin erscheint oder sich bewegt, darf nie als Verschiebung
       der Seite zaehlen. Lighthouse hat den Nebel als groessten
       Verursacher gemeldet (0,097 von 0,111), obwohl er fixiert liegt
       und sich nur ueber transform bewegt: Beim ersten Aufbau ist er
       da, bevor unser CSS greift, und der Moment wird mitgezaehlt. */
    contain: layout paint;
}

.astro-sky__stars {
    position: absolute;
    /* Doppelte Hoehe: die Ebene wandert um genau 50% und
       springt dadurch nahtlos zurueck. */
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-repeat: repeat;
}

.astro-sky__stars--far {
    background-image:
        radial-gradient(1.2px 1.2px at 12% 8%,  rgba(var(--pure-white-rgb), 0.85), transparent),
        radial-gradient(1px 1px     at 32% 16%, rgba(var(--celestial-gold-rgb), 0.7),  transparent),
        radial-gradient(1.4px 1.4px at 68% 6%,  rgba(var(--pure-white-rgb), 0.65), transparent),
        radial-gradient(1px 1px     at 84% 22%, rgba(var(--celestial-gold-rgb), 0.6),  transparent),
        radial-gradient(1.2px 1.2px at 22% 34%, rgba(var(--pure-white-rgb), 0.55), transparent),
        radial-gradient(1.3px 1.3px at 54% 42%, rgba(var(--pure-white-rgb), 0.6),  transparent),
        radial-gradient(1px 1px     at 88% 38%, rgba(var(--celestial-gold-rgb), 0.6),  transparent),
        radial-gradient(1.2px 1.2px at 40% 46%, rgba(var(--pure-white-rgb), 0.5),  transparent);
    background-size: 100% 50%;
    opacity: 0.45;
    animation: skyDrift 140s linear infinite;
}

.astro-sky__stars--mid {
    background-image:
        radial-gradient(1.8px 1.8px at 18% 12%, rgba(var(--pure-white-rgb), 0.9), transparent),
        radial-gradient(1.6px 1.6px at 74% 20%, rgba(var(--celestial-gold-rgb), 0.85), transparent),
        radial-gradient(2px 2px     at 44% 32%, rgba(var(--pure-white-rgb), 0.75), transparent),
        radial-gradient(1.7px 1.7px at 92% 44%, rgba(var(--celestial-gold-rgb), 0.7), transparent),
        radial-gradient(1.9px 1.9px at 8% 40%,  rgba(var(--pure-white-rgb), 0.7), transparent);
    background-size: 100% 50%;
    opacity: 0.7;
    animation: skyDrift 80s linear infinite;
}

@keyframes skyDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

/* Langsam atmender Nebel */
/* Wandernder Dunkelschleier.
   Die fruehere Fassung arbeitete mit Indigo, Violett und einem Hauch
   Gold - alles aufhellende Toene. Der Grund wurde dadurch heller und
   der Text verlor Kontrast. Jetzt in Cosmic Blue 2, dem dunkelsten
   Markenton: Der Nebel legt sich als Schatten ueber das Bild statt es
   anzuheben, bleibt aber in Bewegung. */
.astro-sky__nebula {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 60% 45% at 25% 30%, rgba(var(--night-blue-rgb), 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 55% 42% at 78% 62%, rgba(var(--night-blue-rgb), 0.5) 0%, transparent 64%),
        radial-gradient(ellipse 50% 38% at 55% 88%, rgba(var(--night-blue-rgb), 0.45) 0%, transparent 66%);
    filter: blur(30px);

    /* Ausgangswerte gleich dem ersten Bild der Bewegung. Ohne sie steht
       das Feld zunaechst unverschoben und voll deckend da und springt
       mit dem Start der Bewegung - Lighthouse hat genau diesen Sprung
       als groessten Verursacher von Layout Shifts gemeldet (0,097 von
       0,111). */
    transform: translate3d(-3%, -2%, 0) scale(1);
    opacity: 0.7;
    animation: nebulaDrift 60s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
    from { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: 0.7; }
    to   { transform: translate3d(3%, 2%, 0)   scale(1.12); opacity: 1; }
}

/* Ruhiger Grundschleier darueber: nimmt dem Bild gleichmaessig Helligkeit,
   damit Text ueberall lesbar bleibt - auch dort, wo der Nebel gerade
   nicht steht. Oben und unten etwas dichter, weil dort Kopfzeile und
   Fusszeile sitzen. */
.astro-sky__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(var(--night-blue-rgb), 0.55) 0%,
            rgba(var(--night-blue-rgb), 0.3) 25%,
            rgba(var(--night-blue-rgb), 0.3) 70%,
            rgba(var(--night-blue-rgb), 0.6) 100%);
}

/* Einzelne, kraeftig funkelnde Sterne */
.astro-twinkle {
    position: absolute;
    width: var(--tw-size, 3px);
    height: var(--tw-size, 3px);
    border-radius: 50%;
    background: var(--celestial-gold);
    box-shadow: 0 0 8px 2px rgba(var(--celestial-gold-rgb), 0.55);
    animation: twinkle 4s ease-in-out infinite;
    animation-delay: var(--tw-delay, 0s);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* Gelegentliche Sternschnuppe - lange Pause, kurzer Auftritt */
.astro-shooting-star {
    position: absolute;
    top: 12%;
    left: -10%;
    width: 120px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(var(--pure-white-rgb), 0.9), transparent);
    opacity: 0;
    animation: shootingStar 14s ease-in infinite;
}

@keyframes shootingStar {
    0%      { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); }
    3%      { opacity: 1; }
    12%     { opacity: 0; transform: translate3d(90vw, 28vh, 0) rotate(14deg); }
    100%    { opacity: 0; transform: translate3d(90vw, 28vh, 0) rotate(14deg); }
}


/* =========================================
   SCROLL-HINWEIS
   ========================================= */
.astro-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: block;
    animation: scrollBounce 2.5s ease-in-out infinite;
}

.astro-scroll-hint__mouse {
    display: flex;
    justify-content: center;
    width: 26px;
    height: 42px;
    padding-top: 8px;
    border: 2px solid var(--celestial-gold);
    border-radius: 14px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.astro-scroll-hint:hover .astro-scroll-hint__mouse {
    opacity: 1;
}

.astro-scroll-hint__wheel {
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: var(--celestial-gold);
    animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

@keyframes scrollWheel {
    0%      { opacity: 0; transform: translateY(-4px); }
    40%     { opacity: 1; }
    100%    { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 900px) {
    .astro-scroll-hint { display: none; }
}

/* Wer Bewegung reduziert haben will, bekommt ein ruhiges Firmament. */
@media (prefers-reduced-motion: reduce) {
    .astro-sky__stars,
    .astro-sky__nebula,
    .astro-twinkle,
    .astro-shooting-star,
    .astro-hero__glyph-halo,
    .astro-scroll-hint,
    .astro-scroll-hint__wheel {
        animation: none;
    }

    .astro-shooting-star { display: none; }
}


/* =========================================
   QUIZ-CTA
   ========================================= */
/* Volle Containerbreite, damit die Box mit den Karten darueber
   und darunter buendig abschliesst. */
.astro-quiz {
    padding: 3rem 2rem;
}

.astro-quiz .astro-subtitle {
    margin-bottom: 0.6rem;
}

.astro-quiz .astro-lead {
    margin-bottom: 2rem;
}


/* =========================================
   FAQ
   ========================================= */
.astro-faq {
    margin-top: 2.5rem;
    display: grid;
    gap: 1rem;
}

.astro-faq__item {
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.2);
    border-radius: 10px;
    background: rgba(var(--cosmic-blue-rgb), 0.55);
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.astro-faq__item[open] {
    border-color: rgba(var(--celestial-gold-rgb), 0.5);
}

.astro-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: var(--title-sub);
    font-weight: 600;
    color: var(--celestial-gold);
    cursor: pointer;
    list-style: none;
}

/* Standard-Dreieck der <details>-Markierung entfernen */
.astro-faq__question::-webkit-details-marker {
    display: none;
}

/* Eigenes Plus/Minus-Zeichen */
.astro-faq__question::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold-warm);
    transition: transform 0.3s ease;
}

.astro-faq__item[open] .astro-faq__question::after {
    transform: rotate(45deg);
}

.astro-faq__answer {
    padding: 0 1.5rem 1.4rem;
    font-size: var(--text-body);
    color: rgba(var(--cosmic-white-rgb), 0.78);
}

.astro-faq__answer p {
    margin: 0;
}


/* =========================================
   KONTAKT
   ========================================= */
.astro-contact {
    margin-top: 3rem;
    align-items: start;
}

.astro-contact__list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
}

.astro-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.astro-contact__item .astro-icon-circle {
    margin-bottom: 0;
    width: 44px;
    height: 44px;
}

.astro-contact__label {
    margin: 0 0 0.2rem;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--cosmic-white);
}

.astro-contact__label a {
    color: var(--celestial-gold);
    text-decoration: none;
}

.astro-contact__label a:hover {
    text-decoration: underline;
}

.astro-contact__note {
    margin: 0;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.6);
}


/* =========================================
   NEWSLETTER
   ========================================= */
.astro-newsletter {
    padding: 3rem 2rem;
}

.astro-newsletter .astro-lead {
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

/* Vorhandene Zustandsfarben des Mandala-Selbsttests (1 bis 10). */
:root {
    --astro-wert-10: #7FC08D;
    --astro-wert-9:  #8DBD98;
    --astro-wert-8:  #9AB8A1;
    --astro-wert-7:  #A3B2A7;
    --astro-wert-6:  #A6ABAA;
    --astro-wert-5:  #A5A5AD;
    --astro-wert-4:  #DDB55C;
    --astro-wert-3:  #DFA04F;
    --astro-wert-2:  #DD7F48;
    --astro-wert-1:  #DE5F4B;
}


/* ===================================================================
   ASTROMANDALA · MODUL: einstieg
   -------------------------------------------------------------------
   Gemeinsame Bausteine der beiden kostenlosen Einstiege
   (deine-reise, geburtshoroskop): Textabsaetze, die E-Mail-Bloecke
   nach dem Ergebnis und der Querverweis auf den jeweils anderen
   Einstieg.

   Einbindung ueber die Modulzeile im Seiten-CSS: "@modules: einstieg"
   =================================================================== */

.astro-reise-text {
    margin: 0 0 1.25rem;
    font-size: var(--text-body);
    line-height: 1.65;
    color: rgba(var(--cosmic-white-rgb), 0.85);
}

.astro-reise-text--leise {
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.6);
}

.astro-reise-text--spannung {
    padding: 1rem 1.15rem;
    border-left: 2px solid rgba(var(--celestial-gold-rgb), 0.6);
    background: rgba(var(--celestial-gold-rgb), 0.07);
    border-radius: 0 8px 8px 0;
}

/* --- E-Mail als Angebot nach dem Ergebnis --- */
.astro-reise-mail {
    margin: 0 0 2.5rem;
    padding: 2.25rem 2rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.35);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--cosmic-blue) 0%, var(--cosmic-blue-lift) 100%);
    box-shadow: 0 0 40px rgba(var(--celestial-gold-rgb), 0.08);
}

.astro-reise-mail--danke {
    border-color: rgba(var(--gold-warm-rgb), 0.55);
}

/* --- Querverweis auf den jeweils anderen Einstieg --- */
.astro-reise-quer {
    margin: 0 0 3.5rem;
    text-align: center;
}

.astro-reise-quer .astro-reise-text {
    margin-bottom: 1rem;
}


/* ===================================================================
   ASTROMANDALA · SEITEN-CSS: geburtshoroskop
   -------------------------------------------------------------------
   NUR Seiten-Spezifisches. Alles Wiederverwendbare gehoert nach
   _global/global.css bzw. _global/modules/.

   Kopf, Firmament, Schaltflaechen und Formular-Rahmen kommen aus
   global.css; Textabsaetze, E-Mail-Bloecke und Querverweis aus dem
   Modul "einstieg". Hier stehen Eingabeformular, Ortsliste, die
   Karten der grossen Drei, Radix-Bild und Detailtabelle.
   =================================================================== */

/* @modules: einstieg */

/* Getrennt eingebetteter Rechner und GHL-Huelle. */
#astro-geburtshoroskop [hidden], #ghProduktKaufen[hidden] { display: none !important; }
.astro-gh-einbettung { display: block; width: 100%; min-height: 680px; border: 0; }
.astro-gh-verbindung { max-width: 640px; margin: 0 auto; padding: 2rem 0; }
.astro-gh-stern-1 { top: 18%; left: 14%; animation-delay: 0.4s; }
.astro-gh-stern-2 { top: 43%; left: 77%; animation-delay: 1.8s; }
.astro-gh-stern-3 { top: 72%; left: 32%; animation-delay: 3.1s; }

.astro-gh-widget, .astro-gh-widget * { box-sizing: border-box; }
.astro-gh-widget { color: var(--cosmic-white); line-height: 1.65; color-scheme: dark; }
.astro-gh-widget #astro-geburtshoroskop { background-image: none; }
.astro-gh-widget .astro-section { padding-left: 1rem; padding-right: 1rem; }
.astro-gh-widget .astro-container--narrow { max-width: 1080px; }
.astro-gh-widget .astro-btn { margin: 0.4rem 0.3rem 0.4rem 0; }
.astro-gh-widget .astro-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.astro-gh-widget :focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 4px; }
.astro-gh-widget .astro-gh-datum .astro-gh-input { min-width: 0; }
.astro-gh-widget .astro-gh-input::placeholder { color: rgba(var(--cosmic-white-rgb), 0.65); }
.astro-gh-widget .astro-gh-check input { flex-shrink: 0; }
.astro-gh-ortstatus, .astro-gh-datenhinweis { font-size: var(--text-meta); color: var(--mist); }
.astro-gh-datenhinweis a { color: var(--celestial-gold); text-underline-offset: 3px; }
.astro-gh-speicherfund { max-width: 640px; margin: 0 auto 1.5rem; padding: 1.5rem; border: 1px solid var(--celestial-gold); border-radius: 12px; }
.astro-gh-widget .astro-gh-mockhinweis { margin-bottom: 1.5rem; }
.astro-gh-widget .astro-gh-hinweis { margin-bottom: 1.5rem; }
.astro-gh-widget .astro-gh-upsell { margin-top: 2.5rem; }
.astro-gh-widget .astro-gh-tabelle table { min-width: 510px; }
.astro-gh-tabelle caption { text-align: left; padding: 0.8rem; }
.astro-gh-radix svg { width: min(100%, 600px); height: auto; display: block; margin: 1.5rem auto; }
.astro-gh-ring { fill: none; stroke: var(--celestial-gold); stroke-width: 1.5; }
.astro-gh-linie, .astro-gh-planetenstrich { stroke: var(--celestial-gold); stroke-width: 1.5; }
.astro-gh-haus { stroke: rgba(var(--cosmic-white-rgb), 0.3); stroke-width: 1; }
.astro-gh-zeiger { stroke: rgba(var(--celestial-gold-rgb), 0.5); stroke-width: 0.8; }
.astro-gh-zeichen, .astro-gh-planet, .astro-gh-hausnummer { text-anchor: middle; dominant-baseline: middle; fill: var(--celestial-gold); }
.astro-gh-zeichen, .astro-gh-planet { font-family: 'Apple Symbols', 'Segoe UI Symbol', serif; font-size: 23px; }
.astro-gh-hausnummer { font-size: 12px; fill: var(--mist); }

@media (max-width: 480px) {
    .astro-gh-widget .astro-gh-form, .astro-gh-widget .astro-reise-mail { padding: 1.3rem 1rem; }
    .astro-gh-widget .astro-btn { display: block; width: 100%; padding-left: 1rem; padding-right: 1rem; }
    .astro-gh-widget .astro-gh-datum { flex-wrap: nowrap; }
    .astro-gh-widget .astro-gh-datum .astro-gh-input { flex: 1 1 0; padding-left: 0.5rem; padding-right: 0.5rem; }
    .astro-gh-widget .astro-gh-datum .astro-gh-input:last-child { flex: 1.4 1 0; }
}


/* =========================================
   HINTERGRUND
   ========================================= */
#astro-geburtshoroskop {
    background-color: var(--cosmic-blue);
    background-image: var(--grund-sternenhimmel);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* =========================================
   EINGABEFORMULAR
   ========================================= */
.astro-gh-form {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2.25rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.28);
    border-radius: 14px;
    background: linear-gradient(150deg,
                rgba(var(--cosmic-blue-rgb), 0.72) 0%,
                rgba(var(--cosmic-blue-rgb), 0.5) 100%);
    backdrop-filter: blur(6px);
    color: var(--cosmic-white);
}

.astro-gh-feldgruppe {
    margin: 0 0 1.5rem;
}

.astro-gh-feldgruppe--ort {
    position: relative;
}

.astro-gh-label {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--celestial-gold);
}

.astro-gh-datum,
.astro-gh-zeit {
    display: flex;
    gap: 0.6rem;
}

.astro-gh-input {
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.4);
    border-radius: 8px;
    background: rgba(var(--cosmic-blue-rgb), 0.5);
    color: var(--cosmic-white);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-body);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.astro-gh-input:focus {
    outline: none;
    border-color: var(--celestial-gold);
    box-shadow: 0 0 0 3px rgba(var(--celestial-gold-rgb), 0.18);
}

.astro-gh-input:disabled {
    opacity: 0.4;
}

.astro-gh-input::placeholder {
    color: rgba(var(--cosmic-white-rgb), 0.4);
}

.astro-gh-datum .astro-gh-input {
    max-width: 110px;
}

.astro-gh-datum .astro-gh-input:last-child {
    max-width: 130px;
}

.astro-gh-zeit .astro-gh-input {
    max-width: 110px;
}

.astro-gh-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.8);
    cursor: pointer;
}

.astro-gh-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--celestial-gold);
}

.astro-gh-hinweis {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-left: 2px solid rgba(var(--celestial-gold-rgb), 0.6);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--celestial-gold-rgb), 0.07);
}

.astro-gh-hinweis p {
    margin: 0 0 0.75rem;
    font-size: var(--text-meta);
    line-height: 1.6;
    color: rgba(var(--cosmic-white-rgb), 0.85);
}

.astro-gh-hinweis p:last-child {
    margin-bottom: 0;
}


/* --- Ortssuche --- */
.astro-gh-ortsliste {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0.3rem 0 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.4);
    border-radius: 8px;
    background: var(--cosmic-blue-lift);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.astro-gh-ortsliste li + li {
    margin-top: 2px;
}

.astro-gh-ortsliste button {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--cosmic-white);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-meta);
    text-align: left;
    cursor: pointer;
}

.astro-gh-ortsliste button:hover {
    background: rgba(var(--celestial-gold-rgb), 0.15);
}

.astro-gh-ortgewaehlt {
    margin: 0.6rem 0 0;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.65);
}


/* --- Status und Fehler --- */
.astro-gh-fehler {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-left: 2px solid var(--signal-red);
    border-radius: 0 8px 8px 0;
    background: rgba(0, 0, 0, 0.25);
    color: var(--signal-red);
    font-size: var(--text-meta);
}

.astro-gh-warten {
    margin: 1rem 0 0;
    font-size: var(--text-meta);
    font-style: italic;
    color: rgba(var(--cosmic-white-rgb), 0.7);
}

.astro-gh-mockhinweis {
    max-width: 640px;
    margin: 1.25rem auto 0;
    padding: 0.85rem 1rem;
    border: 1px dashed rgba(var(--gold-warm-rgb), 0.7);
    border-radius: 8px;
    font-size: var(--text-meta);
    color: var(--gold-warm);
    text-align: center;
}


/* =========================================
   ERGEBNIS: DIE GROSSEN DREI
   ========================================= */
.astro-gh-intro {
    max-width: 60ch;
}

.astro-gh-big3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0 0 3rem;
}

.astro-gh-big3karte h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-family: 'Playfair Display', serif;
    font-size: var(--title-card);
    color: var(--cosmic-white);
}

.astro-gh-symbol {
    color: var(--celestial-gold);
    font-size: 1.4em;
    line-height: 1;
}

.astro-gh-big3rolle {
    margin: 0 0 0.75rem;
    font-size: var(--text-badge);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--celestial-gold);
}

.astro-gh-big3rolle span {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: rgba(var(--cosmic-white-rgb), 0.6);
}

.astro-gh-big3text {
    margin: 0;
    font-size: var(--text-meta);
    line-height: 1.65;
    color: rgba(var(--cosmic-white-rgb), 0.85);
}

.astro-gh-big3karte--fehlt {
    border-style: dashed;
}


/* =========================================
   RADIX-GRAFIK
   ========================================= */
.astro-gh-radix {
    margin: 0 0 3rem;
    text-align: center;
}

.astro-gh-radix .astro-reise-text {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.astro-gh-radixbild {
    max-width: min(100%, 520px);
    height: auto;
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(var(--celestial-gold-rgb), 0.18);
}


/* =========================================
   DETAILTABELLE (eingeklappt)
   ========================================= */
.astro-gh-details {
    margin: 0 0 3rem;
    border: 1px solid rgba(var(--celestial-gold-rgb), 0.28);
    border-radius: 12px;
    background: rgba(var(--cosmic-blue-rgb), 0.5);
}

.astro-gh-details summary {
    padding: 1.1rem 1.4rem;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--celestial-gold);
    cursor: pointer;
}

.astro-gh-tabelle {
    padding: 0 1.4rem 1.25rem;
    overflow-x: auto;
}

.astro-gh-tabelle table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-meta);
    color: rgba(var(--cosmic-white-rgb), 0.85);
}

.astro-gh-tabelle th {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(var(--celestial-gold-rgb), 0.4);
    color: var(--celestial-gold);
    font-weight: 600;
    text-align: left;
}

.astro-gh-tabelle td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(var(--cosmic-white-rgb), 0.08);
}


/* =========================================
   MITGLIEDERBEREICH-ABSCHLUSS
   ========================================= */
.astro-gh-login {
    text-align: center;
}

.astro-gh-login .astro-reise-text {
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   KURS-CTA
   ========================================= */
.astro-gh-kurs {
    margin: 0 0 2.5rem;
    text-align: center;
}

.astro-gh-kurs .astro-reise-text {
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}


/* =========================================
   SCHMALE SCHIRME
   ========================================= */
@media (max-width: 900px) {
    .astro-gh-form {
        padding: 1.75rem 1.4rem;
    }

    .astro-gh-big3 {
        grid-template-columns: 1fr;
    }

    .astro-gh-datum,
    .astro-gh-zeit {
        flex-wrap: wrap;
    }

    .astro-gh-datum .astro-gh-input,
    .astro-gh-zeit .astro-gh-input {
        max-width: none;
        flex: 1 1 90px;
    }
}

/* Schriftdateien aus google/fonts, Lizenztexte liegen neben den Dateien.
   Der Browser laedt ausschliesslich vom eigenen Rechendienst. */
@font-face {
    font-family: 'Montserrat'; font-style: normal; font-weight: 100 900;
    font-display: swap; src: url('/fonts/montserrat.ttf') format('truetype');
}
@font-face {
    font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900;
    font-display: swap; src: url('/fonts/playfairdisplay.ttf') format('truetype');
}