/*
*   CUSTOM WORDPRESS THEME FOR RUPPENDORF
*
*   BY: Juliane Träger
*
*/

/* ================================================================== */
/* TABLE OF CONTENTS */
/* ================================================================== */

/*
*  1.  Imports
*  2.  Global Settings
*  3.  Base Styles
*  4.  Typography
*  5.  Buttons
*  6.  Layout
*  7.  Header
*      7.1  Top-Bar
*      7.2  Hero Section
*      7.3  Main Navigation
*      7.4  Social Links
*      7.5  Page Orientation
*  8.  Pre-Loader
*  9.  Site-Tools
*      9.1  Chatbot
*      9.2  Back-To-Top Button
*  10. Main Content
*      10.1  Intro Section
*      10.2  USP Section
*      10.3  Spotlight Section
*      10.4  News & Events Section
*      10.5  Highlight Section
*      10.6  Association Section
*      10.7  Gallery Section
*      10.8  Newsletter Section
*      10.9  WIP Section
*      10.10 Error-404 Section
*  11. Archives
*      11.1  News Archive
*      11.2  Gallery Archive
*      11.3  Associations Archive
*      11.4  Events Archive
*  12. Single Pages
*      12.1  Single Post (News)
*      12.2  Single Event
*  13. Custom Block Patterns
*  14. Sidebars
*  15. Comments
*  16. Forms
*  17. Counter
*  18. Slider
*  19. Footer
*  20. Overlays & Visual Effects
*/


/* ================================================================== */
/* GLOBAL SETTINGS */
/* ================================================================== */

:root {

    /* Ruppendorf Color Scheme */
    --ruppendorf_dark-green: #2D5D40;
    --ruppendorf_light-green: #7FA88A;
    --ruppendorf_light_light-green: #edefe7;
    --ruppendorf_dark-blue: #333D42;
    --ruppendorf_gold: #C29B40;
    --ruppendorf_dark-gold: #80662A;
    --ruppendorf_light-gray: #C3CBCF;
    --ruppendorf_medium-gray: #808080;
    --ruppendorf_eggshell-white: #F9F7F1;

    /* Status Indicators */
    --status_green: #4ed17a;
    --status_red: #d61629;

    /* Box-Shadow */
    --box-shadow_01: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);

    /* Drop-Shadow */
    --drop-shadow_01: 0px 0px 5px rgba(0, 0, 0, 0.25);
    --drop-shadow_02: 0px 0px 3px rgba(0, 0, 0, 0.3);

    /* Text Shadow */
    --text-shadow_01: 0px 0px 5px rgba(0, 0, 0, 0.3);
    --text-shadow_02: 0px 0px 8px rgba(0, 0, 0, 1);

    /* Layout */
    --horizontal-padding: 20px;

    --vertical-padding_small: 40px;
    --vertical-padding_medium: 60px;
    --vertical-padding_large: 100px;

    --vertical-margin_small: 50px;
    --vertical-margin_medium: 100px;
    --vertical-margin_large: 150px;

    --max-width_main: 1920px;
    --max-width_header: 1920px;

    /* Typography */
    --font-scale: 1;

    /* Decorations */
    --border-bottom_width: 4px;
    --border_width: 1px;

    /* Font-Weight */
    --fw_regular: 400;
    --fw_medium: 500;
    --fw_semi-bold: 600;
    --fw_black: 900;

    /* Default Image */
    --default-img: url(../mediafiles/default-image.webp);

    /* Global Typography Settings */
    font-family: "Roboto", sans-serif;
    font-size: calc(16px * var(--font-scale));
    font-variation-settings: "wdth" 100;
    font-weight: var(--fw_regular);
    color: var(--ruppendorf_dark-blue);

    /* Cursor Default */
    cursor: default;

}

/* High Contrast Mode */
:root[data-contrast="high"] {
    /* Color Scheme High Contrast */
    --ruppendorf_eggshell-white: #ffffff;
    --ruppendorf_dark-blue: #111112;
    --ruppendorf_dark-green: #0f3d28;
    --ruppendorf_light-green: #1f6b47;
    --ruppendorf_light_light-green: #dbeee3;
    --ruppendorf_gold: #ba8f2b;
    --ruppendorf_dark-gold: #5c4714;
    --ruppendorf_light-gray: #4a4a4a;
    --ruppendorf_medium-gray: #2a2a2a;
}

/* Tablet */
@media (min-width: 768px) {
    :root {
        --horizontal-padding: 80px;
        --vertical-padding_medium: 80px;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    :root {
        --horizontal-padding: 228px;
        --vertical-padding_medium: 100px;
    }
}


/* ================================================================== */
/* BASE STYLES */
/* ================================================================== */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overscroll-behavior: none;
}

html {
    background-color: var(--ruppendorf_eggshell-white);
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE / Edge */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

img {
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* ================================================================== */
/* TYPOGRAPHY */
/* ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--fw_black);
    margin: 0;
    margin-bottom: 1em;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-chars: 6 3 3;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* hyphenate-limit-chars:
1. Zahl: Mindestlänge eines Wortes, das getrennt werden darf, 
2. Zahl: Mindestlänge des ersten Teils eines getrennten Wortes, 
3. Zahl: Mindestlänge des zweiten Teils eines getrennten Wortes */

h1,
h2,
h3,
h4 {
    text-transform: uppercase;
}

h2,
h3,
h4 {
    color: var(--ruppendorf_dark-green);
}

h5,
h6 {
    color: var(--ruppendorf_dark-blue);
}

.hero h1 {
    margin: 0;
    color: var(--ruppendorf_eggshell-white);
    font-size: clamp(3rem, 10vw, 6rem);
    text-align: center;
    text-shadow: var(--text-shadow_02);
}

h1.website-title {
    font-size: clamp(3rem, 10vw, 7rem);
}

main h1 {
    color: var(--ruppendorf_dark-green);
    font-size: clamp(3rem, 10vw, 4rem);
}

.error-404 h1 {
    font-size: clamp(6rem, 20vw, 12rem);
    margin-bottom: 0.3em;
}

h2 {
    font-size: clamp(2rem, 5vw, 2.75rem);
}

.pre-headline {
    --color: var(--ruppendorf_dark-blue);
    display: block;
    font-size: max(1rem, 0.3em);
    font-weight: var(--fw_regular);
    color: var(--color);
    padding: 0.2em 0;
    border-bottom: var(--border_width) solid var(--color);
    margin-bottom: 0.3em;
}

.pre-headline a {
    color: var(--color);
    text-decoration: none;
}

.pre-headline.white {
    --color: var(--ruppendorf_eggshell-white);
}

h3 {
    font-size: clamp(1.3rem, 4vw, 1.5rem);
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: clamp(.75rem, 5vw, 1rem);
}

h6 {
    font-size: clamp(.5rem, 5vw, .75rem);
}

a {
    color: var(--ruppendorf_gold);
}

a:hover {
    color: var(--ruppendorf_dark-gold);
}

li a {
    color: var(--ruppendorf_dark-blue);
}

li a:hover {
    color: var(--ruppendorf_gold);
}

p {
    line-height: 1.6;
    font-weight: var(--fw_regular);
    margin: 0;
    margin-bottom: 2rem;
}

.no-content {
    font-size: .75rem;
    text-align: center;
    font-style: italic;
    color: var(--ruppendorf_medium-gray);
    padding: var(--vertical-margin_small) 0;
    margin: 0;
}

p:has(+h1),
p:has(+h2),
p:has(+h3),
p:has(+h4),
p:has(+h5),
p:has(+h6) {
    margin-bottom: 4rem;
}

/* Lists */

li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}


/* ================================================================== */
/* BUTTONS */
/* ================================================================== */

.button {
    display: block;
    width: fit-content;
    height: fit-content;
    margin-top: 40px;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--fw_medium);
    border: var(--border_width) solid;
}

/* Hotlink Button */
.button.hotlink {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--ruppendorf_eggshell-white);
    border-color: var(--ruppendorf_eggshell-white);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.button.hotlink:hover {
    background-color: var(--ruppendorf_eggshell-white);
    color: var(--ruppendorf_dark-green);
    border-color: var(--ruppendorf_eggshell-white);
}

/* Basic Button */
.button.link {
    color: var(--ruppendorf_dark-blue);
    border: none;
    padding: 10px 0;
}

.button.link:hover {
    color: var(--ruppendorf_gold);
}

/* Primary Button */
.button.primary {
    background-color: var(--ruppendorf_gold);
    color: var(--ruppendorf_eggshell-white);
    border-color: var(--ruppendorf_gold);
}

.button.primary:hover {
    background-color: var(--ruppendorf_dark-gold);
    color: var(--ruppendorf_eggshell-white);
    border-color: var(--ruppendorf_dark-gold);
}

/* Secondary Button */
.button.secondary {
    color: var(--ruppendorf_dark-blue);
    border-color: var(--ruppendorf_dark-blue);
}

.button.secondary:hover {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

/* Secondary Button Negative */
.button.secondary-negative {
    color: var(--ruppendorf_eggshell-white);
    border-color: var(--ruppendorf_eggshell-white);
}

.button.secondary-negative:hover {
    background-color: var(--ruppendorf_eggshell-white);
    color: var(--ruppendorf_dark-blue);
}


/* ================================================================== */
/* LAYOUT */
/* ================================================================== */

/* Flex */
.row {
    display: flex;
    flex-wrap: wrap;
}

.row.col_2 {
    gap: 20px;
    row-gap: var(--vertical-padding_medium);
}

.row.col_2>* {
    flex: 1 1 0;
    min-width: min(450px, 100%);
}

.column {
    display: flex;
    flex-direction: column;
}

/* Justify */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align */
.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

/* Content Wrapper */
.wrapper {
    max-width: var(--max-width_main);
    margin: 0 auto;
    padding: 0 var(--horizontal-padding);
    width: 100%;
}

.has-padding_small {
    padding: var(--vertical-padding_small) var(--horizontal-padding);
}

.has-padding_medium {
    padding: var(--vertical-padding_medium) var(--horizontal-padding);
}

.has-padding_large {
    padding: var(--vertical-padding_large) var(--horizontal-padding);
}

.has-margin_small {
    margin: var(--vertical-margin_small) auto;
}

.has-margin_medium {
    margin: var(--vertical-margin_medium) auto;
}

.has-margin_large {
    margin: var(--vertical-margin_large) auto;
}


/* ================================================================== */
/* HEADER */
/* ================================================================== */

#masthead {
    box-shadow: var(--drop-shadow_01);
    position: -webkit-sticky;
    position: sticky;
    top: calc((var(--hero-height) - var(--top-bar-height)) * -1);
    z-index: 9998;
}

