/*
=====================================================
 ECHTE FRÜNDE '22
 MODAL.CSS
 Version 4.2

 EF22 FRAMEWORK
=====================================================

Ebene 1:
- Website

Ebene 2:
- Event-Modal

Ebene 3:
- Routenauswahl

Design:
- Dark Liquid Glass
- Lichtquelle oben rechts
- bernsteinfarbene Reflexion
- deutliche räumliche Abhebung
- Titel im Hero-Verlauf
- informative Metadatentabelle
- responsive
- scrollbar nur wenn notwendig

=====================================================
*/


/* ==========================================
   EVENT MODAL
   EBENE 2
========================================== */

.modal {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        var(--space-lg);

    background:
        rgba(0, 0, 0, .66);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);

    z-index:
        var(--z-modal);

}


/* ==========================================
   EVENT MODAL SICHTBAR
========================================== */

.modal.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* ==========================================
   EVENT OVERLAY
========================================== */

.modal-overlay {

    position:
        absolute;

    inset:
        0;

}


/* ==========================================
   EVENT WINDOW
========================================== */

.modal-window {

    position:
        relative;

    width:
        min(
            100%,
            680px
        );

    max-height:
        calc(
            100dvh -
            3rem
        );

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    background:

        radial-gradient(
            circle at 96% 2%,
            rgba(255, 194, 96, .18) 0%,
            rgba(226, 149, 43, .075) 13%,
            rgba(226, 149, 43, .025) 24%,
            transparent 38%
        ),

        linear-gradient(
            150deg,
            rgba(27, 27, 26, .96) 0%,
            rgba(20, 20, 19, .975) 45%,
            rgba(13, 13, 13, .99) 100%
        );

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

    border-radius:
        var(--radius-xl);

    box-shadow:

        0 4px 8px
        rgba(0, 0, 0, .28),

        0 18px 38px
        rgba(0, 0, 0, .42),

        0 42px 90px
        rgba(0, 0, 0, .58),

        inset 1px 1px 0
        rgba(255, 255, 255, .12),

        inset -1px -1px 0
        rgba(0, 0, 0, .30);

    backdrop-filter:
        blur(28px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(118%);

    color:
        var(--color-text-on-dark);

    transform:
        translateY(26px)
        scale(.965);

    opacity:
        0;

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal),
        filter var(--transition-normal);

    z-index:
        1;

    scrollbar-width:
        thin;

}


/* ==========================================
   LICHTQUELLE OBEN RECHTS
========================================== */

.modal-window::before {

    content:
        "";

    position:
        absolute;

    top:
        -90px;

    right:
        -75px;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(255, 210, 139, .25) 0%,
            rgba(230, 157, 54, .12) 27%,
            rgba(206, 128, 27, .035) 50%,
            transparent 72%
        );

    pointer-events:
        none;

    z-index:
        8;

}


/* ==========================================
   GLASREFLEXION
========================================== */

.modal-window::after {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    border-radius:
        calc(
            var(--radius-xl) -
            1px
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .15),

        inset 1px 0 0
        rgba(255, 255, 255, .045),

        inset -1px 0 0
        rgba(255, 184, 82, .035);

    pointer-events:
        none;

    z-index:
        9;

}


/* ==========================================
   EVENT WINDOW SICHTBAR
========================================== */

.modal.show
.modal-window {

    transform:
        translateY(0)
        scale(1);

    opacity:
        1;

}


/* ==========================================
   HERO

   Die Modalbreite bleibt unverändert.

   Die Höhe des Hero wird durch das
   Seitenverhältnis des geladenen Bildes
   bestimmt.

   Beispiel:

   16:9 -> flacher Hero
   3:2  -> etwas höher
   4:3  -> noch etwas höher

   Extreme Hochformate werden über
   max-height begrenzt.
========================================== */

.modal-hero {

    position:
        relative;

    width:
        100%;

    height:
        auto;

    min-height:
        210px;

    max-height:
        min(
            52dvh,
            520px
        );

    overflow:
        hidden;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-color:
        var(--color-background-medium);

    border-radius:
        var(--radius-xl)
        var(--radius-xl)
        0
        0;

}


/* ==========================================
   KEIN BILD

   Ohne Bild bleibt eine kontrollierte
   Hero-Fläche bestehen.
========================================== */

.modal-hero--empty {

    aspect-ratio:
        16 / 8;

    min-height:
        210px;

    background:

        radial-gradient(
            circle at 85% 10%,
            rgba(255, 194, 96, .10),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(35, 35, 33, 1),
            rgba(18, 18, 18, 1)
        );

}


