/*
 * MeerHeimatLiebe
 * R220 – Attractions / SH Planner
 *
 * Phase:
 * - volle Kartenbreite
 * - 4-Spalten-Grid Desktop
 * - große Bildflächen
 * - responsive Kartentypografie
 * - Grundlage für Planner-Overlay
 */


/* =========================================================
   1. SEITENLAYOUT
   ========================================================= */

.attractions-layout {
    display: block !important;
    width: 100%;
    max-width: none;
}


/* =========================================================
   2. KARTEN-GRID
   ========================================================= */

.attraction-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(0.9rem, 1.25vw, 1.35rem) !important;
    width: 100%;
    max-width: none;
    align-items: stretch;
}


/* =========================================================
   3. KARTE
   ========================================================= */

.attraction-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 20px !important;
}


/* =========================================================
   4. BILD
   ========================================================= */

.attraction-card__media {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 20px 20px 0 0;
    background: rgba(8, 28, 40, 0.8);
}

.attraction-card__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover !important;
    object-position: center center;
    transform: scale(1.001);
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.attraction-card:hover .attraction-card__media img {
    transform: scale(1.045);
}


/* =========================================================
   5. KARTENINHALT
   ========================================================= */

.attraction-card__content {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;

    /*

     * Auf kleinen Karten wird automatisch kompakter.
     */
    padding:
        clamp(0.8rem, 1vw, 1.15rem)
        clamp(0.85rem, 1vw, 1.15rem)
        clamp(0.9rem, 1vw, 1.15rem) !important;
}


/* =========================================================
   6. KATEGORIE / BADGE
   ========================================================= */

.attraction-card__top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 30px;
}

.attraction-card__top,
.attraction-card__top *,
.attraction-card__category,
.attraction-card__badge {
    font-size: clamp(
        0.68rem,
        0.18vw + 0.62rem,
        0.78rem
    ) !important;

    line-height: 1.2;
}


/* =========================================================
   7. TITEL
   ========================================================= */

.attraction-card h3 {
    margin:
        clamp(0.55rem, 0.7vw, 0.75rem)
        0
        clamp(0.4rem, 0.55vw, 0.55rem) !important;

    /*
     * Deutlich größer als bisher.
     * clamp sorgt für saubere Skalierung zwischen

     */
    font-size: clamp(
        1rem,
        0.45vw + 0.82rem,
        1.22rem
    ) !important;

    line-height: 1.22 !important;
    font-weight: 750 !important;
    letter-spacing: -0.015em;

    /*
     * Lange Namen dürfen umbrechen.
     */
    overflow-wrap: anywhere;
    hyphens: auto;
}


/* =========================================================
   8. BESCHREIBUNG
   ========================================================= */

.attraction-card__content > p {
    margin:
        0
        0
        clamp(0.55rem, 0.8vw, 0.8rem) !important;

    /*
     * Wesentlich besser lesbar:
     * Desktop ungefähr 14–16 px.
     */
    font-size: clamp(
        0.84rem,
        0.28vw + 0.76rem,
        0.98rem
    ) !important;

    line-height: 1.48 !important;
    font-weight: 450;

    /*
     * Karten bleiben trotzdem kontrolliert.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}


/* =========================================================
   9. META-INFORMATIONEN
   ========================================================= */

.attraction-card__meta {
    margin-top: auto !important;

    font-size: clamp(
        0.76rem,
        0.22vw + 0.68rem,
        0.88rem
    ) !important;

    line-height: 1.35;
}


/*
 * Falls die Meta-Zeilen eigene Elemente besitzen,
 * übernehmen sie ebenfalls eine lesbare Größe.
 */
.attraction-card__meta *,
.attraction-card__details *,
.attraction-card__location *,
.attraction-card__duration * {
    font-size: inherit;
}


/* =========================================================
   10. BEWERTUNG
   ========================================================= */

.attraction-rating {
    margin-top: 0.55rem;

    font-size: clamp(
        0.78rem,
        0.22vw + 0.7rem,
        0.9rem
    ) !important;

    line-height: 1.3;
}


/* =========================================================
   11. DETAILS
   ========================================================= */

.attraction-card details {
    margin-top: 0.55rem;
}

.attraction-card details summary {
    font-size: clamp(
        0.78rem,
        0.22vw + 0.7rem,
        0.9rem
    ) !important;

    line-height: 1.35;
}


/* =========================================================
   12. AKTIONEN
   ========================================================= */

.attraction-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.4rem, 0.5vw, 0.6rem);
    margin-top: clamp(0.7rem, 0.8vw, 0.9rem) !important;
}

