/**
 * ==========================================================================
 * USER.CSS - CUSTOM JOOMLA TEMPLATE STYLES
 * ==========================================================================
 * @description Haupt-Stylesheet für individuelle Anpassungen des Joomla-Templates.
 *              Fokus auf Mobile First, Performance und Barrierefreiheit (WCAG).
 * ==========================================================================
 */

/* ==========================================================================
   01. WEBFONTS
   ========================================================================== */
@font-face {
    font-family: 'Gotham';
    src: url('/assets/fonts/Gotham-Book.eot');
    src: url('/assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/Gotham-Book.woff2') format('woff2'),
         url('/assets/fonts/Gotham-Book.woff') format('woff'),
         url('/assets/fonts/Gotham-Book.ttf') format('truetype'),
         url('/assets/fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('/assets/fonts/Gotham-Bold.eot');
    src: url('/assets/fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/Gotham-Bold.woff2') format('woff2'),
         url('/assets/fonts/Gotham-Bold.woff') format('woff'),
         url('/assets/fonts/Gotham-Bold.ttf') format('truetype'),
         url('/assets/fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   02. VARIABLEN (Design Tokens)
   ========================================================================== */
:root {
    /* Typografie */
    --mengentext: 'Gotham', Arial, sans-serif;
    --headline: 'Gotham', Arial, sans-serif;
    --headlineLight: 'Gotham', Arial, sans-serif;
    --bold: 'Gotham', Arial, sans-serif;

    /* Schriftgrößen (Skalierbar über rem) */
    --font60: 3.75rem; 
    --font45: 2.8125rem; 
    --font40: 2.5rem; 
    --font35: 2.1875rem; 
    --font32: 2rem; 
    --font30: 1.875rem; 
    --font25: 1.5625rem; 
    --font19: 1.1875rem; 
    --font17: 1.0625rem; 
    --font14: 0.875rem; 

    /* Farben */
    --transparent: rgba(255, 255, 255, 0.5);
    --weiss: #fff;
    --hellgrau: #dfdfdf;
    --udgGelb: #fecc00;
    --udgBlau: #333030; /* wurde nachträglich geändert */
    --gruen: #08e012;
    --rot: #d90e2b;
    --dunkel: #333030;
    --titleHeading: #333030;
    --focusColor: #ff8c00; 

    /* Verläufe (Gradients) */
    --gradient: linear-gradient(45deg, rgba(15,28,90,1) 0%, rgba(43,114,183,1) 100%);
    --bg-gradient-fallback: linear-gradient(315deg, hsla(0, 0%, 91%, 1) 0%, hsla(0, 0%, 72%, 1) 100%);

    /* Radien (Border-Radius) */
    --infoboxenRadius: 4px;
    --radius5: 5px;

    /* Schatten */
    --schattenNormal: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --schattenHover: rgba(0, 0, 0, 0.08) 0px 12px 24px -4px, rgba(0, 0, 0, 0.04) 0px 8px 12px -4px;
    --schattenSchrift: 1px 0px 5px rgba(0, 0, 0, 0.6);
    --paginationSchatten: rgba(254, 204, 0, 0.5);

    /* Animationen & Layout / Grid */
    --bewegung: all 300ms cubic-bezier(0.180, 0.745, 0.480, 0.635);
    --zoom: 1.04;
    --grid-gap: 30px;
    --innen15: 15px;
    --innen30: 30px;
}

/* ==========================================================================
   03. ACCESSIBILITY (A11Y) & RESETS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 3px solid var(--focusColor);
    outline-offset: 3px;
}

.sr-only, .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   04. BASIS LAYOUT & HEADER/FOOTER
   ========================================================================== */
body {
    font-family: var(--mengentext);
    font-size: var(--font17);
    line-height: 1.6;
    color: var(--dunkel);
    margin: 0;
    background: linear-gradient(45deg, #e9eaec 0%, #fff 80%);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

h1, h2, h3, h4 {
    font-family: var(--headline);
    font-weight: 700;
}

#top > header {
    background-color: var(--weiss);
}

#main-header {
    position: relative;
    width: 100%;
    background-color: var(--udgBlau);
    background-image: url("../../../../../images/template/header.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--weiss);
    font-family: var(--mengentext);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    padding: 15px 0;
}

#main-footer {
    background: var(--dunkel);
    color: var(--hellgrau);
    padding: 40px 0;
}

.footer {
    margin-top: 0;
}

/* ==========================================================================
   05. MOBILE FIRST GRID SYSTEM (UDG Grid)
   ========================================================================== */
.udg-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-right: calc(var(--grid-gap) / 2);
    padding-left: calc(var(--grid-gap) / 2);
}

.udg-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.udg-col {
    position: relative;
    width: 100%;
    padding-right: calc(var(--grid-gap) / 2);
    padding-left: calc(var(--grid-gap) / 2);
}

#top-a .udg-col {
    padding: 0;
}

.udg-col-12, .udg-col-xs-12, .udg-col-md-12, .udg-col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.udg-row.module-content .udg-col {
    padding-left: 0;
    padding-right: 0;
}

/* Mobile (xs) */
@media (max-width: 767px) {
    .udg-col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .udg-col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .udg-col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .udg-col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .udg-col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .udg-col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .udg-col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .udg-col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .udg-col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .udg-col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .udg-col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
}

/* Tablet (md) */
@media (min-width: 768px) {
    .udg-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .udg-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .udg-col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .udg-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .udg-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .udg-col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .udg-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .udg-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .udg-col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .udg-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .udg-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
}

/* Desktop (lg) */
@media (min-width: 992px) {
    .udg-col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .udg-col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .udg-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .udg-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .udg-col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .udg-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .udg-col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .udg-col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .udg-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .udg-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .udg-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
}

/* ==========================================================================
   06. TYPOGRAFIE & UTILITIES
   ========================================================================== */
.title-primary {
    font-family: var(--headline);
    font-weight: 700;
    font-size: calc(var(--font40) * 0.8);
    color: var(--titleHeading);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
}

.title-secondary {
    font-family: var(--headlineLight);
    font-size: calc(var(--font30) * 0.9);
    color: var(--udgBlau);
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .title-primary { font-size: var(--font60); }
    .title-secondary { font-size: var(--font40); }
}

.text-highlight {
    font-family: var(--bold);
    color: var(--udgGelb);
}

.udg-subtitle { font-size: var(--font19); }
.udg-content-list { padding-left: 20px; }
.udg-content-list--compact { margin: 0; padding-left: 20px; }

.innen30 {
    padding: var(--innen30);
    background-color: var(--weiss);
}

/* Abstände (Spacing Utilities) */
.udg-mt-20 { margin-top: 20px; }
.udg-mt-30 { margin-top: 30px; }
.udg-mt-40 { margin-top: 40px; }
.udg-mb-15 { margin-bottom: 15px; }
.udg-mb-20 { margin-bottom: 20px; }
.udg-mb-40 { margin-bottom: 40px; }

/* SEO Breadcrumb Navigation */
.seo-breadcrumb-nav {
    font-size: var(--font14);
    font-family: var(--mengentext);
}

.seo-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.seo-breadcrumb-list li a {
    color: var(--udgBlau);
    text-decoration: none;
    transition: var(--bewegung);
}

.seo-breadcrumb-list li a:hover {
    text-decoration: underline;
    color: var(--dunkel);
}

.seo-breadcrumb-sep {
    color: var(--hellgrau);
    font-weight: bold;
    user-select: none;
}

.seo-breadcrumb-list li span[aria-current="page"] {
    color: var(--dunkel);
    font-weight: bold;
}

/* ==========================================================================
   07. UI-KOMPONENTEN (Buttons, Infoboxen, Hero)
   ========================================================================== */
.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--udgGelb);
    color: var(--dunkel);
    font-family: var(--bold);
    font-size: var(--font19);
    padding: 12px 28px;
    border-radius: var(--infoboxenRadius);
    text-decoration: none;
    transition: var(--bewegung);
    box-shadow: var(--schattenNormal);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--udgBlau);
    color: var(--weiss);
    box-shadow: var(--schattenHover);
    transform: scale(var(--zoom));
}

