/*
	Theme Name: Landkino
	Theme URI: http://html5blank.com
	Description: Landkino
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url('./fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('./fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: url('./fonts/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



:root {
    /*--farbe-gemeinde: #657829;
    --fabe-verein: #a61a3a;
    --fabe-landkino: #003882;
    --fabe-landkino2: #ffd800;*/
    font-family: 'Open Sans';
}

body {
    margin: 0;
}

.wrapper {
    width: 1600px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 70px rgba(0,0,0,.2);
    min-height: 1000px;
}

header {
    padding-top: 40px;
    margin-left: 100px;
}

footer {
    background: #afb0b2;
    padding: 40px;
    color: #fff;
    margin-top: 180px;
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    gap:140px;
}

footer a {
    color: #fff !important;
    text-decoration: none !important;
}

footer a:hover {
    text-decoration: underline !important;
}

/*################## NAVIGATION ##################*/

.navbar {
    margin-top: 40px;
    margin-bottom: 30px;
    position: relative;
    z-index: 9999;
    font-size: 14px;
}

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

.navbar ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.navbar ul li a {
    color: #000;
    text-decoration: none;
    padding: 15px 20px;
}

.navbar ul li a:hover {
    background-color: var(--farbe-elemente);
    color: #fff;
}

.navbar ul li ul {
    position: absolute;
}

.navbar ul li ul li {
    display: block;
}

.navbar ul li ul li a {
    white-space: nowrap;
    padding: 0;
    color: #fff;
    line-height: 32px;
}

.navbar summary {
    padding: 15px 20px;
}

.navbar summary:hover {
    background-color: var(--farbe-elemente);
    color: #fff;
}

.navbar details:open summary {
    background-color: var(--farbe-elemente);
    color: #fff;
}

.navbar summary::marker {
    content: "";
}

.navbar summary::-webkit-details-marker {
    display: none;
}

