/*
Theme Name: Allegria Theme
Template: twentytwentyfive
Theme URI: https://allegria.com/
Author: Moritz Kern
Author URI: https://moritzkern.de
Description: Allegria Theme ist ein Twenty Twenty-five Child Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allegria
*/


/* ==========================================================================
   1. FLUID TYPOGRAPHY (Stufenlose Skalierung)
   ========================================================================== */
:root {
    /* clamp(Min-Größe (+0.2rem), Ideale Skalierung (Basis + Viewport-Width), Max-Größe) */
    --fluid-small: clamp(0.8rem, 0.8rem + 0.3vw, 1.8rem);
    --fluid-medium: clamp(1rem, 1.0rem + 0.3vw, 2.2rem);
    --fluid-large: clamp(1.5rem, 1.1rem + 0.5vw, 3.2rem);
    --fluid-xlarge: clamp(1.8rem, 1.2rem + 1.5vw, 5rem);
    --fluid-xxlarge: clamp(2.4rem, 1.7rem + 3.5vw, 10rem);
    
    --fluid-ul: clamp(0.8rem, 0.8rem + 0.3vw, 1.8rem);
    --fluid-p: clamp(0.8rem, 0.8rem + 0.3vw, 1.8rem);
    --fluid-h3: clamp(1.8rem, 1.2rem + 2vw, 6rem);
    --fluid-menu: clamp(1rem, 1.2rem, 2rem);
}
.smallerlist{
    font-size: -fluid-ul;
}
/* Zuweisung an WP-Klassen und globale Tags */
.has-small-font-size { font-size: var(--fluid-small) !important; }
.has-medium-font-size { font-size: var(--fluid-medium) !important; }
.has-large-font-size { font-size: var(--fluid-large) !important; }
.has-x-large-font-size { font-size: var(--fluid-xlarge) !important; }
.has-xx-large-font-size { font-size: var(--fluid-xxlarge) !important; }

/* FIX: Abgeschnittene Schriften auf iOS/iPad Safari (line-height & padding) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading { 
    line-height: 1.2 !important; 
    padding-bottom: 0.1em !important; /* Verhindert das Abschneiden unten */
    overflow: visible !important; 
}
h3 { font-size: var(--fluid-h3) !important; }
p { font-size: var(--fluid-p) !important; line-height: 1.4; }
.mcw-fp-section-inner, .mcw-fp-slide-inner {
    overflow-x: hidden;
}
/* Timeline Schriften dynamisch anbinden */
.timeline__content label { font-size: clamp(1.5rem, 1rem + 1vw, 3rem) !important; font-weight: 700; margin: 0 0 0.625rem; color: #fff; line-height: 1.2 !important; }
.timeline__content p { font-size: clamp(0.7rem, 0.6rem + 0.5vw, 2.5rem) !important; line-height: 1.5; margin-bottom: 10px; color: #fff; hyphens: auto; }

.fp-viewing-kontakt hr {
    width: 40vw;
    margin-top: 30px !important;
}
.impressum {
    justify-content: center!important;
}
.impressum li a span{
    text-transform: uppercase !important;
}
/* ==========================================================================
   2. BASIS-STYLES (GLOBAL)
   ========================================================================== */
html, body:not(.single-speisekarte):not(.single-restaurant) {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; display: flex; justify-content: center; align-items: center;
}

html:has(body.single-speisekarte, body.single-restaurant) {
    display: block; overflow-y: auto;
}

body {
    transform-origin: top left;
    padding-top: 60px; /* Höhe der Nav anpassen (Kompensation) */
}

.ueberuns .fp-overflow { height: 100dvh; padding: 0; margin: 0; }

body:not(.single-speisekarte, .single-restaurant)::before {
    content: ''; display: block;
    width: 1920px; height: 1080px;
    transform-origin: top left;
    transform: scale(calc(min(100vw / 1920, 100dvh / 1080)));
}

.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-bottom: 50px !important;
}

.wp-block-cover.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body { overflow-x: hidden; }

header { z-index: 1; position: relative; }


/* ==========================================================================
   HEADER / LOGO & MENÜ AUSRICHTUNG
   ========================================================================== */

/* Zwingt den Haupt-Header, Logo und Menü in eine Zeile zu setzen */
header.wp-block-group:has(.wp-block-site-logo):has(.mainmenu) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    flex-wrap: nowrap !important; 
}

