/*---------------------------------------------------------------------------------

	Theme Name: Montagu
    Text Domain: montagu
	Version: 1.1.0
	Description: Alex is a teeny-tiny WordPress theme that can be used a starter theme or a really lightweight blog theme. It consists of three PHP files and weighs in at just 36 KB, excluding screenshot.png. It features the aside post format, Block Editor support, featured images, and a responsive design. Demo: https://www.bewegung-heilt.com
	Tags: blog, one-column, custom-menu, featured-images, post-formats, threaded-comments, translation-ready, block-styles, wide-blocks
	Author: Florian Breitenberger
	Author URI: https://www.florianbreitenberger.com
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Theme URI: https://www.florianbreitenberger.com
	Requires PHP: 5.4
	Tested up to: 6.3
	
	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------

	0.	CSS Reset
	1.	Document Setup
	2.  Structure
	3.	Header
	4.	Home
	5.  Entry Content
	6.	Comments
	7.	Pagination
	8.	Error 404
	9.	Footer
	10. Media Queries

----------------------------------------------------------------------------------- */

/* Mobile: gestapelt — keine seitlichen Bewegungen */
@media (max-width: 720px) {


    .home .wp-block-media-text__media {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Reduced motion: respektieren */
@media (prefers-reduced-motion: reduce) {


    .home .wp-block-media-text__media {
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}

/* -------------------------------------------------------------------------------- */
/*	0. CSS Reset
/* -------------------------------------------------------------------------------- */


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    /* Pfad zu deinem optimierten WebP Bild */
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-background.jpg.avif');

    /* Fallback-Farbe (wichtig für CLS und SEO) */
    background-color: #f4f1ed;

    background:
        linear-gradient(rgba(244, 241, 237, 0.2), rgba(244, 241, 237, 0.2)),
        url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-background.jpg.avif');
    background-repeat: repeat;
}

html.no-scroll,
body.no-scroll {
    overflow: hidden;
}

h3,
h4,
h5,
h6,
address,
img,
fieldset,
form,
label,
table,
caption,
tr {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    text-align: left;
}

h2 em {
    font-weight: normal;
}

h3 {
    font-size: 28px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -------------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------------- */

body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a {
    color: #000;
}

a:hover {
    color: #00778a;
}

body a:not(.underline-link):not(.wp-block-button__link):hover

/*,
body a:focus*/
    {
    text-decoration: underline;
}

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

iframe {
    display: block;
    width: 100%;
}

.clear {
    clear: both;
}

::selection {
    background: #000;
    color: #FFF;
}

input::-webkit-input-placeholder {
    color: #767676;
}

input:-ms-input-placeholder {
    color: #767676;
}

input::-moz-placeholder {
    color: #767676;
}

.underline-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

/* Pseudo-Element als Linie */
.underline-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    /* Abstand unterhalb des Textes */
    height: 6px;
    /* Linienstärke */
    width: 100%;
    /* volle Breite, wird mit transform skaliert */
    background: #00778a;
    /* nutzt Textfarbe */
    transform: scaleX(0);
    /* initial unsichtbar (skaliert horizontal auf 0) */
    transform-origin: left;
    /* Animation läuft von links nach rechts */
    transition: transform 0.3s ease;
    /* Dauer 0.3s wie gefordert */
    pointer-events: none;
}

/* Hover / Fokus: skaliere die Linie auf 100% */
.underline-link:hover::after {
    transform: scaleX(1);
}

/* Reduced motion: keine Animation, Linie erscheint sofort bei Hover */
@media (prefers-reduced-motion: reduce) {
    .underline-link::after {
        transition: none;
    }
}

/* -------------------------------------------------------------------------------- */
/*	2.	Structure
/* -------------------------------------------------------------------------------- */

/* Core Performance Fix für alle animierten TOC-Elemente */
#mobile-toc-trigger,
#rank-math-toc,
#desktop-toc-indicator,
.toc-dot {
    will-change: transform, top, opacity;
}

body:not(.home) .wp-block-columns {
    /*	background-color: #f9f9f9; */
    padding: 24px 36px 48px;
    margin-top: 38px;
    gap: 38px;
}

@media (min-width: 769px) {
    #rank-math-toc.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
    }
}

/* Styling der Liste im Panel */
#rank-math-toc nav ul {
    list-style: none;
    padding: 0;
}

#rank-math-toc li {
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

#rank-math-toc a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    display: block;
}

/* TOC */
/* Der schwebende Button mittig oben */
/* TOC Button mit fixem Pfeil */
@media (max-width: 768px) {
    #mobile-toc-trigger {
        width: 90%;
        /* Etwas breiter, da wir keinen Text abschneiden */
        height: 60px;
        position: fixed;
        top: -70px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        color: #000;
        border: none;
        border-radius: 12px;
        font-weight: bold;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1);

        /* Das Grid-System */
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        /* Außen fix, Mitte flexibel */
        align-items: center;
        background: #FFF;
    }

    /* Der Text in der Mitte */
    .toc-label {
        grid-column: 2;
        text-align: center;
        line-height: 1.2;
        /* Kein Abschneiden mehr */
        white-space: normal;
        font-size: 18px;
    }

    /* Der Pfeil rechts (fixer Platz) */
    #mobile-toc-trigger::after {
        grid-column: 3;
        content: '↓';
        text-align: center;
        width: 20px;
    }

    #mobile-toc-trigger.is-active::after {
        content: '↑';
    }

    /* Ein leerer Pseudo-Platzhalter links für perfekte Symmetrie */
    #mobile-toc-trigger::before {
        content: '';
        grid-column: 1;
    }

    /* Erscheint beim Runterscrollen */
    #mobile-toc-trigger.is-ready {
        top: 12px;
    }

    /* Das Rank-Math-TOC Panel */
    #rank-math-toc {
        left: 0;
        width: 100%;
        max-height: 85vh;
        background: #fff;
        z-index: 1000;
        padding: 60px 25px 30px;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

        /* Slide-Effekt */
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /*
	.toc-label {    
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis; /* Fügt "..." bei langen Titeln hinzu
	    display: block;
	    width: 100%;
	}
	*/
    #rank-math-toc.is-visible {
        transform: translateY(0);
    }
}

/*
 * DESKTOP 
 *
 *
 */

/* --- DESKTOP TOC --- */
@media (min-width: 769px) {
    #desktop-toc-indicator {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 24px;
        z-index: 1000;
        padding: 40px 80px 40px 35px;
        /* Breiterer Padding-Bereich rechts für Hover-Stability */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s;
        contain: layout;
        /* Performance-Boost */
    }

    #desktop-toc-indicator.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .toc-dot {
        width: 15px;
        height: 2px;
        background: rgba(0, 0, 0, 0.25);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        display: flex;
        align-items: center;
        position: relative;
    }

    /* Der unsichtbare "Brücken"-Layer gegen das Zappeln */
    .toc-dot::before {
        content: '';
        position: absolute;
        left: -35px;
        right: -150px;
        /* Deckt den gesamten Textbereich ab */
        top: -12px;
        /* Schließt das 24px Gap zur Hälfte nach oben */
        bottom: -12px;
        /* Schließt das 24px Gap zur Hälfte nach unten */
        background: transparent;
    }

    .toc-dot::after {
        content: attr(data-label);
        position: absolute;
        left: 55px;
        font-size: 16px;
        font-weight: 500;
        color: #111;
        /* Deine Wunschfarbe */
        white-space: nowrap;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        pointer-events: none;
    }

    /* Hover-Zustand des gesamten Menüs */
    #desktop-toc-indicator:hover .toc-dot::after {
        opacity: 0.4;
        transform: translateX(0);
    }

    #desktop-toc-indicator:hover .toc-dot.is-active::after {
        opacity: 0.8;
    }

    /* Hover-Zustand des spezifischen Punktes */
    .toc-dot:hover {
        width: 45px;
        background: #00778a;
    }

    .toc-dot:hover::after {
        opacity: 1 !important;
        color: #000 !important;
        font-weight: 700;
        transform: translateX(5px);
    }

    /* Active State (Scrollen) */
    .toc-dot.is-active {
        width: 35px;
        background: #00778a;
        height: 3px;
    }

    .toc-dot.is-active::after {
        opacity: 0;
        font-weight: 700;
        transform: translateX(0);
    }
}