/* ==========================================
   FALLBACK BEI UNBEKANNTEM BILDFORMAT
========================================== */

.modal-hero--limited {

    aspect-ratio:
        16 / 9;

}


/* ==========================================
   HERO VERLAUF

   Der Verlauf beginnt weich im unteren
   Bildbereich.

   Das Bild geht dadurch optisch direkt in
   den dunklen Modal-Body über.

   Der Titel liegt innerhalb dieser
   Übergangszone.
========================================== */

.modal-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            to bottom,

            rgba(13, 13, 13, 0)
                0%,

            rgba(13, 13, 13, 0)
                38%,

            rgba(13, 13, 13, .04)
                48%,

            rgba(13, 13, 13, .12)
                57%,

            rgba(13, 13, 13, .28)
                66%,

            rgba(13, 13, 13, .50)
                75%,

            rgba(13, 13, 13, .72)
                84%,

            rgba(13, 13, 13, .91)
                93%,

            rgba(13, 13, 13, 1)
                100%
        );

    pointer-events:
        none;

    z-index:
        1;

}


/* ==========================================
   HERO CONTENT

   Der Titel sitzt im unteren dunklen
   Bereich des Bildes.

   Dadurch entsteht optisch:

   BILD
     ↓
   VERLAUF
     ↓
   TITEL
     ↓
   INFORMATIONEN

   ohne sichtbaren harten Übergang.
========================================== */

.modal-hero-content {

    position:
        absolute;

    left:
        var(--space-xl);

    right:
        var(--space-xl);

    bottom:
        1rem;

    z-index:
        3;

}


/* ==========================================
   TITEL
========================================== */

.modal-title {

    margin:
        0;

    max-width:
        100%;

    color:
        var(--color-text-on-dark);

    font-size:
        clamp(
            1.8rem,
            5vw,
            2.45rem
        );

    font-weight:
        750;

    line-height:
        1.08;

    letter-spacing:
        -.025em;

    text-shadow:

        0 2px 12px
        rgba(0, 0, 0, .70),

        0 1px 3px
        rgba(0, 0, 0, .85);

}

/* ==========================================
   BODY

   Bewusst nur kleiner Abstand zwischen
   Hero-Titel und erster Metadatenzeile.
========================================== */

.modal-body {

    position:
        relative;

    margin-top:
        0;

    padding:
        .65rem
        var(--space-xl)
        var(--space-xl);

    background:
        transparent;

    z-index:
        6;

}


/* ==========================================
   METADATEN
========================================== */

.modal-meta {

    display:
        grid;

    gap:
        0;

    margin:
        0
        0
        var(--space-lg);

}


/* ==========================================
   META ITEM

   Label und Inhalt liegen grundsätzlich
   auf derselben vertikalen Mittelachse.

   Beispiel:

   Datum   |   Freitag, 31. Juli 2026
           ─
   gedachte gemeinsame Mittelachse
========================================== */

.modal-meta-item {

    display:
        grid;

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

    gap:
        var(--space-md);

    align-items:
        center;

    min-height:
        52px;

    padding:
        .72rem
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .075);

}


/* ==========================================
   ADRESSE

   Ort ist die Ausnahme zur Zentrierung.

   Das Label "Ort" steht auf derselben
   Grundposition wie die ERSTE Adresszeile.

   Beispiel:

   Ort       Haus Hubertus
             Am Niederfeld 4
             41539 Dormagen
========================================== */

.modal-meta-item--address {

    align-items:
        start;

}


.modal-meta-item--address
.modal-meta-label {

    padding-top:
        .05rem;

}


/* ==========================================
   LETZTES META ITEM
========================================== */

.modal-meta-item:last-child {

    border-bottom:
        0;

}


/* ==========================================
   META LABEL
========================================== */

.modal-meta-label {

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    line-height:
        1.5;

}


/* ==========================================
   META VALUE
========================================== */

.modal-meta-value {

    min-width:
        0;

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-md);

    line-height:
        1.5;

    overflow-wrap:
        anywhere;

}


/* ==========================================
   ADRESSZEILEN
========================================== */

.modal-address-line {

    display:
        block;

    min-height:
        1.5em;

}


/* ==========================================
   BESCHREIBUNG
========================================== */