@media (hover: none) {
    .btn-primary:hover, .udg-infobox:hover {
        transform: none;
    }
}

.udg-infobox {
    background-color: var(--weiss);
    border-radius: var(--infoboxenRadius);
    box-shadow: var(--schattenNormal);
    padding: 30px;
    transition: var(--bewegung);
    border-top: 4px solid var(--udgBlau);
}

.udg-infobox:hover {
    box-shadow: var(--schattenHover);
    transform: translateY(-5px);
}

.udg-infobox--stretch { height: 100%; }
.udg-infobox--no-border { border-top: none; }
.udg-infobox--highlight { border-top: 4px solid var(--rot); }

.hero-section {
    background: var(--gradient);
    color: var(--weiss);
    padding: 40px 20px;
    border-radius: var(--infoboxenRadius);
    text-shadow: var(--schattenSchrift);
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .hero-section { padding: 80px 40px; }
}

/* ==========================================================================
   08. BLOG & AKTUELLES (Kachel-Layout)
   ========================================================================== */
.blog-grid-override { padding: 0; }

.blog-grid-override .article-grid,
.article-grid.view-grid,
.article-grid.view-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .blog-grid-override .article-grid,
    .blog-grid-override .article-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid-override .article-grid,
    .blog-grid-override .article-grid.view-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.article-card {
    position: relative !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover, .article-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.article-card .stretched-link::after,
.article-card .card-click-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    content: "";
    background-color: transparent;
    cursor: pointer;
}

.article-card .card-media {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #2c3e50;
}

.article-card .card-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .card-media img {
    transform: scale(1.03);
}

.article-card .card-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    z-index: 2;
}

.card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.article-card .card-body .card-title,
.article-card .card-body .card-title a {
    color: var(--dunkel) !important;
    text-decoration: none;
}

.article-card:hover .card-body .card-title a {
    color: var(--udgBlau) !important;
}

.article-card .card-actions {
    margin-top: auto;
    position: relative;
    z-index: 1;
    background: #fff;
    padding-top: 1rem;
}

.article-card .btn-readmore, .article-card .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
    background-color: var(--udgGelb) !important;
    color: var(--dunkel) !important;
    padding: 10px 20px;
    border-radius: var(--infoboxenRadius);
    text-decoration: none;
    border: none !important;
    cursor: pointer;
}

.article-card:hover .btn-readmore, .article-card:hover .btn-primary {
    background-color: var(--udgBlau) !important;
    color: var(--weiss) !important;
    border-color: var(--udgBlau) !important;
    filter: none;
    text-decoration: none;
}

.article-card .btn-primary i {
    color: var(--dunkel);
    transition: color 0.2s ease;
}

.article-card:hover .btn-primary i {
    color: var(--weiss);
}

/* Grid / List Toggle */
.view-controls {
    display: flex;
    gap: 8px;
    background: var(--hellgrau);
    padding: 5px;
    border-radius: var(--radius5);
}

.btn-view-toggle {
    background: transparent;
    border: none;
    color: var(--dunkel);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--bewegung);
    font-size: 1.2rem;
}

.btn-view-toggle:focus-visible { outline: 2px solid var(--focusColor); }
.btn-view-toggle:hover, .btn-view-toggle.active {
    background: var(--weiss);
    color: var(--udgBlau);
    box-shadow: var(--schattenNormal);
}

@media (min-width: 768px) {
    .article-grid.view-list .article-card { flex-direction: row; align-items: stretch; min-height: 180px; }
    .article-grid.view-list .card-media { flex: 0 0 30%; padding-top: 0; aspect-ratio: auto; }
    .article-grid.view-list .card-media img { height: 100%; position: relative; }
    .article-grid.view-list .card-body { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; gap: 20px; }
    .article-grid.view-list .card-content-main { flex: 1; }
    .article-grid.view-list .card-title { margin: 0; font-size: var(--font25); }
    .article-grid.view-list .card-actions { flex-shrink: 0; margin-top: 0; padding: 0; background: transparent; }
}

@media (max-width: 767px) {
    .article-grid.view-list .article-card { flex-direction: column; }
    .article-grid.view-list .card-actions,
    .article-grid.view-list .btn-primary { width: 100%; }
}

/* ==========================================================================
   09. AKTUELLES BEITRAG OVERRIDE (Detailseite)
   ========================================================================== */
.udg-section { padding: 3rem 0; }
.udg-section .title-secondary {
    background-color: var(--dunkel);
    color: var(--weiss);
    padding: 20px;
    border-radius: var(--radius5);
}

.article-image-wrapper {
    position: sticky;
    top: 2rem;
    margin-bottom: 2rem;
    background: var(--hellgrau);
    border-radius: var(--infoboxenRadius);
    box-shadow: var(--schattenNormal);
    overflow: hidden;
}

.article-image-link { display: block; overflow: hidden; }
.modern-image {
    width: 100%;
    display: block;
    transition: var(--bewegung);
    object-fit: cover;
}

.article-image-link:hover .modern-image { transform: scale(var(--zoom)); }
.image-caption {
    font-size: var(--font14);
    color: var(--dunkel);
    padding: 12px 15px;
    margin: 0;
    display: block;
    font-style: italic;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    background-color: var(--weiss);
}