.attraction-card__actions .btn {
    flex: 1 1 100px;
    min-width: 0;

    /*
     * Buttons ebenfalls etwas größer.
     */
    min-height: 38px;
    padding:
        0.55rem
        clamp(0.65rem, 0.8vw, 0.9rem) !important;

    font-size: clamp(
        0.76rem,
        0.22vw + 0.68rem,
        0.88rem
    ) !important;

    line-height: 1.2;
    white-space: nowrap;
}


/* =========================================================
   13. PLANNER – VORSTUFE OVERLAY
   ========================================================= */

.attractions-layout > .trip-plan {
    position: fixed !important;

    top: var(--header-offset, 92px);
    right: 1rem;
    bottom: 1rem;

    width: min(430px, calc(100vw - 2rem));
    max-width: 430px;
    max-height: none !important;

    margin: 0;

    z-index: 1200;
}


/* alter Reopen-Button */
.trip-plan-reopen {
    position: fixed !important;

    right: 1.25rem;
    bottom: 1.25rem;

    z-index: 1190;
}


/* =========================================================
   14. DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .attraction-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    .attraction-card h3 {
        font-size: clamp(
            1.05rem,
            0.42vw + 0.88rem,
            1.28rem
        ) !important;
    }

    .attraction-card__content > p {
        font-size: clamp(
            0.88rem,
            0.28vw + 0.8rem,
            1rem
        ) !important;
    }
}


/* =========================================================
   15. TABLET / KLEINER DESKTOP
   ========================================================= */


/* =========================================================
   16. TABLET
   ========================================================= */


/* =========================================================
   17. SMARTPHONE
   ========================================================= */


/* =========================================================
   18. SEHR KLEINE SMARTPHONES
   ========================================================= */


/* =========================================================
   19. REDUZIERTE BEWEGUNG
   ========================================================= */

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

    .attraction-card__media img {
        transition: none;
    }

    .attraction-card:hover .attraction-card__media img {
        transform: none;
    }
}


/* =========================================================
   R220.2 – SH PLANNER OVERLAY
   ========================================================= */


/* ---------------------------------------------------------
   Backdrop
   --------------------------------------------------------- */

.trip-plan-backdrop {
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(2, 17, 29, 0.58),
            rgba(3, 31, 46, 0.48)
        );

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

    z-index: 1190;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.trip-plan-backdrop[hidden] {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------
   Planner selbst
   --------------------------------------------------------- */

.attractions-layout > .trip-plan {
    position: fixed !important;

    top: max(78px, env(safe-area-inset-top));
    right: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.75rem, 2vw, 1.5rem);

    width: min(430px, calc(100vw - 1.5rem));
    max-width: 430px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(82, 215, 239, 0.42) !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(5, 48, 68, 0.97),
            rgba(2, 23, 36, 0.985)
        ) !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255,255,255,0.025) inset;

    z-index: 1200;

    isolation: isolate;

    transform: translateX(0);
    opacity: 1;

    transition:
        transform 0.3s ease,
        opacity 0.22s ease;
}


/*
 * Das hidden-Attribut wird von JS gesetzt.
 */
.attractions-layout > .trip-plan[hidden] {
    display: none !important;

    transform: translateX(calc(100% + 2rem));
    opacity: 0;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Planner Header
   --------------------------------------------------------- */

.trip-plan__head {
    flex: 0 0 auto;

    padding:
        1.05rem
        1.1rem
        0.9rem;

    border-bottom:
        1px solid
        rgba(113, 218, 236, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(17, 91, 112, 0.34),
            rgba(17, 91, 112, 0.08)
        );
}

.trip-plan__head h2 {
    margin: 0.12rem 0 0;

    font-size: clamp(
        1.25rem,
        0.8vw + 1rem,
        1.55rem
    ) !important;

    line-height: 1.15;
    letter-spacing: -0.02em;
}

.trip-plan__head .eyebrow {
    margin: 0;

    color: #62d8ec;

    font-size: 0.7rem !important;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Header Actions
   --------------------------------------------------------- */

.trip-plan__head-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


/* ---------------------------------------------------------
   Planner Body
   --------------------------------------------------------- */

.trip-plan__body {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 1rem;

    scrollbar-width: thin;
}

.trip-plan__body > p:first-child {
    margin-top: 0;
    margin-bottom: 0.9rem;

    color: rgba(226, 246, 250, 0.78);

    font-size: 0.9rem !important;
    line-height: 1.48;
}


/* ---------------------------------------------------------
   Gespeicherte Ziele
   --------------------------------------------------------- */

.trip-plan__body ol {
    display: flex;
    flex-direction: column;

    gap: 0.55rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.trip-plan__body ol > li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.7rem;

    min-width: 0;

    padding: 0.7rem 0.75rem;

    border:
        1px solid
        rgba(93, 206, 228, 0.2);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(12, 78, 98, 0.58),
            rgba(4, 42, 59, 0.68)
        );
}

.trip-plan__body ol > li > span:first-child {
    min-width: 0;
}

.trip-plan__body ol strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.88rem;
    line-height: 1.3;
}

