/*
Theme Name:     kitchenroombed (Astra Child)
Description:    Astra child theme for kitchenroombed with Fraunces Wonky & Supreme.
Author:         CaroMate
Author URI:     https://caromate.de
Template:       astra
Version:        1.0.4
*/

/* ==========================================================================
   1. LOKALE WEBFONTS (100 % DSGVO-konform, echte Variable Fonts)
   ========================================================================== */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
         url('fonts/Fraunces-Variable.woff2') format('woff2'),
         url('fonts/Fraunces-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
         url('fonts/Fraunces-Variable.woff2') format('woff2'),
         url('fonts/Fraunces-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces Wonky';
    src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
         url('fonts/Fraunces-Variable.woff2') format('woff2'),
         url('fonts/Fraunces-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces Wonky';
    src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
         url('fonts/Fraunces-Variable.woff2') format('woff2'),
         url('fonts/Fraunces-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('fonts/Supreme-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('fonts/Supreme-VariableItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. TYPOGRAFIE TOKENS
   Hinweis: Die 9 globalen Farbtokens (--ast-global-color-0 bis -8) werden nativ
   über die Astra Global Palette im Customizer & der Datenbank bereitgestellt.
   ========================================================================== */
:root {
    --font-display: 'Fraunces Wonky', 'Fraunces', Georgia, serif;
    --font-body: 'Supreme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   3. TYPOGRAFIE INVARIANTEN (Fraunces Wonky & Supreme)
   ========================================================================== */
body, .entry-content, p, p.wp-block-spectra-content, li, .ast-single-post, button, input, select, textarea {
    font-family: var(--font-body) !important;
    text-shadow: none !important;
}

h1, h2, h3, h4, h5, h6,
h1.wp-block-spectra-content,
h2.wp-block-spectra-content,
h3.wp-block-spectra-content,
h4.wp-block-spectra-content,
.wp-block-heading,
.entry-title {
    font-family: var(--font-display) !important;
    font-variation-settings: 'WONK' 1, 'SOFT' 100, 'opsz' 72 !important;
    font-optical-sizing: auto !important;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ast-global-color-2);
    text-shadow: none !important;
}

.amp-standard {
    display: inline-block;
    padding: 0 0.16em;
    font-weight: 400;
    font-style: italic;
    font-variation-settings: 'WONK' 1, 'SOFT' 100, 'opsz' 144 !important;
}

.krb-booking-value,
p.krb-booking-value,
.quote-text,
p.quote-text {
    font-family: var(--font-display) !important;
    font-variation-settings: 'WONK' 1, 'SOFT' 100, 'opsz' 72 !important;
    font-optical-sizing: auto !important;
}

/* ==========================================================================
   4. DESIGN SYSTEM GLOBALE INVARIANTEN (Eckige Kanten, keine Schatten)
   ========================================================================== */
*, *::before, *::after {
    box-shadow: none !important;
}

/* Footer Links (Design-System: erben Textfarbe, Hover auf surface-white) */
footer a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

footer a:hover {
    color: var(--ast-global-color-5) !important;
}

/* Footer Logo Figure Reset (entfernt Gutenberg/Theme-Standardmargin am Logo) */
footer .wp-block-image,
footer figure.wp-block-image,
[data-spectra-id="spectra-footer-logo"],
[data-spectra-id="spectra-footer-brand"] figure {
    margin: 0 !important;
}

/* ==========================================================================
   INHALTS-KOMPONENTEN (Stufe 2)
   ========================================================================== */
/* Textlink als Aktion (Design-System: Typografie & Unterstreichung, Farben 100 % nativ im Block-Editor) */
.link-ul {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
    text-decoration-thickness: 1px !important;
    transition: color 150ms ease, opacity 150ms ease !important;
}

.on-dark .link-ul {
    color: var(--ast-global-color-5) !important;
}

.on-dark .link-ul:hover {
    color: var(--ast-global-color-6) !important;
}

/* Fact-List (Stufe 2) */
.fact-list {
    width: 100% !important;
    max-width: 480px !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: 1px solid var(--ast-global-color-6) !important;
}

.fact-list li {
    display: flex !important;
    justify-content: space-between !important;
    gap: 40px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--ast-global-color-6) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    color: var(--ast-global-color-3) !important;
    margin: 0 !important;
}

.fact-list li span:first-child,
.fact-list li strong {
    color: var(--ast-global-color-2) !important;
    font-weight: 500 !important;
}


/* ==========================================================================
   HINWEISLEISTE & HEADER (Design-System)
   ========================================================================== */
.notice {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    height: var(--bar-h, 40px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--ast-global-color-8) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--ast-global-color-4) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#masthead.site-header {
    position: absolute !important;
    top: var(--bar-h, 40px);
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: var(--header-h, 80px) !important;
    background-color: transparent !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color var(--ease, 150ms ease), border-color var(--ease, 150ms ease), top var(--ease, 150ms ease) !important;
}

#masthead.site-header .krb-header-inner,
#masthead.site-header .ast-builder-grid-row-container {
    height: 100% !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: clamp(20px, 4vw, 80px) !important;
    padding-right: clamp(20px, 4vw, 80px) !important;
    box-sizing: border-box !important;
}

#masthead.site-header .krb-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

#masthead.site-header .site-branding {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    text-decoration: none !important;
}

#masthead.site-header .custom-logo {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 50% !important;
}