/* --- Top-Bar --- */

#site-top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background-color: var(--ruppendorf_dark-green);
}

#site-top-bar .container {
    row-gap: 5px;
    max-width: var(--max-width_header);
    margin: 0 auto;
    padding: 5px var(--horizontal-padding);
    color: var(--ruppendorf_eggshell-white);
}

/* Desktop */
@media (min-width: 1400px) {
    #site-top-bar .container {
        padding: 5px 80px;
    }
}

#site-top-bar * {
    font-size: 14px;
    line-height: 14px;
}

/* Location Info */
.location-info {
    display: none;
}

@media (min-width: 880px) {
    .location-info {
        display: block;
    }
}

/* Weather Info */
.weather-info {
    display: none;
    gap: 5px;
}

@media (min-width: 400px) {
    .weather-info {
        display: flex;
    }
}

#weather-icon img {
    width: 20px;
    height: 20px;
}


/* Page Settings: Font-Size, Contrast, Language */
.page-settings {
    gap: 10px;
}

.page-settings button {
    padding: 10px;
    height: 35px;
    font-size: 14px;
    line-height: 14px;
    color: var(--ruppendorf_eggshell-white);
}

/* Font-Size Controls */

#site-top-bar .font-controls button {
    width: 35px;
    font-weight: var(--fw_black);
    font-size: 16px;
    filter: brightness(0) invert(1);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

#site-top-bar .font-controls button[data-action="reset"] {
    background-image: url(../mediafiles/icons/icon_font-size_reset.svg);
}

#site-top-bar .font-controls button[data-action="increase"] {
    background-image: url(../mediafiles/icons/icon_font-size_increase.svg);
}

#site-top-bar .font-controls button[data-action="decrease"] {
    background-image: url(../mediafiles/icons/icon_font-size_decrease.svg);
}

#site-top-bar .font-controls button:disabled {
    opacity: 0.3;
}

/* Contrast Toggle */
#contrast-toggle {
    padding-left: 30px;
    position: relative;
    filter: brightness(0) invert(1);
}

#contrast-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    width: 20px;
    aspect-ratio: 1/1;
    background: url(../mediafiles/icons/circle-half-stroke-solid-full.svg);
    transform: translateY(-50%);
}

#contrast-toggle[aria-pressed="true"] {
    background-color: var(--ruppendorf_eggshell-white);
    color: var(--ruppendorf_dark-blue);
    filter: none;
}

/* Language Switcher */
.language-switcher {
    position: relative;
}

.language-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px;
    z-index: 9999;
    background: var(--ruppendorf_eggshell-white);
    box-shadow: var(--box-shadow_01);
    flex-direction: column;
    gap: 20px;
}

.language-switcher img {
    filter: drop-shadow(var(--drop-shadow_02));
    aspect-ratio: 7/5;
    height: 20px;
}

.language-switcher:hover .language-list {
    display: flex;
    width: max-content;
}

.language-switcher .current-language {
    padding: 0;
}

/* --- Hero Section --- */

section.hero {
    position: relative;
    min-height: 50vh;
    background-image: var(--default-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.hero.simple {
    min-height: 40vh;
}

section.hero .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

section.hero>.container {
    width: 100%;
    padding: 180px var(--horizontal-padding);
    z-index: 1;
}

section.hero h1 {
    max-width: fit-content;
}

section.hero .hotlinks-container {
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

section.hero .hotlinks-container>* {
    margin: 0;
}

/* --- Main Navigation --- */

#site-navigation {
    position: relative;
    z-index: 999;
    background-color: var(--ruppendorf_eggshell-white);
}

#site-navigation .nav-bar {
    max-width: var(--max-width_header);
    padding: 15px var(--horizontal-padding);
    margin: 0 auto;
}

/* Desktop */
@media (min-width: 1400px) {

    #site-navigation .nav-bar {
        padding: 15px 80px;
    }

}

/* Logo */
#site-navigation .logo img {
    width: 150px;
}

.menu-haupt-navigation-container {
    padding: 20px 0;
}

/* Menu Toggle */
#site-navigation .menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* Desktop */
@media (min-width: 1400px) {

    /* Hide Menu Toggle */
    #site-navigation .menu-toggle {
        display: none;
    }

}

#site-navigation .menu-toggle .line {
    height: 4px;
    width: 100%;
    background-color: var(--ruppendorf_dark-blue);
    transition: transform 0.4s ease, opacity 0.25s ease;
}

/* Toggle Active */
#site-navigation.toggled .line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

#site-navigation.toggled .line:nth-child(2) {
    opacity: 0;
}

#site-navigation.toggled .line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Menu Collapsed */
#site-navigation .navigation-container {
    width: 100%;
    max-height: 0;
    transition: max-height 0.5s ease-in-out 0s;
    overflow: hidden;
}

/* Desktop */
@media (min-width: 1400px) {

    /* Show Navigation */
    #site-navigation .navigation-container {
        max-height: max-content;
        width: auto;
        overflow: visible;
    }

}

/* Menu Expanded - Mobile Vollbild */
@media (max-width: 1399px) {
    #site-navigation.toggled {
        position: fixed;
        top: var(--top-bar-height);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        z-index: 9999;
    }

    #site-navigation.toggled .navigation-container {
        max-height: none;
    }
}

@keyframes mobileMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Menu Items */
.menu-item {
    display: block;
}

.menu-item a {
    display: block;
    padding: 20px 10px;
    font-size: 1rem;
    line-height: 1;
}

/* Desktop */
@media screen and (min-width: 1400px) {

    .menu-item a {
        padding: 10px;
        font-size: 12px;
    }

}

/* Main-Nav Menu Items */

/* General */
#main-nav .menu-item a {
    color: var(--ruppendorf_dark-blue);
    border-bottom: var(--border_width) solid var(--ruppendorf_light-gray);
}

/* Level 1 */
#main-nav>.menu-item>a {
    font-weight: var(--fw_medium);
    text-transform: uppercase;
}

/* Level 2 */
#main-nav .sub-menu {
    --submenu-padding: clamp(20px, 10%, 40px);
    --submenu-font-weight: var(--fw_regular);
}

/* Level 3 */
#main-nav .sub-menu .sub-menu {
    --submenu-padding: clamp(30px, 15%, 80px);
    --submenu-font-weight: var(--fw_regular);
}

/* Level 4 */
#main-nav .sub-menu .sub-menu .sub-menu {
    --submenu-padding: clamp(40px, 25%, 120px);
    --submenu-font-weight: var(--fw_regular);
}

/* Level 5 */
#main-nav .sub-menu .sub-menu .sub-menu .sub-menu {
    --submenu-padding: clamp(50px, 35%, 160px);
    --submenu-font-weight: var(--fw_regular);
}

/* Apply Padding for Submenu Items */
#main-nav .sub-menu>.menu-item>a {
    padding-left: var(--submenu-padding);
    font-weight: var(--submenu-font-weight);
}

#main-nav .sub-menu>.menu-item>a::before {
    content: '\21B3\00A0';

}

/* Menu Items with Submenu */
.menu-item-has-children>a {
    position: relative;
}

.menu-item-has-children>a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    height: 20px;
    width: 20px;
    background: url(../mediafiles/icons/chevron-down-solid-full.svg);
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease 0s;
}

/* Submenu Collapsed */
.menu-item-has-children>.sub-menu {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s ease 0s;
}

/* Submenu Expanded */
.menu-item-has-children.focus>ul {
    max-height: 9999px;
}

.menu-item-has-children.focus>a::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Current Page */

/* General */
#main-nav .current-menu-item>a,
#main-nav .current-menu-ancestor>a {
    font-weight: var(--fw_black) !important;
    color: var(--ruppendorf_dark-green);
}

/* Level 1 */
#main-nav>.current-menu-item>a,
#main-nav>.current-menu-ancestor>a {
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
}

/* Level 2 - n */
#main-nav .sub-menu .current-menu-item>a {
    background-color: var(--ruppendorf_light_light-green);
}

/* Highlight Page */
#main-nav .is-highlight>a {
    background-color: var(--ruppendorf_gold);
    color: var(--ruppendorf_eggshell-white);
    border: none !important;
}

#main-nav .is-highlight>a::after {
    filter: brightness(0) invert(1);
}

#main-nav .is-highlight:hover>a,
#main-nav .is-highlight.current-menu-item>a,
#main-nav .is-highlight.current-menu-ancestor>a {
    background-color: var(--ruppendorf_dark-gold);
    color: var(--ruppendorf_eggshell-white);
}

/* Desktop */
@media (min-width: 1400px) {

    #site-navigation .menu-haupt-navigation-container {
        padding: 0;
    }

    #main-nav {
        display: flex;
        flex-direction: row;
        gap: 5px;
    }

    /* Menu Item Level 1 */
    #main-nav>.menu-item>a {
        border-bottom: 4px solid transparent;
    }

    /* Menu Items with Sub-items */
    #main-nav .menu-item-has-children>a {
        padding-right: 30px;
    }

    #main-nav .menu-item-has-children>a::after {
        transform: translate(-50% -50%);
        height: 15px;
        width: 15px;
    }

    #main-nav .menu-item-has-children:hover>a::after,
    #main-nav .menu-item-has-children.focus>a::after {
        transform: translate(-50%, -50%) rotate(180deg);
    }

    /* Submenus */
    #main-nav .menu-item-has-children>.sub-menu {
        max-height: 9999px;
        display: none;
        transition: none;
    }

    /* Hover */
    #main-nav .menu-item-has-children:hover>.sub-menu {
        display: block;
    }

    /* Submenu Level 1 */
    #main-nav>.menu-item-has-children>.sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        min-width: 100%;
        background-color: var(--ruppendorf_eggshell-white);
        box-shadow: var(--box-shadow_01);
    }

    /* Current Page and Current Ancestor Level 1 */
    #main-nav>.current-menu-item>a,
    #main-nav>.current-menu-ancestor>a {
        border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    }

    /* Level 2 - n  Hover */
    #main-nav .sub-menu .menu-item>a:hover {
        background-color: var(--ruppendorf_light_light-green);
    }

}

/* --- Page Orientation --- */

#site-orientation {
    background-color: var(--ruppendorf_eggshell-white);
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
    position: relative;
}

#site-orientation .container {
    padding: 10px var(--horizontal-padding);
    max-width: var(--max-width_header);
    row-gap: 15px;
    column-gap: 20px;
    margin: 0 auto;
}