@media (min-width: 992px) {
    .content-spacing-desktop { padding-left: 4rem !important; }
}

.gender-suffix {
    font-size: 0.5em;
    font-weight: 300;
    white-space: nowrap;
    opacity: 0.85;
    vertical-align: middle;
    margin-left: 0.25em;
    font-family: var(--headlineLight);
}

/* Beitrags-Aktionen */
.actions-inline-container {
    width: 100%;
    margin-top: 3rem;
    padding: 2rem;
    border-top: 2px solid var(--hellgrau);
    background-color: var(--weiss);
    border-radius: var(--infoboxenRadius);
}

.actions-title {
    font-family: var(--headline);
    font-size: var(--font30);
    color: #333;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.actions-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.action-btn {
    flex: 1 1 calc(50% - 20px);
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 15px 20px;
    gap: 8px;
    background-color: var(--udgGelb) !important;
    color: var(--dunkel) !important;
}

.action-btn:hover {
    background-color: var(--udgBlau) !important;
    color: var(--weiss) !important;
    transform: none !important;
}

.action-btn-top { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 15px; }
.action-btn-text { white-space: normal; word-break: break-word; line-height: 1.2; }
.action-btn i { color: var(--dunkel); transition: var(--bewegung); }
.action-btn:hover i { color: var(--weiss); }
.action-btn-desc {
    font-family: var(--mengentext);
    font-size: var(--font14);
    font-weight: normal;
    color: rgba(51, 48, 48, 0.85);
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    transition: var(--bewegung);
}
.action-btn:hover .action-btn-desc { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   10. MODAL (CSS Only Lightbox)
   ========================================================================== */
.css-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(51, 48, 48, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.css-modal:target { display: flex; }
.css-modal-overlay, button.css-modal-overlay {
    appearance: none; -webkit-appearance: none; border: none; padding: 0; margin: 0;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    cursor: zoom-out; z-index: -1;
}

.css-modal-content { position: relative; max-width: 90vw; max-height: 90vh; }
.css-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--infoboxenRadius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    object-fit: contain;
}

.css-modal-close {
    position: absolute; top: -20px; right: -20px;
    background: var(--weiss);
    color: var(--dunkel);
    width: 40px; height: 40px;
    border-radius: 50%;
    text-align: center; line-height: 40px; font-size: 1.8rem;
    text-decoration: none; box-shadow: var(--schattenNormal);
    transition: var(--bewegung); font-family: var(--bold);
}
.css-modal-close:hover { background: var(--udgGelb); color: var(--dunkel); transform: scale(var(--zoom)); }

/* ==========================================================================
   11. PREISLISTE TABELLE
   ========================================================================== */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 2rem; }