#masthead.site-header .custom-logo img {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: block !important;
}

#masthead.site-header .site-title-text,
#masthead.site-header .site-title-text a {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    color: var(--ast-global-color-5) !important;
    text-decoration: none !important;
    margin: 0 !important;
    transition: color var(--ease, 150ms ease) !important;
}

#masthead.site-header.is-solid .site-title-text,
#masthead.site-header.is-solid .site-title-text a {
    color: var(--ast-global-color-2) !important;
}

/* Navigations-Links (Standard: transparent auf dunklem Hero -> weiße Schrift) */
#masthead.site-header .wp-block-navigation a,
#masthead.site-header .main-header-menu .menu-link {
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--ast-global-color-5) !important;
    text-decoration: none !important;
    transition: color var(--ease, 150ms ease) !important;
}

#masthead.site-header .wp-block-navigation a:hover,
#masthead.site-header .main-header-menu .menu-link:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Basis: Burger auf Desktop immer unterdrücken */
#masthead.site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
}

/* Desktop & Tablet Navigation (>= 768px): Links horizontal */
@media (min-width: 768px) {
    #masthead.site-header .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }
    #masthead.site-header .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 32px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #masthead.site-header .wp-block-navigation-item {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobile-Navigation (<= 767px): Burger einblenden, Drawer-Overlay */
@media (max-width: 767px) {
    #masthead.site-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        color: var(--ast-global-color-5) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container-open svg {
        fill: currentColor !important;
        width: 24px !important;
        height: 24px !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background-color: var(--ast-global-color-4) !important;
        padding: 40px 24px !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        margin: 48px 0 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container.is-menu-open a {
        color: var(--ast-global-color-2) !important;
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
        color: var(--ast-global-color-0) !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container-close {
        display: flex !important;
        position: absolute !important;
        top: 24px !important;
        right: 24px !important;
        color: var(--ast-global-color-2) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
    }
    #masthead.site-header .wp-block-navigation__responsive-container-close svg {
        fill: currentColor !important;
    }
    #masthead.site-header.is-solid .wp-block-navigation__responsive-container-open {
        color: var(--ast-global-color-2) !important;
    }
}

/* Solid-Zustand beim Scrollen */
#masthead.site-header.is-solid {
    position: fixed !important;
    top: 0 !important;
    background-color: var(--ast-global-color-4) !important;
    border-bottom: 1px solid var(--ast-global-color-6) !important;
    box-shadow: none !important;
}