.trip-plan__body ol small {
    display: block;

    margin-top: 0.18rem;

    color: rgba(190, 226, 233, 0.68);

    font-size: 0.74rem;
}


/* ---------------------------------------------------------
   Reihenfolge-Buttons
   --------------------------------------------------------- */

.trip-item-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
}

.trip-item-actions button {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 8px;

    border:
        1px solid
        rgba(100, 211, 231, 0.24);

    background: rgba(4, 31, 44, 0.72);

    color: #dffaff;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.trip-item-actions button:hover:not(:disabled) {
    background: rgba(12, 103, 126, 0.72);
    border-color: rgba(100, 211, 231, 0.6);
    transform: translateY(-1px);
}

.trip-item-actions button:disabled {
    opacity: 0.3;
    cursor: default;
}


/* ---------------------------------------------------------
   Zusammenfassung
   --------------------------------------------------------- */

.trip-plan__summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    margin-top: 0.8rem;
    padding: 0.85rem 0.9rem;

    border-radius: 13px;

    background:
        rgba(15, 103, 127, 0.25);

    border:
        1px solid
        rgba(92, 209, 231, 0.18);

    font-size: 0.82rem;
    line-height: 1.4;
}

.trip-plan__summary strong {
    font-size: 0.9rem;
}

.trip-plan__summary span {
    color: rgba(209, 238, 243, 0.72);
}


/* ---------------------------------------------------------
   Route Buttons
   --------------------------------------------------------- */

.trip-plan__route-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;

    gap: 0.55rem;

    margin-top: 0.75rem;
}

.trip-plan__route-actions .btn {
    min-height: 42px;

    font-size: 0.82rem !important;
}


/* ---------------------------------------------------------
   Route Ergebnis
   --------------------------------------------------------- */

.trip-route-result {
    margin-top: 0.8rem;
    padding: 0.9rem;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 103, 126, 0.3),
            rgba(5, 49, 68, 0.46)
        );

    border:
        1px solid
        rgba(95, 216, 236, 0.22);
}

.trip-route-result__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 1rem;
}

.trip-route-result__head strong {
    font-size: 1.15rem;
}

.trip-route-result__head span {
    color: rgba(214, 239, 243, 0.72);
    font-size: 0.82rem;
}

.trip-route-result p {
    margin: 0.45rem 0 0.75rem;

    color: rgba(213, 239, 243, 0.72);

    font-size: 0.75rem;
    line-height: 1.45;
}

.trip-route-result ol {
    gap: 0.35rem !important;
}

.trip-route-result li {
    padding: 0.45rem 0.55rem !important;

    background: rgba(3, 27, 39, 0.38) !important;

    font-size: 0.76rem;
}


/* ---------------------------------------------------------
   Hinweis
   --------------------------------------------------------- */

.trip-plan__notice {
    margin: 0.8rem 0 0;

    color: rgba(190, 224, 231, 0.56);

    font-size: 0.7rem !important;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Mein-Plan-Button
   --------------------------------------------------------- */

.trip-plan-reopen {
    position: fixed !important;

    right: clamp(0.85rem, 2vw, 1.5rem);
    bottom: max(0.85rem, env(safe-area-inset-bottom));

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    padding:
        0.65rem
        0.9rem
        0.65rem
        1rem !important;

    border-radius: 999px !important;

    border:
        1px solid
        rgba(94, 214, 235, 0.55) !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 89, 112, 0.97),
            rgba(3, 52, 70, 0.97)
        ) !important;

    color: #ecfcff !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255,255,255,0.025) inset;

    z-index: 1195;

    font-size: 0.84rem !important;
    font-weight: 800;

    letter-spacing: 0.01em;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.trip-plan-reopen:hover {
    transform: translateY(-2px);

    border-color:
        rgba(94, 214, 235, 0.85) !important;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(41, 190, 219, 0.12);
}

.trip-plan-reopen__label {
    white-space: nowrap;
}

.trip-plan-reopen__count {
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 0.35rem;

    border-radius: 999px;

    background:
        rgba(5, 25, 37, 0.75);

    border:
        1px solid
        rgba(110, 222, 240, 0.3);

    font-size: 0.72rem;
}


/* Wenn noch keine Ziele vorhanden sind */
.trip-plan-reopen:not(.has-items) .trip-plan-reopen__count {
    opacity: 0.65;
}


/* ---------------------------------------------------------
   Desktop / große Displays
   --------------------------------------------------------- */

@media (min-width: 1201px) {
    .attractions-layout > .trip-plan {
        width: 430px;
    }
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   Smartphone
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

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

    .trip-plan-backdrop,
    .attractions-layout > .trip-plan,
    .trip-plan-reopen {
        transition: none;
    }
}