/* -------------------------------------------------------------------------------- */
/*	3.	Site Header
/* -------------------------------------------------------------------------------- */

/* --- HEADER SOCIAL ICONS --- */

.header-socials {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: auto;

    /* Startzustand: Unsichtbar & nicht klickbar */
    visibility: hidden;
    opacity: 0;

    /* Transition für das SCHLIESSEN (Kein Delay, damit es sofort verschwindet) */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.header-socials a {
    display: block;
    line-height: 0;
    transition: transform 0.2s ease;
}

.header-socials a:hover {
    transform: scale(1.1) rotate(-5deg);
}

.header-socials img {
    width: 28px;
    height: auto;
    display: block;
    filter: invert(1);
}

/* --- ZUSTAND: MENÜ OFFEN --- */
#site-header.menu-open .header-socials {
    /* Endzustand: Sichtbar */
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);

    /* HIER DAS DELAY: Wartet 450ms, bevor die Animation startet */
    transition-delay: 450ms;
}

/* Mobile Anpassung */
@media (max-width: 600px) {
    .header-socials {
        gap: 15px;
        margin-right: 15px;
    }

    .header-socials img {
        width: 24px;
    }
}

/* ===========================
   Base & Layout
=========================== */

#site-header {
    transition:
        transform 0.28s cubic-bezier(.4, 0, .2, 1),
        background-color 0.2s ease;
}

#site-header.is-mobile-hidden {
    transform: translateY(-100%);
}

#site-header.is-mobile-visible {
    transform: translateY(0);
}

#site-header.is-sticky {
    background-color: #12302e;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 1200;
}

/* ===========================
   Hero pages: white header elements from start
   (pages with dark hero images need light header)
=========================== */
body.has-hero .burger-part {
    background-color: #d9dadc !important;
}

body.has-hero .site-header__inner a.cta-btn .cta-booking {
    color: #d9dadc !important;
}

body.has-hero .booking-bell-icon .bell-base,
body.has-hero .booking-bell-icon .bell-top,
body.has-hero .booking-bell-icon .bell-ring {
    fill: #d9dadc !important;
}

body.has-hero .logo {
    content: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu_logo_weiss_435x435-150x150.png.avif');
    width: 80px;
    height: 80px;
}

/* Bei sticky / dark header Zustand: invertiere in schwarz */
#site-header.is-sticky .logo,
#site-header.menu-open .logo {
    content: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu_logo_weiss_435x435-150x150.png.avif');
    width: 80px;
    height: 80px;
}

#site-header.menu-open .site-brand .logo {
    z-index: 99999;
    filter: invert(0) !important;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    #site-header,
    #site-header.is-sticky {
        transition: none !important;
    }
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0;
    padding: 12px 0
}

.menu li ul {
    margin-left: 24px;
}

.menu a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
}

.site-header__inner a.cta-btn:hover {
    text-decoration: none !important;
    opacity: .8;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .menu-overlay,
    .menu--mobile,
    .hamburger__bar,
    #site-header {
        transition: none !important;
        animation: none !important;
    }
}

/* ===========================
   Hamburger Button (sichtbar überall)
=========================== */
.hamburger:focus {
    outline: none;
}

.hamburger:focus-visible {
    outline: 2px solid #ffcc00;
    border-radius: 4px;
}

/* Transform zu "X" wenn aktiv */
.hamburger[aria-expanded="true"] .hamburger__bar {
    background: #fff;
    /* hoher Kontrast auf dunklem Overlay */
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
    transform: translateY(calc(6px + 2px)) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
    opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
    transform: translateY(calc(-6px + -2px)) rotate(-45deg);
}

button[aria-expanded="true"] .hamburger__bar {
    background-color: #fff !important;
}

/* ===========================
    DESKTOP HORIZONTAL MENU
   =========================== */
@media (min-width: 769px) {

    /* --- LAYOUT & STRUKTUR (Unverändert) --- */

    /* 1. Haupt-Nav Container */
    .menu-overlay nav {
        display: flex;
        flex-direction: column;
        display: flex;
        flex-direction: column;

        /* ÄNDERUNG 1: Höhe auf auto setzen, damit es sich auf den Inhalt zusammenzieht */
        /* height: 100%;  <-- Löschen */
        height: auto;

        /* ÄNDERUNG 2: Inhalt mittig packen statt verteilen */
        /* justify-content: space-between; <-- Löschen */
        justify-content: center;
        align-items: center;
        /* Zur Sicherheit auch horizontal zentrieren */

        /* ÄNDERUNG 3: Padding entfernen, damit es mathematisch die Mitte ist */
        /* padding: 200px 0 60px; <-- Löschen */
        padding: 0;

        /* ÄNDERUNG 4: Abstand zwischen Hauptmenü und Footer-Links definieren */
    }

    /* 2. Hauptmenü horizontal */
    #primary-menu-mobile ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    /* 3. Sub-Menü Positionierung */
    #primary-menu-mobile ul li ul.sub-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        margin: 0;
        padding: 20px 0;
        list-style: none;
        transition: opacity 0.05s ease, transform 0.05s ease;
        z-index: 100;

        /* Standardmäßig unsichtbar */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
    }

    /* 4. Zeigen beim Hover über das Eltern-li */
    #primary-menu-mobile ul li:hover ul.sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Manuelle Positionierung der Sub-Menüs (Deine Werte) */
    li#menu-item-1063 ul.sub-menu {
        left: 24px;
    }

    li#menu-item-1065 ul.sub-menu,
    li#menu-item-1072 ul.sub-menu {
        left: 32px;
    }


    li#menu-item-1064 ul.sub-menu {
        left: 12px;
    }

    /* --- SUB-MENU STYLE & ANIMATION --- */

    #primary-menu-mobile ul li ul.sub-menu li {
        padding: 5px 0;
        height: auto !important;
    }

    #primary-menu-mobile ul li ul.sub-menu a {
        font-size: 1.5rem !important;
        text-transform: none;
        color: #fff;
        opacity: 0.8;
        white-space: nowrap;
        text-decoration: none !important;
        position: relative;
        display: inline-block;
        padding-bottom: 3px;
        width: fit-content;
    }

    /* Der Strich (Basis-Setup) */
    #primary-menu-mobile ul li ul.sub-menu a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0%;
        height: 4px;
        /* Standard-Farbe (wird unten überschrieben) */
        background: #fff;
        transition: width 0.3s ease-in-out;
    }

    /* Hover: Strich wächst */
    #primary-menu-mobile ul li ul.sub-menu a:hover::after {
        width: 100%;
    }

    /* --- FOOTER MENU (Unverändert) --- */

    #primary-menu-mobile {
        margin-top: 0;
    }

    #footer-menu-mobile {
        margin-top: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 24px;
        position: absolute;
    }

    #footer-menu-mobile ul {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
    }

    #footer-menu-mobile a {
        font-size: 1rem !important;
        opacity: 0.6;
    }
}

/* ==========================================================================
   BILDER MENÜ & FARBEN (HIER IST DIE ÄNDERUNG)
   ========================================================================== */

/* 1. Container Setup */
li#menu-item-1062,
li#menu-item-1063,
li#menu-item-1065,
li#menu-item-1064,
li#menu-item-1125,
li#menu-item-1072,
li#menu-item-1074 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

li#menu-item-1064 {
    height: 100px;
}

/* Bar Special Height */

/* 2. Text unsichtbar */
li#menu-item-1062>a,
li#menu-item-1063>a,
li#menu-item-1065>a,
li#menu-item-1064>a,
li#menu-item-1125>a,
li#menu-item-1072>a,
li#menu-item-1074>a {
    color: transparent !important;
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: block;
}