#masthead.site-header.is-solid .wp-block-navigation a,
#masthead.site-header.is-solid .main-header-menu .menu-link {
    color: var(--ast-global-color-3) !important;
}

#masthead.site-header.is-solid .wp-block-navigation a:hover,
#masthead.site-header.is-solid .main-header-menu .menu-link:hover {
    color: var(--ast-global-color-2) !important;
}

/* Header Button (Astra Native Header Builder & Spectra Button) */
.ast-header-button-1 .ast-custom-button,
#masthead.site-header .ast-custom-button,
#masthead.site-header .wp-block-spectra-button {
    border-radius: 3px !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease !important;
}

.ast-header-button-1 .ast-custom-button:hover,
#masthead.site-header .ast-custom-button:hover,
#masthead.site-header .wp-block-spectra-button:hover {
    transform: translateY(-2px) !important;
}

@media (max-width: 600px) {
    #masthead.site-header .wp-block-spectra-button {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   SPRUNGMARKEN & LISTEN-GEDANKENSTRICH (Stufe 2)
   ========================================================================== */
#raeume, #ausstattung, #betten, #ausstattungsliste, #faq, #ueberblick, #buchung, #galerie,
#quartier, #zukunftszentrum, #mobilitaet, #anreise, #tipps,
#warum-wir-vermieten, #ueber-uns, #prinzipien, #motto, #halle-tipps, #aktionen,
#direktkontakt, #langzeit, #kontakt-faq, #buchung-cta,
#featured, #journal, #tipps-uebersicht, #tipps-cta {
    scroll-margin-top: 128px;
}

.room-feature-list {
    list-style: none !important;
    padding-left: 0 !important;
}

.room-feature-list li {
    position: relative !important;
    padding-left: 18px !important;
}

.room-feature-list li::before {
    content: "–" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--ast-global-color-0) !important;
}

.on-dark .room-feature-list li::before {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ==========================================================================
   SMOOBU VERFÜGBARKEITSKALENDER (Stufe 2)
   ========================================================================== */
.calendarWidget .multiCalendarWidget {
    background: transparent !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    padding-top: 8px !important;
    font-family: inherit !important;
}

.calendarWidget .multiCalendarWidget .singleCalendarWidget h2,
.calendarWidget .multiCalendarWidget h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--ast-global-color-2) !important;
    letter-spacing: -0.01em !important;
}

.calendarWidget .multiCalendarWidget #firstPartHeader {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ast-global-color-0) !important;
    letter-spacing: 0.05em !important;
}

.calendarWidget .multiCalendarWidget table thead td {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--ast-global-color-3) !important;
    letter-spacing: 0.05em !important;
}

.calendarWidget .multiCalendarWidget table tbody td {
    font-size: 0.875rem !important;
    font-family: inherit !important;
}

/* -------------------------------------------------------------
 * 12. Split-Inhaltsbereiche (AutoCamp-Stil): Eichensand Textbox
 * ----------------------------------------------------------- */
.spectra-overlay-color.has-background.spectra-background-color,
[data-spectra-id="spectra-mv9ltv6d-gj5csi"],
[data-spectra-id="spectra-mv9ltv7f-m0ocrv"],
[data-spectra-id="spectra-mv9ltva9-go10bx"],
[data-spectra-id^="spectra-apt-room-"][data-spectra-id$="-txtcol"] {
    background-color: var(--ast-global-color-7) !important;
}

/* -------------------------------------------------------------
 * 13. Apartment Split-Bilder: Einheitliches 3:2 Seitenverhältnis
 * ----------------------------------------------------------- */
[data-spectra-id^="spectra-apt-room-"][data-spectra-id$="-col"] img {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

[data-spectra-id="spectra-apt-room-4-col"] img {
    object-position: center 30% !important;
}