/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: #FFFFFF;
    --light-gray: #1C1C1C;
    --dark-red: #B75550;
    --light-red: #D04643;
    --primary-red: #BB000E;
    --gray: #B6B6B6;
    --dark-bg: #111111;
    --burgundy: #7B0000;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--light-gray);
    overflow-x: hidden;
    background: #111111;
    position: relative;
}

.is-inner main {
    padding-top: 5.8rem;
}

@media (max-width: 768px) {
    .is-inner main {
        padding-top: 5.2rem;
    }
}

body::before {
    content: '';
    position: fixed;
    top: -30%;
    right: -15%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(187, 0, 14, 0.3) 0%, rgba(187, 0, 14, 0.15) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: -40%;
    left: -20%;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(123, 0, 0, 0.25) 0%, rgba(123, 0, 0, 0.12) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header & Navigation */
body > header {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 1000;
    transition: all 0.3s ease;
}

body > header.scrolled {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.navbar {
    padding: 0.9rem 1.15rem;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1320px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    padding: 0.5rem 0.95rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.28));
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body > header.scrolled .navbar .container {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.33), rgba(8, 8, 8, 0.28));
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.logo img {
    height: 50px;
    width: auto;
    filter: brightness(0);
    transition: filter 0.3s ease;
}

body > header.scrolled .logo img {
    filter: invert(17%) sepia(94%) saturate(5847%) hue-rotate(354deg) brightness(93%) contrast(114%);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.45rem;
    align-items: center;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: #1C1C1C;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    position: relative;
    transform: translateY(0);
}

.nav-links a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-red), var(--light-red));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(187, 0, 14, 0.22);
}

/* Dropdown menu */
.nav-links > li {
    position: relative;
}

.has-dropdown > a {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.submenu-toggle {
    background: none;
    border: none;
    color: var(--primary-red) !important;
    cursor: pointer;
    margin-left: 0.1rem;
    padding: 0.45rem 0.35rem;
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease;
}

.submenu-toggle * {
    color: var(--primary-red) !important;
}

.submenu-toggle:hover,
.has-dropdown.open > .submenu-toggle {
    background: rgba(187, 0, 14, 0.1);
    color: var(--primary-red);
}

.submenu-toggle:focus {
    outline: none;
}

.dropdown-arrow {
    font-size: 0.65rem;
    color: var(--primary-red) !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
}

.has-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    background: rgba(19, 19, 19, 0.96);
    border: 1px solid rgba(255,255,255,0.16);
    list-style: none;
    padding: 0.45rem;
    border-radius: 0.95rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top center;
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.26s ease;
    z-index: 1000;
    box-shadow: 0 18px 46px rgba(0,0,0,0.5);
}

/* small arrow pointer on top of dropdown */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: rgba(19, 19, 19, 0.96);
    border-left: 1px solid rgba(255,255,255,0.16);
    border-top: 1px solid rgba(255,255,255,0.16);
    transform: translateX(-50%) rotate(45deg);
}

.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    animation: dropdown-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 769px) {
    .has-dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .has-dropdown:hover > .submenu-toggle .dropdown-arrow {
        transform: rotate(180deg);
    }
}

@keyframes dropdown-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.85rem;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border-left: none;
    border-radius: 0.65rem;
}

.dropdown-menu a:hover {
    background: rgba(183,85,80,0.2);
    color: #ffffff !important;
    transform: translateX(3px);
}

body > header.scrolled .nav-links a {
    color: var(--primary-red);
}

body > header.scrolled .nav-links a:hover {
    color: #ffffff;
}

.language a {
    font-size: 0.9rem;
    color: #1C1C1C;
}

.language a.active {
    color: #1C1C1C;
    font-weight: 700;
}

body > header.scrolled .language a {
    color: var(--primary-red);
}

body > header.scrolled .language a.active {
    color: var(--primary-red);
    font-weight: 700;
}

/* Logo link: no underline, inline-flex */
.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Inner pages (non-homepage): solid dark background, red nav, white active */
body > header.header-inner {
    background: transparent;
}

body > header.header-inner .navbar .container {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.33), rgba(8, 8, 8, 0.28));
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body > header.header-inner.scrolled .navbar .container {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.33), rgba(8, 8, 8, 0.28));
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body > header.header-inner .logo img {
    filter: invert(17%) sepia(94%) saturate(5847%) hue-rotate(354deg) brightness(93%) contrast(114%);
}

body > header.header-inner .nav-links a {
    color: var(--primary-red);
}

body > header.header-inner .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.9), rgba(183, 85, 80, 0.92));
}

body > header.header-inner .nav-links a:hover {
    color: #ffffff;
}

body > header.header-inner .language a {
    color: var(--primary-red);
}

body > header.header-inner .language a.active {
    color: #ffffff;
    font-weight: 700;
}

body > header.header-inner.scrolled .nav-links a {
    color: var(--primary-red);
}

body > header.header-inner.scrolled .nav-links a.active {
    color: #ffffff;
}

/* Fixed top title strip for Angebote/Beiträge pages */
.angebote-top-fixed {
    position: fixed;
    top: 82px;
    left: max(1rem, calc((100vw - 1400px) / 2 + 2rem));
    z-index: 985;
    min-width: 176px;
    background: linear-gradient(90deg, rgba(14, 14, 14, 0.96), rgba(10, 10, 10, 0.9));
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    padding: 0.62rem 1.25rem;
}

.angebote-top-fixed span {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

body.is-angebote-pages main {
    padding-top: 8.9rem;
}

/* Ensure content starts below fixed menu on pages without hero */
body > header.header-inner + main {
    padding-top: 6.6rem;
}

/* Homepage section titles come from custom template headings, so hide default CE plugin headers */
#news-section .frame-type-news_pi1 > header,
#veranstaltungen-section .frame-type-news_pi1 > header,
section.angebote .frame-type-news_pi1 > header {
    display: none;
}

@media (max-width: 768px) {
    .angebote-top-fixed {
        top: 74px;
        left: 0;
        min-width: 146px;
        padding: 0.5rem 1rem;
    }

    .angebote-top-fixed span {
        font-size: 1.55rem;
    }

    body.is-angebote-pages main {
        padding-top: 7.6rem;
    }

    header.header-inner + main {
        padding-top: 5.8rem;
    }
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.7rem;
    padding: 0.45rem;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #1C1C1C !important;
    padding: 0.42rem 0.76rem;
    font-size: 0.83rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary-red);
    outline-offset: 2px;
}

.theme-toggle-icon,
.theme-toggle-text {
    color: inherit !important;
}

.theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 0;
    color: var(--primary-red) !important;
}

.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-icon svg.icon-moon {
    stroke: none;
    fill: currentColor;
}

body.light-mode .theme-toggle-icon {
    color: var(--primary-red) !important;
}

body > header.scrolled .theme-toggle,
body > header.header-inner .theme-toggle {
    border-color: rgba(187, 0, 14, 0.5);
    background: rgba(255, 255, 255, 0.9);
    color: #1C1C1C !important;
}

body > header.scrolled .theme-toggle .theme-toggle-text,
body > header.header-inner .theme-toggle .theme-toggle-text {
    color: #1C1C1C !important;
}

body > header.scrolled .theme-toggle .theme-toggle-icon,
body > header.header-inner .theme-toggle .theme-toggle-icon {
    color: var(--primary-red) !important;
}

.menu-toggle span {
    width: 28px;
    height: 3px;
    background: var(--light-gray);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nav-links a,
    .submenu-toggle,
    .dropdown-arrow,
    .dropdown-menu,
    .menu-toggle span {
        transition: none !important;
        animation: none !important;
    }
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Hero + Angebote shared background wrapper */
.hero-wrapper {
    background-image: url('/fileadmin/site-assets/heroLanding.jpg'), url('../Images/heroLanding.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    position: relative;
}

/* Hero Section */
.hero {
    margin-top: 0;
    min-height: 100vh;
    background: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 15vh;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.55) 100%);
}

/* Angebote & Beratung Section */
.angebote {
    background: none;
    position: relative;
    padding: 2.5rem 2rem 3rem;
    z-index: 1;
}

.angebote-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(8, 8, 8, 0.7));
    z-index: 0;
}

.angebote .container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.angebote-title {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Homepage only: Angebote & Beratung headline */
.is-home .angebote > .container > .angebote-title {
    color: #ffffff;
}

.angebote-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.angebote-card {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 1.4rem 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 130px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.angebote-card:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-5px);
}

.angebote-card-title {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.angebote-card-compact {
    min-height: 120px;
}

.angebote-card-compact .angebote-icon {
    justify-content: flex-start;
}

.angebote-card-teaser {
    color: #d9d9d9;
    font-size: 0.8rem;
    line-height: 1.45;
    margin: -0.35rem 0 0.9rem;
}

.angebote-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: auto;
}

.angebote-readmore-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

.angebote-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
}

.angebote-icon img {
    width: 44px;
    height: 44px;
}

@media (max-width: 1024px) {
    .angebote-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .angebote-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 2rem;
    padding-left: max(2.1rem, calc((100vw - 1320px) / 2 + 2.1rem));
    text-align: left;
}

.hero-title {
    font-size: clamp(3rem, 5.6vw, 5rem);
    font-weight: 900;
    color: var(--primary-red);
    margin-bottom: 0.35rem;
    letter-spacing: 1px;
    line-height: 1;
}

.hero-content h1 {
    font-size: clamp(3rem, 5.6vw, 5rem);
    font-weight: 900;
    color: var(--primary-red);
    margin-bottom: 0.35rem;
    letter-spacing: 1px;
    line-height: 1;
}

.hero-content h2 {
    font-size: clamp(2.2rem, 4.9vw, 4.4rem);
    font-weight: 900;
    color: #171A22;
    margin-bottom: 1.1rem;
    line-height: 1.03;
    letter-spacing: 0.4px;
}

.hero-content p {
    font-size: 1.08rem;
    line-height: 1.45;
    margin-bottom: 2rem;
    color: #1C1C1C;
    max-width: 880px;
    font-weight: 600;
}

