/* ==========================================================================
   WEBFONTS
   ========================================================================== */
@font-face {
    font-family: 'Calibri Bold';
    src: url('fonts/Calibri-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri Light';
    src: url('fonts/Calibri-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri Regular';
    src: url('fonts/Calibri.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   VARIABLES (:ROOT)
   ========================================================================== */
:root {
    /* --- Farben Set 1 (General) --- */
    --color-primary: #00A0E3;
    --color-secondary: #e3f2fb;
    --color-accent: rgb(200, 215, 131);
    --color-accent-rgb: 200, 215, 131; /* Für rgba Nutzung */
    --color-light: rgb(221, 239, 248);
    --lightgreen: #FCFFF2;
    --color-lightblue: #E3F2FB; /* Redundant mit --color-secondary, aber beibehalten */
    --color-text: #222;
    --color-text-light: #666;
    --color-bg: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-border: #e0e0e0;

    /* --- Farben Set 2 (Slideblock / Specifics) --- */
    --c-primary: #0088cc;
    --c-secondary: #C8D66D;
    --c-bg-body: #e6f4fa;
    --c-bg-item: #bde0f0;
    --c-text: #2c3e50;
    --c-text-muted: #4a5a6a;

    /* Job Teaser Specifics */
    --jt-color-bg: #f9fbf6;
    --jt-color-link: #00A0E3;

    /* BOX SHADOWS */
    --boxshadow: 0 2px 4px rgba(0,0,0,0.05);
    --boxshadow-hover: 0 12px 20px rgba(0,0,0,0.1);

     /* OPACITY COLOR */

    --opacity-color-secondary: RGBA(227, 242, 251, .5);
    --opacity-color-bg-light: RGBA(245, 245, 245, .5);

    /* BORDER RADIUS */
    --border-radius: 6px;

    /* Footer Specifics */
    --msz-spacing: 2rem;
    
    /* Gutter */
    --gutter: 20px; 

    /* --- Schriftfamilien --- */
    --font-base: 'Calibri Regular', sans-serif;
    --font-light: 'Calibri Light', sans-serif;
    --font-bold: 'Calibri Bold', sans-serif;
    --font-regular: 'Calibri Regular', sans-serif;

    /* --- Schriftgrößen (Fluid Typography) --- */
    --font-size-sm: clamp(0.75rem, 1vw, 0.875rem);
    --font-size-base: clamp(0.875rem, 1.5vw, 1rem);
    --font-size-lg: clamp(1rem, 2vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 2.5vw, 1.5rem);
    --font-size-xxl: clamp(2rem, 3vw, 2rem);
    --font-size-xxxl: clamp(3.5rem, 3vw, 4rem);

    /* --- Gewichte & Stile --- */
    --font-style-normal: normal;
    --font-style-italic: italic;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* --- Abstände (Spacing Scale) --- */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --slidegap: 1.5rem;
    --sectiongap-bottom: 50px;
    --sectiongap-bottom-sm: 30px;
}

/* ==========================================================================
   GLOBAL RESET & UTILITIES
   ========================================================================== */
body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
}

h2 {
    font-family: var(--font-bold);
}

.discharge-item {
    margin: var(--space-xl) 0;
}

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

section.lightgreen {
    background-color: var(--lightgreen);
}
section.color-secondary {
    background-color: var(--color-secondary);
}

section.color-bg-light {
    background-color: var(--color-bg-light);
}

section.color-accent {
    background-color: var(--color-accent);
}

section.opacity-color-secondary {
    background-color: var(--opacity-color-secondary);
}

section.opacity-color-bg-light {
    background-color: var(--opacity-color-bg-light);
}

.sectiongap-bottom {
    margin-bottom: var(--sectiongap-bottom);
}

.sectiongap-bottom-sm {
    margin-bottom: var(--sectiongap-bottom-sm);
}

.special-services {
    margin-top: 2rem;
    background-color: #f9f9f9;
    padding: 1.5rem;border-radius: 8px;
}


.accessible-dl {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Der Wrapper für jedes Paar (Term + Definition) */
.accessible-dl > div {
  margin-bottom: 1.5rem; /* Genug Abstand für Touch-Bedienung */
  border-left: 4px solid var(--c-primary); /* Visueller Anker (Akzentfarbe anpassbar) */
  padding-left: 1rem;
}

/* Der Begriff (ehemals <strong>) */
.accessible-dl dt {
  font-weight: 700;
  font-size: 1.1rem;
  color: #333; /* Hoher Kontrast für Lesbarkeit */
  margin-bottom: 0.25rem;
  display: block;
}

/* Die Erklärung */
.accessible-dl dd {
  margin: 0; /* Browser-Standard-Margin entfernen */
  padding: 0;
  color: #555;
}

/* Optional: Anpassung für sehr kleine Screens */
@media (max-width: 480px) {
  .accessible-dl > div {
    padding-left: 0.75rem;
    border-left-width: 3px;
  }
}



/* ==========================================================================
   HEADER / MEGAMENU (Mobile First & Barrierefrei)
   ========================================================================== */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    font-size: var(--font-size-lg);
    font-family: var(--font-regular);
    text-transform: uppercase;
}

.sp-megamenu-parent.d-lg-block {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-megamenu-parent > li {
    display: inline-block;
}

.sp-megamenu-parent > li > a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sp-megamenu-parent>li.active>a {
    font-family: var(--font-bold);
}

.sp-megamenu-parent > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

.sp-megamenu-parent > li > a:hover::after,
.sp-megamenu-parent > li > a:focus::after {
    transform: scaleX(1);
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    padding: var(--space-sm);
}
.sp-megamenu-parent .sp-dropdown {
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    min-width: 240px;
}

.sp-megamenu-parent .sp-dropdown-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-megamenu-parent .sp-dropdown-items > li.sp-menu-item {
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    padding: 0;
}

.sp-megamenu-parent .sp-dropdown-items > li.sp-menu-item:last-child {
    border-bottom: none;
}

.sp-megamenu-parent .sp-dropdown-items > li.sp-menu-item > a {
    display: block;
    text-decoration: none;
    font-size: var(--font-size-base);
    color: var(--color-primary, #007bff);
    padding: 10px 15px 10px 30px;
    position: relative;
}

.sp-dropdown-items > li.sp-menu-item > a::before {
    content: '›';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary, #007bff);
    font-weight: bold;
}

.sp-dropdown-items > li.sp-menu-item > a:hover,
.sp-dropdown-items > li.sp-menu-item > a:focus {
    background-color: rgba(var(--color-accent-rgb), 0.05);
    color: #333;
    outline-offset: -2px;
}

.sp-megamenu-parent > li > a:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ==========================================================================
   HERO SLIDER STARTSEITE
   ========================================================================== */
.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content-container {
    width: 100%;
    max-width: 1320px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
}

.hero-overlay-graphic {
    display: block;
    height: auto;
    max-width: 60%; /* Mobile First */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

@media (min-width: 768px) {
    .hero-section {
        height: 400px;
    }
    .hero-overlay-graphic {
        max-width: 450px;
    }
}

@media (min-width: 1200px) {
    .hero-section {
        height: 600px;
    }
    .hero-overlay-graphic {
        max-width: 500px;
    }
}

/* ==========================================================================
   HEROSLIDER STADORTE
   ========================================================================== */
.hero-header {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hero-overlay .container {
    width: 1320px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    display: flex;
    justify-content: flex-end;
}

.text-content-wrapper {
    margin: 0 30px;
}

.hero-title {
    color: var(--color-bg);
    font-size: var(--font-size-xxl);
    display: inline-block;
    width: 100%;
    text-align: left;
    line-height: 120%;
}

.title-line,
.title-line-bold {
    display: block; /* Erzwingt Umbruch */
    text-transform: uppercase;
}
.title-line {
    font-family: var(--font-light);
}
.title-line-bold {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
    .hero-header {
        min-height: 600px;
    }

    .hero-title {
        font-size: var(--font-size-xxxl);
        width: auto;
        display: inline-block;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        font-size: var(--font-size-xxxl);
    }
}

@media (max-width: 767px) {
    .hero-header,
    .hero-section {
        min-height: 20vh;
    }

}












/* ==========================================================================
   MODULE: CUSTOM HEADER (Responsive & Accessibility Optimized)
   ========================================================================== */


.msz-custom-header-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px; 
    display: flex;
    align-items: center; 
    overflow: hidden;
    font-family: var(--font-base, sans-serif);
}

/* 2. Hintergrundbild & Overlay */
.msz-custom-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.msz-custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center; 
}

/* 3. Layout Container */
.msz-layout-container {
    position: relative;
    z-index: 10;
    
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    justify-content: flex-end;
    
    padding: 20px;
    box-sizing: border-box;
}

/* 4. Text Gruppe */
.msz-content-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 1rem;
    
    max-width: 600px; 
    width: 100%;
}

/* --- Typografie & Elemente --- */

/* Badge */
.msz-custom-badge {
    display: inline-block;
    background-color: #ffffff;
    color: var(--color-primary, #00A0E3);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 4px;
}

/* Headline */
.msz-custom-headline {
    color: #ffffff;
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 15px rgba(0,0,0,0.6);
}

/* Button Wrapper */
.msz-custom-actions {
    margin-top: 0.5rem;
}

/* Button */
.msz-custom-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    background-color: var(--color-primary, #00A0E3);
    color: #ffffff;
    
    font-family: var(--font-bold, sans-serif);
    font-size: 1.1rem;
    text-decoration: none;
    
    padding: 12px 28px;
    border-radius: 4px;
    border: 2px solid transparent; /* Platzhalter für High-Contrast Mode */
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* Hover State Button: Farben/Schatten */
.msz-custom-cta:hover {
    background-color: #ffffff;
    color: var(--color-primary, #00A0E3);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Der Pfeil (Initialzustand) */
.msz-arrow-icon {
    display: inline-block; /* WICHTIG: Sonst funktioniert rotate() nicht! */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Natürliche Bewegung */
    line-height: 1;
}

/* Die Drehung: Wenn man den Button hovert, dreht sich der Pfeil */
.msz-custom-cta:hover .msz-arrow-icon {
    transform: rotate(90deg); /* Dreht nach unten */
}

/* Focus State für Barrierefreiheit (Tastaturnutzung) */
.msz-custom-cta:focus-visible {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 4px var(--color-primary, #00A0E3);
}

/* ==========================================================================
   MOBILE OPTIMIERUNG (Max-Width 767px)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. Mehr Höhe geben & Text nach unten schieben */
    .msz-custom-header-wrapper {
        min-height: 20vh; /* Genug Platz für Köpfe + Text */
        align-items: flex-end; /* Text unten positionieren */
        padding-bottom: 2rem; /* Abstand vom unteren Rand */
    }

    /* 2. Bildfokus auf die Köpfe legen (Oben) */
    .msz-custom-img {
        object-position: center top; 
    }

    /* 3. Text Anpassungen für kleine Screens */
    .msz-content-group {
        align-items: flex-end; 
        text-align: right;
        gap: 0.8rem;
    }

    /* Headline etwas kleiner, damit sie nicht alles erschlägt */
    .msz-custom-headline {
        font-size: 1.8rem; 
        line-height: 1.2;
    }
    
    /* Button etwas kompakter */
    .msz-custom-cta {
        padding: 10px 20px;
        font-size: 1rem;
        width: auto; /* Verhindert volle Breite */
    }
    
    /* Badge etwas kleiner */
    .msz-custom-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}











/* ==========================================================================
   HEADLINES
   ========================================================================== */
.main-headline {
    font-size: 2rem; /* Mobile */
    line-height: 1.2;
    margin: 20px 0;
    text-align: left;
}

.headline-brand,
.headline-text {
    font-size: var(--font-size-xxl);
    color: var(--color-primary);
}

.headline-brand {
    font-weight: var(--font-weight-bold);
}

.headline-text {
    font-weight: 400;
    font-family: var(--font-light);
}

@media (min-width: 768px) {
    .main-headline {
        font-size: 2.5rem;
    }
}

.msz-h3-headline {
    font-family: var(--font-bold);
    color: var(--color-text-light);
}

.msz-h3-headline.blue {
    color: var(--color-primary);
}

.msz-h3-headline .h3-brand {
    font-family: var(--font-bold);
}

.msz-h3-headline .h3-text {
    font-family: var(--font-light);
}

.msz-h3-headline::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--color-primary);
    margin-top: 10px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .msz-h3-headline {
        font-size: 1.75rem;
    }
    .msz-h3-headline::after {
        width: 60px;
        margin-top: 15px;
    }
}

/* ==========================================================================
   LOCATION CARD
   ========================================================================== */
.msz-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
}

.msz-card-link:hover,
.msz-card-link:focus {
    outline: none;
}

.msz-card-link:focus-visible {
    outline: 3px solid #00a0e5;
    outline-offset: 2px;
}

.msz-card-content {
    padding-bottom: 10px;
    text-align: left;
}

.msz-card-title {
    margin: 0;
    line-height: 1.2;
    color: #4a5a54;
}

.title-upper,
.title-lower {
    display: block;
    text-transform: uppercase;
}

.title-upper {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.title-lower {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.msz-separator {
    display: block;
    width: 50px;
    height: 2px;
    background-color: #b0c933;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.msz-card-link:hover .msz-separator {
    width: 70px;
}

.msz-card-image-wrapper {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.msz-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   MODULE: AKTUELLES (STARTSEITE)
   ========================================================================== */
ul.mod-articles-items.mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mod-articles-item {
    position: relative;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

.mod-articles-items > li:last-child .mod-articles-item {
    border-bottom: none;
}

.mod-articles-item:hover {
    background-color: var(--color-bg-light);
}

.mod-articles-item-content {
    display: grid;
    /* [Bild ca 100px] [Abstand] [Inhalt] [Pfeil] */
    grid-template-columns: 100px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-md);
    row-gap: var(--space-xxs);
    align-items: center;
}

.article-intro-image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100px;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--color-secondary);
}

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

.mod-articles-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    color: var(--color-primary);
    align-self: end;
}

.mod-articles-link {
    text-decoration: none;
    color: inherit;
    outline: none;
}

.mod-articles-link::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

.mod-articles-link:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.list-unstyled {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0;
    align-self: start;
}

.mod-articles-item-content dl,
.mod-articles-item-content dd {
    margin: 0;
    padding: 0;
}

.mod-articles-date {
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--space-xxs);
}

.icon-calendar {
    display: none;
}

.mod-articles-item-content::before {
    content: "";
    grid-column: 3;
    grid-row: 1 / -1;
    width: 0.6em;
    height: 0.6em;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    transform: rotate(45deg);
    margin-right: var(--space-xs);
    display: block;
}

/* ==========================================================================
   MODULE: VERANSTALTUNGEN / EVENTS (DETAIL & LIST FIX)
   ========================================================================== */
.event-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.event-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.event-sidebar {
    background: var(--color-secondary);
    padding: 1rem;
    border-radius: 8px;
}

.event-meta-heading {
    margin-bottom: 1rem;
    font-size: var(--font-size-xl);
    font-family: var(--font-bold);
}

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

.event-meta-item {
    margin-bottom: 1rem;
    font-size: var(--font-size-base);
}

.event-meta-label {
    display: block;
    font-family: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: 0.25rem;
    font-size: var(--font-size-lg);
}

.event-title {
    margin-top: 0;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.3;
}

.event-description p,
.event-description ul,
.event-description ol {
    line-height: 1.6;
    font-size: var(--font-size-base);
}

.event-download {
    background: #eef3ff;
    padding: 1.2rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 6px;
    margin-top: 2rem;
}

.event-download-button {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 0.9rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.event-download-button:focus,
.event-download-button:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.event-download-details {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (min-width: 800px) {
    .event-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    .event-sidebar {
        width: 32%;
        flex-shrink: 0;
        position: sticky;
        top: 1rem;
    }
    .event-main {
        width: 68%;
    }
}

.msz__events .mod-articles-item-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 15px;
    row-gap: 4px;
    position: relative;
    padding-left: 120px;
    min-height: 100px;
    align-content: center;
}

.msz__events .field-entry.veranstaltung-bild {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    margin: 0;
}

.msz__events .field-entry.veranstaltung-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.msz__events .mod-articles-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: end;
    font-family: var(--font-bold);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    line-height: 1.2;
}

.msz__events .mod-articles-link {
    text-decoration: none;
    color: inherit;
}

.msz__events .mod-articles-link::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

.msz__events .fields-container {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

.msz__events .list-inline,
.msz__events .mod-articles-date,
.msz__events .field-label,
.msz__events .field-entry.veranstaltung-download,
.msz__events .field-entry.veranstaltungsorganisator {
    display: none;
}

.msz__events .field-entry {
    display: inline-block;
}

.msz__events .field-entry.veranstaltung-ort {
    order: 1;
    font-family: var(--font-bold);
    color: var(--color-text-light);
    margin-right: 5px;
}

.msz__events .field-entry.veranstaltung-datum {
    order: 2;
    color: #666;
}

.msz__events .field-entry.veranstaltung-uhrzeit {
    order: 3;
    color: #666;
}

.msz__events .field-entry.veranstaltung-datum::before,
.msz__events .field-entry.veranstaltung-uhrzeit::before {
    content: "|";
    margin: 0 8px;
    color: #ccc;
}

.msz__events .mod-articles-item-content::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-primary); /* #00A0E3 */
    border-right: 2px solid var(--color-primary);
    transform: rotate(45deg);
    margin-right: 10px;
    display: block;
}

@media (max-width: 480px) {
    .msz__events .mod-articles-item-content {
        padding-left: 90px;
        min-height: 80px;
    }
    .msz__events .field-entry.veranstaltung-bild {
        width: 80px;
        height: 80px;
    }
    .msz__events .mod-articles-title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   MODULE: KARRIERE / JOB TEASER
   ========================================================================== */
.job-teaser {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: 0.3s ease-in;
}

.job-teaser:focus-within {
    outline: 2px solid var(--jt-color-link);
    outline-offset: 4px;
}

.job-teaser__visual {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #cceeff;
    margin-bottom: 1.5rem;
}

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

.job-teaser__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.job-teaser__headline {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-text-light);
    font-family: var(--font-bold);
}

.job-teaser__desc {
    margin: 0 0 1.5rem 0;
    color: var(--color-primary);
    line-height: 1.5;
}

.job-teaser__footer {
    margin-top: auto;
}

.job-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.job-teaser__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.job-teaser__cta:hover,
.job-teaser__cta:focus {
    color: var(--color-primary);
    text-decoration: none;
}

.job-teaser__arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.job-teaser__cta:hover .job-teaser__arrow {
    transform: translateX(5px);
}

/* ==========================================================================
   FOOTER (MAIN)
   ========================================================================== */
#sp-footer {
    font-size: var(--font-size-base);
}

#sp-footer2 {
    background-color: var(--color-primary);
    padding-bottom: 30px;
}

#sp-footer a, #sp-bottom a {
    color: var(--color-bg);
    text-transform: uppercase;
}