/* 3. Masking Basis-Setup (Standard: Schwarz) */
li#menu-item-1062::before,
li#menu-item-1063::before,
li#menu-item-1065::before,
li#menu-item-1064::before,
li#menu-item-1125::before,
li#menu-item-1072::before,
li#menu-item-1074::before {

    /* Reset alter Styles */
    background-image: none !important;
    filter: none !important;

    /* Standardfarbe: Schwarz */
    background-color: white;

    /* Masking */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    transition: background-color 0.2s ease-in-out;
}

/* 4. MASKING BILDER URLS */
li#menu-item-1062::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-home-font-300x300.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-home-font-300x300.png.avif');
}

li#menu-item-1063::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-house-font-300x277.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-house-font-300x277.png.avif');
}

li#menu-item-1065::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-font-300x271.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-font-300x271.png.avif');
}

li#menu-item-1064::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-bar-innsbruck-font-257x300.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-bar-innsbruck-font-257x300.png.avif');
}

li#menu-item-1125::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-blog-font.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-blog-font.png.avif');
}

li#menu-item-1072::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-contact2-font.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-contact2-font.png.avif');
}

li#menu-item-1074::before {
    -webkit-mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-booking-font.png.avif');
    mask-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-booking-font.png.avif');
}

/* 5. INDIVIDUELLE FARBEN ZUWEISEN */
/* Hier weisen wir jedem Punkt seine Farbe zu:
   a) Dem Haupt-Icon beim Hover (::before)
   b) Dem Untermenü-Strich (ul.sub-menu a::after)
*/

/* HOME (#f7a762) */
li#menu-item-1062::before {
    background-color: #f7a762 !important;
}

li#menu-item-1062 ul.sub-menu a::after {
    background: #f7a762 !important;
}

/* HOUSE (#a78322) */
li#menu-item-1063::before {
    background-color: #a78322 !important;
}

li#menu-item-1063 ul.sub-menu a::after {
    background: #a78322 !important;
}

/* HOSTEL (#746db1) */
li#menu-item-1065::before {
    background-color: #746db1 !important;
}

li#menu-item-1065 ul.sub-menu a::after {
    background: #746db1 !important;
}

/* BAR (#5e572d) */
li#menu-item-1064::before {
    background-color: #5e572d !important;
}

li#menu-item-1064 ul.sub-menu a::after {
    background: #5e572d !important;
}

/* BLOG (#d0b07d) */
li#menu-item-1125::before {
    background-color: #d0b07d !important;
}

li#menu-item-1125 ul.sub-menu a::after {
    background: #d0b07d !important;
}

/* CONTACT (#b6b4e6) */
li#menu-item-1072::before {
    background-color: #b6b4e6 !important;
}

li#menu-item-1072 ul.sub-menu a::after {
    background: #b6b4e6 !important;
}

/* BOOKING (#a59c7d) */
li#menu-item-1074::before {
    background-color: #a59c7d !important;
}

li#menu-item-1074 ul.sub-menu a::after {
    background: #a59c7d !important;
}

/* --- MOBILE MENU FINAL FIX (Alles andere für max-width: 768px löschen!) --- */
@media (max-width: 768px) {

    /* 1. Haupt-Container (UL): Flex-Spalte, zentriert */
    #primary-menu-mobile ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: auto !important;
        overflow-y: auto !important;
        /* Scrollen ermöglichen falls Menü zu lang */
    }

    /* 2. Listen-Elemente (LI): Reset aller fixen Positionen */
    #primary-menu-mobile ul li,
    #primary-menu-mobile ul li[id^="menu-item-"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;

        width: 100% !important;
        height: auto !important;
        /* Wächst mit Untermenü */

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* 3. Das Schrift-Bild (::before): Oben fixiert */
    #primary-menu-mobile ul li::before,
    #primary-menu-mobile ul li[id^="menu-item-"]::before {
        content: "";
        display: block;
        position: absolute;
        /* Absolut innerhalb des LI */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        /* Fixe Bildhöhe */

        background-position: center top !important;
        /* Bild klebt oben */
        background-size: contain !important;
        background-repeat: no-repeat !important;

        transform: none !important;
        z-index: 1 !important;
    }

    /* Clip overflow on menu items so decorative bars in font images don't bleed */
    #primary-menu-mobile ul li {
        overflow: hidden !important;
    }

    li#menu-item-1064::before {
        height: 60px !important
    }

    /* House font image has a decorative bar at the top — shift up to clip it */
    @media (max-width: 768px) {
        li#menu-item-1063::before {
            top: -8px !important;
        }
    }

    /* 4. Der Link (A): Unsichtbarer Klickbereich über dem Bild */
    #primary-menu-mobile ul li>a {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 80px !important;
        /* Deckt genau das Bild ab */
        z-index: 20 !important;
        /* Klickbar über dem Bild */
        margin-bottom: 0 !important;
    }

    /* 5. Das Untermenü (UL.sub-menu): Erscheint UNTER dem Bild */
    #primary-menu-mobile ul li ul.sub-menu {
        display: none !important;
        /* Standardmäßig versteckt */
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        margin-top: 10px !important;
        /* Kleiner Abstand zum Bild */
        padding-bottom: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        z-index: 15 !important;
    }

    /* 6. Untermenü anzeigen wenn offen */
    #primary-menu-mobile ul li.mobile-open ul.sub-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* 7. Styling der Sub-Links */
    #primary-menu-mobile ul li ul.sub-menu a {
        font-family: "Helvetica", Arial, sans-serif !important;
        font-size: 18px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #fff !important;
        opacity: 0.9 !important;
        height: auto !important;
        padding: 5px 0 !important;
        text-align: center !important;
        display: block !important;
    }
}

/* --- FONT STEFAN --- */

li#menu-item-1062 {
    top: 12px;
}

li#menu-item-1063 {
    top: 2px;
}

li#menu-item-1065 {
    top: 6px;
}

li#menu-item-1064 {
    top: 26px;
}

li#menu-item-1125 {
    top: 30px;
    left: 12px;
}

li#menu-item-1072 {
    top: 6px;
}

li#menu-item-1074 {
    top: 28px;
}

/* 1. Container vorbereiten */
li#menu-item-1062,
li#menu-item-1063,
li#menu-item-1065,
li#menu-item-1064,
li#menu-item-1125,
li#menu-item-1072,
li#menu-item-1074 {
    position: relative;
    /* Wichtig für die Positionierung des Bildes */
    /* Höhe anpassen! 240px ist riesig, probier mal 100-150px */
    display: flex;
    /* Hilft beim Ausrichten */
    align-items: center;
}

li#menu-item-1062,
li#menu-item-1063,
li#menu-item-1065,
li#menu-item-1125,
li#menu-item-1072,
li#menu-item-1074 {
    height: 120px;
}

li#menu-item-1064 {
    height: 100px;
}

/* Mobile: reduce menu item heights so all content fits viewport */
@media (max-width: 768px) {

    li#menu-item-1062,
    li#menu-item-1063,
    li#menu-item-1065,
    li#menu-item-1125,
    li#menu-item-1072,
    li#menu-item-1074 {
        height: 85px !important;
    }

    li#menu-item-1064 {
        height: 72px !important;
    }

    .menu-overlay {
        padding: 60px 0 24px;
        justify-content: flex-start;
    }

    /* Switch socials + legal links to flex flow on mobile */
    .header-socials {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: auto;
        flex-shrink: 0;
        justify-content: center;
        width: 100%;
        padding: 16px 0 8px;
    }

    #site-header.menu-open .header-socials {
        transform: none !important;
    }

    #footer-menu-mobile {
        position: relative !important;
        bottom: auto !important;
        flex-shrink: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-bottom: 16px;
    }
}

