/* ============================================
   BLOCKSYSTEM – DESIGN SYSTEM (NEU)
   ============================================ */

/* --------------------------------------------
   DESIGN-TOKENS (leicht anpassbar)
   -------------------------------------------- */

:root {
    /* Grautöne (neutral, modern) */
    --sa-gray-50:  #fafbfc;
    --sa-gray-100: #f4f6f8;
    --sa-gray-200: #e9edf2;
    --sa-gray-300: #d5dce5;
    --sa-gray-400: #b8c2cf;
    --sa-gray-500: #8a97a8;
    --sa-gray-600: #5a6b80;
    --sa-gray-700: #3c4a5a;
    --sa-gray-800: #222;
    --sa-gray-900: #111;

    /* Akzentfarben (nur Headlines, Buttons, Icons) */
    --sa-primary:   #23415a;
    --sa-secondary: #4a7ba8;
	--sa-light-blue: #eef7ff;
	--sa-red: #da121a;

    /* Layout */
    --sa-max-content-width: 1200px;
    --sa-fullwidth-modules: full; /* full | content */

    /* Abstände */
    --sa-gap-large: 1rem;
    --sa-gap-medium: 1.5rem;
    --sa-gap-small: 0.75rem;
    --sa-gap-smaller: 0.50rem;

    /* Rundungen & Schatten */
    --sa-radius: 4px;
    --sa-shadow: 0 1px 3px rgba(0,0,0,0.08);

    /* Typografie */
    --sa-font-size-base: 1.05rem;
    --sa-font-size-headline: 1.6rem;
    --sa-font-size-subheadline: 1.3rem;
}


/* --------------------------------------------
   GLOBAL WRAPPER
   -------------------------------------------- */

.sa-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap-large);
    margin: 1rem 0 3rem 0;
}