.modal-content {

    margin:
        0
        0
        var(--space-xl);

    padding:
        var(--space-lg);

    background:
        rgba(255, 255, 255, .045);

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

    border-radius:
        var(--radius-lg);

    color:
        var(--color-text-muted-on-dark);

    line-height:
        1.7;

}


/* ==========================================
   VERSTECKTE BESCHREIBUNG

   JS setzt hidden, wenn keine Beschreibung
   vorhanden ist.
========================================== */

.modal-content[hidden] {

    display:
        none;

}


.modal-content p {

    margin:
        0;

}


/* ==========================================
   AKTIONEN
========================================== */

.modal-actions {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap:
        var(--space-sm);

    margin:
        var(--space-lg)
        0
        var(--space-sm);

}


.modal-actions:empty {

    display:
        none;

}


/* ==========================================
   ACTION BUTTON
========================================== */

.modal-action-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        .85rem
        1.2rem;

    appearance:
        none;

    -webkit-appearance:
        none;

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

    border-radius:
        var(--radius-md);

    background:
        rgba(255, 255, 255, .075);

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .10),

        0 5px 14px
        rgba(0, 0, 0, .18);

    color:
        var(--color-text-on-dark);

    font-family:
        inherit;

    font-size:
        var(--font-size-md);

    font-weight:
        650;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);

}


.modal-action-button:hover {

    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .22);

    transform:
        translateY(-1px);

}


.modal-action-button:active {

    transform:
        translateY(1px);

}


/* ==========================================
   ROUTE BUTTON

   Leichte grüne Betonung, aber weiterhin
   Teil des Liquid-Glass-Designs.
========================================== */

.modal-route-button {

    background:

        linear-gradient(
            135deg,
            rgba(111, 191, 115, .20),
            rgba(111, 191, 115, .08)
        );

    border-color:
        rgba(111, 191, 115, .30);

}


/* ==========================================
   FOOTER
========================================== */

.modal-footer {

    margin-top:
        var(--space-sm);

    padding-top:
        var(--space-lg);

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

}


/* ==========================================
   SCHLIESSEN BUTTON
========================================== */

.modal-close-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        52px;

    padding:
        .9rem
        1.25rem;

    appearance:
        none;

    -webkit-appearance:
        none;

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

    border-radius:
        var(--radius-md);

    background:
        rgba(255, 255, 255, .075);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .09);

    color:
        var(--color-text-on-dark);

    font-family:
        inherit;

    font-size:
        var(--font-size-md);

    font-weight:
        650;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.modal-close-button:hover {

    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .22);

}


.modal-close-button:active {

    transform:
        scale(.985);

}


/* ==========================================
   FOCUS
========================================== */

.modal-action-button:focus-visible,
.modal-close-button:focus-visible {

    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;

}


/* ==========================================
   EBENE 2 ZURÜCKNEHMEN

   Wenn Ebene 3 geöffnet wird, bleibt das
   Event-Modal sichtbar, tritt aber räumlich
   etwas zurück.
========================================== */

.modal.route-is-open
.modal-window {

    transform:
        scale(.975);

    filter:
        brightness(.72)
        saturate(.82);

}

/* ==========================================
   ROUTENAUSWAHL
   EBENE 3
========================================== */

.route-modal {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        var(--space-lg);

    background:
        rgba(0, 0, 0, .36);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);

    z-index:
        calc(
            var(--z-modal) +
            10
        );

}


/* ==========================================
   ROUTENAUSWAHL SICHTBAR
========================================== */

.route-modal.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* ==========================================
   ROUTE OVERLAY

   Klick auf diese Fläche schließt nur
   Ebene 3 und führt zurück zum Event-Modal.
========================================== */

.route-modal-overlay {

    position:
        absolute;

    inset:
        0;

}


/* ==========================================
   ROUTE WINDOW
========================================== */

.route-modal-window {

    position:
        relative;

    width:
        min(
            100%,
            420px
        );

    padding:
        var(--space-xl);

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 92% 4%,
            rgba(255, 202, 117, .25) 0%,
            rgba(220, 145, 45, .09) 23%,
            transparent 50%
        ),

        linear-gradient(
            145deg,
            rgba(37, 35, 32, .97),
            rgba(18, 18, 17, .99)
        );

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

    border-radius:
        var(--radius-xl);

    box-shadow:

        0 12px 28px
        rgba(0, 0, 0, .40),

        0 38px 90px
        rgba(0, 0, 0, .68),

        inset 1px 1px 0
        rgba(255, 255, 255, .16),

        inset -1px -1px 0
        rgba(0, 0, 0, .28);

    backdrop-filter:
        blur(32px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(125%);

    color:
        var(--color-text-on-dark);

    opacity:
        0;

    transform:
        translateY(18px)
        scale(.94);

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);

    z-index:
        1;

}