/* 2. Text "House" unsichtbar machen, aber Link klickbar lassen */
li#menu-item-1062>a,
li#menu-item-1063>a,
li#menu-item-1065>a,
li#menu-item-1064>a,
li#menu-item-1125>a,
li#menu-item-1072>a,
li#menu-item-1074>a {
    color: transparent !important;
    /* Text transparent */
    position: relative;
    z-index: 20;
    /* Link liegt über dem Bild */
    width: 100%;
    height: 100%;
    display: block;
    /* Damit der ganze Bereich klickbar ist */
}

/* 3. Das Bild einfügen */
li#menu-item-1062::before,
li#menu-item-1063::before,
li#menu-item-1065::before,
li#menu-item-1064::before,
li#menu-item-1125::before,
li#menu-item-1072::before,
li#menu-item-1074::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Dein Bild */
    background-size: contain;
    /* Bild passt sich der Höhe an */
    background-repeat: no-repeat;
    background-position: center;
    /* Bild linksbündig oder 'center center' */

    z-index: 10;
    pointer-events: none;
    /* Klicks gehen durch das Bild auf den Link */

    /* Farbe anpassen (Invertieren für Weiß auf Schwarz) */
    filter: invert(1);
}

li#menu-item-1062::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-home-font-300x300.png.avif');
}

li#menu-item-1063::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-house-font-300x277.png.avif');
}

li#menu-item-1065::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-font-300x271.png.avif');
}

li#menu-item-1065::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-font-300x271.png.avif');
}

li#menu-item-1064::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-bar-innsbruck-font-257x300.png.avif');
}

li#menu-item-1125::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-blog-font.png.avif');
}

li#menu-item-1072::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-contact2-font.png.avif');
}

li#menu-item-1074::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-booking-font.png.avif');
}

/* ===========================
   Mobile Overlay Navigation (auch Desktop)
=========================== */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.95);
    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    visibility: hidden;
    pointer-events: none;
    opacity: 0;

    transform: translateY(-12px) scale(0.995);
    transition:
        opacity 120ms ease-out,
        transform 120ms cubic-bezier(.22, 1, .36, 1);

    will-change: opacity, transform;
    z-index: 99999;
}

/* Geöffneter Zustand */
.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
    z-index: 9999;
}

/* Zentriertes Menü im Overlay */
.menu-overlay .menu--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 420ms cubic-bezier(.2, .9, .2, 1), opacity 420ms cubic-bezier(.2, .9, .2, 1);
    transition-delay: 40ms;
}

/* Wenn overlay offen -> bring menu in */
.menu-overlay.is-open .menu--mobile {
    transform: translateY(0);
    opacity: 1;
}

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

    .menu-overlay,
    .menu--mobile {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.menu--mobile ul>li {
    list-style: none;
}

/* --- ANIMATION LOGIK FÜR DIE BILD-ITEMS --- */

/* 1. Startzustand (Wenn Menü ZU ist) */
#primary-menu-mobile ul>li,
#footer-menu-mobile ul>li {
    opacity: 0;
    transform: translateY(20px);
    /* Leicht nach unten verschoben */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 2. Endzustand (Wenn Menü OFFEN ist) */
/* Wir nutzen die Klasse .is-open vom Overlay */
.menu-overlay.is-open #primary-menu-mobile ul>li,
.menu-overlay.is-open #footer-menu-mobile ul>li {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Die Verzögerungen (Stagger) - JETZT AUF DEM LI */
/* Primary Menu (Die großen Bilder) */
.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(1) {
    transition-delay: 100ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(2) {
    transition-delay: 150ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(3) {
    transition-delay: 200ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(4) {
    transition-delay: 250ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(5) {
    transition-delay: 300ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(6) {
    transition-delay: 350ms;
}

.menu-overlay.is-open #primary-menu-mobile ul>li:nth-child(7) {
    transition-delay: 400ms;
}

/* Footer Menu (Die kleinen Links unten) */
.menu-overlay.is-open #footer-menu-mobile ul>li:nth-child(1) {
    transition-delay: 550ms;
}

.menu-overlay.is-open #footer-menu-mobile ul>li:nth-child(2) {
    transition-delay: 600ms;
}

.menu-overlay.is-open #footer-menu-mobile ul>li:nth-child(3) {
    transition-delay: 650ms;
}

.menu-overlay.is-open #footer-menu-mobile ul>li:nth-child(4) {
    transition-delay: 700ms;
}

.menu-overlay.is-open #footer-menu-mobile ul>li:nth-child(5) {
    transition-delay: 750ms;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .menu--mobile ul>li>a,
    .menu-overlay .menu--mobile {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

#primary-menu-mobile a {
    font-size: 3rem;
    color: transparent;
    padding: 0.5rem 0;
}

#footer-menu-mobile {
    margin-top: 24px;
    float: left;
}

#footer-menu-mobile ul {
    display: flex;
}

#footer-menu-mobile ul>li {
    margin-right: 12px;
}

.menu--mobile a:focus-visible {
    outline: 2px solid #ffcc00;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    #primary-menu-mobile .page_item,
    #primary-menu-mobile .page_item.is-visible,
    #footer-menu-mobile .page_item,
    #footer-menu-mobile .page_item.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* -------------------------------------------------------------------------------- */
/*	4.	Home
/* -------------------------------------------------------------------------------- */

.custom-grid-container {
    display: flex;
    gap: 20px;
    width: 100%;
}

.custom-grid-column {
    flex: 1;
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: flex-end;
    padding-bottom: 20px;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    align-items: flex-end;
}

/* NEU: Das echte Image Tag als Hintergrund */
.column-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ersetzt background-size: cover */
    z-index: 1;
    transition: transform 0.4s ease-in-out;
}

.custom-grid-column:hover .column-bg-img {
    transform: scale(1.01);
}

/* Der dunkle Verlauf von unten */
.custom-grid-column::after {
    content: " ";
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 2;
    pointer-events: none;
}

.column-content-wrapper {
    width: 85%;
    text-align: center;
    display: flex;
    align-items: center;
    z-index: 3;
    /* Über dem Schatten und dem Bild */
    position: relative;
}

/* Spezifische Breiten für die Grafiken */
.custom-grid-container a:first-child .column-overlay-graphic {
    width: 60%;
}

.custom-grid-container a:nth-child(2) .column-overlay-graphic {
    width: 50%;
}

.custom-grid-container a:nth-child(3) .column-overlay-graphic {
    width: 55%;
}