/* Style all links in hero content as the CTA button (backend-generated links have no class) */
.hero-content a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.82), rgba(183, 85, 80, 0.74));
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0.72rem;
    border: 1px solid rgba(220, 96, 96, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(187, 0, 14, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    margin-top: 0.5rem;
}

.hero-content a:hover {
    background: linear-gradient(135deg, rgba(198, 12, 26, 0.90), rgba(192, 78, 78, 0.82));
    border-color: rgba(232, 120, 120, 0.86);
    box-shadow: 0 10px 26px rgba(187, 0, 14, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    color: #fff !important;
}

.hero-subtitle {
    font-size: clamp(2.2rem, 4.9vw, 4.4rem);
    font-weight: 900;
    color: #171A22;
    margin-bottom: 1.1rem;
    line-height: 1.03;
    letter-spacing: 0.4px;
}

.hero-description {
    font-size: 1.08rem;
    line-height: 1.45;
    margin-bottom: 2rem;
    color: #1C1C1C;
    max-width: 880px;
    font-weight: 600;
}

.hero-star {
    position: absolute;
    right: max(2.1rem, calc((100vw - 1320px) / 2 + 2.1rem));
    top: 22%;
    z-index: 2;
    opacity: 0.9;
}

.hero-star img {
    width: 220px;
    height: auto;
    animation: float 6s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1), filter 0.45s ease, opacity 0.3s ease;
    cursor: pointer;
}

.hero-star img:hover {
    animation-play-state: paused;
    transform: scale(1.15) rotate(12deg);
    filter: drop-shadow(0 0 25px rgba(200, 16, 46, 0.5));
}

/* Unified section heading style (everything except hero) */
.angebote-title,
.news-carousel-heading,
.veranstaltungen-heading,
.burozeiten-title,
.social-text h2,
.feedback-text h2,
.news-list-heading,
.veranstaltungen-list-heading,
.about .section-title,
.events .section-title,
.social-media .section-title,
.feedback .section-title,
.content-main .section-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Consistent subtitle/body intro sizing */
.burozeiten-subtitle,
.veranstaltungen-subtitle,
.social-text p,
.feedback-text p {
    font-size: 1rem;
    line-height: 1.6;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ── Unified Glass Button System ── */
.btn-primary,
.btn-secondary,
.btn-social,
.news-readmore-btn,
.veranst-btn,
.social-media a.btn-social,
.feedback a.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, rgba(130, 34, 34, 0.62), rgba(90, 18, 18, 0.74));
    color: #fff !important;
    text-decoration: none;
    font-weight: 800;
    border-radius: 0.92rem;
    border: 1px solid rgba(218, 86, 86, 0.52);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px rgba(120, 14, 14, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.hero .btn-primary {
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.82), rgba(183, 85, 80, 0.74));
    border-color: rgba(220, 96, 96, 0.72);
    box-shadow: 0 8px 22px rgba(187, 0, 14, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero .btn-primary:hover {
    background: linear-gradient(135deg, rgba(198, 12, 26, 0.90), rgba(192, 78, 78, 0.82));
    border-color: rgba(232, 120, 120, 0.86);
    box-shadow: 0 10px 26px rgba(187, 0, 14, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary {
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
}

.btn-secondary {
    padding: 0.6rem 1.5rem;
    font-size: 0.92rem;
}

.btn-social {
    padding: 0.72rem 1.75rem;
    font-size: 1.02rem;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-social:hover,
.social-media a.btn-social:hover,
.feedback a.btn-social:hover {
    background: linear-gradient(180deg, rgba(160, 44, 44, 0.74), rgba(112, 24, 24, 0.82));
    border-color: rgba(230, 110, 110, 0.78);
    box-shadow: 0 10px 22px rgba(187, 0, 14, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
    color: #fff !important;
}

.social-text > a,
.feedback-text > a,
.wer-text > a,
.social-text p a,
.feedback-text p a,
.wer-text p a,
.social-text p + a,
.feedback-text p + a,
.wer-text p + a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.76rem 1.95rem;
    min-height: 46px;
    border-radius: 0.92rem;
    border: 1px solid rgba(225, 98, 98, 0.62);
    background: linear-gradient(180deg, rgba(128, 32, 32, 0.7), rgba(82, 16, 16, 0.82));
    box-shadow: 0 10px 24px rgba(120, 14, 14, 0.38), 0 0 0 1px rgba(230, 112, 112, 0.1) inset;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.01rem;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    max-width: none;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.social-text > a:hover,
.feedback-text > a:hover,
.wer-text > a:hover,
.social-text p a:hover,
.feedback-text p a:hover,
.wer-text p a:hover,
.social-text p + a:hover,
.feedback-text p + a:hover,
.wer-text p + a:hover {
    background: linear-gradient(180deg, rgba(154, 42, 42, 0.82), rgba(104, 20, 20, 0.9));
    border-color: rgba(238, 126, 126, 0.85);
    box-shadow: 0 12px 26px rgba(187, 0, 14, 0.42), 0 0 18px rgba(187, 0, 14, 0.28);
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Keep button label text white even when backend RTE wraps it in nested tags */
.btn-primary,
.btn-primary *,
.btn-secondary,
.btn-secondary *,
.btn-social,
.btn-social *,
.news-readmore-btn,
.news-readmore-btn *,
.veranst-btn,
.veranst-btn *,
.angebote-readmore-btn,
.angebote-readmore-btn *,
.footer-legal-btn,
.footer-legal-btn * {
    color: #ffffff !important;
}

/* Services Section */
.services {
    padding: 5rem 2rem;
    background: transparent;
    position: relative;
    z-index: 1;
}

.services .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
    margin: 0 auto;
    max-width: 1400px;
}

/* Customizable Sections - Generic Container Styling */
.hero-customizable,
.about,
.events,
.social-media,
.feedback,
.content-main {
    padding: 5rem 2rem;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* More vertical separation between homepage sections after hero/angebote */
main > section + section {
    margin-top: 2rem;
}

.hero-customizable .container,
.about .container,
.events .container,
.social-media .container,
.feedback .container,
.content-main .container {
    margin: 0 auto;
    max-width: 1400px;
}

.hero-customizable .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
}

.about .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
}

.events .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
}

.social-media .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 2rem 2.5rem;
}

.feedback .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 2rem 2.5rem;
}

.content-main .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 2.5rem;
}

/* Content Element Styling for Customizable Sections */
.hero-customizable h1,
.hero-customizable h2,
.hero-customizable h3,
.about h1,
.about h2,
.about h3,
.events h1,
.events h2,
.events h3,
.social-media h1,
.social-media h2,
.social-media h3,
.feedback h1,
.feedback h2,
.feedback h3,
.content-main h1,
.content-main h2,
.content-main h3 {
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.hero-customizable p,
.about p,
.events p,
.social-media p,
.feedback p,
.content-main p {
    color: #e4e4e4;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.hero-customizable a,
.about a,
.events a,
.social-media a,
.feedback a,
.content-main a {
    color: var(--primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-customizable a:hover,
.about a:hover,
.events a:hover,
.social-media a:hover,
.feedback a:hover,
.content-main a:hover {
    color: var(--light-red);
    text-decoration: underline;
}

/* Content element container styling */
.ce-textpic,
.ce-text,
.ce-image,
.ce-header {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 3rem;
    color: white;
    font-weight: 700;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.service-card {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.service-card:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-5px);
}

.service-icon {
    margin-bottom: 1.5rem;
}

.service-icon img {
    width: 60px;
    height: 60px;
    filter: brightness(0) invert(1);
}

.service-card h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Angebote/Beiträge pages: editable rows with homepage icons */
.services-angebote-list .container {
    padding: 2rem 2rem 2.4rem;
}

.services-angebote-list .angebote-list-top-title {
    margin: 0 0 1.2rem;
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
}

.services-angebote-list .container > .frame:not(.frame-type-news_pi1),
.services-angebote-list .container > .ce-text,
.services-angebote-list .container > .ce-textpic {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: start;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.services-angebote-list .container > .frame:not(.frame-type-news_pi1):hover,
.services-angebote-list .container > .ce-text:hover,
.services-angebote-list .container > .ce-textpic:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-3px);
}

/* Keep the news plugin full width on Angebote list page. */
.services-angebote-list .container > .frame.frame-type-news_pi1 {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.services-angebote-list .container > .frame.frame-type-news_pi1:hover {
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* The page already has its own Angebote title. Hide news-specific list header/filter here. */
.services-angebote-list .news-list-page-header {
    display: none;
}

.services-angebote-list .container > .angebote-intro-row {
    display: block;
    padding: 0.75rem 0.2rem 0.35rem;
    margin-bottom: 0.5rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.services-angebote-list .container > .angebote-intro-row > header h1,
.services-angebote-list .container > .angebote-intro-row > header h2,
.services-angebote-list .container > .angebote-intro-row > header h3 {
    font-size: 2.05rem;
    line-height: 1.15;
}

.services-angebote-list .container > .angebote-intro-row p {
    max-width: 980px;
    color: #e3e3e3;
}

.services-angebote-list .angebote-row-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}

.services-angebote-list .angebote-row-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: none;
}

.services-angebote-list .frame > header,
.services-angebote-list .ce-text > header,
.services-angebote-list .ce-textpic > header {
    margin-bottom: 0.25rem;
}

.services-angebote-list .angebote-row-content {
    min-width: 0;
}

.services-angebote-list .ce-bodytext {
    float: none !important;
    width: auto !important;
    max-width: none !important;
}

.services-angebote-list .ce-bodytext p {
    width: 100%;
    max-width: none;
    white-space: normal;
    word-break: normal;
}

.services-angebote-list .ce-gallery,
.services-angebote-list figure.image {
    display: none;
}

.services-angebote-list .angebote-row-content > header h1,
.services-angebote-list .angebote-row-content > header h2,
.services-angebote-list .angebote-row-content > header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.services-angebote-list .angebote-row-content p {
    color: #efefef;
    margin: 0.25rem 0;
    line-height: 1.45;
}

.services-angebote-list .angebote-row-content a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, rgba(184, 68, 68, 0.35), rgba(140, 30, 30, 0.28));
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.55rem 1.3rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(208, 70, 67, 0.45);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.services-angebote-list .angebote-row-content a:hover {
    background: linear-gradient(135deg, rgba(204, 79, 79, 0.55), rgba(170, 40, 40, 0.45));
    border-color: rgba(220, 90, 90, 0.7);
    box-shadow: 0 6px 18px rgba(187, 0, 14, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .services-angebote-list .container > .frame,
    .services-angebote-list .container > .ce-text,
    .services-angebote-list .container > .ce-textpic {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .services-angebote-list .angebote-row-content > header h1,
    .services-angebote-list .angebote-row-content > header h2,
    .services-angebote-list .angebote-row-content > header h3 {
        font-size: 1rem;
    }

    .services-angebote-list .angebote-row-icon {
        width: 44px;
        height: 44px;
    }

    .services-angebote-list .angebote-row-icon img {
        width: 36px;
        height: 36px;
    }
}

/* Office Hours / Bürozeiten Section */
.office-hours {
    padding: 3.5rem 2rem 4.5rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.office-hours .container {
    background: transparent;
    padding: 0 2.2rem;
    margin: 0 auto;
    max-width: 1180px;
}

.burozeiten-title {
    color: #ffffff;
    font-size: 2.65rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

.burozeiten-title::before {
    content: "→ ";
}

.burozeiten-subtitle {
    color: #f2f2f2;
    font-size: 1rem;
    margin-bottom: 1.6rem;
    opacity: 0.95;
    font-weight: 600;
}

/* Also style the frame-type-table header (set in "Header" field of content element) */
.office-hours .frame-type-table .ce-headline h2,
.office-hours .frame-type-table .ce-headline h3,
.office-hours .frame-default > header > h2,
.office-hours .frame-default > header > h3 {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.burozeiten-content {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    background: transparent;
    border: 0;
    padding: 0;
}

/* Style TYPO3 table frame as glass panel */
.burozeiten-content .frame-type-table,
.office-hours .frame-type-table {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.72), rgba(8, 8, 8, 0.62));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 1.1rem 1.4rem 1.5rem;
}

/* Generic frame defaults inside Bürozeiten */
.burozeiten-content .frame-default {
    background: transparent;
}

/* Sub-section heading */
.burozeiten-content h3,
.burozeiten-content h4,
.burozeiten-content .ce-headline,
.burozeiten-content .table-caption,
.office-hours h3,
.office-hours h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    padding-left: 0.2rem;
}

/* Remove wrapper padding so table fills cleanly */
.burozeiten-content .ce-table,
.office-hours .ce-table,
.content-main .ce-table {
    border: none;
    padding: 0;
    background: transparent;
}

/* ===== TABLE STYLES — Bürozeiten / Office Hours ===== */
/* Handles TYPO3 table CE with "Table header position: Top" (renders <thead><th>)
   Set in: Content Element → Appearance tab → Table header position = Top        */

.burozeiten-content table.ce-table,
.office-hours table.ce-table,
.content-main table.ce-table {
    width: 100%;
    border-collapse: collapse;
    background: linear-gradient(180deg, rgba(14, 14, 14, 0.72), rgba(8, 8, 8, 0.6)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- HEADER ROW: rendered as <thead><th> when "Table header position: Top" --- */
.burozeiten-content table.ce-table thead tr th,
.office-hours table.ce-table thead tr th,
.content-main table.ce-table thead tr th {
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.46), rgba(140, 30, 30, 0.36)) !important;
    color: #ffffff !important;
    padding: 0.85rem 1.1rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.burozeiten-content table.ce-table thead tr th:first-child,
.office-hours table.ce-table thead tr th:first-child,
.content-main table.ce-table thead tr th:first-child {
    text-align: left;
    width: 23%;
}

/* Fallback: when TYPO3 is set to "No header", style first tbody row as header */
.burozeiten-content table.ce-table tbody tr:first-child td,
.office-hours table.ce-table tbody tr:first-child td,
.content-main table.ce-table tbody tr:first-child td {
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.46), rgba(140, 30, 30, 0.36)) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* --- BODY ROWS --- */
.burozeiten-content table.ce-table tbody tr td,
.office-hours table.ce-table tbody tr td,
.content-main table.ce-table tbody tr td {
    padding: 1.15rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e1e1e1 !important;
    font-size: 0.95rem;
    text-align: center;
    background: rgba(18, 18, 18, 0.66) !important;
}

/* First column = row label */
.burozeiten-content table.ce-table tbody tr td:first-child,
.office-hours table.ce-table tbody tr td:first-child,
.content-main table.ce-table tbody tr td:first-child {
    color: #ffffff !important;
    text-align: left;
    font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Alternating rows */
.burozeiten-content table.ce-table tbody tr:nth-child(even) td,
.office-hours table.ce-table tbody tr:nth-child(even) td,
.content-main table.ce-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.05) !important;
}

.burozeiten-content table.ce-table tbody tr:nth-child(even) td:first-child,
.office-hours table.ce-table tbody tr:nth-child(even) td:first-child,
.content-main table.ce-table tbody tr:nth-child(even) td:first-child {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Hover */
.burozeiten-content table.ce-table tbody tr:hover td,
.office-hours table.ce-table tbody tr:hover td,
.content-main table.ce-table tbody tr:hover td {
    background: rgba(208, 70, 67, 0.16) !important;
}

.burozeiten-content table.ce-table tbody tr:hover td:first-child,
.office-hours table.ce-table tbody tr:hover td:first-child,
.content-main table.ce-table tbody tr:hover td:first-child {
    background: rgba(208, 70, 67, 0.16) !important;
}

/* Kill TYPO3's built-in striped Bootstrap overrides */
.burozeiten-content table.ce-table-striped > tbody > tr > td,
.office-hours table.ce-table-striped > tbody > tr > td,
.content-main table.ce-table-striped > tbody > tr > td,
.burozeiten-content table.ce-table-striped > tbody > tr > th,
.office-hours table.ce-table-striped > tbody > tr > th,
.content-main table.ce-table-striped > tbody > tr > th {
    background: inherit;
}

/* Header CE above table (set via "Header" field in content element) */
.office-hours .frame-type-table > header,
.burozeiten-content .frame-type-table > header,
.content-main .frame-type-table > header {
    margin-bottom: 0.75rem;
}

/* Mobile table/calendar usability: horizontal swipe instead of clipping */
@media (max-width: 768px) {
    .burozeiten-content .frame-type-table,
    .office-hours .frame-type-table,
    .content-main .frame-type-table {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(187, 0, 14, 0.8) rgba(255, 255, 255, 0.12);
    }

    .burozeiten-content .frame-type-table::after,
    .office-hours .frame-type-table::after,
    .content-main .frame-type-table::after {
        content: "↔ Wischen, um alles zu sehen";
        position: absolute;
        right: 0.6rem;
        bottom: 0.45rem;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.65);
        background: rgba(0, 0, 0, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        padding: 0.18rem 0.55rem;
        pointer-events: none;
        z-index: 2;
    }

    .burozeiten-content .ce-table,
    .office-hours .ce-table,
    .content-main .ce-table {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .burozeiten-content table.ce-table,
    .office-hours table.ce-table,
    .content-main table.ce-table {
        width: max-content;
        min-width: 640px;
    }

    /* Fallback for TYPO3/Bootstrap markup variants that may not include .ce-table class */
    .burozeiten-content .frame-type-table table,
    .office-hours .frame-type-table table,
    .content-main .frame-type-table table {
        width: max-content;
        min-width: 640px;
    }

    .burozeiten-content .frame-type-table::-webkit-scrollbar,
    .office-hours .frame-type-table::-webkit-scrollbar,
    .content-main .frame-type-table::-webkit-scrollbar {
        height: 8px;
    }

    .burozeiten-content .frame-type-table::-webkit-scrollbar-track,
    .office-hours .frame-type-table::-webkit-scrollbar-track,
    .content-main .frame-type-table::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 999px;
    }

    .burozeiten-content .frame-type-table::-webkit-scrollbar-thumb,
    .office-hours .frame-type-table::-webkit-scrollbar-thumb,
    .content-main .frame-type-table::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, rgba(187, 0, 14, 0.95), rgba(183, 85, 80, 0.9));
        border-radius: 999px;
    }
}

.office-hours .frame-type-table > header h1,
.office-hours .frame-type-table > header h2,
.office-hours .frame-type-table > header h3,
.office-hours .frame-type-table > header h4,
.burozeiten-content .frame-type-table > header h1,
.burozeiten-content .frame-type-table > header h2,
.burozeiten-content .frame-type-table > header h3,
.burozeiten-content .frame-type-table > header h4,
.content-main .frame-type-table > header h1,
.content-main .frame-type-table > header h2,
.content-main .frame-type-table > header h3,
.content-main .frame-type-table > header h4 {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Legacy schedule classes */
.schedule-wrapper h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table th {
    background: #000;
    color: #fff;
    padding: 1rem 1.2rem;
    font-weight: 500;
}

.schedule-table td {
    padding: 0.85rem 1.2rem;
    border: 1px solid #2e2e2e;
}

/* =============================================
   News Section – Carousel (matches reference)
   ============================================= */
#news-section {
    padding: 3rem 0 3.5rem;
    background: transparent;
    color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Remove default TYPO3 frame/container padding */
#news-section > .container {
    background: transparent;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

#news-section .frame-type-news_pi1 {
    background: transparent;
}

/* Hide the plugin CE header ("news" h1) that comes from the content element header field */
#news-section .frame > header {
    display: none;
}

/* "→ News" heading – rendered by our custom partial inside .news-list-view */
#news-section .news-section-heading,
#news-section .news-list-view::before {
    display: none; /* handled via .news-list-view wrapper title below */
}

/* We inject the heading via JS – keep it clean */
.news-carousel-heading {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 1.6rem 2.5rem;
    letter-spacing: -0.01em;
}

.news-carousel-heading::before {
    content: "→ ";
    font-weight: 800;
}

/* Carousel wrapper */
.news-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 0 0 2.5rem;
}

.news-carousel {
    display: flex;
    gap: 1.6rem;
    transition: transform 0.48s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* Individual card – frosted glass treatment */
.article {
    flex: 0 0 430px;
    min-width: 0;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 1.8rem 1.75rem 1.65rem;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.article:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-5px);
}

/* Title inside card */
.article .news-card-header {
    margin-bottom: 0.75rem;
}

.article .news-card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: #fff;
}