/* ==========================================
   ROUTE WINDOW SICHTBAR
========================================== */

.route-modal.show
.route-modal-window {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

}


/* ==========================================
   ROUTE LICHTQUELLE

   Gleiche visuelle Sprache wie Ebene 2,
   auf der kleineren Fläche etwas stärker
   konzentriert.
========================================== */

.route-modal-window::before {

    content:
        "";

    position:
        absolute;

    top:
        -70px;

    right:
        -60px;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(255, 207, 132, .24) 0%,
            rgba(220, 146, 48, .08) 44%,
            transparent 72%
        );

    pointer-events:
        none;

    z-index:
        0;

}


/* ==========================================
   ROUTE GLASREFLEXION
========================================== */

.route-modal-window::after {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    border-radius:
        calc(
            var(--radius-xl) -
            1px
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .16),

        inset 1px 0 0
        rgba(255, 255, 255, .05),

        inset -1px 0 0
        rgba(255, 184, 82, .045);

    pointer-events:
        none;

    z-index:
        0;

}


/* ==========================================
   ROUTE HEADER
========================================== */

.route-modal-header {

    position:
        relative;

    margin-bottom:
        var(--space-lg);

    z-index:
        1;

}


/* ==========================================
   ROUTE EYEBROW
========================================== */

.route-modal-eyebrow {

    display:
        block;

    margin-bottom:
        var(--space-sm);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    line-height:
        1.3;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;

}


/* ==========================================
   ROUTE TITLE
========================================== */

.route-modal-title {

    margin:
        0;

    color:
        var(--color-text-on-dark);

    font-size:
        var(--font-size-xl);

    font-weight:
        700;

    line-height:
        1.2;

}


/* ==========================================
   ROUTE ACTIONS
========================================== */

.route-modal-actions {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        var(--space-sm);

    z-index:
        1;

}


/* ==========================================
   ROUTE PROVIDER BUTTON
========================================== */

.route-provider-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        58px;

    padding:
        1rem;

    appearance:
        none;

    -webkit-appearance:
        none;

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

    border-radius:
        var(--radius-md);

    background:
        rgba(255, 255, 255, .075);

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .10),

        0 5px 14px
        rgba(0, 0, 0, .18);

    color:
        var(--color-text-on-dark);

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);

}


/* ==========================================
   ROUTE PROVIDER HOVER
========================================== */

.route-provider-button:hover {

    background:
        rgba(255, 255, 255, .13);

    border-color:
        rgba(255, 255, 255, .22);

    transform:
        translateY(-2px);

}


/* ==========================================
   ROUTE PROVIDER ACTIVE
========================================== */

.route-provider-button:active {

    transform:
        translateY(1px);

}


/* ==========================================
   ROUTE PROVIDER FOCUS
========================================== */

.route-provider-button:focus-visible {

    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;

}


/* ==========================================
   ROUTE PROVIDER NAME
========================================== */

.route-provider-name {

    min-width:
        0;

    color:
        inherit;

    font-size:
        var(--font-size-md);

    font-weight:
        650;

    line-height:
        1.25;

    text-align:
        center;

}


/* ==========================================
   HIDDEN

   Unterstützt sowohl das Event-Modal als
   auch Ebene 3.
========================================== */

.modal [hidden],
.route-modal [hidden] {

    display:
        none !important;

}


/* ==========================================
   BODY SCROLL SPERREN
========================================== */

.no-scroll {

    overflow:
        hidden;

}


/* ==========================================
   MOBILE
========================================== */