.column-overlay-graphic {
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Invertierung für das Bild innerhalb des Wrappers */
.column-overlay-graphic img,
img.column-overlay-graphic {
    filter: invert(1) brightness(2);
}

.column-title {
    text-indent: -9999px;
}

/* Mobil-Ansicht */
@media (max-width: 768px) {

    /* WICHTIG: Container-Richtung auf vertikal ändern */
    .custom-grid-container {
        flex-direction: column;
    }

    .custom-grid-column {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* h2 shoutout */
.shoutout {
    position: relative;
    display: block;
    /* Auf Block ändern, damit Breite greift */
    margin: 120px auto 40px;
    /* Zentrierung auf der Seite */
    height: 200px;
    /* Gib der H2 eine feste Höhe, die zur Grafik passt */
    text-align: center;
    overflow: hidden;
    /* Verhindert, dass der weg geschobene Text Scrollbars erzeugt */
    text-indent: 100%;
    /* Schiebt Text nach rechts */
    white-space: nowrap;
    /* Verhindert Zeilenumbruch des Textes */
}

.shoutout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Nutze die Original-PNG, falls das AVIF im CSS zickt */
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/uploads/2026/02/montagu-hostel-innsbruck-shoutout-font.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;

    z-index: 10;
    text-indent: 0;
    /* Setzt den Text-Indent für das Pseudo-Element zurück */
    pointer-events: none;

    /* Wenn die Grafik dunkel ist und weiß werden soll: */
    filter: brightness(2);
}

/* Falls der Text unter der Grafik verschwinden soll */
.shoutout {
    text-indent: -9999px;
    /* Aktivieren, wenn nur die Grafik sichtbar sein soll */
}

figure.wp-block-image.align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

figure.wp-block-image.align-center picture,
figure.wp-block-image.align-center img {
    display: block;
    margin: 0 auto;
}

/* h2 shoutout */
.location,
.values,
.result,
.instagram,
.latest,
.fame,
.sitemap,
.latest,
.blog {
    position: relative;
    display: block;
    /* Auf Block ändern, damit Breite greift */
    text-align: center;
    overflow: hidden;
    /* Verhindert, dass der weg geschobene Text Scrollbars erzeugt */
    text-indent: 110%;
    /* Schiebt Text nach rechts */
    white-space: nowrap;
    /* Verhindert Zeilenumbruch des Textes */
}

.location,
.values,
.result,
.instagram,
.blog {
    height: 240px;
    /* Gib der H2 eine feste Höhe, die zur Grafik passt */
}

.latest {
    height: 180px;
}

.instagram,
.fame {
    height: 320px;
}

.location::before,
.values::before,
.result::before,
.instagram::before,
.latest::before,
.fame::before,
.sitemap::before,
.blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Nutze die Original-PNG, falls das AVIF im CSS zickt */
    background-size: contain;
    background-repeat: no-repeat;

    z-index: 10;
    text-indent: 0;
    /* Setzt den Text-Indent für das Pseudo-Element zurück */
    pointer-events: none;

    /* Wenn die Grafik dunkel ist und weiß werden soll: */
    filter: brightness(2);
}

.location::before,
.values::before,
.result::before,
.instagram::before,
.blog::before {
    background-position: center;
}

.latest::before {
    background-position: left center;
}

.location::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-location-font-300x228.png.avif');
}

.values::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-values-font-300x228.png.avif');
}

.result::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-result-font-300x228.png.avif');
}

.instagram::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-instagram-font-768x442.png.avif');
}

.latest::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-latest-news-font-768x387.png.avif');
}

.fame::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-wall-of-fame-font.png.avif');
}

.sitemap::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-sitemap-font.png.avif');
}

.blog::before {
    background-image: url('https://wp.rdn3r2nnu7f7uix.static4.studio/wp-content/compressx-nextgen/uploads/2026/02/montagu-hostel-innsbruck-blog-font.png.avif');
}

.meta p {
    font-style: italic;
}

/* --- AUTHOR BOX --- */
.author-box {
    margin: 60px 0 40px;
    /* Abstand nach oben/unten */
    padding: 30px;
    background-color: #f9f9f9;
    /* Ganz leichtes Grau */
    border-left: 4px solid #d4af37;
    /* Dein Gold-Ton als Akzent */
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-radius: 2px;
}

.author-avatar img {
    border-radius: 50%;
    /* Rundes Bild */
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.author-info {
    flex: 1;
}

.author-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 5px 0 !important;
}

.author-name {
    margin: 0 0 10px 0 !important;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
}

.author-bio {
    margin: 0 0 15px 0 !important;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

.author-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #d4af37;
    /* Gold */
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.author-link:hover {
    color: #000;
}

/* Mobile: Untereinander */
@media (max-width: 600px) {
    .author-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .author-info {
        width: 100%;
    }
}

/* --- CINEMATIC POST NAV --- */

.cinematic-post-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0;
    /* Abstand nach oben */
    /* Optional: Abrunden */
    overflow: hidden;
    gap: 20px;
}

.cinematic-post-nav h4 {
    width: 100%;
    /* Zwingt die Links in die nächste Zeile */
    margin: 30px 0 20px;
    /* Abstand oben/unten */
    letter-spacing: 3px;
    font-size: 1rem;
}

.cine-nav-item {
    position: relative;
    flex: 1;
    min-width: 300px;
    /* Umbruch auf Handy */
    height: 250px;
    /* Schön hoch für Bilder */
    display: flex;
    text-decoration: none !important;
    overflow: hidden;
}

/* Leeres Element (Platzhalter) */
.cine-nav-item.empty {
    pointer-events: none;
    /* Auf Handy ausblenden, wenn leer */
    display: none;
}

@media (min-width: 769px) {
    .cine-nav-item.empty {
        display: block;
    }
}

/* --- HINTERGRUND & ANIMATION --- */

.cine-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.8;
}

/* Hover: Bild zoomt sanft rein */
.cine-nav-item:hover .cine-bg {
    transform: scale(1.1);
    opacity: 0.6;
    /* Wird etwas dunkler, damit Text knallt */
}

/* --- OVERLAY (Verlauf) --- */
.cine-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Verlauf von Transparent (oben) zu Schwarz (unten) für Lesbarkeit */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

/* --- TEXT INHALT --- */

.cine-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text klebt unten */
}

/* Ausrichtung: Links für Prev, Rechts für Next */
.cine-nav-item.prev .cine-content {
    align-items: flex-start;
    text-align: left;
}

.cine-nav-item.next .cine-content {
    align-items: flex-end;
    text-align: right;
}

/* Das Label (Gold) */
.cine-label {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d4af37;
    /* Dein Gold */
    margin-bottom: 10px;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Der Titel (Weiß) */
.cine-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- PFEIL ANIMATION --- */
/* Beim Hover bewegt sich das Label mit dem Pfeil */
.cine-nav-item.prev:hover .cine-label {
    transform: translateX(-5px);
}

.cine-nav-item.next:hover .cine-label {
    transform: translateX(5px);
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .cinematic-post-nav {
        flex-direction: column;
    }

    .cine-nav-item {
        height: 180px;
        /* Etwas flacher auf Handy */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Auf Handy Text immer linksbündig oder mittig, was dir lieber ist */
    .cine-nav-item.next .cine-content {
        align-items: flex-start;
        text-align: left;
    }
}

/* ============================================================
   NUR FOOTER / NEWS SLIDER CSS
   STYLE: ANALOG FILM STRIP (Mit orangenen Nummern, reduzierter Glow)
   ============================================================ */

/* 1. Sektion bricht aus (Full Width) */
.news-slider-section {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-bottom: 120px;
    background-color: #050505;
    /* Fast schwarz */
}

/* Titel Styling */
.news-slider-section .news-section-title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 25px auto;
    padding: 0 20px;
    text-align: center;
    font-size: 2rem;
    text-transform: uppercase;
    color: #e0e0e0;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------
   DER CONTAINER (Hintergrund & Dimensionen)
-------------------------------------------------- */
.news-slider-section .vanilla-slider-container {
    width: 100%;
    /* HIER GEÄNDERT: Von 520px auf 350px */
    height: 350px;
    aspect-ratio: unset !important;
    background: #FFF;
    position: relative;

    /* HIER GEÄNDERT: Platz für dünnere Streifen (von 45px auf 30px) */
    padding-top: 30px;
    padding-bottom: 30px;

    box-sizing: border-box;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
    margin: 15px auto !important;

}

/* --------------------------------------------------
   DIE PERFORATION (Das Wichtigste!)
   Wir nutzen ein "Data URI" SVG. Das ist ein Bild, das direkt im Code steckt.
-------------------------------------------------- */

/* --------------------------------------------------
   DIE PERFORATION (Angepasst auf flach)
-------------------------------------------------- */

.news-slider-section .vanilla-slider-container::before,
.news-slider-section .vanilla-slider-container::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;

    /* HIER GEÄNDERT: Höhe der Streifen von 45px auf 30px */
    height: 30px;

    z-index: 20;
    pointer-events: none;

    /* Das Bild bleibt gleich, aber wir ändern die SIZE unten */
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='45' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3Etext%7Bfill:%23d99e4b;font-family:'Courier New',monospace;font-weight:bold;font-size:11px;opacity:0.9;letter-spacing:1px%7Drect%7Bfill:%23d99e4b;opacity:0.9%7D%3C/style%3E%3Ctext x='30' y='27'%3EKODAK PORTRA 400%3C/text%3E%3Ctext x='250' y='27'%3E► 21%3C/text%3E%3Crect x='290' y='18' width='2' height='12'/%3E%3Crect x='294' y='18' width='1' height='12'/%3E%3Crect x='297' y='18' width='3' height='12'/%3E%3Ctext x='310' y='27'%3E21A%3C/text%3E%3Ctext x='450' y='27'%3E► 22%3C/text%3E%3Crect x='490' y='18' width='2' height='12'/%3E%3Crect x='494' y='18' width='1' height='12'/%3E%3Crect x='497' y='18' width='3' height='12'/%3E%3Ctext x='510' y='27'%3E22A%3C/text%3E%3Ctext x='650' y='27'%3E► 23%3C/text%3E%3Crect x='690' y='18' width='2' height='12'/%3E%3Crect x='694' y='18' width='1' height='12'/%3E%3Crect x='697' y='18' width='3' height='12'/%3E%3Ctext x='910' y='27'%3E24A%3C/text%3E%3Ctext x='1050' y='27'%3E► 25%3C/text%3E%3Crect x='1090' y='18' width='2' height='12'/%3E%3Crect x='1094' y='18' width='1' height='12'/%3E%3Crect x='1097' y='18' width='3' height='12'/%3E%3Ctext x='1110' y='27'%3E25A%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='30' height='45' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 0h30v45H0V0zm9 12a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v21a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V12z' fill='%23080808'/%3E%3C/svg%3E");

    background-repeat: repeat-x, repeat-x;

    /* HIER GEÄNDERT: Wir zwingen das 45px hohe SVG auf 30px Höhe */
    /* Syntax: width height */
    background-size: 800px 30px, 20px 30px;
}

/* Streifen Oben */
.news-slider-section .vanilla-slider-container::before {
    top: 0;
    border-bottom: 1px solid #1a1a1a;
}

/* Streifen Unten */
.news-slider-section .vanilla-slider-container::after {
    bottom: 0;
    border-top: 1px solid #1a1a1a;
    transform: scaleY(-1);
}


/* --------------------------------------------------
   DIE SLIDES (Inhalt)
-------------------------------------------------- */
.news-slider-section .slider-wrapper {
    padding: 0;
    /* Bilder berühren sich */
}

.news-slider-section .slide {
    flex: 0 0 33.333%;
    width: 33.333%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    scroll-snap-align: start;

    /* Der schwarze Steg zwischen den Bildern (Frame Trenner) */
    border-right: 36px solid #080808;
    position: relative;
    background: #000;
}

/* Link-Container */
.news-slider-section .news-card-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
}