.article .news-card-header h3 a {
    color: #fff;
    text-decoration: none;
}

.article .news-card-header h3 a:hover {
    color: #e8e8e8;
}

/* Body text */
.article .news-card-body {
    flex-grow: 1;
    margin-bottom: 1.3rem;
}

.article .news-card-body p {
    font-size: 0.945rem;
    line-height: 1.6;
    color: #c8c8c8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Weiter lesen" button */
.article .news-card-footer {
    margin-top: auto;
}

.article .news-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, rgba(184, 68, 68, 0.35), rgba(140, 30, 30, 0.28));
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.55rem 1.3rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(208, 70, 67, 0.45);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.article .news-readmore-btn:hover {
    background: linear-gradient(135deg, rgba(204, 79, 79, 0.55), rgba(170, 40, 40, 0.45));
    border-color: rgba(220, 90, 90, 0.7);
    box-shadow: 0 6px 18px rgba(187, 0, 14, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

/* Dots */
.news-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
}

.news-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.news-carousel-dot.active {
    background: rgba(255,255,255,0.92);
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 1200px) {
    .article { flex: 0 0 390px; }
    .news-carousel-heading { margin-left: 1.5rem; }
    .news-carousel-wrapper { padding-left: 1.5rem; }
}

@media (max-width: 900px) {
    .article { flex: 0 0 320px; }
}

@media (max-width: 640px) {
    .article { flex: 0 0 88vw; }
}

/* =============================================
   News Detail Page
   ============================================= */
.news-detail-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    color: #fff;
}

.news-detail-back {
    margin-bottom: 2.2rem;
}

.news-detail-back-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.news-detail-back-link:hover {
    color: #e8e8e8;
}

.news-detail-category {
    color: var(--primary-red);
    font-style: italic;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.news-detail-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}

.news-detail-date {
    color: var(--primary-red);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 2.2rem;
}

.news-detail-image-wrap {
    margin: 0 0 2rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.news-detail-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.news-detail-teaser {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.news-detail-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 2.5rem;
}

.news-detail-body p {
    margin-bottom: 1.2rem;
    color: #e0e0e0;
}

.news-detail-body h2,
.news-detail-body h3,
.news-detail-body h4 {
    color: #fff;
    font-weight: 700;
    margin: 1.8rem 0 0.8rem;
}

.news-detail-body a {
    color: var(--primary-red);
    text-decoration: none;
}

.news-detail-body a:hover {
    text-decoration: underline;
}

.news-detail-author {
    color: var(--primary-red);
    font-style: italic;
    font-size: 1rem;
    margin-top: 1rem;
}

/* Hide the default CE header on detail page */
#main-content .frame > header {
    display: none;
}

/* =============================================
   News List Page
   ============================================= */

.news-list-page-wrap {
    padding: 2rem 0 2.5rem;
    min-height: 60vh;
}

/* Header row: → News left, dropdown right */
.news-list-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8rem;
}

.news-list-heading {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Category dropdown */
.news-category-filter {
    position: relative;
}

.news-category-select {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, rgba(184, 68, 68, 0.35), rgba(140, 30, 30, 0.28));
    border: 1px solid rgba(208, 70, 67, 0.45);
    border-radius: 0.72rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 2.25rem 0.55rem 0.95rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    min-width: 165px;
}

.news-category-select:focus,
.news-category-select:hover {
    outline: none;
    background: linear-gradient(135deg, rgba(204, 79, 79, 0.55), rgba(170, 40, 40, 0.45));
    border-color: rgba(220, 90, 90, 0.7);
    box-shadow: 0 6px 18px rgba(187, 0, 14, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Override carousel flex for list page */
.news-list-page-wrap .news-list-view {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0;
}

/* Full-width card in list page */
.news-list-page-wrap .article {
    flex: none !important;
    min-width: unset !important;
    width: 100%;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 1.5rem 1.8rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transform: none !important;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.news-list-page-wrap .article:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
}

/* Card header: bold title left, category right */
.news-list-page-wrap .news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0;
}

.news-list-page-wrap .news-card-header h3 {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.news-list-page-wrap .news-card-header h3 a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.news-list-page-wrap .news-card-header h3 a:hover {
    color: var(--primary-red);
}

/* Category badge (right of title) */
.news-card-category {
    font-size: 0.78rem;
    color: #888;
    white-space: nowrap;
    padding-top: 0.25rem;
    flex-shrink: 0;
}

/* Body text */
.news-list-page-wrap .news-card-body {
    margin-bottom: 0;
}

.news-list-page-wrap .news-card-body p {
    color: #999;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    -webkit-line-clamp: 3;
}

/* Footer: date left, button right */
.news-list-page-wrap .news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3rem;
}

.news-list-page-wrap .news-card-right {
    display: none;
}

/* Red date */
.news-card-date {
    color: var(--primary-red);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Empty state */
.news-list-empty {
    color: #888;
    text-align: center;
    padding: 4rem 0;
    font-size: 1rem;
}

/* Pagination */
.news-list-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.news-list-pagination .f3-widget-paginator {
    display: flex;
    list-style: none;
    gap: 0.3rem;
    padding: 0;
    margin: 0;
    align-items: center;
}

.news-list-pagination .f3-widget-paginator li a {
    color: #aaa;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: color 0.2s, background 0.2s;
    display: block;
}

.news-list-pagination .f3-widget-paginator li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.news-list-pagination .f3-widget-paginator li.current {
    color: var(--primary-red);
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.news-list-pagination .f3-widget-paginator li.previous a::before {
    content: "< ";
}

.news-list-pagination .f3-widget-paginator li.next a::after {
    content: " >";
}

/* Keep heading visible inside homepage carousel, hide only category filter */
#news-section .news-list-page-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.1rem;
}

#news-section .news-list-page-header .news-category-filter {
    display: none;
}

/* Reset list-page-wrap on homepage so carousel layout is unchanged */
#news-section .news-list-page-wrap {
    padding: 0;
    min-height: unset;
}

/* In carousel context: Veranstaltungen-like layout for news cards */
#news-section .news-list-page-wrap .article {
    flex: 0 0 560px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 1.15rem 1.2rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: none;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#news-section .news-list-page-wrap .article:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-4px);
}

/* Left content column */
#news-section .news-list-page-wrap .news-card-left {
    flex: 1 1 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Footer stacks date and button like Veranstaltungen */
#news-section .news-list-page-wrap .news-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: auto;
}

/* Date style */
#news-section .news-card-date {
    color: #b84444;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Header in carousel card */
#news-section .news-list-page-wrap .news-card-header {
    display: block;
    margin-bottom: 0.65rem;
}

#news-section .news-list-page-wrap .news-card-body {
    margin-bottom: 1rem;
}

#news-section .news-list-page-wrap .news-card-body p {
    -webkit-line-clamp: 3;
}

/* Right image column (only rendered if image exists) */
#news-section .news-card-right {
    display: block;
    flex: 0 0 200px;
    overflow: hidden;
    position: relative;
}

#news-section .news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

#news-section .news-list-page-wrap .article:hover .news-card-img {
    transform: scale(1.04);
}

/* Carousel footer: button left-aligned */
#news-section .news-card-footer {
    justify-content: flex-start;
    margin-top: auto;
}

@media (max-width: 640px) {
    .news-detail-title { font-size: 1.6rem; }
    .news-detail-wrap { padding: 1.5rem 1.2rem 3rem; }

    .news-carousel-heading { font-size: 1.7rem; margin-left: 1rem; }
    .news-carousel-wrapper { padding-left: 1rem; }

    #news-section .news-list-page-wrap .article {
        flex: 0 0 88vw !important;
        flex-direction: column;
    }

    #news-section .news-card-right {
        flex: 0 0 160px;
        height: 160px;
    }
}

/* Events Section */
.events {
    padding: 5rem 2rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.events .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
    margin: 0 auto;
    max-width: 1400px;
}

.events .section-title {
    color: white;
}

.events .subtitle {
    max-width: 900px;
    margin-bottom: 3rem;
}

.events-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.event-card {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-5px);
}

.event-image {
    width: 100%;
    height: 200px;
    background: #ccc;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-info {
    padding: 1.5rem;
}

.event-info h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.event-date {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.slider-dots {
    text-align: center;
    padding: 1rem 0;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-red);
    transform: scale(1.2);
}

/* Social Media Section */
.social-media {
    padding: 2rem 2rem 1.5rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.social-media .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.9rem 2.2rem;
    margin: 0 auto;
    max-width: 1320px;
}

.social-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.8rem;
    align-items: center;
}

.social-text h2 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

.social-text p {
    margin-bottom: 1.15rem;
    opacity: 0.9;
    max-width: 620px;
}

.social-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-image img {
    width: 100%;
    max-width: 220px;
    height: auto;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1), filter 0.45s ease;
    cursor: pointer;
}

.social-image img:hover {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 18px rgba(200, 16, 46, 0.45));
}

.image-placeholder {
    border: 2px dashed rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.03);
    color: #b9b9b9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.social-image-placeholder {
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

/* Feedback Section */
.feedback {
    padding: 1.5rem 2rem 2.25rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.feedback .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.9rem 2.2rem;
    margin: 0 auto;
    max-width: 1320px;
}

.feedback-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.8rem;
    align-items: center;
}

.feedback-text h2 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

.feedback-text p {
    margin-bottom: 1.15rem;
    opacity: 0.9;
    max-width: 620px;
}

.feedback-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1), filter 0.45s ease;
    cursor: pointer;
}

