/*
|--------------------------------------------------------------------------
| 2026-08-24
| Author: Claude
| Neuanlage.
|
| Ableitung von
| 90-vorlagen/domain-funnel-grid/vt-domain-funnel-grid.css fuer das
| Feature domain-uebertragen.
|
| Nach ADR-008 Abschnitt 13 ist eine Kopiervorlage keine gemeinsam zur
| Laufzeit verwendete Quelle; das Feature fuehrt seine eigene Datei.
|
| Saemtliche Regeln, Selektoren, Werte und Bruchpunkte sind unveraendert
| uebernommen. Grid-Geometrie, Card-Grundlayout, Farben, Radius, Hover,
| Active, Focus-Verhalten, Sticky-Geometrie und Responsive-Verhalten
| entsprechen damit exakt dem menschlich geprueften Referenzstand.
|
| Die globale .vt-card-Basis und die Component Sticky-Follow werden nicht
| nachgebildet; sie wirken unveraendert aus ihren zentralen Dateien.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-07-27
| Author: Klaus
| Änderung:
| Platzhalter 
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-22
| Author: Claude
| Änderung:
| Vollständige, eigenständige Layoutbasis der neutralen Funnel-Grid-Vorlage.
|
| Die Vorlage trägt ihr Grundlayout ab hier vollständig selbst. Sie benötigt
| zur Laufzeit weder vt-checkout.css noch checkout.css noch eine Datei aus
| 04-features/domain/domain-connection/.
|
| Sämtliche Werte sind unverändert aus dem analysierten Bestand übernommen;
| geändert wurden ausschließlich die Klassennamen. Herkunft je Regel steht
| im jeweiligen Abschnitt.
|
| Geometrie nach menschlicher Entscheidung vom 2026-08-22:
|     rechte Grid-Spalte  420px
|     column-gap           36px
| Die Connection-Sondergeometrie 360px/24px aus
| vt-domain-connection-layout.css wird ausdrücklich nicht übernommen.
|
| Bewusst NICHT enthalten: Checkout-Auswahl, Bestellung, Preise, Upsells,
| Stepper, Trust, AGB, Payment, WooCommerce, Domain-Connection-Fachdesign,
| Seitenhintergrund (.vt-checkout-bg) und der Intro-Block
| (.vt-checkout-intro / .vt-intro), für den im Vorlagenmarkup kein Element
| existiert.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-23
| Author: Claude
| Änderung:
| Drei menschlich im Browser-Inspector getestete Layoutwerte übernommen
| und die CSS-Transition der Navigations-Card entfernt.
|
| 1. .vt-funnel-grid-container  padding-bottom: 80px
|    Abstand des Vorlageninhalts zum Footer. Gesetzt am äußersten
|    neutralen Container der Vorlage; er ist das einzige Element, das
|    den gesamten Vorlageninhalt umschließt und mit seiner Unterkante
|    an den Footer grenzt. Bewusst nicht an body, Footer, .vt-page-funnel
|    oder einer Checkout-Klasse.
|
| 2. .vt-funnel-grid  padding-left: 0
|    Der linke Innenabstand lag doppelt vor (Container und Grid). Nur
|    der des Grids entfällt; der rechte 24px-Wert bleibt unverändert.
|
| 3. .vt-intro  padding-left: 20px
|    .vt-intro ist kein Element der Vorlage, sondern ein Elementor-
|    HTML-Widget oberhalb des Shortcodes. Die Regel steht hier, weil
|    dieses Stylesheet ausschließlich auf Seiten mit
|    [vorlage-funnel-grid] geladen wird und die Wirkung damit auf die
|    Vorlagenseite begrenzt bleibt. Siehe OPEN_POINTS des zugehörigen
|    Deploys.
|
| 4. .vt-funnel-grid-nav-card  transition entfernt
|    Die Bewegung der Navigations-Card wird ab hier fortlaufend je
|    Frame berechnet (siehe vt-domain-funnel-grid.php). Eine zusätzliche
|    CSS-Transition auf transform würde jeden dieser Frames erneut
|    dämpfen und das Ergebnis unkontrollierbar machen. will-change
|    bleibt erhalten.
|
| Unverändert: Grid-Geometrie 420px/36px, Card-Breiten, Farben,
| Hintergründe, Typografie, Breakpoints und das responsive Verhalten.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 2026-08-23
| Author: Claude
| Änderung:
| Menschlich getesteten Stand der Navigationscards konsolidiert.
|
| 1. padding-top: 30px am .vt-funnel-grid-container ergänzt
|    (menschlich im Browser getestet, zusätzlich zu den bereits
|    übernommenen 80px unten).
|
| 2. Die im Browser erarbeiteten Navigationsregeln lagen in drei sich
|    überlagernden .vt-funnel-grid-nav-item-Blöcken vor. Sie sind zu je
|    einem Block je Zustand zusammengeführt. Maßgeblich ist der zuletzt
|    wirksame Stand; die berechneten Werte sind unverändert:
|        min-height     72px
|        padding        0 28px
|        background     rgb(10, 20, 45)
|        border         1px solid rgb(19, 81, 137)
|        border-radius  20px
|        color          #fff
|    Active/Hover: rgb(12, 35, 77) / rgb(34, 138, 232).
|
| 3. !important entfällt vollständig.
|    Ursache der bisherigen Notwendigkeit war nicht .vt-card aus diesem
|    Stylesheet und auch nicht Astra oder Elementor, sondern ein
|    <style>-Block im Elementor-Inhalt der Seite selbst. Er definiert
|    .vt-card erneut und steht im Body, also nach diesem Stylesheet.
|    Bei gleicher Spezifität (0,1,0) gewinnt die spätere Regel.
|
|    Gelöst über die Kaskade statt über !important: die Navigationsregeln
|    tragen jetzt den Kontextselektor .vt-funnel-grid-nav-list und damit
|    die Spezifität (0,2,0). Sie gewinnen unabhängig von der
|    Dokumentreihenfolge. Die berechneten Werte bleiben gleich.
|
| 4. :focus-visible ergänzt.
|    Astra setzt a:focus { outline: thin dotted } und
|    a:focus { color: #191970 } mit Spezifität (0,1,1). Der bisherige
|    Stand neutralisierte nur die outline; die Textfarbe wäre bei
|    Tastaturfokus dunkel geworden. :focus-visible erhält jetzt denselben
|    Zustand wie Active/Hover, die fremde outline entfällt weiterhin.
|    Der Tastaturfokus bleibt damit sichtbar.
|    Keine globale Accessibility-Regel wurde verändert.
|
| Unverändert: Grid-Geometrie 420px/36px, Spaltenbreiten,
| position: sticky, Breakpoints, .vt-card, .vt-funnel-grid-nav-card,
| Typografie und der Chevron.
|--------------------------------------------------------------------------
*/