.wp-block-site-logo {
    flex: 0 0 auto !important;
    margin-right: auto !important; 
}

header.wp-block-group:has(.mainmenu):not(:has(.wp-block-site-logo)) {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
}

.wp-block-navigation {
    width: 100%;
}
.mainmenu {
    position: relative !important; 
    top: auto !important;
    right: auto !important;
    padding: 0 !important;
}

/* Timeline Base */
.timeline-nav-button { width: 10px; }
#BTimelineBlock-2 .timeline-nav-button { background-color: transparent !important; border: 0 !important; }
.timeline-nav-button:before {
    background-position: center center; background-repeat: no-repeat;
    content: ""; display: block; height: 24px; left: 5px; position: absolute;
    transform: translateX(-50%) translateY(-50%); top: 50%; width: 24px; background-size: contain;
}
.timeline--horizontal .timeline-divider { left: 20px !important; right: 20px !important; border-radius: 10px; }

/* Dekorations-Elemente */
.wir::after { content: ""; background: url(assets/images/Logo_outline_white.svg) no-repeat bottom left; position: absolute; left: -5%; bottom: -20%; height: 100%; width: 30%; background-size: contain; pointer-events: none; }
.projekte::after { content: ""; background: url(assets/images/Logo_outline_mango.svg) no-repeat bottom left; position: absolute; left: -5%; bottom: -20%; height: 100%; width: 30%; background-size: contain; pointer-events: none; }
.ueberuns::after { content: ""; background: url(assets/images/Logo_outline_white-konter.svg) no-repeat bottom left; position: absolute; right: 0; bottom: 5%; background-size: cover; z-index: 100; top: 5%; width: 360px; pointer-events: none; }

ul:not(.wp-block-navigation__container) { list-style: none; margin: 0; padding: 0; }

.fp-viewing-home .wp-block-site-logo { opacity: 1; }
.wp-block-site-logo { opacity: 1; position: relative; z-index: 100; margin-top: 10px !important; }

.home.fp-viewing-restaurants .wp-block-site-logo, .home.fp-viewing-cafes .wp-block-site-logo, .home.fp-viewing-aktionen .wp-block-site-logo, .home.fp-viewing-dienstleistungen .wp-block-site-logo, .home.fp-viewing-home .wp-block-site-logo {
    opacity: 0;
}

/* Navigation Base */
.mainmenu { position: fixed; top: 0; right: 20px; z-index: 9999; padding: 10px 20px; width: 100%; }
.admin-bar .mainmenu { top: var(--wp-admin--admin-bar--height, 32px); }

/* Hier liegt die Lösung: Desktop-Navigation strikt rechtsbündig */
nav ul.wp-block-navigation__container { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-end; /* Drückt alle Desktop-Links ganz nach rechts */
    list-style: none; 
    margin-left: auto !important;
    width: 100%;
}

.wp-block-navigation.mainmenu .wp-block-navigation-item { font-size: var(--fluid-menu) !important; }
.wp-block-navigation__container li:not(:last-child)::after { content: "|"; padding: 0 8px; color: currentColor; font-size: 1.4em; }
.wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-dialog { gap: initial !important; }
.wp-block-navigation.mainmenu .wp-block-navigation-item { font-size: var(--fluid-menu) !important; }
.wp-block-navigation__container li:not(:last-child)::after { content: "|"; padding: 0 8px; color: currentColor; font-size: 1.4em; }
.wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-dialog { gap: initial !important; }

/* Utilities */
.fullrelative { position: relative; display: flex; justify-content: center; align-items: center; }
.fullrelative .wp-block-cover__inner-container { width: 90vw !important; max-width: 90vw; left: 50%; transform: translateX(-50%); }
.top { top: 0; position: absolute !important; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100vw; padding: 50px; }
.bottom { bottom: 20px; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100vw !important; padding: 50px; }