/* =========================================================
   R220.3 – ZENTRIERTES PLANNER MODAL
   ========================================================= */


/*
 * Der Hintergrund wird nur abgedunkelt.
 *
 * KEIN backdrop-filter / blur!
 *
 * Dadurch bleibt die Seite im Hintergrund erkennbar
 * und der Planner selbst kann niemals mitgeblurred werden.
 */
.trip-plan-backdrop {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background:
        rgba(2, 16, 27, 0.68) !important;

    /*
     * Ganz bewusst KEIN:
     * backdrop-filter: blur(...)
     *
     * Der Hintergrund soll dunkel werden,
     * aber nicht komplett verschwimmen.
     */

    z-index: 2000 !important;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.trip-plan-backdrop[hidden] {
    display: block !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}


/*
 * =========================================================
 * DER PLANNER
 * =========================================================
 *
 * Jetzt echtes zentriertes Modal.
 */

.attractions-layout > .trip-plan {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    width: min(760px, calc(100vw - 2rem)) !important;
    max-width: 760px !important;

    height: min(820px, calc(100vh - 5rem)) !important;
    max-height: calc(100vh - 5rem) !important;

    margin: 0 !important;

    transform:
        translate(-50%, -50%) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    z-index: 2100 !important;

    opacity: 1;

    border-radius: 26px !important;

    border:
        1px solid
        rgba(93, 220, 241, 0.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(6, 53, 72, 0.985),
            rgba(2, 25, 39, 0.99)
        ) !important;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 0 45px rgba(42, 193, 220, 0.08);

    isolation: isolate;

    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(.2,.75,.2,1);
}


/*
 * Geschlossener Zustand.
 *
 * WICHTIG:
 * Nicht display:none verwenden,
 * damit die Animation funktionieren kann.
 */

.attractions-layout > .trip-plan[hidden] {
    display: none !important;

    opacity: 0 !important;

    pointer-events: none !important;

    transform:
        translate(-50%, -46%)
        scale(0.97) !important;
}


/*
 * Geöffneter Planner
 */

.attractions-layout > .trip-plan:not([hidden]) {
    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1) !important;
}


/*
 * =========================================================
 * PLANNER HEADER
 * =========================================================
 */

.attractions-layout > .trip-plan .trip-plan__head {
    flex: 0 0 auto;

    padding:
        1.25rem 1.35rem 1.05rem;

    background:
        linear-gradient(
            180deg,
            rgba(13, 92, 115, 0.48),
            rgba(8, 56, 74, 0.16)
        );

    border-bottom:
        1px solid
        rgba(104, 218, 237, 0.2);
}


/*
 * Titel etwas größer, weil das Fenster jetzt
 * bewusst als eigenständiger Planner auftritt.
 */

.attractions-layout > .trip-plan .trip-plan__head h2 {
    font-size: clamp(
        1.35rem,
        1vw + 1rem,
        1.75rem
    ) !important;

    line-height: 1.15;
}


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

.attractions-layout > .trip-plan .trip-plan__body {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        1.15rem 1.35rem 1.35rem;
}


/*
 * =========================================================
 * ZIELE
 * =========================================================
 */

.attractions-layout > .trip-plan .trip-plan__body ol {
    gap: 0.65rem;
}

.attractions-layout > .trip-plan .trip-plan__body ol > li {
    padding:
        0.8rem 0.9rem;

    border-radius: 14px;
}


/*
 * =========================================================
 * ROUTE BERECHNEN
 * =========================================================
 */

.attractions-layout > .trip-plan .trip-plan__route-actions {
    grid-template-columns: 1fr 1fr;

    gap: 0.7rem;

    margin-top: 1rem;
}

.attractions-layout > .trip-plan .trip-plan__route-actions .btn {
    min-height: 46px;

    font-size: 0.88rem !important;
}


/*
 * =========================================================
 * MEIN-PLAN-BUTTON
 * =========================================================
 *
 * Bleibt immer sichtbar, wenn der Planner geschlossen ist.
 */

.trip-plan-reopen {
    z-index: 1990 !important;
}


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

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


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

 * =========================================================
 *
 * Auf Mobilgeräten wird das Modal nahezu bildschirmfüllend.
 */


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


/*
 * =========================================================
 * REDUCED MOTION
 * =========================================================
 */

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

    .trip-plan-backdrop,
    .attractions-layout > .trip-plan {
        transition: none !important;
    }
}


/* =========================================================
   R220.4 – VEREINFACHTER PLANNER-KOPF
   ========================================================= */

.trip-plan__head {
    position: relative;
}

.trip-plan__head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}


/*
 * Einziger Button im Planner-Kopf:
 * schließen
 */