/* BILD LOOK (Analog Filter) */
.news-slider-section .news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Der "Vintage" Look: Etwas Sepia, hoher Kontrast, leicht dunkel */
    filter: sepia(0.2) contrast(1.2) brightness(0.9) saturate(0.9);
    transition: all 0.6s ease;
}

/* Hover Effekt: Bild wird "entwickelt" (heller/klarer) */
.news-slider-section .news-card-link:hover .news-media img {
    transform: scale(1.02);
    filter: sepia(0) contrast(1.0) brightness(1.05) saturate(1.1);
}

/* --------------------------------------------------
   TEXT & NAVIGATION
-------------------------------------------------- */
.news-slider-section .news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    text-align: left;
}

.news-slider-section .news-date {
    display: block;
    color: #c0a35b;
    /* Mattes Gold */
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-family: monospace;
    /* Passt super zum Film-Look */
}

.news-slider-section .news-title {
    color: #f0f0f0;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 5px #000;
}

/* Pfeile (Technisch/Mechanisch) */
.news-slider-section .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 70px;
    background: #111;
    border: 3px solid #333;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    /* Über der Perforation liegen */
    transition: all 0.2s ease;
    opacity: 0.8;
}

.news-slider-section .slider-arrow:hover {
    border-color: #c0a35b;
    opacity: 1;
}

.news-slider-section .slider-arrow svg {
    fill: #c0a35b;
    width: 22px;
}

.news-slider-section .arrow-prev {
    left: 0;
    border-left: none;
}

.news-slider-section .arrow-next {
    right: 0;
    border-right: none;
}

.news-slider-section .slider-dots {
    display: none;
}

/* --------------------------------------------------
   MOBILE ANPASSUNG
-------------------------------------------------- */
@media (max-width: 768px) {
    .news-slider-section .vanilla-slider-container {
        height: 420px;
        padding-top: 35px;
        padding-bottom: 35px;
    }

    /* Löcher & Nummern skalieren für Mobile */
    .news-slider-section .vanilla-slider-container::before,
    .news-slider-section .vanilla-slider-container::after {
        height: 35px;
        background-size: 400px 35px, 24px 35px;
    }

    .news-slider-section .slide {
        flex: 0 0 100%;
        /* Ein Bild voll anzeigen */
        width: 100%;
        border-right: none;
        padding: 0 2px;
    }

    .news-slider-section .slider-arrow {
        display: none;
    }

    .news-title {
        font-size: 1.2rem;
    }
}

/* BOOKING TAB */

/* Booking page: always-visible header with solid background */
#site-header.booking-header {
    background-color: #12302e !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

/* Force sticky colors on booking page — even when JS toggles is-sticky off */
#site-header.booking-header .burger-part {
    background-color: #d9dadc !important;
}

#site-header.booking-header .cta-booking {
    color: #d9dadc !important;
}

#site-header.booking-header .booking-bell-icon .bell-base,
#site-header.booking-header .booking-bell-icon .bell-top,
#site-header.booking-header .booking-bell-icon .bell-ring {
    fill: #d9dadc !important;
}

#site-header.booking-header .site-header__inner>a {
    color: #d9dadc !important;
}

.booking-iframe-wrapper {
    margin-top: 112px;
    width: 100%;
    background: #fff;
}

.booking-iframe-wrapper iframe {
    width: 100%;
    height: calc(100vh - 112px);
    /* Viewport-filling iframe — user scrolls inside the iframe.
       This makes position:fixed (cookie banner) work correctly
       inside the cross-origin iframe, just like visiting the
       booking engine directly. */
    display: block;
    border: none;
}

/* Mobil-Anpassung */
@media (max-width: 768px) {
    .booking-iframe-wrapper {
        margin-top: 112px;
    }

    .booking-iframe-wrapper iframe {
        height: calc(100vh - 112px);
    }

}

/* -------------------------------------------------------------------------------- */
/*	5.	Entry Content
/* -------------------------------------------------------------------------------- */


.content a:not(.wp-block-button__link) {
    text-decoration: underline;
}

.content a:not(.wp-block-button__link):hover {
    color: #767676;
    text-decoration: underline;
}

.wp-block-button__link {
    text-decoration: none !important;
    border-radius: 8px !important;
    margin-top: 24px;
    background-color: #00778a !important;
    color: #fff;
}

.content p,
.content figure {
    margin-bottom: 30px;
    margin-top: 30px;
}


.content p {
    line-height: 1.55;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 30px;
}

.content hr {
    border: none;
    margin: 40px 0;
    text-align: center;
}

.content hr:before {
    content: "***";
}

.content>ol,
.content>ul {
    margin-bottom: 30px;
}

.post ul {
    list-style: disc;
    margin-left: 24px;
}

.post ul.wp-block-post-template {
    list-style: none;
}

.post ul ul {
    list-style: circle;
}

.post ul ul ul {
    list-style: square;
}

.post ol ol {
    list-style: lower-alpha;
}

.post ol ol ol {
    list-style: lower-roman;
}


dt {
    line-height: 1.5;
}

.wp-block-spacer {
    height: 100px;
}

/* Quotes ----------------------------- */

/* Media ------------------------------ */

.alignleft,
.alignright {
    margin-bottom: 20px;
    max-width: 50%;
}

.alignleft {
    float: left;
    margin-right: 20px;
}

