/* =========================================
   KW LOBBY FRONTEND STYLES (Final Unified)
   ========================================= */

/* UA-Resets aus Hello-reset.css restauriert (§466).
   Hello-Elementor reset.css ist seit §465 deaktiviert (Pink-Hover auf Dirs21-Buttons).
   Damit fielen UA-Resets weg, die wir hier 1:1 zurückholen. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* Globaler Seitenhintergrund, Textfarbe und Typografie aus Design-Tab-Tokens.
   Body nutzt --kwl-page-bg (eigenes Feld im Design-Tab),
   Widgets/Cards nutzen --kwl-bg (rein) → Card hebt sich vom Seitenhintergrund ab.
   Light/Dark wechselt automatisch via output_design_colors().
   html body (0,0,2) überstimmt Theme-Resets wie Hello Elementor reset.css (0,0,1).
   font-family global gesetzt — Plugin ist unabhängig vom aktiven Theme. */
html body {
    background-color: var(--kwl-page-bg, #F5F0E8);
    color: var(--kwl-text, #1a202c);
    font-family: var(--kwl-font-body, 'Manrope', sans-serif);
    font-size: var(--kwl-fsize-body, clamp(0.875rem, 0.85rem + 0.125vw, 1rem));
    line-height: var(--kwl-lh-body, 1.5);
    font-kerning: normal;
}

/* Überschriften: Quincy CF global, Fluid Typography.
   Spezifität (0,0,2) via html body — überstimmt Theme-Defaults. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    font-family: var(--kwl-font-heading, 'Quincy CF', serif);
    line-height: var(--kwl-lh-heading, 1.2);
}

html body h1 { font-size: var(--kwl-fsize-h1); }
html body h2 { font-size: var(--kwl-fsize-h2); }
html body h3 { font-size: var(--kwl-fsize-h3); }
html body h4 { font-size: var(--kwl-fsize-h4); }
html body h5 { font-size: var(--kwl-fsize-h5); }
html body h6 { font-size: var(--kwl-fsize-h6); }

:root {
    /* Fluid Typography (Design-System-Ready)
       --kwl-font-heading / --kwl-font-body werden dynamisch per output_design_colors() gesetzt.
       Die var()-Fallbacks auf html body (Zeile 14/27) dienen als Ultimate Fallback. */
    --kwl-fsize-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    --kwl-fsize-h2: clamp(1.375rem, 1.2rem + 0.875vw, 1.875rem);
    --kwl-fsize-h3: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --kwl-fsize-h4: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
    --kwl-fsize-h5: clamp(0.875rem, 0.85rem + 0.3vw, 1.125rem);
    --kwl-fsize-h6: clamp(0.75rem, 0.73rem + 0.2vw, 0.875rem);
    --kwl-fsize-body: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    --kwl-fsize-small: clamp(0.75rem, 0.73rem + 0.1vw, 0.875rem);
    --kwl-fsize-caption: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);
    --kwl-fsize-display: clamp(1.5rem, 1.27rem + 1.14vw, 2.5rem);
    --kwl-fsize-display-sm: clamp(1.25rem, 1.19rem + 0.28vw, 1.5rem);
    --kwl-lh-heading: 1.2;
    --kwl-lh-body: 1.5;
    --kwl-lh-none: 1;
    --kwl-lh-tight: 1.1;
    --kwl-lh-snug: 1.3;
    --kwl-lh-relaxed: 1.4;
    --kwl-lh-prose: 1.6;
    --kwl-lh-loose: 1.7;

    /* Font-Weight */
    --kwl-fw-light: 300;
    --kwl-fw-regular: 400;
    --kwl-fw-medium: 500;
    --kwl-fw-semibold: 600;
    --kwl-fw-bold: 700;
    --kwl-fw-extrabold: 800;

    /* Letter-Spacing */
    --kwl-ls-tighter: -0.02em;
    --kwl-ls-tight: -0.01em;
    --kwl-ls-subtle: 0.01em;
    --kwl-ls-light: 0.02em;
    --kwl-ls-normal: 0.03em;
    --kwl-ls-wide: 0.04em;
    --kwl-ls-wider: 0.05em;
    --kwl-ls-broad: 0.06em;
    --kwl-ls-widest: 0.08em;
    --kwl-ls-ultra: 0.12em;

    /* Spacing */
    --kwl-space-xs: 0.25rem;
    --kwl-space-sm: 0.5rem;
    --kwl-space-md: 1rem;
    --kwl-space-lg: 1.5rem;
    --kwl-space-xl: 2rem;
    --kwl-space-2xl: 3rem;
    --kwl-space-3xl: 4rem;

    /* Breakpoint-Manifest (SSoT — siehe README im Block unten).
       Achtung: @media-Queries akzeptieren KEINE var()-Werte (CSS-Spec).
       Diese Tokens dienen als Single-Source-of-Truth fuer JS (matchMedia)
       und Container-Queries; Media-Queries muessen den Wert manuell spiegeln.
       Konvention: bp = breakpoint, sm/md/lg/xl analog Spacing-Skala. */
    --kwl-bp-sm: 480px;
    --kwl-bp-md: 768px;
    --kwl-bp-lg: 1024px;
    --kwl-bp-xl: 1200px;

    /* Border Radius */
    --kwl-radius-sm: 4px;
    --kwl-radius-md: 8px;
    --kwl-radius-lg: 12px;
    --kwl-radius-full: 9999px;

    /* Transitions */
    --kwl-transition: 200ms ease;

    /* Easing (Token-System für konsistente Animationskurven) */
    --kwl-ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --kwl-ease-material: cubic-bezier(0.4, 0, 0.2, 1);
    --kwl-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
    --kwl-ease-decel: cubic-bezier(0.25, 1, 0.5, 1);
    --kwl-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --kwl-stagger-delay: 60ms;

    /* Shadows (4-Stufen Dual-Shadow-System, color-mix für Theme-Adaptivität) */
    --kwl-shadow-sm: 0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent);
    --kwl-shadow-md: 0 2px 4px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent), 0 4px 16px color-mix(in srgb, var(--kwl-text, #1a202c) 10%, transparent);
    --kwl-shadow-lg: 0 4px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent), 0 12px 32px color-mix(in srgb, var(--kwl-text, #1a202c) 12%, transparent);
    --kwl-shadow-hover: 0 4px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent),
                        0 12px 32px color-mix(in srgb, var(--kwl-text, #1a202c) 14%, transparent);
}

/* Dark Mode: Shadows mit rgba statt color-mix (bessere Kontrolle auf dunklem Hintergrund) */
@media (prefers-color-scheme: dark) {
    :root {
        --kwl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);
        --kwl-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
        --kwl-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
        --kwl-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.4);
    }
}

/* --- Icon-Service: Custom Property fuer dynamische Groessen --- */
.kwl-icon[style*="--kwl-icon-size"] {
    width: var(--kwl-icon-size);
    height: var(--kwl-icon-size);
}

/* --- Icon-Service: Fallback fuer fehlende/geloeschte Icons (nur fuer Admins sichtbar) --- */
body.logged-in .kwl-icon--missing {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px dashed var(--kwl-text-muted, #64748b);
    border-radius: 50%;
    opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
    body.logged-in .kwl-icon--missing {
        border-color: var(--kwl-text-muted, #a0aec0);
    }
}

/* --- Elementor Flex-Container Fix — alle KW-Widgets per Wildcard --- */
.e-con > .elementor-widget.elementor-widget[class*="elementor-widget-kw_"],
.e-con > .e-con-inner > .elementor-widget.elementor-widget[class*="elementor-widget-kw_"] {
    align-self: flex-start;
    width: 100%;
}

/* --- WIDGET STYLES (Shared) --- */



/* --- EDITOR PLACEHOLDERS (Elementor Editor-Vorschau) --- */
.kwl-editor-placeholder {
    background: var(--kwl-bg-alt, #f7fafc);
    border: 2px dashed var(--kwl-border, #e2e8f0);
    padding: 30px;
    text-align: center;
    color: #777;
}

.kwl-editor-placeholder-icon {
    margin-bottom: 10px;
    color: var(--kwl-accent, #BD9B5C);
    display: flex;
    justify-content: center;
}

.kwl-editor-placeholder-icon i {
    font-size: 32px;
}

.kwl-editor-placeholder-title {
    font-weight: var(--kwl-fw-bold);
    font-size: var(--kwl-fsize-small, 13px);
}

.kwl-editor-placeholder-desc {
    font-size: var(--kwl-fsize-caption, 12px);
    margin-top: 5px;
}

/* =========================================================
   Tooltip-Styles: siehe assets/css/kwl-tooltip.css (SSoT seit Phase A).
   Token-Hooks --kwl-tooltip-bg / --kwl-tooltip-text werden im Dark-Mode-Block
   weiter unten gesetzt (Light-Defaults stehen in kwl-tooltip.css).
   ========================================================= */

/* =========================================================
   ACCESSIBILITY: Focus Visible (BFSG Pflicht)
   ========================================================= */
:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}



/* Screenreader-Only Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

/* =========================================================
   DIRS21 SDK-LADE-FEHLER (per JS eingefügt)
   Wrapper: jedes Element mit [data-kw-dirs21-src]
   ========================================================= */
.kw-booking-error-box {
    display: flex;
    flex-direction: column;
    gap: var(--kwl-space-xs, 0.25rem);
    padding: var(--kwl-space-lg, 1.5rem);
    border: 1px solid var(--kwl-border, #e2e8f0);
    border-left: 4px solid var(--kwl-warning, #c05621);
    border-radius: var(--kwl-radius-sm, 4px);
    background: color-mix(in srgb, var(--kwl-warning, #c05621) 5%, transparent);
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-small, 0.875rem);
    line-height: var(--kwl-lh-relaxed, 1.6);
    color: var(--kwl-text, #1a202c);
}

.kw-booking-error-box__title {
    font-weight: var(--kwl-fw-semibold, 600);
    color: var(--kwl-warning, #c05621);
}

.kw-booking-error-box__text {
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .kw-booking-error-box {
        border-color: var(--kwl-border, #4a5568);
        background: color-mix(in srgb, var(--kwl-warning, #ed8936) 12%, transparent);
        color: var(--kwl-text, #f7fafc);
    }

    .kw-booking-error-box__title {
        color: var(--kwl-warning, #ed8936);
    }
}

/* =========================================================
   SHARED SCROLL-REVEAL KEYFRAMES
   Widget-CSS referenziert diese statt eigene zu definieren.
   kwl-reveal-up: Standard (24px), kwl-reveal-up-subtle: Dezent (16px).
   ========================================================= */
@keyframes kwl-reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes kwl-reveal-up-subtle {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   REDUCED MOTION (Barrierefreiheit)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* =========================================================
   CROSS-DOCUMENT VIEW TRANSITIONS (v7.0.0)
   Crossfade-Animation beim TP-Sprachwechsel und bei allen Same-Origin-
   Navigationen (Chromium 126+/Safari 18.4+/Firefox kommend).
   Browser ohne Support: regulaere Navigation — graceful degradation.
   Opt-Out via prefers-reduced-motion.
   ========================================================= */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: var(--kwl-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}