.feedback-image img:hover {
    transform: scale(1.12) rotate(-3deg);
    filter: drop-shadow(0 0 18px rgba(200, 16, 46, 0.45));
}

.feedback-image-placeholder {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
}

/* Contact page info cards */
.contact-info-section {
    padding: 1.2rem 2rem 0.8rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.contact-info-section-compact {
    padding-top: 0.7rem;
    margin-top: 0.9rem;
}

.contact-info-card {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.35rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 1.45rem 1.9rem;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.4rem;
    align-items: center;
}

.contact-info-left h3 {
    margin-bottom: 0.7rem;
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 800;
}

.contact-info-left .frame {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.contact-info-left .frame > header {
    margin-bottom: 0.5rem;
}

.contact-info-left .frame > header h1,
.contact-info-left .frame > header h2,
.contact-info-left .frame > header h3,
.contact-info-left .frame > header h4 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.7rem;
    line-height: 1.2;
    color: #fff;
}

.contact-info-left p {
    margin-bottom: 0.6rem;
    opacity: 0.92;
    max-width: 760px;
    font-size: 0.96rem;
    line-height: 1.45;
}

.contact-info-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-right img {
    width: 100%;
    max-width: 170px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(187, 0, 14, 0.25));
}

.contact-office-hours {
    padding: 0.7rem 2rem 0.8rem;
}

.contact-office-hours .container {
    max-width: 1320px;
    padding: 0 1.9rem;
}

/* Contact page feedback form block */
.contact-feedback-section {
    padding: 1.2rem 2rem 2.6rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.contact-feedback-card {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.9rem 2.2rem;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.8rem;
    align-items: center;
}

.contact-feedback-left h2 {
    margin-bottom: 1rem;
    line-height: 1.2;
    font-size: 2rem;
    font-weight: 800;
}

.contact-feedback-left p {
    margin-bottom: 1.1rem;
    opacity: 0.9;
    max-width: 760px;
    font-size: 1rem;
    line-height: 1.6;
}

.contact-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 760px;
}

.contact-feedback-form input,
.contact-feedback-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    color: #f2f2f2;
    padding: 0.8rem 0.9rem;
    font: inherit;
}

.contact-feedback-form input::placeholder,
.contact-feedback-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-feedback-form textarea {
    resize: vertical;
    min-height: 170px;
}

.contact-feedback-form .btn-social {
    width: fit-content;
    min-width: 132px;
    text-transform: uppercase;
}

.contact-form-status {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    min-height: 1.4rem;
    color: #d9d9d9;
}

.contact-form-status.is-success {
    color: #97e3a0;
}

.contact-form-status.is-error {
    color: #ff9e9e;
}

.contact-feedback-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-feedback-right img {
    width: 100%;
    max-width: 240px;
    height: auto;
}

@media (max-width: 1024px) {
    .contact-info-card {
        grid-template-columns: 1fr;
    }

    .contact-info-right {
        justify-content: flex-start;
    }

    .contact-feedback-card {
        grid-template-columns: 1fr;
    }

    .contact-feedback-right {
        justify-content: flex-start;
    }
}

/* ── Scroll-reveal animations ── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealScale {
    from { opacity: 0; transform: scale(0.75) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Initial hidden state */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
}

/* Subtle scroll tilt for photos/icons */
.scroll-tilt-target {
    --scroll-tilt-angle: 0deg;
    transition: rotate 0.22s ease-out, transform 0.22s ease-out;
    will-change: rotate;
}

@supports not (rotate: 1deg) {
    .scroll-tilt-target {
        transform: rotate(var(--scroll-tilt-angle));
    }
}

/* Global link color system (non-button links)
   :where() keeps specificity low so section-level white overrides can win */
main a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)),
main a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)):visited,
footer a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)),
footer a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)):visited {
    color: #B75550 !important;
    text-decoration: none;
}

main a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)):hover,
footer a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-social):not(.news-readmore-btn):not(.veranst-btn):not(.asta-icon-link):not(.nav-link):not(.submenu-toggle)):hover {
    color: #B75550 !important;
    text-decoration: none;
}

/* Keep button-like links white */
.hero-content a,
.social-text > a,
.feedback-text > a,
.wer-text > a,
.social-text p a,
.feedback-text p a,
.wer-text p a,
.social-text p + a,
.feedback-text p + a,
.wer-text p + a,
.sem-ticket-hero-left a.btn-primary,
.sem-ticket-hero-left a.sem-ticket-cta {
    color: #ffffff !important;
    text-decoration: none !important;
}

.hero-content a:hover,
.social-text > a:hover,
.feedback-text > a:hover,
.wer-text > a:hover,
.social-text p a:hover,
.feedback-text p a:hover,
.wer-text p a:hover,
.social-text p + a:hover,
.feedback-text p + a:hover,
.wer-text p + a:hover,
.sem-ticket-hero-left a.btn-primary:hover,
.sem-ticket-hero-left a.sem-ticket-cta:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
.scroll-reveal-icon {
    opacity: 0;
    transform: scale(0.75) translateY(30px);
}

/* When the observer adds .revealed */
.scroll-reveal.revealed {
    animation: revealUp 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
.scroll-reveal-icon.revealed {
    animation: revealScale 0.8s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}

/* ── Wer wir sind Section ── */
.wer-wir-sind {
    padding: 2rem 2rem 2.5rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.wer-wir-sind .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.9rem 2.2rem;
    margin: 0 auto;
    max-width: 1320px;
}

.wer-content {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 3rem;
    align-items: center;
}

.wer-text h2 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    color: white;
}

.wer-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: #e4e4e4;
    margin-bottom: 0.85rem;
    max-width: 700px;
}

.wer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wer-logo-badge {
    display: flex;
    align-items: stretch;
    background: #000;
    border: 2px solid rgba(255,255,255,0.15);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1), box-shadow 0.45s ease;
    cursor: pointer;
}

.wer-logo-badge:hover {
    transform: scale(1.06) rotate(-1deg);
    box-shadow: 0 0 30px rgba(200, 16, 46, 0.35);
}

.wer-logo-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem 1.5rem;
    background: #000;
}

.wer-logo-asta {
    font-size: 2.4rem;
    font-weight: 900;
    color: white;
    line-height: 1;
    letter-spacing: 1px;
}

.wer-logo-uni {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
}

.wer-logo-right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 1rem;
    min-width: 100px;
}

.wer-logo-right img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .wer-content {
        grid-template-columns: 1fr;
    }
    .wer-logo {
        justify-content: flex-start;
    }
    .wer-wir-sind .container {
        padding: 3rem 2.5rem;
    }
}

@media (max-width: 768px) {
    .wer-wir-sind .container {
        padding: 2rem 1.5rem;
    }
}