.alignright {
    float: right;
    margin-left: 30px;
}

.aligncenter,
.alignwide {
    margin: 0 auto 30px auto;
}

figcaption {
    font-size: 0.9em;
    font-style: italic;
    margin-top: 10px;
}

/* Inputs ----------------------------- */

fieldset {
    border: 1px solid #ddd;
    padding: 25px;
}

label {
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: 10px;
}

textarea,
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="url"] {
    border: 1px solid #ddd;
    color: #000;
    display: block;
    font-size: 0.9em;
    margin: 0 0 15px 0;
    padding: 15px;
    width: 100%;
}

textarea {
    line-height: 1.5;
    height: 200px;
}

input.button,
input[type="button"],
input[type="submit"] {
    background: #000;
    border: none;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 14px 24px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type="button"]:hover,
input.button:hover,
input[type="submit"]:hover {
    background: #767676;
    cursor: pointer;
}

/* Tables ----------------------------- */

table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    font-size: 0.9em;
    margin-bottom: 30px;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

caption {
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 2.5%;
    text-align: center;
    text-transform: uppercase;
}

/* Block: Image ------------------------------ */

.wp-block-image .aligncenter>figcaption,
.wp-block-image .alignleft>figcaption,
.wp-block-image .alignright>figcaption,
.wp-block-image.is-resized>figcaption {
    display: block;
    width: 100%;
}

/* Block: File --------------------------------------- */

.wp-block-file__button:hover,
.wp-block-button__link:hover {
    opacity: .85;
    text-decoration: none;
    color: #fff;
}

/* Block: Quote --------------------------------------- */

/* Block: Pullquote --------------------------------------- */

/* Block: Gallery --------------------------------------- */

.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    margin: 0;
    padding-bottom: 10px;
}

.wp-block-gallery.alignfull {
    padding: 0 8px;
}

ul.wp-block-gallery:not(.alignright) {
    margin-left: 0;
}

/* Block: Cover Image --------------------------------------- */

/* Block: Column --------------------------------------- */

.wp-block-column {
    padding: 0 5px;
}

.padding {
    padding: 5% 0 5% 10% !important;
}

/* Block: Audio --------------------------------------- */

/* Block: Photo --------------------------------------- */


.wp-block-post-template.is-layout-grid {
    align-items: stretch
}

.wp-block-post-template.is-layout-grid>li {
    display: flex
}

.wp-block-post-template.is-layout-grid>li .wp-block-columns {
    /* display:flex; */
    flex-direction: column;
    gap: 0.75rem;
    width: 100%
}

.wp-block-post-template.is-layout-grid>li .wp-block-column {
    display: flex;
    flex-direction: column;
    height: 100%
}

.wp-block-post-template.is-layout-grid .wp-block-buttons {
    margin-top: auto;
}

.first {
    bottom: 58px;
    left: 24px;
}

.second {
    left: 42px;
    top: 48px;
}

.third {
    bottom: 36px;
    max-width: 50% !important;
}

.third picture {
    width: 280px;
}

.wp-block-image img {
    width: 100%;
}

/* Block: Post Grid --------------------------------------- */
/* 1) Grid-Items auf gleiche Höhe strecken */
.wp-block-post-template.is-layout-grid {
    align-items: stretch;
    /* Grid-Items füllen die Zeilenhöhe */
}

/* 2) Jedes Listenelement als Card aufbauen */
.wp-block-post-template.is-layout-grid>li {
    display: flex;
    /* li wird Flex-Container */
}

/* 3) Der Columns-Wrapper wird vertikal gestapelt (eine Spalte = 100%) */
.wp-block-post-template.is-layout-grid>li .wp-block-columns {
    display: flex;
    flex-direction: column;
    gap: var(--wp--style--block-gap, 1rem);
    width: 100%;
}

/* 4) Die einzelne Spalte wird selbst zum Flex-Container, der die Karte füllt */
.wp-block-post-template.is-layout-grid>li .wp-block-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 5) Featured Image: einheitliches Seitenverhältnis + nicht mitstrecken */

/* 6) Textblöcke normal stacken */

/* 7) Buttons nach unten drücken -> alle auf einer Linie */
.wp-block-post-template.is-layout-grid .wp-block-buttons {
    margin-top: auto;
    /* nimmt restlichen Platz ein und sitzt unten */
}

.maps img {
    opacity: 0.3;
}


.maps {
    padding: 1rem 1rem 1rem 3rem;
}

.maps .aligncenter {
    margin-left: 0 !important;
}


/* WP INLINE HEADER STYLES */

body .is-layout-flex {
    display: flex
}

.is-layout-flex {
    flex-wrap: wrap;
    align-items: center
}

.is-layout-flex>:is(*, div) {
    margin: 0
}

body .is-layout-grid {
    display: grid
}

.wp-block-button__link {
    align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    text-align: center;
    word-break: break-word
}

.wp-block-button__link.aligncenter {
    text-align: center
}

.wp-block-gallery:not(.has-nested-images) {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0
}

.wp-block-gallery:not(.has-nested-images).alignleft,
.wp-block-gallery:not(.has-nested-images).alignright {
    max-width: 420px;
    width: 100%
}

figure.wp-block-gallery.has-nested-images {
    align-items: normal
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    margin: 0;
    width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/ 2)
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    max-width: 100%;
    position: relative
}

.wp-block-gallery.has-nested-images figure.wp-block-image>a,
.wp-block-gallery.has-nested-images figure.wp-block-image>div {
    flex-direction: column;
    flex-grow: 1;
    margin: 0
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    display: block;
    height: auto;
    max-width: 100% !important;
    width: auto
}

.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img {
    box-sizing: border-box
}

.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>a,
.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>div {
    flex: 1 1 auto
}

.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border:before {
    content: none
}

.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
    margin-bottom: auto;
    margin-top: 0
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
    align-self: inherit
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>a,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>div:not(.components-drop-zone) {
    display: flex
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    flex: 1 0 0%;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
    width: 100%
}

@media (min-width:600px) {
    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
        width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667)
    }

    .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
        width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75)
    }

    .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
        width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px)*.8)
    }

    .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
        width: calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333)
    }

    .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
        width: calc(14.28571% - var(--wp--style--unstable-gallery-gap, 16px)*.85714)
    }

    .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
        width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px)*.875)
    }

    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
        width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667)
    }

    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image) {
        width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5)
    }

    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child {
        width: 100%
    }
}

.wp-block-gallery.has-nested-images.aligncenter {
    justify-content: center
}

.wp-block-image>a,
.wp-block-image>figure>a {
    display: inline-block
}

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom
}

@media not (prefers-reduced-motion) {
    .wp-block-image img.hide {
        visibility: hidden
    }
}

.wp-block-media-text {
    box-sizing: border-box;
    /*!rtl:begin:ignore*/
    direction: ltr;
    /*!rtl:end:ignore*/
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto
}


.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__media {
    align-self: start
}


.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media,
.wp-block-media-text>.wp-block-media-text__media {
    align-self: center
}


.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__media {
    align-self: end
}

.wp-block-media-text>.wp-block-media-text__media {
    /*!rtl:begin:ignore*/
    grid-column: 1;
    grid-row: 1;
    /*!rtl:end:ignore*/
    margin: 0
}

.wp-block-media-text__media a {
    display: block
}

.wp-block-media-text__media img {
    height: auto;
    max-width: unset;
    vertical-align: middle;
    width: 100%
}

.wp-block-buttons {
    box-sizing: border-box
}

.wp-block-buttons.is-content-justification-center {
    justify-content: center
}

.wp-block-buttons.aligncenter {
    text-align: center
}


.wp-block-buttons[style*=text-decoration] .wp-block-button__link {
    text-decoration: inherit
}

/*
.wp-block-buttons .wp-block-button__link {
	width: 100%
}
*/

.wp-block-post-template {
    box-sizing: border-box;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    max-width: 100%;
    padding: 0
}