.right { right: 0; }
.left { left: 0; }
.fp-warning, .fp-watermark { display: none; }
.historielogo { position: absolute; bottom: 100%; width: 50%; }

/* Timeline Setup */
.timeline--horizontal { font-size: 0; padding: 0; overflow: hidden; white-space: nowrap; }
.timeline--horizontal .timeline__item:after { left: 10px; }
.timeline--horizontal .timeline__item .timeline__item__inner { display: flex !important; height: 100%; width: 180%; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; align-items: stretch; }
.timeline__content { border-left: 1px solid #fff !important; border-radius: 0 !important; left: 10px; width: 100%; background: transparent; border: 0; }
.timeline--horizontal .timeline__item .timeline__content:after, .timeline--horizontal .timeline__item--bottom .timeline__content:after { border: 0; }
#BTimelineBlock-2 .timeline .timeline__content { background: transparent; border: 0px solid transparent; border-radius: 10px; padding: 1em 0.5em 1em 1em; }
.wp-block-tlgb-b-timeline-block .timeline-container { position: relative; margin: 0; padding: 0; }
.timeline--horizontal .timeline__item--bottom .timeline__content__wrap { vertical-align: baseline; align-items: baseline; }
.timeline__content::before { display: none !important; }
.timeline--horizontal .timeline__item--top, .timeline--horizontal .timeline__item--bottom { padding: 0; }
.timeline__item::after { background-color: transparent !important; border: 5px solid transparent !important; }
.timeline__item--top .timeline__content::before { left: 0px !important; top: -12px !important; }
.timeline__item--bottom .timeline__content::before { left: 0 !important; bottom: -12px !important; }
.is-content-justification-space-between { justify-content: space-between; }
.timeline--horizontal .timeline-divider { background-color: #ddd; display: block; height: 4px; left: 0; position: absolute; transform: translateY(-50%); right: 0; z-index: 1; }
#BTimelineBlock-2 .timeline--horizontal .timeline-divider, #BTimelineBlock-2 .timeline:not(.timeline--horizontal)::before { background-color: rgb(255, 255, 255); }

/* Helpers */
.order1 { order: 1; }
.order2 { order: 2; }
.contentcenter { align-content: center; min-height: 300px; }
.bild-karte { width: 90%; }
.mapalignwide { width: 90vw; height: 100dvh; }
.wp-block-cover__inner-container { width: 100% !important; margin: 0 auto !important; max-width: 90vw; }
.bigicon { margin-block-end: 0 !important; min-height: auto; height: auto; width: 100%; padding-top: 20px; margin-inline-end: 0 !important; aspect-ratio: auto; }
.bigicon img { margin-block-end: 0 !important; min-height: auto; height: auto; width: 100%; margin-inline-end: 0 !important; aspect-ratio: auto; }
.homelogo { max-width: 45vw; }
.kontaktlogo { max-width: 25vw; }
.has-global-padding > .alignfull { margin-right: 0; margin-left: 0; }


/* ==========================================================================
   3. ORIENTIERUNG
   ========================================================================== */

/* Globale Anpassungen für den Portrait-Modus (Handy, Tablets, iPads etc.) */
@media screen and (orientation: portrait) {
    body .is-layout-flex {
        align-content: center;
    }
    
    body .is-layout-flex:not(.wp-block-columns) {
        flex-direction: column;
    }

    /* Zwingt ALLE Columns und Flex-Gruppen im Portrait STRIKT untereinander */
    .wp-block-columns,
    .wp-block-columns.is-layout-flex,
    .wp-block-columns.mapalignwide {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    /* Überschreibt hartcodierte Editor-Breiten (z.B. flex-basis: 50%) */
    .wp-block-columns > .wp-block-column,
    .wp-block-column,
    .wp-block-column.is-layout-flow {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important; /* DAS killt die inline 50% */
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 20px !important;
        display: block !important;
    }

    .order1 { order: 2; } 
    .order2 { order: 1; }
    
    .wp-block-image:not(.bigicon) img { width: 100% !important; }
    figure { width: 100%; margin-inline-start: 0; }
    .bigicon img { width: 10%; }
}


/* ==========================================================================
   NAVIGATION: MENÜ-STEUERUNG AB 1199PX (Wasserdicht für iPad Pro & Mobile)
   ========================================================================== */
@media (max-width: 1199px) {
    /* 1. Desktop-Links absolut ausblenden, wenn geschlossen */
    .wp-block-navigation__responsive-container:not(.has-modal-open):not(.is-menu-open) .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__container.is-responsive:not(.is-menu-open) {
        display: none !important;
    }
    
    /* 2. Burger-Icon IMMER anzeigen und positionieren */
    .wp-block-navigation__responsive-container-open,
    button.wp-block-navigation__responsive-container-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important; 
        margin-right: 20px !important; /* 20px Abstand vom rechten Rand */
        z-index: 100000 !important; 
        pointer-events: auto !important; 
        padding: 10px !important; /* Klickfläche */
    }
    
    /* Container-Ausrichtung der Navi-Leiste global zwingen */
    .wp-block-navigation.mainmenu {
        display: flex !important;
        flex-direction: row !important; /* Verhindert Hochformat-Fehler */
        justify-content: flex-end !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 3. Menüinhalte (Links) korrekt anzeigen, wenn das Overlay GEÖFFNET ist */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: block !important;
    }
    
    /* Ausrichtung der Liste und des Textes im geöffneten Zustand nach rechts */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important; 
        align-items: flex-end !important; 
        text-align: right !important; 
        width: 100% !important;
        padding-top: 20px !important;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100% !important;
        justify-content: flex-end !important; 
        padding-right: 20px !important; /* Angleichung an die 20px des Burger-Icons */
        margin: 5px 0 !important;
    }

    /* Entfernt die Trennstriche zwischen den Menüpunkten im Mobile-Menü */
    .wp-block-navigation__container li:not(:last-child)::after {
        content: "" !important;
        padding: 0;
    }
    
    /* Close-Button (X) positionieren & Icons vergrößern */
    .wp-block-navigation__responsive-container-close {
        margin-left: auto !important;
        margin-right: 20px !important;
        padding: 10px !important;
    }

    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg {
        width: 32px !important;  
        height: 32px !important;
        transform: scale(1.5); 
    }
}

/* Versteckt das Burger-Icon auf echten Desktops (> 1199px) */
@media (min-width: 1200px) {
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
        display: flex !important;
    }
    .wp-block-navigation__container.is-responsive {
        display: flex !important;
    }
}