/* Desktop */
@media (min-width: 1400px) {
    #site-orientation .container {
        padding: 10px 80px;
    }
}

.breadcrumb-navigation {
    margin-left: auto;
}

#site-orientation .breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    padding: 0;
    margin-left: auto;
}

#site-orientation a {
    color: var(--ruppendorf_dark-blue);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
}

#site-orientation .breadcrumbs-list li {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

#site-orientation a:hover {
    color: var(--ruppendorf_gold);
    text-decoration: underline;
}

#site-orientation .current-page a {
    color: var(--ruppendorf_gold);
}

#site-orientation .ancestor:has(~ li)::after {
    content: '>';
    font-size: 12px;
    line-height: 1;
    padding: 0 5px;
}


/* ================================================================== */
/* PRE-LOADER */
/* ================================================================== */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background-color: var(--ruppendorf_eggshell-white);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.preloader-heart {
    width: 100px;
    height: 100px;
    animation: heartbeat 1.2s ease-in-out infinite;
}

.preloader-heart img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(45, 93, 64, 0.3));
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.2);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(1);
    }
}


/* ================================================================== */
/* SITE-TOOLS */
/* ================================================================== */

.site-tools {
    position: fixed;
    bottom: 50px;
    left: 50%;
    z-index: 9997;
    width: 100%;
    max-width: var(--max-width_header);
    padding: 0 var(--horizontal-padding);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Desktop */
@media (min-width: 1400px) {
    .site-tools {
        padding: 0 80px;
    }
}

/* --- Chatbot --- */

#ruppendorf-chatbot {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    font-family: inherit;
    color: var(--ruppendorf_dark-blue);
    filter: drop-shadow(var(--drop-shadow_02));
    pointer-events: all;
}

#ruppendorf-chatbot[data-state="offline"] .chatbot-toggle-icon,
#ruppendorf-chatbot[data-state="offline"] #chatbot-send {
    background: var(--ruppendorf_medium-gray);
}

#ruppendorf-chatbot[data-state="offline"] .chatbot-status {
    background: var(--ruppendorf_medium-gray);
    animation: none;
    box-shadow: none;
}

.chatbot-toggle {
    width: 80px;
    aspect-ratio: 1/1;
    border: 4px solid var(--ruppendorf_eggshell-white);
    background: radial-gradient(circle at 30% 30%, #4bb37a, var(--ruppendorf_dark-green));
    color: var(--ruppendorf_eggshell-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.32);
    transition: transform .18s ease, box-shadow .18s ease;
}

.chatbot-toggle:focus-visible {
    outline: var(--border_width) solid var(--ruppendorf_gold);
}

.chatbot-toggle-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
}

.chatbot-avatar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.chatbot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chatbot-avatar-fallback {
    display: none;
}

.chatbot-avatar-fallback.is-visible {
    display: block;
}

.chatbot-status {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--status_green);
    border: 2px solid var(--ruppendorf_eggshell-white);
    bottom: 6px;
    right: 6px;
    animation: pulse 2.4s infinite;
}

.chatbot-toggle-text {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 15px;
    background: var(--ruppendorf_eggshell-white);
    color: var(--ruppendorf_dark-blue);
    font-weight: var(--fw_medium);
    white-space: nowrap;
    transform: translateY(calc(-100% - 20px));
}

.chatbot-toggle-text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    height: 20px;
    aspect-ratio: 1/1;
    background-color: var(--ruppendorf_eggshell-white);
    transform: translateY(90%);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.chatbot-toggle:not([aria-expanded="true"]):hover .chatbot-toggle-text {
    display: inline-flex;
}

/* Chatbot Panel */
.chatbot-panel {
    display: none;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: -20px;
    left: 0;
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
    width: min(90vw, 400px);
    padding: 20px;
    background: var(--ruppendorf_eggshell-white);
    box-shadow: var(--box-shadow_01);
    transform: translateY(-100%);
}

#ruppendorf-chatbot[data-open="true"] .chatbot-panel {
    display: flex;
}

.chatbot-panel::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    height: 20px;
    aspect-ratio: 1/1;
    background: inherit;
    transform: translateY(90%);
    clip-path: polygon(0 100%, 100% 0, 0 0);
}

.chatbot-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 10px;
    border-bottom: var(--border_width) solid var(--ruppendorf_light-gray);
}

.chatbot-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--fw_black);
    color: var(--ruppendorf_dark-green);
    text-transform: uppercase;
}

.chatbot-presence {
    margin: 0;
    font-size: .75rem;
    color: var(--ruppendorf_medium-gray);
}

.chatbot-close {
    width: 35px;
    height: 35px;
    color: var(--ruppendorf_dark-blue);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.chatbot-intro {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.chatbot-status-banner {
    display: none;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 186, 58, 0.2);
    color: var(--ruppendorf_dark-gold);
}

.chatbot-status-banner.is-visible {
    display: block;
}

.chatbot-messages {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 100px;
    padding: 20px 0;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Tablet */
@media (min-width: 768px) {
    .chatbot-messages {
        flex: unset;
    }
}

.chatbot-messages::-webkit-scrollbar {
    width: 5px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.chatbot-message {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chatbot-message .message-content {
    padding: 10px;
    max-width: 92%;
    font-size: 1rem;
    line-height: 1.6;
}

.chatbot-message .message-content p {
    margin: 0;
}

.bot-message .message-content {
    background: var(--ruppendorf_light_light-green);
}

.user-message {
    align-items: flex-end;
}

.user-message .message-content {
    background: var(--ruppendorf_dark-green);
    color: var(--ruppendorf_eggshell-white);
}

.message-time {
    font-size: 0.75rem;
    color: var(--ruppendorf_medium-gray);
}

.chatbot-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.quick-action {
    border: var(--border_width) solid var(--ruppendorf_dark-green);
    padding: 5px 10px;
    font-size: 0.82rem;
    background: transparent;
    color: var(--ruppendorf_dark-blue);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.quick-action:hover {
    background: var(--ruppendorf_dark-green);
    color: var(--ruppendorf_eggshell-white);
}

#chatbot-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-container {
    display: flex;
    align-items: center;
    flex: 1;
    border: var(--border_width) solid var(--ruppendorf_gold);
}

#chatbot-message-input {
    flex: 1;
    border: none;
    font-size: 1rem;
}

#chatbot-message-input:focus {
    outline: 2px solid var(--ruppendorf_gold);
    outline-offset: 2px;
}

#chatbot-send {
    height: 40px;
    aspect-ratio: 1/1;
    border: none;
    background: var(--ruppendorf_gold);
    color: var(--ruppendorf_eggshell-white);
    display: grid;
    place-items: center;
    cursor: pointer;
}

#chatbot-send:hover {
    background: var(--ruppendorf_dark-gold);
}

.chatbot-typing-indicator {
    display: none;
    gap: 4px;
    align-items: center;
    margin-bottom: 6px;
}

.chatbot-typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ruppendorf_dark-green);
    animation: bounce 1s infinite;
}

.chatbot-typing-indicator span:nth-child(2) {
    animation-delay: .15s;
}

.chatbot-typing-indicator span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(78, 209, 122, .6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(78, 209, 122, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(78, 209, 122, 0);
    }
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: .6;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes chatbot-pop {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Back-To-Top Button --- */

#back-to-top {
    width: 50px;
    height: 50px;
    border: none;
    margin-left: auto;
    background: var(--ruppendorf_gold);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    box-shadow: var(--box-shadow_01);
}

#back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#back-to-top:hover {
    background: var(--ruppendorf_dark-gold);
}

#back-to-top img {
    filter: brightness(0) invert(1);
}


/* ================================================================== */
/* MAIN CONTENT */
/* ================================================================== */

/* --- Intro Section --- */

section.intro {
    position: relative;
    background-image: var(--default-img);
    /* Default Image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

section.intro>.wrapper {
    align-items: center;
}

section.intro .wrapper .container {
    z-index: 1;
}

section.intro .text-box {
    background-color: var(--ruppendorf_eggshell-white);
    padding: 20px;
    padding-bottom: 40px;
    box-shadow: var(--box-shadow_01);
}

/* Tablet */
@media (min-width: 768px) {
    section.intro .text-box {
        padding: 40px;
        padding-bottom: 80px;
    }
}

/* Slogan Box */
.image-slogan-box {
    gap: 60px;
    padding: 40px;
    filter: drop-shadow(var(--drop-shadow_02));
    color: var(--ruppendorf_eggshell-white);
}

.image-slogan-box>* {
    flex: 1 1 0;
}

.image-slogan-box .image {
    display: grid;
    place-items: center;
}

.image-slogan-box .image img {
    max-width: 400px;
}

.slogan {
    position: relative;
    min-height: 210px;
    overflow: hidden;
}

.slogan-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 28px);
    text-align: center;
    font-family: "Reenie Beanie", cursive;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
}

.slogan .slider-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 20px;
}

.slogan .slider-dot {
    border-color: var(--ruppendorf_eggshell-white);
    cursor: default;
}

.slogan .slider-dot.active {
    background: var(--ruppendorf_eggshell-white);
}

/* --- USP Section --- */

section.usp {
    background-color: var(--ruppendorf_light-green);
}

/* Tablet */
@media (min-width: 768px) {
    .counter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        justify-content: space-around;
        gap: 20px;
    }
}

/* --- Spotlight Section --- */

.spotlight-accordion {
    display: flex;
    flex-direction: column;
}

.spotlight-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    padding: 20px;
    overflow: hidden;
    cursor: pointer;
}

/* Background Overlays */
.spotlight-item:nth-child(1) {
    --background-overlay: linear-gradient(to top, var(--ruppendorf_dark-blue) 0%, var(--ruppendorf_dark-blue) 100%);
}

.spotlight-item:nth-child(2) {
    --background-overlay: linear-gradient(to top, var(--ruppendorf_dark-green) 0%, var(--ruppendorf_dark-green) 100%);
}

.spotlight-item:nth-child(3) {
    --background-overlay: linear-gradient(to top, var(--ruppendorf_light-green) 0%, var(--ruppendorf_light-green) 100%);
}

.spotlight-item:nth-child(4) {
    --background-overlay: linear-gradient(to top, var(--ruppendorf_gold) 0%, var(--ruppendorf_gold) 100%);
}