.trip-plan__close {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid
        rgba(104, 220, 238, 0.38);

    background:
        rgba(3, 31, 44, 0.72);

    color: rgba(235, 252, 255, 0.94);

    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.trip-plan__close:hover {
    transform: rotate(90deg);

    background:
        rgba(112, 31, 58, 0.72);

    border-color:
        rgba(239, 91, 157, 0.7);

    box-shadow:
        0 0 20px
        rgba(239, 91, 157, 0.14);
}

.trip-plan__close:focus-visible {
    outline:
        2px solid
        rgba(99, 218, 238, 0.9);

    outline-offset: 3px;
}

/* =========================================================
   R220.5 – PLANNER GEAR / CLOSE
   ========================================================= */

.trip-plan__head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}


/*
 * EINZIGER BUTTON IM PLANNER-KOPF
 *
 * Das Steuerrad bleibt bewusst erhalten.
 * Es schließt den Planner.
 */

.trip-plan__close {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(94, 218, 239, 0.55);

    border-radius: 50%;

    background:
        rgba(4, 39, 54, 0.82);

    color:
        rgba(255, 205, 62, 0.96);

    cursor: pointer;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.025) inset,
        0 0 18px rgba(38, 201, 226, .08);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

.trip-plan__close:hover {
    transform: rotate(12deg) scale(1.06);

    background:
        rgba(7, 63, 79, 0.95);

    border-color:
        rgba(78, 224, 244, 0.95);

    color:
        #ffd04b;

    box-shadow:
        0 0 22px rgba(38, 209, 232, .2),
        0 0 0 1px rgba(255,255,255,.035) inset;
}

.trip-plan__close:focus-visible {
    outline:
        2px solid
        rgba(90, 221, 240, .95);

    outline-offset: 3px;
}


/*
 * =========================================================
 * EIGENER HOVER-HINWEIS
 * =========================================================
 *
 * title bleibt zusätzlich für native Browser-Unterstützung.
 */

.trip-plan__close[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 2300;

    width: max-content;
    max-width: 220px;

    padding:
        .55rem .75rem;

    border:
        1px solid
        rgba(91, 218, 239, .32);

    border-radius: 9px;

    background:
        rgba(3, 25, 37, .96);

    color:
        rgba(239, 251, 254, .96);

    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;

    box-shadow:
        0 12px 30px rgba(0,0,0,.38);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-4px);

    pointer-events: none;

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

.trip-plan__close[data-tooltip]:hover::after,
.trip-plan__close[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}


/*
 * =========================================================
 * PLAN LEEREN
 * =========================================================
 */

.trip-plan__footer {
    display: flex;
    justify-content: center;

    padding:
        1rem 0 .25rem;
}

.trip-plan__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .5rem;

    min-height: 42px;

    padding:
        .65rem 1.15rem;

    border:
        1px solid
        rgba(242, 91, 154, .72);

    border-radius: 999px;

    background:
        rgba(79, 18, 48, .16);

    color:
        rgba(255, 126, 176, .98);

    font-size: .84rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.trip-plan__clear:hover {
    transform: translateY(-1px);

    background:
        rgba(119, 27, 67, .32);

    border-color:
        rgba(255, 105, 166, .98);

    color:
        #ff9bc2;

    box-shadow:
        0 0 20px rgba(241, 76, 143, .12);
}

.trip-plan__clear:focus-visible {
    outline:
        2px solid
        rgba(255, 113, 169, .9);

    outline-offset: 3px;
}


/*
 * Nur der neue Footer-Button darf .trip-plan__clear sein.
 * Alte Kopf-Positionen werden nicht mehr verwendet.
 */

.trip-plan__head .trip-plan__clear {
    display: none !important;
}


/*

 */


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

    .trip-plan__close,
    .trip-plan__clear {
        transition: none !important;
    }

    .trip-plan__close[data-tooltip]::after {
        transition: none !important;
    }
}


/* =========================================================
   R220.6 – PLAN LEEREN BUTTON FINAL FIX
   ========================================================= */

.trip-plan__footer .trip-plan__clear {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    min-height: 40px;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: .5rem;

    padding:
        .6rem 1.15rem !important;

    white-space: nowrap !important;

    line-height: 1.1 !important;

    border-radius: 999px;
}

.trip-plan__footer .trip-plan__clear span {
    display: inline !important;

    width: auto !important;
    max-width: none !important;

    white-space: nowrap !important;

    line-height: 1.1 !important;
}

.trip-plan__footer .trip-plan__clear svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;
}


/* Auf kleinen Displays trotzdem kompakt halten */


/* =========================================================
   MHL R220.8
   SH-TAGESPLAN – MARITIME PREMIUM DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   PLANNER – Grundfläche
   --------------------------------------------------------- */