/* ==========================================================================
   4. TABLET & MOBILE (Layout Breakpoints - Kaskadierend nach unten)
   ========================================================================== */
@media (max-width: 1199px) {
  .home .fp-section.home h1,
  .home .fp-section.home h2 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
    .fp-viewing-projekte .wp-block-group{ padding: 0 40px !important; }
    .fp-viewing-home .has-xx-large-font-size, .fp-viewing-home .has-x-large-font-size { text-align: center; }
    p { padding-left: 0 !important; padding-right: 0 !important; }
    .wp-block-cover { padding: 0 40px !important; }
    .wp-block-group,  .wp-block-columns, .wp-block-column { padding: 20px 40px !important; }
    .wp-block-group .wp-block-cover, .wp-block-group .wp-block-columns, .wp-block-columns .wp-block-column, .wp-block-group .wp-block-group { padding-left: 0 !important; padding-right: 0 !important; }
    /*.fp-viewing-kontakt .wp-block-group{ padding: 0 40px !important; }*/
    
    .wir::after { width: 60%; }
    .ueberuns::after { top: 35%; width: 50vw; }
    
    .smallicon, .smallicon img { float: left; text-align: left; width: auto !important; }
    .wp-block-image:not(.kontaktlogo):not(.homelogo), .wp-block-image img { box-sizing: border-box; width: 100% !important; max-width: 100%; vertical-align: bottom; }
    
    .mcw-fp-section_c26143-b8 .fp-bg { background-position: 18% center !important; }
    #BTimelineBlock-2 .timeline .timeline__wrap { overflow: visible; }
    .timeline--mobile .timeline__item { left: 0; padding-left: 0; padding-right: 0; width: 100%; opacity: 1; }
    .timeline:not(.timeline--horizontal):before { position: relative !important; }
        .contact-group {
    margin: 40px!important;
}
    .bigicon { 
        max-width: 120px !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
        text-align: left;
        float: left;
    }
    
    .bigicon img {
        width: 100% !important;
        height: auto !important;
    }
    
    .alignfull,
    .wp-block-cover.alignfull,
    .wp-block-group.alignfull {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-top: 0 !important;
        margin-bottom: 50px !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .alignfull .wp-block-cover__inner-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
    
}
/* ==========================================================================
   SEITENSPEZIFISCHE ANPASSUNGEN (iPad / Tablet)
   ========================================================================== */

/* Greift bei iPads und Tablets im Hoch- und Querformat (z.B. 600px bis 1199px) */
@media screen and (min-width: 600px) and (max-width: 1199px) {
    
    
    body.page-id-387 ul li {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
}
/* Tablet Portrait & darunter */
@media (max-width: 781px) {
    .ueberunstext{
        font-size: var(--fluid-medium) !important;
    }
    .bottom { bottom: 50px; }
    .fullrelative { padding-top: 50px !important; }
    .wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-column { padding: 0px 40px 20px 40px !important; }
    .mapalignwide { align-content: flex-start; }
    div#tlgbTimelineItem-10 { margin-top: 100px; }
    #fp-nav.fp-right { right: 0 !important; }
    
    .fp-viewing-remote figure, .fp-viewing-automobilindustrie figure, .fp-viewing-microcity figure, .fp-viewing-wir figure { margin: 0; padding: 0; margin-inline-start: 0 !important; }
    .smallicon, .smallicon img { margin-bottom: 10px; height: 50px !important; object-fit: contain !important; object-position: left; }
    .bigicon { max-width: 80px !important; text-align: center; }
    
    .timeline__item.animated { opacity: 1; }
    .timeline--mobile .timeline__item { padding: 50px 0; }
    .timeline:not(.timeline--horizontal):before { width: 0; }
    
    .is-layout-flow > .alignright { float: left; }
    .fp-viewing-kontakt .wp-block-navigation__container { align-items: center; display: flex; justify-content: space-between; flex-wrap: nowrap; margin: 0; padding-left: 0; }
    .ueberuns::after { background-size: 50%; background-position: center right; }
    .fp-viewing-ueberuns .fp-table { justify-content: space-between; }
}

.fp-viewing-datenschutz ul{
    font-size: var(--fluid-small) !important;
    list-style:disc;
    margin-left: 20px !important;
}
.fp-viewing-datenschutz ul li{
    padding: 2px 0;
}
/* Smartphone */
@media (max-width: 599px) {
    .wp-block-navigation.mainmenu .wp-block-navigation-item { margin: 10px 0; }
    .wp-block-navigation__container ul, .wp-block-navigation__container li { width: 100%; }
    .wp-block-navigation__container li { padding: 10px; text-align: center; }
    
    .fullrelative { padding-top: 70px !important; }
    .homelogo { max-width: 90vw; }
        /* Fix für abgeschnittene Logos auf dem iPhone/Smartphone */
    .homelogo { 
        max-width: 90vw !important; 
        height: auto !important; 
        display: block; 
    }
    
    .homelogo img,
    .homelogo a img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* Verhindert das Abschneiden der Ränder */
        display: block;
    }
    .kontaktlogo { max-width: 70vw; }
    
    .wp-block-image img { padding-bottom: 1.2rem; object-fit: contain !important;}
    .contentcenter { padding-top: 100px !important; }
    p { white-space: normal; }
    
    .wp-block-group .wp-block-cover, .wp-block-group .wp-block-columns, .wp-block-columns .wp-block-column, .wp-block-group .wp-block-group { padding-bottom: 0 !important; }
    ul, p { padding: 10px 0 !important; margin: 0 !important; }
    .projektebild1 img,.projektebild2 img, .projektebild3 img,.projektebild4 img,.projektebild5 img,.projektebild6 img{
        object-fit: cover!important;
    }
        /* Erzwingt zwingend das Stacking von Columns auf dem iPhone */
    .wp-block-columns,
    .wp-block-columns.is-layout-flex,
    .wp-block-columns.mapalignwide {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important; /* Verhindert gequetschte Höhe durch mapalignwide */
    }
    
    .wp-block-column,
    .wp-block-column.is-layout-flow,
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important; /* Überschreibt die inline style="flex-basis:50%" vom Editor */
        padding-right: 0 !important; /* Entfernt das harte Inline-Padding */
        padding-left: 0 !important;
        margin-bottom: 20px !important;
        display: block !important;
    }
        /* Verhindert das Abschneiden der Karte unten auf Handys */
    .wp-block-column .bild-karte,
    .wp-block-column .bild-karte img {
        height: auto !important;
        max-height: 100% !important;
        overflow: visible !important;
        object-fit: contain !important;
        object-position: top center !important; /* Hält die Karte oben bündig */
    }
    
    /* Hebt mögliche Begrenzungen der Bild-Box auf */
    figure.wp-block-image.bild-karte {
        margin-bottom: 20px !important;
        display: block !important;
    }
}