.spotlight-item .accordion-btn {
    position: relative;
    font-size: 1rem;
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_eggshell-white);
    text-transform: uppercase;
    max-height: 9999px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.spotlight-item .accordion-btn::after {
    content: '+';
    font-size: 1.5em;
    font-weight: var(--fw_regular);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.spotlight-item .container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: end;
    max-height: 0;
    overflow: hidden;
    transition: none;
}

.spotlight-item .container h3,
.spotlight-item .container p {
    color: var(--ruppendorf_eggshell-white);
    text-shadow: var(--text-shadow_02);
}

/* Open State (via JS .is-active) */
.spotlight-item.is-active {
    --background-overlay: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 100%);
    padding-bottom: 80px;
}

.spotlight-item.is-active .container {
    max-height: 9999px;
    transition: max-height 2s ease-in-out;
    overflow-y: scroll;
}

.spotlight-item.is-active .accordion-btn {
    max-height: 0;
    opacity: 0;
}

/* Tablet */
@media (min-width: 768px) {
    .spotlight-item .container {
        width: 60%;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .spotlight-accordion {
        flex-direction: row;
        height: 600px;
    }

    .spotlight-item {
        padding: 20px;
        transition: flex 0.5s ease-in-out;
    }

    .spotlight-item .accordion-btn {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 50px 0;
        height: 100%;
        max-height: 9999px;
    }

    .spotlight-item .accordion-btn span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        width: fit-content;
    }

    .spotlight-item .accordion-btn::after {
        left: 50%;
        bottom: 0;
        right: auto;
        top: auto;
        transform: translateX(-50%);
        width: fit-content;
        height: fit-content;
    }

    .spotlight-item .container {
        width: 60%;
    }

    /* Active item (initially first, managed via JS) */
    .spotlight-item.is-active {
        padding: 40px;
        padding-bottom: 80px;
        flex: 10;
        --background-overlay: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 100%);
    }

    .spotlight-item.is-active .container {
        max-height: 9999px;
        transition: max-height 0.5s ease-in-out 0.5s;
    }

    .spotlight-item.is-active .accordion-btn {
        max-height: 0;
        padding: 0;
    }

    /* Hover */
    /* .spotlight-item:hover {
        padding: 40px;
        padding-bottom: 80px;
        flex: 10;
        --background-overlay: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 100%);
    }

    .spotlight-item:hover .container {
        max-height: 9999px;
        transition: max-height 0.5s ease-in-out 0.5s;
    }

    .spotlight-item:hover .accordion-btn {
        max-height: 0;
        padding: 0;
        opacity: 0;
    }

    .spotlight-item:hover .accordion-btn::after {
        transform: translateX(-50%);
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:not(:hover) {
        flex: 1;
        padding: 20px;
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:not(:hover) .accordion-btn {
        max-height: 9999px;
        padding: 50px 0;
        opacity: 1;
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:nth-child(1):not(:hover) {
        --background-overlay: linear-gradient(to top, var(--ruppendorf_dark-blue) 0%, var(--ruppendorf_dark-blue) 100%);
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:nth-child(2):not(:hover) {
        --background-overlay: linear-gradient(to top, var(--ruppendorf_dark-green) 0%, var(--ruppendorf_dark-green) 100%);
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:nth-child(3):not(:hover) {
        --background-overlay: linear-gradient(to top, var(--ruppendorf_light-green) 0%, var(--ruppendorf_light-green) 100%);
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:nth-child(4):not(:hover) {
        --background-overlay: linear-gradient(to top, var(--ruppendorf_gold) 0%, var(--ruppendorf_gold) 100%);
    }

    .spotlight-accordion:has(.spotlight-item:hover) .spotlight-item:not(:hover) .container {
        max-height: 0;
        transition: none;
    } */
}

/* --- News Section --- */

/* Meta Info */
.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: var(--fw_semi-bold);
    padding: 20px 0;
}

.meta>* {
    display: inline-block;
    padding-left: 25px;
    position: relative;
}

.meta>*::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 20px;
    aspect-ratio: 1/1;
    transform: translateY(-50%);
}

.meta .date::before {
    background-image: url(../mediafiles/icons/meta/calendar-solid-full.svg);
}

.meta .author::before {
    background-image: url(../mediafiles/icons/meta/user-solid-full.svg);
}

.meta .time::before,
.meta .reading-time::before {
    background-image: url(../mediafiles/icons/meta/clock-solid-full.svg);
}

.meta .location::before {
    background-image: url(../mediafiles/icons/meta/location-dot-solid-full.svg);
}

/* --- Events Section --- */

.event-card .container:first-of-type {
    position: relative;
}

.event-card .date-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: var(--ruppendorf_light-green);
}

.event-card .date-container>div {
    padding: 5px;
    color: var(--ruppendorf_eggshell-white);
    font-size: 14px;
}

.event-card .date-container>div:nth-child(2):not(.date) {
    font-size: 20px;
    font-weight: var(--fw_semi-bold);
}

.event-card .date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 90px;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.event-card .day {
    font-size: 36px;
    font-weight: var(--fw_black);
    text-transform: uppercase;
}

.event-card .month {
    text-transform: uppercase;
    margin-right: 3px;
}

/* --- Highlight Section --- */

.page-archive {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 20px;
}

/* For mascot positioning */
section.highlight .page-archive {
    padding-top: 180px;
}

/* Tablet */
@media (min-width: 768px) {
    .page-archive {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .page-archive {
        grid-template-columns: repeat(3, 1fr);
    }

    section.highlight .page-archive {
        padding-top: 0;
    }
}

/* Ritter */
.page-archive .maskot {
    position: absolute;
    position-anchor: --first-page-item-top;
    top: anchor(top);
    left: anchor(50%);
    width: min(100%, 300px);
    cursor: pointer;
    z-index: 1;
    transform: translate(-50%, -89%);
    -webkit-transform: translate(-50%, -89%);
    -moz-transform: translate(-50%, -89%);
    -ms-transform: translate(-50%, -89%);
    -o-transform: translate(-50%, -89%);
}

.page-archive .maskot img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.page-archive .maskot .maskot_desktop {
    display: none;
}

/* Desktop */
@media (min-width: 1400px) {
    .page-archive .maskot {
        top: anchor(50%);
        left: anchor(left);
        width: 100px;
        transform: translate(-80%, -50%);
        -webkit-transform: translate(-80%, -50%);
        -moz-transform: translate(-80%, -50%);
        -ms-transform: translate(-80%, -50%);
        -o-transform: translate(-80%, -50%);
    }


    .page-archive .maskot .maskot_desktop {
        display: block;
    }

    .page-archive .maskot .maskot_mobile {
        display: none;
    }
}

/* Page Items */
.page-item {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    box-shadow: var(--box-shadow_01);
    padding: 40px 20px;
    border-bottom: var(--border-bottom_width) solid transparent;
    transition: transform .3s ease-in-out;
}

.page-item:first-of-type {
    anchor-name: --first-page-item-top;
}

.page-item:hover {
    background-color: var(--ruppendorf_light_light-green);
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    transform: translateY(-10px);
}

.page-item .container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.page-item h3 {
    margin: 0;
    padding-bottom: .3em;
    border-bottom: var(--border_width) solid var(--ruppendorf_dark-blue);
}

.page-item p {
    margin-bottom: 0;
}

.page-item .badge {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 10px 20px;
    background-color: var(--ruppendorf_dark-green);
    color: var(--ruppendorf_eggshell-white);
    font-family: "Roboto Condensed", sans-serif;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.page-item .icon {
    height: 80px;
    width: 80px;
    object-fit: contain;
    display: block;
    margin: 20px auto;
}

/* --- Association Section --- */

.associations-container {
    background-color: var(--ruppendorf_light-green);
}

.infinite-slider {
    width: 100%;
    max-width: calc(var(--max-width_main) - 2 * var(--horizontal-padding));
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
    mask: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            /* transparent = unsichtbar */
            rgba(0, 0, 0, 1) 5%,
            /* undurchsichtig = sichtbar */
            rgba(0, 0, 0, 1) 95%,
            /* undurchsichtig = sichtbar */
            rgba(0, 0, 0, 0) 100%
            /* transparent = unsichtbar */
        );

}

.infinite-slider_track {
    display: flex;
    width: max-content;
    animation: infinite-scroll var(--animation-speed, 20s) linear infinite;
    -webkit-animation: infinite-scroll var(--animation-speed, 20s) linear infinite;
}

/* .infinite-slider:hover .infinite-slider_track {
    animation-play-state: paused;
} */

@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.infinite-slider_item {
    flex-shrink: 0;
    width: 200px;
    padding: 20px;
    margin-right: 40px;
    text-decoration: none;
}


.association-item {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    background-color: var(--ruppendorf_eggshell-white);
    border-bottom: var(--border-bottom_width) solid transparent;
    box-shadow: var(--box-shadow_01);
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

/* .association-item:hover {
    background-color: var(--ruppendorf_light_light-green);
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
} */

.association-item .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.association-item .logo {
    height: 80px;
    width: 80px;
    object-fit: contain;
}

.association-item h3 {
    font-size: 1rem;
    color: var(--ruppendorf_dark-green);
    text-transform: none;
}

.association-item .member-number {
    font-size: 0.85rem;
    color: var(--ruppendorf_medium-gray);
}

/* --- Gallery Section --- */

.bento-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

/* Desktop */
@media (min-width: 1400px) {
    .bento-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bento-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bento-gallery-grid .small {
    grid-row: span 1;
    grid-column: span 1;
    aspect-ratio: 1 / 1;
}

.bento-gallery-grid .medium {
    grid-row: span 1;
    grid-column: span 2;
    aspect-ratio: 2 / 1;
    /* twice as wide as tall */
}

.bento-gallery-grid .large {
    grid-row: span 2;
    grid-column: span 2;
    aspect-ratio: 1 / 1;
    /* 2x2 = square again */
}

/* Copyright Overlay */
.copyright-overlay {
    position: absolute;
    top: 0;
    right: 0;
    display: grid !important;
    grid-template-columns: 24px 0fr;
    max-height: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: var(--ruppendorf_eggshell-white);
}

.copyright-overlay .copyright-btn {
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    aspect-ratio: 1/1;
    font-size: 20px;
}

.copyright-overlay .copyright-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgba(0, 0, 0, .8);
    font-size: 12px;
    overflow: hidden;
}

.copyright-overlay .copyright-data>div {
    position: relative;
    padding: 2px;
    padding-right: 10px;
    white-space: nowrap;
}

.copyright-overlay:hover {
    grid-template-columns: 24px auto;
}

.copyright-overlay .copyright-data>div:has(+ div) {
    padding-right: 4px;
}

/* Positions-Wrapper für filter-generierte Copyright-Overlays (Featured Images, Block-Editor) */
.copyright-media-wrapper {
    position: relative;
    display: block;
    /*     width: 100%;
    height: 100%; */
}

/* Hero- und Intro-Overlay: Sichtbarkeit über Video und Gradient sicherstellen */
section.hero .copyright-overlay,
section.intro .copyright-overlay {
    z-index: 10;
}

/* --- Newsletter Section --- */

section.newsletter {
    background-color: var(--ruppendorf_dark-green);
}

section.newsletter h2,
section.newsletter p {
    color: var(--ruppendorf_eggshell-white);
    text-align: center;
}

section.newsletter input {
    border: none;
}

/* --- WIP Section --- */

section.wip img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}


/* ================================================================== */
/* ARCHIVES */
/* ================================================================== */

/* --- General --- */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 300px));
    grid-auto-rows: 1fr;
    gap: 20px;
    justify-content: center;
}