/* About Section */
.about {
    padding: 5rem 2rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.about .container {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
    margin: 0 auto;
    max-width: 1400px;
}

.about .section-title {
    color: white;
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.about-logo {
    text-align: center;
}

.about-logo img {
    width: 100%;
    max-width: 350px;
    height: auto;
}

/* Footer */
footer {
    background: transparent;
    color: white;
    padding: 3rem 2rem 2rem;
    position: relative;
    z-index: 1;
}

footer .container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.2rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
}

.footer-content .frame {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.footer-content .frame > header {
    margin-bottom: 1rem;
}

.footer-content .frame > header h1,
.footer-content .frame > header h2,
.footer-content .frame > header h3,
.footer-content .frame > header h4,
.footer-content > h1,
.footer-content > h2,
.footer-content > h3,
.footer-content > h4 {
    font-size: 1.95rem;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.2rem;
}

.footer-content,
.footer-content p,
.footer-content li,
.footer-bottom,
.footer-bottom p,
.footer-bottom li {
    color: #e9e9e9;
}

.footer-content a,
.footer-bottom a {
    color: #d4807b !important;
    text-decoration: none;
}

.footer-content a:hover,
.footer-bottom a:hover {
    color: #f0a6a1 !important;
    text-decoration: underline;
}

.footer-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: white;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
}

.footer-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-icon {
    width: 18px;
    height: 18px;
    color: #B75550;
    flex-shrink: 0;
}

.footer-item a {
    color: #B75550;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.footer-item a:hover {
    color: #d4807b;
    opacity: 0.85;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
}

.footer-bottom .frame {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal-btn {
    display: inline-block;
    padding: 0.55rem 1.6rem;
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-bottom a:not(.footer-item a):not(.copyright a) {
    display: inline-block;
    padding: 0.55rem 1.6rem;
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.8rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-bottom a:not(.footer-item a):not(.copyright a):hover {
    background: rgba(70, 70, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
    color: white !important;
    text-decoration: none;
}

.footer-legal-btn:hover {
    background: rgba(70, 70, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
    color: white !important;
}

.copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .social-content,
    .feedback-content,
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .hero-star {
        right: 5%;
        top: 20%;
    }
    
    .hero-star img {
        width: 260px;
    }
}

@media (max-width: 768px) {
    .theme-toggle {
        padding: 0.45rem;
        min-width: 2.3rem;
        justify-content: center;
        border-radius: 0.7rem;
    }

    .theme-toggle-text {
        display: none;
    }

    header.scrolled .theme-toggle {
        border-color: rgba(187, 0, 14, 0.65);
        background: rgba(187, 0, 14, 0.12);
        box-shadow: 0 0 0 1px rgba(187, 0, 14, 0.15) inset;
    }

    .menu-toggle {
        display: flex;
        z-index: 1201;
    }

    header.scrolled .menu-toggle {
        border-color: rgba(187, 0, 14, 0.65);
        background: rgba(187, 0, 14, 0.12);
        box-shadow: 0 0 0 1px rgba(187, 0, 14, 0.15) inset;
    }

    header.scrolled .menu-toggle span {
        background: var(--primary-red);
    }
    
    body.nav-open {
        overflow: hidden;
    }

    .navbar .container {
        border-radius: 1rem;
        padding: 0.6rem 0.8rem;
    }

    .nav-links {
        position: fixed;
        top: 82px;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.55rem;
        border-radius: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.28s ease;
    }
    
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-links > li {
        width: 100%;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .nav-links.active > li {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-links.active > li:nth-child(1) { transition-delay: 0.03s; }
    .nav-links.active > li:nth-child(2) { transition-delay: 0.06s; }
    .nav-links.active > li:nth-child(3) { transition-delay: 0.09s; }
    .nav-links.active > li:nth-child(4) { transition-delay: 0.12s; }
    .nav-links.active > li:nth-child(5) { transition-delay: 0.15s; }
    .nav-links.active > li:nth-child(6) { transition-delay: 0.18s; }
    .nav-links.active > li:nth-child(7) { transition-delay: 0.21s; }
    .nav-links.active > li:nth-child(8) { transition-delay: 0.24s; }

    @media (prefers-reduced-motion: reduce) {
        .nav-links > li,
        .nav-links.active > li {
            transition: none !important;
            opacity: 1;
            transform: none;
        }
    }

    .nav-links > li > a {
        display: block;
        width: 100%;
        padding: 0.7rem 0.8rem;
    }

    .has-dropdown {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.35rem;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        background: rgba(0,0,0,0.04);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: none;
        min-width: 0;
        margin-top: 0.15rem;
        border-radius: 0.8rem;
        padding: 0.35rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .dropdown-menu::before {
        display: none;
    }

    .has-dropdown.open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .dropdown-menu a {
        color: #1C1C1C !important;
        padding: 0.55rem 0.7rem;
        border-left: none;
    }

    header.header-inner .nav-links {
        background: rgba(20, 20, 20, 0.98);
        border-color: rgba(255, 255, 255, 0.12);
    }

    header.header-inner .nav-links > li > a,
    header.header-inner .submenu-toggle,
    header.header-inner .language a {
        color: var(--primary-red);
    }

    header.header-inner .nav-links > li > a.active {
        color: #fff;
    }

    header.header-inner .dropdown-menu {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
    }

    header.header-inner .dropdown-menu a {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .hero {
        min-height: 70vh;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-star {
        right: 5%;
        top: 15%;
    }
    
    .hero-star img {
        width: 120px;
    }
    
    .services-grid,
    .news-grid,
    .events-slider {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .services .container,
    .office-hours .container,
    .news .container,
    .events .container,
    .social-media .container,
    .feedback .container,
    .about .container {
        padding: 3rem 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
}

/* =============================================
   Veranstaltungen List Page (uid=12)
   ============================================= */

.veranstaltungen-list-page-wrap {
    padding: 2rem 0 2.2rem;
    color: #fff;
}

.veranstaltungen-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.veranstaltungen-list-heading {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}

.veranstaltungen-list-view {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Full-width event card in list context */
.veranstaltungen-list-page-wrap .article.veranstaltungen-card {
    flex: unset !important;
    width: 100%;
    flex-direction: row;
    min-height: 160px;
    align-items: stretch;
}

.veranstaltungen-list-page-wrap .veranst-card-right {
    flex: 0 0 260px;
    height: auto;
}

@media (max-width: 700px) {
    .veranstaltungen-list-page-wrap .article.veranstaltungen-card {
        flex-direction: column;
    }
    .veranstaltungen-list-page-wrap .veranst-card-right {
        flex: 0 0 180px;
        height: 180px;
    }
}

/* =============================================
   Veranstaltungen Section
   ============================================= */

/* Section wrapper inherits .news dark background */
.veranstaltungen-section .frame-type-news_pi1 {
    background: transparent;
}

.veranstaltungen-section .frame > header {
    display: none;
}

/* Heading injected by JS */
.veranstaltungen-heading {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem 2.5rem;
    letter-spacing: -0.01em;
}

.veranstaltungen-heading::before {
    content: "→ ";
    font-weight: 800;
}

/* Subtitle below heading */
.veranstaltungen-subtitle {
    font-size: 1rem;
    color: #c0c0c0;
    margin: 0 0 1.8rem 2.5rem;
    max-width: 640px;
    line-height: 1.6;
}

#veranstaltungen-section .veranstaltungen-list-heading {
    margin-bottom: 1rem;
}

/* Two-column event card: text left, image right */
#veranstaltungen-section .article.veranstaltungen-card {
    flex: 0 0 560px !important;
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    min-height: 200px;
    align-items: stretch;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#veranstaltungen-section .article.veranstaltungen-card:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
    transform: translateY(-4px);
}

/* Left half: content */
.veranst-card-left {
    flex: 1 1 0;
    padding: 1.4rem 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.veranst-card-date {
    font-size: 0.88rem;
    font-weight: 700;
    color: #b84444;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.65rem;
}

.veranst-card-title h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.65rem;
    color: #fff;
}

.veranst-card-title h3 a {
    color: #fff;
    text-decoration: none;
}

.veranst-card-title h3 a:hover {
    color: #e8e8e8;
}

.veranst-card-teaser {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #c8c8c8;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.veranst-card-footer {
    margin-top: auto;
}

.veranst-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, rgba(184, 68, 68, 0.35), rgba(140, 30, 30, 0.28));
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.55rem 1.3rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(208, 70, 67, 0.45);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.veranst-btn:hover {
    background: linear-gradient(135deg, rgba(204, 79, 79, 0.55), rgba(170, 40, 40, 0.45));
    border-color: rgba(220, 90, 90, 0.7);
    box-shadow: 0 6px 18px rgba(187, 0, 14, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

/* Right half: image */
.veranst-card-right {
    flex: 0 0 200px;
    overflow: hidden;
    position: relative;
    padding: 0.7rem 0.7rem 0.7rem 0;
}

.veranst-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.85rem;
    transition: transform 0.4s ease;
}

#veranstaltungen-section .article.veranstaltungen-card:hover .veranst-card-img {
    transform: scale(1.04);
}

/* ══════════════════════════════════════════════
   AStA Page Styles
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   Semesterticket Page
   ══════════════════════════════════════════════ */
.semesterticket-page {
    padding: 2rem 2rem 3rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.sem-ticket-hero-card,
.sem-ticket-info-block,
.sem-ticket-important-block {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.sem-ticket-hero-card {
    padding: 2.4rem 2.3rem;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 2.2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.sem-ticket-title {
    font-size: 2.6rem;
    line-height: 1.08;
    font-weight: 900;
    margin-bottom: 1.2rem;
}

.sem-ticket-title::before {
    content: "→ ";
}

.sem-ticket-title em,
.sem-ticket-title span,
.sem-ticket-hero-left h3,
.sem-ticket-hero-left a {
    color: var(--primary-red);
}

.sem-ticket-hero-left a.btn-primary,
.sem-ticket-hero-left a.sem-ticket-cta {
    color: #fff !important;
    margin-top: 0.75rem;
}

.sem-ticket-hero-left h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.sem-ticket-hero-left p {
    color: #e1e1e1;
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: 1.2rem;
}

.sem-ticket-steps {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1rem 1rem 1.1rem;
    max-width: 270px;
}

.sem-ticket-steps h4 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
}

.sem-ticket-steps ul {
    margin: 0 0 0.85rem 1rem;
    padding: 0;
    color: #dfdfdf;
}

.sem-ticket-steps li {
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}

.sem-ticket-hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
}

.sem-ticket-bars {
    position: absolute;
    inset: 18% auto auto 6%;
    width: 220px;
    height: 220px;
    opacity: 0.3;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.55) 0 7px, transparent 7px 32px);
    filter: blur(0.3px);
}

.sem-ticket-phone {
    width: min(100%, 520px);
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 24px 35px rgba(0, 0, 0, 0.45));
}

.sem-ticket-info-block,
.sem-ticket-important-block {
    padding: 2rem 2.2rem;
    margin-bottom: 1.8rem;
}

.sem-ticket-info-block h2,
.sem-ticket-important-block h2 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 1rem;
}

.sem-ticket-info-block p,
.sem-ticket-info-block li,
.sem-ticket-important-block p {
    color: #e0e0e0;
    line-height: 1.65;
}

.sem-ticket-info-block ul {
    margin: 0.8rem 0 0 1.1rem;
}

.sem-ticket-important-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.sem-ticket-mini-card {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    padding: 1.2rem 1.1rem;
}

.sem-ticket-mini-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

@media (max-width: 1100px) {
    .sem-ticket-hero-card {
        grid-template-columns: 1fr;
    }
    .sem-ticket-hero-right {
        min-height: 280px;
    }
    .sem-ticket-important-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .semesterticket-page {
        padding: 1.4rem 1rem 2rem;
    }
    .sem-ticket-hero-card,
    .sem-ticket-info-block,
    .sem-ticket-important-block {
        padding: 1.3rem 1.1rem;
    }
    .sem-ticket-title {
        font-size: 2rem;
    }
}

/* ── Hero Banner ── */
.asta-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: 0;
}

.asta-hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

.asta-hero-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #d8d8d8 0%, #b0b0b0 50%, #c8c8c8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #666;
    font-weight: 600;
}

.asta-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.asta-hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.15) 60%, transparent 100%);
    z-index: 1;
}

.asta-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 4rem 2.5rem;
    gap: 2rem;
}

.asta-hero-left h1 {
    font-size: 4rem;
    font-weight: 900;
    color: white;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

.asta-hero-content h1,
.asta-hero-content h2,
.asta-hero-content h3 {
    color: #fff;
    margin: 0 0 1rem;
}

.asta-hero-content p,
.asta-hero-content li,
.asta-hero-content a {
    color: #fff;
}

.asta-hero-left h1 em {
    font-style: italic;
    color: white;
}

.asta-hero-right {
    text-align: right;
}

.asta-hero-right p {
    font-size: 1.35rem;
    font-weight: 400;
    color: white;
    line-height: 1.4;
    font-style: italic;
}

.asta-hero-right strong {
    font-weight: 700;
}

.asta-hero-star {
    position: absolute;
    top: 8%;
    right: 4%;
    z-index: 2;
    opacity: 0.85;
}

.asta-hero-star img {
    width: 280px;
    height: auto;
    animation: float 6s ease-in-out infinite;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1), filter 0.45s ease;
    cursor: pointer;
}

.asta-hero-star img:hover {
    animation-play-state: paused;
    transform: scale(1.15) rotate(12deg);
    filter: drop-shadow(0 0 25px rgba(200,16,46,0.5));
}

/* ── ASTA Info / Self-conception / Vergabe / Selbst sections ── */
.asta-info,
.asta-selfconception,
.asta-vergabe,
.asta-selbst,
.asta-publikationen {
    padding: 3.5rem 2rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.asta-info .container,
.asta-selfconception .container,
.asta-vergabe .container,
.asta-selbst .container,
.asta-publikationen .container {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.68), rgba(6, 6, 6, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1.5rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 3rem 3rem;
}

.asta-info h2,
.asta-selfconception h2,
.asta-vergabe h2,
.asta-selbst h2,
.asta-publikationen h2 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.asta-info-text p {
    color: #d4d4d4;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    max-width: 900px;
}

.asta-info-text a {
    color: #B75550;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.asta-info-text a:hover {
    color: #d4807b;
}

/* reduce gap between consecutive asta sections */
.asta-info + .asta-selfconception,
.asta-selfconception + .asta-team,
.asta-team + .asta-vergabe,
.asta-vergabe + .asta-selbst,
.asta-selbst + .asta-publikationen,
.asta-publikationen + .wer-wir-sind {
    padding-top: 0;
}

/* ── Team Grid ── */
.asta-team {
    padding: 2rem 2rem 3.5rem;
    background: transparent;
    color: white;
    position: relative;
    z-index: 1;
}

.asta-team .container {
    max-width: 1400px;
    margin: 0 auto;
}

.asta-team-intro {
    margin-bottom: 1.2rem;
}

.asta-team-intro > :last-child {
    margin-bottom: 0;
}

.asta-team-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.asta-member-card {
    display: flex;
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.62), rgba(8, 8, 8, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.asta-member-card:hover {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.72), rgba(10, 10, 10, 0.56));
    border-color: rgba(208, 70, 67, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(187, 0, 14, 0.18) inset;
}

.asta-member-left {
    flex: 0 0 220px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.asta-member-photo {
    width: 160px;
    height: 160px;
    background: #2a2a2a;
    border: 2px dashed rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.asta-member-photo--image {
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.8rem;
}

.asta-member-role {
    font-size: 0.82rem;
    color: #B75550;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asta-member-name {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.asta-member-right {
    flex: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.asta-member-right h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
}

.asta-member-right p {
    font-size: 0.9rem;
    color: #c0c0c0;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 600px;
}

.asta-member-icons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.asta-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.asta-icon-link svg {
    width: 16px;
    height: 16px;
    color: #B75550;
}

.asta-icon-link:hover {
    background: rgba(183,85,80,0.15);
    border-color: #B75550;
}

/* ── Publikationen ── */
.asta-publikationen-list {
    padding-left: 0;
}

.asta-publikationen-list p {
    color: #d4d4d4;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.asta-publikationen-list ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.asta-publikationen-list li {
    color: #d4d4d4;
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

/* ── AStA Page Responsive ── */
@media (max-width: 1024px) {
    .asta-hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
    }
    .asta-hero-right {
        text-align: left;
    }
    .asta-hero-star img {
        width: 180px;
    }
    .asta-info .container,
    .asta-selfconception .container,
    .asta-vergabe .container,
    .asta-selbst .container,
    .asta-publikationen .container {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .asta-hero {
        min-height: 40vh;
    }
    .asta-hero-left h1 {
        font-size: 2.8rem;
    }
    .asta-hero-right p {
        font-size: 1.05rem;
    }
    .asta-hero-star {
        display: none;
    }
    .asta-member-card {
        flex-direction: column;
    }
    .asta-member-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 1.25rem;
    }
    .asta-member-photo {
        width: 120px;
        height: 120px;
    }
    .asta-member-right {
        padding: 1.25rem;
    }
}

.veranst-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    min-height: 180px;
    border-radius: 0.85rem;
}

/* Carousel wrapper – identical to news */
#veranstaltungen-section .news-carousel-wrapper {
    padding-left: 2.5rem;
}

/* Responsive */
@media (max-width: 1200px) {
    #veranstaltungen-section .article.veranstaltungen-card { flex: 0 0 480px !important; }
    .veranstaltungen-heading { margin-left: 1.5rem; }
    .veranstaltungen-subtitle { margin-left: 1.5rem; }
    #veranstaltungen-section .news-carousel-wrapper { padding-left: 1.5rem; }
}

@media (max-width: 900px) {
    #veranstaltungen-section .article.veranstaltungen-card { flex: 0 0 400px !important; }
    .veranst-card-right { flex: 0 0 150px; }
}

@media (max-width: 640px) {
    #veranstaltungen-section .article.veranstaltungen-card {
        flex: 0 0 88vw !important;
        flex-direction: column;
    }
    .veranst-card-right {
        flex: 0 0 160px;
        height: 160px;
        padding: 0 0.9rem 0.9rem;
    }
}

/* =============================================
   Responsive Hardening Layer (mobile-first)
   ============================================= */

:root {
    --mobile-space-1: clamp(0.75rem, 1.8vw, 1rem);
    --mobile-space-2: clamp(1rem, 2.5vw, 1.5rem);
    --mobile-space-3: clamp(1.25rem, 3vw, 2rem);
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

.container {
    padding-inline: clamp(0.95rem, 3.4vw, 2rem);
}

/* Fixed header offset with fluid value on non-home pages */
.is-inner main,
body > header.header-inner + main {
    padding-top: clamp(5.1rem, 8.4vw, 6.6rem);
}

/* AStA page keeps hero directly under fixed menu (no extra offset) */
body.is-asta main,
body.is-asta header.header-inner + main {
    padding-top: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .navbar {
        padding: 0.7rem var(--mobile-space-1);
    }

    .navbar .container {
        padding: 0.5rem 0.7rem;
    }

    .hero {
        min-height: 88svh;
        padding-top: clamp(6rem, 13vw, 8rem);
    }

    .hero-content {
        max-width: 100%;
        padding: var(--mobile-space-3) !important;
    }

    .hero-title {
        font-size: clamp(2.2rem, 7vw, 3.4rem);
        line-height: 1.02;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 4.2vw, 2.2rem);
        line-height: 1.15;
    }

    .hero-description {
        font-size: clamp(0.96rem, 2.7vw, 1.08rem);
        max-width: 100%;
    }

    .angebote-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.85rem;
    }

    .news-list-page-header,
    .veranstaltungen-list-header {
        gap: 0.8rem;
        flex-wrap: wrap;
    }

    .news-category-filter {
        width: 100%;
        max-width: 290px;
    }

    .news-category-select {
        width: 100%;
    }

    .sem-ticket-hero-card {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .services,
    .about,
    .events,
    .social-media,
    .feedback,
    .content-main,
    .office-hours,
    .asta-info,
    .asta-selfconception,
    .asta-vergabe,
    .asta-selbst,
    .asta-publikationen,
    .asta-team,
    .semesterticket-page {
        padding-inline: 0.9rem;
    }

    .services .container,
    .about .container,
    .events .container,
    .social-media .container,
    .feedback .container,
    .content-main .container,
    .asta-info .container,
    .asta-selfconception .container,
    .asta-vergabe .container,
    .asta-selbst .container,
    .asta-publikationen .container,
    .sem-ticket-hero-card,
    .sem-ticket-info-block,
    .sem-ticket-important-block {
        border-radius: 1rem;
        padding: 1.2rem 1rem;
    }

    .news-list-page-wrap,
    .veranstaltungen-list-page-wrap {
        padding-top: 1.2rem;
    }

    .news-list-page-wrap .article,
    .veranstaltungen-list-page-wrap .article.veranstaltungen-card {
        padding: 1.15rem 1rem;
    }

    .news-list-page-wrap .news-card-header,
    .news-list-page-wrap .news-card-footer {
        gap: 0.55rem;
    }

    .article .news-readmore-btn,
    .veranst-btn,
    .btn-primary,
    .btn-secondary,
    .btn-social,
    .social-text a,
    .feedback-text a,
    .wer-text a {
        min-height: 40px;
        justify-content: center;
        padding-inline: 1rem;
    }

    .sem-ticket-title,
    .asta-hero-left h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .sem-ticket-steps {
        max-width: 100%;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .navbar {
        padding-inline: 0.45rem;
    }

    .navbar .container {
        border-radius: 0.85rem;
    }

    .hero {
        min-height: 84svh;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 2.4rem);
    }

    .hero-subtitle {
        font-size: clamp(1rem, 5.4vw, 1.25rem);
    }

    .hero .btn-primary {
        min-height: 36px;
        padding: 0.5rem 0.9rem;
        font-size: 0.84rem;
        border-radius: 0.75rem;
    }

    .angebote-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-category-filter {
        max-width: 100%;
    }

    .sem-ticket-phone {
        width: min(100%, 360px);
    }
}

/* Final homepage button text override: keep all button labels pure white */
main .btn-primary,
main .btn-primary:visited,
main .btn-primary:hover,
main .btn-primary:focus,
main .btn-primary:active,
main .btn-primary *,
main .btn-secondary,
main .btn-secondary:visited,
main .btn-secondary:hover,
main .btn-secondary:focus,
main .btn-secondary:active,
main .btn-secondary *,
main .btn-social,
main .btn-social:visited,
main .btn-social:hover,
main .btn-social:focus,
main .btn-social:active,
main .btn-social *,
main .news-readmore-btn,
main .news-readmore-btn:visited,
main .news-readmore-btn:hover,
main .news-readmore-btn:focus,
main .news-readmore-btn:active,
main .news-readmore-btn *,
main .veranst-btn,
main .veranst-btn:visited,
main .veranst-btn:hover,
main .veranst-btn:focus,
main .veranst-btn:active,
main .veranst-btn *,
main .angebote-readmore-btn,
main .angebote-readmore-btn:visited,
main .angebote-readmore-btn:hover,
main .angebote-readmore-btn:focus,
main .angebote-readmore-btn:active,
main .angebote-readmore-btn *,
main .social-text > a,
main .social-text > a:visited,
main .social-text > a:hover,
main .social-text > a:focus,
main .social-text > a:active,
main .social-text > a *,
main .feedback-text > a,
main .feedback-text > a:visited,
main .feedback-text > a:hover,
main .feedback-text > a:focus,
main .feedback-text > a:active,
main .feedback-text > a *,
main .wer-text > a,
main .wer-text > a:visited,
main .wer-text > a:hover,
main .wer-text > a:focus,
main .wer-text > a:active,
main .wer-text > a *,
footer .footer-legal-btn,
footer .footer-legal-btn:visited,
footer .footer-legal-btn:hover,
footer .footer-legal-btn:focus,
footer .footer-legal-btn:active,
footer .footer-legal-btn * {
    color: #ffffff !important;
}

/* Universal: force ALL button text white */
[class*="btn"],
[class*="btn"] *,
[class*="btn"]:visited,
[class*="btn"]:hover,
[class*="btn"]:focus,
[class*="btn"]:active,
a[class*="btn"],
a[class*="btn"] *,
button,
button *,
input[type="submit"],
input[type="button"] {
    color: #ffffff !important;
}
/* --- Softer, non-bold date styles for News & Events (override) --- */
.news-card-date,
.news-detail-date,
.news-detail-author,
.veranst-card-date {
    color: #b4807b !important;   /* softer, less saturated red */
    font-weight: 400 !important; /* normal weight */
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Light mode */
body.light-mode {
    background: #f5f3ef;
    color: #1C1C1C;
}

body.light-mode::before {
    background: radial-gradient(circle, rgba(187, 0, 14, 0.14) 0%, rgba(187, 0, 14, 0.05) 40%, transparent 70%);
}

body.light-mode::after {
    background: radial-gradient(circle, rgba(123, 0, 0, 0.12) 0%, rgba(123, 0, 0, 0.05) 40%, transparent 70%);
}

body.light-mode > header.header-inner .navbar .container,
body.light-mode > header.scrolled .navbar .container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 247, 244, 0.9));
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.light-mode > header.header-inner .logo img,
body.light-mode > header.scrolled .logo img {
    filter: brightness(0);
}