/* ==========================================================================
   5. DESKTOP & ULTRA-WIDE (Layout Breakpoints - Kaskadierend nach oben)
   ========================================================================== */
   
@media (min-width: 1700px) {
    .homelogo img { width: 70%; }
}

@media (min-width: 2400px) {
    :root :where(.is-layout-flex) { gap: 1em; }
    .wp-block-site-logo { min-width: 10%; }
    .wp-block-site-logo a, .wp-block-site-logo img { width: 100% !important; } 
    .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container { position: relative; width: 100% !important; max-width: 90vw; margin: 0 auto !important; }
    .homelogo { max-width: 30vw; }
    .kontaktlogo { width: 20vw; }
    
    .wp-block-image img, .bild-karte { width: 100% !important; }
    .icon.smallicon img { height: 128px !important; max-width: 128px; margin: 10px 0; }
    .bigicon { min-height: 100px; height: 100px; width: 100px; padding-top: 20px; }
}

@media (min-width: 2770px) {
    :root :where(.is-layout-flex) { gap: 6em; } 
    .wp-block-image img { box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom; width: 100% !important; }
    .bild-karte { width: 75% !important; }
    .bigicon { min-height: 200px; height: 200px; width: 200px; }
    
    .timeline-container { min-height: 80vh; display: flex; align-items: center; }
    .timeline--horizontal .timeline__items { display: flex; }
    .timeline--horizontal .timeline__item--top { transform: translateY(0); }
    .timeline--horizontal .timeline__item--bottom { height: 25vh !important; transform: translateY(-200px); }
    .timeline--horizontal .timeline-divider { top: 50% !important; }
}