/* Desktop */
@media (min-width: 1400px) {
    .archive-grid {
        justify-content: start;
    }
}

/*  Archive Toolbar */
.archive-toolbar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.archive-toolbar .archive-count {
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_light-gray);
}

.archive-toolbar .archive-filters {
    gap: 10px;
}

.archive-toolbar .filter-group {
    flex: 1 1 180px;
}

.archive-toolbar .button-group {
    gap: 10px;
}

.archive-toolbar .filter-group input:focus,
.archive-toolbar .filter-group select:focus {
    outline: 2px solid var(--ruppendorf_gold);
    outline-offset: 2px;
    border-color: var(--ruppendorf_gold);
}

.archive-toolbar .archive-filters .button {
    margin-top: 0;
    flex: 0 0 auto;
}

/* Pagination */
.archive-pagination {
    margin-top: 40px;
}

.archive-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.archive-pagination a,
.archive-pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: var(--fw_medium);
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_dark-blue);
}

.archive-pagination a:hover {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

.archive-pagination .current {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

/* --- News Archive --- */
#news-archive {
    scroll-margin-top: 200px;
}

.news-archive .news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

img.no-content {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}

/* Desktop */
@media (min-width: 1400px) {
    .news-archive .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.news-archive .news-card {
    box-shadow: var(--box-shadow_01);
}

.news-archive .news-card .container {
    width: 100%;
}

/* --- Gallery Archive --- */
.archive-card {
    background-color: green;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-size: cover;
    background-position: center;
}

.archive-card * {
    color: var(--ruppendorf_eggshell-white);
}

.archive-card h3 {
    margin-bottom: 5px;
}

.archive-card .container {
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 100%);
}

.archive-card .container .info {
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.archive-card:hover .container .info {
    max-height: 200px;
    overflow: hidden;
    border-top: var(--border_width) solid var(--ruppendorf_eggshell-white);
    padding-top: 20px;
}

/* --- Associations Archive --- */

.last-modified {
    display: block;
    font-size: max(1rem, 0.3em);
    font-weight: var(--fw_regular);
    color: var(--ruppendorf_dark-blue);
    padding: 0.2em 0;
}

#associations-archive {
    scroll-margin-top: 200px;
}

.associations-archive .associations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 1030px) {
    .associations-archive .associations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.association-card {
    display: grid;
    align-self: start;
    background-color: var(--ruppendorf_eggshell-white);
    box-shadow: var(--box-shadow_01);
    border-bottom: var(--border-bottom_width) solid transparent;
}

.association-card .image {
    position: relative;
    width: 100%;
    aspect-ratio: 21/9;
    overflow: hidden;
}

.association-card .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}

.association-card header {
    gap: 20px;
    padding: 20px 20px;
    min-height: 150px;
    /* Fallback; exakte Höhe wird per JS gesetzt (equalizeAssociationCardHeaders) */
}

.association-card .association_logo {
    height: 80px;
    width: 80px;
    object-fit: contain;
}

.association-card header>.container {
    flex: 1;
}

.association-card .association_stats>div {
    width: 50%;
    min-width: fit-content;
}

.association-card .card-details {
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
}

.association-card .card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    list-style: none;
    font-size: .85rem;
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_dark-green);
    user-select: none;
}

.association-card .card-toggle::-webkit-details-marker {
    display: none;
}

.association-card .card-toggle::after {
    content: '+';
    font-size: 1.1rem;
    font-weight: var(--fw_black);
    flex-shrink: 0;
}

.association-card details[open] .card-toggle::after {
    content: '-';
}

.association-card .toggle-label-open {
    display: none;
}

.association-card details[open] .toggle-label-open {
    display: inline;
}

.association-card details[open] .toggle-label-close {
    display: none;
}

.association-card .content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
}

.association-card .association_contact-info .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.association-card h3 {
    font-size: 1.2rem;
    margin-bottom: .3em;
}

.association-card h3 .pre-headline {
    border-bottom: none;
}

.association-card h4 {
    font-weight: var(--fw_semi-bold);
    font-size: 1rem;
    font-style: italic;
    text-transform: none;
    color: var(--ruppendorf_dark-green);
    margin-bottom: 1em;
}

.association-card dt {
    font-size: .75rem;
    font-style: italic;
    font-weight: var(--fw_regular);
    color: var(--ruppendorf_medium-gray);
    margin-bottom: .5em;
}

.association-card dl {
    margin: 0;
}

.association-card dd {
    margin: 0;
    margin-left: 10px;
    word-break: break-all;
}

.association-card p {
    margin: 0;
}

.association-card .number {
    font-weight: var(--fw_black);
    color: var(--ruppendorf_dark-green);
    font-size: 1.2rem;
    font-style: normal;
}

.association-card .stat p {
    display: flex;
    align-items: center;
    font-size: .75rem;
    gap: 5px;
    color: var(--ruppendorf_medium-gray);
    font-style: italic;
}

.association-card ul {
    margin-left: 2rem;
}

.association-card li {
    margin-bottom: .3em;
    line-height: 1.6;
    list-style: square;
}

.association-card li::marker {
    color: var(--ruppendorf_gold);
}

.association-card .card-toggle span {
    color: var(--ruppendorf_light-gray);
}


/* --- Events Archive --- */

#events-archive,
#events-past {
    scroll-margin-top: 200px;
}

/* Controls (Ansicht-Umschalter + Kategoriefilter) */
.events-archive .events-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 40px;
}

.events-archive .view-toggle {
    display: flex;
    gap: 10px;
}

.events-archive .view-toggle .button {
    position: relative;
    margin-top: 0;
    border-radius: 0;
    padding-left: 40px;
}

.events-archive .view-toggle .button::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(50%, -50%);
}

/* List-View Icon */
.events-archive .view-toggle .list-view_btn::before {
    background-image: url(../mediafiles/icons/list-solid-full.svg);
}

/* Calendar-View Icon */
.events-archive .view-toggle .calendar-view_btn::before {
    background-image: url(../mediafiles/icons/calendar-days-solid-full.svg);
}

.view-toggle .button.primary::before {
    filter: brightness(0) invert(1);
}

.view-toggle .button.secondary:hover::before {
    filter: brightness(0) invert(1);
}


.events-archive .category-filter .filter-group {
    flex: 0 0 auto;
}

.events-archive .category-filter .button {
    margin-top: 0;
}

/* Monatsnavigation */
.events-archive .month-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.events-archive .month-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 1.1rem;
    text-decoration: none;
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_dark-blue);
    transition: background-color 0.2s, color 0.2s;
}