.msz-footer {
    color: var(--color-bg);
    padding: calc(var(--msz-spacing) * 2) 0;
}

.msz-footer__container {
    width: 1320px;
    margin: 0 auto;
}

.msz-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--space-xl) * 1.5);
}

.msz-footer__logo-wrapper {
    margin-bottom: 1.5rem;
}

.msz-footer__logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.msz-footer__address {
    font-style: normal;
}

.msz-footer__address strong {
    color: var(--color-bg);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    line-height: 120%;
}

.msz-footer__headline {
    color: var(--color-bg);
    font-size: var(--font-size-lg);
    margin: 0 0 1rem 0;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.msz-footer__headline::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-bg);
    margin-top: 10px;
    border-radius: 2px;
}

.msz-footer__list,
.msz-footer__social-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msz-footer__list li {
    margin-bottom: 5px;
}

.msz-footer__link {
    color: var(--color-bg);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.msz-footer__link:hover,
.msz-footer__link:focus {
    color: var(--color-bg);
    text-decoration: underline;
    outline-offset: 2px;
}

.msz-footer__link--highlight {
    font-weight: bold;
    font-size: var(--font-size-base);
}

.msz-footer__social-list {
    display: flex;
    gap: 1rem;
}

.msz-footer__social-link {
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.msz-footer__social-link:hover,
.msz-footer__social-link:focus {
    background-color: var(--color-secondary);
    color: var(--color-bg);
    transform: translateY(-3px);
}

.msz-footer__social-link i {
    font-size: 20px;
    line-height: 1;
    color: var(--color-bg);
}

.msz-footer__social-link:hover i {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .msz-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--msz-spacing);
    }
}

@media (min-width: 1024px) {
    .msz-footer__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
}

@media (max-width: 767px) {
    .msz-footer__container {
        max-width: 90%;
    }
}

/* ==========================================================================
   FOOTER NAVIGATION (Position: bottom4)
   ========================================================================== */
.legal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.legal-nav li {
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    color: var(--c-bg-body);
    line-height: 1.5;
}

.sp-module ul.legal-nav>li>a,
.legal-nav a,
.legal-nav span {
    text-decoration: none;
    color: var(--color-bg);
    transition: opacity 0.3s ease;
    padding: 0 0.5rem;
    display: inline-block;
}

.legal-nav a:hover,
.legal-nav a:focus {
    text-decoration: underline !important;
    color: var(--color-bg);
}

.legal-nav li:last-child {
    color: var(--c-bg-body);
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .legal-nav {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        flex-wrap: wrap;
    }

    .legal-nav li {
        margin: 0;
        display: flex;
        align-items: center;
    }

    .legal-nav li:last-child {
        margin-top: 0;
    }

    .legal-nav li:not(:last-child)::after {
        content: "|";
        color: #ffffff;
        margin: var(--space-sm) 0;
        font-weight: normal;
        speak: none;
    }
}

@media (max-width: 767px) {
    .legal-nav {
        margin-bottom: 50px;
    }
}

/* ==========================================================================
   SLIDEBLOCK / SERVICE SLIDER
   ========================================================================== */
.service-slider {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.service-slider__track {
    display: flex;
    gap: var(--slidegap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 2rem 0;
    margin: 0;
    list-style: none;
    scrollbar-width: none; /* Firefox */
}

.service-slider__track::-webkit-scrollbar {
    display: none;
}

.service-item {
    flex: 0 0 85%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    background: transparent;
}

.service-item article {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: transparent;
}

.service-item__media {
    margin: 0;
    background-color: var(--c-bg-item);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

.service-item__content {
    padding: 1rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-item__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.service-item__link {
    text-decoration: none;
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    position: static;
}

.service-item__link::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.service-item article:hover .service-item__link,
.service-item__link:focus {
    text-decoration: underline;
    color: #005f8d;
}

.service-item__link:focus-visible::after {
    outline: 2px solid var(--c-primary);
    outline-offset: 4px;
}

.service-slider__footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
    padding-bottom: 1rem;
}

.deco-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--c-secondary);
    display: block;
}

.slider-nav {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.nav-btn {
    background-color: var(--c-secondary);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s;
}

.nav-btn i {
    font-size: 1.1rem;
}

.nav-btn:hover {
    background-color: #006da3;
}

.nav-btn:active {
    background-color: #005680;
}

.nav-btn:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 2px;
}

@media (min-width: 600px) {
    .service-item {
        flex: 0 0 calc(50% - var(--slidegap) / 2); /* Korrigierte Berechnung für 2 Spalten */
    }
}

@media (min-width: 900px) {
    .service-item {
        flex: 0 0 calc(33.333% - var(--slidegap) / 1.5); /* Korrigierte Berechnung für 3 Spalten */
    }
}

@media (min-width: 1200px) {
    .service-item {
        flex: 0 0 calc(25% - var(--slidegap) / 1.333333333); /* Korrigierte Berechnung für 4 Spalten */
    }
}

/* ==========================================================================
   LAYOUT: 4-SPALTEN GRID (Responsive)
   ========================================================================== */
.msz-card-grid {
    /* Grid Setup */
    display: grid;
    gap: var(--space-lg);
    /* Mobile First: 1 Spalte */
    grid-template-columns: 1fr;
    /* Reset für Liste (ul) - Zusammenführung */
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Desktop (ab 1200px): 4 Spalten */
@media (min-width: 1200px) {
    .msz-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Anpassung der Karte innerhalb des Grids */
.msz-card-grid .msz-simple-card {
    max-width: 100%;
}

/* ==========================================================================
   COMPONENT: SIMPLE CARD (Notaufnahme Teaser)
   ========================================================================== */
.msz-simple-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    max-width: 400px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* Interaktion: Leichter Zoom-Effekt beim Hover (optional, passend zum UX) */
.msz-simple-card:hover {
    transform: translateY(-3px);
}

.msz-simple-card__visual {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-lightblue);
    object-fit: cover;
    border-radius: 2px;
}

.msz-simple-card__headline {
    margin: 0;
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    line-height: 1.2;
    color: var(--c-text-muted);
}

.msz-simple-card__link {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--c-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.msz-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 1.2em;
    line-height: 1;
}

.msz-simple-card:hover .msz-arrow {
    transform: translateX(5px);
}

.msz-simple-card__link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.msz-simple-card__link:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   ANREISE AUF DEN STANDORTSEITE
   ========================================================================== */
.travel-info {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.6;
    max-width: 100%;
}

.travel-info h3 {
    font-family: var(--font-bold);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-xs);
}

.travel-info h3:first-of-type {
    margin-top: 0;
}

.travel-list {
    margin-bottom: var(--space-lg);
    padding-left: 1.2rem;
}

.travel-list li {
    margin-bottom: var(--space-xs);
    font-family: var(--font-base);
}

.travel-address {
    font-style: normal;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-secondary);
}

.travel-address ul {
    margin: 0;
}

.travel-divider {
    margin: var(--space-xl) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.travel-alert {
    font-style: normal;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-secondary);
    color: var(--c-text-muted);
    margin-top: var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.travel-alert.weiss {
    background-color: var(--color-bg);
}

.travel-alert p {
    margin: 0;
    font-size: var(--font-size-base);
}

.travel-alert i,
.travel-alert span[aria-hidden="true"] {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
}

/* ==========================================================================
   COMPONENT: INFO CARD (Öffnungszeiten & Kontakt)
   ========================================================================== */
.info-card {
    max-width: 400px;
    margin: var(--space-xl) auto;
    border-radius: 8px;
    background-color: var(--color-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: var(--font-base);
}

.card-header {
    background-color: var(--color-secondary);
    padding: var(--space-lg);
    padding-bottom: var(--space-md);
    border-top: 5px solid var(--color-primary);
}

.card-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-family: var(--font-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: var(--space-sm);
}

.opening-hours-list {
    margin: 0;
    padding: 0 var(--space-lg);
}

.opening-item {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: var(--space-md) 0;
    border-bottom: 1px dashed var(--color-border);
}

.opening-item:last-of-type {
    border-bottom: none;
}

.day-label {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--color-text);
    text-align: left;
}

.time-value {
    margin-left: 0;
    font-family: var(--font-light);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-light);
    text-align: right;
}

.card-footer {
    padding: var(--space-lg);
    margin-top: var(--space-md);
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}

.card-footer h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-family: var(--font-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-md);
}

.card-header h2 i,
.card-footer h3 i {
    color: var(--color-primary);
    font-size: 1.1em;
}

.contact-detail {
    font-style: normal;
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.contact-label {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.phone-link {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-regular);
    font-size: var(--font-size-base);
}

.phone-link:hover {
    text-decoration: underline;
}

.phone-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ==========================================================================
   COMPONENT: EXTERNAL LINK CARD (Erweiterung der Alert-Logik)
   ========================================================================== */
.external-link-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin: var(--space-lg) 0; 
    background-color: var(--color-secondary); 
    border-left: 4px solid var(--color-primary);
    color: var(--color-text); 
}

.external-link-card i {
    flex-shrink: 0;
    font-size: 1,5rem;
    line-height: 1;
}

.external-link-content {
    flex-grow: 1;
}

