/* =====================================================================
   KGS HERO — Mobile Feinschliff
   ---------------------------------------------------------------------
   Der Hero-Bereich ist auf allen Seiten gleich aufgebaut (#master-hero
   mit Textspalte, Diagrammkarten und CTA). Auf dem Desktop traegt er
   den Premium-Standard; auf Mobil fiel er dagegen ab:

     - das Drahtgitter im Hintergrund lief mit voller Deckkraft direkt
       durch die Ueberschrift, die Zeilen wurden von Goldlinien
       zerschnitten
     - die Glaskarten hatten nur rgba(255,255,255,.03) als Flaeche und
       eine Kante mit .12 Deckkraft - auf Schwarz lasen sie sich als
       flache graue Kaesten ohne Materialwirkung
     - die Symbole standen frei, ohne die Symbolkachel, die den Rest
       der Website praegt
     - der Beschreibungstext stand in #78716C bei 0.65rem und war kaum
       lesbar
     - der Button war mit 14px/28px schmaler als jeder andere Button
       der Seite und klebte mit 4px Abstand an den Karten
     - nach dem Einblenden bewegte sich auf Mobil nichts mehr

   Diese Datei aendert ausschliesslich die mobile Darstellung. Aufbau,
   Reihenfolge und Markup bleiben unangetastet, damit alle Seiten
   weiterhin identisch strukturiert sind.

   Zur Spezifitaet: die Hero-Styles stehen in einem <style>-Block im
   Body, also NACH diesem Stylesheet. Gleich spezifische Regeln wuerden
   deshalb verlieren. Der Praefix "html body" hebt jede Regel hier
   ueber die Seitenregel - ohne !important.
   ===================================================================== */