.trip-plan {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(24, 111, 132, .20),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(4, 51, 68, .98) 0%,
            rgba(3, 35, 49, .99) 58%,
            rgba(2, 27, 40, 1) 100%
        );

    color: #eefcff;

    border:
        1px solid
        rgba(82, 207, 229, .48);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, .52),
        0 0 50px rgba(0, 157, 191, .08),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.trip-plan__head {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-height: 112px;

    padding:
        1.65rem 1.9rem 1.35rem;

    border-bottom:
        1px solid
        rgba(79, 205, 228, .34);

    background:
        linear-gradient(
            180deg,
            rgba(8, 65, 84, .72),
            rgba(5, 48, 65, .42)
        );
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.trip-plan__head .eyebrow {
    margin: 0 0 .35rem;

    color:
        #58d9ee;

    font-size:
        clamp(.68rem, .75vw, .82rem);

    font-weight: 800;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.trip-plan__head h2 {
    margin: 0;

    color:
        #f2fbfd;

    font-size:
        clamp(1.65rem, 2.1vw, 2.45rem);

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -.025em;

    text-shadow:
        0 2px 16px rgba(0, 0, 0, .22);
}


/* ---------------------------------------------------------
   ANKER / SCHLIESSEN
   --------------------------------------------------------- */

.trip-plan__head-actions {
    position: relative;

    margin-left: auto;

    padding-left: 1rem;
}

.trip-plan__close {
    width: 46px;
    height: 46px;

    border: 0 !important;

    background:
        rgba(10, 70, 88, .72) !important;

    color:
        #ffd05a !important;

    box-shadow:
        0 0 0 1px rgba(86, 213, 234, .24) inset,
        0 7px 20px rgba(0, 0, 0, .16) !important;

    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease;
}

.trip-plan__close:hover {
    transform:
        rotate(8deg)
        scale(1.08);

    background:
        rgba(15, 92, 111, .92) !important;

    color:
        #ffd968 !important;
}


/* ---------------------------------------------------------
   NAUTISCHE TRENNLINIE
   --------------------------------------------------------- */

.trip-plan__head::after {
    content: "≈≈≈≈≈≈≈≈≈≈≈   ⚓   ≈≈≈≈≈≈≈≈≈≈≈";

    position: absolute;

    left: 50%;
    bottom: -13px;

    transform: translateX(-50%);

    z-index: 4;

    padding:
        0 .8rem;

    background:
        #063446;

    color:
        #35c4df;

    font-size:
        clamp(.85rem, 1.2vw, 1.25rem);

    letter-spacing:
        .15em;

    white-space:
        nowrap;

    pointer-events:
        none;
}


/* ---------------------------------------------------------
   PLANNER BODY
   --------------------------------------------------------- */

.trip-plan__body {
    position: relative;

    padding:
        1.55rem 1.9rem 1.7rem;
}


/* ---------------------------------------------------------
   EINLEITUNG
   --------------------------------------------------------- */

.trip-plan__intro,
.trip-plan__body > p:first-child {
    color:
        rgba(222, 244, 249, .82);

    font-size:
        clamp(.92rem, 1vw, 1.08rem);

    line-height:
        1.55;
}


/* ---------------------------------------------------------
   ZIELKARTEN
   --------------------------------------------------------- */

.trip-plan__item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        1.05rem;

    min-height:
        96px;

    margin:
        0 0 .9rem;

    padding:
        1rem 1.05rem;

    border:
        1px solid
        rgba(47, 177, 204, .28);

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            rgba(9, 76, 97, .78),
            rgba(5, 55, 72, .60)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 8px 24px rgba(0, 0, 0, .10);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.trip-plan__item:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(66, 202, 226, .52);

    background:
        linear-gradient(
            135deg,
            rgba(11, 85, 106, .84),
            rgba(5, 61, 79, .68)
        );
}


/* ---------------------------------------------------------
   POSITION
   --------------------------------------------------------- */

.trip-plan__item-index {
    width: 48px;
    height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    border:
        2px solid
        rgba(54, 210, 232, .85);

    border-radius:
        50%;

    background:
        rgba(2, 48, 65, .82);

    color:
        #f1fbfd;

    font-size:
        1.2rem;

    font-weight:
        800;

    box-shadow:
        0 0 18px rgba(44, 200, 225, .10);
}


/* ---------------------------------------------------------
   ZIELTITEL
   --------------------------------------------------------- */

.trip-plan__item-title {
    margin: 0;

    color:
        #f2fbfd;

    font-size:
        clamp(1rem, 1.25vw, 1.28rem);

    line-height:
        1.25;

    font-weight:
        800;
}

.trip-plan__item-region {
    margin-top:
        .28rem;

    color:
        rgba(187, 221, 229, .78);

    font-size:
        clamp(.78rem, .9vw, .95rem);

    line-height:
        1.35;
}


/* ---------------------------------------------------------
   ITEM ACTIONS
   --------------------------------------------------------- */

.trip-plan__item-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        .5rem;
}