.external-link-content p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   COMPONENT: CTA BUTTON (Basierend auf Primärfarbe)
   ========================================================================== */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-bg);
    text-decoration: none;
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    border-radius: 4px;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus {
    background-color: var(--color-bg);
    color: var(--color-primary);
    outline: none;
}

.cta-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT: CONTACT PANEL (Generische Sektion)
   ========================================================================== */
.contact-panel {
    margin: var(--space-xl) auto;
    padding: var(--space-lg);
    background-color: var(--color-bg-light); 
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact-panel h2 {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-accent);
}

.contact-point {
    margin-bottom: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.contact-point:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.contact-point strong {
    display: block;
    color: var(--color-text);
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.contact-point .phone-link {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-family: var(--font-bold);
    text-decoration: none;
}
.contact-point .phone-link:hover {
    text-decoration: underline;
}

.contact-point .sub-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.contact-times-dl {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 2px solid var(--color-primary); 
}

.contact-times-dl dt {
    color: var(--color-text);
    font-family: var(--font-bold);
    margin-bottom: 0.5rem;
}

.contact-times-dl dd {
    margin-left: 0;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-family: var(--font-bold);
}

/* ==========================================================================
   COMPONENT: ACCORDION (Design & Funktionalität)
   ========================================================================== */
.accordion-container {
    border: 1px solid var(--color-border); 
    border-radius: 4px; 
    background-color: var(--color-bg);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    overflow: hidden; 
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.accordion-item:last-child {
    border-bottom: none; 
}

.accordion-header {
    display: block;
    position: relative;
    padding: var(--space-md) var(--space-lg);
    padding-right: 3rem; 
    
    background-color: var(--color-bg);
    color: var(--color-text);
    
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    
    cursor: pointer;
    list-style: none; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header:hover {
    background-color: var(--color-secondary); 
    color: var(--color-primary); 
}

.accordion-header:focus-visible {
    outline: 2px solid var(--color-accent); 
    outline-offset: -2px;
    z-index: 2; 
}

.accordion-header::after {
    content: '+'; 
    position: absolute;
    right: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    
    font-family: sans-serif; 
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary); 
    
    transition: transform 0.3s ease;
}

.accordion-item[open] .accordion-header {
    background-color: var(--color-bg-light); 
    border-bottom: 1px solid transparent; 
}

.accordion-item[open] .accordion-header::after {
    content: '–'; 
    color: var(--color-text); 
}

.accordion-content {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-secondary); 
}

.accordion-content p {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .accordion-header {
        padding: var(--space-sm) var(--space-md);
        padding-right: 2.5rem; 
    }
    .accordion-content {
        padding: var(--space-sm) var(--space-md);
    }
}













/* =========================================
   AMBULANZ CARD LAYOUT (CLEAN & ALIGNED)
   ========================================= */
.ambulanz-grid-wrapper {
    display: grid;
    gap: 30px; 
    margin-top: 2rem;
    margin-bottom: 3rem;
    grid-template-columns: 1fr;
    align-items: stretch; 
}

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

.ambulanz-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    overflow: hidden;
    
    display: flex;
    flex-direction: column; 
    height: 100%; 
    transition: 0.3s ease;
}

.ambulanz-card:hover {
    box-shadow: var(--boxshadow-hover);
    transition: 0.3s ease;
}

.ambulanz-card-header {
    background-color: var(--color-secondary);
    border-top: 5px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ambulanz-card-header h3 {
    margin: 0;
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: 1.3;
}

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

.ambulanz-info-list {
    margin-bottom: 1rem;
}

.ambulanz-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    color: #444;
}

.ambulanz-icon {
    width: 25px; 
    flex-shrink: 0;
    text-align: center;
    margin-right: 12px;
    color: var(--color-primary);
    margin-top: 2px; 
}

.ambulanz-notice {
    margin-top: auto;  
    padding: 12px;
    border-radius: var(border-radius);
    font-size: 0.9rem;
    display: flex;
    gap: 10px;
    line-height: 1.4;
}

.ambulanz-notice i {
    flex-shrink: 0;
    margin-top: 3px;
}

.notice-blue {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.ambulanz-card-footer {
    padding: 1.25rem 1.5rem;
    background-color: #fcfcfc; 
    border-top: 1px solid #eee;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 75px; 
}

.spacer-footer {
    background-color: #fff; 
    border-top: none;
}

.ambulanz-footer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ambulanz-phone-link {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.ambulanz-phone-link:hover {
    color: #0099cc;
    text-decoration: underline;
}

.ambulanz-person {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin: 0 0 var(--space-xl) 0;  
}

.ambulanz-person i {
    color: #0099cc; 
    font-size: 1.3rem; 
    
    width: 30px;      
    text-align: center;    
    margin-right: 10px;    
    flex-shrink: 0;        
}

/* ==========================================================================
   MODULE: KONTAKT-BOX / CLINIC CARD (Unified & Accessible)
   ========================================================================== */
.clinic-card.contact-card {
    background-color: #fff; /* Fallback */
    background-color: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 8px);
    box-shadow: var(--boxshadow, 0 4px 6px rgba(0,0,0,0.05));
    
    /* Layout: Flexbox für Sticky Footer Verhalten */
    display: flex;
    flex-direction: column;
    height: 100%;
    
    /* Layout-Sicherheit: Die Karte füllt den Container, begrenzt sich aber selbst wenn nötig */
    width: 100%;
    max-width: 100%; 
    
    /* Animation & Interaktion */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    
    /* Initial Margin (kann durch Grid-Gap des Eltern-Containers gesteuert werden) */
    margin-top: 0; 
}

/* Hover-Effekt (Dezent) */
.clinic-card.contact-card:hover {
    box-shadow: var(--boxshadow-hover, 0 10px 20px rgba(0,0,0,0.1));
    transform: translateY(-3px);
    border-color: var(--color-primary);
}

/* --- HEADER --- */
.clinic-card .card-header {
    background-color: var(--color-secondary, #e3f2fd);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-top: 5px solid var(--color-primary, #0099cc);
}

.clinic-card .card-header h3 {
    margin: 0;
    color: var(--color-text, #333);
    font-family: var(--font-bold, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.clinic-card .card-header i {
    color: var(--color-text, #333);
    opacity: 0.8;
}

/* --- BODY --- */
.clinic-card .card-body {
    padding: 1.5rem;
    flex-grow: 1; /* Drückt Footer nach unten oder füllt Platz */
    display: flex;
    flex-direction: column;
}

/* Reset für das <address> Tag, damit Text nicht kursiv ist */
.clinic-card address.contact-wrapper {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sektionen */
.clinic-card .contact-section h4 {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border, #eee);
    font-family: var(--font-bold);
    color: var(--color-text-light, #666);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clinic-card .location-title {
    display: block;
    font-family: var(--font-bold);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

/* --- ROWS (Icon + Content) --- */
.clinic-card .contact-row {
    display: flex;
    align-items: flex-start; /* Oben bündig wichtig bei mehrzeiligem Text */
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.clinic-card .contact-row:last-child {
    margin-bottom: 0;
}

.clinic-card .icon-wrapper {
    width: 30px; /* Fixe Breite für saubere Kante */
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0;
    color: var(--color-primary, #0099cc);
    padding-top: 2px; /* Optische Korrektur */
}

.clinic-card .icon-wrapper i {
    font-size: 1.1rem;
}

.clinic-card .content-wrapper {
    flex: 1;
    font-family: var(--font-base, sans-serif);
    color: var(--color-text, #333);
    word-break: break-word; /* Verhindert Layout-Bruch bei langen Mails */
}

/* --- LINKS & TYPOGRAFIE --- */
.clinic-card .phone-link,
.clinic-card .mail-link {
    color: var(--color-text, #333);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-block; /* Für bessere Touch-Target */
}

.clinic-card .phone-link:hover,
.clinic-card .mail-link:hover {
    color: var(--color-primary, #0099cc);
    text-decoration: underline;
}

.clinic-card .fax-number {
    color: var(--color-text-light, #555);
}

/* Map Link Button-Style (Optional) oder Text-Link */
.clinic-card .map-link {
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.5rem;
    font-family: var(--font-bold);
}

.clinic-card .map-link:hover {
    text-decoration: underline;
}

/* Accessibility Focus States */
.clinic-card a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Visually Hidden Helper (falls nicht global definiert) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}







/* ==========================================================================
   MODULE: PERSON CONTACT CARD (Ansprechpartnerin)
   ========================================================================== */

.msz-person-card {
    width: 100%;
    /* Verhindert, dass die Karte zu breit wird auf großen Bildschirmen */
    max-width: 900px; 
    margin: var(--space-xl) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-secondary); /* Helles Blau als Basis */
    font-family: var(--font-base);
    color: var(--color-text);
}

/* --- Header (Dunkelblau) --- */
.msz-person-header {
    /* Nutzt eine dunklere Farbe angelehnt an das Bild, 
       alternativ var(--color-primary) nutzen */
    background-color: #005680; 
    padding: var(--space-sm) var(--space-md);
    color: #ffffff;
}

.msz-person-header h3 {
    margin: 0;
    font-family: var(--font-regular);
    font-size: var(--font-size-lg);
    font-weight: normal;
}

/* --- Body (Grid Layout) --- */
.msz-person-body {
    padding: var(--space-md);
    display: grid;
    gap: var(--space-md);
    /* Hintergrundfarbe für den Inhaltsbereich */
    background-color: var(--color-secondary); 
}

/* --- Bild Bereich --- */
.msz-person-visual {
    width: 120px;
    height: 150px;
    flex-shrink: 0;
    background-color: #ddd; /* Fallback */
}

.msz-person-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 2px;
}

/* --- Content Bereich --- */
.msz-person-content {
    display: flex;
    flex-direction: column;
}

/* Rolle (Verwaltungsdirektorin) */
.msz-person-role {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: 2px;
    display: block;
}

/* Name */
.msz-person-name {
    margin: 0 0 var(--space-xs) 0;
    font-family: var(--font-regular);
    font-weight: normal;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

/* Abteilungsbeschreibung */
.msz-person-dept {
    font-size: var(--font-size-base);
    line-height: 1.4;
    margin-bottom: var(--space-md);
}

/* --- Kontakt Bereich --- */
.msz-person-contact-block {
    margin-top: auto;
}

.msz-contact-label {
    display: block;
    font-family: var(--font-base);
    margin-bottom: var(--space-xxs);
}

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

.msz-contact-list li {
    margin-bottom: 2px;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.msz-contact-list li strong {
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    /* Feste Breite für die Labels (Tel, Fax, Mail) für saubere Kante */
    display: inline-block;
    width: 50px; 
}

/* Links (Telefon & Email) */
.email-link {
    color: green; /* Gemäß Screenshot grünlicher Ton */
    /* Oder nutze Variable: color: var(--color-primary); */
    text-decoration: underline;
}

.email-link:hover,
.phone-link:hover {
    text-decoration: none;
    color: var(--color-text);
}

/* --- Responsive Breakpoints --- */

/* Tablet & Desktop: Bild links, Text rechts */
@media (min-width: 600px) {
    .msz-person-body {
        grid-template-columns: 120px 1fr;
        align-items: start;
    }
}







/* ==========================================================================
   MODULE: TEAM MEMBER CARD
   Layout: Mobile 1 Spalte | Tablet & Desktop 3 Spalten
   ========================================================================== */

/* 1. CONTAINER: DAS GRID */
.contact-panel.team-panel {
    background-color: transparent; 
    box-shadow: none; 
    padding: 0; 
    
    display: grid;
    /* Standard (Mobile): 1 Spalte */
    grid-template-columns: 1fr; 
    gap: var(--space-lg); 
    
    margin: var(--space-xl) auto;
    max-width: 100%;
}

/* RESPONSIVE: Ab Tablet (768px) sofort auf 3 Spalten schalten */
@media (min-width: 768px) {
    .contact-panel.team-panel {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* 2. TEAM MEMBER CARD (Die einzelne Karte) */
.team-member-card {
    position: relative; /* Anker für den Link */
    
    background-color: var(--color-bg); 
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow); 
    border: 1px solid var(--color-border);
    
    padding: var(--space-md); 
    height: 100%; /* Damit alle Karten in einer Zeile gleich hoch sind */
    
    /* Interne Anordnung: Bild links, Text rechts */
    display: flex; 
    flex-direction: row; 
    gap: var(--space-md);
    align-items: flex-start;
    text-align: left; 
}

/* --- INTERAKTIVITÄT (Nur wenn Link vorhanden ist) --- */
/* Nutzt :has(), um zu prüfen, ob ein Link in der Karte ist */
.team-member-card:has(.team-more-link) {
    cursor: pointer; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover-Effekt nur bei verlinkten Karten */
.team-member-card:has(.team-more-link):hover {
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Pfeil-Animation beim Hover über die Karte */
.team-member-card:has(.team-more-link):hover .team-more-link i {
    transform: translateX(5px);
}
.team-member-card:has(.team-more-link):hover .team-more-link {
    color: var(--color-primary);
}


/* 3. VISUELLER BEREICH (Bild/Icon) */
.team-member-visual {
    flex-shrink: 0; /* Darf nicht kleiner werden */
    width: 80px; 
    height: 80px; 
    margin: 0; 
    
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    display: flex; 
    align-items: center; 
    justify-content: center;
    overflow: hidden;
}

.team-member-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-member-visual i {
    font-size: 2.5rem; /* Großes Icon */
    color: var(--color-primary);
}


/* 4. CONTENT BEREICH */
.team-member-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 80px; /* Mindesthöhe passend zum Bild */
}

/* Rolle (H3) */
.team-member-role {
    font-family: var(--font-base); /* Oder Bold, je nach Wunsch */
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0 0 2px 0; /* Minimaler Abstand zum Namen */
    line-height: 1.2;
    font-weight: normal;
}

/* Name (Strong) */
.team-member-name {
    font-family: var(--font-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    display: block;
    margin: 0 0 var(--space-xs) 0; /* Abstand nach unten */
    line-height: 1.3;
}

/* Der Trick: Alles was nach dem Namen kommt, rutscht nach unten */
.team-member-name + * {
    margin-top: auto;
}

/* Zusatzinfos */
.sub-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
    
    /* Damit Links im Text (z.B. Telefon) klickbar bleiben trotz stretched link */
    position: relative; 
    z-index: 2;
}

/* 5. DER LINK (Optional) */
.team-more-link {
    /* Falls keine sub-info da ist, greift margin-top: auto hier */
    margin-top: auto; 
    padding-top: var(--space-sm);
    
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    
    text-decoration: none;
    color: var(--color-text-light);
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: var(--font-size-sm);
    
    transition: color 0.2s ease;
}

/* STRETCHED LINK: Macht die Karte klickbar */
.team-more-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

.team-more-link i {
    transition: transform 0.3s ease;
    color: var(--color-primary);
}

/* Barrierefreiheit: Fokus */
.team-more-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
    z-index: 3;
}

/* Responsive Anpassung für größere Bilder auf Desktop */
@media (min-width: 1200px) {
    .team-member-visual {
        width: 100px;
        height: 130px;
    }
}











/* ==========================================================================
   MODULE: DIRECTORY ENTRY (Mobile -> Tablet 2-Col -> Desktop 3-Col)
   ========================================================================== */

.msz-directory-entry {
    /* --- MOBILE BASIS (1 Spalte) --- */
    display: flex;
    flex-direction: column;
    
    background-color: #ffffff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin: 2rem 0;
    overflow: hidden;
    
    border-top: 4px solid var(--color-primary, #00A0E3);
}

/* --- ZONE 1: BILD --- */
.msz-dir-visual {
    width: 100%;
    height: 260px; /* Mobile Höhe */
    background-color: #f4f4f4;
    position: relative;
    grid-area: visual; /* Für Grid Layout */
}

.msz-dir-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

/* --- ZONE 2: INFO --- */
.msz-dir-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom: 1px solid #f0f0f0;
    grid-area: info; /* Für Grid Layout */
}

.msz-dir-header { margin-bottom: 1rem; }

.msz-dir-role {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary, #00A0E3);
    margin-bottom: 0.5rem;
    font-family: var(--font-bold, sans-serif);
}

.msz-dir-name {
    margin: 0;
    font-size: 1.6rem;
    color: var(--color-text, #333);
    font-family: var(--font-bold, sans-serif);
    line-height: 1.2;
}

.msz-dir-company {
    display: block;
    color: #333;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.msz-dir-address {
    font-style: normal;
    color: #666;
    line-height: 1.5;
}

/* --- ZONE 3: AKTIONEN --- */
.msz-dir-actions {
    padding: 1.5rem;
    background-color: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    grid-area: actions; /* Für Grid Layout */
}

/* Button Styles */
.msz-dir-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

/* Hover (nur aktive Buttons) */
.msz-dir-btn:not(.msz-dir-btn-inactive):hover {
    border-color: var(--color-primary, #00A0E3);
    background-color: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    cursor: pointer;
}

/* Inaktive Buttons (Fax) */
.msz-dir-btn.msz-dir-btn-inactive {
    background-color: #fafafa;
    color: #666;
    cursor: default;
}

.msz-dir-icon {
    width: 32px;
    height: 32px;
    background-color: var(--color-secondary, #e3f2fb);
    color: var(--color-primary, #00A0E3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msz-dir-label {
    display: flex;
    flex-direction: column;
}

.label-small {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
}

.label-main {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
}

/* E-Mail JS Fix */
.msz-dir-btn.email-btn {
    display: flex; 
    align-items: center;
}
.msz-dir-btn.email-btn .js-email-protect {
    font-weight: 700;
    color: #333;
}


/* ==========================================================================
   TABLET ANSICHT (768px - 1100px)
   Layout: 2 Spalten
   Links: Bild (hoch) | Rechts: Info oben, Kontakt unten
   ========================================================================== */
@media (min-width: 768px) {
    .msz-directory-entry {
        display: grid;
        /* Spalte 1: 260px Bild, Spalte 2: Rest */
        grid-template-columns: 260px 1fr;
        /* Zeile 1: Auto (Info), Zeile 2: Rest (Kontakt) */
        grid-template-rows: auto 1fr;
        /* Definierte Bereiche */
        grid-template-areas: 
            "visual info"
            "visual actions";
        
        border-top: 1px solid var(--color-border, #e0e0e0);
        border-left: 6px solid var(--color-primary, #00A0E3);
    }

    /* Bild füllt die linke Seite komplett (über beide Zeilen) */
    .msz-dir-visual {
        height: 100%; 
        border-right: 1px solid #eee;
    }

    .msz-dir-visual img {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
    }

    /* Info oben rechts */
    .msz-dir-info {
        border-bottom: 1px solid #eee;
        padding: 1.5rem 2rem;
    }

    /* Kontakt unten rechts */
    .msz-dir-actions {
        padding: 1.5rem 2rem;
        background-color: #fff; /* Weiß auf Tablet/Desktop */
        justify-content: flex-start; /* Buttons oben bündig */
    }
}


/* ==========================================================================
   DESKTOP ANSICHT (ab 1100px)
   Layout: 3 Spalten (Alles nebeneinander)
   ========================================================================== */
@media (min-width: 1100px) {
    .msz-directory-entry {
        /* Umschalten auf 3 Spalten */
        grid-template-columns: 260px 1fr 300px;
        grid-template-rows: 1fr; /* Nur eine Zeile */
        grid-template-areas: 
            "visual info actions";
    }

    .msz-dir-info {
        border-bottom: none;
        border-right: 1px solid #f0f0f0;
        padding: 2rem;
    }

    .msz-dir-actions {
        padding: 2rem;
        border-left: 1px solid #eee;
        background-color: #fff;
    }
}









/* ==========================================================================
   MODULE: AFTERCARE GRID (Nachsorge)
   ========================================================================== */

/* --- Grid Layout (Mobile First) --- */
.aftercare-grid {
    display: grid;
    /* Nutzt deine globale Gutter-Variable */
    gap: var(--gutter); 
    grid-template-columns: 1fr;
    margin: var(--space-xl) 0;
    padding: 0;
}

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

/* Desktop: 3 Spalten (Auto-Fit für schöne Verteilung bei 5 Items) */
@media (min-width: 1200px) {
    .aftercare-grid {
        /* Nutzt 3 Spalten, die 5. Karte rutscht mittig oder links drunter */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Link Wrapper --- */
.aftercare-link {
    text-decoration: none;
    color: inherit;
    display: flex; /* Wichtig damit Karte 100% Höhe hat */
    height: 100%;
    outline: none;
    border-radius: var(--border-radius);
    transition: transform 0.2s ease;
}

/* Barrierefreiheit: Focus State */
.aftercare-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    z-index: 10;
}

/* --- Card Component --- */
.care-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    
    /* Flexbox für "Sticky Footer" Effekt innerhalb der Karte */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    /* Oben farbige Kante wie bei deinen anderen Cards */
    border-top: 4px solid var(--color-primary);
    
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover-Effekte */
.aftercare-link:hover .care-card {
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary);
}


/* --- Card Header --- */
.care-card-header {
    /* Hellblauer Hintergrund wie bei .ambulanz-card-header */
    background-color: var(--color-secondary);
    padding: var(--space-md);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.care-card-header i {
    font-size: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.care-card-header h4 {
    margin: 0;
    font-family: var(--font-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: 1.2;
}

/* --- Card Body --- */
.care-card-body {
    padding: var(--space-md);
    flex-grow: 1; /* Drückt den Footer nach unten */
    color: var(--color-text-light);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.care-card-body p {
    margin: 0;
}

.care-card-body strong {
    color: var(--color-text);
    font-family: var(--font-bold);
}

.care-card-footer {
    background-color: var(--color-bg-light); /* Leichtes Grau */
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    color: var(--color-primary);
    font-family: var(--font-bold);
    font-size: var(--font-size-sm);
}

.care-card-footer .fake-link {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.care-card-footer i {
    font-size: 1rem;
    opacity: 0; 
    transform: translateX(-10px); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Sanftes Easing */
}

.aftercare-link:hover .care-card-footer i {
    opacity: 1;
    transform: translateX(0);
}








/* ==========================================================================
   MODULE: DOWNLOAD GRID (msz-dl-grid)
   Final Version: Stretched Link, Slide-In Arrow, No Underline
   ========================================================================== */

/* Container für den gesamten Bereich */
.msz-dl-grid-container {
    width: 100%;
    margin: var(--space-xl) 0;
}

/* --- Überschrift --- */
.msz-dl-grid-headline {
    font-family: var(--font-bold);
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

/* --- Grid Layout (Mobile First) --- */
.msz-dl-grid-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Spalte */
    gap: var(--gutter); 
}

/* Tablet: 2 Spalten */
@media (min-width: 600px) {
    .msz-dl-grid-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
    .msz-dl-grid-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Die Karte (Container) --- */
.msz-dl-card {
    /* WICHTIG: Definiert den Bezugsrahmen für den Link */
    position: relative; 
    
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    border: 1px solid var(--color-border);
    /* Farbiger Akzent oben (CI) */
    border-top: 4px solid var(--color-primary);
    
    display: flex;
    flex-direction: column;
    height: 100%;
    
    /* Zeigt Klickbarkeit an */
    cursor: pointer;
    
    /* Animation nur für Schatten/Rahmen/Transform */
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Hover-Effekt: Karte */
.msz-dl-card:hover {
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary); /* Rahmen wird blau */
}

/* --- Inhalt --- */
.msz-dl-card-body {
    padding: var(--space-lg);
    flex-grow: 1; /* Drückt Footer nach unten */
}

/* Icon Kreis */
.msz-dl-icon-circle {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--color-bg);
    font-size: 1.2rem;
}

/* Titel */
.msz-dl-card-title {
    display: block;
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

/* Meta-Daten (Größe, Typ) */
.msz-dl-card-meta {
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    display: block;
}

/* --- Footer --- */
.msz-dl-card-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-light); 
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    
    /* WICHTIG: Muss static sein, damit der Link ausbrechen kann */
    position: static; 
}

/* --- Button / Link (Stretched) --- */
.msz-dl-card-btn {
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    
    /* Reset */
    background: transparent;
    border: none;
    
    transition: color 0.2s ease;
}

/* --- ANIMATION: Slide-In Pfeil --- */

/* Startzustand: Unsichtbar und nach links verschoben */
.msz-dl-card-btn i {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Endzustand (Hover auf Karte): Sichtbar und an Originalposition */
.msz-dl-card:hover .msz-dl-card-btn i {
    opacity: 1;
    transform: translateX(0);
    color: var(--c-primary);
}

/* Text Hover Effekt: KEIN UNTERSTRICH MEHR */
.msz-dl-card:hover .msz-dl-card-btn {
    text-decoration: none; /* Unterstreichung entfernt */
    color: var(--c-primary); 
}

/* --- DER STRETCHED LINK TRICK --- */
/* Legt eine unsichtbare Fläche über die gesamte Karte */
.msz-dl-card-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; 
}

/* Barrierefreiheit: Fokus sichtbar machen */
.msz-dl-card-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}










/* ==========================================================================
   MODULE: INFO CARD GRID (Bild oben, Text mitte, Grauer Footer unten)
   Basiert auf den bereitgestellten :root Variablen.
   ========================================================================== */

/* --- Grid Container --- */
.msz-info-grid {
    display: grid;
    /* Mobile (Standard): 1 Spalte */
    grid-template-columns: 1fr; 
    gap: var(--gutter);
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
}

/* Tablet (ab 768px): Genau 2 Spalten */
@media (min-width: 768px) {
    .msz-info-grid {
        /* repeat(2, 1fr) erstellt 2 gleich große Spalten */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Desktop (ab 1024px): 4 Spalten */
/* Du kannst hier auch auf 1200px erhöhen, falls die Karten bei 1024px zu schmal werden */
@media (min-width: 1024px) {
    .msz-info-grid {
        /* repeat(4, 1fr) erstellt 4 gleich große Spalten */
        grid-template-columns: repeat(4, 1fr); 
    }

    .msz-info-grid.msz-grid-3 {
        /* Überschreibt das Standard-Verhalten von 4 Spalten */
        grid-template-columns: repeat(3, 1fr);
    }


}



.msz-info-card {
    position: relative;    
    display: flex;
    flex-direction: column;
    height: 100%;    
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; 
    box-shadow: var(--boxshadow);
    transition:0.3s;
}

/* Hover-Effekt auf die gesamte Box */
.msz-info-card.active,
.msz-info-card:hover {
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary);
    transition:0.3s;
}


/* --- 1. Bereich Oben: Das Bild --- */
.msz-info-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-secondary);
    position: relative;
}

.msz-info-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- 2. Bereich Mitte: Inhalt (Headline & Text) --- */
.msz-info-card__content {
    padding: var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.msz-info-card__headline {
    font-family: var(--font-bold);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.3;
}

.msz-info-card__text {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- 3. Bereich Unten: Grauer Footer Balken --- */
.msz-info-card__footer {
    /* Graue Hintergrundfarbe aus Variablen */
    background-color: var(--color-bg-light); 
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static;
}


/* --- Der Link und die Pfeil-Animation --- */
.msz-info-card__link {
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* DER STRETCHED LINK TRICK */
/* Legt eine unsichtbare Klickfläche über die gesamte Karte (.msz-info-card) */
.msz-info-card__link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* ANIMATION: Slide-In Pfeil */

/* Startzustand: Unsichtbar und leicht links */
.msz-info-card__link i {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--color-primary);
}

/* Endzustand: Wenn man die KARTE hovert, erscheint der Pfeil im Footer */
.msz-info-card:hover .msz-info-card__link i {
    opacity: 1;
    transform: translateX(0);
}

/* Barrierefreiheit: Fokus sichtbar machen */
.msz-info-card__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}









/* ==========================================================================
   MODULE: CONTACT DIRECTORY
   Layout: Sprechstunden Sozialdienst
   ========================================================================== */


/* --- CONTAINER --- */
.contact-directory {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: var(--space-xl);
}

/* --- EINZELNE ZEILE (ITEM) --- */
.contact-directory__item {
    display: grid;
    /* Mobile First: Alles untereinander */
    grid-template-columns: 1fr; 
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
    position: relative;
}

/* Letztes Item hat keinen Strich unten */
.contact-directory__item:last-child {
    border-bottom: none;
}

/* Hover Effekt für die Zeile */
.contact-directory__item:hover {
    background-color: var(--color-secondary); /* Hellblau aus Variablen */
}

/* Desktop Ansicht: Nebeneinander (Icon | Text | Telefon) */
@media (min-width: 768px) {
    .contact-directory__item {
        /* Spalten: Icon (auto) | Text (Rest) | Button (auto) */
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--space-lg);
    }
}

/* --- ICON BEREICH --- */
.contact-directory__icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-secondary); /* Hellblau */
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* --- TEXT BEREICH --- */
.contact-directory__content {
    display: flex;
    flex-direction: column;
}

.contact-directory__title {
    margin: 0 0 0.25rem 0;
    font-family: var(--font-bold);
    font-size: 1.1rem;
    color: var(--color-text);
}

.contact-directory__subtitle {
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* --- ACTION / LINK BEREICH --- */
.contact-directory__action {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Mobile: Links */
}

@media (min-width: 768px) {
    .contact-directory__action {
        justify-content: flex-end; /* Desktop: Rechts */
    }
}

/* Der Telefon-Link Button Stil */
.contact-directory__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-bold);
    font-size: 1.1rem;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-secondary); /* Zarter Rahmen */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.contact-directory__link:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --- SPECIAL STYLE: Terminvereinbarung --- */
.contact-directory__item--highlight {
    background-color: #fafafa; /* Leicht abgedunkelt als Unterscheidung */
}

.contact-directory__info-badge {
    background-color: var(--color-bg);
    border: 1px dashed var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: var(--color-text);
    font-size: 0.95rem;
}

.contact-directory__info-badge strong {
    color: var(--color-primary);
    font-family: var(--font-bold);
}















/* ==========================================================================
   MODULE: SERVICE GRID (msz-service)
   Layout: Sozialdienst Leistungen & Teaser
   ========================================================================== */
   
/* --- SERVICE GRID CONTAINER --- */
.msz-service-grid {
    display: grid;
    /* Mobile First: 1 Spalte */
    grid-template-columns: 1fr;
    gap: var(--gutter);
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
    .msz-service-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- SERVICE ITEM (KARTE) --- */
.msz-service-item {
    /* Wichtig für den Stretched Link Bezugsrahmen */
    position: relative;
    
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    /* Farbiger Akzent links */
    border-left: 5px solid var(--color-primary);
    border-radius: 4px;
    padding: var(--space-lg);
    
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

/* Hover Effekt: Anheben und Rahmen färben */
.msz-service-item.active,
.msz-service-item:hover {
    box-shadow: var(--boxshadow-hover);
    /* Optional: Rahmen färbt sich komplett blau */
    border-color: var(--color-primary);
}

/* --- ICON STYLING --- */
.msz-service-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* --- TEXT CONTENT --- */
.msz-service-content {
    display: flex;
    flex-direction: column;
    /* Wichtig: Füllt den verfügbaren Platz, damit der Link unten bündig ist */
    flex-grow: 1;
}

.msz-service-title {
    margin: 0 0 var(--space-xxs) 0;
    font-family: var(--font-bold);
    font-size: 1.1rem;
    color: var(--color-text);
}

.msz-service-text {
    margin: 0 0 var(--space-md) 0; /* Abstand nach unten zum Link */
    font-family: var(--font-base);
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* --- LINK & ANIMATION --- */
.msz-service-link {
    /* Drückt den Link ans untere Ende der Flex-Box */
    margin-top: auto;
    
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-bold);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    
    /* WICHTIG: Muss static sein, damit ::after sich auf .msz-service-item bezieht */
    position: static;
}

/* Der Stretched Link Trick (Ganze Karte klickbar) */
.msz-service-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Pfeil Animation: Startzustand */
.msz-service-link i {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--color-primary);
}

/* Pfeil Animation: Hover Zustand (Wenn Karte gehovert wird) */
.msz-service-item:hover .msz-service-link i {
    opacity: 1;
    transform: translateX(0);
}

/* Barrierefreiheit: Fokus sichtbar machen */
.msz-service-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}






/* ==========================================================================
   MODULE: LOCATION GRID (Kontakt Standorte & Notfall)
   ========================================================================== */

/* --- Grid Layout --- */
.loc-grid-new {
    display: grid;
    /* Mobile: 1 Spalte */
    grid-template-columns: 1fr; 
    gap: 25px; /* Etwas mehr Luft zwischen den Karten */
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

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

/* Desktop: 4 Spalten */
@media (min-width: 1200px) {
    .loc-grid-new {
        grid-template-columns: repeat(4, 1fr);
    }
    .loc-grid-new.force-2-col {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* --- Card Basis --- */
.loc-card-new {
    /* Variablen für Standard-Farben (Blau) */
    --card-accent: #00A0E3;       /* Deine Primary Color */
    --card-bg-header: #e3f2fb;    /* Deine Secondary Color */
    --card-icon-color: #00A0E3;
    
    background-color: #fff;
    /* Der dicke Balken oben (wie im Screenshot) */
    border-top: 5px solid var(--card-accent);
    /* Feiner Rahmen drumherum */
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 4px; /* Leichte Rundung unten */
    
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loc-card-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* --- Header (Hellblau) --- */
.loc-card-new__header {
    background-color: var(--card-bg-header);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.loc-card-new__header i {
    font-size: 1.5rem;
    color: var(--card-icon-color);
}

.loc-card-new__title {
    margin: 0;
    font-size: 1.1rem;
    font-family: var(--font-bold, sans-serif);
    color: #333;
    line-height: 1.3;
}

/* --- Body --- */
.loc-card-new__body {
    padding: 1.5rem;
    flex-grow: 1; /* Drückt Footer nach unten */
    font-size: 0.95rem;
    color: #555;
}

.loc-address-block {
    margin-bottom: 1.5rem;
    color: #333;
    font-weight: 500;
}

/* Struktur für Icon + Text (wie Uhrzeit im Screenshot) */
.loc-info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
}

.loc-icon-col {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    color: var(--card-icon-color);
    font-size: 1.1rem;
    padding-top: 2px; /* Optische Korrektur */
}

.loc-content-col {
    flex-grow: 1;
}

.loc-time-entry {
    margin-bottom: 4px;
    line-height: 1.4;
}

.loc-time-entry strong {
    color: #333;
    font-family: var(--font-bold, sans-serif);
    margin-right: 4px;
}

.loc-meta-info {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #888;
    padding-left: 36px; /* Einrückung passend zum Text der Icon-Spalte */
}

/* --- Footer --- */
.loc-card-new__footer {
    padding: 1rem 1.5rem;
    background-color: #fff; /* Im Screenshot weiß, durch Linie getrennt */
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.loc-footer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.loc-footer-link {
    text-decoration: none;
    color: #333;
    font-size: 1.1rem;
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    transition: color 0.2s;
}

.loc-footer-link:hover {
    color: var(--card-accent);
}

/* ==========================================================================
   SPECIAL: NOTFALL KARTE (Rot)
   ========================================================================== */
.loc-card-new--emergency {
    /* Wir überschreiben einfach die lokalen Variablen! */
    --card-accent: #d32f2f;       /* Signalrot */
    --card-bg-header: #ffebee;    /* Helles Rot */
    --card-icon-color: #d32f2f;
}

.loc-card-new--emergency .loc-footer-link {
    color: #d32f2f; /* Telefonnummer auch rot */
}

.loc-card-new--emergency:hover {
    box-shadow: 0 10px 20px rgba(211, 47, 47, 0.15);
}









/* ==========================================================================
   MODULE: CLEAN BUSINESS CARD (Mobile First & Accessible)
   ========================================================================== */

.msz-business-card {
    /* --- MOBILE BASE STYLES (Standard) --- */
    display: flex;
    flex-direction: column; /* Inhalt untereinander stapeln */
    width: 100%;
    max-width: 850px; /* Begrenzung auf großen Screens */
    
    background-color: #fff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    
    /* Mobile: Akzentlinie OBEN */
    border-top: 5px solid var(--color-primary, #00A0E3);
    border-left: 1px solid var(--color-border, #e0e0e0); /* Reset left border */
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin: 2rem 0;
    overflow: hidden;
    position: relative;
}

/* --- BILD BEREICH --- */
.msz-bc-image-col {
    width: 100%;
    /* Mobile: Bildhöhe begrenzen, damit Inhalt sichtbar bleibt */
    height: 220px; 
    background-color: var(--color-secondary, #e3f2fb);
    position: relative;
}

.msz-bc-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wichtig: Füllt Fläche, schneidet Ränder ab */
    object-position: center 20%; /* Fokus leicht oberhalb der Mitte (Gesicht) */
    display: block;
}

/* --- CONTENT WRAPPER --- */
.msz-bc-content-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- HEADER (Name & Position) --- */
.msz-bc-header {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.msz-bc-position {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem; /* Lesbar, aber dezent */
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--color-primary, #00A0E3);
    font-family: var(--font-bold, sans-serif);
    margin-bottom: 0.5rem;
}

.msz-bc-name {
    margin: 0;
    font-family: var(--font-bold, sans-serif);
    font-size: 1.5rem; /* Groß genug für Touch-Lesbarkeit */
    line-height: 1.2;
    color: var(--color-text, #333);
}

/* --- BODY (Adresse) --- */
.msz-bc-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    flex-grow: 1;
}

.msz-bc-company {
    font-weight: 700;
    margin: 0.5rem 0 0.25rem 0;
    color: #444;
}

.msz-bc-address {
    font-style: normal;
    color: #666;
    line-height: 1.5;
    font-size: 1rem;
}

/* --- FOOTER (Kontakt) --- */
.msz-bc-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem;
    
    display: flex;
    flex-direction: column; /* Mobile: Kontakte untereinander für bessere Klickbarkeit */
    gap: 1rem;
}

.msz-bc-contact-item {
    font-size: 1rem; /* Größere Schrift für Mobile */
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0; /* Touch Target vergrößern */
}

/* Icons */
.msz-bc-contact-item i {
    color: var(--color-primary, #00A0E3);
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* Links hervorheben */
a.msz-bc-contact-item:focus,
a.msz-bc-contact-item:hover,
.msz-bc-contact-item .link-style:hover {
    color: var(--color-primary, #00A0E3);
    text-decoration: underline;
    outline: none;
}

/* Barrierefreiheit Focus State */
a.msz-bc-contact-item:focus-visible {
    outline: 2px solid var(--color-primary, #00A0E3);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ==========================================================================
   MODULE: PORTRAIT CARD (Bild Links Groß, Kontaktliste vertikal)
   ========================================================================== */

.msz-portrait-card {
    display: flex;
    flex-direction: column; /* Mobile First: Untereinander */
    
    background-color: #fff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin: 2rem 0;
    overflow: hidden;
    max-width: 900px;
    
    /* Akzentlinie links (Blau) */
    border-left: 5px solid var(--color-primary, #00A0E3);
}

/* --- BILD BEREICH --- */
.msz-pc-image {
    width: 100%;
    /* Mobile: Ausreichend Höhe geben */
    height: 300px; 
    background-color: #f0f0f0;
    position: relative;
}

.msz-pc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt den Bereich komplett */
    object-position: center top; /* Fokus auf Gesicht */
    display: block;
}

/* --- INHALT BEREICH --- */
.msz-pc-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header */
.msz-pc-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.msz-pc-position {
    display: block;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-primary, #00A0E3);
    font-family: var(--font-bold, sans-serif);
    margin-bottom: 4px;
}

.msz-pc-name {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #333;
    font-family: var(--font-bold, sans-serif);
}

/* Adresse */
.msz-pc-body {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #555;
}

.msz-pc-company {
    display: block;
    color: #333;
    margin-bottom: 0.25rem;
}

.msz-pc-address {
    font-style: normal;
    line-height: 1.5;
}

/* --- KONTAKTLISTE (Vertikal) --- */
.msz-pc-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* WICHTIG: Untereinander */
    gap: 0.8rem; /* Abstand zwischen den Einträgen */
}

.msz-pc-contact-list li {
    margin: 0;
}

/* Gemeinsame Styles für Link und Text */
.msz-pc-link,
.msz-pc-text {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: color 0.2s;
}

/* Icon Style */
.msz-pc-icon {
    width: 24px;
    text-align: center;
    color: var(--color-primary, #00A0E3);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Hover Effekt für Links */
a.msz-pc-link:hover,
.msz-pc-link .link-style:hover {
    color: var(--color-primary, #00A0E3);
    text-decoration: underline;
    cursor: pointer;
}

/* --- DESKTOP ANSICHT (ab 768px) --- */
@media (min-width: 768px) {
    .msz-portrait-card {
        flex-direction: row; /* Nebeneinander */
        /* Fixe Höhe für Desktop-Look, optional, passt sich sonst Inhalt an */
        min-height: 320px; 
    }

    .msz-pc-image {
        /* Hier stellen wir die Breite ein - z.B. 35% oder feste Pixel */
        width: 280px; 
        height: auto; /* Automatische Höhe basierend auf Flex-Container */
        flex-shrink: 0;
    }
    
    .msz-pc-image img {
        position: absolute;
        height: 100%;
    }

    .msz-pc-content {
        padding: 2rem; /* Mehr Platz auf Desktop */
        flex-grow: 1;
    }
}










   
   
   
   
   
   
   /* ==========================================================================
   MODULE: SCHEDULE GRID (msz-schedule)
   Layout: Sprechstunden Übersicht & Kontakt
   ========================================================================== */

/* --- Container Grid --- */
.msz-schedule-grid {
    display: grid;
    /* Mobile First: 1 Spalte */
    grid-template-columns: 1fr; 
    gap: var(--gutter); 
    
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
    
    /* WICHTIG: 'align-items: stretch' (Standard) lassen, damit 
       beide Karten gleich hoch sind. Das sieht sauberer aus. */
}

/* Desktop (ab 1024px): 2 Spalten (passend zum Screenshot) */
@media (min-width: 1024px) {
    .msz-schedule-grid {
        /* Falls du doch 3 brauchst, ändere die 2 in eine 3 */
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* --- Die einzelne Karte (Card) --- */
.msz-schedule-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    
    /* Farbiger Akzent oben (CI) */
    border-top: 4px solid var(--color-primary);
    
    /* Flexbox für Sticky Footer Aufbau */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.msz-schedule-card:hover {
    box-shadow: var(--boxshadow-hover);
    /* Optional: Minimaler Hover-Effekt nach oben */
    transform: translateY(-2px);
}

/* --- Header der Karte --- */
.msz-schedule-header {
    background-color: var(--color-secondary);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.msz-schedule-header h3 {
    margin: 0;
    font-family: var(--font-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Etwas mehr Abstand zum Icon */
}

.msz-schedule-header i {
    color: var(--color-primary);
}

/* Subline im Header (Name des Arztes) */
.msz-schedule-header span {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: 0.5rem;
}

/* --- Body der Karte --- */
.msz-schedule-body {
    padding: var(--space-lg);
    
    /* Flexbox, damit der Kontaktbereich nach unten geschoben werden kann */
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

/* --- Tages-Gruppen (z.B. "Montag") --- */
.msz-schedule-day-group {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px dashed var(--color-border);
}

.msz-schedule-day-group:last-child {
    /* Letztes Element vor dem Kontaktbereich braucht keinen Border */
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Wochentag Überschrift */
.msz-schedule-day {
    display: block;
    font-family: var(--font-bold);
    font-size: 0.9rem; /* Leicht angepasst für Hierarchie */
    color: var(--color-primary);
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Liste der Zeiten --- */
.msz-schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msz-schedule-item {
    display: flex;
    flex-direction: column; /* Mobile: Zeit oben, Text unten */
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.msz-schedule-item:last-child {
    margin-bottom: 0;
}

/* Die Uhrzeit */
.msz-schedule-time {
    font-family: var(--font-bold); 
    color: var(--color-text);
    min-width: 120px; /* Breite angepasst für bessere Flucht */
    display: inline-block;
}

/* Das Thema (z.B. Bauchsprechstunde) */
.msz-schedule-topic {
    color: var(--color-text-light);
}

/* Responsive Anpassung innerhalb der Liste */
@media (min-width: 480px) {
    .msz-schedule-item {
        flex-direction: row; /* Nebeneinander ab breiteren Phones */
    }
}

/* ==========================================================================
   KONTAKTBEREICH (Optimiert für Screenshot & Accessibility)
   ========================================================================== */

.msz-schedule-contact-area {
    margin-top: auto; /* PUSH-TO-BOTTOM: Schiebt diesen Bereich ans Ende der Karte */
    padding-top: var(--space-lg);
    
    /* Der Trennstrich zum Inhalt darüber (im Screenshot nicht dashed, sondern leer, 
       aber dashed hilft der Struktur. Ich lasse es dezent.) */
    border-top: 1px dashed var(--color-border); 
}

/* Label "Terminvereinbarung" */
.msz-schedule-contact-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-bold);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

/* Zusatzinfo (z.B. "über das Ambulante Zentrum") */
.msz-contact-subtext {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

/* Der eigentliche Link (Nummer + Icon) */
.msz-contact-link {
    display: flex;              
    align-items: center;        
    gap: 12px;                  
    
    text-decoration: none;
    color: var(--color-text);   
    font-family: var(--font-bold);
    font-size: 1.1rem;          
    
    padding: 6px 0; /* Großes Touch-Target für Mobile */
    transition: color 0.2s ease;
}

/* Das Icon Styling */
.msz-contact-link i {
    color: var(--color-primary); 
    font-size: 1.25rem;          
    width: 24px;                 
    text-align: center;
    flex-shrink: 0;
    
    /* Kleiner Hack für optischen Ausgleich, da Icons oft nicht perfekt mittig sitzen */
    transform: translateY(1px); 
}

/* Hover & Focus States */
.msz-contact-link:hover,
.msz-contact-link:focus {
    color: var(--color-primary); 
    outline: none;
}

.msz-contact-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

.msz-schedule-contact i {
    margin-right: 10px;
    color: var(--c-primary)
}










/* ==========================================================================
   MODULE: DOCTOR ENTRY (Innerhalb Accordion Definitionsliste)
   ========================================================================== */

/* Wrapper für einen Arzt-Eintrag */
.doctor-entry {
    display: flex;
    align-items: center; /* Vertikal mittig */
    gap: var(--space-md);
    padding: var(--space-xxs) 0;
}

/* Der Container für das Bild oder Icon */
.doctor-visual {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Kreisförmig */
    background-color: var(--color-bg); /* Hintergrund weiß, falls Icon genutzt wird */
    border: 1px solid var(--color-border);
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Bild selbst */
.doctor-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Das Fallback-Icon */
.doctor-visual i {
    font-size: 1.5rem;
    color: var(--color-primary); /* Primärfarbe */
}

/* Der Textbereich rechts daneben */
.doctor-info {
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text);
}

.doctor-info strong {
    color: var(--color-text);
    font-family: var(--font-bold);
    display: block;
    margin-bottom: 2px;
}







/* ==========================================================================
   MODULE: DOCTOR CARDS (Visitenkarten-Layout)
   ========================================================================== */

/* Das Grid: Mobile 1 Spalte, Desktop 2 Spalten */
.doctor-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md); /* Abstand zwischen den Karten */
    margin-bottom: var(--space-xl);
}

@media (min-width: 900px) {
    .doctor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Die einzelne Visitenkarte */
.doctor-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    padding: var(--space-md);
    
    display: flex;
    gap: var(--space-md);
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover Effekt für die Karte */
.doctor-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary);
}

/* --- Bild / Icon Links --- */
.doctor-card__visual {
    flex-shrink: 0;
    width: 100px;
    height: 140px;
    border-radius: 5px;
    background-color: var(--color-secondary);
    /* border: 2px solid var(--color-bg); */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.doctor-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-card__visual i {
    font-size: 1.8rem;
    color: var(--color-primary);
}

/* --- Text Inhalt Rechts --- */
.doctor-card__content {
    display: flex;
    flex-direction: column;
}

/* Fachrichtung (klein oben drüber) */
.doctor-card__specialty {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    font-family: var(--font-bold);
    margin-bottom: 2px;
}

/* Name des Arztes */
.doctor-card__name {
    font-size: 1.1rem;
    color: var(--color-text);
    font-family: var(--font-bold);
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Adresse */
.doctor-card__address {
    font-size: 0.95rem;
    color: var(--color-text-light);
}

/* Hover-Effekt: Name wird blau, wenn man über die Karte fährt */
.doctor-card:hover .doctor-card__name {
    color: var(--color-primary);
}






/* ==========================================================================
   MODULE: MSZ TEASER GRID 
   View: Wohnstätten in Criewen des MSZ Uckermark
   ========================================================================== */

/* Container für das Grid */
.msz-teaser-grid {
    display: grid;
    /* Responsive: Spalten passen sich automatisch an, mind. 280px breit */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gutter, 20px);
    margin: var(--space-xl, 2rem) 0;
    padding: 0;
    list-style: none;
}

/* Die einzelne Box */
.msz-teaser-box {
    position: relative; /* Wichtig für den Link */
    background-color: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 6px);
    box-shadow: var(--boxshadow, 0 2px 4px rgba(0,0,0,0.05));
    
    display: flex;
    flex-direction: column;
    height: 100%; /* Alle Boxen in einer Zeile gleich hoch */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

/* Hover-Effekt: Box hebt sich an */
.msz-teaser-box:hover {
    box-shadow: var(--boxshadow-hover);
    border-color: var(--color-primary, #00A0E3);
}

.msz-teaser-box:hover::before {
    background-color: var(--color-primary);
}

/* Farbiger Balken oben (CI) */
.msz-teaser-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
}

/* Inhalt der Box */
.msz-teaser-content {
    padding: var(--space-lg, 1.5rem);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Headline */
.msz-teaser-title {
    margin: 0 0 var(--space-sm, 0.75rem) 0;
    font-family: var(--font-bold, sans-serif);
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text, #222);
    line-height: 1.3;
}

/* Fließtext */
.msz-teaser-text {
    margin: 0 0 var(--space-md, 1rem) 0;
    font-family: var(--font-base, sans-serif);
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-light, #666);
    line-height: 1.5;
    flex-grow: 1; /* Drückt den Link nach unten */
}

/* Der Link (Footer der Box) */
.msz-teaser-link {
    margin-top: auto;
    text-decoration: none;
    color: var(--color-primary, #00A0E3);
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    font-size: var(--font-size-base, 1rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icon Animation beim Hover */
.msz-teaser-link i {
    transition: transform 0.3s ease;
}

.msz-teaser-box:hover .msz-teaser-link i {
    transform: translateX(5px);
}

/* STRETCHED LINK: Macht die ganze Box klickbar */
.msz-teaser-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Focus State für Barrierefreiheit */
.msz-teaser-link:focus-visible {
    outline: 2px solid var(--color-accent, #C8D66D);
    outline-offset: 4px;
    border-radius: 2px;
}






/* ==========================================================================
   MODULE: CONTRACT GRID (Vertragsinformationen)
   ========================================================================== */

.contract-grid {
    display: grid;
    /* Mobile: 1 Spalte */
    grid-template-columns: 1fr; 
    gap: var(--space-lg, 1.5rem);
    margin-top: var(--space-lg, 1.5rem);
    margin-bottom: var(--space-xl, 2rem);
}

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

.contract-card {
    background-color: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 6px);
    /* Farbiger Akzent oben (CI-Farbe) */
    border-top: 5px solid var(--color-primary, #00A0E3);
    box-shadow: var(--boxshadow, 0 2px 4px rgba(0,0,0,0.05));
    
    padding: var(--space-lg, 1.5rem);
    display: flex;
    flex-direction: column;
    height: 100%; /* Sorgt dafür, dass alle Karten gleich hoch sind */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contract-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--boxshadow-hover, 0 12px 20px rgba(0,0,0,0.1));
}

.contract-card h3 {
    margin: 0 0 var(--space-md, 1rem) 0;
    font-family: var(--font-bold, sans-serif);
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text, #333);
    /* Unterstreichung für den Titel */
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    padding-bottom: var(--space-xs, 0.5rem);
}

.contract-card p {
    font-family: var(--font-base, sans-serif);
    font-size: var(--font-size-base, 0.95rem);
    color: var(--color-text, #333);
    line-height: 1.5;
    margin-bottom: var(--space-md, 1rem);
    flex-grow: 1; /* Schiebt die Liste nach unten */
}

/* Anpassung der Liste innerhalb der Karte */
.contract-card .travel-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-light, #555);
}

.contract-card .travel-list li {
    margin-bottom: 0.5rem;
}









/* ==========================================================================
   MODULE: YOUTUBE EMBED
   ========================================================================== */


/* Container für Responsive 16:9 Ratio */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%; /* Optional: Maximale Breite */
  aspect-ratio: 16 / 9;
  background-color: #000; /* Fallback Farbe */
  overflow: hidden;
  border-radius: 8px; /* Optional: Abgerundete Ecken */
}

.video-privacy-gate {
  width: 100%;
  height: 100%;
}

/* Entfernt den Standard-Pfeil von <details> */
.video-trigger {
  list-style: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}
.video-trigger::-webkit-details-marker {
  display: none;
}

/* Thumbnail Gestaltung */
.video-thumbnail {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Dunkles Overlay für bessere Lesbarkeit des Textes */
.video-thumbnail::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}

.video-trigger:hover .video-thumbnail::before {
  background: rgba(0, 0, 0, 0.2);
}

/* Inhalt des Overlays (Play Button & Text) */
.video-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 20px;
}

/* Play Button CSS-Only */
.play-icon {
  width: 60px;
  height: 60px;
  background-color: #f00; /* YouTube Rot */
  border-radius: 50%;
  margin: 0 auto 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-icon::after {
  content: "";
  display: block;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid white;
  margin-left: 4px; /* Optische Korrektur */
}

.privacy-notice {
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 300px;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Iframe Styling */
.iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Liegt über dem Summary wenn offen */
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
}

/* WICHTIG: Wenn details offen ist, summary ausblenden (verhindert Doppelklick-Probleme) */
.video-privacy-gate[open] > summary {
  display: none;
}







/* ==========================================================================
   GLOBAL: FORMS & INPUTS
   Design: Clean, Focus-States in Primary Color
   ========================================================================== */
.msz-form-group {
    margin-bottom: var(--space-md);
}

.msz-label {
    display: block;
    margin-bottom: var(--space-xxs);
    font-family: var(--font-bold);
    font-weight: 700;
    color: var(--color-text);
}

.msz-input,
.msz-textarea,
.msz-select {
    width: 100%;
    padding: 0.8rem;
    font-family: var(--font-base);
    font-size: 1rem;
    color: var(--color-text);
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus States (Barrierefreiheit & UX) */
.msz-input:focus,
.msz-textarea:focus,
.msz-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--opacity-color-secondary);
}

.msz-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Checkboxen & Radios Customizing (Optional) */
.msz-check-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.msz-check-input {
    accent-color: var(--color-primary); /* Modern browsers only */
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
}

/* ==========================================================================
   GLOBAL: TABLES (Responsive & Styled)
   ========================================================================== */
.msz-table-wrapper {
    overflow-x: auto;
    margin: var(--space-lg) 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.msz-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-base);
    min-width: 600px; /* Erzwingt Scrollen auf Mobile */
}

.msz-table th,
.msz-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.msz-table th {
    background-color: var(--color-secondary);
    color: var(--color-text);
    font-family: var(--font-bold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.msz-table tr:last-child td {
    border-bottom: none;
}

.msz-table tr:hover td {
    background-color: var(--color-bg-light);
}

/* ==========================================================================
   COMPONENT: BREADCRUMBS (Pfadnavigation)
   ========================================================================== */
.msz-breadcrumb {
    list-style: none;
    padding: var(--space-sm) 0;
    margin: 0 0 var(--space-lg) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.msz-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.msz-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 0.5rem;
    color: var(--color-border);
}

.msz-breadcrumb a {
    text-decoration: none;
    color: var(--color-text-light);
    transition: color 0.2s ease;
}

.msz-breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.msz-breadcrumb .active {
    color: var(--color-primary);
    font-family: var(--font-bold);
}

/* ==========================================================================
   COMPONENT: PAGINATION
   ========================================================================== */
.msz-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
}

.msz-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-bold);
    
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.msz-page-link:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.msz-page-item.active .msz-page-link {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ==========================================================================
   COMPONENT: ALERTS / NOTICES (Generalisiert)
   Baut auf deinem .travel-alert auf, aber universeller
   ========================================================================== */
.msz-alert {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--border-radius);
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-bg-light);
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.msz-alert i {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-top: 2px;
}

.msz-alert-content h4 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-bold);
    font-size: 1.1rem;
}

.msz-alert-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Varianten */
.msz-alert--info {
    border-color: var(--color-primary);
    background-color: var(--color-secondary);
}

.msz-alert--warning {
    border-color: #f0ad4e;
    background-color: #fcf8e3;
}
.msz-alert--warning i { color: #f0ad4e; }

.msz-alert--success {
    border-color: var(--color-accent); /* Dein Grün */
    background-color: var(--lightgreen);
}
.msz-alert--success i { color: #8a9e2b; } /* Etwas dunkleres Grün für Icon */

/* ==========================================================================
   HELPER CLASSES (Typography & Spacing)
   Nutzung der definierten Variablen für schnelle Layout-Korrekturen
   ========================================================================== */
.text-primary { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-muted { color: var(--color-text-light) !important; }

.bg-light { background-color: var(--color-bg-light) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }

.mb-small { margin-bottom: var(--space-sm) !important; }
.mb-medium { margin-bottom: var(--space-md) !important; }
.mb-large { margin-bottom: var(--space-xl) !important; }






/* ==========================================================================
   MODULE: JOB LISTE (Live Filter & Card Design)
   ========================================================================== */

/* --- 1. FILTER CONTROLS --- */
.job-filter-controls {
    margin-bottom: 2rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-base, sans-serif);
    color: #555;
    transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--jt-color-link);
    border-color: var(--jt-color-link);
    color: #fff;
}

/* --- 2. LIST ITEM (Die Karte) --- */
.job-list-item {
    background: #fff;
    border-bottom: 1px solid #eee; 
    /*padding: 1.5rem 0;*/
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    
    /* WICHTIG für den Klick-Effekt */
    position: relative; 
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

/* Hover-Effekt für die gesamte Karte */
.job-list-item:hover {
    transform: translateY(-3px);        /* Leichtes Anheben */
    box-shadow: var(--boxshadow-hover);
    background-color: var(--c-bg-body);
    z-index: 2; 
    border-bottom-color: transparent;
    border-radius: 4px;
}

/* --- 3. META HEADER (Badge & Zeit) --- */
.job-item-meta-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

/* Der grüne Kasten (Kategorie) */
.job-badge-cat {
    background-color: var(--c-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    text-transform: capitalize; /* Erster Buchstabe groß */
}

/* Die Zeitangabe (Vollzeit) */
.job-text-time {
    color: var(--job-green);
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- 4. TITEL & STRETCHED LINK --- */
.job-item-title {
    margin: 0;
    font-size: var(--font-size-xxl);
    font-weight: 700; 
    line-height: 1.3;
    color: var(--c-primary);
}

/* Der Link im Titel */
.job-item-title a {
    text-decoration: none;
    color: var(--job-text);
    transition: color 0.2s;
}

/* === DER TRICK: Link über die ganze Box ziehen === */
/* Erzeugt eine unsichtbare Fläche über dem .job-list-item (da dieses relative ist) */
.job-stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Focus State für Tastatur-Nutzer */
.job-stretched-link:focus-visible::after {
    outline: 2px solid var(--job-green);
    outline-offset: -2px;
}

/* --- 5. FOOTER (Standort & Button) --- */
.job-item-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 1rem;
}

.job-location-info {
    color: var(--job-meta);
    font-size: 0.95rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-location-info i {
    color: #999;
    font-size: 1rem;
}

/* --- 6. BUTTON (Fake-Button) --- */
/* Wirkt optisch wie ein Button, Klick wird aber vom Stretched Link abgefangen */
.job-btn-more {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--jt-color-link);
    color: var(--color-bg);
    background: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    
    /* Wichtig: Muss unter dem Stretched Link liegen, reagiert aber auf Parent-Hover */
    position: relative; 
    z-index: 0;
}

/* Wenn man die KARTE hovert, ändert sich der Button */
.job-list-item:hover .job-btn-more {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg);
}

/* Mobile Anpassung */
@media (max-width: 600px) {
    .job-item-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .job-btn-more {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}

.job-item-title a::after {

}


/* --- FILTER CONTAINER LAYOUT --- */
.job-filter-container {
    display: flex;
    flex-direction: column; /* Handy: Untereinander */
    gap: 20px;              /* Abstand zwischen den Gruppen vertikal */
    margin-bottom: 2rem;
    background-color: #f9f9f9; /* Optional: Leichter Hintergrund für den Filterbereich */
    padding: 20px;
    border-radius: 4px;
}

/* Desktop Ansicht (ab 768px oder 992px) */
@media (min-width: 768px) {
    .job-filter-container {
        flex-direction: row; /* Desktop: Nebeneinander */
        align-items: flex-start; 
        gap: 40px;           /* Abstand zwischen den Gruppen horizontal */
    }
    
    .filter-group {
        /* Optional: Wenn beide Gruppen gleich breit sein sollen: */
        /* flex: 1; */
    }
}

/* --- FILTER LABELS & BUTTONS --- */
.filter-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    display: block;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap; /* Falls viele Buttons da sind, umbrechen */
    gap: 8px;
}

/* Button Styling (aus vorherigem Schritt übernommen & verfeinert) */
.filter-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-base, sans-serif);
    color: #555;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--color-primary, #00843d);
    border-color: var(--color-primary, #00843d);
    color: #fff;
}











/* ==========================================================================
   MODULE: CONVERT FORMS (Custom Styling für Bewerbungsformular)
   Design: Clean, Accessible, GLG-Style
   ========================================================================== */


/* --- 1. Der Container (Die "Fläche" hinter dem Formular) --- */
.cf-form-wrap {
    max-width: 100%;
    
    /* Hintergrund & Rahmen */
    background-color: #ffffff;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius);
    
    /* Moderner, weicher Schatten für Tiefe */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    
    /* Innenabstand (Breathing Room) */
    padding: 40px;
    box-sizing: border-box;
}

/* Mobile Anpassung: Weniger Rand auf kleinen Screens */
@media (max-width: 600px) {
    .cf-form-wrap {
        padding: 20px;
        margin: 1rem auto;
        border-top-width: 4px;
    }
}

/* --- 2. Grid Layout Fix (Priorität erhöht) --- */
.cf-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important; 
}

.cf-control-group {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    /* Zweispaltigkeit erzwingen */
    .cf-fields .cf-control-group.cf-one-half {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
    }
    .cf-fields .cf-control-group[data-type="emptyspace"] {
        display: block !important;
        flex: 0 0 100%;
    }
}


/* --- 3. Styling der Felder --- */

/* Labels */
.cf-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--color-text, #333);
    font-size: 0.95rem;
    font-family: var(--font-bold);
}

.cf-required-label {
    color: var(--color-primary, #00843d);
    margin-left: 4px;
}

/* Inputs */
.cf-input {
    width: 100%;
    background-color: #fcfcfc; /* Ganz leichtes Grau innen */
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 1rem;
    color: #333;
    transition: all 0.2s ease;
}

.cf-input:focus {
    background-color: #fff;
    border-color: var(--color-primary, #00843d);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 132, 61, 0.1); /* Glow Effekt */
}

/* Select Pfeil */
select.cf-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

/* Textareas */
textarea.cf-input {
    min-height: 120px;
    resize: vertical;
}

/* Hilfstext */
.cf-control-input-desc {
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}


/* --- 4. Zwischenüberschriften (HTML Fields) --- */
.cf-control-group[data-type="html"] {
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.cf-control-group[data-type="html"] h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-primary, #00843d);
    font-family: var(--font-bold);
    font-size: 1.3rem;
}

.cf-control-group[data-type="html"] p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* --- 5. Upload Bereich --- */
.cfupload {
    border: 2px dashed #ccc;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cfupload:hover {
    border-color: var(--color-primary);
    background-color: #f0fdf4;
}

.cfupload-browse {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #555;
}


/* --- 6. Checkbox (Datenschutz) --- */
.cf-checkbox-group {
    background-color: #f4f6f8; /* Abgesetzter Hintergrund */
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e1e4e8;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cf-checkbox-group input[type="checkbox"] {
    appearance: none;
    min-width: 20px; width: 20px; height: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 3px;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.cf-checkbox-group input[type="checkbox"]::before {
    content: "";
    width: 10px; height: 10px;
    transform: scale(0);
    background-color: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transition: 0.1s;
}

.cf-checkbox-group input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.cf-checkbox-group input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.cf-checkbox-group label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
}


/* --- 7. Submit Button --- */
.cf-control-group[data-type="submit"] {
    margin-top: 30px;
    text-align: right; /* Rechtsbündig auf Desktop */
}

.cf-btn {
    background-color: var(--color-primary, #00843d);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 132, 61, 0.2);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cf-btn:hover {
    background-color: #006e33;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 132, 61, 0.3);
}

.cf-btn:active {
    transform: translateY(0);
}

.cf-spinner { margin-left: 10px; }

@media (max-width: 600px) {
    .cf-control-group[data-type="submit"] { text-align: center; }
    .cf-btn { width: 100%; }
}

/* Honeypot */
.cf-field-hp { display: none !important; visibility: hidden; opacity: 0; }







/* ==========================================================================
   MODULE: BENEFITS SECTION (3-Spalten Grid)
   ========================================================================== */

/* Optional: Container Begrenzung, falls nicht durch Wrapper außen gelöst */
.msz-benefits-section .content-wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Header Bereich */
.msz-benefits-header {
    margin-bottom: var(--space-lg);
}

.msz-benefits-intro {
    font-size: var(--font-size-lg);
    line-height: 1.5;
    margin-top: var(--space-sm);
    color: var(--color-text);
}

/* --- DAS GRID (Mobile First) --- */
.msz-benefits-grid {
    display: grid;
    /* Standard: 1 Spalte für Mobile */
    grid-template-columns: 1fr; 
    gap: var(--gutter); /* Deine Variable (z.B. 20px) */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tablet: 2 Spalten (Optional, falls gewünscht) */
@media (min-width: 768px) {
    .msz-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
    .msz-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- DIE KARTE (Card) --- */
.msz-benefit-card {
    background-color: #ffffff; /* Weiß hebt sich vom Hellblau ab */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    
    /* CI-Akzent oben (wie bei deinen anderen Karten) */
    border-top: 5px solid var(--color-primary); 
    
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Linksbündig */
    
    box-shadow: var(--boxshadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Alle Karten gleich hoch */
}

/* Hover-Effekt */
.msz-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--boxshadow-hover);
}

/* --- ICON --- */
.msz-benefit-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-primary); /* Hellblauer Kreis */
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    
    color: var(--color-bg);
    font-size: 1.75rem;
}

/* --- TEXTE --- */
.msz-benefit-title {
    margin: 0 0 var(--space-xs) 0;
    font-family: var(--font-bold);
    font-size: 1.25rem; /* Etwas größer als Fließtext */
    color: var(--color-text);
    line-height: 1.3;
}

.msz-benefit-desc {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* --- FOOTER UNTER GRID --- */
.msz-benefits-footer {
    margin-top: var(--space-xl);
    text-align: left;
}

.msz-benefits-footer p {
    font-family: var(--font-bold);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    margin: 0;
}













/* ==========================================================================
   MODULE: JOB INTRO & CTA
   View: Karriere
   ========================================================================== */

.msz-job-intro {
    /* Mobile: Alles untereinander */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.msz-intro-content {
    /* Optimiert für Lesbarkeit */
    max-width: 100%;
}

.msz-intro-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--color-text, #333);
}

/* Hervorgehobener Satz */
.intro-highlight {
    color: var(--color-primary, #00A0E3);
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* --- BUTTON STYLING (Accessible) --- */
.msz-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center; /* Text zentriert auf Mobile */
    gap: 10px;
    
    /* Mobile: Volle Breite für Daumen-Freundlichkeit */
    width: 100%; 
    padding: 16px 24px; /* Große Klickfläche */
    
    background-color: var(--color-primary, #00A0E3);
    color: #fff;
    text-decoration: none;
    
    border-radius: 6px; /* Oder var(--border-radius) */
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    
    /* Wichtig für Barrierefreiheit: Rahmen für High Contrast Mode */
    border: 2px solid transparent; 
}

/* Hover State */
.msz-cta-primary:hover {
    background-color: #0088cc; /* Etwas dunkler */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    color: #fff;
    text-decoration: none;
}

/* Focus State (Tastatur-Navigation) */
.msz-cta-primary:focus-visible {
    outline: none;
    border-color: #fff; /* Weißer Innenrahmen */
    box-shadow: 0 0 0 4px var(--color-primary, #00A0E3); /* Außenring */
}

/* Icon Animation */
.msz-cta-primary i {
    transition: transform 0.2s ease;
}

.msz-cta-primary:hover i {
    transform: translateX(5px);
}

/* ==========================================================================
   TABLET & DESKTOP (ab 768px)
   Layout: Text Links, Button Rechts (oder kompakt darunter)
   ========================================================================== */
@media (min-width: 768px) {
    .msz-job-intro {
        flex-direction: row;
        align-items: center; /* Vertikal mittig */
        justify-content: space-between;
        gap: 2rem;
    }

    .msz-intro-content {
        max-width: 65%; /* Text nimmt mehr Platz ein */
    }

    .msz-intro-action {
        flex-shrink: 0;
    }

    .msz-cta-primary {
        width: auto; /* Button schrumpft auf Inhalt */
        display: inline-flex;
    }
}













/* ==========================================================================
   MODULE: JOB DETAIL KONTAKT GRID
   Optimiert für: Grid Layout, FontAwesome, CI-Variablen
   ========================================================================== */

/* --- 1. Das Grid Container (Mobile First) --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Standard: Untereinander */
    gap: var(--gutter, 20px);   /* Nutzt deine globale Gutter-Variable */
    margin-top: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* Tablet & Desktop: 2 Spalten nebeneinander */
@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 'stretch' sorgt dafür, dass beide Karten optisch gleich hoch sind, 
           auch wenn eine mehr Text hat */
        align-items: stretch; 
    }
}

/* --- 2. Die Karte (Anlehnung an deine .contact-card clean style) --- */
.clinic-card.contact-card {
    /* Reset: Keine festen Breiten oder Margins, das macht das Grid */
    margin: 0; 
    max-width: 100%; 
    height: 100%; 
    
    /* Flexbox für vertikale Ausrichtung (Sticky Footer Effekt möglich) */
    display: flex;
    flex-direction: column;
    
    /* Visueller Stil */
    background: #ffffff;
    border: 1px solid var(--color-border);
    /* Nutzt den Style deiner anderen Karten: Linker farbiger Rand */
    
    border-radius: var(--border-radius);
    box-shadow: var(--boxshadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effekt: Karte hebt sich leicht an */
.clinic-card.contact-card:hover {
    box-shadow: var(--boxshadow-hover);
    transform: translateY(-3px);
}

/* --- 3. Header Bereich --- */
.clinic-card .card-header {
    background-color: var(--color-secondary); /* Dein Hellblau */
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.clinic-card .card-header h3 {
    margin: 0;
    font-family: var(--font-bold);
    font-size: 1.1rem;
    color: var(--color-text);
    line-height: 1.3;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

.clinic-card .card-header i {
    color: var(--color-primary); /* Icon in Primary Color */
    font-size: 1.2rem;
}

/* --- 4. Body Bereich --- */
.clinic-card .card-body {
    padding: 1.5rem;
    flex-grow: 1; /* Drückt den Inhalt auseinander */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert Inhalte vertikal, wirkt aufgeräumter */
}

/* --- 5. Typografie im Inhalt --- */
.contact-structured {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-name {
    font-family: var(--font-bold);
    font-size: 1.1rem;
    color: var(--color-text); /* #222 */
    line-height: 1.3;
}

.contact-position {
    font-size: 0.95rem;
    color: var(--color-text-light); /* #666 */
    font-family: var(--font-base);
    margin-bottom: 0.75rem;
}

/* --- 6. Telefon Buttons (Design angelehnt an .filter-btn & .cta-button) --- */
.contact-phones {
    margin-top: 0.5rem; 
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    
    /* Button Look */
    background-color: #f8f9fa; /* Sehr helles Grau */
    border: 1px solid var(--color-border);
    padding: 0.6rem 1rem;
    border-radius: 4px;
    
    /* Text Styles */
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: var(--font-bold); /* Fett für bessere Lesbarkeit */
    transition: all 0.2s ease;
}

.btn-phone i {
    color: var(--color-primary); /* Icon Blau */
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

/* Button Hover State */
.btn-phone:hover, 
.btn-phone:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff; /* Weißer Text */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-phone:hover i {
    color: #ffffff; /* Icon Weiß bei Hover */
}

/* Focus für Accessibility */
.btn-phone:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}





/* ==========================================================================
   MODULE: DOWNLOAD GRID & LIST VIEW 
   View: Downloads
   ========================================================================== */

/* 1. DER CONTAINER (Das Grid/Die Liste) */
.msz-dl-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile First: 1 Spalte */
    gap: var(--gutter, 20px);
    list-style: none !important; /* Erzwingt Entfernung der Bulletpoints */
    padding: 0 !important;       /* Entfernt Standard-Einrückung */
    margin: 1.5rem 0;
}

/* 2. DIE KARTE (Basis-Design Mobile First) */
.msz-dl-card {
    background-color: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 6px);
    
    /* CI-Akzent oben (Blauer Balken) */
    border-top: 4px solid var(--color-border);
    box-shadow: var(--boxshadow, 0 2px 4px rgba(0,0,0,0.05));
    
    /* Flexbox für vertikalen Aufbau (Mobile) */
    display: flex;
    flex-direction: column; 
    height: 100%;
    
    /* WICHTIG: Bezugspunkt für den Link */
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover-Effekt: Karte hebt sich an */
.msz-dl-card.active,
.msz-dl-card:hover {
    box-shadow: var(--boxshadow-hover, 0 10px 20px rgba(0,0,0,0.1));
    border-color: var(--color-primary);
}

/* 3. INHALTSBEREICH (Body) */
.msz-dl-card__body {
    padding: 1.5rem;
    flex-grow: 1; /* Drückt den Footer nach unten */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Das Icon (Kreis) */
.msz-dl-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-secondary, #e3f2fb);
    color: var(--color-primary, #00A0E3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0; /* Verhindert Schrumpfen */
}

/* Text-Container */
.msz-dl-content {
    min-width: 0; /* Verhindert Layout-Bruch bei langem Text */
}

.msz-dl-title {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-bold, sans-serif);
    font-size: 1.1rem;
    color: var(--color-text, #333);
    line-height: 1.3;
    hyphens: auto; /* Silbentrennung */
}

.msz-dl-meta {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-light, #666);
    line-height: 1.5;
}

.msz-dl-info {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-light, #999);
    margin-top: 4px;
    display: block;
}

/* 4. FOOTER (Button Bereich) */
.msz-dl-card__footer {
    background-color: var(--color-bg-light, #f9f9f9);
    border-top: 1px solid var(--color-border, #eee);
    padding: 1rem 1.5rem;
    
    /* Wichtig: Ecken unten abrunden, damit nichts übersteht */
    border-bottom-left-radius: var(--border-radius, 6px);
    border-bottom-right-radius: var(--border-radius, 6px);
}

/* Der Link selbst */
.msz-dl-link {
    text-decoration: none;
    color: var(--color-primary, #00A0E3);
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* STRETCHED LINK TRICK (Macht ganze Karte klickbar) */
.msz-dl-link::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Icon Animation beim Hover */
.msz-dl-link i {
    transition: transform 0.2s ease;
}
.msz-dl-card:hover .msz-dl-link i {
    transform: translateY(2px);
}

/* Focus State (Barrierefreiheit) */
.msz-dl-link:focus-visible {
    outline: 2px solid var(--color-accent, #C8D66D);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ==========================================================================
   MODIFIER: LIST VIEW (Desktop: Horizontaler Aufbau)
   Klasse: .msz-dl-list-view
   ========================================================================== */

/* Ab 900px Breite schalten wir auf Querformat um */
@media (min-width: 900px) {
    
    /* Container bleibt 1-spaltig */
    .msz-dl-grid.msz-dl-list-view {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Die Karte wird zur Zeile (Row) */
    .msz-dl-list-view .msz-dl-card {
        flex-direction: row; /* Nebeneinander */
        align-items: center; /* Vertikal mittig */
        min-height: auto;
    }

    /* Body passt sich an */
    .msz-dl-list-view .msz-dl-card__body {
        margin: 0;
        border-right: 1px solid var(--color-border, #e0e0e0); /* Trennstrich zum Button */
        padding: 1.25rem 1.5rem;
    }

    /* Footer wird zum Button-Container rechts */
    .msz-dl-list-view .msz-dl-card__footer {
        width: 200px; /* Feste Breite für Button-Bereich */
        flex-shrink: 0;
        background-color: transparent; /* Kein Grau mehr */
        border-top: none; /* Linie oben weg */
        padding: 0 1.5rem; /* Padding anpassen */
        display: flex;
        justify-content: center;
        align-items: center;
        
        /* Radius-Korrektur für Rechts */
        border-bottom-left-radius: 0;
    }

    /* Hover: Pfeil bewegt sich nach rechts statt unten */
    .msz-dl-list-view .msz-dl-card:hover .msz-dl-link i {
        transform: translateX(5px);
    }
}












/* ==========================================================================
   MODULE: IMPRESSUM (Namespace .imp-*)
   ========================================================================== */

/* --- Wrapper & Layout --- */
.imp-wrapper {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    font-family: var(--font-base, sans-serif);
    color: var(--color-text, #333);
    line-height: 1.6;
}

.imp-section {
    margin-bottom: var(--sectiongap-bottom, 50px);
    border-bottom: 1px solid var(--color-border, #eee);
    padding-bottom: 2rem;
}

.imp-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* --- Headlines --- */
.imp-headline-main {
    font-family: var(--font-bold, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--color-primary, #00A0E3);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.imp-headline-section {
    font-family: var(--font-bold, sans-serif);
    font-size: 1.5rem;
    color: var(--color-text-light, #666);
    margin: 0 0 1.5rem 0;
    display: inline-block;
    border-bottom: 2px solid var(--color-primary, #00A0E3);
    padding-bottom: 5px;
}

.imp-headline-sub {
    font-family: var(--font-bold, sans-serif);
    font-size: 1.25rem;
    color: var(--color-text, #333);
    margin: 0 0 1rem 0;
}

/* --- Intro Text --- */
.imp-intro-text {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 800px;
}

/* --- Grid System (Mobile First) --- */
.imp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg, 1.5rem);
}

@media (min-width: 768px) {
    .imp-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl, 2rem);
    }
}

/* --- Cards (Kontaktdaten) --- */
.imp-card {
    background-color: var(--color-bg-light, #f9f9f9);
    border-radius: var(--border-radius, 6px);
    border-left: 5px solid var(--color-primary, #00A0E3);
    padding: var(--space-lg, 1.5rem);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.imp-card:hover {
    transform: translateY(-2px);
}

/* Flexbox für Icon + Text (Adresse oben) */
.imp-address-block {
    margin-bottom: 1rem;
    font-style: normal;
    display: flex;
    gap: 12px;
}

/* --- Listen Styles --- */
.imp-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed var(--color-border, #ccc);
    padding-top: 1rem;
}

.imp-contact-list li {
    display: flex;
    align-items: flex-start; /* Oben bündig bei Umbruch */
    gap: 12px;
    margin-bottom: 0.5rem;
}

.imp-contact-list-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}

.imp-contact-list-simple li {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- ICON Styles --- */
/* Das Haupt-Icon in der Karte */
.imp-icon {
    color: var(--color-primary, #00A0E3);
    font-size: 1.1rem;
    width: 20px;        /* Fixe Breite für saubere Kante */
    text-align: center;
    margin-top: 3px;    /* Optische Korrektur zur Textzeile */
    flex-shrink: 0;
}

/* Kleinere Icons im Footer/Datenschutz */
.imp-icon-small {
    color: var(--color-primary, #00A0E3);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}


/* --- Legal List (Definition List) --- */
.imp-legal-list {
    margin: 2rem 0;
}

.imp-legal-item {
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--color-primary, #00A0E3);
}

.imp-legal-item dt {
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text, #333);
    display: block;
    margin-bottom: 0.25rem;
}

.imp-legal-item dd {
    margin: 0;
    padding: 0;
    color: #555;
}

/* --- Typography Helpers --- */
.imp-block-title {
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text, #222);
}

.imp-address-simple {
    font-style: normal;
    margin-bottom: 0;
}

.imp-link {
    color: var(--color-primary, #00A0E3);
    text-decoration: none;
    font-weight: 600;
}

.imp-link:hover {
    text-decoration: underline;
}

.imp-spacer {
    height: var(--space-lg, 1.5rem);
}

/* --- AI Notice Style --- */
.imp-ai-notice {
    margin-top: 1rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-text-light, #888);
    background-color: #f0f0f0;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    display: inline-block;
}

.imp-ai-notice i {
    color: var(--color-text-light, #888);
    margin-right: 5px;
}







/* ==========================================================================
   MODULE: EMERGENCY SIGNAL BOX (112)
   Design-Ziel: Maximale Aufmerksamkeit, sofortige Lesbarkeit
   ========================================================================== */

.emergency-signal-box {
    /* Signalrot Verlauf für Tiefe */
    background: linear-gradient(135deg, #d90429 0%, #ef233c 100%);
    color: #ffffff;
    
    border-radius: 8px;
    /* Auffälliger Schatten, der die Box "schweben" lässt */
    box-shadow: 0 15px 35px rgba(217, 4, 41, 0.3);
    
    padding: 2rem;
    margin-bottom: 3rem;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    position: relative;
    overflow: hidden;
    
    /* Subtle Pulse Animation für Aufmerksamkeit */
    animation: urgent-pulse 3s infinite;
}

@keyframes urgent-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(217, 4, 41, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 4, 41, 0); }
}

/* Icon Kreis oben */
.esb-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(255,255,255,0.4);
}

.esb-content {
    width: 100%;
}

/* Label "LEBENSGEFAHR" */
.esb-label {
    display: block;
    font-family: var(--font-bold, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #ffd6da; /* Helles Rot-Weiß für guten Kontrast */
}

/* Die Nummer 112 - RIESIG */
.esb-number {
    display: block;
    font-family: var(--font-bold, sans-serif);
    font-weight: 800;
    /* Responsive Schriftgröße: Min 5rem, Max 9rem */
    font-size: clamp(5rem, 15vw, 9rem);
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    margin: 0.5rem 0 1.5rem 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.esb-number:hover,
.esb-number:focus {
    transform: scale(1.05);
    text-decoration: none;
    color: #fff;
}

.esb-number:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 5px;
    border-radius: 4px;
}

/* Detailbereich unten */
.esb-details {
    background-color: rgba(0, 0, 0, 0.15); /* Abdunklung für Lesbarkeit */
    padding: 1.5rem;
    border-radius: 6px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.esb-details p {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.esb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.esb-list li {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.esb-list i {
    opacity: 0.8;
}

/* --- DESKTOP ANPASSUNG --- */
@media (min-width: 900px) {
    .emergency-signal-box {
        flex-direction: row;
        text-align: left;
        padding: 3rem;
        gap: 3rem;
    }
    
    .esb-icon-wrapper {
        width: 100px;
        height: 100px;
        font-size: 3rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .esb-list {
        justify-content: flex-start;
    }
    
    .esb-details {
        margin: 0; /* Links bündig */
    }
}