@media (
    max-width: 768px
) {

    /* ======================================
       EVENT MODAL
    ====================================== */

    .modal {

        padding:
            14px;

    }


    /* ======================================
       EVENT WINDOW

       Nutzt fast die gesamte Displayhöhe,
       behält aber rundherum Abstand zur
       eigentlichen Website.
    ====================================== */

    .modal-window {

        width:
            100%;

        max-height:
            calc(
                100dvh -
                28px
            );

        border-radius:
            var(--radius-lg);

    }


    /* ======================================
       EVENT GLASREFLEXION
    ====================================== */

    .modal-window::after {

        border-radius:
            calc(
                var(--radius-lg) -
                1px
            );

    }


    /* ======================================
       HERO

       Auch mobil bestimmt das Bildformat
       die Höhe.

       Es wird KEIN festes aspect-ratio mehr
       durch CSS vorgegeben.

       Extreme Hochformate werden begrenzt.
    ====================================== */

    .modal-hero {

        width:
            100%;

        height:
            auto;

        min-height:
            180px;

        max-height:
            min(
                48dvh,
                440px
            );

        background-position:
            center;

        background-size:
            cover;

        background-repeat:
            no-repeat;

        border-radius:
            var(--radius-lg)
            var(--radius-lg)
            0
            0;

    }


    /* ======================================
       HERO CONTENT
    ====================================== */

    .modal-hero-content {

        left:
            var(--space-lg);

        right:
            var(--space-lg);

        bottom:
            .9rem;

    }


    /* ======================================
       TITEL
    ====================================== */

    .modal-title {

        font-size:
            clamp(
                1.7rem,
                7vw,
                2.15rem
            );

    }


    /* ======================================
       BODY
    ====================================== */

    .modal-body {

        padding:
            .55rem
            var(--space-lg)
            var(--space-lg);

    }


    /* ======================================
       META

       Auch mobil bleibt der informative
       Tabellencharakter erhalten.
    ====================================== */

    .modal-meta-item {

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

        gap:
            var(--space-sm);

    }


    /* ======================================
       ACTIONS

       Auf Mobilgeräten untereinander.
    ====================================== */

    .modal-actions {

        grid-template-columns:
            1fr;

    }


    /* ======================================
       ROUTE MODAL
    ====================================== */

    .route-modal {

        padding:
            var(--space-lg);

    }


    /* ======================================
       ROUTE WINDOW
    ====================================== */

    .route-modal-window {

        width:
            min(
                100%,
                380px
            );

        padding:
            var(--space-lg);

        border-radius:
            var(--radius-lg);

    }


    /* ======================================
       ROUTE GLASREFLEXION
    ====================================== */

    .route-modal-window::after {

        border-radius:
            calc(
                var(--radius-lg) -
                1px
            );

    }


    /* ======================================
       ROUTE PROVIDER

       Apple Karten und Google Maps werden
       mobil untereinander dargestellt.
    ====================================== */

    .route-modal-actions {

        grid-template-columns:
            1fr;

    }

}


/* ==========================================
   KLEINE DISPLAYS
========================================== */

@media (
    max-width: 420px
) {

    /* ======================================
       EVENT MODAL

       Nur noch 10px Außenabstand.
    ====================================== */

    .modal {

        padding:
            10px;

    }


    /* ======================================
       EVENT WINDOW
    ====================================== */

    .modal-window {

        max-height:
            calc(
                100dvh -
                20px
            );

    }


    /* ======================================
       HERO

       Absichtlich KEINE neue Höhe und KEIN
       neues Seitenverhältnis.

       Die Regeln aus max-width: 768px
       bleiben vollständig erhalten.
    ====================================== */


    /* ======================================
       HERO CONTENT
    ====================================== */

    .modal-hero-content {

        left:
            var(--space-md);

        right:
            var(--space-md);

        bottom:
            .8rem;

    }


    /* ======================================
       TITEL
    ====================================== */

    .modal-title {

        font-size:
            clamp(
                1.65rem,
                7.5vw,
                2rem
            );

    }


    /* ======================================
       BODY
    ====================================== */

    .modal-body {

        padding:
            .5rem
            var(--space-md)
            var(--space-md);

    }


    /* ======================================
       META

       Weiterhin zweispaltig.

       Die linke Spalte wird lediglich etwas
       schmaler, damit rechts genügend Raum
       für Datum, Adresse usw. bleibt.
    ====================================== */

    .modal-meta-item {

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

        gap:
            var(--space-sm);

    }


    /* ======================================
       META LABEL
    ====================================== */

    .modal-meta-label {

        font-size:
            var(--font-size-xs);

    }


    /* ======================================
       ROUTE MODAL
    ====================================== */

    .route-modal {

        padding:
            var(--space-md);

    }


    /* ======================================
       ROUTE WINDOW
    ====================================== */

    .route-modal-window {

        width:
            100%;

        padding:
            var(--space-lg);

    }

}


/* ==========================================
   REDUZIERTE BEWEGUNG
========================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .modal,
    .modal-window,
    .route-modal,
    .route-modal-window,
    .modal-action-button,
    .modal-close-button,
    .route-provider-button {

        transition:
            none;

    }

}