.trip-plan__item-actions button {
    width: 43px;
    height: 43px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(54, 190, 215, .30);

    border-radius:
        50%;

    background:
        rgba(3, 48, 65, .66);

    color:
        rgba(225, 247, 251, .92);

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.trip-plan__item-actions button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        rgba(64, 207, 229, .72);

    background:
        rgba(11, 87, 106, .92);

    color:
        #fff;
}

.trip-plan__item-actions button:last-child:hover {
    border-color:
        rgba(243, 104, 160, .75);

    color:
        #ff9fc5;
}


/* ---------------------------------------------------------
   ROUTE BUTTONS
   --------------------------------------------------------- */

.trip-plan__actions {
    display:
        grid;

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

    gap:
        1rem;

    margin-top:
        1.2rem;
}

.trip-plan__actions .btn {
    min-height:
        58px;

    border-radius:
        16px;

    font-size:
        clamp(.92rem, 1vw, 1.08rem);

    font-weight:
        800;

    letter-spacing:
        -.01em;
}

.trip-plan__actions .btn.primary {
    background:
        linear-gradient(
            135deg,
            #1494ae,
            #0b7891
        );

    border:
        1px solid
        rgba(94, 228, 242, .82);

    box-shadow:
        0 10px 25px rgba(4, 112, 139, .18);
}

.trip-plan__actions .btn.secondary {
    background:
        rgba(2, 35, 50, .62);

    border:
        1px solid
        rgba(70, 189, 212, .64);
}


/* ---------------------------------------------------------
   HINWEIS / LEUCHTTURM-TRENNER
   --------------------------------------------------------- */

.trip-plan__notice {
    position: relative;

    margin:
        1.35rem 0 0;

    padding:
        1.35rem 1rem 0;

    border-top:
        1px solid
        rgba(54, 190, 216, .30);

    color:
        rgba(193, 224, 231, .72);

    font-size:
        clamp(.72rem, .82vw, .88rem);

    line-height:
        1.5;

    text-align:
        center;
}

.trip-plan__notice::before {
    content: "⚓";

    position: absolute;

    top: -17px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        0 .7rem;

    background:
        #063446;

    color:
        #5acde2;

    font-size:
        1.35rem;

    line-height:
        1;
}


/* ---------------------------------------------------------
   PLAN LEEREN
   --------------------------------------------------------- */

.trip-plan__footer {
    position: relative;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    margin-top:
        2rem;

    padding:
        1.1rem 0 .45rem;
}


/*
 * KEINE BUTTON-UMRANDUNG
 */

.trip-plan__footer .trip-plan__clear {
    position: relative;

    display:
        inline-flex !important;

    flex:
        0 0 auto !important;

    align-items:
        center;
    justify-content:
        center;

    gap:
        .6rem;

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        42px;

    padding:
        .45rem 1.25rem !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        #f3c54f;

    font-size:
        .92rem;

    font-weight:
        800;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

    box-shadow:
        none !important;

    white-space:
        nowrap !important;

    cursor:
        pointer;

    transition:
        color .18s ease,
        transform .18s ease;
}


/*
 * Nautische Linien links/rechts
 */

.trip-plan__footer .trip-plan__clear::before,
.trip-plan__footer .trip-plan__clear::after {
    content: "";

    position: absolute;

    top: 50%;

    width:
        clamp(48px, 7vw, 110px);

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(54, 192, 216, .72)
        );

    transform:
        translateY(-50%);
}

.trip-plan__footer .trip-plan__clear::before {
    right:
        100%;

    margin-right:
        .5rem;
}

.trip-plan__footer .trip-plan__clear::after {
    left:
        100%;

    margin-left:
        .5rem;

    background:
        linear-gradient(
            90deg,
            rgba(54, 192, 216, .72),
            transparent
        );
}

.trip-plan__footer .trip-plan__clear:hover {
    transform:
        translateY(-2px);

    color:
        #ffd96b;
}


/*
 * Müll-Symbol über dem Text
 */

.trip-plan__footer .trip-plan__clear svg {
    position: absolute;

    bottom:
        calc(100% - 4px);

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        25px;

    height:
        25px;

    color:
        #67cde0;

    opacity:
        .92;
}

.trip-plan__footer .trip-plan__clear span {
    display:
        inline !important;

    width:
        auto !important;

    max-width:
        none !important;

    white-space:
        nowrap !important;

    line-height:
        1;
}


/* ---------------------------------------------------------
   MARITIMER UNTERER BEREICH
   --------------------------------------------------------- */