@media (max-width: 900px) {

    /* ── Buehne ── */
    html body #master-hero {
        padding: 112px 20px 66px;
    }

    /* Das Drahtgitter bleibt sichtbar, tritt aber hinter den Text
       zurueck. Es ist Atmosphaere, nicht Vordergrund. */
    html body #master-hero .mh-wire {
        stroke: rgba(202, 138, 4, .17);
    }
    html body #master-hero .mh-wire-edge {
        stroke: rgba(202, 138, 4, .3);
    }
    html body #master-hero .mh-orbit {
        stroke: rgba(202, 138, 4, .2);
    }
    html body #master-hero .sacred-geo-container svg circle,
    html body #master-hero .sacred-geo-container svg line {
        stroke: rgba(202, 138, 4, .07);
    }

    /* Ruhiger Grund unter der Typografie. Liegt im Stapelkontext von
       .hero-inner, also ueber dem Hintergrund und unter dem Text. */
    html body #master-hero .hero-inner {
        gap: 34px;
        position: relative;
    }
    html body #master-hero .hero-inner::before {
        content: '';
        position: absolute;
        inset: -8% -14% -2%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(58% 42% at 50% 30%,
            rgba(5, 5, 5, .84), rgba(5, 5, 5, .5) 56%, transparent 78%);
    }

    /* ── Typografie ── */
    html body #master-hero .premium-eyebrow {
        margin-bottom: 22px;
        padding: 7px 18px;
        letter-spacing: 2.2px;
        background: linear-gradient(150deg, rgba(202, 138, 4, .16), rgba(202, 138, 4, .05));
        border-color: rgba(202, 138, 4, .38);
        box-shadow: 0 0 22px rgba(202, 138, 4, .12);
    }
    html body #master-hero .premium-h1 {
        margin-bottom: 14px;
        letter-spacing: -.6px;
        line-height: 1.12;
    }
    /* Der Untertitel stand auf zehn Seiten bei 0.95rem (15px), auf der
       Startseite dagegen bei 22px - zwei verschiedene Hierarchien fuer
       dasselbe Element. Einheitlich rund 18px: klar unter der
       Ueberschrift, aber lesbar. */
    html body #master-hero .premium-subtitle {
        margin-bottom: 20px;
        font-size: clamp(1.05rem, 4.6vw, 1.25rem);
    }
    /* Der Abstand zur Kartenspalte kommt aus dem Raster (gap), nicht
       aus einem zusaetzlichen margin - sonst steht er doppelt. */
    html body #master-hero .premium-p {
        margin-bottom: 0;
        font-size: .9rem;
        line-height: 1.8;
        max-width: 36ch;
        margin-inline: auto;
    }

    /* ── Diagrammkarten ── */
    html body #master-hero .hero-diagrams-col {
        gap: 12px;
    }
    html body #master-hero .glass-card {
        padding: 18px 18px 17px;
        gap: 15px;
        border-radius: 20px;
        border: 1px solid rgba(202, 138, 4, .26);
        background:
            radial-gradient(circle at 88% 4%, rgba(202, 138, 4, .15), transparent 56%),
            linear-gradient(150deg, rgba(30, 26, 21, .74), rgba(9, 8, 7, .86));
        box-shadow: 0 18px 40px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06);
    }
    /* Lichtkante oben - dieselbe Sprache wie die uebrigen Karten */
    html body #master-hero .glass-card::after {
        inset-inline: 20px;
        left: 20px;
        right: 20px;
        width: auto;
        background: linear-gradient(90deg, transparent, rgba(229, 184, 59, .55), transparent);
    }

    /* Symbolkachel statt frei stehendem Piktogramm */
    html body #master-hero .diagram-visual {
        width: 54px;
        height: 54px;
        padding: 11px;
        box-sizing: border-box;
        border-radius: 15px;
        border: 1px solid rgba(202, 138, 4, .3);
        background: linear-gradient(150deg, rgba(202, 138, 4, .18), rgba(202, 138, 4, .04));
    }
    /* Ruhiges Dauerleuchten, versetzt - der Block lebt auch nach dem
       Einblenden weiter. Auf Touch gibt es kein Ueberfahren. */
    html body #master-hero .glass-card:nth-child(1) .diagram-visual {
        animation: kgsHeroIcoPulse 7s ease-in-out 3.2s infinite;
    }
    html body #master-hero .glass-card:nth-child(2) .diagram-visual {
        animation: kgsHeroIcoPulse 7s ease-in-out 4.4s infinite;
    }
    html body #master-hero .glass-card:nth-child(3) .diagram-visual {
        animation: kgsHeroIcoPulse 7s ease-in-out 5.6s infinite;
    }
    @keyframes kgsHeroIcoPulse {
        0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0);   border-color: rgba(202, 138, 4, .3); }
        45%      { box-shadow: 0 0 24px rgba(202, 138, 4, .3); border-color: rgba(229, 184, 59, .55); }
    }

    html body #master-hero .card-label {
        font-size: .6rem;
        letter-spacing: 1.9px;
        color: #C79A2A;
        margin-bottom: 5px;
    }
    html body #master-hero .card-value {
        font-size: 1.06rem;
        line-height: 1.28;
        color: #F6EFE2;
    }
    html body #master-hero .card-sub {
        margin-top: 6px;
        font-size: .73rem;
        line-height: 1.5;
        color: #A8A29E;
    }

    /* ── CTA am Blockende ──
       Der Button schliesst den Hero ab und muss auf Mobil dieselbe
       Praesenz haben wie die Buttons der uebrigen Bloecke. */
    html body #master-hero .hero-cta-wrap {
        margin-top: 8px;
    }
    html body #master-hero .btn-glass-gold {
        justify-content: center;
        min-height: 56px;
        min-width: min(320px, 84%);
        padding: 17px 34px;
        font-size: .78rem;
        letter-spacing: 1.6px;
        border-color: rgba(202, 138, 4, .5);
        background: linear-gradient(150deg, rgba(202, 138, 4, .17), rgba(202, 138, 4, .05));
        box-shadow: 0 16px 36px rgba(0, 0, 0, .42),
                    0 0 26px rgba(202, 138, 4, .1),
                    inset 0 1px 0 rgba(255, 255, 255, .07);
    }
}

@media (max-width: 480px) {
    html body #master-hero {
        padding: 106px 18px 58px;
    }
    html body #master-hero .hero-inner {
        gap: 28px;
    }
    html body #master-hero .premium-eyebrow {
        font-size: .62rem;
        padding: 6px 15px;
        margin-bottom: 18px;
    }
    html body #master-hero .premium-p {
        font-size: .86rem;
        line-height: 1.75;
    }
    html body #master-hero .glass-card {
        padding: 15px 15px 14px;
        gap: 13px;
        border-radius: 17px;
    }
    html body #master-hero .glass-card::after {
        left: 16px;
        right: 16px;
    }
    html body #master-hero .diagram-visual {
        width: 48px;
        height: 48px;
        padding: 9px;
        border-radius: 13px;
    }
    html body #master-hero .card-value {
        font-size: 1rem;
    }
    html body #master-hero .card-sub {
        font-size: .69rem;
    }
    html body #master-hero .btn-glass-gold {
        min-height: 54px;
        min-width: min(300px, 88%);
        padding: 16px 26px;
        font-size: .74rem;
    }
}

/* Sehr schmale Geraete: die Symbolkachel darf die Textspalte nicht
   erdruecken, sonst bricht der Wert in zu viele Zeilen. */
@media (max-width: 360px) {
    html body #master-hero .diagram-visual {
        width: 44px;
        height: 44px;
        padding: 8px;
    }
    html body #master-hero .glass-card {
        gap: 11px;
    }
    html body #master-hero .card-value {
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #master-hero .diagram-visual {
        animation: none !important;
    }
}