body.light-mode > header.header-inner .nav-links a,
body.light-mode > header.header-inner.scrolled .nav-links a,
body.light-mode > header.scrolled .nav-links a,
body.light-mode > header.header-inner .language a,
body.light-mode > header.header-inner.scrolled .language a,
body.light-mode > header.scrolled .language a {
    color: #1C1C1C;
}

body.light-mode > header.header-inner .nav-links a.active,
body.light-mode > header.header-inner.scrolled .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.95), rgba(183, 85, 80, 0.92));
}

body.light-mode .theme-toggle {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.8);
    color: #1C1C1C !important;
}

body.light-mode .hero-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
}

body.light-mode .angebote-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(243, 239, 232, 0.86));
}

body.light-mode .dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

body.light-mode .dropdown-menu::before {
    background: rgba(255, 255, 255, 0.98);
    border-left-color: rgba(0, 0, 0, 0.14);
    border-top-color: rgba(0, 0, 0, 0.14);
}

body.light-mode .dropdown-menu a {
    color: #1C1C1C !important;
}

body.light-mode .dropdown-menu a:hover {
    color: #ffffff !important;
}

body.light-mode .services .container,
body.light-mode .about .container,
body.light-mode .office-hours .container,
body.light-mode .news .container,
body.light-mode .social-media .container,
body.light-mode .feedback .container {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

body.light-mode .about h1,
body.light-mode .about h2,
body.light-mode .about h3,
body.light-mode .services h1,
body.light-mode .services h2,
body.light-mode .services h3,
body.light-mode .news h1,
body.light-mode .news h2,
body.light-mode .news h3,
body.light-mode .office-hours h1,
body.light-mode .office-hours h2,
body.light-mode .office-hours h3,
body.light-mode .social-media h1,
body.light-mode .social-media h2,
body.light-mode .social-media h3,
body.light-mode .feedback h1,
body.light-mode .feedback h2,
body.light-mode .feedback h3,
body.light-mode main p,
body.light-mode main li,
body.light-mode main td,
body.light-mode main th {
    color: #1C1C1C !important;
}

/* Keep AStA hero intro text white in light mode for readability on dark hero media */
body.light-mode .asta-hero-content p,
body.light-mode .asta-hero-content li,
body.light-mode .asta-hero-content a,
body.light-mode .asta-hero-content strong {
    color: #ffffff !important;
}

body.light-mode main a,
body.light-mode footer a {
    color: #8c0000;
}

body.light-mode footer,
body.light-mode .site-footer {
    background: #eee8e0;
    border-top-color: rgba(0, 0, 0, 0.1);
}

body.light-mode footer p,
body.light-mode footer li,
body.light-mode footer h1,
body.light-mode footer h2,
body.light-mode footer h3,
body.light-mode footer h4,
body.light-mode footer h5,
body.light-mode footer h6 {
    color: #1C1C1C;
}

body.light-mode [class*="btn"],
body.light-mode [class*="btn"] *,
body.light-mode a[class*="btn"],
body.light-mode a[class*="btn"] *,
body.light-mode button:not(.theme-toggle),
body.light-mode button:not(.theme-toggle) * {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    body.light-mode header.header-inner .nav-links {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(0, 0, 0, 0.1);
    }

    body.light-mode header.header-inner .nav-links > li > a,
    body.light-mode header.header-inner .submenu-toggle,
    body.light-mode header.header-inner .language a {
        color: var(--primary-red);
    }

    body.light-mode header.header-inner .nav-links > li > a.active {
        color: #ffffff;
    }

    body.light-mode header.header-inner .dropdown-menu {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.08);
    }

    body.light-mode header.header-inner .dropdown-menu a {
        color: #1C1C1C !important;
    }
}

/* Redesigned primary navigation */
.site-nav-redesign {
    padding: 0.85rem 1rem;
}

.site-nav-redesign__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.55rem 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.28));
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
}

body > header.header-inner .site-nav-redesign__inner,
body > header.scrolled .site-nav-redesign__inner {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0.34));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.site-nav-redesign__logo img {
    height: 48px;
    width: auto;
    filter: brightness(0);
}

body > header.header-inner .site-nav-redesign__logo img,
body > header.scrolled .site-nav-redesign__logo img {
    filter: invert(17%) sepia(94%) saturate(5847%) hue-rotate(354deg) brightness(93%) contrast(114%);
}

.site-nav-redesign__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.site-nav-redesign__item {
    position: relative;
    display: flex;
    align-items: center;
}

.site-nav-redesign__item--parent {
    padding-bottom: 0.5rem;
    margin-bottom: -0.5rem;
}

.site-nav-redesign__link,
.site-nav-redesign__lang-link {
    text-decoration: none;
    color: #1C1C1C;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.88rem;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body > header.header-inner .site-nav-redesign__link,
body > header.scrolled .site-nav-redesign__link,
body > header.header-inner .site-nav-redesign__lang-link,
body > header.scrolled .site-nav-redesign__lang-link {
    color: var(--primary-red);
}

.site-nav-redesign__link:hover,
.site-nav-redesign__link.active,
.site-nav-redesign__lang-link.active,
.site-nav-redesign__lang-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-red), var(--light-red));
    transform: translateY(-1px);
}