.navbar summary::after {
    content: "";  
    background: url(img/chevron.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 75%;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.navbar details[open] summary::after, .navbar details:hover summary::after {
    content: "";
    background: url(img/chevron-active.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 75%;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.navbar .dropdown-menu {
    margin-top: 3px;
    padding: 30px 50px;
    background: var(--farbe-elemente);
}

.navbar .dropdown-menu li:first-child {
    border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.current-menu-item summary, .current-menu-item a {
    background: var(--farbe-elemente);
    color: #fff !important;
}

.current-menu-item summary::after {
    background-image: url(img/chevron-active.png);
}

/*################## MAIN ##################*/

main {
    padding: 0 30px;
}

main p {
    line-height: 24px;
    font-size: 14px;
}

.wp-block-columns.has-background {
    left: -30px;
    position: relative;
    width: calc(100% + 60px);
    padding-top: 70px;
    padding-bottom: 70px;
}

.aktuelles .wp-block-columns.has-background {
    left: 0;
    position: relative;
    width: auto;
    padding: 0;
}

/*################## EFFEKTE ##################*/

.animated-cover-split {
    position: relative;
    overflow: hidden;
    background: #000;
}

.animated-cover-split::before,
.animated-cover-split::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 1px solid transparent;
    /*border-radius: 8px;*/
    pointer-events: none;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-cover-split::before {
    border-top: 1px solid rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
}

.animated-cover-split::after {
    border-left: 1px solid rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.85);
    transform: scaleY(0);
}

.animated-cover-split:hover::before {
    transform: scaleX(1);
}
.animated-cover-split:hover::after {
    transform: scaleY(1);
}

.animated-cover-split:hover .wp-block-cover__image-background,
.animated-cover-split:hover img {
    opacity: .5;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-cover-split .animated-text {
    /*display: none;*/
    height: 0px;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-cover-split:hover .animated-text {
    /*display: block;*/
    height: 40px;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animated-cover-split a {
    color: #fff;
    text-decoration: none;
}

.animated-cover-split .wp-block-cover__inner-container:has(.wp-block-paragraph):has(a) {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated-cover-split .wp-block-cover__inner-container:has(.wp-block-paragraph) a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*################## EFFEKTE ##################*/

/* Container für die Spalten */
.my-custom-latest-posts-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    background: var(--farbe-elemente);
    padding: 30px 40px;
    left: -30px;
    width: calc(100% + 60px);
    position: relative;
}

/* Einzelne Spalte / Karte */
.my-custom-post-column {
    flex: 1 1 calc(33.333% - 16px);
    display: flex;
    flex-direction: column;
    background: var(--farbe-elemente);
    /*border-radius: 12px;*/
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);*/
    overflow: hidden;
    /*border: 1px solid rgba(0, 0, 0, 0.06);*/
    box-sizing: border-box;
}

.my-custom-latest-posts-rows h2 {
    margin: 20px 20px 20px 20px;
    color: #fff;
}

.my-custom-post-row-images {
    display: flex;
    margin-bottom: 10px;
}

.my-custom-post-row {
    margin-left: 20px;
}

.my-custom-post-row p {
    margin-top: 0;
    margin-bottom: 28px;
}

.my-custom-post-row:last-child {
    margin-bottom: 0;
}

.my-custom-post-text {
    background: #ebebec;
    flex-grow: 1;
}

.my-custom-post-text a, .my-custom-post-text .my-custom-post-title a {
    color: #000;
}

/* Bild-Container */
.my-custom-post-thumbnail a {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #f0f0f0;
}

.my-custom-post-row-images .my-custom-post-thumbnail a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #f0f0f0;
    width: 200px;
}

.my-custom-post-row-images p {
    color: #000;
}

/* Beitragsbild */
.my-custom-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block;
}

/* Hover-Effekt fürs Bild */
.my-custom-post-column:hover .my-custom-post-thumbnail img {
    transform: scale(1.06);
}

/* Titel */
.my-custom-post-title {
    margin: 20px 20px 8px 20px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.my-custom-post-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.my-custom-post-title a:hover {
    color: #0066cc;
}

/* Auszug (Excerpt) & Weiterlesen */
.my-custom-post-excerpt {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.my-custom-post-excerpt p {
    margin: 0 0 16px 0;
    flex-grow: 1;
}

/* Weiterlesen-Link */
.my-custom-post-readmore {
    align-self: flex-start;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.my-custom-post-readmore::after {
    content: ' →';
    transition: transform 0.2s ease;
    display: inline-block;
}

.my-custom-post-readmore:hover {
    color: #004499;
}

.my-custom-post-readmore:hover::after {
    transform: translateX(4px);
}

/* Fallback bei fehlendem Beitragsbild */
.my-custom-post-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.9rem;
}

.my-custom-posts-pagination a {
    padding: 5px 10px;
    background: #f4f4f5;
    text-decoration: none;
    color: #555;
}

.my-custom-posts-pagination a:hover {
    background: var(--farbe-elemente);
    color: #fff;
}

.my-custom-posts-pagination .current {
    padding: 5px 10px;
    background: var(--farbe-elemente);
    color: #fff;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .my-custom-post-column {
        flex: 1 1 calc(50% - 12px);
    }
}
@media (max-width: 480px) {
    .my-custom-post-column {
        flex: 1 1 100%;
    }
}

/*################## FILME ##################*/

.aktuell h2 {
    background: #ffd800;
    color: #003882;
    text-align: center;
    padding: 10px;
    margin: 50px 0;
}

#filme-wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.film {
    max-width: 250px;
    background: #ebebec;
    display: inline-block;
    color: #000;
    text-decoration: none;
    flex: 0 0 calc(33.333% - 20px); 
}

.film a {
    text-align: center;
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #000;
}

.film a:hover {
    text-decoration: underline;
    color: #003882;
}

.film-datum p {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.film-poster {
    background: #ffd800;
    color: #003882;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 280px;
    text-align: center;
    gap: 20px;
}

.film-poster h1, .film-poster h2, .film-poster h3, .film-poster h4, .film-poster p {
    margin: 0;
}

.film-poster h3 {
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
}

.film a.pagelink {
    padding: 0;
}

.film a.pagelink:hover {
    text-decoration: none;
    opacity: .8;
}

.vorfilm-rand {
    margin-left: 40px;
    box-shadow: -40px 0 0 #003882;
}

.wp-block-column:has(> .vorfilm-rand) {
    position: relative;
}

.wp-block-column:has(> .vorfilm-rand)::before {
    content: "";
    width: 0px;
    height: 100%;
    display: block;
    position: absolute;
    border-left: 10px dashed white;
    border-right: 10px dashed white;
    left: 10px;
}

.aktuelles-programm .cb-button-next::after, .aktuelles-programm .cb-button-prev::after {
    font-size: 40px;
    font-weight: bold;
    color: #003882;
}

.aktuelles-programm .cb-button-next, .aktuelles-programm .cb-button-prev {
    position: absolute;
    top: 65px;
}

.aktuelles-programm .cb-button-prev {
    left: 140px;
}

.aktuelles-programm .cb-button-next {
    right: 140px;
}

/*################## AKTUELLES ##################*/

.aktuelles a {
    color: #000;
    text-decoration: none;
    transition: color .2s;
}

.aktuelles a:hover {
    color: #003882;
}



/*################## FORMULAR ##################*/

.wpcf7-form {
    background: #ffd800;
    padding: 40px;
}

.wpcf7-form h3 {
    color: #003882;
}

.wpcf7-form input {
    padding: 10px;
    border: 1px solid #003882;
}

.wpcf7-form select {
    margin-left: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #003882;
}

.wpcf7-form input[type=submit]:disabled {
    opacity: .5;
}

.wpcf7-form input[type=submit] {
    color: #fff;
    background: #003882;
}

/*################## Zeitstrahl ##################*/

/* 1. Haupt-Container des Zeitstrahls */
.my-timeline {
    position: relative;
    padding-left: 65px; /* Schafft links Platz für die Linie und die Kreise */
    margin: 2.5rem 0;
    box-sizing: border-box;
}

/* 2. Die vertikale rote Linie */
.my-timeline::before {
    content: '';
    position: absolute;
    left: 20px; /* Perfekt zentriert unter dem 40px breiten Kreis (40px / 2) */
    top: 22px;  /* Startet genau in der Mitte des ersten Kreises */
    bottom: 22px; /* Endet genau in der Mitte des letzten Kreises */
    width: 2px;
    background-color: #a81a39; /* Dunkelroter Farbton aus dem Screenshot */
    z-index: 1;
}

/* 3. Einzelner Eintrag im Zeitstrahl */
.timeline-entry {
    position: relative;
    margin-bottom: 2.5rem; /* Abstand nach unten zum nächsten Eintrag */
    box-sizing: border-box;
}

/* Verhindert überschüssigen Abstand beim letzten Element */
.timeline-entry:last-child {
    margin-bottom: 0;
}

/* 4. Roter Kreis-Marker mit weißem Stern */
.timeline-entry::before {
    content: '☆'; /* Weißer Outline-Stern (Unicode) */
    position: absolute;
    left: -65px; /* Positioniert den Kreis links im padding-Bereich */
    top: 0; /* Richtet die Oberkante am Text aus (passt perfekt zur H3-Überschrift) */
    width: 40px;
    height: 40px;
    background-color: #a81a39; /* Roter Hintergrund */
    color: #ffffff; /* Weißer Stern */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; /* Größe des Sterns */
    font-family: inherit;
    line-height: 1;
    z-index: 2;
    /* Der weiße Schatten sorgt dafür, dass die rote Linie hinter dem Kreis 
       optisch unterbrochen wird und nicht durchschimmert */
    /*box-shadow: 0 0 0 4px #ffffff;*/
    box-sizing: border-box;
    padding-bottom: 5px;
}

/* 5. Styling der Überschrift (Jahreszahl) */
.timeline-entry h3 {
    margin-top: 0 !important;
    margin-bottom: 0.35rem !important;
    color: #111111;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* 6. Styling des Beschreibungstextes */
.timeline-entry p {
    margin: 0 !important;
    color: #333333;
    font-size: 1rem;
    line-height: 1.5;
}

/*################## DIV ##################*/

.post-edit-link {
    padding: 10px 16px;
    margin: 15px 0 25px 0;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--farbe-elemente);
    text-decoration: none;
}

.post-edit-link:hover {
    text-decoration: underline;
}

.wp-element-caption a {
    text-decoration: none;
}

.wp-element-caption a:hover {
    text-decoration: underline;
}

/*################## BREADCRUMBS ##################*/

.custom-breadcrumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px 10px 0;
    margin: 15px 0 25px 0;
    font-size: 14px;
    color: #666;
}

.custom-breadcrumbs a {
    color: var(--farbe-elemente);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease-in-out;
}

.custom-breadcrumbs a:hover {
    color: #003882;
    text-decoration: underline;
}

.custom-breadcrumbs .breadcrumb-separator {
    margin: 0 10px;
    color: #bbb;
    font-size: 12px;
    user-select: none;
}

.custom-breadcrumbs .breadcrumb-current {
    color: #333;
    font-weight: 600;
}

/*################## MOBIL ##################*/

@media (max-width: 1600px) {
    .wrapper {
        width: 100%;
    }
}

.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the horizontal menu by default */
    .navbar > ul {
        display: none;
    }

    .navbar summary::after {
        background-image: url(img/chevron-active.png);
    }

    .navbar .dropdown-menu li:first-child {
        border: 0;
        padding: 0;
        margin: 0;
    }

    .current-menu-item a {
        background: none;
    }

    [aria-current]:not([aria-current="false"]) {
        background: var(--farbe-elemente);
    }

    .navbar ul li ul li a {
        font-size: 1.1rem !important;
    }

    /* Screen reader helper class for accessibility */
    .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /* Position the mobile menu button */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 0px;
        left: -20px;
        z-index: 10000;
    }

    /* Hamburger icon container */
    .hamburger-box {
        display: inline-block;
        width: 24px;
        height: 18px;
        position: relative;
    }

    /* Three-line hamburger icon structure */
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        width: 24px;
        height: 2px;
        background-color: #000; /* Matches your header logo text color */
        position: absolute;
        transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .hamburger-inner {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-inner::before,
    .hamburger-inner::after {
        content: "";
        display: block;
    }

    .hamburger-inner::before { top: -8px; }
    .hamburger-inner::after { bottom: -8px; }

    /* Animate to 'X' shape when active */
    .navbar.is-open .hamburger-inner {
        background-color: transparent;
    }
    .navbar.is-open .hamburger-inner::before {
        transform: translateY(8px) rotate(45deg);
        background-color: #fff; /* Turns white over the dark overlay */
    }
    .navbar.is-open .hamburger-inner::after {
        transform: translateY(-8px) rotate(-45deg);
        background-color: #fff;
    }

    /* Full-Screen Frosted Glass Menu Overlay */
    .navbar.is-open > ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(17, 17, 17, 0.98); /* Deep dark theme background */
        backdrop-filter: blur(10px);
        z-index: 9999;
        gap: 2rem;
        padding: 2rem;
    }

    /* Standardise mobile link typography */
    .navbar.is-open ul li {
        display: block;
        width: 100%;
        text-align: center;
    }

    .navbar.is-open ul li a,
    .navbar.is-open summary {
        font-size: 1.5rem;
        color: #fff !important;
        padding: 10px;
        display: block;
    }

    /* Style the native HTML5 details dropdown menus for mobile */
    .navbar.is-open ul li ul {
        position: static;
        background: transparent;
        padding: 10px 0;
    }

    .navbar.is-open ul li ul li a {
        font-size: 1.2rem;
        line-height: 2rem;
        opacity: 0.85;
    }

    /* Reset dropdown container margins/paddings on mobile */
    .navbar.is-open .dropdown-menu {
        padding: 10px 0;
        margin-top: 5px;
    }

    header {
        margin-left: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .navbar {
        margin-top: 0;
        padding: 10px 0;
    }

    footer {
        flex-wrap: wrap;
        justify-content: left;
        gap: 30px;
        margin-top: 0;
    }

    .wp-block-cover {
        min-height: auto !important;
        aspect-ratio: 16/9 !important;
    }

    .aktuelles-programm .cb-button-next {
        right: 20px;
    }

    .aktuelles-programm .cb-button-prev {
        left: 20px;
    }

    #filme-wrap {
        flex-shrink: 0 !important;
    }

    .film {
        min-width: 250px;
        flex-shrink: 0 !important;
    }

    .has-large-font-size {
        line-height: normal;
    }

    .logo-full img {
        height: 50px;
        position: absolute;
        right: 30px;
    }

    .wp-block-cover__inner-container .has-large-font-size {
        font-size: 20px !important;
    }

    .wpcf7-form {
        padding: 10px;
    }

    .wpcf7-form input {
        max-width: 90%;
    }
}