.trip-plan::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height:
        105px;

    pointer-events:
        none;

    opacity:
        .42;

    background:
        radial-gradient(
            ellipse at 12% 100%,
            rgba(20, 123, 150, .26),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 88% 100%,
            rgba(20, 123, 150, .22),
            transparent 30%
        ),
        repeating-radial-gradient(
            ellipse at 50% 115%,
            transparent 0 22px,
            rgba(39, 167, 191, .13) 23px 25px,
            transparent 26px 43px
        );

    mask-image:
        linear-gradient(
            to top,
            #000,
            transparent
        );
}


/* ---------------------------------------------------------
   WAVE-DEKORATION
   --------------------------------------------------------- */

.trip-plan__body::after {
    content:
        "〰 〰 〰 〰 〰 〰 〰 〰 〰";

    position:
        absolute;

    left:
        50%;

    bottom:
        .25rem;

    transform:
        translateX(-50%);

    color:
        rgba(48, 174, 197, .20);

    font-size:
        1.1rem;

    letter-spacing:
        .15rem;

    pointer-events:
        none;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .trip-plan,
    .trip-plan__item,
    .trip-plan__close,
    .trip-plan__clear,
    .trip-plan__actions .btn {
        transition:
            none !important;
    }
}


/* ============================================================
   MHL – SH-PLANNER
   Nur äußere Ecken abrunden.
   Alle übrigen Styles bleiben unverändert.
   ============================================================ */

[data-attractions-planner] {
    border-radius: 24px;
    overflow: hidden;
}


/* ============================================================
   MHL – Attractions / Lighthouse Filter Toolbar
   Nur die äußeren Ecken des großen Filterkastens abrunden.
   Alle übrigen Seiten- und Planner-Regeln bleiben unverändert.
   ============================================================ */

.attractions-toolbar.glass-card {
    border-radius: 24px !important;
    overflow: hidden;
}


/* ============================================================
   MHL_SHEEP_TITLE_FINAL_V4
   Schafe klein rechts neben SH-Tagesplan
   ============================================================ */

/* Dekorative Wellen/Anker des Planner-Headers entfernen */
[data-trip-plan] .trip-plan__head::before,
[data-trip-plan] .trip-plan__head::after,
[data-trip-plan] .trip-plan__header::before,
[data-trip-plan] .trip-plan__header::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* Header ist Bezugspunkt für die kleine Grafik */
[data-trip-plan] .trip-plan__head {
    position: relative !important;
    overflow: visible !important;
}

/* Titelgruppe darf ihre normale Breite behalten */
[data-trip-plan] .trip-plan__head h2 {
    position: relative !important;
    z-index: 5 !important;
}

/* Runtime-Schafgrafik */
[data-trip-plan] img.mhl-plan-sheep,
[data-trip-plan] .mhl-plan-sheep {
    position: absolute !important;
    left: 235px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;

    height: auto !important;
    max-height: 60px !important;

    transform: translateY(-50%) !important;
    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 4 !important;
    pointer-events: none !important;
}

/* Falls der Runtime-Wrapper die Größe erzwingt */
[data-trip-plan] .mhl-plan-sheep-wrap,
[data-trip-plan] .mhl-plan-sheep-wrapper {
    position: absolute !important;
    left: 235px !important;
    top: 50% !important;
    width: 125px !important;
    height: 60px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1100px) {
    [data-trip-plan] img.mhl-plan-sheep,
    [data-trip-plan] .mhl-plan-sheep {
        left: 190px !important;
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;
        max-height: 52px !important;
    }

    [data-trip-plan] .mhl-plan-sheep-wrap,
    [data-trip-plan] .mhl-plan-sheep-wrapper {
        left: 190px !important;
        width: 105px !important;
        height: 52px !important;
    }
}

/* Mobil */
@media (max-width: 640px) {
    [data-trip-plan] img.mhl-plan-sheep,
    [data-trip-plan] .mhl-plan-sheep {
        left: 155px !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        max-height: 42px !important;
    }

    [data-trip-plan] .mhl-plan-sheep-wrap,
    [data-trip-plan] .mhl-plan-sheep-wrapper {
        left: 155px !important;
        width: 82px !important;
        height: 42px !important;
    }
}



/* ============================================================
   MHL_PLANNER_COSMETIC_V1_R220
   Letzter Cascade-Override für den SH-Tagesplan.
   ============================================================ */

[data-trip-plan] .trip-plan__head::before,
[data-trip-plan] .trip-plan__head::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Papierkorb: kleiner Sprung bei Mouseover */
[data-trip-plan] .trip-plan__clear {
    transform-origin: 50% 100% !important;
    transition:
        transform 160ms ease,
        filter 160ms ease !important;
}

[data-trip-plan] .trip-plan__clear:hover {
    transform: translateY(-3px) scale(1.08) rotate(-4deg) !important;
    filter: brightness(1.18) !important;
}