@media (min-width: 2800px) {
    .size3440 { width: 70% !important; }
}











/* ===========================
   Desktop / Mobile Visibility
=========================== */
.wochenkarte-desktop { display: block; }
.wochenkarte-mobile { display: none; }
/* ===========================
   Kategorie-Borders
=========================== */
.wochenkarte-kategorie--meat, .wk-cat-meat { border-top: 3px solid #666; }
.wochenkarte-kategorie--veggie, .wk-cat-veggie { border-top: 3px solid #884292; }
.wochenkarte-kategorie--aktionsgericht, .wk-cat-aktionsgericht { border-top: 3px solid #f8af30; }
.wochenkarte-kategorie--fresh, .wk-cat-fresh { border-top: 3px solid #3fa535; }
.wochenkarte-kategorie--extras, .wk-cat-extras { border-top: 3px solid #0074a6; }

/* ===========================
   Wrapper & Container
=========================== */
.wochenkarte-wrapper { width: 100%; }
.wochenkarte-container {
    display: grid;
    grid-template-columns: 160px repeat(5, minmax(0, max-content));
    column-gap: 15px;
    row-gap: 0;
    width: 100%;
}
.zusatzstoffe-allergene-container {
    display: grid;
    grid-template-columns: 160px repeat(2, minmax(0, max-content));
    column-gap: 15px;
    row-gap: 0;
    align-items: flex-start;
    margin: 20px 0;
}

/* ===========================
   Desktop / Mobile Visibility
=========================== */
.wochenkarte-mobile { display: none; }

/* ===========================
   Wochentage & Header
=========================== */
.wk-head-empty {}
.wochenkarte-tag {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #fff;
    padding: 0 5px;
    margin: 0 auto;
    position: relative;
    top: 15px;
    z-index: 1;
    font-size: 22px;
}
.wochenkarte-tag.vergangen {
    opacity: 1;
    color: #999;
}

/* ===========================
   Kategorien & Zellen
=========================== */
.wochenkarte-kategorie,
.wochenkarte-zelle {
    justify-content: flex-start;
}
.wochenkarte-kategorie {
    font-weight: bold;
    font-size: 18px;
    line-height: 0.6;
    white-space: pre-line;
    padding: 12px 5px;
}
.wochenkarte-zelle {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    padding: 10px;
    transition: border 0.2s ease;
}
.wochenkarte-zelle.wk-cat-meat { padding-top: 20px; }
.wochenkarte-zelle.wk-cat-meat:hover { border-bottom: 3px solid transparent; }
.wochenkarte-zelle.wk-cat-meat.vergangen,
.wochenkarte-zelle.wk-cat-veggie.vergangen,
.wochenkarte-zelle.wk-cat-aktionsgericht.vergangen { opacity: 0.5; }

/* Gericht Content */
.wk-cat-meat .wk-gericht,
.wk-cat-veggie .wk-gericht,
.wk-cat-aktionsgericht .wk-gericht {
    position: relative;
    text-align: left;
    min-height: 200px;
    flex-grow: 1;
}
.wk-cat-fresh .wk-gericht, 
.wk-cat-extras .wk-gericht {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
    gap: 40px;
    margin: 0;
    font-size: 16px;
    flex-wrap: nowrap;
    text-align: center;
}
.wk-empty { min-height: 200px; }
.wk-title {
    font-weight: bold;
    margin-bottom: 2px;
    text-align: center;
    line-height: 1.2;
    font-size: 18px;
}
.spalte-zusatzstoffe .wk-title,
.spalte-allergene .wk-title { padding-top: 5px; }
.wk-desc { font-size: 16px; text-align: center; padding: 6px 0; }
.wk-meta { font-size: small; line-height: 1.3; text-align: center; }
.wk-preis {
    font-weight: bold;
    font-size: 14px;
    margin-top: 3px;
    text-align: center;
    white-space: nowrap;
}
.wk-cat-meat .wk-preis,
.wk-cat-veggie .wk-preis,
.wk-cat-aktionsgericht .wk-preis { font-size: 18px; }
.wk-gericht.fresh,
.wk-gericht.extras { text-align: center; font-size: 16px; }

/* ===========================
   Deklaration / Zusatzstoffe
=========================== */
.spalte-deklaration, .spalte-allergene, .spalte-zusatzstoffe {
    border-top: 3px solid #666;
}
.unterspalten {
    font-size: 0.8rem;
    display: grid;
    gap: 5px;
    padding: 10px 0;
    justify-items: start;
    align-items: start;
    grid-template-columns: repeat(4, 1fr);
}
.unterspalte {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.unterspalte strong {
    min-width: 30px;
    display: inline-block;
    text-align: right;
    padding-right: 6px;
}

/* ===========================
   Status & Highlights
=========================== */
.vergangen { opacity: 0.5; }
.heute { background: #f8af3012; }
.wk-heute {
    border-top: 3px solid #ffa000;
    border-left: 3px solid #ffa000;
    border-right: 3px solid #ffa000;
}
.wochenkarte-tag.heute {
    background: #fff;
}
.montag-highlight { background: #4caf50 !important; color: white !important; }
.nicht-waehlbar { background: #f0f0f0 !important; cursor: not-allowed !important; }
.readonly-disabled { background: #f5f5f5 !important; color: #666 !important; }
.feiertag { font-size: 15px; }

/* ===========================
   Flex Wrapper
=========================== */
.spalten-wrapper { display: flex; gap: 20px; }
.spalte-haupt { flex: 1; }

/* ===========================
   Extras / Fresh Styles
=========================== */
.wochenkarte-fresh {
    margin-top: 25px;
    padding: 10px 12px;
    background: #f5f5f5;
    border-left: 4px solid #7cb342;
}
.wk-fresh-label { font-size: 1.05em; }

.wochenkarte-extras {
    margin-top: 15px;
    padding: 10px 12px;
    background: #fff8e1;
    border-left: 4px solid #ffa000;
}
.wk-extras-label { font-size: 1.05em; }
.wk-inline-preis { font-weight: bold; }

/* ===========================
   Responsive
=========================== */
@media (max-width: 1550px) {
    .unterspalten { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1350px) {
    .unterspalten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1200px) {
    .wk-title { padding-left: 5px;font-size: 16px; hyphens: auto;}
    .wochenkarte-container { column-gap: 5px; grid-template-columns: 120px repeat(5, 1fr); }
    .wochenkarte-tag { font-size: 20px; }
    .wochenkarte-kategorie { font-size: 14px; }
    .wk-cat-fresh .wk-gericht, .wk-cat-extras .wk-gericht, .wk-desc {font-size: 14px;}
    .zusatzstoffe-allergene-container {grid-template-columns: 120px repeat(2, minmax(0, max-content));}
    .wk-cat-meat .wk-preis, .wk-cat-veggie .wk-preis, .wk-cat-aktionsgericht .wk-preis {font-size: 14px;}
}

/* =========================
   Mobile Layout (neue Klassen)
========================= */
@media (max-width: 1024px) {
    .mobilefullheight{
        min-height: auto;
        height: 100%;
    }
    .wochenkarte-desktop { display: none; }
    .wochenkarte-mobile { display: block; }

    /* Jeder Wochentag als Block */
    .wk-day-block {
        margin-bottom: 30px;
        padding-top: 10px;
    }

    /* Header des Tages */
    .wochenkarte-tag {
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 22px;
        top:0;
        margin-bottom:0;
    }
    .wk-day-block.heute .wochenkarte-tag {
        background: #fff;
    }

    /* Vergangene Tage ausblenden */
    .wk-day-block.vergangen {
        display: none;
    }

    /* Kategorie-Label */
    .wochenkarte-kategorie {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        padding: 12px 5px;
        margin-top: 10px;
    }
    /* Farbbalken entsprechend Kategorie */
    .wk-cat-meat.wochenkarte-zelle + .wk-cat-meat.wochenkarte-zelle,
    .wk-cat-meat.wochenkarte-zelle { border-top: 3px solid #666; }

    .wk-cat-veggie.wochenkarte-zelle { border-top: 3px solid #884292; }
    .wk-cat-aktionsgericht.wochenkarte-zelle { border-top: 3px solid #f8af30; }
    .wk-cat-fresh.wochenkarte-zelle { border-top: 3px solid #3fa535; }
    .wk-cat-extras.wochenkarte-zelle { border-top: 3px solid #0074a6; }

    /* Gericht Content */
    .wk-gericht {
        text-align: center;
        padding: 12px 10px;
    }

    .wk-gericht .wk-title {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 4px;
    }

    .wk-gericht .wk-desc {
        font-size: 16px;
        text-align: center;
    }

    .wk-gericht .wk-preis {
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        margin-top: 3px;
    }

    /* Highlight für heutigen Tag */
    .wk-day-block.heute {
        background: none;
        border: 3px solid #ffa000;
    }
    .wk-day-block.zukunft {
        background: none;
        border: 3px solid #666;
    }
    .wk-cat-meat .wk-gericht, .wk-cat-veggie .wk-gericht, .wk-cat-aktionsgericht .wk-gericht{
        min-height: auto;
    }
}

/* Weitere Mobile-Feinjustierung für kleinere Geräte */
@media (max-width: 768px) {

    .wk-day-block {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        margin-bottom: 10px;
    }

    .wochenkarte-tag {
        font-size: 1.2em;
        margin-bottom: 6px;
    }

    .wochenkarte-kategorie {
        font-size: 16px;
        padding: 8px 5px;
        margin-top: 10px;
    }

    .wk-gericht .wk-title {
        font-size: 16px;
    }

    .wk-gericht .wk-desc {
        font-size: 14px;
    }

    .wk-gericht .wk-preis {
        font-size: 14px;
    }
}