.events-archive .month-nav-arrow:hover {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

.events-archive .month-nav-arrow.is-disabled {
    color: var(--ruppendorf_light-gray);
    border-color: var(--ruppendorf_light-gray);
    cursor: default;
    pointer-events: none;
}

.events-archive .month-select-form {
    flex: 0 1 auto;
}

.events-archive .month-select-form .select-wrapper select {
    min-width: 180px;
    font-weight: var(--fw_semi-bold);
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.events-archive .month-nav-today {
    margin-top: 0;
}

/* Calendar View */
.events-calendar {
    margin-bottom: var(--vertical-margin_medium);
    overflow-x: auto;
    padding-bottom: 10px;
}

/* Scrollbar */
.events-calendar::-webkit-scrollbar {
    height: 5px;
}

.events-calendar::-webkit-scrollbar-track {
    background-color: var(--ruppendorf_light_light-green);
}

.events-calendar::-webkit-scrollbar-thumb {
    background-color: var(--ruppendorf_dark-green);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}

.calendar-weekday {
    text-align: center;
    font-weight: var(--fw_semi-bold);
    font-size: 1.2rem;
    min-width: 80px;
    padding: 8px 4px;
    background-color: var(--ruppendorf_light-green);
    color: var(--ruppendorf_eggshell-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    max-width: 100%;
}

.calendar-week {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 7;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 80px;
    min-width: 80px;
    padding: 5px;
    border: calc(var(--border_width) / 2) solid var(--ruppendorf_light-gray);
    overflow: visible;
}

.calendar-day.is-empty {
    outline: none;
}

.calendar-day.is-today {
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    background-color: var(--ruppendorf_light_light-green);
}

.calendar-day .day-number {
    font-size: 0.8rem;
    font-weight: var(--fw_medium);
    color: var(--ruppendorf_dark-blue);
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}

.calendar-day.is-today .day-number {
    color: var(--ruppendorf_dark-green);
    font-weight: var(--fw_black);
}

.day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.event-pill {
    display: flex;
    gap: 4px;
    align-items: baseline;
    background-color: var(--ruppendorf_light-green);
    color: var(--ruppendorf_eggshell-white);
    font-size: 0.7rem;
    padding: 2px 5px;
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s;
}

.event-pill:hover {
    background-color: var(--ruppendorf_dark-green);
    color: var(--ruppendorf_eggshell-white);
}

.event-pill-time {
    opacity: 0.75;
    white-space: nowrap;
    flex-shrink: 0;
}

.event-pill-title {
    font-weight: var(--fw_medium);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-pill-more {
    background-color: var(--ruppendorf_gold);
    justify-content: center;
}

.event-pill-more:hover {
    /* background-color: var(--ruppendorf_dark-gold); */
}

/* ── Event-Tooltip ─────────────────────────────────────────── */
/* Lives at body level, positioned via JS → never clipped by grid overflow */

#event-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 220px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    pointer-events: none;
    text-align: left;
    white-space: normal;
}

.event-tooltip-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.event-tooltip-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-tooltip-title {
    font-size: 1rem;
    font-weight: var(--fw_medium);
    line-height: 1.3;
}

.event-tooltip-date,
.event-tooltip-time,
.event-tooltip-location {
    font-size: 0.75rem;
    color: var(--ruppendorf_dark);
    opacity: 0.75;
    position: relative;
    padding-left: 20px;
}

.event-tooltip-date::before,
.event-tooltip-time::before,
.event-tooltip-location::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 14px;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.event-tooltip-date::before {
    background-image: url(../mediafiles/icons/meta/calendar-solid-full.svg);
}

.event-tooltip-time::before {
    background-image: url(../mediafiles/icons/meta/clock-solid-full.svg);
}

.event-tooltip-location::before {
    background-image: url(../mediafiles/icons/meta/location-dot-solid-full.svg);
}

/* Tablet */
@media (min-width: 768px) {
    .calendar-day {
        min-height: 100px;
    }

    .event-pill {
        font-size: 0.75rem;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .calendar-day {
        min-height: 120px;
        padding: 8px;
    }
}

/* Monatstrenner in der Listenansicht */
.events-month-separator {
    margin-top: var(--vertical-margin_small);
    padding-bottom: 8px;
    border-bottom: var(--border_width) solid var(--ruppendorf_dark-green);
}

.events-month-separator:first-child {
    margin-top: 0;
}

.events-month-separator h3 {
    margin: 0;
    color: var(--ruppendorf_dark-green);
}

.events-month-separator:has(+ .event-card)+.event-card {
    border-top: none;
}

/* Listenansicht (kommende Events) */
.events-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: var(--vertical-margin_medium);
}

.events-upcoming-list .event-card,
.events-past-list .event-card {
    box-shadow: var(--box-shadow_01);
}



/* Vergangene Veranstaltungen */
.events-past-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.events-past-list .event-card.is-past .date-container {
    background-color: var(--ruppendorf_medium-gray);
}

/* Tablet */
@media (min-width: 768px) {

    .events-upcoming-list,
    .events-past-list {
        gap: unset;
    }

    .events-upcoming-list .event-card,
    .events-past-list .event-card {
        box-shadow: unset;
    }

}

/* ================================================================== */
/* SINGLE POSTS */
/* ================================================================== */

/* --- Single Post (News) --- */

article .featured-image {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: var(--vertical-margin_small);
}

.post-information {
    gap: 20px;
    margin-bottom: var(--vertical-margin_small);
}

.post-information .meta {
    padding: 0;
}

.post-information .share-links {
    gap: 20px;
    row-gap: 5px;
}

.post-information .share-links-list {
    gap: 10px;
}

.post-information .share-links-list img {
    height: 35px;
    width: 35px;
}

.post-information .share-links-list li a {
    display: block;
}

.post-information .share-links-list li:hover {
    filter: brightness(0.8);
    transform: scale(1.1);
}

/* Post Navigation */

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 20px;
    margin-top: 40px;
}

.nav-links>div a {
    display: block;
    width: fit-content;
    margin-top: 40px;
    padding: 10px 20px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--fw_medium);
    border: var(--border_width) solid;
    color: var(--ruppendorf_dark-blue);
    border-color: var(--ruppendorf_dark-blue);
}

.nav-links>div a:hover {
    color: var(--ruppendorf_eggshell-white);
    background-color: var(--ruppendorf_dark-blue);
}

.nav-links .nav-next {
    margin-left: auto;
}

/* ab 490px */
@media screen and (max-width: 490px) {

    .nav-links span {
        display: none;
    }

}

/* --- Single Event --- */

.event_details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 40px;
    background-color: var(--ruppendorf_light_light-green);
    padding: 40px clamp(20px, 5vw, 40px);
    border-left: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    margin: var(--vertical-margin_small) 0;
}

.event_details>.container {
    position: relative;
    padding-left: clamp(30px, 10%, 50px);
}

.event_details>.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(20px, 5%, 40px);
    aspect-ratio: 1/1;
    background-size: contain;
}

/* Icon Date */
.event_details .event_date::before {
    background-image: url(../mediafiles/icons/meta/calendar-solid-full.svg);
}

/* Icon Time */
.event_details .event_time::before {
    background-image: url(../mediafiles/icons/meta/clock-solid-full.svg);
}

/* Icon Location */
.event_details .event_location::before {
    background-image: url(../mediafiles/icons/meta/location-dot-solid-full.svg);
}

/* Icon Ticket */
.event_details .event_ticket::before {
    background-image: url(../mediafiles/icons/meta/location-dot-solid-full.svg);
}

/* Icon Website */
.event_details .event_website::before {
    background-image: url(../mediafiles/icons/meta/globe-solid-full.svg);
}

/* Icon Accessibility */
.event_details .event_accesibility::before {
    background-image: url(../mediafiles/icons/meta/accessible-icon-brands-solid-full.svg);
}

/* Icon Organizer */
.event_details .event_organizer::before {
    background-image: url(../mediafiles/icons/meta/user-solid-full.svg);
}

.event_details p {
    margin: 0;
}

.event_details b {
    line-height: 2;
}

.event_details address:has(+*) {
    margin-bottom: 1em;
}

.event_accesibility li {
    position: relative;
    padding-left: 35px;
    list-style-type: none;
    margin: 0;
}

.event_accesibility ul {
    margin: 0;
}

.event_accesibility li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 1/1;
    padding: 10px;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../mediafiles/icons/square-check-solid-full_light-green.svg);
}


/* ================================================================== */
/* PAGES */
/* ================================================================== */

/* --- General --- */

/*  Page Links */
.page-links {
    gap: 20px;
}

.post-page-numbers {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: var(--fw_medium);
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_dark-blue);

}

.post-page-numbers:hover {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

.post-page-numbers.current {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

/* Entry Footer */
.entry-footer .edit-link a {
    display: inline-block;
    padding: 10px 20px;
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_dark-blue);
}

.entry-footer .edit-link a:hover {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

/* ================================================================== */
/* CUSTOM BLOCK PATTERNS */
/* ================================================================== */

/* --- General --- */

.wp-block-columns {
    gap: 2rem;
}

.wp-block-columns.has-background {
    padding: 40px;
}

/* --- Image-Text Block --- */

.image-text-block {
    margin: var(--vertical-margin_small) 0;
    align-items: stretch;
}

.image-text-block .image-container {
    position: relative;
    min-height: 300px;
}

.image-text-block .image-container .wp-block-image {
    position: absolute !important;
    inset: 0;
    margin: 0;
}

.image-text-block figure {
    margin: 0;
    height: 100%;
}

.image-text-block .text-container {
    padding: 20px 0;
}

.image-text-block .text-container p:last-child {
    margin: 0;
}

.image-text-block .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Buttons Block --- */

.wp-block-buttons {
    margin-top: 40px;
}

.wp-block-button a {
    text-transform: uppercase;
    font-weight: var(--fw_medium);
    border-width: var(--border_width);
}

.wp-block-button.primary:hover a {
    background-color: var(--ruppendorf_dark-gold) !important;
}

.wp-block-button.secondary:hover a {
    background-color: var(--ruppendorf_dark-blue) !important;
    color: var(--ruppendorf_eggshell-white) !important;
}

/* --- Paragraph Block --- */

.wp-block-paragraph:not(:first-child) {
    margin-top: 1rem;
}

/* --- List Block --- */

.wp-block-list {
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.wp-block-list li {
    margin-bottom: .75em;
    line-height: 1.6;
    list-style: square;
}

.wp-block-list li::marker {
    color: var(--ruppendorf_gold);
}

/* Complianz Cookie Notice Block */
#cmplz-document ul,
#cmplz-document ol {
    margin-left: 2rem;
    margin-bottom: 2rem;
}

#cmplz-document li {
    margin-bottom: .75em;
    line-height: 1.6;
    list-style: square;
}

#cmplz-document li::marker {
    color: var(--ruppendorf_gold);
}

/* --- Accordion Block --- */

.wp-block-accordion {
    margin: var(--vertical-margin_small) 0;
}

.wp-block-accordion-heading__toggle-icon {
    display: none;
}

.wp-block-accordion-heading {
    position: relative;
    background-color: var(--ruppendorf_light-green);
    color: var(--ruppendorf_eggshell-white);
    font-size: 1rem;
    font-weight: var(--fw_medium);
    padding: 10px 20px;
}

.wp-block-accordion-heading:has(.wp-block-accordion-heading__toggle-icon)>button::after {
    content: '';
    display: absolute;
    top: 50%;
    right: 0;
    height: 20px;
    width: 20px;
    background: url(../mediafiles/icons/chevron-down-solid-full.svg);
    filter: brightness(0) invert(1);
}

.is-open .wp-block-accordion-heading:has(.wp-block-accordion-heading__toggle-icon)>button::after {
    transform: scaleY(-1);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

.wp-block-accordion-panel {
    padding: 20px;
}

/* --- Text Columns Block --- */

.text-columns,
.image-text-columns {
    margin: var(--vertical-margin_small) 0;
}

.text-columns>.wp-block-column p,
.image-text-columns>.wp-block-column p {
    margin-bottom: 0;
}

/* --- Image-Text Columns Block --- */

.image-text-columns>.wp-block-column img {
    aspect-ratio: 5/4;
    width: 100%;
    object-fit: cover;
}

/* --- Image Columns Block --- */

.image-columns {
    gap: 10px;
    margin: 10px 0;
    margin-bottom: var(--vertical-margin_small);
}

.image-columns:has(+ .image-columns) {
    margin-bottom: 0;
}

.image-columns img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.image-columns figure {
    margin: 0;
}

/* --- Block Quote --- */
.wp-block-quote {
    height: fit-content;
    position: relative;
    background-color: var(--ruppendorf_light_light-green);
    background-image: url(../mediafiles/icons/quote.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 200px;
    margin: var(--vertical-margin_small) 0;
    padding: 40px 20px;
    border-left: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
}

.wp-block-quote>* {
    margin: 0;
    font-weight: var(--fw_semi-bold);
}

.wp-block-quote>cite {
    font-style: italic;
    font-weight: var(--fw_regular);
    margin-top: 2rem;
    margin-left: 20px;
}

.wp-block-quote>cite::before {
    content: '\2015';
    margin-right: 5px;
}

/* --- Cover --- */
.wp-block-cover {
    padding: 60px 40px;
    margin: var(--vertical-margin_small) 0;
}

.wp-block-cover .wp-block-buttons {
    margin-top: 40px;
}

/* --- Gallery --- */
.wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
    gap: 10px !important;
    margin: 0;
    width: 100%;
}

/* Desktop */
@media (min-width: 1400px) {
    .wp-block-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

.wp-block-gallery .wp-block-image {
    display: block;
    height: 100%;
    min-width: 100%;
}

/* Default Small: 1x1 */
.wp-block-gallery .wp-block-image {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1/1;
}

/* Medium: 2x1 (Position 3 and 4 in 11-cycle) */
.wp-block-gallery .wp-block-image:nth-child(11n+3),
.wp-block-gallery .wp-block-image:nth-child(11n+4) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 2/1;
}

/* Large: 2x2 (Position 9 in 11-cycle) */
.wp-block-gallery .wp-block-image:nth-child(11n+9) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1/1;
}

