/* =========================================
   KW SMART NAVIGATION — Mobile Bar & Scroll
   Hotel Brunner 2026
   ========================================= */
:root {
    --kwl-mob-bg: #ffffff;
    --kwl-mob-text: #00315d;
    --kwl-mob-btn-bg: #BD9B5C;
    --kwl-mob-btn-text: #ffffff;
    --kwl-mob-z: 9990;
}

/* --- 1. MOBILE BAR (Fixed Bottom) --- */
body .kw-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: var(--kwl-mob-z);
    background: color-mix(in srgb, var(--kwl-mob-bg) 80%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    color: var(--kwl-mob-text);
    box-shadow:
        0 -1px 0 color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 25%, transparent),
        0 -8px 32px color-mix(in srgb, var(--kwl-text, #1a202c) 12%, transparent);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.5s var(--kwl-ease-soft);
}

body .kw-mobile-bar.is-visible {
    transform: translateY(0);
}

/* Desktop: Ausblenden — Spezifität (0,3,1) überstimmt Layout-Kontexte und Tile-Style */
@media (min-width: 1024px) {
    body .kw-mobile-bar.kw-mobile-bar[class] {
        display: none;
    }
}

/* --- 2. LAYOUTS --- */
.kw-context-commerce {
    justify-content: space-between;
}

.kw-bar-info {
    display: flex;
    flex-direction: column;
    line-height: var(--kwl-lh-tight);
    padding-left: 4px;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.kw-mobile-bar .kw-label {
    font-size: var(--kwl-fsize-caption, 10px);
    text-transform: uppercase;
    letter-spacing: var(--kwl-ls-ultra);
    color: var(--kwl-text-muted, #718096);
    font-weight: var(--kwl-fw-semibold);
}

.kw-price-value {
    font-size: var(--kwl-fsize-h3, 20px);
    font-weight: var(--kwl-fw-bold);
    color: var(--kwl-mob-text);
    font-family: var(--kwl-font-heading);
    letter-spacing: var(--kwl-ls-tighter);
}

/* Dirs21 Widget Wrapper */
.kw-mobile-d21-wrapper { width: 100%; }

/* Mobile-First: kw-context-service nutzt Grid-Layout als Basis (Mobile Bar = ausschließlich mobil) */
body .kw-mobile-bar.kw-context-service {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
}

.kw-bar-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* =========================================================
   CIRCLE ICONS — Glassmorphism + Gold Accent
   44px Touch-Target (BFSG)
   ========================================================= */
.kw-icon-circle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--kwl-mob-text) 8%, transparent),
        color-mix(in srgb, var(--kwl-mob-text) 4%, transparent)
    );
    color: var(--kwl-mob-text, #00315d);
    border: none;
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 50%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent);
    text-decoration: none;
    transition:
        background var(--kwl-transition, 200ms ease),
        color var(--kwl-transition, 200ms ease),
        box-shadow var(--kwl-transition, 200ms ease),
        transform var(--kwl-transition, 200ms ease);
}

.kw-icon-circle svg {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent));
}

.kw-icon-circle:active {
    background: var(--kwl-mob-btn-bg, #BD9B5C);
    color: var(--kwl-mob-btn-text, #ffffff);
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 30%, transparent),
        inset 0 0 0 1px color-mix(in srgb, white 15%, transparent);
    transform: scale(0.92);
}

.kw-icon-circle:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

/* =========================================================
   PRIMARY CTA BUTTON — Premium Gold mit Shimmer
   ========================================================= */
.kw-bar-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-block-size: 48px;
}

.kw-btn-mobile-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 48px;
    padding-block: 12px;
    padding-inline: clamp(16px, 4vw, 22px);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--kwl-mob-btn-bg) 95%, white) 0%,
        var(--kwl-mob-btn-bg) 45%,
        color-mix(in srgb, var(--kwl-mob-btn-bg) 85%, black) 100%
    );
    color: var(--kwl-mob-btn-text);
    font-weight: var(--kwl-fw-bold);
    font-size: var(--kwl-fsize-small, 14px);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--kwl-ls-widest);
    /* Hard-Garantie fuer Einzeiligkeit: maxlength=16 im Backend +
       nowrap hier + flex-shrink:0 verhindern jeden Umbruch (siehe MobileTab::BTN_LABEL_MAX_LENGTH). */
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--kwl-radius-full, 9999px);
    border: none;
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 30%, transparent),
        0 8px 24px color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 25%, transparent);
    overflow: hidden;
    transition:
        box-shadow 0.3s ease,
        transform 0.15s ease,
        filter 0.2s ease;
}