/* --------------------------------------------------------------
   Äußere Breitenbegrenzung
   Herkunft: assets/css/checkout.css, .vt-checkout-container
-------------------------------------------------------------- */

.vt-funnel-grid-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    /*
       2026-08-23 | Claude | Menschlich im Browser getestete Innenabstände
       der Vorlage: oben 30px, unten 80px als Abstand zum Footer.
       Rechts und links unverändert 24px.
    */
    padding: 30px 24px 80px;
}


/* --------------------------------------------------------------
   Funnel-Grid
   Herkunft: assets/css/vt-checkout.css, .vt-checkout-grid
             zuzüglich align-items aus assets/css/checkout.css
-------------------------------------------------------------- */

.vt-funnel-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        420px;

    gap: 36px;

    align-items: start;

    max-width: 1320px;

    margin: 0 auto;

    /*
       2026-08-23 | Claude | padding-left: 0 (menschlich im Browser
       getestet). Der linke Innenabstand kommt bereits von
       .vt-funnel-grid-container. Rechts unverändert 24px.
    */
    padding: 0 24px 0 0;
}


/* --------------------------------------------------------------
   Linke Spalte — Inhaltsbereich
   Herkunft: assets/css/checkout.css und assets/css/vt-checkout.css,
             .vt-checkout-main
-------------------------------------------------------------- */

.vt-funnel-grid-main {
    display: flex;
    flex-direction: column;

    gap: 28px;

    min-width: 0;
    width: 100%;
}


/* --------------------------------------------------------------
   Rechte Spalte — Navigationsbereich
   Herkunft: assets/css/checkout.css, .vt-checkout-sidebar

   Eine eigene width entfällt bewusst: Die Spaltenbreite ergibt sich
   aus der Grid-Definition oben; ein Grid-Element füllt seine Spalte
   ohne zusätzliche Breitenangabe. Die im Altbestand doppelt geführte
   Breite wird damit auf eine Quelle reduziert.
-------------------------------------------------------------- */

.vt-funnel-grid-nav {
    position: sticky;
    top: 120px;

    align-self: start;
}


/* --------------------------------------------------------------
   Card-Grundgeometrie
   Herkunft: assets/css/vt-checkout.css (Z. 272) und
             assets/css/checkout.css (Z. 407), jeweils .vt-card

   2026-08-24 | Claude | Konsolidierung auf die globale
   VisionThinks-Card-Basis (vt-ui/03-components/vt-cards.css).
   Die Vorlage definierte die globale Klasse .vt-card bisher selbst
   neu und hätte die neue Basis auf ihrer eigenen Seite vollständig
   überstimmt. Der Selektor ist deshalb auf den Vorlagen-Kontext
   .vt-funnel-grid begrenzt (0,2,0).

   Wertgleich: Sämtliche Deklarationen bleiben unverändert, und alle
   vier .vt-card-Elemente der Vorlage liegen innerhalb von
   .vt-funnel-grid (Renderer Z. 191). Die Navigationselemente
   behalten dadurch insbesondere Blur und Schatten, die ihre eigene
   Regel nicht führt.

   Bewusst nicht geändert: Die Navigationselemente wurden nicht auf
   .vt-card-interactive umgestellt. Ihre lokalen Zustandsregeln
   liegen bei gleicher Spezifität später in der Ladekette und würden
   die interaktive Basis überstimmen; die Umstellung wäre damit
   nicht wertgleich. Siehe OPEN_POINTS.md des Deploy-Pakets.
-------------------------------------------------------------- */