/* --- Event Programm Block --- */

.event-program {
    --padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: var(--vertical-margin_small) 0;
    padding: var(--padding);
    padding-left: calc(var(--padding) * 2);
    background-color: var(--ruppendorf_light_light-green);
}

.event-program::before {
    content: '';
    position: absolute;
    left: var(--padding);
    top: 50%;
    width: var(--border_width);
    height: calc(100% - var(--padding) * 2);
    /* padding 40px * 2 */
    background-color: var(--ruppendorf_dark-green);
    transform: translateY(-50%);
}

.event-program-item {
    position: relative;
    flex-direction: column;
    background-color: var(--ruppendorf_eggshell-white);
    align-items: center;
    padding: 20px;
}

.event-program-item::before {
    content: '';
    position: absolute;
    left: calc(var(--padding) * -1);
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--ruppendorf_dark-green);
    transform: translate(-50%, -50%);
}

.event-program-time {
    display: flex;
    gap: 5px;
    min-width: max-content;
}

.event-program-time p {
    margin: 0 !important;
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_gold);
    white-space: nowrap;
}

.event-program-description p {
    margin: 0 !important;
}


/* ================================================================== */
/* SIDEBARS */
/* ================================================================== */


aside#secondary {
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

@media screen and (min-width: 1000px) {
    aside#secondary {
        flex: unset;
        width: 30%;
        min-width: max(250px, 30%);
        padding: 20px;
        border-left: var(--border_width) solid var(--ruppendorf_light-gray);
    }
}

.widget {
    margin-bottom: 20px;
}

/* Widget Recent Posts */
.widget-recent-posts .post-list {
    display: flex;
    flex-direction: column;
}

.widget-recent-posts .post-list .post a {
    display: flex;
    text-decoration: none;
    gap: 10px;
}

.widget-recent-posts .post-list .post {
    padding: 10px;
    border-bottom: var(--border-bottom_width) solid transparent;
}

.widget-recent-posts .post-list .post:hover {
    background-color: var(--ruppendorf_light_light-green);
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
}

.widget-recent-posts .post-list .post:not(:first-child) {
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
}

.widget-recent-posts .post-list .post .meta {
    padding: 0;
    color: var(--ruppendorf_dark-blue);
}

.widget-recent-posts .post-list .post img {
    width: 80px;
    object-fit: cover;
}

.widget-recent-posts .post-list .post-title {
    color: var(--ruppendorf_dark-blue);
    font-size: 1rem;
    font-weight: var(--fw_medium);
    text-transform: none;
}

/* Widget Category List */
.widget-categories .cat-list {
    display: flex;
    flex-direction: column;
}

.widget-categories .cat-list .cat a {
    display: block;
    padding: 10px;
    width: 100%;
    color: var(--ruppendorf_dark-blue);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: var(--border-bottom_width) solid transparent;
}

.widget-categories .cat-list .cat:not(:first-child) a {
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
}

.widget-categories .cat-list .cat a:hover {
    background-color: var(--ruppendorf_light_light-green);
    border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
}

.widget-categories .cat-list .current-cat a {
    background-color: var(--ruppendorf_light_light-green);
    color: var(--ruppendorf_dark-green);
    font-weight: var(--fw_semi-bold);
}


/* ================================================================== */
/* COMMENTS */
/* ================================================================== */

.comments-area {
    scroll-margin-top: 200px;
}

.comments-area .comments-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.comments-area .comments-count {
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_light-gray);
}

.comments-area .comments-sort {
    margin: 0;
}

.comments-area .comments-sort select {
    width: auto;
}

.comment-list {
    margin: 0;
    padding: 0;
}

.comment {
    position: relative;
    padding: 20px;
}

.comment:not(:first-child) {
    border-top: var(--border_width) solid var(--ruppendorf_light-gray);
}

.comment .comment-body {
    display: flex;
    flex-direction: column;
}

.comment .comment-content {
    padding: 20px;
    padding-left: 60px;
    padding-bottom: 40px;
}

.comment .comment-content p {
    margin: 0;
}

.comment .avatar {
    height: 50px;
    width: 50px;
}

.comment .comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap-reverse;
}

.comment .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment .says {
    display: none;
}

.comment .fn {
    font-size: 1.3rem;
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_dark-green);
    white-space: nowrap;
}

.bypostauthor .fn::after {
    content: "Autor";
    display: inline-block;
    padding: 5px;
    margin-left: 5px;
    background-color: var(--ruppendorf_gold);
    color: var(--ruppendorf_eggshell-white);
    font-size: .75rem;
    text-transform: uppercase;
}

.comment a {
    color: inherit;
    text-decoration: none;
}

.comment time {
    color: var(--ruppendorf_medium-gray);
    font-size: 0.75rem;
}

.comment .comment-awaiting-moderation {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    border: var(--border_width) solid var(--ruppendorf_light-gray);
    backdrop-filter: blur(8px);
    color: var(--ruppendorf_dark-blue);
}

.comment .edit-link {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.comment .edit-link a {
    display: block;
    padding: 10px 20px;
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    text-transform: uppercase;
    font-weight: var(--fw_semi-bold);
}

.comment .edit-link:hover a {
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
}

.comment-respond {
    padding: 40px 20px;
    margin-top: 200px;
    background-color: var(--ruppendorf_light_light-green);
    anchor-name: --comment-respond;
    box-shadow: var(--box-shadow_01);
}

/* Desktop */
@media screen and (min-width: 1400px) {
    .comment-respond {
        margin-top: 40px;
    }
}

.comment-respond input,
.comment-respond textarea {
    border-color: var(--ruppendorf_light-green);
}

.comment-form-comment,
.comment-form-email,
.comment-form-author {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: start;
    gap: 10px;
}

.comment-form input,
.comment-form textarea {
    max-width: 500px;
}

.comment-char-counter {
    display: block;
    text-align: right;
    font-size: 0.85em;
    color: #888;
    max-width: 500px;
    margin-top: 4px;
}

/* Maskot */
.comments-area .maskot {
    position: absolute;
    position-anchor: --comment-respond;
    top: anchor(top);
    left: anchor(50%);
    width: min(70%, 300px);
    cursor: pointer;
    z-index: 1;
    transform: translate(-50%, -89%);
    -webkit-transform: translate(-50%, -89%);
    -moz-transform: translate(-50%, -89%);
    -ms-transform: translate(-50%, -89%);
    -o-transform: translate(-50%, -89%);
}

.comments-area .maskot img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.comments-area .maskot .maskot_desktop {
    display: none;
}

/* Desktop */
@media (min-width: 1400px) {
    .comments-area .maskot {
        top: anchor(50%);
        left: anchor(left);
        width: 100px;
        transform: translate(-80%, -50%);
        -webkit-transform: translate(-80%, -50%);
        -moz-transform: translate(-80%, -50%);
        -ms-transform: translate(-80%, -50%);
        -o-transform: translate(-80%, -50%);
    }


    .comments-area .maskot .maskot_desktop {
        display: block;
    }

    .comments-area .maskot .maskot_mobile {
        display: none;
    }
}


/* ================================================================== */
/* FORMS */
/* ================================================================== */

/* --- General --- */
input,
select,
textarea {
    display: block;
    height: fit-content;
    max-width: 100%;
    padding: 10px 15px;
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    background-color: var(--ruppendorf_eggshell-white);
    font-family: inherit;
    font-size: 1rem;
    color: var(--ruppendorf_dark-blue);
    text-decoration: none;
}

textarea {
    line-height: 1.6;
}

.archive-filters input,
.archive-filters select {
    width: 100%;
}

input[type="submit"] {
    background: var(--ruppendorf_gold);
    text-transform: uppercase;
    font-weight: var(--fw_medium);
    color: var(--ruppendorf_eggshell-white);
    border: var(--border_width) solid var(--ruppendorf_gold);
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: var(--ruppendorf_dark-gold);
    color: var(--ruppendorf_eggshell-white);
    border-color: var(--ruppendorf_dark-gold);
}

input[type="checkbox"] {
    display: block;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

select {
    position: relative;
    padding-right: 40px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    height: 20px;
    aspect-ratio: 1/1;
    background-image: url(../mediafiles/icons/chevron-down-solid-full.svg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transform: translateY(-50%);
}

label:has(~input),
label:has(~textarea) {
    font-weight: var(--fw_semi-bold);
    color: var(--ruppendorf_dark-green);
    text-transform: uppercase;
}

/* --- WPCF7 Form --- */
.wpcf7-form p:last-of-type {
    margin-bottom: 0;
}

.wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 0;
    background-color: var(--ruppendorf_dark-green);
    transform: translateY(-50%);
}

*:has(.wpcf7-spinner) {
    position: relative;
}

/* Hide reCaptcha badge */
.grecaptcha-badge {
    visibility: hidden;
}

/* --- Search Form --- */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Mailchimp Form --- */
.mc4wp-form {
    position: relative;
}

/* Message Container */
.mc4wp-response {
    display: grid;
    place-items: center;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 20px;
    transform: translateX(-50%);
}

.mc4wp-response p {
    margin: 0;
}

/* General Alert */
.mc4wp-alert {
    padding: 20px;
    background: var(--ruppendorf_eggshell-white);
}

.mc4wp-form .mc4wp-alert p {
    color: var(--ruppendorf_dark-blue);
}

/* Success */
.mc4wp-form .mc4wp-succes p {
    color: var(--status_green);
}

/* Error */
.mc4wp-form .mc4wp-error p {
    color: var(--status_red);
}


/* ================================================================== */
/* COUNTER */
/* ================================================================== */

.counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.counter-item .icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.counter-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.counter-number {
    font-size: 2rem;
    font-weight: 700;
}

.counter-label {
    font-size: 1rem;
    color: var(--ruppendorf_dark-blue);
}


/* ================================================================== */
/* SLIDER */
/* ================================================================== */

.slider {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

section.news .slider,
section.events .slider {
    filter: drop-shadow(var(--drop-shadow_01));
    overflow-clip-margin: 20px;
}

.slider-track {
    display: flex;
    transition: transform 0.3s ease-out;
}

.slider-item {
    min-width: 100%;
}

.news-card,
.event-card {
    display: flex;
    flex-direction: column;
    background-color: var(--ruppendorf_eggshell-white);
}

.news-card .pre-headline,
.event-card .pre-headline {
    border-bottom: none;
}

.news-card .image,
.event-card .image {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.news-card img,
.event-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card .container,
.event-card .container {
    overflow: hidden;
}

.news-card .content,
.event-card .content {
    display: flex;
    flex-direction: column;
    flex: auto;
    padding: 20px;
    padding-bottom: 40px;
}

/* Tablet */
@media (min-width: 768px) {

    section.events .slider {
        filter: none;
    }

    .slider-item {
        min-width: unset;
    }

    .news-list,
    .event-list {
        flex-direction: column;
    }

    .news-list {
        gap: 20px;
    }

    .news-card,
    .event-card {
        flex-direction: row;
        width: 100%;
    }

    .event-card {
        padding: 20px;
    }

    .event-card:not(:first-child) {
        border-top: var(--border_width) solid var(--ruppendorf_light-gray);
    }

    .news-card .container {
        width: 50%;
    }

    .event-card .container:first-of-type {
        width: 30%;
        min-width: 250px;
        max-width: 300px;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .slider {
        overflow: visible;
    }

    .news-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .news-card {
        flex-direction: column;
    }

    .news-card,
    .event-card {
        border-bottom: var(--border-bottom_width) solid transparent;
        transition: transform .3s ease-in-out;
    }

    .news-card>.container {
        width: 100%;
    }

    .news-card .content {
        justify-content: space-between;
    }

    .news-card:hover,
    .event-card:hover {
        background-color: var(--ruppendorf_light_light-green);
        border-bottom: var(--border-bottom_width) solid var(--ruppendorf_dark-green);
    }

    .news-card:hover {
        transform: translateY(-10px);
    }
}

/* Slider Controls */
.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.slider-arrow {
    border: none;
    width: 40px;
    aspect-ratio: 1/1;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.slider-arrow.slider-next {
    background-image: url(../mediafiles/icons/chevron-right-solid-full.svg);
}

.slider-arrow.slider-prev {
    background-image: url(../mediafiles/icons/chevron-left-solid-full.svg);
}

.slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slider-dots {
    display: flex;
    gap: 0.5rem;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border: var(--border_width) solid var(--ruppendorf_dark-blue);
    cursor: pointer;
}

.slider-dot.active {
    background: var(--ruppendorf_dark-blue);
}

/* Tablet */
@media (min-width: 768px) {
    .slider-controls {
        display: none;
    }
}


/* ================================================================== */
/* FOOTER */
/* ================================================================== */

.site-footer {
    margin-top: auto;
    overflow: hidden;
}

.site-footer .footer-information {
    background-color: var(--ruppendorf_dark-blue);
    padding: var(--vertical-padding_medium) var(--horizontal-padding) 0 var(--horizontal-padding);
    color: var(--ruppendorf_eggshell-white);
    row-gap: 50px;
}

/* --- Logo --- */

.site-footer .logo img {
    width: clamp(150px, 50vw, 300px);
}

/* --- Social Links --- */

.menu-social-media-links-container {
    gap: 10px;
}

.menu-social-media-links-container span {
    text-align: center;
}

#social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#social-links li {
    position: relative;
    display: block;
    width: 40px;
    aspect-ratio: 1/1;
    overflow: hidden;
}

#social-links a {
    text-indent: -9999px;
    /* Push text out of visible area */
    border: none;
}

#social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

#social-links a:hover::before {
    transform: scale(1.1);
}

/* Icons per Platform */

/* Instagram */
#social-links .menu-item.instagram a::before {
    background-image: url(../mediafiles/icons/social-links/instagram-brands-solid-full.svg);
}

/* Facebook */
#social-links .menu-item.facebook a::before {
    background-image: url(../mediafiles/icons/social-links/facebook-brands-solid-full.svg);
}

/* Whatsapp */
#social-links .menu-item.whatsapp a::before {
    background-image: url(../mediafiles/icons/social-links/whatsapp-brands-solid-full.svg);
}