.site-nav-redesign__submenu-toggle {
    border: none;
    background: transparent;
    color: var(--primary-red) !important;
    border-radius: 999px;
    padding: 0.38rem 0.42rem;
    margin-left: 0.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-nav-redesign__submenu-toggle * {
    color: var(--primary-red) !important;
}

.site-nav-redesign__submenu-toggle:hover,
.site-nav-redesign__item--parent.is-open > .site-nav-redesign__submenu-toggle {
    background: rgba(187, 0, 14, 0.12);
    color: var(--primary-red);
}

.site-nav-redesign__caret {
    display: inline-block;
    font-size: 0.64rem;
    color: var(--primary-red) !important;
    transition: transform 0.2s ease;
}

.site-nav-redesign__item--parent.is-open .site-nav-redesign__caret {
    transform: rotate(180deg);
}

.site-nav-redesign__submenu {
    list-style: none;
    margin: 0;
    padding: 0.45rem;
    position: absolute;
    top: calc(100% + 0.12rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1200;
}

.site-nav-redesign__submenu-link {
    display: block;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 10px;
    padding: 0.58rem 0.75rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.site-nav-redesign__submenu-link:hover,
.site-nav-redesign__submenu-link.active {
    color: #ffffff;
    background: rgba(183, 85, 80, 0.25);
}

@media (min-width: 992px) {
    .site-nav-redesign__item--parent:hover > .site-nav-redesign__submenu,
    .site-nav-redesign__item--parent.is-open > .site-nav-redesign__submenu {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .site-nav-redesign__item--parent:hover .site-nav-redesign__caret {
        transform: rotate(180deg);
    }

    .site-nav-redesign__toggle {
        display: none;
    }
}

.site-nav-redesign__theme-toggle {
    justify-self: end;
}

.site-nav-redesign__lang {
    margin-left: 0.2rem;
    gap: 0.2rem;
}

.site-nav-redesign__lang-sep {
    color: currentColor;
    opacity: 0.55;
}

.site-nav-redesign__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    background: transparent;
    cursor: pointer;
}

.site-nav-redesign__toggle span {
    width: 22px;
    height: 2px;
    background: #1C1C1C;
    border-radius: 1px;
}

body > header.header-inner .site-nav-redesign__toggle,
body > header.scrolled .site-nav-redesign__toggle {
    border-color: rgba(187, 0, 14, 0.5);
}

body > header.header-inner .site-nav-redesign__toggle span,
body > header.scrolled .site-nav-redesign__toggle span {
    background: var(--primary-red);
}

@media (max-width: 991px) {
    .site-nav-redesign__inner {
        grid-template-columns: auto auto auto;
    }

    .site-nav-redesign__toggle {
        display: inline-flex;
        justify-self: end;
    }

    .site-nav-redesign__theme-toggle {
        justify-self: end;
    }

    .site-nav-redesign__list {
        position: fixed;
        top: 84px;
        left: 0.75rem;
        right: 0.75rem;
        z-index: 1200;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.8rem;
        max-height: calc(100vh - 102px);
        overflow-y: auto;
    }

    .site-nav-redesign.is-open .site-nav-redesign__list {
        display: flex;
    }

    .site-nav-redesign__item {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 0.12rem 0;
    }

    .site-nav-redesign__item:last-child {
        border-bottom: none;
    }

    .site-nav-redesign__link,
    .site-nav-redesign__lang-link {
        width: 100%;
        border-radius: 10px;
        padding: 0.7rem 0.68rem;
        transform: none;
    }

    .site-nav-redesign__submenu-toggle {
        padding: 0.6rem;
        margin-left: 0;
    }

    .site-nav-redesign__submenu {
        position: static;
        transform: none;
        min-width: 0;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        display: none;
        margin-top: 0.2rem;
        grid-column: 1 / -1;
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: none;
        border-radius: 10px;
        padding: 0.28rem;
    }

    .site-nav-redesign__item--parent.is-open > .site-nav-redesign__submenu {
        display: block;
    }

    .site-nav-redesign__submenu-link {
        color: #1C1C1C;
    }

    body > header.header-inner .site-nav-redesign__list {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(16, 16, 16, 0.98);
    }

    body > header.header-inner .site-nav-redesign__submenu {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.1);
    }

    body > header.header-inner .site-nav-redesign__submenu-link {
        color: rgba(255, 255, 255, 0.92);
    }

    body > header.header-inner .site-nav-redesign__item {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    body.light-mode .site-nav-redesign__list {
        background: rgba(255, 255, 255, 0.99);
        border-color: rgba(0, 0, 0, 0.1);
    }

    body.light-mode .site-nav-redesign__submenu {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.08);
    }

    body.light-mode .site-nav-redesign__submenu-link {
        color: #1C1C1C;
    }
}

/* =============================================
   Light Mode Pro Redesign Layer
   Final cascade overrides for all sections/pages
   ============================================= */
body.light-mode {
    --lm-bg: #f4f0ea;
    --lm-surface: #fbf8f4;
    --lm-surface-2: #f0ebe4;
    --lm-surface-3: #e8e1d8;
    --lm-surface-red: #f6ece9;
    --lm-border: rgba(136, 34, 34, 0.18);
    --lm-border-strong: rgba(136, 34, 34, 0.3);
    --lm-text: #1f1b18;
    --lm-text-soft: #4e433b;
    --lm-red: #bb000e;
    --lm-red-soft: #b75550;
    --lm-red-deep: #8f0f1f;
    --lm-red-bright: #cf4049;
}

body.light-mode,
body.light-mode main {
    background:
        radial-gradient(circle at 14% 12%, rgba(187, 0, 14, 0.08) 0%, rgba(187, 0, 14, 0.03) 28%, transparent 56%),
        radial-gradient(circle at 82% 78%, rgba(183, 85, 80, 0.08) 0%, rgba(183, 85, 80, 0.03) 26%, transparent 55%),
        var(--lm-bg);
    color: var(--lm-text);
}

/* Global light-mode headline color */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: var(--lm-red-deep) !important;
}

body.light-mode .hero-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(244, 239, 231, 0.78) 100%) !important;
}

body.light-mode .angebote-overlay {
    background: linear-gradient(180deg, rgba(249, 245, 239, 0.9), rgba(238, 231, 221, 0.9)) !important;
}