.udg-table { width: 100%; border-collapse: collapse; background-color: #fff; color: #333; font-family: inherit; }
.udg-table thead th { background-color: #343a40; color: #fff; padding: 16px; text-align: left; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; border: none; }
.udg-table tbody th, .udg-table tbody td { padding: 14px 16px; border-bottom: 1px solid #dee2e6; vertical-align: middle; font-size: 1rem; line-height: 1.5; }
.udg-table tbody th[scope="row"] { font-weight: normal; text-align: left; }
.udg-table tbody tr:nth-of-type(even) { background-color: #f8f9fa; }
.udg-table tbody tr:nth-of-type(odd) { background-color: #fff; }
.udg-table tbody tr:hover { background-color: #e9ecef; }

@media screen and (max-width: 768px) {
    .udg-table { border: 0; }
    .udg-table thead { clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    .udg-table tr { display: block; margin-bottom: 1.5rem; border: 1px solid #dee2e6; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background-color: #fff !important; }
    .udg-table tbody th, .udg-table tbody td { display: flex; justify-content: space-between; align-items: flex-start; text-align: right; padding: 12px 16px; border-bottom: 1px solid #eee; }
    .udg-table tbody td:last-child { border-bottom: 0; }
    .udg-table tbody th::before, .udg-table tbody td::before { content: attr(data-label); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; color: #343a40; padding-right: 15px; text-align: left; flex-basis: 45%; flex-shrink: 0; }
}

.price-grid .card { transition: var(--bewegung); background: #fdfdfd; }
.price-grid .card:hover { background: var(--weiss); box-shadow: var(--schattenHover) !important; }
.wh-header-section { border-bottom: 2px solid var(--udgGelb); padding-bottom: 15px; }
.udg-col .card { border-radius: var(--infoboxenRadius); border: 1px solid var(--hellgrau); }

/* ==========================================================================
   12. UDG APP LANDINGPAGE ADD-ON
   ========================================================================== */
.udg-lp-section { background-color: var(--weiss); overflow: hidden; }
.udg-lp-hero { background-color: #333; padding: 6rem 0 4rem 0; position: relative; }
.udg-lp-badge { display: inline-block; background-color: var(--udgGelb); color: var(--dunkel); font-family: var(--bold); padding: 6px 16px; border-radius: 30px; font-size: var(--font14); text-transform: uppercase; margin-bottom: 2rem; box-shadow: var(--schattenNormal); }
.udg-lp-lead { font-size: var(--font19); line-height: 1.6; margin-bottom: 3rem; color: rgba(255, 255, 255, 0.9); font-family: var(--mengentext); }
.udg-lp-cta-group { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 2rem; }
.udg-lp-btn { display: flex; align-items: center; gap: 12px; padding: 16px 32px; font-size: var(--font19); border-radius: 50px; border: 2px solid var(--udgGelb); }
.udg-lp-btn-outline { background-color: transparent; color: var(--weiss); border: 2px solid var(--weiss); box-shadow: none; }
.udg-lp-btn-outline:hover { background-color: var(--weiss); color: var(--udgBlau); border-color: var(--weiss); }
.udg-lp-image-wrapper { perspective: 1000px; }
.udg-lp-hero-img { max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); transform: rotateY(-5deg) translateY(10px); transition: var(--bewegung); }
.udg-lp-hero-img:hover { transform: rotateY(0deg) translateY(0); }
.udg-lp-features { padding: 5rem 0; background-color: #fcfcfc; }
.udg-lp-feature-card { text-align: center; padding: 40px 30px; border-top: none; border-bottom: 4px solid var(--udgGelb); height: 100%; display: flex; flex-direction: column; align-items: center; }
.udg-lp-feature-card p { margin-bottom: 0; font-size: var(--font17); }

@media screen and (max-width: 992px) {
    .udg-lp-hero { text-align: center; padding: 4rem 0; }
    .udg-lp-cta-group { justify-content: center; }
    .udg-lp-hero-img { margin-top: 3rem; transform: none; }
    .udg-col-md-4 { margin-bottom: 30px; }
}

/* ==========================================================================
   13. ENTSORGERLEISTUNG KACHEL-LAYOUT
   ========================================================================== */
.entsorger-card { position: relative; display: flex; flex-direction: column; text-align: left; align-items: stretch; padding: 30px; height: 100%; }
.entsorger-header { background-color: var(--dunkel); color: var(--weiss); padding: 15px 20px; display: flex; align-items: center; gap: 15px; border-radius: var(--infoboxenRadius); margin-bottom: 20px; }
.entsorger-header i { font-size: 1.5rem; flex-shrink: 0; }
.entsorger-title { background: none !important; color: var(--weiss) !important; padding: 0 !important; margin: 0 !important; font-size: 1.1rem !important; line-height: 1.3; }
.entsorger-text { margin-bottom: 25px; text-align: left; }
.entsorger-footer { margin-top: auto; width: 100%; text-align: left; }

/* ==========================================================================
   14. SPERRMÜLL-FORMULAR
   ========================================================================== */
.com-sperrmuell.form-container { width: 100%; }
.udg-form-sections { display: flex; flex-direction: column; gap: 40px; }
.udg-form-grid-2col { display: grid; grid-template-columns: 1fr; gap: 15px; }

@media (min-width: 992px) {
    .udg-form-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 15px 40px; }
    .udg-form-grid-3col { grid-template-columns: repeat(3, 1fr); }
}

.form-flex-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 8px 0; border-bottom: 1px solid var(--hellgrau); }
.form-input-number { width: 80px; flex-shrink: 0; }
.form-flex-row-stacked { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }

@media (min-width: 768px) {
    .form-flex-row-stacked { flex-direction: row; align-items: center; gap: 20px; }
    .form-label-wide { flex: 0 0 250px; font-family: var(--bold); }
    .form-input-wide { flex: 1; }
    .udg-form-grid-3col { grid-template-columns: repeat(2, 1fr); gap: 15px 40px; }
}

.form-label-full { font-family: var(--bold); margin-bottom: 5px; }
.form-input-full { width: 100%; }
.form-input-full textarea { width: 100%; resize: vertical; }
.form-checkbox-group { display: flex; align-items: flex-start; gap: 15px; }
.form-checkbox-input { padding-top: 4px; }
.form-checkbox-label { line-height: 1.5; }
.udg-form-hint { background-color: var(--dunkel); color: var(--weiss); padding: var(--innen15); border-radius: var(--radius5); border-left: 4px solid var(--udgGelb); }
.udg-form-hint strong { display: block; font-family: var(--headline); margin-bottom: 10px; }
.udg-form-hint p { margin: 0; }
.form-error-msg { display: block; margin-top: 5px; font-size: var(--font14); font-family: var(--bold); }

.udg-form-grid-3col { display: grid; grid-template-columns: 1fr; gap: 15px; }

/* ==========================================================================
   15. FUHRPARK GALERIE (50/50 Zig-Zag Layout)
   ========================================================================== */
.fuhrpark-dynamic-container { overflow: hidden; }
.fuhrpark-item { margin-bottom: 3rem; animation: fadeIn 0.5s ease-in-out forwards; }
.fuhrpark-dynamic-card { display: flex; flex-direction: column; background-color: #fff; border: 1px solid #eaeaea; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.fuhrpark-dynamic-card:focus-within, .fuhrpark-dynamic-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.dynamic-image-wrap { flex: 1 1 100%; }
.dynamic-image-wrap figure { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.dynamic-image-wrap figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 0.6s ease; }
.fuhrpark-dynamic-card:hover .dynamic-image-wrap figure img, .fuhrpark-dynamic-card:focus-within .dynamic-image-wrap figure img { transform: scale(1.03); }
.dynamic-content-wrap { flex: 1 1 100%; display: flex; align-items: center; }
.content-inner { padding: 2rem; width: 100%; }
.content-inner h3 { font-family: var(--headline); font-size: var(--font25, 1.5rem); color: var(--titleHeading); margin-top: 0; margin-bottom: 1rem; line-height: 1.3; }
.fuhrpark-beschreibung { font-family: var(--mengentext); font-size: var(--font17, 1rem); color: var(--dunkel); line-height: 1.6; }
.fuhrpark-beschreibung ul { margin-top: 1rem; padding-left: 1.5rem; }
.fuhrpark-beschreibung li { margin-bottom: 0.5rem; }

@media (min-width: 992px) {
    .fuhrpark-dynamic-card { flex-direction: row; }
    .dynamic-image-wrap, .dynamic-content-wrap { flex: 0 0 50%; max-width: 50%; }
    .content-inner { padding: 3rem; }
    .fuhrpark-item.is-even .fuhrpark-dynamic-card { flex-direction: row-reverse; }
}

.fuhrpark-filter-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2rem; margin-bottom: 3.5rem; }
.fuhrpark-filter-btn { background-color: #f4f4f4; color: #333; border: 1px solid #ddd; padding: 10px 22px; border-radius: 4px; font-family: var(--bold); font-size: var(--font16, 1rem); cursor: pointer; transition: all 0.2s ease; }
.fuhrpark-filter-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; background-color: var(--udgBlau, #0056b3); color: #fff; border-color: transparent; }
.fuhrpark-filter-btn:hover { background-color: var(--udgBlau, #0056b3); color: #fff; border-color: var(--udgBlau, #0056b3); }
.fuhrpark-filter-btn.active { background-color: var(--udgGelb, #ffc107); color: #000; border-color: var(--udgGelb, #ffc107); font-weight: bold; }
.fuhrpark-item.is-hidden { display: none !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   16. JW SIMPLE IMAGE GALLERY OVERRIDE
   ========================================================================== */
ul.sigFreeContainer { display: grid !important; grid-template-columns: 1fr; gap: var(--grid-gap, 30px); width: 100%; max-width: 100%; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { ul.sigFreeContainer { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { ul.sigFreeContainer { grid-template-columns: repeat(4, 1fr); } }

li.sigFreeThumb { display: block; margin: 0 !important; padding: 0 !important; border-radius: var(--infoboxenRadius); overflow: hidden; box-shadow: var(--schattenNormal); transition: var(--bewegung); background-color: var(--weiss); }
li.sigFreeThumb:hover, li.sigFreeThumb:focus-within { transform: translateY(-4px); box-shadow: var(--schattenHover); }
a.sigFreeLink { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; text-decoration: none; overflow: hidden; }
a.sigFreeLink:focus-visible { outline: 3px solid var(--focusColor); outline-offset: -3px; }
img.sigFreeImg { width: 100% !important; height: 100% !important; display: block; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transition: transform 0.3s ease !important; border: none !important; padding: 0 !important; }
li.sigFreeThumb:hover img.sigFreeImg { transform: scale(var(--zoom)); }
li.sigFreeClear { display: none !important; }

/* ==========================================================================
   17. KARRIERE LANDINGPAGE & JOB POSTINGS
   ========================================================================== */
.karriere-page { overflow: visible !important; }
.karriere-intro { background: var(--weiss); padding: 60px 0 70px; }
.karriere-intro-inner { max-width: 900px; }
.karriere-lead { font-family: var(--mengentext); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.6; margin-bottom: 20px; }
.karriere-intro-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 35px; }
.karriere-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; border: 2px solid var(--udgBlau); border-radius: var(--infoboxenRadius); color: var(--udgBlau); font-family: var(--bold); text-decoration: none; transition: var(--bewegung); }
.karriere-btn-secondary:hover { background-color: var(--udgBlau); color: var(--weiss); }
.karriere-section-header { max-width: 850px; margin-bottom: 40px; }
.karriere-section-header p { font-size: var(--font19); }

.karriere-benefits { padding: 70px 0; background-color: #f7f7f7; }
.karriere-benefit { height: 100%; margin-bottom: 30px; transition: var(--bewegung); }
.karriere-benefit:hover { transform: translateY(-5px); }
.karriere-benefit-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background-color: var(--udgGelb); color: var(--dunkel); border-radius: 50%; font-size: 1.35rem; }
.karriere-benefit h3 { font-size: var(--font25); margin-top: 0; margin-bottom: 12px; }

.udg-job-layout-container { display: flex; flex-direction: column; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.udg-job-sidebar { width: 100%; position: -webkit-sticky; position: sticky; top: 40px; align-self: flex-start; height: auto; z-index: 10; }

@media (min-width: 992px) {
    .udg-job-layout-container { flex-direction: row; align-items: flex-start; }
    .udg-job-main-content { flex: 1 1 65%; padding-right: 2rem; }
    .udg-job-sidebar { flex: 1 1 35%; max-width: 380px; }
}

.job-section { margin-bottom: 4rem; }
.job-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.job-meta-badge { background-color: var(--udgBlau); color: var(--weiss); font-size: var(--font14); font-family: var(--bold); padding: 4px 12px; border-radius: var(--radius5); text-transform: uppercase; letter-spacing: 0.5px; }
.job-meta-items { display: flex; flex-wrap: wrap; gap: 20px; }
.job-meta-item { display: inline-flex; align-items: center; font-size: var(--font14); color: var(--dunkel); font-family: var(--bold); }
.job-meta-item svg { margin-right: 5px; }

.job-hero-box { background-color: var(--hellgrau); border-left: 4px solid var(--udgBlau); padding: var(--innen30); border-radius: 0 var(--radius5) var(--radius5) 0; }
.job-hero-pretitle { font-size: var(--font17); color: var(--dunkel); margin-bottom: 10px; line-height: 1.4; font-family: var(--mengentext); }
.job-hero-pretitle strong { font-family: var(--bold); }
.job-heading { font-family: var(--headline); font-size: var(--font25); color: var(--titleHeading); margin: 0 0 10px 0; padding: 0; background: transparent; }
.job-accent-bar { width: 40px; height: 3px; background-color: var(--udgGelb); margin-bottom: 20px; border-radius: 2px; }

.job-bullet-list ul { list-style: none; padding: 0; margin: 0; }
.job-bullet-list ul li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: var(--font17); line-height: 1.5; color: var(--dunkel); }
.job-bullet-list ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background-color: var(--udgBlau); border-radius: 0; }

.udg-info-alert { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--weiss); border-left: 5px solid var(--udgBlau, #0056b3); padding: 1.25rem 1.5rem; border-radius: 4px; margin-bottom: 1.5rem; }
.udg-info-icon { flex-shrink: 0; margin-top: 2px; }
.udg-info-content strong { display: block; font-size: 1.15rem; margin-bottom: 0.35rem; color: var(--body-color, #333); font-weight: bold; }
.udg-info-content p { margin: 0; font-size: 0.95rem; color: var(--body-color, #444); line-height: 1.5; }

.job-form-wrapper, .job-contact-card { background: #f9f9f9; padding: 1.5rem; border-radius: 6px; border: 1px solid #e1e1e1; overflow: hidden; }
.job-contact-card { background-color: var(--weiss); border: 1px solid var(--hellgrau); padding: 0; }
.job-contact-header { background-color: #f8f9fa; padding: 15px 20px; font-size: var(--font17); font-family: var(--bold); color: var(--udgBlau); display: flex; align-items: center; border-bottom: 1px solid var(--hellgrau); }
.job-contact-header svg { margin-right: 10px; }
.job-contact-body { padding: 20px; }
.job-contact-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--titleHeading); }
.job-contact-role { font-size: var(--font14); color: rgba(51, 48, 48, 0.7); }
.job-contact-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-top: 15px; border-top: 1px dashed var(--hellgrau); }
.job-contact-link { display: flex; align-items: center; gap: 0.75rem; color: var(--body-color, #333); text-decoration: none; font-size: 0.95rem; word-break: break-word; line-height: 1.4; transition: var(--bewegung); font-family: var(--bold); }
.job-contact-link:hover, .job-contact-link:focus { color: var(--udgBlau); text-decoration: underline; }
.job-contact-link svg { margin-right: 10px; flex-shrink: 0; }

.karriere-jobs { padding: 70px 0; background-color: var(--weiss); }
.karriere-jobs--alt { background-color: #f7f7f7; }
.karriere-jobs-list { display: flex; flex-direction: column; gap: 20px; }
.karriere-job { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px; background-color: var(--weiss); border: 1px solid var(--hellgrau); border-left: 5px solid var(--udgBlau); border-radius: var(--infoboxenRadius); box-shadow: var(--schattenNormal); transition: var(--bewegung); }
.karriere-job:hover, .karriere-job:focus-within { box-shadow: var(--schattenHover); transform: translateY(-3px); }
.karriere-job-main { min-width: 0; }
.karriere-job-type { display: inline-block; margin-bottom: 10px; padding: 5px 12px; background-color: var(--udgGelb); color: var(--dunkel); border-radius: var(--radius5); font-family: var(--bold); font-size: var(--font14); }
.karriere-job-type.is-blue { background-color: #f0f5fa; color: var(--udgBlau); }
.karriere-job h3 { margin: 0 0 15px; font-size: var(--font25); line-height: 1.3; }
.karriere-job-meta { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.karriere-job-meta li { display: flex; align-items: center; gap: 8px; }
.karriere-job-meta i { color: var(--udgBlau); }
.karriere-job-action { flex-shrink: 0; position: relative; z-index: 1; }
.karriere-job .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; content: ""; background-color: transparent; }
.karriere-job:hover .btn-primary { background-color: var(--udgBlau); color: var(--weiss); box-shadow: var(--schattenHover); transform: scale(var(--zoom)); }

.karriere-initiative { padding: 80px 0; background-color: var(--dunkel); color: var(--weiss); border-top: 5px solid var(--udgGelb); }
.karriere-initiative h2 { color: var(--weiss); font-size: var(--font40); margin-top: 10px; margin-bottom: 20px; }
.karriere-initiative p { color: var(--weiss); }
.karriere-eyebrow { display: inline-block; font-family: var(--bold); font-size: var(--font14); color: var(--udgGelb); text-transform: uppercase; letter-spacing: 0.5px; }

.karriere-praktikum { padding: 70px 0; background-color: var(--weiss); }
.karriere-faq-wrapper { display: flex; flex-direction: column; gap: 15px; }
.karriere-faq-item { background-color: var(--weiss); border: 1px solid var(--hellgrau); border-left: 5px solid var(--udgBlau); border-radius: var(--infoboxenRadius); box-shadow: var(--schattenNormal); transition: var(--bewegung); overflow: hidden; }
.karriere-faq-item:hover, .karriere-faq-item:focus-within { box-shadow: var(--schattenHover); }
.karriere-faq-summary { list-style: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; display: block !important; }
.karriere-faq-summary::-webkit-details-marker, .karriere-faq-summary::marker { display: none !important; }
.karriere-faq-summary-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 25px 30px; background-color: transparent; transition: background-color 0.2s ease; width: 100%; }
.karriere-faq-summary:hover .karriere-faq-summary-inner, .karriere-faq-summary:focus-visible .karriere-faq-summary-inner { background-color: #fcfcfc; }
.karriere-faq-summary:focus-visible { outline: 3px solid var(--focusColor); outline-offset: -3px; }
.karriere-faq-title { margin: 0 !important; font-size: var(--font25); font-family: var(--headline); color: var(--titleHeading); pointer-events: none; display: block !important; }
.karriere-faq-summary-inner .faq-icon { font-size: 1.5rem; color: var(--udgBlau); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.karriere-faq-item[open] .faq-icon { transform: rotate(180deg); }
.karriere-faq-content { padding: 0 30px 30px 30px; border-top: 1px dashed var(--hellgrau); margin-top: 0; padding-top: 25px; animation: fadeInSlideDown 0.3s ease-out forwards; }

@keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767px) {
    .karriere-intro, .karriere-benefits, .karriere-jobs, .karriere-praktikum { padding: 45px 0; }
    .karriere-initiative { padding: 55px 0; }
    .karriere-intro-actions { flex-direction: column; align-items: stretch; }
    .karriere-intro-actions .btn-primary, .karriere-btn-secondary { width: 100%; }
    .karriere-job { align-items: stretch; flex-direction: column; padding: 25px 20px; }
    .karriere-job-action { width: 100%; }
    .karriere-job-action .btn-primary { width: 100%; }
    .karriere-job-meta { flex-direction: column; gap: 8px; }
    .karriere-initiative h2 { font-size: var(--font30); }
    .karriere-faq-summary-inner { padding: 20px; }
    .karriere-faq-title { font-size: var(--font19); }
    .karriere-faq-content { padding: 20px; }
}

/* ==========================================================================
   18. SUCHSEITE OVERRIDES & LIVE-SUCHE DROPDOWN
   ========================================================================== */
.com-finder .hero-section,
.com-finder .hero-section * { text-shadow: none !important; }
.com-finder__results .result-url,
.com-finder__results cite { display: none !important; }

.live-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; margin: 5px 0 0 0; padding: 0; list-style: none; background-color: var(--weiss); border: 2px solid var(--hellgrau); border-radius: var(--radius5); box-shadow: none !important; max-height: 350px; overflow-y: auto; }
.live-search-dropdown[hidden] { display: none; }
.live-search-item { padding: 12px 15px; border-bottom: 1px solid var(--hellgrau); cursor: pointer; transition: var(--bewegung); text-align: left; }
.live-search-item:last-child { border-bottom: none; }
.live-search-title { display: block; font-size: var(--font17); color: var(--dunkel); line-height: 1.3; }
.live-search-title strong { font-family: var(--bold); }

.live-search-item:hover,
.live-search-item.is-active { background-color: var(--udgGelb); }
.live-search-item:hover .live-search-title,
.live-search-item.is-active .live-search-title { color: var(--dunkel); }

/* ==========================================================================
   19. DIREKT-NAVIGATION (Modul)
   ========================================================================== */
.suche-navigation-wrapper h2 { margin-bottom: 25px !important; }
.suche-navigation-wrapper ul.nav { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 15px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.suche-navigation-wrapper ul.nav li { display: block !important; margin: 0 !important; padding: 0 !important; }
.suche-navigation-wrapper ul.nav a { display: inline-flex !important; align-items: center !important; background-color: var(--udgGelb) !important; color: var(--dunkel) !important; font-family: var(--bold) !important; font-size: var(--font17) !important; padding: 10px 24px !important; border-radius: var(--radius5); text-decoration: none !important; transition: var(--bewegung) !important; box-shadow: var(--schattenNormal) !important; }
.suche-navigation-wrapper ul.nav a:hover,
.suche-navigation-wrapper ul.nav a:focus-visible { background-color: var(--udgBlau) !important; color: var(--weiss) !important; box-shadow: var(--schattenHover) !important; }

/* ==========================================================================
   20. JOOMLA HIGHLIGHT PLUGIN RESET
   ========================================================================== */
.title-primary mark,
.title-primary .highlight { background-color: transparent !important; color: inherit !important; padding: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   21. ACCESSIBILITY (A11Y) - HOCHKONTRAST THEME (WCAG AAA ZIEL)
   ========================================================================== */
#cga11y-widget {
    font-family: var(--mengentext) !important;
    --color-primary: var(--udgBlau);
    --color-white: var(--weiss);
    --color-text-main: var(--dunkel);
    --color-border: var(--hellgrau);
    --color-success: var(--gruen);
}

#cga11y-toggle { background-color: var(--udgBlau) !important; color: var(--weiss) !important; }
#cga11y-toggle:hover { background-color: var(--udgGelb) !important; color: var(--dunkel) !important; }
#cga11y-toggle:focus-visible { outline: 3px solid var(--focusColor) !important; outline-offset: 4px; }
.cga11y-menu-title, .cga11y-label { font-family: var(--headline) !important; color: var(--udgBlau) !important; }
.cga11y-list button[role="switch"]:focus-visible, .cga11y-segmented-control button:focus-visible { outline: 3px solid var(--focusColor) !important; outline-offset: 2px; }
.cga11y-list button[role="switch"][aria-checked="true"]::after { background-color: var(--udgBlau) !important; }
.cga11y-reset:hover { background: rgba(217, 14, 43, 0.1) !important; }
body.a11y-contrast #cga11y-toggle span, body.a11y-contrast #cga11y-toggle svg { background-color: transparent !important; border: none !important; }

/* Formulare & Suche */
body.a11y-contrast .com-finder__search .js-finder-search-query,
body.a11y-contrast input[type="search"],
body.a11y-contrast input[type="text"] { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 4px !important; }
body.a11y-contrast input::placeholder { color: #ccc !important; opacity: 1 !important; }

/* Checkboxen & Radiobuttons (A11Y Kontrast) */
body.a11y-contrast input[type="checkbox"],
body.a11y-contrast input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-color: #000 !important;
    border: 2px solid #fff !important;
    accent-color: #ff0 !important;
    cursor: pointer;
}
body.a11y-contrast input[type="checkbox"]:focus-visible,
body.a11y-contrast input[type="radio"]:focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 3px !important;
}

/* Direkt-Navigations-Buttons */
body.a11y-contrast .suche-navigation-wrapper ul.nav a { background-color: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important; box-shadow: none !important; }
body.a11y-contrast .suche-navigation-wrapper ul.nav a:hover,
body.a11y-contrast .suche-navigation-wrapper ul.nav a:focus-visible { background-color: #ff0 !important; color: #000 !important; outline: none !important; }

/* Live-Suche */
body.a11y-contrast .live-search-dropdown { background-color: #000 !important; border-color: #fff !important; }
body.a11y-contrast .live-search-item { border-bottom-color: #fff !important; }
body.a11y-contrast .live-search-item:hover,
body.a11y-contrast .live-search-item.is-active { background-color: #ff0 !important; }
body.a11y-contrast .live-search-item:hover .live-search-title,
body.a11y-contrast .live-search-item.is-active .live-search-title,
body.a11y-contrast .live-search-item:hover .live-search-title strong,
body.a11y-contrast .live-search-item.is-active .live-search-title strong { color: #000 !important; }

/* Hero-Slider */
body.a11y-contrast .mod-heroslider,
body.a11y-contrast .mod-heroslider-container,
body.a11y-contrast .swiper-wrapper,
body.a11y-contrast .swiper-slide,
body.a11y-contrast .slide-image-wrapper,
body.a11y-contrast .slide-content { background-color: transparent !important; border: none !important; }
body.a11y-contrast .slide-content-inner { background-color: #000 !important; border: 2px solid #fff !important; padding: 2rem !important; border-radius: 4px !important; }
body.a11y-contrast .slide-heading,
body.a11y-contrast .slide-subline { background-color: transparent !important; border: none !important; color: #fff !important; }
body.a11y-contrast .slide-meta { background-color: transparent !important; border: none !important; }
body.a11y-contrast .copyright { background-color: #000 !important; color: #fff !important; padding: 4px 8px !important; border: 1px solid #fff !important; }

/* FAB Buttons */
body.a11y-contrast .mod-floatingbuttons { background-color: transparent !important; border: none !important; box-shadow: none !important; }
body.a11y-contrast .mod-floatingbuttons .fab-button { background-color: #000 !important; border: 2px solid #fff !important; border-radius: 4px !important; }
body.a11y-contrast .mod-floatingbuttons .fab-button *,
body.a11y-contrast .mod-floatingbuttons .fab-button *::before,
body.a11y-contrast .mod-floatingbuttons .fab-button *::after { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; }
body.a11y-contrast .mod-floatingbuttons .fab-button * { color: #fff !important; fill: #fff !important; }
body.a11y-contrast .mod-floatingbuttons .fab-button:hover,
body.a11y-contrast .mod-floatingbuttons .fab-button:focus-visible { background-color: #ff0 !important; border-color: #ff0 !important; outline: none !important; }
body.a11y-contrast .mod-floatingbuttons .fab-button:hover *,
body.a11y-contrast .mod-floatingbuttons .fab-button:hover *::before,
body.a11y-contrast .mod-floatingbuttons .fab-button:focus-visible *,
body.a11y-contrast .mod-floatingbuttons .fab-button:focus-visible *::before { color: #000 !important; fill: #000 !important; }

/* Artikel & Kacheln */
body.a11y-contrast .article-card .btn-primary,
body.a11y-contrast .article-card .btn-readmore { background-color: #000 !important; border: 2px solid #ff0 !important; }
body.a11y-contrast .article-card .btn-primary span,
body.a11y-contrast .article-card .btn-primary i,
body.a11y-contrast .article-card .btn-readmore span,
body.a11y-contrast .article-card .btn-readmore i { color: #ff0 !important; background-color: transparent !important; }
body.a11y-contrast .article-card:hover .btn-primary,
body.a11y-contrast .article-card:hover .btn-readmore,
body.a11y-contrast .article-card .btn-primary:hover,
body.a11y-contrast .article-card .btn-primary:focus-visible { background-color: #ff0 !important; border-color: #ff0 !important; }
body.a11y-contrast .article-card:hover .btn-primary span,
body.a11y-contrast .article-card:hover .btn-primary i,
body.a11y-contrast .article-card .btn-primary:hover span,
body.a11y-contrast .article-card .btn-primary:hover i { color: #000 !important; }
body.a11y-contrast .article-card .stretched-link::after,
body.a11y-contrast .article-card .card-click-overlay { background-color: transparent !important; }

/* Service-Karten */
body.a11y-contrast .service-card .card-icon { background-color: transparent !important; border: none !important; box-shadow: none !important; }
body.a11y-contrast .service-card { background-color: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; border-radius: 4px !important; transition: background-color 0.2s ease, border-color 0.2s ease; }
body.a11y-contrast .service-card .card-icon i,
body.a11y-contrast .service-card .card-headline,
body.a11y-contrast .service-card .card-text { background-color: transparent !important; color: #fff !important; }
body.a11y-contrast .service-card .card-btn,
body.a11y-contrast .service-card .card-btn i { background-color: transparent !important; color: #ff0 !important; }
body.a11y-contrast .service-card:hover,
body.a11y-contrast .service-card:focus-visible { background-color: #ff0 !important; border-color: #ff0 !important; outline: none !important; }
body.a11y-contrast .service-card:hover .card-icon i,
body.a11y-contrast .service-card:focus-visible .card-icon i,
body.a11y-contrast .service-card:hover .card-headline,
body.a11y-contrast .service-card:focus-visible .card-headline,
body.a11y-contrast .service-card:hover .card-text,
body.a11y-contrast .service-card:focus-visible .card-text,
body.a11y-contrast .service-card:hover .card-btn,
body.a11y-contrast .service-card:focus-visible .card-btn,
body.a11y-contrast .service-card:hover .card-btn i,
body.a11y-contrast .service-card:focus-visible .card-btn i { color: #000 !important; }

/* Uckermark Cards */
body.a11y-contrast .uckermark-card { background-color: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; border-radius: 4px !important; }
body.a11y-contrast .uckermark-card:hover,
body.a11y-contrast .uckermark-card:focus-within { border-color: #ff0 !important; }
body.a11y-contrast .uckermark-icon-pin,
body.a11y-contrast .uckermark-icon-pin i,
body.a11y-contrast .uckermark-title,
body.a11y-contrast .title-prefix,
body.a11y-contrast .uckermark-address,
body.a11y-contrast .uckermark-address-addon { background-color: transparent !important; color: #fff !important; }
body.a11y-contrast .uckermark-btn { background-color: #000 !important; border: 2px solid #ff0 !important; color: #ff0 !important; }
body.a11y-contrast .uckermark-btn i,
body.a11y-contrast .uckermark-btn svg { color: #ff0 !important; background-color: transparent !important; }
body.a11y-contrast .uckermark-btn:hover,
body.a11y-contrast .uckermark-btn:focus-visible,
body.a11y-contrast .uckermark-card:hover a.uckermark-btn.uckermark-btn-route { background-color: #ff0 !important; color: #000 !important; border-color: #ff0 !important; }
body.a11y-contrast .uckermark-btn:hover i,
body.a11y-contrast .uckermark-btn:focus-visible i,
body.a11y-contrast .uckermark-card:hover a:not(.mod-cp-card__btn):not(.btn-primary):not(.btn-whatsapp),
body.a11y-contrast .uckermark-card:hover a.uckermark-btn.uckermark-btn-route,
body.a11y-contrast .uckermark-card:hover a.uckermark-btn.uckermark-btn-route i { color: #000 !important; }
body.a11y-contrast .uckermark-card .stretched-link::after { background-color: transparent !important; }

/* ==========================================================================
   22. JOB META & FOOTER
   ========================================================================== */
a.job-meta-badge {
    background-color: var(--udgGelb);
    color: var(--dunkel);
    text-decoration: none;
    border: 2px solid var(--udgGelb);
}

a.job-meta-badge:hover {
    background-color: var(--udgBlau);
    color: var(--udgGelb);
    text-decoration: none;
    border: 2px solid var(--udgGelb);
}

h4.ccc__column-headline {
    font-family: var(--bold);
    color: var(--udgGelb);
    font-size: var(--font19);
    margin-top: 0;
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .ccc__column { margin: 0 0 1rem 0; }
    .emas img { max-width: 20%; margin: auto; }
    .ccc.udg_footer { text-align: center; }
}

/* ==========================================================================
   Artikel & Kacheln (Hover-Fix für A11Y Contrast)
   ========================================================================== */

/* 1. Standard-Zustand: Schwarzer Hintergrund, gelber Rand, gelbe Schrift */
body.a11y-contrast .article-card .btn-primary,
body.a11y-contrast .article-card .btn-readmore { 
    background-color: #000000 !important; 
    border: 2px solid #ffff00 !important;
    color: #ffff00 !important; 
}

/* Icon im Standard-Zustand explizit gelb färben */
body.a11y-contrast .article-card .btn-primary i,
body.a11y-contrast .article-card .btn-readmore i { 
    color: #ffff00 !important; 
    background-color: transparent !important; 
}

/* 2. Hover/Focus-Zustand: Gelber Hintergrund, schwarze Schrift */
body.a11y-contrast .article-card:hover .btn-primary,
body.a11y-contrast .article-card:focus-within .btn-primary,
body.a11y-contrast .article-card:hover .btn-readmore,
body.a11y-contrast .article-card:focus-within .btn-readmore,
body.a11y-contrast .article-card .btn-primary:hover,
body.a11y-contrast .article-card .btn-primary:focus-visible { 
    background-color: #ffff00 !important; 
    border-color: #ffff00 !important; 
    color: #000000 !important; 
}

/* Icon im Hover-Zustand explizit schwarz färben */
body.a11y-contrast .article-card:hover .btn-primary i,
body.a11y-contrast .article-card:focus-within .btn-primary i,
body.a11y-contrast .article-card:hover .btn-readmore i,
body.a11y-contrast .article-card:focus-within .btn-readmore i,
body.a11y-contrast .article-card .btn-primary:hover i,
body.a11y-contrast .article-card .btn-primary:focus-visible i { 
    color: #000000 !important; 
}

/* Das Klick-Overlay muss weiterhin unsichtbar bleiben */
body.a11y-contrast .article-card .stretched-link::after,
body.a11y-contrast .article-card .card-click-overlay { 
    background-color: transparent !important; 
}

/* 3. Sichtbarer Rahmen für die Kacheln im Hochkontrast-Modus */
body.a11y-contrast .article-card {
    border: 2px solid #ffffff !important;
}

/* Interaktives Feedback: Rahmen wird beim Hover/Fokus gelb */
body.a11y-contrast .article-card:hover,
body.a11y-contrast .article-card:focus-within {
    border-color: #ffff00 !important;
}

/* ==========================================================================
   23. FOOTER LEGALS (Impressum, Datenschutz, Barrierefreiheit)
   ========================================================================== */
.legals {
    display: block;
    width: 100%;
}

.legals ul.nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100%;
}

.legals ul.nav li.nav-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .legals ul.nav {
        flex-direction: row !important;
        gap: 30px !important;
    }
}





.contact-actions a:hover {
    color: var(--weiss);
}

/* ==========================================================================
   24. MOD ARTICLES SIMPLE READMORE (Terminverschiebungen)
   ========================================================================== */

/* Abstand zwischen mehreren Einträgen */
.mod-articles-simple-readmore .udg-infobox + .udg-infobox {
    margin-top: 15px;
}

/* Inneres Layout: Text links, Button rechts */
.mod-terminhinweis__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Badge "⚠ Terminverschiebung" */
.mod-terminhinweis__badge {
    display: inline-block;
    background-color: var(--rot);
    color: var(--weiss);
    font-family: var(--bold);
    font-size: var(--font14);
    padding: 4px 10px;
    border-radius: var(--radius5);
    margin-bottom: 8px;
}

/* Titel */
.mod-terminhinweis__title {
    font-family: var(--headline);
    font-size: var(--font19);
    color: var(--dunkel);
    margin: 0;
    line-height: 1.3;
}

/* Button nie kleiner als nötig */
.mod-terminhinweis__btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Mobile: alles untereinander, Button volle Breite */
@media (max-width: 767px) {
    .mod-terminhinweis__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mod-terminhinweis__btn {
        width: 100%;
        justify-content: center;
    }
}