.vt-funnel-grid .vt-card {
    width: 100%;

    padding: 34px;

    background:
        rgba(10,20,45,.88);

    border:
        1px solid rgba(255,255,255,.05);

    border-radius: 28px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 18px 48px rgba(0,0,0,.22);
}


/* --------------------------------------------------------------
   Navigations-Card der rechten Spalte
   Herkunft: zusammengeführte Endfassung von .vt-order-card aus
             assets/css/checkout.css (Z. 374, 536, 871) und
             assets/css/vt-checkout.css (Z. 1122, 1191)

   will-change gehört unmittelbar zum erhaltenen Scroll-/Translate-
   Verhalten und ist deshalb enthalten.

   2026-08-23 | Claude | Die frühere
   transition: transform .22s cubic-bezier(.22,1,.36,1)
   ist entfallen. Die Bewegung wird ab hier je Frame berechnet; eine
   zusätzliche CSS-Transition würde jeden Frame ein zweites Mal dämpfen.
-------------------------------------------------------------- */

.vt-funnel-grid-nav-card {
    background: rgba(11,29,84,.82);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 24px;

    padding: 32px;

    backdrop-filter: blur(18px);

    overflow: hidden;

    /*
       Im Altbestand trug dieses Element ausschließlich
       .vt-order-card und damit keinen Schatten. Durch die
       freigegebene Zuordnung .vt-order-card ->
       .vt-card .vt-funnel-grid-nav-card käme der Schatten aus
       .vt-card jetzt zusätzlich zum Tragen. Die folgende Zeile
       stellt den bisherigen Wirkwert wieder her; sie führt keine
       neue Gestaltung ein.
    */
    box-shadow: none;

    will-change: transform;
}


/* --------------------------------------------------------------
   Gemeinsame Textbausteine
   Herkunft: assets/css/vt-checkout.css, .vt-section-title
-------------------------------------------------------------- */

.vt-section-title {
    margin-bottom: 28px;

    color: #fff;

    font-size: 24px;

    font-weight: 700;
}


/* --------------------------------------------------------------
   Intro-Block oberhalb der Vorlage

   2026-08-23 | Claude | Menschlich im Browser-Inspector getesteter
   Wert. .vt-intro gehört nicht zum Markup der Vorlage, sondern ist ein
   Elementor-HTML-Widget oberhalb des Shortcodes. Die Regel steht hier,
   weil dieses Stylesheet ausschließlich auf Seiten mit
   [vorlage-funnel-grid] geladen wird; außerhalb dieser Seiten hat sie
   keine Wirkung. Es wird ausschließlich padding-left gesetzt; h1 und p
   von .vt-intro bleiben unberührt.
-------------------------------------------------------------- */

.vt-intro {
    padding-left: 20px;
}


/* --------------------------------------------------------------
   Responsive
   Herkunft: assets/css/vt-checkout.css
-------------------------------------------------------------- */

@media (max-width: 1024px) {

    .vt-funnel-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 767px) {

    .vt-card {
        padding: 22px;
    }

}



/* --------------------------------------------------------------
   Navigationscards der rechten Spalte

   Menschlich im Browser festgelegter und getesteter Stand.

   Zur Spezifität: Die Items tragen zusätzlich .vt-card. Der
   Elementor-Inhalt der Seite bringt einen eigenen <style>-Block mit,
   der .vt-card erneut definiert und im Body steht, also nach diesem
   Stylesheet. Bei gleicher Spezifität gewinnt die spätere Regel.
   Der Kontextselektor .vt-funnel-grid-nav-list hebt die
   Navigationsregeln auf (0,2,0) und macht !important entbehrlich.
-------------------------------------------------------------- */

.vt-funnel-grid-nav-list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item {
    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 72px;

    padding: 0 28px;

    background-color: rgb(10, 20, 45);

    border: 1px solid rgb(19, 81, 137);

    border-radius: 20px;

    color: #fff;

    text-decoration: none;
}

.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item.is-active,
.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item:hover,
.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item:focus-visible {
    background-color: rgb(12, 35, 77);

    border-color: rgb(34, 138, 232);

    color: #fff;
}

/*
   Fremden Focus-Rand neutralisieren.
   Quelle: Astra main.min.css, a:focus { outline: thin dotted },
   Spezifität (0,1,1). Die folgenden Selektoren liegen bei (0,3,0) und
   gewinnen ohne !important. Der Tastaturfokus bleibt sichtbar, weil
   :focus-visible oben den Active-Zustand erhält.
*/
.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item:focus,
.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item:focus-visible,
.vt-funnel-grid-nav-list .vt-funnel-grid-nav-item:active {
    outline: none;

    box-shadow: none;
}

/*
   Chevron, ausschließlich aus border-left und border-bottom erzeugt.
   Kein Unicode-Zeichen, kein Dreieck, kein Icon. currentColor hält ihn
   in beiden Zuständen weiß.
*/
.vt-funnel-grid-nav-arrow {
    width: 8px;
    height: 8px;

    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    flex: 0 0 auto;
}