body.light-mode .services .container,
body.light-mode .about .container,
body.light-mode .events .container,
body.light-mode .social-media .container,
body.light-mode .feedback .container,
body.light-mode .content-main .container,
body.light-mode .hero-customizable .container,
body.light-mode .office-hours .container,
body.light-mode .wer-wir-sind .container,
body.light-mode .contact-info-card,
body.light-mode .contact-feedback-card,
body.light-mode .sem-ticket-hero-card,
body.light-mode .sem-ticket-info-block,
body.light-mode .sem-ticket-important-block,
body.light-mode .asta-info .container,
body.light-mode .asta-selfconception .container,
body.light-mode .asta-vergabe .container,
body.light-mode .asta-selbst .container,
body.light-mode .asta-publikationen .container,
body.light-mode .footer-content {
    background: linear-gradient(180deg, var(--lm-surface), var(--lm-surface-2) 72%, var(--lm-surface-red)) !important;
    border: 1px solid var(--lm-border) !important;
    box-shadow: 0 16px 36px rgba(114, 66, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 3px 0 rgba(187, 0, 14, 0.12) !important;
}

body.light-mode .angebote-card,
body.light-mode .service-card,
body.light-mode .event-card,
body.light-mode .article,
body.light-mode #news-section .news-list-page-wrap .article,
body.light-mode #veranstaltungen-section .article.veranstaltungen-card,
body.light-mode .news-list-page-wrap .article,
body.light-mode .services-angebote-list .container > .frame:not(.frame-type-news_pi1),
body.light-mode .services-angebote-list .container > .ce-text,
body.light-mode .services-angebote-list .container > .ce-textpic,
body.light-mode .asta-member-card,
body.light-mode .sem-ticket-mini-card,
body.light-mode .sem-ticket-steps,
body.light-mode .burozeiten-content .frame-type-table,
body.light-mode .office-hours .frame-type-table,
body.light-mode .news-detail-image-wrap {
    background: linear-gradient(180deg, var(--lm-surface-2), var(--lm-surface-3) 74%, #e9ddd2) !important;
    border: 1px solid var(--lm-border) !important;
    box-shadow: 0 12px 28px rgba(114, 66, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    border-top: 2px solid rgba(187, 0, 14, 0.24) !important;
}

body.light-mode .angebote-card:hover,
body.light-mode .service-card:hover,
body.light-mode .event-card:hover,
body.light-mode .article:hover,
body.light-mode #news-section .news-list-page-wrap .article:hover,
body.light-mode #veranstaltungen-section .article.veranstaltungen-card:hover,
body.light-mode .news-list-page-wrap .article:hover,
body.light-mode .services-angebote-list .container > .frame:not(.frame-type-news_pi1):hover,
body.light-mode .services-angebote-list .container > .ce-text:hover,
body.light-mode .services-angebote-list .container > .ce-textpic:hover,
body.light-mode .asta-member-card:hover {
    background: linear-gradient(180deg, #f6efe7, #ede4d9) !important;
    border-color: var(--lm-border-strong) !important;
    box-shadow: 0 14px 32px rgba(124, 60, 45, 0.18), 0 0 0 1px rgba(187, 0, 14, 0.08) inset !important;
}

body.light-mode .news-carousel-heading,
body.light-mode .veranstaltungen-heading,
body.light-mode .angebote-title,
body.light-mode .burozeiten-title,
body.light-mode .news-list-heading,
body.light-mode .veranstaltungen-list-heading,
body.light-mode .section-title,
body.light-mode .services .section-title,
body.light-mode .about .section-title,
body.light-mode .events .section-title,
body.light-mode .social-text h2,
body.light-mode .feedback-text h2,
body.light-mode .wer-text h2,
body.light-mode .contact-feedback-left h2,
body.light-mode .sem-ticket-title,
body.light-mode .asta-info h2,
body.light-mode .asta-selfconception h2,
body.light-mode .asta-vergabe h2,
body.light-mode .asta-selbst h2,
body.light-mode .asta-publikationen h2,
body.light-mode .services-angebote-list .angebote-list-top-title {
    color: var(--lm-text) !important;
    text-shadow: none !important;
}

body.light-mode .news-carousel-heading::before,
body.light-mode .veranstaltungen-heading::before,
body.light-mode .burozeiten-title::before,
body.light-mode .sem-ticket-title::before {
    color: var(--lm-red) !important;
}

body.light-mode .news-carousel-heading,
body.light-mode .veranstaltungen-heading,
body.light-mode .angebote-title,
body.light-mode .burozeiten-title,
body.light-mode .news-list-heading,
body.light-mode .veranstaltungen-list-heading,
body.light-mode .section-title,
body.light-mode .social-text h2,
body.light-mode .feedback-text h2,
body.light-mode .wer-text h2,
body.light-mode .contact-feedback-left h2,
body.light-mode .sem-ticket-title,
body.light-mode .asta-info h2,
body.light-mode .asta-selfconception h2,
body.light-mode .asta-vergabe h2,
body.light-mode .asta-selbst h2,
body.light-mode .asta-publikationen h2 {
    position: relative;
    padding-bottom: 0.22rem;
}

body.light-mode .news-carousel-heading::after,
body.light-mode .veranstaltungen-heading::after,
body.light-mode .angebote-title::after,
body.light-mode .burozeiten-title::after,
body.light-mode .news-list-heading::after,
body.light-mode .veranstaltungen-list-heading::after,
body.light-mode .section-title::after,
body.light-mode .social-text h2::after,
body.light-mode .feedback-text h2::after,
body.light-mode .wer-text h2::after,
body.light-mode .contact-feedback-left h2::after,
body.light-mode .sem-ticket-title::after,
body.light-mode .asta-info h2::after,
body.light-mode .asta-selfconception h2::after,
body.light-mode .asta-vergabe h2::after,
body.light-mode .asta-selbst h2::after,
body.light-mode .asta-publikationen h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    border-radius: 999px;
    margin-top: 0.36rem;
    background: linear-gradient(90deg, rgba(187, 0, 14, 0.9), rgba(183, 85, 80, 0.72));
    box-shadow: 0 2px 8px rgba(187, 0, 14, 0.18);
}

body.light-mode .news-carousel-dots .news-carousel-dot {
    background: rgba(136, 46, 46, 0.28);
}

body.light-mode .news-carousel-dots .news-carousel-dot.active {
    background: var(--lm-red);
}

body.light-mode .article .news-card-header h3,
body.light-mode .article .news-card-header h3 a,
body.light-mode .veranst-card-title h3,
body.light-mode .veranst-card-title h3 a,
body.light-mode .angebote-card-title,
body.light-mode .service-card h3,
body.light-mode .services-angebote-list .angebote-row-content > header h1,
body.light-mode .services-angebote-list .angebote-row-content > header h2,
body.light-mode .services-angebote-list .angebote-row-content > header h3,
body.light-mode .asta-member-right h3,
body.light-mode .news-detail-title,
body.light-mode .news-detail-back-link {
    color: var(--lm-text) !important;
}

body.light-mode .article .news-card-body p,
body.light-mode .news-list-page-wrap .news-card-body p,
body.light-mode .veranst-card-teaser,
body.light-mode .angebote-card-teaser,
body.light-mode .services-angebote-list .angebote-row-content p,
body.light-mode .hero-customizable p,
body.light-mode .about p,
body.light-mode .events p,
body.light-mode .social-media p,
body.light-mode .feedback p,
body.light-mode .content-main p,
body.light-mode .wer-text p,
body.light-mode .contact-info-left p,
body.light-mode .contact-feedback-left p,
body.light-mode .sem-ticket-hero-left p,
body.light-mode .sem-ticket-info-block p,
body.light-mode .sem-ticket-info-block li,
body.light-mode .sem-ticket-important-block p,
body.light-mode .asta-info-text p,
body.light-mode .asta-member-right p,
body.light-mode .asta-publikationen-list p,
body.light-mode .asta-publikationen-list li,
body.light-mode .news-detail-teaser,
body.light-mode .news-detail-body,
body.light-mode .news-detail-body p,
body.light-mode .veranstaltungen-subtitle,
body.light-mode .burozeiten-subtitle {
    color: var(--lm-text-soft) !important;
}

body.light-mode .news-card-date,
body.light-mode .news-detail-date,
body.light-mode .news-detail-author,
body.light-mode .veranst-card-date,
body.light-mode .news-detail-category,
body.light-mode .asta-member-role {
    color: var(--lm-red-soft) !important;
}

body.light-mode .asta-member-photo--image {
    border-color: rgba(119, 40, 40, 0.26);
}

body.light-mode .contact-feedback-form input,
body.light-mode .contact-feedback-form textarea {
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--lm-text) !important;
    border: 1px solid var(--lm-border) !important;
}

body.light-mode .contact-feedback-form input::placeholder,
body.light-mode .contact-feedback-form textarea::placeholder {
    color: rgba(74, 58, 49, 0.6);
}

body.light-mode .burozeiten-content table.ce-table,
body.light-mode .office-hours table.ce-table,
body.light-mode .content-main table.ce-table {
    background: linear-gradient(180deg, #f9f6f1, #eee6dc) !important;
    border-color: var(--lm-border) !important;
}

body.light-mode .burozeiten-content table.ce-table thead tr th,
body.light-mode .office-hours table.ce-table thead tr th,
body.light-mode .content-main table.ce-table thead tr th,
body.light-mode .burozeiten-content table.ce-table tbody tr:first-child td,
body.light-mode .office-hours table.ce-table tbody tr:first-child td,
body.light-mode .content-main table.ce-table tbody tr:first-child td {
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.82), rgba(183, 85, 80, 0.72)) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    color: #ffffff !important;
}

body.light-mode .burozeiten-content table.ce-table tbody tr td,
body.light-mode .office-hours table.ce-table tbody tr td,
body.light-mode .content-main table.ce-table tbody tr td,
body.light-mode .burozeiten-content table.ce-table tbody tr td:first-child,
body.light-mode .office-hours table.ce-table tbody tr td:first-child,
body.light-mode .content-main table.ce-table tbody tr td:first-child {
    background: rgba(255, 255, 255, 0.66) !important;
    border-color: rgba(108, 86, 74, 0.2) !important;
    color: var(--lm-text) !important;
}

body.light-mode .burozeiten-content table.ce-table tbody tr:nth-child(even) td,
body.light-mode .office-hours table.ce-table tbody tr:nth-child(even) td,
body.light-mode .content-main table.ce-table tbody tr:nth-child(even) td,
body.light-mode .burozeiten-content table.ce-table tbody tr:nth-child(even) td:first-child,
body.light-mode .office-hours table.ce-table tbody tr:nth-child(even) td:first-child,
body.light-mode .content-main table.ce-table tbody tr:nth-child(even) td:first-child {
    background: rgba(239, 230, 220, 0.8) !important;
}

body.light-mode .burozeiten-content table.ce-table tbody tr:hover td,
body.light-mode .office-hours table.ce-table tbody tr:hover td,
body.light-mode .content-main table.ce-table tbody tr:hover td,
body.light-mode .burozeiten-content table.ce-table tbody tr:hover td:first-child,
body.light-mode .office-hours table.ce-table tbody tr:hover td:first-child,
body.light-mode .content-main table.ce-table tbody tr:hover td:first-child {
    background: rgba(208, 70, 67, 0.16) !important;
}

/* Remove square background panels for News and Veranstaltungen in light mode */
body.light-mode #news-section > .container,
body.light-mode .events .container,
body.light-mode .veranstaltungen-section,
body.light-mode .veranstaltungen-section .frame-type-news_pi1 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Explicit hard override for Veranstaltungen carousel wrapper layers */
body.light-mode #veranstaltungen-section,
body.light-mode #veranstaltungen-section > .container,
body.light-mode #veranstaltungen-section .container,
body.light-mode #veranstaltungen-section .frame,
body.light-mode #veranstaltungen-section .frame-type-news_pi1,
body.light-mode #veranstaltungen-section .news-list-page-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove extra light-mode panel behind calendar/table blocks */
body.light-mode .office-hours .container,
body.light-mode .contact-office-hours .container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Prevent the empty top-left header cell from showing as a white square */
body.light-mode .burozeiten-content table.ce-table thead tr th:first-child:empty,
body.light-mode .office-hours table.ce-table thead tr th:first-child:empty,
body.light-mode .content-main table.ce-table thead tr th:first-child:empty {
    background: linear-gradient(135deg, rgba(187, 0, 14, 0.82), rgba(183, 85, 80, 0.72)) !important;
    color: transparent !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

body.light-mode .site-nav-redesign__inner,
body.light-mode > header.header-inner .site-nav-redesign__inner,
body.light-mode > header.scrolled .site-nav-redesign__inner {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 244, 239, 0.9)) !important;
    border-color: rgba(119, 40, 40, 0.2) !important;
    box-shadow: 0 10px 28px rgba(114, 66, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.light-mode .site-nav-redesign__link,
body.light-mode .site-nav-redesign__lang-link,
body.light-mode .site-nav-redesign__submenu-link {
    color: var(--lm-text) !important;
}

body.light-mode .site-nav-redesign__submenu-toggle {
    color: var(--primary-red) !important;
}

body.light-mode button.site-nav-redesign__submenu-toggle,
body.light-mode button.site-nav-redesign__submenu-toggle *,
body.light-mode button.submenu-toggle,
body.light-mode button.submenu-toggle * {
    color: var(--primary-red) !important;
}

body.light-mode .site-nav-redesign__submenu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(119, 40, 40, 0.16) !important;
}

body.light-mode .site-nav-redesign__logo img,
body.light-mode > header.header-inner .site-nav-redesign__logo img,
body.light-mode > header.scrolled .site-nav-redesign__logo img {
    filter: brightness(0) !important;
}

/* Light mode button redesign: brighter, crisper, and matched to light surfaces */
body.light-mode .btn-primary,
body.light-mode .btn-social,
body.light-mode .news-readmore-btn,
body.light-mode .veranst-btn,
body.light-mode .angebote-readmore-btn,
body.light-mode .hero-content a,
body.light-mode .social-text > a,
body.light-mode .feedback-text > a,
body.light-mode .wer-text > a,
body.light-mode .social-text p a,
body.light-mode .feedback-text p a,
body.light-mode .wer-text p a,
body.light-mode .sem-ticket-hero-left a.btn-primary,
body.light-mode .sem-ticket-hero-left a.sem-ticket-cta,
body.light-mode .services-angebote-list .angebote-row-content a {
    background: linear-gradient(135deg, var(--lm-red-deep), var(--lm-red), var(--lm-red-bright)) !important;
    border: 1px solid rgba(143, 15, 31, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(143, 15, 31, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

body.light-mode .btn-primary:hover,
body.light-mode .btn-social:hover,
body.light-mode .news-readmore-btn:hover,
body.light-mode .veranst-btn:hover,
body.light-mode .angebote-readmore-btn:hover,
body.light-mode .hero-content a:hover,
body.light-mode .social-text > a:hover,
body.light-mode .feedback-text > a:hover,
body.light-mode .wer-text > a:hover,
body.light-mode .social-text p a:hover,
body.light-mode .feedback-text p a:hover,
body.light-mode .wer-text p a:hover,
body.light-mode .sem-ticket-hero-left a.btn-primary:hover,
body.light-mode .sem-ticket-hero-left a.sem-ticket-cta:hover,
body.light-mode .services-angebote-list .angebote-row-content a:hover {
    background: linear-gradient(135deg, #9f1326, #c10d1b, #d95c61) !important;
    border-color: rgba(143, 15, 31, 0.64) !important;
    box-shadow: 0 12px 24px rgba(143, 15, 31, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.22) inset !important;
    transform: translateY(-2px);
}

body.light-mode .btn-secondary,
body.light-mode .footer-legal-btn,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a) {
    background: linear-gradient(180deg, #fff9f8, #f6e9e6) !important;
    border: 1px solid rgba(183, 85, 80, 0.45) !important;
    color: var(--lm-red-deep) !important;
    box-shadow: 0 8px 16px rgba(143, 15, 31, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .btn-secondary:hover,
body.light-mode .footer-legal-btn:hover,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):hover {
    background: linear-gradient(180deg, #fff6f4, #f2dfdb) !important;
    border-color: rgba(143, 15, 31, 0.52) !important;
    color: var(--lm-red) !important;
    transform: translateY(-1px);
}

/* Ensure legal footer button labels are dark in light mode */
body.light-mode .footer-legal-btn,
body.light-mode .footer-legal-btn:visited,
body.light-mode .footer-legal-btn:hover,
body.light-mode .footer-legal-btn:focus,
body.light-mode .footer-legal-btn:active,
body.light-mode .footer-legal-btn *,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a),
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):visited,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):hover,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):focus,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):active,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a) * {
    color: #2a2420 !important;
}

body.light-mode .news-category-select {
    background: linear-gradient(180deg, #fff8f6, #f5e6e3) !important;
    border-color: rgba(183, 85, 80, 0.44) !important;
    color: var(--lm-red-deep) !important;
    box-shadow: 0 6px 14px rgba(143, 15, 31, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .news-category-select:focus,
body.light-mode .news-category-select:hover {
    background: linear-gradient(180deg, #fff4f2, #f1ddd9) !important;
    border-color: rgba(143, 15, 31, 0.5) !important;
    color: var(--lm-red) !important;
}

@media (max-width: 768px) {
    body.light-mode .services .container,
    body.light-mode .about .container,
    body.light-mode .events .container,
    body.light-mode .social-media .container,
    body.light-mode .feedback .container,
    body.light-mode .content-main .container,
    body.light-mode .office-hours .container,
    body.light-mode .contact-info-card,
    body.light-mode .contact-feedback-card,
    body.light-mode .sem-ticket-hero-card,
    body.light-mode .sem-ticket-info-block,
    body.light-mode .sem-ticket-important-block,
    body.light-mode .asta-info .container,
    body.light-mode .asta-selfconception .container,
    body.light-mode .asta-vergabe .container,
    body.light-mode .asta-selbst .container,
    body.light-mode .asta-publikationen .container,
    body.light-mode .wer-wir-sind .container,
    body.light-mode .footer-content {
        border-radius: 1rem;
    }
}

/* Final headline lock for light mode: use main brand red everywhere */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .section-title,
body.light-mode .news-list-heading,
body.light-mode .veranstaltungen-list-heading,
body.light-mode .news-carousel-heading,
body.light-mode .veranstaltungen-heading,
body.light-mode .angebote-title,
body.light-mode .burozeiten-title,
body.light-mode .article .news-card-header h3,
body.light-mode .veranst-card-title h3,
body.light-mode .angebote-card-title,
body.light-mode .service-card h3,
body.light-mode .asta-member-right h3,
body.light-mode .news-detail-title,
body.light-mode .news-detail-back-link,
body.light-mode .services-angebote-list .angebote-row-content > header h1,
body.light-mode .services-angebote-list .angebote-row-content > header h2,
body.light-mode .services-angebote-list .angebote-row-content > header h3 {
    color: #1c1c1c !important;
}

body.light-mode .article .news-card-header h3 a,
body.light-mode .veranst-card-title h3 a,
body.light-mode .news-detail-back-link,
body.light-mode .news-detail-back-link:visited {
    color: #1c1c1c !important;
}

body.light-mode .news-carousel-heading::before,
body.light-mode .veranstaltungen-heading::before,
body.light-mode .burozeiten-title::before,
body.light-mode .sem-ticket-title::before {
    color: #1c1c1c !important;
}

body.light-mode .news-carousel-heading::after,
body.light-mode .veranstaltungen-heading::after,
body.light-mode .angebote-title::after,
body.light-mode .burozeiten-title::after,
body.light-mode .news-list-heading::after,
body.light-mode .veranstaltungen-list-heading::after,
body.light-mode .section-title::after,
body.light-mode .social-text h2::after,
body.light-mode .feedback-text h2::after,
body.light-mode .wer-text h2::after,
body.light-mode .contact-feedback-left h2::after,
body.light-mode .sem-ticket-title::after,
body.light-mode .asta-info h2::after,
body.light-mode .asta-selfconception h2::after,
body.light-mode .asta-vergabe h2::after,
body.light-mode .asta-selbst h2::after,
body.light-mode .asta-publikationen h2::after {
    background: linear-gradient(90deg, rgba(28, 28, 28, 0.9), rgba(28, 28, 28, 0.45));
    box-shadow: none;
}

/* Keep AStA hero headline in brand red on light mode */
body.light-mode .hero-title,
body.light-mode .hero-content h1,
body.light-mode .asta-hero-left h1,
body.light-mode .asta-hero-content h1 {
    color: var(--primary-red) !important;
}

/* Final light-mode footer text lock: keep footer labels/links red */
body.light-mode footer p,
body.light-mode footer li,
body.light-mode footer h1,
body.light-mode footer h2,
body.light-mode footer h3,
body.light-mode footer h4,
body.light-mode footer h5,
body.light-mode footer h6,
body.light-mode footer a,
body.light-mode footer a:visited,
body.light-mode footer a:hover,
body.light-mode footer a:focus,
body.light-mode footer a:active,
body.light-mode .footer-legal-btn,
body.light-mode .footer-legal-btn:visited,
body.light-mode .footer-legal-btn:hover,
body.light-mode .footer-legal-btn:focus,
body.light-mode .footer-legal-btn:active,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a),
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):visited,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):hover,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):focus,
body.light-mode .footer-bottom a:not(.footer-item a):not(.copyright a):active,
body.light-mode footer a *,
body.light-mode .footer-legal-btn * {
    color: #8c0000 !important;
}

/* Keep theme switch icons permanently red in all modes/states */
.theme-toggle .theme-toggle-icon,
.theme-toggle:hover .theme-toggle-icon,
.theme-toggle:focus .theme-toggle-icon,
.theme-toggle:active .theme-toggle-icon,
body.light-mode .theme-toggle .theme-toggle-icon,
body:not(.light-mode) .theme-toggle .theme-toggle-icon {
    color: var(--primary-red) !important;
}

.theme-toggle .theme-toggle-icon svg.icon-sun {
    stroke: currentColor !important;
    fill: none !important;
}

.theme-toggle .theme-toggle-icon svg.icon-moon {
    fill: currentColor !important;
    stroke: none !important;
}

.theme-toggle .theme-toggle-icon svg.icon-sun,
.theme-toggle .theme-toggle-icon svg.icon-sun * {
    stroke: #bb000e !important;
}

.theme-toggle .theme-toggle-icon svg.icon-sun,
.theme-toggle .theme-toggle-icon svg.icon-sun circle,
.theme-toggle .theme-toggle-icon svg.icon-sun line {
    fill: none !important;
}

.theme-toggle .theme-toggle-icon svg.icon-moon,
.theme-toggle .theme-toggle-icon svg.icon-moon path,
.theme-toggle .theme-toggle-icon svg.icon-moon * {
    fill: #bb000e !important;
    stroke: none !important;
}