/* YouTube */
#social-links .menu-item.youtube a::before {
    background-image: url(../mediafiles/icons/social-links/youtube-brands-solid-full.svg);
}


/* --- Visitor Counter --- */

.site-footer .visitor-counter {
    padding: 10px 0;
}

.site-footer .visitor-counter span:first-child {
    position: relative;
    padding-left: 25px;
}

.site-footer .visitor-counter span:first-child::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    aspect-ratio: 1/1;
    background-image: url(../mediafiles/icons/eye-solid-full_gold.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}



/* --- Footer Navigation --- */

.footer-navigation {
    border-top: var(--border_width) solid var(--ruppendorf_gold);
}

#footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0;
}

#footer-nav a {
    color: var(--ruppendorf_eggshell-white);
    text-decoration: none;
    text-transform: uppercase;
    padding: 0;
}

/* Hover */
#footer-nav .menu-item:hover a {
    color: var(--ruppendorf_gold);
    text-decoration: underline;
}

/* Active Page */
#footer-nav .current-menu-item a {
    color: var(--ruppendorf_gold);
    text-decoration: underline;
}


/* --- Copyright and Developer Credit --- */

.site-footer .copyright {
    background-color: var(--ruppendorf_gold);
    text-align: center;
    padding: 5px var(--horizontal-padding);
    font-size: 12px;
    gap: 10px;
}

.site-footer .copyright a {
    color: var(--ruppendorf_dark-blue);
}

.dev-credit {
    position: relative;
}

.dev-credit .mauzel {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 20vw;
    aspect-ratio: 1/1;
    top: -20vw;
    left: 0;
    background: url(../mediafiles/mauzel.webp);
    background-size: contain;
    transition: none;
    animation: rotate_360 5s linear infinite;
}

.dev-credit:hover .mauzel {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s ease 10s;
}

@keyframes rotate_360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ================================================================== */
/* OVERLAYS & VISUAL EFFECTS */
/* ================================================================== */

.no-scroll {
    overflow: hidden;
}

.gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
}

.gradient.blur {
    -webkit-mask: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    mask: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.negative {
    filter: brightness(0) invert(1);
}

.is-hidden {
    display: none;
}

.is-invisible {
    opacity: 0;
    visibility: hidden;
}

/* --- Scroll Fade-In --- */

.fade-in {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tooltip */

*:has(> .tool-tip) {
    position: relative;
}

*:has(> .tool-tip):hover .tool-tip {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease .5s;
    -webkit-transition: opacity 0.3s ease .5s;
    -moz-transition: opacity 0.3s ease .5s;
    -ms-transition: opacity 0.3s ease .5s;
    -o-transition: opacity 0.3s ease .5s;
}

.tool-tip {
    display: block;
    position: absolute;
    padding: 5px;
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
    white-space: nowrap;
    font-size: 0.75rem;
    box-shadow: var(--box-shadow_01);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;

}

.tool-tip.top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    -webkit-transform: translate(-50%, -120%);
    -moz-transform: translate(-50%, -120%);
    -ms-transform: translate(-50%, -120%);
    -o-transform: translate(-50%, -120%);
}

.tool-tip.right {
    top: 50%;
    left: 100%;
    transform: translate(calc(100% + 5px), -50%);
    -webkit-transform: translate(calc(100% + 5px), -50%);
    -moz-transform: translate(calc(100% + 5px), -50%);
    -ms-transform: translate(calc(100% + 5px), -50%);
    -o-transform: translate(calc(100% + 5px), -50%);
}

.tool-tip.left {
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - 5px), -50%);
    -webkit-transform: translate(calc(-100% - 5px), -50%);
    -moz-transform: translate(calc(-100% - 5px), -50%);
    -ms-transform: translate(calc(-100% - 5px), -50%);
    -o-transform: translate(calc(-100% - 5px), -50%);
}

.tool-tip.bottom {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 5px);
    -webkit-transform: translate(-50%, 5px);
    -moz-transform: translate(-50%, 5px);
    -ms-transform: translate(-50%, 5px);
    -o-transform: translate(-50%, 5px);
}

/* Copy-Link Tooltip */
.copy-link {
    position: relative;
}

.copy-link-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    padding: 5px;
    background-color: var(--ruppendorf_dark-blue);
    color: var(--ruppendorf_eggshell-white);
    white-space: nowrap;
    font-size: 0.75rem;
    box-shadow: var(--box-shadow_01);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.copy-link.copied .copy-link-tooltip {
    opacity: 1;
}

/* =============================================================================
   Stretched Link – ganze Card klickbar
   ============================================================================= */

.news-card,
.event-card {
    position: relative;
}

.card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.news-card:hover,
.event-card:hover {
    cursor: pointer;
}


/* ── Lightbox ───────────────────────────────────────────────── */

img[data-lightbox="1"] {
    cursor: zoom-in;
}

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#lightbox.is-open {
    display: flex;
}

#lb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    width: 100%;
}

#lb-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

#lb-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

#lb-meta {
    color: var(--ruppendorf_eggshell-white);
    text-align: center;
    font-size: 0.85rem;
}

#lb-alt {
    margin: 0 0 6px;
    font-weight: var(--fw_semi-bold);
    font-size: 0.9rem;
}

#lb-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    opacity: 0.7;
    font-size: 0.8rem;
}

#lb-author::before  { content: "© "; }
#lb-source::before  { content: "Quelle: "; }
#lb-license::before { content: "Lizenz: "; }

#lb-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--ruppendorf_eggshell-white);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px 12px;
    line-height: 1;
    transition: background 0.2s;
}

#lb-prev,
#lb-next {
    position: fixed;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

#lb-prev:hover,
#lb-next:hover { opacity: 0.7; }

#lb-prev::before,
#lb-next::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
}

#lb-prev { left: 16px; }
#lb-next { right: 16px; }

#lb-prev::before { background-image: url(../mediafiles/icons/chevron-left-solid-full.svg); }
#lb-next::before { background-image: url(../mediafiles/icons/chevron-right-solid-full.svg); }

@media (max-width: 600px) {
    #lb-prev { left: 4px; }
    #lb-next { right: 4px; }
    #lb-prev::before,
    #lb-next::before { width: 24px; height: 24px; }
}