.kw-btn-mobile-primary:active {
    filter: brightness(0.92);
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 30%, transparent),
        inset 0 2px 4px color-mix(in srgb, var(--kwl-text, #1a202c) 10%, transparent);
}

.kw-btn-mobile-primary:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

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

/* Mobile Bar sichtbar: Padding via Custom Property */
body.kw-mobile-bar-visible {
    padding-bottom: var(--kwl-mobile-bar-height, 68px);
}

/* =========================================================
   STICKY HEADER
   Body-Klasse wird von navigation.js gesetzt.
   ========================================================= */
body.kw-is-scrolled .sticky-header {
    background-color: color-mix(in srgb, var(--kwl-bg, #ffffff) 85%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent);
}

/* =========================================================
   STYLE: KACHELN (TILES) — High-End Split UX
   ========================================================= */
body .kw-mobile-bar.kw-style-tile {
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 32px color-mix(in srgb, var(--kwl-text, #1a202c) 15%, transparent);
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

body .kw-mobile-bar.kw-style-tile .kw-bar-icons,
body .kw-mobile-bar.kw-style-tile .kw-bar-info {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    margin: 0;
    padding: 0;
    background: var(--kwl-mob-bg, #ffffff);
    display: flex;
    position: relative;
    z-index: 1;
}

body .kw-mobile-bar.kw-style-tile .kw-bar-action {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Tile Icons */
body .kw-mobile-bar.kw-style-tile .kw-icon-circle {
    flex: 1;
    width: auto;
    height: 100%;
    border-radius: 0;
    border: none;
    border-right: 1px solid color-mix(in srgb, var(--kwl-mob-text) 8%, transparent);
    background: transparent;
    box-shadow: none;
    transition:
        background-color var(--kwl-transition, 200ms ease),
        color var(--kwl-transition, 200ms ease);
}

body .kw-mobile-bar.kw-style-tile .kw-icon-circle:last-child {
    border-right: none;
}

body .kw-mobile-bar.kw-style-tile .kw-icon-circle svg {
    width: 24px;
    height: 24px;
    color: var(--kwl-mob-text, #00315d);
    transition: transform var(--kwl-transition, 200ms ease), color var(--kwl-transition, 200ms ease);
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent));
}

body .kw-mobile-bar.kw-style-tile .kw-icon-circle:active {
    background-color: color-mix(in srgb, var(--kwl-mob-btn-bg, #BD9B5C) 12%, transparent);
}

body .kw-mobile-bar.kw-style-tile .kw-icon-circle:active svg {
    transform: scale(0.92);
}

body .kw-mobile-bar.kw-style-tile .kw-icon-circle:focus-visible {
    box-shadow: inset 0 0 0 3px var(--kwl-focus, #7B6835);
    z-index: 20;
    outline: none;
}

/* Tile Preis */
body .kw-mobile-bar.kw-style-tile .kw-bar-info {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
    border-right: 1px solid color-mix(in srgb, var(--kwl-mob-text) 8%, transparent);
}

body .kw-mobile-bar.kw-style-tile .kw-bar-info .kw-label {
    font-size: var(--kwl-fsize-caption, 10px);
    margin-bottom: 2px;
    font-weight: var(--kwl-fw-bold);
    color: var(--kwl-text-muted, #718096);
}

body .kw-mobile-bar.kw-style-tile .kw-bar-info .kw-price-value {
    font-size: var(--kwl-fsize-h3, 20px);
    font-weight: var(--kwl-fw-extrabold);
}

/* Tile Button — Volle Flaeche, Gold-Gradient */
body .kw-mobile-bar.kw-style-tile .kw-btn-mobile-primary {
    border-radius: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kwl-fsize-body, 15px);
    letter-spacing: var(--kwl-ls-ultra);
    box-shadow: none;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--kwl-mob-btn-bg) 95%, white),
        var(--kwl-mob-btn-bg) 50%,
        color-mix(in srgb, var(--kwl-mob-btn-bg) 85%, black)
    );
    border-left: none;
}

body .kw-mobile-bar.kw-style-tile .kw-btn-mobile-primary:active {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--kwl-mob-btn-bg) 90%, black),
        color-mix(in srgb, var(--kwl-mob-btn-bg) 80%, black)
    );
    box-shadow: inset 0 2px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 20%, transparent);
}

body .kw-mobile-bar.kw-style-tile .kw-btn-mobile-primary:focus-visible {
    outline: 3px solid var(--kwl-bg, #ffffff);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 3px var(--kwl-focus, #7B6835);
    z-index: 30;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    body .kw-mobile-bar {
        transition: none;
    }

    .kw-icon-circle,
    .kw-btn-mobile-primary,
    body .kw-mobile-bar.kw-style-tile .kw-icon-circle svg {
        transition: none;
    }
}

/* =========================================================
   DARK MODE
   ========================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --kwl-mob-bg: var(--kwl-bg, #1a202c);
        --kwl-mob-text: var(--kwl-text, #f7fafc);
    }

    /* Bar */
    body .kw-mobile-bar {
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.06),
            0 -8px 32px rgba(0, 0, 0, 0.4);
    }

    /* Circle Icons */
    .kw-icon-circle {
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--kwl-mob-text) 10%, transparent),
            color-mix(in srgb, var(--kwl-mob-text) 5%, transparent)
        );
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .kw-icon-circle:active {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.3),
            inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    /* Primary Button */
    .kw-btn-mobile-primary {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.3),
            0 8px 24px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* Tile */
    body .kw-mobile-bar.kw-style-tile {
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    }

    body .kw-mobile-bar.kw-style-tile .kw-bar-icons,
    body .kw-mobile-bar.kw-style-tile .kw-bar-info {
        background: var(--kwl-mob-bg, #1a202c);
    }

    body .kw-mobile-bar.kw-style-tile .kw-icon-circle {
        border-right-color: rgba(255, 255, 255, 0.06);
        box-shadow: none;
    }

    body .kw-mobile-bar.kw-style-tile .kw-bar-info {
        border-right-color: rgba(255, 255, 255, 0.06);
    }

    body .kw-mobile-bar.kw-style-tile .kw-icon-circle:active {
        background-color: rgba(255, 255, 255, 0.06);
    }

    body .kw-mobile-bar.kw-style-tile .kw-icon-circle:focus-visible {
        background-color: rgba(255, 255, 255, 0.04);
    }

    body .kw-mobile-bar.kw-style-tile .kw-btn-mobile-primary {
        box-shadow: none;
    }

    /* Sticky Header */
    body.kw-is-scrolled .sticky-header {
        background-color: var(--kwl-bg, #1a202c);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
}