.sa-block {
    width: 100%;
    max-width: var(--sa-max-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Fullwidth-Module (Hero, Slider, Video, Map) */
.sa-block-fullwidth {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Wenn global auf Content-Breite umgestellt wird */
:root:not([style*="--sa-fullwidth-modules: full"]) .sa-block-fullwidth {
    max-width: var(--sa-max-content-width);
    margin-left: auto;
    margin-right: auto;
}

.page-Gemeinderat .sa-block-columns + .sa-block-columns {
    margin-top: -60px;
}


/* --------------------------------------------
   HEADLINE
   -------------------------------------------- */

.sa-headline {
    margin: 0 0 var(--sa-gap-small) 0;
    font-weight: 600;
    line-height: 1.3;
    font-size: var(--sa-font-size-headline);
    color: var(--sa-primary);
}


/* --------------------------------------------
   TEXT
   -------------------------------------------- */

.sa-text {
    line-height: 1.7;
    font-size: var(--sa-font-size-base);
    color: var(--sa-gray-800);
}

/* --------------------------------------------
   TEXT � Links optisch aufwerten (Aidhausen-Style)
-------------------------------------------- */

.sa-text a {
    color: var(--sa-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid rgba(35, 65, 90, 0.25); /* basiert auf --sa-primary */
    padding-bottom: 1px;
    transition: 
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.sa-text a:hover {
    color: var(--sa-secondary);
    border-bottom-color: rgba(74, 123, 168, 0.55); /* basiert auf --sa-secondary */
    background-color: rgba(74, 123, 168, 0.08);
    border-radius: var(--sa-radius);
}

.sa-text a:active {
    color: var(--sa-gray-900);
    border-bottom-color: rgba(35, 65, 90, 0.8);
}

.sa-text a:visited {
    color: var(--sa-secondary);
    opacity: 0.85;
}

/* --------------------------------------------
   IMAGE LEFT / RIGHT (modern, neutral)
   -------------------------------------------- */

/* --------------------------------------------
   IMAGE LEFT / RIGHT – Bild im Textfluss
   -------------------------------------------- */

.sa-image-block {
    width: 100%;
}

/* Gemeinsame Bilddarstellung */
.sa-inline-image img {
    max-width: 260px;
    height: auto;
    display: block;
    padding: 4px;
    background: var(--sa-gray-50);
    border: 1px solid var(--sa-gray-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Bild rechts eingebettet */
.sa-inline-right {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

/* Bild links eingebettet */
.sa-inline-left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* Text */
.sa-image-block .sa-content {
    text-align: justify;
    hyphens: auto;
}

/* Mobile */
@media (max-width: 768px) {

    .sa-inline-right,
    .sa-inline-left {
        float: none;
        margin: 0 auto 15px auto;
        display: block;
        text-align: center;
    }

    .sa-inline-image img {
        max-width: 100%;
    }
}

/* --------------------------------------------
   TABLE
   -------------------------------------------- */

.sa-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sa-gap-medium) 0;
    font-size: 0.98rem;
}

.sa-table th {
    background: var(--sa-primary);
    color: white;
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.sa-table td {
    border: 1px solid var(--sa-gray-300);
    padding: 0.6rem 0.8rem;
}

.sa-table tr:nth-child(even) td {
    background: var(--sa-gray-100);
}

/* --------------------------------------------
   TABLE � MOBILE STACKING (FINAL VERSION)
   -------------------------------------------- */
@media (max-width: 768px) {

    /* Alles block-level, damit wir volle Kontrolle haben */
    .sa-table,
    .sa-table thead,
    .sa-table tbody,
    .sa-table th,
    .sa-table td,
    .sa-table tr {
        display: block;
        width: 100%;
    }

    /* Header komplett ausblenden */
    .sa-table thead {
        display: none;
    }

    /* Jede Tabellenzeile = Karte */
    .sa-table tr {
        margin-bottom: 18px;
        border: 1px solid var(--sa-gray-300);
        padding: 14px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    /* Jede Zelle untereinander, niemals nebeneinander */
    .sa-table td {
        display: block;
        padding: 6px 2px;
        border: none;
        font-size: 0.95rem;

        /* WICHTIG: Inhalte d�rfen NIE abgeschnitten werden */
        word-break: normal;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Label oben, Wert darunter */
    .sa-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;

        font-weight: 600;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.75rem;
        opacity: 0.7;

        /* Lange Labels brechen sauber */
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Leere Zellen komplett entfernen */
    .sa-table td:empty {
        display: none;
    }

    /* Leere Header-Zeilen entfernen */
    .sa-table tr:has(th:empty) {
        display: none;
    }
}

/* --------------------------------------------
   GALLERY � Hover f�r Lightbox
-------------------------------------------- */
.sa-gallery-item img {
    cursor: zoom-in;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.sa-gallery-item img:hover {
    transform: scale(1.03);
    opacity: 0.85;
}

/* --------------------------------------------
   LIGHTBOX � global
-------------------------------------------- */
.sa-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.sa-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(2px);
}

.sa-lightbox img {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: sa-lightbox-zoom 0.15s ease-out;
}

@keyframes sa-lightbox-zoom {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* --------------------------------------------
   GALLERY � Caption optisch aufwerten
-------------------------------------------- */
.sa-caption {
    margin-top: 0.5rem;
    padding: 6px 10px;
    background: rgba(0,0,0,0.05);
    border-radius: var(--sa-radius);
    font-size: 0.9rem;
    color: var(--sa-gray-700);
    line-height: 1.35;
    backdrop-filter: blur(2px);
    transition: background 0.2s ease-out, transform 0.2s ease-out;
}

/* Hover-Effekt: Caption leicht anheben */
.sa-gallery-item:hover .sa-caption {
    background: rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* --------------------------------------------
   IFRAME
   -------------------------------------------- */

.sa-iframe iframe {
    width: 100% !important;
    height: var(--sa-iframe-height) !important;
    border: 1px solid var(--sa-gray-300);
    border-radius: var(--sa-radius);
    display: block;
}

/* --------------------------------------------
   DIVIDER
   -------------------------------------------- */

.sa-divider {
    width: 100%;
}

/* Abstand klein/mittel/groß */
.sa-divider-s {
    margin: 10px 0;
}

.sa-divider-m {
    margin: 25px 0;
}

.sa-divider-l {
    margin: 45px 0;
}

/* Linie optional */
.sa-divider-line {
    border-bottom: 1px solid var(--sa-gray-300);
}


/* --------------------------------------------
   MAP (Fullwidth optional)
   -------------------------------------------- */

.sa-map-inner iframe {
    width: 100%;
    height: 380px;
    border: 1px solid var(--sa-gray-300);
    background: var(--sa-gray-50);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --------------------------------------------
   LINKS (global, modern, neutral)
   -------------------------------------------- */

.sa-text a {
    color: var(--sa-primary);
    text-decoration: none;
    font-weight: 500;
}

.sa-text a:hover {
    color: var(--sa-secondary);
    text-decoration: underline;
}

/* --------------------------------------------
   GALLERY (einheitliche Bildhöhe)
   -------------------------------------------- */

.sa-gallery {
    display: grid;
    gap: var(--sa-gap-medium);
}

.sa-gallery-medium {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.sa-gallery-large {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sa-gallery-item img {
    width: 100%;
    height: 180px; /* EINHEITLICHE HÖHE */
    object-fit: cover; /* WICHTIG! */
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow);
}

.sa-caption {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--sa-gray-600);
}

/* --------------------------------------------
   HERO (Fullwidth, modern, neutral)
   -------------------------------------------- */

.sa-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Track für horizontales Sliden */
.sa-hero-track {
    display: flex;
    transition: transform 0.6s ease;
    width: 100%;
}

/* Einzelner Slide */
.sa-hero-slide {
    min-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Hintergrundbild (volle Breite, einheitliche Höhe) */
.sa-hero-image {
    width: 100%;
    height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Inhalt über dem Bild */
.sa-hero-content {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    max-width: 600px;
    color: var(--sa-gray-50);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.sa-hero-content h2 {
    margin: 0 0 var(--sa-gap-small) 0;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--sa-gray-50); /* Weiß, da über Bild */
}

.sa-hero-text {
    margin-bottom: var(--sa-gap-small);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--sa-gray-50);
}

/* Buttons im Hero */
.sa-hero-content .sa-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--sa-primary);
    color: white;
    border-radius: var(--sa-radius);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease;
}

.sa-hero-content .sa-button:hover {
    background: var(--sa-secondary);
}

/* Stop/Play Buttons */
.sa-hero-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.sa-hero-controls button {
    background: rgba(0,0,0,0.45);
    color: white;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: var(--sa-radius);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.sa-hero-controls button:hover {
    background: rgba(0,0,0,0.65);
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */

@media (max-width: 768px) {

    .sa-hero-image {
        height: 260px;
    }

    .sa-hero-content {
        bottom: 1rem;
        left: 1rem;
        max-width: 90%;
    }

    .sa-hero-content h2 {
        font-size: 1.5rem;
    }

    .sa-hero-text {
        font-size: 1rem;
    }
}

/* --------------------------------------------
   ACCORDION (modern, kompakt, Aidhausen-Style)
   -------------------------------------------- */

.sa-accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px; /* kleiner Abstand */
}

.sa-acc-header {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.8rem; /* kompakter */
    background: #da121a; /* Aidhausen-Rot */
    color: white;
    border: 1px solid #b50f16; /* etwas dunklerer Rand */
    cursor: pointer;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-acc-header[aria-expanded="true"] {
    background: #b50f16; /* dunkler bei aktiv */
}

.sa-acc-icon {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.sa-acc-body {
    border: 1px solid var(--sa-gray-300);
    border-top: none;
    padding: 0;
}

.sa-acc-body-inner {
    padding: 0.8rem 1rem; /* kompakter */
    background: white;
}

/* --------------------------------------------
   ACCORDION – Bildgrößen & Layout
   -------------------------------------------- */

/* Bilder oben/unten */
.sa-acc-img-block img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   LINKS / RECHTS – Grundlayout
   -------------------------------------------- */
.sa-acc-img-text-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Text */
.sa-acc-text {
    flex: 1;
    line-height: 1.55;
}

/* --------------------------------------------
   RECHTE BILDSPALTE – Galerie nebeneinander
   -------------------------------------------- */
.sa-acc-img-right {
    display: flex;
    flex-wrap: wrap;              /* mehrere Bilder nebeneinander */
    gap: 12px;                    /* Abstand zwischen Bildern */
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-width: 400px;             /* verhindert Überbreite */
}

/* Bilder rechts nebeneinander */
.sa-acc-img-right img {
    width: 180px;                 /* feste Breite */
    height: 120px;                /* feste Höhe */
    object-fit: cover;            /* sauberer Zuschnitt */
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   LINKE BILDSPALTE – gleiche Galerie-Optik
   -------------------------------------------- */
.sa-acc-img-left {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-width: 400px;
}

.sa-acc-img-left img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   MOBILE – Bilder untereinander
   -------------------------------------------- */
@media (max-width: 768px) {
    .sa-acc-img-text-row {
        flex-direction: column;
    }

    .sa-acc-img-left,
    .sa-acc-img-right {
        max-width: 100%;
        width: 100%;
    }

    .sa-acc-img-left img,
    .sa-acc-img-right img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* --------------------------------------------
   LIGHTBOX – Aidhausen Style
   -------------------------------------------- */

.sa-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.sa-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(2px);
}

.sa-lightbox img {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: sa-lightbox-zoom 0.15s ease-out;
}

@keyframes sa-lightbox-zoom {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* --------------------------------------------
   LIGHTBOX – Hover-Hinweis auf klickbare Bilder
   -------------------------------------------- */

.sa-acc-img-block img,
.sa-acc-img-left img,
.sa-acc-img-right img {
    position: relative;
    cursor: zoom-in; /* zeigt sofort: klickbar */
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Hover-Effekt */
.sa-acc-img-block img:hover,
.sa-acc-img-left img:hover,
.sa-acc-img-right img:hover {
    transform: scale(1.03);
    opacity: 0.85;
}

/* Lupen-Icon Overlay */
.sa-acc-img-block img::after,
.sa-acc-img-left img::after,
.sa-acc-img-right img::after {
    content: "🔍";
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 20px;
    background: rgba(0,0,0,0.55);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Icon sichtbar beim Hover */
.sa-acc-img-block img:hover::after,
.sa-acc-img-left img:hover::after,
.sa-acc-img-right img:hover::after {
    opacity: 1;
}


/* --------------------------------------------
   TABS (klassisch, modern, Aidhausen-Style)
   -------------------------------------------- */

.sa-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Kopfzeile */
.sa-tab-headers {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--sa-gray-300);
}

/* Tab-Button */
.sa-tab-header {
    padding: 0.6rem 1rem;
    background: var(--sa-gray-100);
    border: 1px solid var(--sa-gray-300);
    border-bottom: none;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    border-radius: 0;
}

.sa-tab-header[aria-selected="true"] {
    background: #da121a; /* Aidhausen-Rot */
    color: white;
    border-color: #b50f16;
}

/* Inhalte */
.sa-tab-body {
    border: 1px solid var(--sa-gray-300);
    padding: 0;
}

.sa-tab-body-inner {
    padding: 1rem;
    background: white;
}

/* --------------------------------------------
   TABS � Bildgr��en & Layout (wie Accordion)
-------------------------------------------- */

/* Bilder oben/unten */
.sa-tab-img-block img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   LINKS / RECHTS � Grundlayout
-------------------------------------------- */
.sa-tab-img-text-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Text */
.sa-tab-text {
    flex: 1;
    line-height: 1.55;
}

/* --------------------------------------------
   RECHTE BILDSPALTE � Galerie nebeneinander
-------------------------------------------- */
.sa-tab-img-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-width: 400px;
}

.sa-tab-img-right img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   LINKE BILDSPALTE � gleiche Galerie-Optik
-------------------------------------------- */
.sa-tab-img-left {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-width: 400px;
}

.sa-tab-img-left img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --------------------------------------------
   MOBILE � Bilder untereinander
-------------------------------------------- */
@media (max-width: 768px) {
    .sa-tab-img-text-row {
        flex-direction: column;
    }

    .sa-tab-img-left,
    .sa-tab-img-right {
        max-width: 100%;
        width: 100%;
    }

    .sa-tab-img-left img,
    .sa-tab-img-right img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* --------------------------------------------
   LIGHTBOX � Aidhausen Style
-------------------------------------------- */

.sa-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.sa-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(2px);
}

.sa-lightbox img {
    position: relative;
    max-width: 60%;
    max-height: 60%;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: sa-lightbox-zoom 0.15s ease-out;
}

@keyframes sa-lightbox-zoom {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* --------------------------------------------
   LIGHTBOX � Hover-Hinweis auf klickbare Bilder
-------------------------------------------- */

.sa-tab-img-block img,
.sa-tab-img-left img,
.sa-tab-img-right img {
    position: relative;
    cursor: zoom-in;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Hover-Effekt */
.sa-tab-img-block img:hover,
.sa-tab-img-left img:hover,
.sa-tab-img-right img:hover {
    transform: scale(1.03);
    opacity: 0.85;
}

/* Lupen-Icon Overlay */
.sa-tab-img-block img::after,
.sa-tab-img-left img::after,
.sa-tab-img-right img::after {
    content: "??";
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 20px;
    background: rgba(0,0,0,0.55);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Icon sichtbar beim Hover */
.sa-tab-img-block img:hover::after,
.sa-tab-img-left img:hover::after,
.sa-tab-img-right img:hover::after {
    opacity: 1;
}

.sa-tab-img-block img[src$=".png"] {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 10px 0; /* statt auto */
}

/* --------------------------------------------
   COLUMNS GRID-LAYOUT (medium/large)
   -------------------------------------------- */

/* GRID */
.sa-columns {
    width: 100%;
    display: grid;
    gap: 30px;
    margin: 40px 0;
}

/* Abstand zwischen zwei Columns-Modulen reduzieren */
.sa-columns + .sa-columns {
    margin-top: 20px; /* statt 40px */
}


.sa-columns.columns-2 { grid-template-columns: repeat(2, 1fr); }
.sa-columns.columns-3 { grid-template-columns: repeat(3, 1fr); }
.sa-columns.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* CARD */
.sa-col-item {
    background: white;
    border: 1px solid var(--sa-gray-300);
    padding: 1.2rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* LARGE */
.columns-img-large .sa-col-image-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: 1rem;
}

.columns-img-large .sa-col-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* MEDIUM */
.columns-img-medium .sa-col-image-wrapper {
    width: 180px;
    height: auto;
    aspect-ratio: auto;
    margin: 0 auto 1rem auto;
}

.columns-img-medium .sa-col-image {
    width: 180px;
    height: auto;
    object-fit: cover;
}

/* SMALL */
.sa-col-item-small {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.sa-col-image-small {
    width: 124px;
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
}

/* Inhaltsspalte soll den verf�gbaren Platz f�llen */
.sa-col-content,
.sa-col-content-small {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1; /* WICHTIG! */
}

/* E-Mail immer unten im Block */
.sa-col-text:last-child {
    margin-top: auto;
}

/* --------------------------------------------
   MEDIUM: Text zentrieren
   -------------------------------------------- */
.columns-img-medium .sa-col-content {
    text-align: center;
}

/* --------------------------------------------
   Aidhausen-Rot f�r Namen & E-Mail
   -------------------------------------------- */
.sa-col-item h3,
.sa-col-content-small h3 {
	font-size:18px;
    color: var(--sa-red) !important;
}

.sa-col-text a {
    color: var(--sa-red) !important;
    font-weight: 600;
    text-decoration: none;
}

.sa-col-text a:hover {
    color: var(--sa-primary) !important; /* etwas dunkler */
}

/* Button unten */
.sa-col-btn {
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--sa-red);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border: none;
    border-radius: var(--sa-radius);
	text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sa-col-btn:hover {
    background-color: color-mix(in srgb, var(--sa-red) 80%, black);
}

.sa-col-item .sa-col-btn {
    margin-top: auto;
}

/* MOBILE */
@media (max-width: 768px) {
    .sa-columns {
        grid-template-columns: 1fr !important;
    }

    .sa-col-item-small {
        flex-direction: column;
    }

    .sa-col-image-small {
        width: 100%;
        max-width: 200px;
        margin-bottom: 1rem;
    }
}

/* --------------------------------------------
   AUTOMATISCHE BILD-RATIO ERKENNUNG
   -------------------------------------------- */

/* Basis */
.sa-col-image-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Querformat → 16:9 */
.sa-col-image-wrapper.ratio-16-9 {
    aspect-ratio: auto; /* 16:9 deaktivieren */
}

.sa-col-image-wrapper.ratio-16-9 .sa-col-image {
    width: 100%;
    height: auto;
    object-fit: contain; /* oder cover + top */
    object-position: top;
}


/* Hochformat → Bild komplett sichtbar */
.sa-col-image-wrapper.ratio-portrait .sa-col-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Quadratisch → 1:1 */
.sa-col-image-wrapper.ratio-square {
    aspect-ratio: 1 / 1;
}

.sa-col-image-wrapper.ratio-square .sa-col-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback */
.sa-col-image-wrapper.ratio-auto .sa-col-image {
    width: 100%;
    height: auto;
}

/* Hochformat → natürliche Höhe, kein Beschnitt */
.sa-col-image-wrapper.ratio-portrait {
    aspect-ratio: auto;
}

.sa-col-image-wrapper.ratio-portrait .sa-col-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
}


/* ============================================
   CONTACT FORM – Aidhausen Style (optimiert)
   ============================================ */

.sa-contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap-medium);
    padding: 1.5rem;
    border: 1px solid var(--sa-gray-300);
    background: white;
    border-radius: var(--sa-radius);
}

/* Erfolgsmeldung */
.sa-contact-success {
    border: 1px solid #c3e6cb;
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: var(--sa-radius);
    margin-bottom: 1.5rem;
}

/* Jede Zeile */
.sa-contact-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--sa-gap-smaller);
}

/* Label */
.sa-contact-label {
    font-weight: 600;
    color: var(--sa-gray-800);
    margin-bottom: 0.25rem; /* Abstand zum Input */
}

/* Inputs */
.sa-contact-input,
.sa-contact-form textarea,
.sa-contact-form select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--sa-gray-300);
    background: var(--sa-gray-50);
    border-radius: var(--sa-radius);
    font: inherit;
    box-sizing: border-box;
}

.sa-contact-form textarea {
    min-height: 120px;
}

/* Pflichtstern */
.sa-contact-required {
    color: #da121a;
    font-weight: 700;
}

/* Checkbox-Zeile */
.sa-contact-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
    margin-top: 0.4rem;
}

/* Abstand vor der Bestätigungs-Checkbox */
.sa-contact-confirm {
    margin-top: var(--sa-gap-small);
}

/* Honeypot komplett unsichtbar */
.sa-contact-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Submit-Button unten rechts */
.sa-contact-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sa-gap-medium);
}

/* Button */
.sa-contact-button {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: var(--sa-primary);
    color: white;
    border: none;
    border-radius: var(--sa-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

.sa-contact-button:hover {
    background: var(--sa-secondary);
}

/* Datenschutzerklärung – Infobox */
.sa-contact-confirm-box {
    background: var(--sa-gray-100);
    border: 1px solid var(--sa-gray-300);
    padding: 1rem;
    border-radius: var(--sa-radius);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    line-height: 1.5;
}

/* Checkbox auf gleiche Höhe wie Text */
.sa-contact-confirm-box input[type="checkbox"] {
    margin-top: 0; /* hebt die Checkbox NICHT mehr an */
    transform: translateY(1px); /* optisch perfekt mittig */
}

/* Kopie-Box (optisch getrennt vom Datenschutz) */
.sa-contact-copy-box {
    background: var(--sa-light-blue);
    border: 1px solid var(--sa-gray-300);
    padding: 10px;
    border-radius: var(--sa-radius);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    line-height: 1.5;
    /*margin-top: var(--sa-gap-smaller);*/
}

.sa-contact-copy-box input[type="checkbox"] {
    margin-top: 4px;
    transform: translateY(1px);
}

/* LOGO-MODUS – automatische Erkennung */
.sa-img-logo {
    width: 320px;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    background: var(--sa-gray-50);
    padding: 4px;
    border: 1px solid var(--sa-gray-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Foto-Modus (Standard) */
.sa-img-photo {
    width: 320px;
    height: 220px;
    object-fit: cover;
    padding: 4px;
    background: var(--sa-gray-50);
    border: 1px solid var(--sa-gray-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
    .sa-img-logo {
        width: 100%;
        height: auto;
        max-height: 200px;
    }

    .sa-img-photo {
        width: 100%;
        height: 200px;
    }
}

/* ============================================
   MODULE: PDF DOWNLOAD GROUP (Frontend)
   Datei: block_module_frontend/pdf_download_group.php
   ============================================ */

.sa-pdf-download-group {
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap-medium);
    margin: var(--sa-gap-large) 0;
}

/* Titel */
.sa-pdf-title {
    font-size: var(--sa-font-size-headline);
    color: var(--sa-primary);
    margin-bottom: var(--sa-gap-small);
}

/* Beschreibung */
.sa-pdf-description {
    font-size: var(--sa-font-size-base);
    color: var(--sa-gray-700);
    line-height: 1.6;
    margin-bottom: var(--sa-gap-medium);
    white-space: pre-line !important;
}


/* 3-Spalten-Layout */
.sa-pdf-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    padding: var(--sa-gap-small) 0;
    border-bottom: 1px solid var(--sa-gray-300);
}

/* Spalte 1: Icon */
.sa-pdf-col-icon img {
    width: 64px;
    height: 84px;
    object-fit: contain;
}

/* Spalte 2: Label */
.sa-pdf-col-label {
    padding-right: var(--sa-gap-small);
}

.sa-pdf-label {
    font-size: var(--sa-font-size-base);
    font-weight: 600;
    color: var(--sa-primary);
}

/* Spalte 3: Button */
.sa-pdf-col-button {
    text-align: right;
}

.sa-pdf-button {
    padding: 6px 14px;
    background: var(--sa-secondary);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.sa-pdf-button:hover {
    background: #3a6a92;
}

/* Standard-Icons (PDF, Word, Excel, etc.) */
.sa-pdf-icon {
    width: 64px;
    height: 84px;
    object-fit: contain;
}

/* Thumbnails (wenn im Backend gesetzt) */
.sa-pdf-thumb-large {
    width: 200px;      /* oder 180px, 200px */
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Gr��ere Spalte f�r Thumbnails */
.sa-pdf-item.has-thumbnail {
    grid-template-columns: 180px 1fr auto;
}

.sa-pdf-col-icon img.sa-pdf-thumb-large {
    width: 160px;
    height: auto;
}


/* Mobile */
@media (max-width: 600px) {
    .sa-pdf-item {
        display: flex;
        flex-direction: column;
        align-items: center; /* <-- statt flex-start */
        text-align: center;  /* <-- Text auch zentrieren */
        gap: var(--sa-gap-small);
    }

    .sa-pdf-col-label {
        text-align: center; /* Titel zentrieren */
        width: 100%;
    }

    .sa-pdf-col-button {
        text-align: center;
        width: 100%;
    }

    .sa-pdf-button {
        display: inline-block;
        width: auto;
        padding: 10px 18px;
        margin-top: 6px;
    }
}



/* ---------------------------------------------------------
   Modul: TEASER / HIGHLIGHT
   Datei: sa_teaser.css
   Beschreibung:
   Frontend Styles für das Teaser‑Highlight‑Modul
   --------------------------------------------------------- */

/* Teaser über komplette Browserbreite */
.sa-block-teaser_highlight {
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap-medium);
    margin: var(--sa-gap-large) 0;
}

/* Basis */
.sa-teaser {
    padding: 14px 18px;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Optionen */
.sa-teaser-border { border: 1px solid #ccc; }
.sa-teaser-shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.sa-teaser-rounded { border-radius: 6px; }
.sa-teaser-center { text-align: center; }

/* Icon */
.sa-teaser-icon {
    display: inline-block;
    margin-right: 8px;
    font-weight: bold;
}

/* Farben */
.sa-teaser-default { background:#f5f5f5; color:#333; }
.sa-teaser-aidhausen { background:#b30000; color:#fff; }
.sa-teaser-warning { background:#fff3cd; color:#856404; }
.sa-teaser-info { background:#d1ecf1; color:#0c5460; }
.sa-teaser-success { background:#d4edda; color:#155724; }
.sa-teaser-danger { background:#f8d7da; color:#721c24; }

.sa-team-line {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* <-- wichtig f�r automatische Anpassung */
    justify-content: flex-start;
}

.sa-team-person {
    width: 140px;
    text-align: center;
    flex-shrink: 0;
}

.sa-team-person img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 3px; /* keine Rundungen */
    display: block;
    margin: 0 auto;
}

.sa-team-person .name {
    font-weight: bold;
    margin-top: 6px;
}

.sa-team-person .role {
    font-size: 13px;
    line-height: 1.3;
    margin-top: 3px;
}