.wp-block-columns {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap !important
}

@media (min-width:782px) {
    .wp-block-columns {
        flex-wrap: nowrap !important
    }
}

.wp-block-columns {
    align-items: normal !important
}

@media (max-width:781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important
    }
}

@media (min-width:782px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 0;
        flex-grow: 1
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 0
    }
}

.wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: nowrap !important
}

.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column {
    flex-basis: 0;
    flex-grow: 1
}

.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*=flex-basis] {
    flex-grow: 0
}

:where(.wp-block-columns) {
    margin-bottom: 1.75em
}

:where(.wp-block-columns.has-background) {
    padding: 1.25em 2.375em
}

.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word
}

.wp-block-column.is-vertically-aligned-top {
    align-self: flex-start
}

.wp-block-column.is-vertically-aligned-center {
    align-self: center
}

.wp-block-column.is-vertically-aligned-bottom {
    align-self: flex-end
}

.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
    width: 100%
}

.wp-block-group {
    box-sizing: border-box
}

:where(.wp-block-group.wp-block-group-is-layout-constrained) {
    position: relative
}

.is-small-text {
    font-size: .875em
}

.is-large-text {
    font-size: 2.25em
}

:root :where(p.has-background) {
    padding: 1.25em 2.375em
}

:where(p.has-text-color:not(.has-link-color)) a {
    color: inherit
}

.wp-block-spacer {
    clear: both
}


/* Buttons (core) - used extensively */
.wp-block-buttons {
    box-sizing: border-box;
    display: flex;
    gap: .5em;
}

.wp-block-button__link {
    align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    word-break: break-word;
    border-radius: 9999px;
    box-shadow: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;
    color: #fff;
    background-color: #32373c;
    font-size: 1.125em;
}


.columns-4 {
    gap: 20px;
}

.has-small-font-size {
    font-size: 13px !important;
}

.has-medium-font-size {
    font-size: 20px !important;
}

.has-large-font-size {
    font-size: 36px !important;
}

.has-x-large-font-size {
    font-size: 42px !important;
}

/* 1. Der Container (Figure) */
.wp-block-gallery-1 .wp-block-image {
    display: flex !important;
    /* Macht den Container flexibel */
    flex-direction: column;
    /* Stapelt Inhalt vertikal (wichtig!) */
    height: auto !important;
    /* Nimmt die Höhe der Grid-Zeile an */
    align-self: stretch;
    /* Streckt sich auf die volle Höhe der Nachbarn */
}

/* 2. Das Picture-Tag (Die Brücke) */
.wp-block-gallery-1 .wp-block-image picture {
    display: flex !important;
    /* Wichtig: Muss auch flex sein */
    flex: 1 1 auto !important;
    /* Wächst, um den ganzen Platz zu füllen */
    width: 100% !important;
    height: 100% !important;
    /* Zwingt es auf die volle Höhe */
}

/* 3. Das Bild (Der Inhalt) */
.wp-block-gallery-1 .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    /* Füllt das Picture-Tag aus */

    /* Der magische Befehl gegen das Quetschen: */
    object-fit: cover !important;

    display: block !important;
    min-height: 0;
    /* Fix für Flexbox-Bugs in manchen Browsern */
}

/* -------------------------------------------------------------------------------- */
/*	9.	Footer
/* -------------------------------------------------------------------------------- */


/* CSS für Footer (site-footer- Präfix) */
/* Farb- und Typografievariablen */
:root {
    --site-footer-link: #3498db;
    --site-footer-link-hover: #5dade2;
    --site-footer-max-width: 1200px;
    --site-footer-gap: 2rem;
    --site-footer-padding-vertical: 2.5rem;
    --site-footer-padding-horizontal: 1.25rem;
}

/* assets/css/back-to-top.css */

/* Basis: unsichtbar, aber animierbar (do NOT transition visibility) */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
    /* switch instantly, don't transition */
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
    z-index: 1000;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00778a;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Sichtbar: opacity + transform animieren; visibility / pointer-events sofort setzen */
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    /* instant change; not animated */
}

/* Optional: Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .back-to-top,
    .back-to-top.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


.back-to-top:hover {
    filter: brightness(1.05);
}

.back-to-top:active {
    transform: translateY(1px);
}

/* Accessible focus styles */
.back-to-top:focus,
.back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Icon/text inside */

/* Sichtbar-für-Screenreader Utility */

/* Grundlayout */

/* Drei-Spalten-Layout auf Desktop */
.inner {
    max-width: var(--site-footer-max-width);
    margin: 0 auto;
    padding: 120px 20px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* Jede Spalte bekommt ca. ein Drittel */
.col-cont,
.col-sitemap,
.col-image {
    flex: 1;
    /* Alle Spalten gleich breit */
    display: flex;
    flex-direction: column;
}

/* Sitemap Styling (Spalte 2) */
.col-sitemap h3.sitemap {
    margin: 0 0 10px;
    height: 100px;
    /* Gleicht optisch die Höhe des Logos aus Spalte 1 aus */
}

/* --- FOOTER LEGAL MENU (Eine Zeile mit Punkt) --- */
ul.footer-legal {
    display: flex;
    /* Macht es einzeilig */
    flex-wrap: wrap;
    /* Erlaubt Umbruch auf sehr kleinen Handys */
    align-items: center;
    /* Vertikale Mitte */
    list-style: none;
    /* Keine Standard-Bullets */
    margin: 0;
    padding: 0;
}

ul.footer-legal li {
    display: flex;
    align-items: center;
}

ul.footer-legal li a {
    text-decoration: none;
    white-space: nowrap;
    /* Verhindert Textumbruch im Link selbst */
    color: inherit;
    /* Nimmt deine Footer-Textfarbe an */
}

/* Der Punkt (Separator) */
ul.footer-legal li::after {
    content: "•";
    /* Der Punkt */
    margin: 0 10px;
    /* Abstand links und rechts vom Punkt */
    opacity: 0.6;
    /* Etwas dezenter */
    color: inherit;
}

/* Den Punkt beim allerletzten Element ausblenden */
ul.footer-legal li:last-child::after {
    display: none;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links .sub-menu {
    margin: 10px 0 0 20px;
}

.footer-links li {
    margin-bottom: 12px;
}

/* Bild Styling (Spalte 3) */
.col-image {
    align-items: flex-end;
    /* Bild rechtsbündig in der Spalte */
}

.footer-extra-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* Optional: abgerundete Ecken */
}

.cookie {
    max-width: var(--site-footer-max-width);
    margin: 0 auto;
    padding-bottom: 24px;
}

.cookie p {
    text-align: center;
    margin-bottom: 12px;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .col-cont,
    .col-sitemap,
    .col-image {
        width: 100%;
        align-items: center;
        margin-bottom: 40px;
    }

    .col-image {
        order: -1;
        /* Bild auf Mobile ganz nach oben (optional) */
    }
}

/* -------------------------------------------------------------------------------- */
/*	9.9	WP CSS HOME
/* -------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/*	10.	Media Queries
/* -------------------------------------------------------------------------------- */


@media (max-width: 620px) {

    .first,
    .second,
    .third {
        margin: 0;
        top: 0;
        bottom: 0;
        left: 0;
    }

    #site-header__inner {
        padding: 1rem 2rem;
    }

    #primary-menu-mobile a {
        font-size: 1.8rem;
    }

    body .is-layout-grid {
        display: block !important;
    }

    span.sep {
        margin: 0 10px;
    }

    .inner {
        flex-direction: column;
        gap: 1rem;
    }

    .col-cont {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Links in Kontaktblock untereinander darstellen statt <br> hacks */
    .col-cont address p a,
    .col-cont address p a+a {
        display: block;
        margin-top: 0.5rem;
        word-break: break-word;
    }

    .col-cont {
        align-items: flex-start;
        text-align: left;
    }

}

@media (max-width: 500px) {

    .post:before {
        margin: 30px auto;
    }

}